:root {
  --bg-dark: #090d16;     /* Deep modern dark canvas for login side */
  --panel-dark: #111827;  /* Card background on dark mode */
  --ink: #f8fafc;         /* Light text for dark side */
  --muted: #94a3b8;       /* Muted gray text */
  
  /* Vibrant Yellow, Orange & Warm Gray Gradient */
  --gold-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  --gold-glow: rgba(245, 158, 11, 0.4);
  
  --line: #1e293b;        /* Borders */
  --ok: #10b981;
  --bad: #ef4444;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:15px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:var(--ink);background:var(--bg-dark)}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:700;margin:0;letter-spacing:-.01em}
h1{font-size:28px}h2{font-size:22px}h3{font-size:17px}
a{color:#fbbf24;text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
.muted{color:var(--muted)}.small{font-size:13px}

/* auth - stunning yellow/orange gradient side + dark login side */
.auth{display:grid;grid-template-columns:minmax(300px,5fr) 6fr;min-height:100%}
.auth-side{background:linear-gradient(135deg,#14325C,#1E4B8A);color:#ffffff;display:flex;flex-direction:column;justify-content:space-between;padding:44px;position:relative;overflow:hidden}
.auth-side::after{content:'';position:absolute;bottom:-80px;right:-80px;width:250px;height:250px;background:rgba(245,158,11,0.18);border-radius:50%;pointer-events:none}
.auth-side img{width:150px;border-radius:22px;box-shadow:0 12px 40px rgba(0,0,0,.25);border:2px solid rgba(255,255,255,0.4)}
.auth-side h1{font-size:40px;line-height:1.1;margin:28px 0 12px;color:#ffffff;text-shadow:0 2px 10px rgba(0,0,0,0.1)}
.auth-side p{color:#ffffff;max-width:36ch;margin:0;font-weight:500}

.auth-main{display:flex;align-items:center;justify-content:center;padding:32px;background:var(--bg-dark)}
.auth-card{width:100%;max-width:400px;background:var(--panel-dark);padding:36px;border-radius:20px;border:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,0.4)}
.auth-card h2{margin-bottom:6px;color:#ffffff}
.auth-card p {color: var(--muted);}
.auth-card form{margin-top:22px}

label{display:block;font-weight:600;font-size:13px;margin:16px 0 6px;color:#cbd5e1}
input,select{width:100%;padding:12px 14px;border:1px solid #334155;border-radius:10px;font:inherit;background:#0f172a;color:#fff;transition:all .2s ease}
input:focus,select:focus{border-color:#f59e0b;box-shadow:0 0 0 4px var(--gold-glow);outline:none}

.otp{letter-spacing:.5em;font-size:22px;text-align:center;font-variant-numeric:tabular-nums}

.btn{display:inline-block;padding:12px 20px;border:0;border-radius:10px;background:var(--gold-gradient);color:#1b150c;font:inherit;font-weight:700;cursor:pointer;transition:all .25s ease;box-shadow:0 4px 15px rgba(245, 158, 11, 0.3)}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 20px rgba(245, 158, 11, 0.45)}
.btn:disabled{opacity:.6;cursor:wait;transform:none;box-shadow:none}
.btn.full{width:100%;margin-top:22px}
.btn.ghost{background:transparent;color:#fbbf24;border:1px solid rgba(251, 191, 36, 0.3);box-shadow:none}
.btn.ghost:hover{background:rgba(251, 191, 36, 0.08);transform:none}
.btn.danger{background:var(--bad);color:#fff;box-shadow:0 4px 12px rgba(239, 68, 68, 0.2)}
.btn.danger:hover{background:#dc2626}
.btn.sm{padding:6px 12px;font-size:13px}

.linkbtn{background:none;border:0;color:#fbbf24;text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.error{color:var(--bad);font-size:13px;min-height:18px;margin-top:12px}
.row{display:flex;gap:16px;justify-content:space-between;margin-top:18px;flex-wrap:wrap}

/* app shell */
.shell{display:grid;grid-template-columns:250px 1fr;min-height:100%}
.sidebar{background:linear-gradient(180deg,#C2410C,#9A3412);color:#ffffff;padding:24px 16px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;box-shadow:4px 0 20px rgba(0,0,0,0.1)}
.brand{display:flex;align-items:center;gap:12px;padding:0 8px 22px;font-family:Georgia,serif;font-size:20px;font-weight:700;border-bottom:1px solid rgba(255,255,255,0.25);margin-bottom:10px;color:#fff}
.brand img{width:40px;height:40px;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.4)}

.nav button{display:block;width:100%;text-align:left;padding:11px 14px;background:none;border:0;color:#ffffff;font:inherit;font-weight:600;border-radius:10px;cursor:pointer;transition:all .2s ease;margin-bottom:2px}
.nav button:hover{background:rgba(255,255,255,0.18);color:#fff;transform:translateX(3px)}
.nav button.on{background:#ffffff;color:#9A3412;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,0.1)}

.sidebar .who{margin-top:auto;padding:14px 10px;border-top:1px solid rgba(255,255,255,0.25);font-size:13px;color:rgba(255,255,255,0.85)}
.sidebar .who b{display:block;color:#ffffff;font-size:14px}

.main{padding:36px 40px 60px;max-width:1150px;width:100%;background:var(--bg-dark);color:var(--ink)}
.main>header{margin-bottom:28px}

.badge{display:inline-block;padding:3px 10px;border-radius:99px;background:#334155;font-size:12px;font-weight:600;color:#fbbf24}
.badge.ok{background:rgba(16, 185, 129, 0.15);color:#34d399}.badge.off{background:rgba(239, 68, 68, 0.15);color:#f87171}

.stats{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:28px}
.stat{background:var(--panel-dark);border:1px solid var(--line);border-radius:14px;padding:20px;min-width:180px;flex:1;box-shadow:0 4px 12px rgba(0,0,0,0.2);transition:transform .2s ease}
.stat:hover{transform:translateY(-2px);border-color:#475569}
.stat b{display:block;font:700 36px Georgia,serif;color:#fbbf24;margin-top:4px}

.panel{background:var(--panel-dark);border:1px solid var(--line);border-radius:14px;padding:26px;margin-bottom:24px;box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.panel h3{margin-bottom:14px;color:#fff}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 16px}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px;color:#e2e8f0}
th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:13px;color:var(--muted);font-weight:600;background:#0f172a}
td select{width:auto;padding:6px 10px;background:#0f172a;color:#fff;border-color:#334155}
.empty{padding:32px;text-align:center;color:var(--muted)}

.qrbox{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.qrbox #qr{padding:16px;background:#fff;border:1px solid var(--line);border-radius:14px}
.count{font:700 48px Georgia,serif;color:#fbbf24}
.timer{font:700 20px ui-monospace,Consolas,monospace;color:#f59e0b}
#reader{max-width:340px;margin-bottom:14px}
.actions{display:flex;gap:8px}

#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;padding:12px 22px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;z-index:99;max-width:90vw;box-shadow:0 10px 30px rgba(0,0,0,0.4);border:1px solid #334155}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--bad)}

@media(max-width:820px){
 .auth{grid-template-columns:1fr}.auth-side{padding:24px;flex-direction:row;align-items:center;gap:16px}.auth-side img{width:64px;border-radius:14px}.auth-side h1{font-size:22px;margin:0}.auth-side p{display:none}
 .shell{grid-template-columns:1fr}
 .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px}
 .brand{padding:0;border-bottom:0;margin-bottom:0}.nav{display:flex;overflow-x:auto;flex:1;gap:4px}.nav button{white-space:nowrap;width:auto;box-shadow:none}.nav button.on{background:#fff;color:#9A3412}
 .sidebar .who{display:none}.main{padding:20px 16px 50px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------------- look & feel polish (added) ---------------- */
body{background:radial-gradient(1100px 600px at 85% -10%,rgba(245,158,11,.12),transparent 60%),var(--bg-dark);background-attachment:fixed}
.main{background:transparent}
.panel{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 60%),var(--panel-dark)}
.stat{border-top:3px solid #f59e0b;display:flex;flex-direction:column;justify-content:center;min-height:110px;padding:20px 24px}
.qrbox #qr{border:0;border-radius:18px;box-shadow:0 0 0 6px rgba(245,158,11,.18),0 20px 50px rgba(0,0,0,.5)}
.count{line-height:1.1}
.timer{display:inline-block;padding:2px 12px;border-radius:99px;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.3)}

/* ---------------- phones & small tablets ---------------- */
@media(max-width:820px){
 /* stop the page growing wider than the screen (this caused the sideways scrolling and the cut-off cards) */
 html,body{overflow-x:hidden}
 .shell{grid-template-columns:minmax(0,1fr)}
 .main,.panel,.sidebar{min-width:0}

 /* app-style top bar: stays visible, menu swipes sideways */
 .sidebar{position:sticky;top:0;z-index:20;flex-wrap:nowrap;gap:10px;padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top,0px));border-radius:0 0 18px 18px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
 .brand span{display:none}
 .nav{min-width:0;gap:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity}
 .nav::-webkit-scrollbar{display:none}
 .nav button{margin-bottom:0;min-height:38px;padding:8px 14px;font-size:14px;border-radius:99px;background:rgba(255,255,255,.2);scroll-snap-align:center}
 .nav button.on{background:#fff;color:#9A3412}
 .nav button:hover{transform:none}

 /* comfortable touch controls (16px stops iPhone zoom on focus) */
 input,select,textarea{font-size:16px;min-height:46px}
 td select{min-height:36px;font-size:14px}
 .btn{min-height:46px}
 .btn.sm{min-height:36px}
 .linkbtn{min-height:36px}
 .panel form>.btn{width:100%}

 .main>header p{font-size:14px}

 /* live QR session card: QR centered, Present + Time left side by side */
 .qrbox{flex-direction:column;align-items:center;gap:20px}
 .qrbox>div:last-child{width:100%;display:grid;grid-template-columns:1fr 1fr;column-gap:12px;text-align:center;background:#0f172a;border:1px solid var(--line);border-radius:16px;padding:16px}
 .qrbox>div:last-child>:nth-child(1){grid-column:1;grid-row:1}
 .qrbox>div:last-child>:nth-child(2){grid-column:1;grid-row:2}
 .qrbox>div:last-child>:nth-child(3){grid-column:2;grid-row:1}
 .qrbox>div:last-child>:nth-child(4){grid-column:2;grid-row:2;justify-self:center;align-self:center}
 .qrbox>div:last-child>:nth-child(5){grid-column:1/-1;grid-row:3;max-width:none!important;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}
}

@media(max-width:480px){
 h1{font-size:23px}h2{font-size:19px}
 .main{padding:16px 12px 40px}
 .main>header{margin-bottom:18px}
 .panel{padding:18px;border-radius:16px;margin-bottom:16px}
 .auth-main{padding:16px}.auth-card{padding:24px}
 .stat{min-width:140px;padding:16px}.stat b{font-size:30px}
 .qrbox #qr{padding:12px;max-width:100%}
 .qrbox #qr canvas{max-width:100%;height:auto}
 .count{font-size:42px}
 #reader{width:100%;max-width:100%}
 th,td{padding:10px 8px}
 #toast{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}

/* keep autofilled inputs dark (Chrome autofill otherwise turns them white) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  box-shadow: 0 0 0 1000px #0f172a inset;
  caret-color: #fff;
  transition: background-color 9999s ease-in-out 0s;
}

/* ---------------- student attendance percentage ---------------- */
.pct-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.pct-row { margin-top: 18px; }
.pct-top .good { color: #22c55e; }
.pct-top .bad { color: #ef4444; }
.bar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-bottom: 6px; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: #22c55e; transition: width 0.6s; }
.bar.low > i { background: #ef4444; }
.pct-warn, .pct-ok { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 0.95rem; }
.pct-warn { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.4); }
.pct-ok { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.4); }

/* ---------------- dashboard charts ---------------- */
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.chart-box { position: relative; height: 260px; }
@media (max-width: 480px) { .chart-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- search / filter / pagination ---------------- */
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .search { flex: 2; min-width: 200px; }
.toolbar select { flex: 1; min-width: 150px; width: auto; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pager .btn:disabled { cursor: not-allowed; }

/* ---------------- timetable ---------------- */
[hidden] { display: none !important; }
.week { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.day { background: #0f172a; border: 1px solid var(--line); border-radius: 14px; padding: 14px; min-width: 0; }
.day.today { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); }
.day h4 { margin: 0 0 12px; font: 700 16px Georgia, serif; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.slot { background: var(--panel-dark); border: 1px solid var(--line); border-left: 3px solid #f59e0b; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.slot-time { font-size: 12px; color: #fbbf24; font-weight: 600; margin-bottom: 2px; }
/* ---------------- notification bell ---------------- */
.bell-wrap { position: fixed; top: 18px; right: 26px; z-index: 40; }
.bell { position: relative; width: 46px; height: 46px; border-radius: 50%; background: var(--panel-dark); border: 1px solid #334155; color: #fbbf24; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.4); transition: transform .2s ease, border-color .2s ease; }
.bell:hover { transform: translateY(-1px); border-color: #f59e0b; }
.bell svg { width: 22px; height: 22px; }
.bell-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--bad); color: #fff; font: 700 11px/20px "Segoe UI", sans-serif; text-align: center; }
.bell-panel { position: absolute; top: 56px; right: 0; width: min(380px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto; background: var(--panel-dark); border: 1px solid #334155; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel-dark); }
.bell-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 12px 16px; color: var(--ink); font: inherit; cursor: pointer; }
.bell-item:hover { background: rgba(255,255,255,.05); }
.bell-item b { display: block; font-size: 14px; }
.bell-item span { display: block; color: #cbd5e1; font-size: 13px; margin-top: 2px; }
.bell-item small { color: var(--muted); font-size: 12px; }
.bell-item.unread { background: rgba(245,158,11,.09); border-left: 3px solid #f59e0b; }
@media (max-width: 820px) {
  .bell-wrap { top: auto; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: 16px; }
  .bell-panel { top: auto; bottom: 56px; }
}
/* ---------------- student ID card ---------------- */
.idwrap { display: flex; }
.idcard { width: 100%; max-width: 430px; border-radius: 20px; overflow: hidden; background: var(--panel-dark); border: 1px solid #334155; box-shadow: 0 20px 50px rgba(0,0,0,.5); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.id-top { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--gold-gradient); color: #1b150c; }
.id-top img { width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255,255,255,.5); }
.id-top b { display: block; font: 700 18px Georgia, serif; color: #fff; }
.id-top span { font-size: 13px; font-weight: 600; }
.id-body { display: flex; gap: 18px; padding: 22px 20px 8px; align-items: flex-start; }
.id-avatar { flex: none; width: 84px; height: 84px; border-radius: 16px; background: var(--gold-gradient); color: #fff; display: grid; place-items: center; font: 700 30px Georgia, serif; }
.id-info { min-width: 0; flex: 1; }
.id-info h3 { margin: 0 0 10px; color: #fff; font-size: 20px; }
.id-row { display: flex; flex-direction: column; margin-bottom: 8px; }
.id-row span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.id-row b { font-size: 14px; color: #e2e8f0; word-break: break-word; }
.id-bottom { display: flex; justify-content: space-between; align-items: flex-end; padding: 8px 20px 20px; }
.id-tag { padding: 6px 14px; border-radius: 99px; background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.4); color: #fbbf24; font-weight: 700; letter-spacing: .1em; font-size: 12px; }
.id-qr { padding: 8px; background: #fff; border-radius: 10px; line-height: 0; }
.id-qr canvas, .id-qr img { max-width: 100%; }
@media print {
  body * { visibility: hidden !important; }
  #idcard, #idcard * { visibility: visible !important; }
  #idcard { position: absolute; left: 0; top: 0; box-shadow: none; }
}

/* ---------------- ID card (university style) + editor ---------------- */
.idc { width: 100%; max-width: 340px; padding: 18px 20px 0; text-align: center; color: #0f172a; background: linear-gradient(180deg, #f8fbff 0%, #dbeafe 100%); border: 1px solid #cbd5e1; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.5); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.idc-head { display: flex; align-items: center; gap: 12px; text-align: left; }
.idc-head img { width: 56px; height: 56px; border-radius: 10px; }
.idc-uni { font: 800 17px/1.15 "Segoe UI", system-ui, sans-serif; color: #1e3a8a; }
.idc-tag { display: inline-block; margin: 12px 0; padding: 3px 16px; border-radius: 99px; background: #e2e8f0; border: 1px solid #94a3b8; color: #1e293b; font: 700 11px "Segoe UI", sans-serif; letter-spacing: .06em; }
.idc-photo { display: block; width: 150px; height: 150px; margin: 0 auto 12px; border-radius: 50%; object-fit: cover; border: 3px solid #1e3a8a; background: #bfdbfe; }
.idc-name { margin: 0 0 10px; font: 800 18px "Segoe UI", system-ui, sans-serif; text-transform: uppercase; color: #0f172a; }
.idc-rows { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; text-align: left; font-size: 14px; }
.idc-rows span { font: 700 14px Georgia, serif; color: #1e293b; }
.idc-rows b { font-weight: 500; word-break: break-word; }
.idc-bottom { display: flex; justify-content: flex-end; margin-top: 8px; }
.idc-qr { padding: 5px; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; line-height: 0; }
.idc-foot { margin: 8px -20px 0; padding: 16px 20px 12px; background: linear-gradient(90deg, #1e40af, #2563eb); color: #fff; font: 600 12px "Segoe UI", sans-serif; border-radius: 50% 50% 0 0 / 22px 22px 0 0; }
.idedit { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.photo-pick { width: 190px; }
.photo-prev { display: block; width: 140px; height: 140px; margin-bottom: 8px; border-radius: 50%; object-fit: cover; border: 3px solid #f59e0b; }
@media print {
  #idcard { position: absolute; left: 0; top: 0; box-shadow: none; }
}
.auth-side .credits{
  line-height: 1.6;
  font-weight: 500;
  color: #ffffff;
}

.auth-side .name{
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  color: #F59E0B;
}

/* ---------------- marks: one folder per student ---------------- */
.sfolder { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; margin-bottom: 10px; overflow: hidden; background: rgba(255,255,255,.02); }
.sfolder.open { border-color: rgba(245,158,11,.35); }
.sfolder-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: transparent; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sfolder-head:hover { background: rgba(255,255,255,.05); }
.sf-ico { font-size: 20px; }
.sf-name { font-weight: 700; }
.sf-meta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.sf-chev { font-size: 22px; line-height: 1; transition: transform .15s; }
.sfolder.open .sf-chev { transform: rotate(90deg); }
.sfolder-body { padding: 4px 16px 14px; border-top: 1px solid rgba(255,255,255,.06); }
@media (max-width: 480px) {
  .sfolder-head { flex-wrap: wrap; padding: 12px; gap: 8px; }
  .sf-meta { width: 100%; margin-left: 32px; }
  .sfolder-body { padding: 4px 8px 12px; }
}

/* ---------------- full-height fixes ---------------- */
/* Login and app shell fill the whole window, however tall it is. */
.auth { min-height: 100vh; min-height: 100dvh; }
.shell { min-height: 100vh; min-height: 100dvh; }

/* Sidebar: exactly one screen tall. The menu scrolls inside it, and the user's name stays pinned at the bottom. */
.sidebar { height: 100vh; height: 100dvh; overflow: hidden; }
.sidebar .nav { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; }
.sidebar .who { flex: none; margin-top: 0; }
@media (max-height: 820px) {
  .nav button { padding: 8px 14px; margin-bottom: 1px; }
  .brand { padding-bottom: 14px; margin-bottom: 6px; }
}

/* Phones: the sidebar becomes the top bar again, and the login header keeps its natural height. */
@media (max-width: 820px) {
  .auth { grid-template-rows: auto 1fr; }
  .sidebar { height: auto; overflow: visible; }
  .sidebar .nav { min-height: auto; }
}

/* =====================================================================
   MOBILE APP LOOK (phones & small tablets). Placed last so it wins.
   Desktop is untouched.
   ===================================================================== */
@media (max-width: 820px) {
  :root { --dock-h: 64px; --top-h: 54px; }
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-tap-highlight-color: transparent; background-attachment: scroll; }
  button, .btn, a { touch-action: manipulation; }

  /* ---------- top app bar ---------- */
  .shell { grid-template-columns: minmax(0,1fr); grid-template-rows: auto 1fr; align-content: start; }
  .shell::before {
    content: "UniPulse"; display: flex; align-items: center;
    position: sticky; top: 0; z-index: 25;
    height: calc(var(--top-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 64px 0 18px;
    font: 700 20px Georgia, "Times New Roman", serif; letter-spacing: -.01em; color: #fbbf24;
    background: rgba(9,13,22,.86);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }

  /* ---------- bottom navigation dock (swipe sideways) ---------- */
  .sidebar {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 30;
    height: auto; overflow: visible;
    flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.45);
  }
  .brand { flex: none; padding: 0; margin: 0; border: 0; }
  .brand img { width: 38px; height: 38px; border-radius: 11px; }
  .nav, .sidebar .nav {
    flex: 1; min-width: 0; min-height: auto; display: flex; gap: 6px; padding: 2px;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav button {
    flex: none; width: auto; min-height: 42px; margin: 0; padding: 0 15px;
    border-radius: 12px; background: transparent; color: rgba(255,255,255,.88);
    font-size: 13.5px; font-weight: 600; white-space: nowrap; scroll-snap-align: center;
    transition: background .15s, color .15s;
  }
  .nav button:hover { transform: none; background: rgba(255,255,255,.12); }
  .nav button:active { background: rgba(255,255,255,.22); }
  .nav button.on { background: #fff; color: #9A3412; font-weight: 700; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
  .sidebar .who { display: none; }

  /* ---------- page content ---------- */
  .main { max-width: none; padding: 18px 14px calc(var(--dock-h) + 36px + env(safe-area-inset-bottom, 0px)); }
  .main > header { margin-bottom: 18px; }
  .main > header :is(h1, h2) { font-size: 26px; line-height: 1.15; }
  .main > header p { font-size: 14px; margin: 6px 0 0; color: var(--muted); }

  .stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-bottom: 20px; }
  .stat { min-width: 0; min-height: 92px; padding: 16px; border-radius: 16px; }
  .stat b { font-size: 30px; }

  .panel { padding: 16px; border-radius: 18px; margin-bottom: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
  .panel h3 { font-size: 17px; margin-bottom: 12px; }
  .grid { grid-template-columns: minmax(0,1fr); }
  .chart-box { height: 230px; }
  .week { grid-template-columns: minmax(0,1fr); }

  /* ---------- tables: wrap text so they fit the screen ---------- */
  .tablewrap { margin: 0 -4px; }
  table { font-size: 13px; }
  th, td { padding: 10px 8px; white-space: normal; vertical-align: middle; }
  th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
  td .badge, td .btn, td .actions { white-space: nowrap; }
  td select { max-width: 100%; }

  /* ---------- search, filters, pager ---------- */
  .toolbar { gap: 10px; }
  .toolbar .search { flex: 1 1 100%; min-width: 0; }
  .toolbar select { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .pager { justify-content: center; }
  .pager .btn { flex: 1 1 40%; }

  /* ---------- controls ---------- */
  .btn { border-radius: 12px; }
  .btn:active { transform: scale(.98); filter: brightness(.95); }
  .btn.sm { padding: 8px 14px; }
  .actions { flex-wrap: wrap; }
  input, select, textarea { border-radius: 12px; }
  .idc { margin: 0 auto; }

  /* ---------- notification bell: top right, inside the top bar ---------- */
  .bell-wrap { top: calc(5px + env(safe-area-inset-top, 0px)); bottom: auto; right: 12px; z-index: 40; }
  .bell { width: 42px; height: 42px; box-shadow: none; }
  .bell-panel { top: 50px; bottom: auto; right: 0; width: min(380px, calc(100vw - 24px)); max-height: calc(100dvh - 140px); }

  /* ---------- toast sits above the dock ---------- */
  #toast { bottom: calc(var(--dock-h) + 20px + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: calc(100vw - 32px); text-align: center; }

  /* ---------- LOGIN: logo + name + the credits (this brings the names back) ---------- */
  .auth { grid-template-rows: auto 1fr; }
  .auth-side {
    flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 14px 16px;
    padding: calc(22px + env(safe-area-inset-top, 0px)) 20px 22px;
    border-radius: 0 0 28px 28px;
  }
  .auth-side img { flex: none; width: 62px; border-radius: 16px; }
  .auth-side h1 { font-size: 26px; margin: 0 0 4px; }
  .auth-side p { display: none; }
  .auth-side .credits, .auth-side p.credits {
    display: block; flex: 1 1 100%; max-width: none; margin: 0;
    font-size: 11.5px; line-height: 1.55; font-weight: 500; color: rgba(255,255,255,.92);
  }
  .auth-side .name { display: inline-block; margin-right: 12px; font-size: 11px; letter-spacing: 1.5px; }
  .auth-main { align-items: flex-start; padding: 22px 16px 40px; }
  .auth-card { max-width: none; padding: 24px 20px; border-radius: 22px; }
}