/* ── Variables ─────────────────────────────────────────── */
:root {
  --primary:   #4F46E5;
  --primary-h: #4338CA;
  --cyan:      #06B6D4;
  --navy:      #1E293B;
}

/* ── Buttons ───────────────────────────────────────────── */
.btn { display:inline-flex;align-items:center;gap:6px;padding:9px 20px;border-radius:8px;font-size:.875rem;font-weight:600;border:none;cursor:pointer;transition:all .15s;text-decoration:none; }
.btn-primary { background:var(--primary);color:#fff; }
.btn-primary:hover { background:var(--primary-h); }
.btn-outline  { background:#fff;color:var(--primary);border:1.5px solid var(--primary); }
.btn-outline:hover { background:#EEF2FF; }
.btn-danger   { background:#EF4444;color:#fff; }
.btn-danger:hover { background:#DC2626; }
.btn-success  { background:#22C55E;color:#fff; }
.btn-success:hover { background:#16A34A; }
.btn-gray     { background:#F3F4F6;color:#374151;border:1px solid #E5E7EB; }
.btn-gray:hover { background:#E5E7EB; }
.btn-sm { padding:6px 14px;font-size:.8rem; }
.btn-lg { padding:12px 28px;font-size:1rem; }
.btn-full { width:100%;justify-content:center; }

/* ── Form ──────────────────────────────────────────────── */
.form-label { display:block;font-size:.875rem;font-weight:600;color:#374151;margin-bottom:5px; }
.form-input  { display:block;width:100%;padding:9px 12px;border:1px solid #D1D5DB;border-radius:8px;font-size:.875rem;color:#111827;background:#fff;outline:none;transition:border-color .15s,box-shadow .15s; }
.form-input:focus { border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.1); }
select.form-input { appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right 8px center;background-repeat:no-repeat;background-size:1.2em;padding-right:36px; }
textarea.form-input { resize:vertical;min-height:90px; }
.form-group { margin-bottom:16px; }
.form-hint { font-size:.78rem;color:#9CA3AF;margin-top:4px; }
.form-error { font-size:.78rem;color:#EF4444;margin-top:4px; }

/* ── Card ──────────────────────────────────────────────── */
.card { background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.04); }
.card-sm { padding:16px; }

/* ── Stat card ─────────────────────────────────────────── */
.stat-card { background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:20px 24px;border-top:3px solid var(--primary); }

/* ── Badges ────────────────────────────────────────────── */
.badge { display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:.72rem;font-weight:600;white-space:nowrap; }
.badge-blue   { background:#EFF6FF;color:#1D4ED8; }
.badge-green  { background:#F0FDF4;color:#15803D; }
.badge-yellow { background:#FEFCE8;color:#B45309; }
.badge-red    { background:#FEF2F2;color:#DC2626; }
.badge-gray   { background:#F3F4F6;color:#6B7280; }

/* ── Alert ─────────────────────────────────────────────── */
.alert { padding:12px 16px;border-radius:8px;font-size:.875rem;font-weight:500;margin-bottom:16px; }
.alert-success { background:#F0FDF4;color:#15803D;border:1px solid #BBF7D0; }
.alert-error   { background:#FEF2F2;color:#DC2626;border:1px solid #FECACA; }
.alert-info    { background:#EFF6FF;color:#1D4ED8;border:1px solid #BFDBFE; }
.alert-warning { background:#FFFBEB;color:#B45309;border:1px solid #FDE68A; }

/* ── Sidebar link ──────────────────────────────────────── */
.sidebar-link { display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;font-size:.875rem;font-weight:500;color:#4B5563;text-decoration:none;transition:all .15s; }
.sidebar-link:hover { background:#EEF2FF;color:var(--primary); }
.sidebar-link.active { background:#EEF2FF;color:var(--primary);font-weight:600; }
.sidebar-section { font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#9CA3AF;padding:8px 12px;margin-top:8px; }

/* ── Table ─────────────────────────────────────────────── */
.tbl { width:100%;border-collapse:collapse;font-size:.875rem; }
.tbl th { padding:10px 16px;text-align:left;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#6B7280;background:#F9FAFB;border-bottom:1px solid #E5E7EB; }
.tbl td { padding:13px 16px;border-bottom:1px solid #F3F4F6;color:#111827;vertical-align:middle; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tbody tr:hover { background:#FAFAFA; }

/* ── Modal ─────────────────────────────────────────────── */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:50;display:none;align-items:center;justify-content:center;padding:20px; }
.modal-overlay.open { display:flex; }
.modal-box { background:#fff;border-radius:16px;padding:28px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.15); }

/* ── Toast ─────────────────────────────────────────────── */
#toast-wrap { position:fixed;bottom:20px;right:20px;z-index:999;display:flex;flex-direction:column;gap:8px; }
.toast { padding:12px 18px;border-radius:10px;font-size:.875rem;font-weight:500;color:#fff;min-width:220px;box-shadow:0 4px 20px rgba(0,0,0,.15);animation:toastIn .25s ease; }
.toast-success { background:#15803D; }
.toast-error   { background:#DC2626; }
.toast-info    { background:#1D4ED8; }
@keyframes toastIn { from{transform:translateX(120%);opacity:0} to{transform:translateX(0);opacity:1} }

/* ── Pagination ─────────────────────────────────────────── */
.page-link { display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;border:1px solid #D1D5DB;font-size:.8rem;color:#374151;text-decoration:none;transition:all .15s; }
.page-link:hover,.page-link.active { background:var(--primary);border-color:var(--primary);color:#fff; }

/* ── Charge row ─────────────────────────────────────────── */
.charge-row { display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed #E5E7EB;font-size:.875rem; }
.charge-row:last-child { border:none;font-weight:700;font-size:.95rem;padding-top:10px;border-top:1px solid #E5E7EB; }