.mono { font-family: 'DM Mono', monospace; }

/* ====== TABS ====== */
.tab-btn.active { background: #1a5c38; color: #fff; }
.tab-btn { transition: all .2s; }

/* ====== BADGES ====== */
.status-badge { font-family: 'DM Mono', monospace; font-size: .7rem; padding: .2rem .6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.badge-pending  { background: #fef3c7; color: #92400e; }
.badge-approved { background: #d1fae5; color: #065f46; }
.badge-declined { background: #fee2e2; color: #991b1b; }

/* ====== TOGGLE SWITCH ====== */
.toggle { position: relative; width: 44px; height: 24px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 999px; cursor: pointer; transition: .3s; }
.slider:before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .3s; }
input:checked + .slider { background: #1a5c38; }
input:checked + .slider:before { transform: translateX(20px); }

/* ====== CARDS ====== */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.25rem; }

/* ====== INPUTS ====== */
.input-field { width: 100%; border: 1.5px solid #e5e7eb; border-radius: 8px; padding: .55rem .85rem; font-size: .875rem; outline: none; transition: border-color .2s; }
.input-field:focus { border-color: #1a5c38; }

/* ====== BUTTONS ====== */
.btn-primary { background: #1a5c38; color: #fff; border: none; padding: .55rem 1.2rem; border-radius: 8px; font-size: .875rem; font-weight: 500; cursor: pointer; transition: opacity .2s; }
.btn-primary:hover { opacity: .88; }
.btn-danger  { background: #dc2626; color: #fff; border: none; padding: .4rem .9rem; border-radius: 6px; font-size: .8rem; cursor: pointer; transition: opacity .2s; }
.btn-danger:hover { opacity: .85; }
.btn-ghost   { background: transparent; border: 1.5px solid #e5e7eb; padding: .4rem .9rem; border-radius: 6px; font-size: .8rem; cursor: pointer; transition: all .2s; }
.btn-ghost:hover { border-color: #1a5c38; color: #1a5c38; }

/* ====== SIDEBAR ====== */
.sidebar-link { display: flex; align-items: center; gap: 10px; padding: 15px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all .2s; color: #6b7280; background: rgba(26, 92, 56, 0.04); }
.sidebar-link.active { background: #1a5c38; color: #fff; }
.sidebar-link:hover { background: rgba(26, 92, 56, 0.1); color: rgba(26, 92, 56, 1); }
.sidebar-link svg { width: 18px; height: 18px; }

/* ====== TOAST ====== */
#toast { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; }
.toast-item { background: #1a1a1a; color: #fff; padding: .75rem 1.25rem; border-radius: 8px; font-size: .875rem; margin-top: .5rem; opacity: 0; transform: translateY(10px); transition: all .3s; }
.toast-item.show { opacity: 1; transform: none; }
.toast-item.success { border-left: 3px solid #16a34a; }
.toast-item.error   { border-left: 3px solid #dc2626; }