/* ===== Tution Track app styles ===== */
:root{
  --bg: #f4f6f9;
  --surface: #ffffff;
  --border: #e4e8ee;
  --text: #1f2937;
  --text-muted: #6b7280;
  --primary: #3457d5;
  --primary-dark: #2740a8;
  --primary-light: #eaefff;
  --success: #16a34a;
  --success-light: #e8f8ee;
  --danger: #dc2626;
  --danger-light: #fdeaea;
  --warning: #d97706;
  --warning-light: #fef3e2;
  --sidebar-w: 230px;
  --sidebar-bg: #161c2d;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
}

/* ===== Themes (Account page > Preferences) =====
   Only the accent color, page tint and sidebar shade change per theme -
   success/danger/warning keep their normal meaning (paid/present, overdue/
   absent, pending) across every theme, so status colors never change with it. */
html[data-theme="sunset"]{
  --primary: #f2542d; --primary-dark: #c23616; --primary-light: #ffe6dc;
  --bg: #fff8f5; --sidebar-bg: #2b1810;
}
html[data-theme="ocean"]{
  --primary: #06b6d4; --primary-dark: #0e7490; --primary-light: #d7faff;
  --bg: #f2fcfd; --sidebar-bg: #082b32;
}
html[data-theme="berry"]{
  --primary: #c026d3; --primary-dark: #86198f; --primary-light: #fbe8ff;
  --bg: #fdf6ff; --sidebar-bg: #2a0e30;
}
html[data-theme="emerald"]{
  --primary: #10b981; --primary-dark: #047857; --primary-light: #d7fbec;
  --bg: #f3fdf8; --sidebar-bg: #062b1e;
}
html[data-theme="golden"]{
  --primary: #f59e0b; --primary-dark: #b45309; --primary-light: #fef2d9;
  --bg: #fffaf0; --sidebar-bg: #2e2007;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}
h1,h2,h3{margin:0 0 8px;}

/* ---- Auth pages (no sidebar) ---- */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
  background: linear-gradient(135deg,#3457d5 0%, #6c8cff 100%);
}
.auth-card{
  background: var(--surface);
  width: 100%;
  max-width: 400px;
  border-radius: 14px;
  padding: 36px 32px;
  box-shadow: 0 20px 50px rgba(20,30,80,.25);
}
.auth-logo{ display:flex; align-items:center; gap:10px; margin-bottom: 22px; }
.auth-logo .mark{
  width:36px;height:36px;border-radius:9px;background:var(--primary);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;
}
.auth-logo .name{font-weight:700; font-size:17px;}
.auth-card h1{font-size:20px; margin: 0 0 4px;}
.auth-card p.sub{color:var(--text-muted); margin: 0 0 22px; font-size:13px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:#374151;}
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px;
  font-size:14px; background:#fbfcfe; font-family:inherit;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--primary-light); border-color:var(--primary);}
.theme-picker{display:flex; flex-wrap:wrap; gap:10px;}
.theme-option{
  display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:8px;
  padding:8px 12px; cursor:pointer; font-size:13px; background:#fff;
}
.theme-option:has(input:checked){border-color:var(--primary); background:var(--primary-light); font-weight:600;}
.theme-option input{width:auto; margin:0; padding:0; border:none; background:none; accent-color:var(--primary);}
.theme-option .swatch{width:20px; height:20px; border-radius:50%; box-shadow:0 0 0 2px rgba(0,0,0,.08); flex-shrink:0;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:none; border-radius:8px; padding:10px 16px; font-size:13.5px; font-weight:600;
  cursor:pointer; transition:.15s; font-family:inherit;
}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-block{width:100%;}
.btn-outline{background:#fff; border:1px solid var(--border); color:var(--text);}
.btn-outline:hover{background:#f3f4f6;}
.btn-success{background:var(--success); color:#fff;}
.btn-danger{background:var(--danger); color:#fff;}
.btn-warning{background:var(--warning); color:#fff;}
.btn-sm{padding:6px 10px; font-size:12.5px; border-radius:7px;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.auth-foot{text-align:center; margin-top:18px; font-size:13px; color:var(--text-muted);}
.alert{
  border-radius:8px; padding:12px 14px; font-size:13px; margin-bottom:18px; display:flex; gap:10px; align-items:flex-start;
}
.alert-warning{background:var(--warning-light); color:#92400e; border:1px solid #fde3b4;}
.alert-error{background:var(--danger-light); color:#991b1b; border:1px solid #f6c6c6;}
.alert-success{background:var(--success-light); color:#166534; border:1px solid #bde7c9;}
.alert-info{background:var(--primary-light); color:#2740a8; border:1px solid #c7d3fb;}

/* ---- App shell ---- */
.app{display:flex; min-height:100vh;}
.sidebar{
  width:var(--sidebar-w); background:var(--sidebar-bg); color:#cbd3e6; flex-shrink:0;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:35;
}
.sidebar .brand{ display:flex; align-items:center; gap:10px; padding:20px 18px; border-bottom:1px solid #262e44; }
.sidebar .brand .mark{
  width:32px;height:32px;border-radius:8px;background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
}
.sidebar .brand .name{color:#fff; font-weight:700; font-size:15px;}
.sidebar nav{flex:1; padding: 14px 10px; overflow-y:auto;}
.sidebar .nav-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px;
  font-size:13.5px; margin-bottom:2px; color:#aeb7cf; cursor:pointer;
}
.sidebar .nav-item .ic{width:18px; text-align:center;}
.sidebar .nav-item:hover{background:#1f2740; color:#fff;}
.sidebar .nav-item.active{background:var(--primary); color:#fff;}
.sidebar .foot{padding:14px 18px; border-top:1px solid #262e44; font-size:12px; color:#7b8399;}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  background:var(--surface); border-bottom:1px solid var(--border); padding:14px 26px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:5; gap:12px; flex-wrap:wrap;
}
.topbar-left{ display:flex; align-items:center; gap:12px; }
.topbar h1{font-size:18px; margin:0;}
.topbar .crumbs{font-size:12.5px; color:var(--text-muted); margin-top:2px;}
.topbar .user{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.topbar .avatar{
  width:32px;height:32px;border-radius:50%;background:var(--primary-light); color:var(--primary-dark);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
}
.content{padding:24px 26px; flex:1;}
.app-footer{
  padding:14px 26px; border-top:1px solid var(--border); background:var(--surface);
  font-size:12.5px; color:var(--text-muted); text-align:center;
}
.app-footer a{color:var(--primary); font-weight:600;}

.hamburger{
  display:none; border:1px solid var(--border); background:#fff; border-radius:8px; width:36px; height:36px;
  font-size:16px; cursor:pointer; flex-shrink:0;
}
.sidebar-backdrop{display:none; position:fixed; inset:0; background:rgba(15,20,35,.5); z-index:30;}

.year-pill{
  display:inline-flex; align-items:center; gap:6px; background:var(--primary-light); color:var(--primary-dark);
  padding:6px 12px; border-radius:20px; font-size:12.5px; font-weight:600;
}

/* ---- Cards / grid ---- */
.grid{display:grid; gap:18px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);}
.card .card-hd{padding:16px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;}
.card .card-hd h3{margin:0; font-size:14.5px;}
.card .card-bd{padding:18px;}

.stat{padding:18px;}
.stat .label{font-size:12.5px; color:var(--text-muted); margin-bottom:8px; display:flex; align-items:center; gap:8px;}
.stat .value{font-size:26px; font-weight:700;}
.stat .delta{font-size:12px; margin-top:6px; color:var(--success);}
.stat .ic-badge{width:30px;height:30px;border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px;}

/* ---- Table ---- */
table{width:100%; border-collapse:collapse;}
th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted);
  padding:10px 14px; border-bottom:1px solid var(--border); background:#fafbfd; white-space:nowrap;
}
td{padding:12px 14px; border-bottom:1px solid var(--border); font-size:13.5px;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:#f9fafc;}
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* ---- Badges ---- */
.badge{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:11.5px; font-weight:600; white-space:nowrap;}
.badge-success{background:var(--success-light); color:#166534;}
.badge-danger{background:var(--danger-light); color:#991b1b;}
.badge-warning{background:var(--warning-light); color:#92400e;}
.badge-gray{background:#eef0f4; color:#4b5563;}
.badge-primary{background:var(--primary-light); color:var(--primary-dark);}

/* ---- Toolbar ---- */
.toolbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap;}
.toolbar .left{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.search-box{position:relative;}
.search-box input{padding:9px 12px 9px 32px; border:1px solid var(--border); border-radius:8px; font-size:13px; width:230px; max-width:60vw; background:#fff;}
.search-box .ic{position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:13px;}
select.filter{padding:9px 10px; border:1px solid var(--border); border-radius:8px; font-size:13px; background:#fff; font-family:inherit;}

/* ---- Tabs ---- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:20px; overflow-x:auto;}
.tab{padding:10px 16px; font-size:13.5px; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;}
.tab.active{color:var(--primary); border-color:var(--primary);}

/* ---- Progress bar ---- */
.progress{height:8px; border-radius:6px; background:#eef0f4; overflow:hidden;}
.progress > div{height:100%; background:var(--success);}

/* ---- Calendar ---- */
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:8px;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
.cal-dow{text-align:center; font-size:10.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; padding-bottom:4px;}
.cal-day{
  aspect-ratio:1/0.85; border:1px solid var(--border); border-radius:8px; padding:6px; background:#fff;
  display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; position:relative;
}
.cal-day:hover{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light);}
.cal-day.empty{background:transparent; border:none; cursor:default;}
.cal-day.empty:hover{box-shadow:none;}
.cal-day .d-num{font-size:12px; font-weight:700;}
.cal-day .d-stats{font-size:9.5px; color:var(--text-muted); display:flex; flex-direction:column; gap:2px;}
.cal-day.today{border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-light);}
.cal-day.marked{background:#fafcff;}
.cal-day .dot{width:6px;height:6px;border-radius:50%; display:inline-block; margin-right:4px;}
.dot-present{background:var(--success);}
.dot-absent{background:var(--danger);}

/* ---- Attendance row ---- */
.attend-row{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); gap:12px; flex-wrap:wrap;}
.attend-row:last-child{border-bottom:none;}
.attend-row .who{display:flex; align-items:center; gap:12px;}
.avatar-sm{width:34px;height:34px;border-radius:50%; background:var(--primary-light); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; flex-shrink:0;}
.seg{display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden;}
.seg input{position:absolute; opacity:0; width:0; height:0;}
.seg label{border:none; background:#fff; padding:7px 14px; font-size:12.5px; font-weight:600; cursor:pointer; color:var(--text-muted); display:inline-block;}
.seg label:first-of-type{border-right:1px solid var(--border);}
.seg input:checked + label.present{background:var(--success); color:#fff;}
.seg input:checked + label.absent{background:var(--danger); color:#fff;}
.note-btn{width:32px;height:32px; border-radius:8px; border:1px dashed var(--border); background:#fff; cursor:pointer; color:var(--text-muted); font-size:14px; flex-shrink:0;}
.note-btn.has-note{border-style:solid; border-color:var(--warning); color:var(--warning); background:var(--warning-light);}

/* ---- Modal ---- */
.modal-backdrop{position:fixed; inset:0; background:rgba(15,20,35,.45); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px;}
.modal{background:#fff; border-radius:12px; width:100%; max-width:420px; box-shadow:0 24px 60px rgba(0,0,0,.25); max-height:90vh; overflow-y:auto;}
.modal .m-hd{padding:16px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; background:#fff;}
.modal .m-hd h3{margin:0; font-size:15px;}
.modal .m-bd{padding:18px 20px;}
.modal .m-ft{padding:14px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px;}
.close-x{cursor:pointer; color:var(--text-muted); font-size:18px; border:none; background:none;}
.hidden{display:none !important;}

/* ---- Misc ---- */
.muted{color:var(--text-muted);}
.flex{display:flex;} .items-center{align-items:center;} .gap-8{gap:8px;} .gap-12{gap:12px;}
.divider{height:1px; background:var(--border); margin:18px 0;}
.print-preview{background:#fff; border:1px solid var(--border); border-radius:10px; padding:28px; max-width:820px; margin:0 auto;}
.print-preview h2{margin-top:0;}
.report-page-break{max-width:820px; margin:24px auto; border-top:1px dashed var(--border);}
.kpi-row{display:flex; gap:24px; flex-wrap:wrap; margin:18px 0;}
.kpi{flex:1; min-width:140px; background:#fafbfd; border:1px solid var(--border); border-radius:10px; padding:14px;}
.kpi .n{font-size:20px; font-weight:700;}
.kpi .l{font-size:11.5px; color:var(--text-muted); text-transform:uppercase;}
.banner-note{background:var(--primary-light); border:1px dashed #c7d3fb; border-radius:8px; padding:10px 14px; font-size:12.5px; color:var(--primary-dark); margin-bottom:18px;}

/* ==================== Responsive: mobile / tablet ==================== */
@media (max-width: 900px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}

  .hamburger{display:inline-flex; align-items:center; justify-content:center;}

  .sidebar{
    position:fixed; left:0; top:0; height:100vh; transform:translateX(-100%);
    transition:transform .2s ease; box-shadow:0 0 30px rgba(0,0,0,.3);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-backdrop.open{display:block;}

  .topbar{padding:12px 16px;}
  .content{padding:16px;}

  .search-box input{width:100%; max-width:none;}
  .toolbar .left{width:100%;}
  .toolbar .left .search-box{flex:1;}

  .cal-day .d-stats{display:none;}
  .cal-day{aspect-ratio:1/1;}

  .print-preview{padding:18px;}
}

@media (max-width: 600px){
  .grid-4, .grid-3{grid-template-columns:1fr;}
  .kpi-row{gap:10px;}
  .kpi{min-width:calc(50% - 10px);}
  .topbar .user{gap:6px;}
  .attend-row{flex-direction:column; align-items:flex-start;}
  .attend-row .flex.gap-12{width:100%; justify-content:space-between;}
}

/* Busy indicator: this app is server-rendered with real page loads (no SPA),
   so a link click or form submit gives no feedback on its own while the next
   page is generating - show a wait cursor and a top progress bar for that
   in-between stretch. Cleared automatically once the new page finishes
   loading (or, for pages restored from the back/forward cache, on pageshow). */
html.page-busy, html.page-busy *{cursor:progress !important;}
html.page-busy::before{
  content:''; position:fixed; top:0; left:0; right:0; height:3px; z-index:9999;
  background:linear-gradient(90deg, transparent, var(--primary) 40%, var(--primary-dark) 60%, transparent);
  background-size:200% 100%;
  animation:page-busy-sweep 1.1s linear infinite;
}
@keyframes page-busy-sweep{
  0%{background-position:150% 0;}
  100%{background-position:-50% 0;}
}

@media print{
  .sidebar, .topbar, .toolbar, .hamburger, .topbar-actions, .app-footer{display:none !important;}
  .content{padding:0;}
  body{background:#fff;}
  .report-page-break{border:none; margin:0; page-break-after:always;}
}