/* Enverga Medkiosk web: palette and shapes taken from THEME_AND_STYLE.md */
:root{
  --bg:#07131f; --bg2:#0b2032;
  --surface:rgba(255,255,255,.95); --surface-soft:rgba(255,255,255,.84);
  --ink:#122332; --muted:#667784; --line:rgba(147,171,190,.28);
  --navy:#0d3553; --blue:#1b83c6; --blue2:#52b4ea;
  --green:#16a36a; --red:#c44652; --amber:#d49329;
  --shadow:0 24px 70px rgba(0,18,35,.24);
}
*{box-sizing:border-box}
html{min-height:100%}
body{
  margin:0; min-height:100vh; color:var(--ink);
  font:15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at 12% 15%, rgba(27,131,198,.30), transparent 29%),
    radial-gradient(circle at 92% 85%, rgba(22,163,106,.14), transparent 26%),
    linear-gradient(135deg, var(--bg), var(--bg2));
  background-attachment:fixed;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:linear-gradient(#000, transparent 85%); mask-image:linear-gradient(#000, transparent 85%);
}
a{color:var(--blue)}
h1,h2,h3{margin:0 0 .5em; color:var(--navy); letter-spacing:-.025em}
h1{font-size:clamp(26px,3.4vw,36px)}
h2{font-size:20px}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace, Consolas, monospace}
.nowrap{white-space:nowrap}
.right{text-align:right}

/* top bar */
.topbar{position:sticky; top:0; z-index:20; background:rgba(7,30,48,.80); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.12)}
.topbar-in{max-width:1240px; margin:0 auto; padding:12px 22px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.brand{color:#fff; text-decoration:none; font-weight:950; letter-spacing:.04em; font-size:19px; display:flex; flex-direction:column; line-height:1.15}
.brand small{font-weight:600; letter-spacing:0; font-size:12px; opacity:.7}
.nav{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.nav a,.navbtn{color:#fff; text-decoration:none; padding:8px 14px; border-radius:999px; font-weight:700; font-size:14px; background:none; border:0; cursor:pointer; font-family:inherit}
.nav a:hover,.navbtn:hover{background:rgba(255,255,255,.12)}
.nav a.on{background:rgba(82,180,234,.25)}
.inline{display:inline; margin:0}

.wrap{position:relative; z-index:1; max-width:1240px; margin:0 auto; padding:26px 22px 80px}
.head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.head h1{margin:0; color:#fff}
.head .muted{color:rgba(255,255,255,.7)}

/* cards */
.card{background:var(--surface); border:1px solid rgba(255,255,255,.6); border-radius:22px; padding:22px; box-shadow:var(--shadow); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); margin-bottom:20px}
.card.flush{padding:0; overflow:hidden}
.card-pad{padding:22px 22px 0}
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles{display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:20px}
.tile{background:linear-gradient(180deg,#f8fcfe,#edf7fb); border:1px solid #d5ebf6; border-radius:15px; padding:16px 18px}
.tile b{display:block; font-size:clamp(34px,4vw,48px); font-weight:1000; letter-spacing:-.05em; color:#0e3856; font-variant-numeric:tabular-nums; line-height:1.05}
.tile span{color:#68808e; font-weight:700; font-size:13px}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 19px; border:0; border-radius:14px; font:inherit; font-weight:850; color:#fff; text-decoration:none; cursor:pointer; background:linear-gradient(135deg,#1b83c6,#126ca8); box-shadow:0 10px 24px rgba(17,111,169,.22); transition:transform .18s ease, filter .18s ease}
.btn:hover{transform:translateY(-2px); filter:brightness(1.06)}
.btn:active{transform:scale(.98)}
.btn.secondary{background:#e9f3f9; color:#123b59; box-shadow:none}
.btn.danger{background:linear-gradient(135deg,#cf4b56,#aa2e39); box-shadow:0 10px 24px rgba(170,46,57,.2)}
.btn.small{min-height:34px; padding:0 13px; font-size:13px; border-radius:11px; box-shadow:none}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,.navbtn:focus-visible{outline:3px solid rgba(82,180,234,.6); outline-offset:2px}
.actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* forms */
label{display:block; font-weight:800; font-size:13px; color:#274b66; margin:0 0 6px}
input[type=text],input[type=password],input[type=date],input[type=number],input[type=search],input[type=file],select,textarea{
  width:100%; min-height:44px; padding:9px 13px; font:inherit; color:var(--ink); background:#fff; border:1px solid #c9dbe7; border-radius:13px}
input:focus,select:focus,textarea:focus{border-color:#55aeda; box-shadow:0 0 0 4px rgba(56,156,211,.12); outline:none}
.fields{display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr))}
.fields .full{grid-column:1/-1}
.hint{font-size:12.5px; color:var(--muted); margin-top:5px}
.filters{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:0}
.filters > div{flex:1 1 160px}
.filters .actions{flex:0 0 auto}

/* tables */
.tablewrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid #e3edf3; vertical-align:middle}
th{font-size:12.5px; font-weight:800; color:#176995; background:#f3f9fc; white-space:nowrap}
tbody tr:hover{background:#f7fbfd}
td.num,th.num{text-align:right}
.empty{padding:34px 22px; text-align:center; color:var(--muted)}

/* pills and messages */
.pill{display:inline-block; padding:3px 11px; border-radius:999px; font-size:12.5px; font-weight:800; background:#e9f3f9; color:#123b59}
.pill.ok{background:#dff5e9; color:#106c3e}
.pill.bad{background:#fbe4e6; color:#9b3039}
.pill.warn{background:#fff3d2; color:#7a5410}
.msg{padding:12px 16px; border-radius:13px; margin-bottom:16px; font-weight:650}
.msg.error{background:#fde9eb; color:#982d38; border:1px solid #f1c8cd}
.msg.success{background:#e7f8ee; color:#116c42; border:1px solid #c3ead3}
.msg.warn{background:rgba(255,243,210,.96); color:#6b4a0c; border:1px solid #efd58b}
.keybox{font-family:ui-monospace, Consolas, monospace; font-size:15px; background:#0b2032; color:#bfe6ff; padding:14px 16px; border-radius:13px; word-break:break-all; user-select:all}

.pager{display:flex; gap:16px; align-items:center; justify-content:center; padding:16px; color:var(--muted)}
.pager a{font-weight:800; text-decoration:none}

/* login */
.auth{min-height:100vh; display:grid; place-items:center; padding:24px; position:relative; z-index:1}
.auth-card{width:min(460px,96vw); background:var(--surface); border:1px solid rgba(255,255,255,.65); border-radius:28px; padding:34px 32px 30px; box-shadow:var(--shadow); position:relative; animation:popIn .55s cubic-bezier(.2,.8,.2,1) both}
.auth-card::before{content:""; position:absolute; top:0; left:32px; width:56px; height:6px; border-radius:0 0 6px 6px; background:linear-gradient(90deg,#1b83c6,#16a36a)}
.auth-card h1{font-size:28px; margin-top:8px}
.stack > * + *{margin-top:16px}
.auth-card p{margin-bottom:0}
@keyframes popIn{from{opacity:0; transform:translateY(24px) scale(.97)} to{opacity:1; transform:none}}

@media (max-width:900px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g2,.fields{grid-template-columns:1fr}
}
@media (max-width:560px){
  .wrap{padding:18px 14px 60px}
  th,td{padding:10px 10px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}
.actions.end{justify-content:flex-end}
.card .fields{margin-bottom:18px}
.card > p + p,.card > .actions,.card > div + .actions,.card > .keybox{margin-top:14px}

/* students */
.tiles-6{grid-template-columns:repeat(6,minmax(0,1fr)); margin-bottom:0}
.tiles-6 .tile b{font-size:clamp(26px,3vw,38px)}
.form-narrow{max-width:520px}
.note{color:rgba(255,255,255,.7); font-size:13px}
.print-only{display:none}
@media (max-width:900px){ .tiles-6{grid-template-columns:repeat(3,minmax(0,1fr))} }

@media print{
  body{background:#fff !important; color:#000}
  body::before,.topbar,.noprint,.pager{display:none !important}
  .wrap{padding:0; max-width:none}
  .print-only{display:block; margin-bottom:14px; font-size:14px}
  .print-title b{font-size:18px}
  .head h1{color:#000}
  .card{box-shadow:none !important; background:#fff !important; border:1px solid #999; border-radius:8px; backdrop-filter:none; break-inside:avoid}
  .tile{background:#fff !important; border:1px solid #999; break-inside:avoid}
  th{background:#eee !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .note{color:#333}
  tr{break-inside:avoid}
}

/* password show/hide */
.pw{position:relative}
.pw input{padding-right:74px}
.pw-toggle{position:absolute; right:6px; top:50%; transform:translateY(-50%); min-height:32px; padding:0 12px; border:0; border-radius:10px; background:#e9f3f9; color:#123b59; font:inherit; font-size:13px; font-weight:800; cursor:pointer}
.pw-toggle:hover{background:#d9ebf5}
.pw-toggle:focus-visible{outline:3px solid rgba(82,180,234,.6); outline-offset:2px}

/* student tiles, legend, print sheet */
.tiles-auto{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-bottom:0}
.tiles-auto .tile b{font-size:clamp(26px,3vw,38px)}
.legend summary{cursor:pointer; font-weight:800; color:var(--navy)}
.legend-grid{display:grid; gap:12px; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:16px}
.legend-grid .tile b{font-size:18px; letter-spacing:0}
.legend-grid .tile span{font-size:12.5px; font-weight:500; line-height:1.4}
@media (max-width:900px){ .legend-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sheet-title{text-align:center; margin-bottom:14px; color:#fff}
.sheet-title b{font-size:20px; letter-spacing:.04em}
.sheet-title .muted{color:rgba(255,255,255,.7); font-size:13px}
.legend-line{font-size:12px; color:rgba(255,255,255,.7); text-align:center}
.sheet-table th,.sheet-table td{padding:8px 10px; font-size:13px}
@page sheet{size:A4 landscape; margin:12mm}
@media print{
  .sheet{page:sheet}
  .sheet-title{color:#000}
  .sheet-title .muted,.legend-line{color:#333}
  .sheet-table{border-collapse:collapse}
  .sheet-table th,.sheet-table td{border:1px solid #888; font-size:11px; padding:5px 6px}
  .sheet-card{border:0 !important}
}
.namecell{min-width:175px}