/* =============================================
   Institution Billing — Main Stylesheet
   ============================================= */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&display=swap');

/* ---- DESIGN TOKENS ---- */
:root, [data-theme="light"] {
  --font-body: 'Satoshi', system-ui, sans-serif;
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-lg:   clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;
  --color-bg:              #f5f5f0;
  --color-surface:         #ffffff;
  --color-surface-2:       #fafaf8;
  --color-surface-offset:  #f0efea;
  --color-surface-dynamic: #e8e7e2;
  --color-border:          rgba(0,0,0,0.10);
  --color-divider:         rgba(0,0,0,0.07);
  --color-text:            #1a1917;
  --color-text-muted:      #6b6a66;
  --color-text-faint:      #b0afab;
  --color-text-inverse:    #ffffff;
  --color-primary:         #0f5a8f;
  --color-primary-hover:   #0a4570;
  --color-primary-light:   #ddeaf5;
  --color-success:         #1a6e35;
  --color-success-hover:   #145228;
  --color-success-light:   #d4edda;
  --color-error:           #b91c1c;
  --color-error-hover:     #991b1b;
  --color-error-light:     #fee2e2;
  --color-warning:         #92400e;
  --color-warning-hover:   #78350f;
  --color-warning-light:   #fef3c7;
  --radius-sm: 0.3rem; --radius-md: 0.5rem; --radius-lg: 0.625rem; --radius-xl: 0.875rem; --radius-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.05);
  --sidebar-w: 230px;
  --topbar-h:  56px;
  --transition: 150ms cubic-bezier(0.16,1,0.3,1);
}
[data-theme="dark"] {
  --color-bg:              #111110;
  --color-surface:         #1a1917;
  --color-surface-2:       #201f1d;
  --color-surface-offset:  #242320;
  --color-surface-dynamic: #2e2d2a;
  --color-border:          rgba(255,255,255,0.09);
  --color-divider:         rgba(255,255,255,0.06);
  --color-text:            #e8e7e5;
  --color-text-muted:      #8a8986;
  --color-text-faint:      #545250;
  --color-primary:         #4d9fdc;
  --color-primary-hover:   #6db3e8;
  --color-primary-light:   #1a2f40;
  --color-success:         #4ade80;
  --color-success-hover:   #6ee799;
  --color-success-light:   #14362a;
  --color-error:           #f87171;
  --color-error-hover:     #fca5a5;
  --color-error-light:     #3b1616;
  --color-warning:         #fbbf24;
  --color-warning-hover:   #fcd34d;
  --color-warning-light:   #3b2a0a;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.45);
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body { font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);line-height:1.55; min-height:100dvh; }
img,svg { display:block; max-width:100%; }
input,button,textarea,select { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:none; }
table { border-collapse:collapse; width:100%; }
a { color:var(--color-primary); text-decoration:none; }
a:hover { text-decoration:underline; }
p,li { max-width:72ch; }

/* ---- APP SHELL ---- */
.app-shell { display:flex; min-height:100dvh; }

/* ---- SIDEBAR ---- */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--color-surface); border-right:1px solid var(--color-border);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100dvh; overflow-y:auto;
  transition:transform var(--transition);
  z-index:50;
}
.sidebar-logo {
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-4) var(--space-5);
  font-size:var(--text-sm); font-weight:700; letter-spacing:-.01em;
  border-bottom:1px solid var(--color-divider);
  color:var(--color-text);
}
.sidebar-nav { flex:1; padding:var(--space-3) var(--space-2); display:flex; flex-direction:column; gap:1px; }
.nav-section-label {
  font-size:var(--text-xs); font-weight:600; color:var(--color-text-faint);
  text-transform:uppercase; letter-spacing:.08em;
  padding:var(--space-4) var(--space-3) var(--space-1);
}
.nav-link {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-md);
  font-size:var(--text-sm); font-weight:500; color:var(--color-text-muted);
  transition:background var(--transition), color var(--transition);
  text-decoration:none;
}
.nav-link:hover { background:var(--color-surface-offset); color:var(--color-text); text-decoration:none; }
.nav-link.active { background:var(--color-primary-light); color:var(--color-primary); font-weight:600; }
.sidebar-footer {
  padding:var(--space-3) var(--space-4);
  border-top:1px solid var(--color-divider);
  display:flex; align-items:center; gap:var(--space-3);
}
.user-info { display:flex; align-items:center; gap:var(--space-2); flex:1; min-width:0; }
.user-avatar {
  width:30px; height:30px; border-radius:var(--radius-full);
  background:var(--color-primary); color:white;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--text-xs); font-weight:700; flex-shrink:0;
}
.user-name { font-size:var(--text-sm); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { font-size:var(--text-xs); color:var(--color-text-muted); text-transform:capitalize; }

/* ---- MAIN CONTENT ---- */
.main-content { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar {
  position:sticky; top:0; z-index:40;
  height:var(--topbar-h); background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  display:flex; align-items:center; gap:var(--space-4);
  padding:0 var(--space-6);
}
.topbar-title h1 { font-size:var(--text-lg); font-weight:700; line-height:1.2; }
.topbar-subtitle { font-size:var(--text-xs); color:var(--color-text-muted); margin-top:1px; }
.topbar-actions { margin-left:auto; display:flex; align-items:center; gap:var(--space-3); }
.sidebar-toggle { display:none; }
.page-body { flex:1; padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-6); }

/* ---- BUTTONS ---- */
.btn {
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-md);
  font-size:var(--text-sm); font-weight:600; white-space:nowrap;
  transition:background var(--transition), box-shadow var(--transition), color var(--transition);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
}
.btn-primary   { background:var(--color-primary);  color:white; }
.btn-primary:hover  { background:var(--color-primary-hover); color:white; text-decoration:none; box-shadow:var(--shadow-sm); }
.btn-success   { background:var(--color-success);  color:white; }
.btn-success:hover  { background:var(--color-success-hover); color:white; text-decoration:none; }
.btn-danger, .btn-error { background:var(--color-error); color:white; }
.btn-danger:hover   { background:var(--color-error-hover); color:white; text-decoration:none; }
.btn-warning   { background:var(--color-warning); color:white; }
.btn-warning:hover  { background:var(--color-warning-hover); color:white; text-decoration:none; }
.btn-secondary { background:var(--color-surface-offset); color:var(--color-text); border-color:var(--color-border); }
.btn-secondary:hover { background:var(--color-surface-dynamic); text-decoration:none; }
.btn-ghost { color:var(--color-text-muted); }
.btn-ghost:hover { background:var(--color-surface-offset); color:var(--color-text); text-decoration:none; }
.btn-sm  { padding:var(--space-1) var(--space-3); font-size:var(--text-xs); }
.btn-lg  { padding:var(--space-3) var(--space-6); font-size:var(--text-base); }
.btn-icon { padding:var(--space-2); }
.w-full { width:100%; justify-content:center; }

/* ---- FORMS ---- */
.form-group { display:flex; flex-direction:column; gap:var(--space-1); }
.form-label { font-size:var(--text-sm); font-weight:600; color:var(--color-text); }
.required { color:var(--color-error); }
.form-hint { font-size:var(--text-xs); color:var(--color-text-muted); }
.form-input, .form-select, .form-textarea {
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-md);
  border:1px solid var(--color-border); background:var(--color-surface-2);
  font-size:var(--text-sm); color:var(--color-text);
  transition:border-color var(--transition), box-shadow var(--transition);
  width:100%;
}
.form-textarea { min-height:80px; resize:vertical; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline:none; border-color:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in oklch, var(--color-primary) 18%, transparent);
}
.form-grid { display:grid; gap:var(--space-4); }
.form-grid-2 { grid-template-columns:1fr 1fr; }
.form-grid-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:640px) { .form-grid-2, .form-grid-3 { grid-template-columns:1fr; } }

/* ---- CARDS ---- */
.card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.card-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--color-divider); }
.card-title { font-size:var(--text-sm); font-weight:700; }
.card-body { padding:var(--space-5); }
.card-footer { padding:var(--space-4) var(--space-5); border-top:1px solid var(--color-divider); background:var(--color-surface-2); border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.mb-4 { margin-bottom:var(--space-4); }
.mb-6 { margin-bottom:var(--space-6); }
.mt-4 { margin-top:var(--space-4); }
.mt-6 { margin-top:var(--space-6); }

/* ---- TABLES ---- */
.table-wrap { overflow-x:auto; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-sm); }
.data-table { width:100%; border-collapse:collapse; }
.data-table thead tr { background:var(--color-surface-2); }
.data-table th { padding:var(--space-3) var(--space-4); font-size:var(--text-xs); font-weight:700; text-align:left; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--color-border); white-space:nowrap; }
.data-table td { padding:var(--space-3) var(--space-4); font-size:var(--text-sm); border-bottom:1px solid var(--color-divider); vertical-align:middle; }
.data-table tbody tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover { background:var(--color-surface-offset); }
.data-table .actions { display:flex; gap:var(--space-2); align-items:center; }
.number { text-align:right; font-variant-numeric:tabular-nums; }

/* ---- BADGES ---- */
.badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:600; white-space:nowrap; }
.badge-primary { background:var(--color-primary-light); color:var(--color-primary); }
.badge-success { background:var(--color-success-light); color:var(--color-success); }
.badge-error   { background:var(--color-error-light);   color:var(--color-error); }
.badge-warning { background:var(--color-warning-light); color:var(--color-warning); }
.badge-neutral { background:var(--color-surface-offset); color:var(--color-text-muted); }

/* ---- ALERTS ---- */
.alert { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); font-size:var(--text-sm); }
.alert-success { background:var(--color-success-light); color:var(--color-success); }
.alert-error   { background:var(--color-error-light);   color:var(--color-error); }
.alert-warning { background:var(--color-warning-light); color:var(--color-warning); }
.alert-info    { background:var(--color-primary-light); color:var(--color-primary); }
.alert-dismissible { display:flex; }

/* ---- MODALS ---- */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:100; display:none; align-items:center; justify-content:center; padding:var(--space-4); backdrop-filter:blur(3px); }
.modal-backdrop.open { display:flex; }
.modal { background:var(--color-surface); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); width:100%; max-width:480px; max-height:90dvh; overflow-y:auto; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--color-divider); }
.modal-title { font-size:var(--text-base); font-weight:700; }
.modal-close { color:var(--color-text-muted); padding:var(--space-1); border-radius:var(--radius-sm); transition:background var(--transition); }
.modal-close:hover { background:var(--color-surface-offset); }
.modal-body { padding:var(--space-5); }
.modal-footer { padding:var(--space-4) var(--space-5); border-top:1px solid var(--color-divider); display:flex; justify-content:flex-end; gap:var(--space-3); }

/* ---- DASHBOARD ---- */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr)); gap:var(--space-4); }
.stat-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); }
.stat-icon { font-size:1.5rem; margin-bottom:var(--space-2); }
.stat-label { font-size:var(--text-xs); color:var(--color-text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.stat-value { font-size:var(--text-xl); font-weight:800; margin-top:var(--space-1); font-variant-numeric:tabular-nums; }
.stat-card.primary .stat-value { color:var(--color-primary); }
.stat-card.success .stat-value { color:var(--color-success); }
.stat-card.error   .stat-value { color:var(--color-error); }
.stat-card.warning .stat-value { color:var(--color-warning); }

/* ---- CHARTS ---- */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); }
@media(max-width:900px){ .grid-2 { grid-template-columns:1fr; } }
.chart-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); }
.chart-title { font-size:var(--text-sm); font-weight:700; margin-bottom:var(--space-4); }
.chart-container { position:relative; height:220px; }

/* ---- PAGE HEADERS ---- */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }
.page-header-left h2 { font-size:var(--text-lg); font-weight:700; }
.page-header-left p  { font-size:var(--text-xs); color:var(--color-text-muted); margin-top:2px; }
.page-header-actions { display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap; }

/* ---- FILTERS BAR ---- */
.filters-bar { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; padding:var(--space-3) var(--space-4); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); }
.filter-label { font-size:var(--text-xs); font-weight:700; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.filters-bar .form-input, .filters-bar .form-select { max-width:160px; }
.search-input { max-width:220px; }

/* ---- PAGINATION ---- */
.pagination { display:flex; align-items:center; gap:var(--space-1); justify-content:center; margin-top:var(--space-4); }
.pagination a, .pagination span { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--radius-md); font-size:var(--text-sm); font-weight:500; border:1px solid var(--color-border); color:var(--color-text-muted); text-decoration:none; transition:background var(--transition); }
.pagination a:hover { background:var(--color-surface-offset); color:var(--color-text); text-decoration:none; }
.pagination span.active { background:var(--color-primary); color:white; border-color:var(--color-primary); font-weight:700; }

/* ---- EMPTY STATE ---- */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--space-12) var(--space-8); gap:var(--space-3); color:var(--color-text-muted); }
.empty-icon { font-size:2.5rem; margin-bottom:var(--space-2); }
.empty-state h3 { font-size:var(--text-base); font-weight:700; color:var(--color-text); }
.empty-state p  { font-size:var(--text-sm); max-width:36ch; }

/* ---- REPORTS ---- */
.report-summary { display:flex; gap:var(--space-4); flex-wrap:wrap; }
.summary-box { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5); min-width:180px; box-shadow:var(--shadow-sm); }
.summary-box .val { font-size:var(--text-xl); font-weight:800; font-variant-numeric:tabular-nums; }
.summary-box .lbl { font-size:var(--text-xs); color:var(--color-text-muted); font-weight:600; margin-top:2px; }

/* ---- RECEIPT ---- */
.receipt-wrapper { display:flex; flex-direction:column; gap:0; max-width:680px; margin:0 auto; }
.receipt { background:white; color:#111; border:1px solid #ccc; padding:var(--space-6); font-family:'Satoshi',sans-serif; font-size:13px; }
.receipt-header { text-align:center; margin-bottom:var(--space-4); }
.receipt-school-name { font-size:16px; font-weight:800; }
.receipt-title { font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-top:4px; border-top:2px solid #111; border-bottom:2px solid #111; padding:4px 0; display:inline-block; margin-top:8px; }
.receipt-meta { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2) var(--space-6); margin-bottom:var(--space-4); }
.receipt-meta-item { display:flex; flex-direction:column; }
.receipt-meta-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#666; }
.receipt-meta-value { font-size:13px; font-weight:600; }
.receipt-table { width:100%; border-collapse:collapse; margin-bottom:var(--space-3); font-size:12px; }
.receipt-table th, .receipt-table td { border:1px solid #ddd; padding:6px 10px; }
.receipt-table th { background:#f5f5f5; font-weight:700; }
.receipt-total { font-size:15px; font-weight:800; text-align:right; border-top:2px solid #111; padding-top:var(--space-2); }
.receipt-footer { margin-top:var(--space-6); font-size:11px; color:#555; text-align:center; }
.receipt-copy-label { display:inline-block; background:#e8f0fe; color:#1a56db; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:3px; }
.receipt-divider { border:none; border-top:2px dashed #bbb; margin:var(--space-2) 0; }

/* ---- LOGIN PAGE ---- */
.login-page { min-height:100dvh; display:flex; align-items:center; justify-content:center; background:var(--color-bg); padding:var(--space-4); }
.login-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-8); width:100%; max-width:380px; box-shadow:var(--shadow-lg); }
.login-logo { text-align:center; margin-bottom:var(--space-6); }
.login-logo-icon { width:56px; height:56px; background:var(--color-primary); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; margin:0 auto var(--space-3); }
.login-title { font-size:var(--text-lg); font-weight:800; }
.login-subtitle { font-size:var(--text-xs); color:var(--color-text-muted); margin-top:4px; }

/* ---- UPLOAD ZONE ---- */
.upload-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px dashed var(--color-border); border-radius:var(--radius-lg); padding:var(--space-8); cursor:pointer; transition:border-color var(--transition), background var(--transition); text-align:center; }
.upload-zone:hover, .upload-zone.dragover { border-color:var(--color-primary); background:var(--color-primary-light); }
.upload-icon { font-size:2rem; margin-bottom:var(--space-2); }
.upload-text { font-size:var(--text-sm); color:var(--color-text-muted); }

/* ---- UTILITY ---- */
.text-xs   { font-size:var(--text-xs); }
.text-sm   { font-size:var(--text-sm); }
.text-muted{ color:var(--color-text-muted); }
.font-bold { font-weight:700; }
.text-lg   { font-size:var(--text-lg); }
.text-center { text-align:center; }

/* ---- PRINT ---- */
@media print {
  .sidebar, .topbar, .no-print, .filters-bar, .pagination, .page-header-actions { display:none !important; }
  .main-content { margin:0; }
  .page-body { padding:0; }
  .receipt-wrapper { max-width:100%; }
  body { font-size:12px; }
}

/* ---- RESPONSIVE ---- */
@media (max-width:768px) {
  :root { --sidebar-w: 240px; }
  .sidebar { position:fixed; left:0; top:0; height:100dvh; transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); box-shadow:var(--shadow-lg); }
  .sidebar-toggle { display:flex; }
  .page-body { padding:var(--space-4); }
  .topbar { padding:0 var(--space-4); }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .form-grid-2, .form-grid-3 { grid-template-columns:1fr; }
  .data-table th:nth-child(n+5), .data-table td:nth-child(n+5) { display:none; }
}

/* ---- FOCUS ---- */
:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; border-radius:var(--radius-sm); }