/* =========================================================
   Jaber Al Ahmad Hospital Policy Portal — Design System
   Palette: bright clinical teal + warm coral accent, airy off-white paper.
   No navy/near-black blocks, no gradients, no glassmorphism — flat & light.
   ========================================================= */

:root{
  /* Colors — bright clinical teal + warm coral, no navy/near-black blocks */
  --bg: #F5F9F8;
  --surface: #FFFFFF;
  --surface-alt: #E9F2F0;
  --primary: #1C8577;
  --primary-dark: #146F63;
  --primary-tint: #DCF0EC;
  --accent: #F0653F;
  --accent-tint: #FDE3D9;
  --success: #3E9B5C;
  --success-tint: #E1F3E6;
  --danger: #D9362B;
  --danger-tint: #FBE0DD;
  --text: #1D2926;
  --text-muted: #5E716C;
  --border: #D3E6E1;
  --border-strong: #A9CCC4;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.82rem;
  --fs-sm: 0.95rem;
  --fs-base: 1.08rem;
  --fs-md: 1.22rem;
  --fs-lg: 1.5rem;
  --fs-xl: 1.9rem;
  --fs-2xl: 2.4rem;
  --fs-3xl: 3rem;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-flat: 0 1px 0 rgba(16,58,68,0.06);
  --shadow-card: 0 2px 10px rgba(16,58,68,0.08);
}

*{ box-sizing: border-box; }
html,body{ height:100%; overflow-x:hidden; } /* a too-wide child (e.g. a data table) must never push the whole page — and its sticky header — sideways */
body{
  margin:0;
  font-family: var(--font);
  background-color: var(--bg);
  background-image: linear-gradient(rgba(245,249,248,0.70), rgba(245,249,248,0.70)), url("hospital-bg.jpg");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--text);
  font-size: var(--fs-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ margin:0 0 0.4em 0; font-weight:800; letter-spacing:-0.01em; color: var(--primary-dark); }
h1{ font-size: var(--fs-2xl); }
h2{ font-size: var(--fs-xl); }
h3{ font-size: var(--fs-lg); }
h4{ font-size: var(--fs-md); }
p{ margin:0 0 1em 0; }
a{ color: var(--primary); }
button{ font-family: inherit; }

.eyebrow{
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: var(--fs-xs);
  font-weight:700;
  color: var(--accent);
}

/* App shell */
#app{ min-height:100%; display:flex; flex-direction:column; }
.view{ display:none; flex:1; }
.view.active{ display:flex; flex-direction:column; }

/* Top bar — light glass over the background image */
/* Header — solid surface (not translucent-over-photo), compact single row
   for brand + account, plus a proper segmented tab bar for navigation.
   Reads like a native app's nav bar instead of a glassy overlay. */
.topbar{
  background: var(--surface);
  color: var(--text);
  padding: 14px 24px 0;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 10px rgba(16,58,68,0.06);
  position: sticky; top:0; z-index:20;
}
.topbar-main{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:12px; }
.topbar .brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.topbar .brand-mark{
  width:44px; height:44px; border-radius:50%;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
}
.topbar .brand-mark img{ width:100%; height:100%; object-fit:cover; }
.topbar .brand-copy{ min-width:0; }
.topbar .brand-hospital{
  font-size:0.74rem; color:var(--accent); font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar .brand-title{ font-weight:800; font-size:1.5rem; letter-spacing:-0.01em; color:var(--primary-dark); line-height:1.18; }

/* Account avatar + dropdown menu (replaces the old always-on name/logout pill) */
.user-menu-wrap{ position:relative; flex-shrink:0; }
.avatar-btn{
  width:44px; height:44px; border-radius:50%;
  background: var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1rem;
  border:2px solid var(--primary-tint);
  cursor:pointer; padding:0;
}
.avatar-btn:hover{ background:var(--primary-dark); }
.user-menu{
  position:absolute; top:calc(100% + 12px); right:0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow: 0 14px 30px rgba(16,58,68,0.2);
  padding:14px 18px; min-width:190px;
  display:none; flex-direction:column;
  z-index:30;
}
.user-menu.open{ display:flex; }
.user-menu::before{
  content:""; position:absolute; top:-7px; right:15px;
  width:13px; height:13px; background:var(--surface);
  border-left:1px solid var(--border); border-top:1px solid var(--border);
  transform:rotate(45deg);
}
.user-menu-name{ font-weight:800; font-size:1.02rem; color:var(--text); }
.user-menu-role{
  font-size:var(--fs-xs); color:var(--text-muted); text-transform:capitalize;
  margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--border);
}
.user-menu-logout{
  background:none; border:none; text-align:left; padding:0; margin-top:2px;
  color:var(--danger); font-weight:700; font-size:var(--fs-sm); cursor:pointer;
}
.user-menu-logout:hover{ text-decoration:underline; }

/* Nav tabs — a proper segmented control instead of plain scrolling links */
.tab-bar{
  display:flex; gap:4px;
  background: var(--surface-alt);
  border-radius: 999px;
  padding:4px;
  margin-bottom:12px;
}
.topbar-link{
  flex:1; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--text-muted); font-size:var(--fs-sm); font-weight:700;
  padding:9px 8px; border-radius:999px;
  border:none; cursor:pointer; background:none;
  transition: background .15s, color .15s;
}
.topbar-link:hover{ color:var(--primary-dark); }
.topbar-link.active{ background:var(--primary); color:#fff; box-shadow:0 2px 8px rgba(28,133,119,0.35); }

/* Layout containers */
.page{ max-width: 1080px; margin:0 auto; padding: 32px 28px 64px; width:100%; }
.page-narrow{ max-width: 720px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 22px; font-size: var(--fs-base); font-weight:700;
  border-radius: var(--radius-sm); border:2px solid transparent;
  cursor:pointer; text-decoration:none; line-height:1;
}
.btn-primary{ background: var(--primary); color:#fff; }
.btn-primary:hover{ background: var(--primary-dark); }
.btn-accent{ background: var(--accent); color:#fff; }
.btn-accent:hover{ background:#D14F2C; }
.btn-outline{ background: transparent; border-color: var(--primary); color: var(--primary); }
.btn-outline:hover{ background: var(--primary-tint); }
.btn-danger-outline{ background:transparent; border-color: var(--danger); color:var(--danger); }
.btn-sm{ padding:8px 14px; font-size: var(--fs-sm); }
.btn-block{ width:100%; }
.btn:disabled{ opacity:0.45; cursor:not-allowed; }

/* Cards */
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.card-pad{ padding: 24px; }

/* Login */
.login-wrap{
  flex:1; display:flex; align-items:center; justify-content:center;
  background-color: #1DAFBE;
  background-image: url("hospital-bg.jpg");
  background-size: 100% 100%; /* stretch to fill exactly, no cropping or letterboxing */
  background-position: center;
  background-repeat: no-repeat;
  position:relative;
  padding: 24px;
}
.login-box{
  width:100%; max-width: 420px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.28);
}
.login-mark-row{ display:flex; justify-content:center; margin-bottom:18px; }
.login-mark{
  width:84px; height:84px; border-radius:50%;
  background: var(--surface-alt); border:2px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.login-mark::before{
  content:""; width:34px; height:34px;
  background: var(--border-strong);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21v-13a2 2 0 0 1 2 -2h2v-2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v2h2a2 2 0 0 1 2 2v13'/><path d='M9 21v-4a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4'/><path d='M9 9l1 0'/><path d='M14 9l1 0'/><path d='M9 13l1 0'/><path d='M14 13l1 0'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21v-13a2 2 0 0 1 2 -2h2v-2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v2h2a2 2 0 0 1 2 2v13'/><path d='M9 21v-4a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4'/><path d='M9 9l1 0'/><path d='M14 9l1 0'/><path d='M9 13l1 0'/><path d='M14 13l1 0'/></svg>") center/contain no-repeat;
}
.login-mark img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.login-mark.has-logo::before{ display:none; }
.login-signin-label{ text-align:center; margin-bottom:18px; color:var(--text-muted); font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:0.08em; font-weight:800; }
.login-links{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:18px; }
.login-links a{ font-size:var(--fs-sm); font-weight:600; color:var(--primary); text-decoration:none; }
.login-links a:hover{ text-decoration:underline; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:var(--fs-sm); font-weight:700; margin-bottom:6px; color:var(--text); }
.field select, .field input{
  width:100%; padding:12px 14px; font-size: var(--fs-base);
  border:2px solid var(--border); border-radius: var(--radius-sm);
  background:#fff; color:var(--text); font-family:inherit;
}
.field select:focus, .field input:focus{ outline:none; border-color: var(--primary); }
.hint{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:6px; }

/* Policy grid */
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin: 34px 0 16px; }
.policy-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:20px; }
.policy-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  overflow:hidden; cursor:pointer; transition: border-color .15s, transform .15s;
  display:flex; flex-direction:column;
}
.policy-card:hover{ border-color: var(--accent); transform: translateY(-2px); }
.policy-card-top{
  height:8px; background: var(--primary);
}
.policy-card-body{ padding:20px; flex:1; display:flex; flex-direction:column; gap:10px; }
.policy-card h3{ margin:0; font-size:var(--fs-md); }
.policy-card .desc{ font-size:var(--fs-sm); color:var(--text-muted); flex:1; margin:0; }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-xs); font-weight:700; padding:4px 10px; border-radius:999px;
  width:fit-content;
}
.badge-success{ background:var(--success-tint); color:var(--success); }
.badge-accent{ background:var(--accent-tint); color:#B84226; }
.badge-muted{ background:var(--surface-alt); color:var(--text-muted); }

/* Daily knowledge check hero — clean solid brand color, no photo/blur (keeps it readable and professional) */
.hero-daily{
  background: linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:#FFFFFF; border-radius: var(--radius-lg);
  padding: 30px 34px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px;
  border:1px solid var(--primary-dark);
  box-shadow: 0 6px 20px rgba(16,58,68,0.14);
}
.hero-daily-copy{ display:flex; flex-direction:column; align-items:center; }
.hero-daily h2{ color:#fff; margin-bottom:6px; text-align:center; }
.hero-daily p{ margin:0; opacity:0.82; font-size:var(--fs-sm); }
.hero-daily p.hero-punchline{
  opacity:0.92; font-weight:600; font-style:italic; font-size:var(--fs-sm); letter-spacing:0;
  margin-top:2px; text-align:center;
}
.hero-daily-actions{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:22px; }
.streak-widget{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.streak-circle{
  width:72px; height:72px; border-radius:50%;
  background: rgba(255,255,255,0.14); border:2px solid rgba(255,255,255,0.45);
  display:flex; align-items:center; justify-content:center;
  font-size:1.65rem; font-weight:800; color:var(--accent);
}
.streak-caption{ font-size:var(--fs-xs); opacity:0.85; font-weight:600; }
.hero-daily-actions .btn{ padding:14px 30px; }

/* Policy detail — 3 action cards */
.action-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:22px; }
.action-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:24px; display:flex; flex-direction:column; gap:10px; cursor:pointer;
  border-top: 4px solid var(--primary);
}
.action-card.locked{ cursor:not-allowed; opacity:0.55; }
.action-card:hover:not(.locked){ border-color:var(--accent); }
.action-card .num{ font-size:var(--fs-xs); font-weight:800; color:var(--accent); letter-spacing:0.08em; }

/* Review slides */
.review-progress{ height:6px; background:var(--surface-alt); border-radius:999px; overflow:hidden; margin-bottom:26px; }
.review-progress-bar{ height:100%; background:var(--accent); transition:width .2s; }
.review-slide{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:40px; min-height:320px; }
.review-slide-eyebrow{ font-size:var(--fs-xs); font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.review-slide-section{ font-size:var(--fs-2xl); font-weight:800; letter-spacing:0.04em; text-transform:uppercase; color:var(--accent); margin-bottom:4px; }
.review-slide h2{ margin-bottom:18px; font-size:var(--fs-xl); }
.review-slide-section ~ h2{ font-size:var(--fs-lg); color:var(--primary); margin-bottom:16px; }
.review-slide p{ font-size:var(--fs-md); line-height:1.65; margin-bottom:14px; color:var(--text); }
.review-slide p:last-child{ margin-bottom:0; }
.review-slide b{ color:var(--primary-dark); }
.review-slide ul, .review-slide ol{ padding-left:22px; margin-bottom:14px; }
.review-slide li{ margin-bottom:8px; font-size:var(--fs-md); line-height:1.55; }
.review-slide li ul{ margin:8px 0 4px; padding-left:20px; }
.review-slide li ul li{ margin-bottom:5px; font-size:var(--fs-base); color:var(--text); }
.review-meta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 28px; background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--radius-md); padding:22px 24px; margin-bottom:22px; }
.review-meta-item .review-meta-label{ font-size:var(--fs-xs); font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px; }
.review-meta-item .review-meta-value{ font-size:var(--fs-base); font-weight:700; color:var(--primary-dark); }
@media (max-width:560px){ .review-meta-grid{ grid-template-columns:1fr; } }
.review-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:22px; }
.review-counter{ font-size:var(--fs-sm); color:var(--text-muted); font-weight:700; }

/* Quiz */
.quiz-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.quiz-progress{ height:8px; background:var(--surface-alt); border-radius:999px; overflow:hidden; flex:1; margin:0 18px; }
.quiz-progress-bar{ height:100%; background:var(--primary); transition:width .25s; }
.quiz-counter{ font-weight:800; color:var(--primary); white-space:nowrap; }
.quiz-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:34px; }
.quiz-q{ font-size:var(--fs-lg); font-weight:700; margin-bottom:26px; }
.quiz-options{ display:flex; flex-direction:column; gap:12px; }
.quiz-opt{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border:2px solid var(--border); border-radius:var(--radius-md);
  cursor:pointer; font-size:var(--fs-base); font-weight:600; background:#fff;
}
.quiz-opt:hover{ border-color: var(--primary); }
.quiz-opt .letter{
  width:30px;height:30px;border-radius:8px;background:var(--surface-alt);
  display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--text-muted);flex-shrink:0;
}
.quiz-opt.correct{ border-color: var(--success); background: var(--success-tint); }
.quiz-opt.correct .letter{ background:var(--success); color:#fff; }
.quiz-opt.wrong{ border-color: var(--danger); background: var(--danger-tint); }
.quiz-opt.wrong .letter{ background:var(--danger); color:#fff; }
.quiz-opt.disabled{ cursor:default; }
.quiz-explain{
  margin-top:20px; padding:16px 18px; border-radius:var(--radius-md);
  background: var(--accent-tint); border:1px solid #F3B49C; font-size:var(--fs-sm);
}
.quiz-explain b{ color:#B84226; }
.quiz-footer{ display:flex; justify-content:flex-end; margin-top:24px; }

/* Results */
.result-hero{ text-align:center; padding: 40px 20px; }
.score-circle{
  width:150px;height:150px;border-radius:50%; margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  border:8px solid var(--primary-tint);
}
.score-circle.pass{ border-color: var(--success-tint); }
.score-circle .num{ font-size:2.2rem; font-weight:800; color:var(--primary); }
.score-circle.pass .num{ color:var(--success); }
.score-circle .of{ font-size:var(--fs-xs); color:var(--text-muted); font-weight:700; }
.review-item{ border:1px solid var(--border); border-radius:var(--radius-md); padding:18px; margin-bottom:14px; }
.review-item .q{ font-weight:700; margin-bottom:10px; }
.review-item .your-answer{ color:var(--danger); font-size:var(--fs-sm); margin-bottom:4px; }
.review-item .correct-answer{ color:var(--success); font-size:var(--fs-sm); margin-bottom:8px; }
.review-item .explain{ font-size:var(--fs-sm); color:var(--text-muted); background:var(--surface-alt); padding:10px 12px; border-radius:var(--radius-sm); }

/* Certificate — A4 landscape, teal/orange patterned border */
.cert-wrap{ display:flex; justify-content:center; padding: 10px 0 30px; }
/* Thin double-line border (teal hairline / white gap / coral hairline) instead of
   the old thick striped frame — reads like a real diploma border, not a chunky
   banner, and leaves far more width for the container-query-sized text below
   (the old 42px-per-side border stack was crushing the text on narrow phones). */
.cert-frame{
  width: 1122px; max-width:100%; aspect-ratio: 297/210;
  background: var(--primary-dark);
  padding:9px;
  box-sizing:border-box;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.cert-frame-mid{
  width:100%; height:100%; background:#fff;
  padding:3px; box-sizing:border-box;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.cert-frame-inner{
  width:100%; height:100%; background:var(--accent);
  padding:4px; box-sizing:border-box;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.certificate{
  container-type: inline-size;
  width:100%; height:100%; box-sizing:border-box;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFEFD 100%);
  position:relative; text-align:center;
  padding:3.4cqw 5.5cqw 2.8cqw;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.cert-logos{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.cert-logos img{ height:clamp(22px, 6cqw, 60px); width:auto; object-fit:contain; }
.cert-logo-center{ height:clamp(26px, 7.2cqw, 74px); }
.cert-body{ display:flex; flex-direction:column; align-items:center; }
.cert-hospital{
  font-family:'Playfair Display', Georgia, serif; font-weight:800; font-size:clamp(13px, 2.9cqw, 32px); color:var(--primary-dark);
  letter-spacing:-0.01em; white-space:nowrap; margin-bottom:1cqw;
}
.cert-eyebrow{
  font-family:'Alex Brush', 'Brush Script MT', cursive; font-weight:400;
  font-size:clamp(20px, 4.6cqw, 50px); color:#D6A419; white-space:nowrap; line-height:1.15; margin-bottom:2.2cqw;
}
.cert-intro{
  font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:600;
  color:var(--text); font-size:clamp(10px, 1.55cqw, 17px); white-space:nowrap; margin:0.8cqw 0;
}
/* The recipient's name is the whole point — it's the biggest, boldest line on
   the certificate, bigger than the hospital name above it. */
.cert-name{
  font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:700;
  font-size:clamp(18px, 3.6cqw, 40px); color:var(--primary-dark); white-space:nowrap; margin:1.2cqw 0 1.4cqw;
}
.cert-policy{
  font-family:'Playfair Display', Georgia, serif; font-weight:800;
  font-size:clamp(13px, 2.5cqw, 28px); color:var(--primary-dark); white-space:nowrap; margin:1.2cqw 0 0;
}
.cert-meta{ display:flex; justify-content:space-between; width:100%; padding-top:1.8cqw; border-top:1px solid var(--border); font-size:clamp(10px, 1.7cqw, 18px); font-weight:600; color:var(--text); }
.cert-meta div{ text-align:left; flex:1; }
.cert-meta .label{ color:var(--text-muted); font-size:clamp(7px, 1.1cqw, 12px); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:5px; }
/* .print-area marks whatever should survive onto the printed page -- there can
   be more than one such view in the file (certificate, leaderboard, ...); only
   the one that's actually on screen when window.print() fires is ever visible,
   since every other view already has display:none from the normal tab logic.
   @page orientation itself is set dynamically per print by ui.printPage(),
   since @page can't be scoped to a class the way normal rules can. */
@media print{
  html, body{ background:#fff !important; background-image:none !important; }
  body *{ visibility:hidden !important; }
  .print-area, .print-area *{ visibility:visible !important; }
  .print-area{ position:absolute; top:0; left:0; width:100%; margin:0; }

  /* Certificate */
  .cert-wrap{ padding:0; display:flex; justify-content:center; }
  .cert-frame{ margin:0 auto; }
  .cert-frame, .cert-frame-mid, .cert-frame-inner, .certificate{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  /* Flat background for print only: gradients (even simple ones) have rasterized
     as solid black on some mobile PDF/print pipelines — a plain white fill is
     bulletproof and keeps the certificate crisp and legible in the PDF. */
  .certificate{ background:#FFFFFF !important; }

  /* Leaderboard — plain portrait report: real page margins (via ui.printPage,
     not @page:0 like the certificate), a print-only heading since the on-screen
     H1 above the filter chips isn't part of .print-area, and card borders
     instead of shadows so rows don't smear on a laser/inkjet printout. */
  .lb-print{ padding:0; }
  .lb-print-head{ display:block; }
  .lb-print-title{ font-family:'Playfair Display', Georgia, serif; font-weight:800; font-size:24px; color:var(--primary-dark); }
  .lb-print-date{ font-size:12px; color:var(--text-muted); margin-top:3px; margin-bottom:18px; }
  .print-area .lb-card{ box-shadow:none; border:1px solid #ccc; break-inside:avoid; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .print-area .lb-card.lb-me{ background:#fff !important; }
}

/* Leaderboard */
.lb-controls{ display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.lb-chip{ padding:8px 16px; border-radius:999px; border:2px solid var(--border); font-weight:700; font-size:var(--fs-sm); cursor:pointer; background:#fff; }
.lb-chip.active{ border-color:var(--primary); background:var(--primary); color:#fff; }
/* This heading only exists for the printed page (see @media print below) —
   on screen, the real H1 above the filter chips already covers it. */
.lb-print-head{ display:none; }
/* Wraps any data table so, if it's wider than the screen, IT scrolls
   horizontally within its own box — never the whole page (which would drag
   the sticky header sideways with it). Kept for the admin dashboard's plain
   tables; the leaderboard itself uses the card list below instead. */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-md); }
.table-scroll table{ min-width:540px; }

/* Leaderboard card list — replaces a wide table so nothing ever needs to
   scroll sideways to be read, and the ranking reads like a real app, not a
   spreadsheet. Rank #1-3 get a medal badge; everyone's streak is the
   headline number, since that's what should motivate people to keep it up. */
.lb-list{ display:flex; flex-direction:column; gap:10px; }
.lb-card{
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:12px 14px; box-shadow:var(--shadow-flat);
}
.lb-card.lb-me{ background:var(--accent-tint); border-color:#F0B99A; }
.lb-rank{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:0.95rem; color:#fff; background:var(--primary);
}
.lb-rank.rank-1{ background:linear-gradient(135deg,#FFDC85,#EFAA1B); color:#4A3400; }
.lb-rank.rank-2{ background:linear-gradient(135deg,#EDF1F2,#C3CCCF); color:#38403F; }
.lb-rank.rank-3{ background:linear-gradient(135deg,#E7B486,#C07C43); color:#3E2A12; }
.lb-info{ flex:1 1 auto; min-width:0; }
.lb-name{ font-weight:700; font-size:var(--fs-base); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-you{ font-weight:600; color:var(--primary); font-size:var(--fs-xs); }
.lb-meta{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-star{ color:var(--accent); }
.lb-streak-badge{
  flex:0 0 auto; display:flex; align-items:baseline; gap:3px;
  padding:7px 12px; border-radius:999px; background:var(--accent-tint);
}
.lb-streak-num{ font-weight:800; font-size:var(--fs-md); color:var(--accent); line-height:1; }
.lb-streak-fire{ font-size:0.9rem; }

/* Admin */
/* Scrollable pill tabs instead of an underline row that just got clipped flush
   against the right edge on phones — same fix pattern as the main tab bar. */
.admin-tabs{ display:flex; gap:8px; margin-bottom:22px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
.admin-tabs::-webkit-scrollbar{ display:none; }
.admin-tab{
  flex:0 0 auto; padding:9px 16px; border-radius:999px; border:2px solid var(--border);
  font-weight:700; font-size:var(--fs-sm); cursor:pointer; color:var(--text-muted);
  background:#fff; white-space:nowrap;
}
.admin-tab.active{ border-color:var(--primary); background:var(--primary); color:#fff; }
.admin-section-h{ margin:0 0 12px; }
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:28px; }
.stat-box{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px; box-shadow:var(--shadow-card);
}
.stat-box .icon{
  width:38px; height:38px; border-radius:11px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.stat-box .n{ font-size:var(--fs-2xl); font-weight:800; line-height:1; }
.stat-box .l{ font-size:var(--fs-xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:700; margin-top:6px; }
.stat-box.c-primary .icon{ background:var(--primary-tint); } .stat-box.c-primary .n{ color:var(--primary-dark); }
.stat-box.c-success .icon{ background:var(--success-tint); } .stat-box.c-success .n{ color:var(--success); }
.stat-box.c-accent  .icon{ background:var(--accent-tint); }  .stat-box.c-accent  .n{ color:var(--accent); }
.stat-box.c-gold    .icon{ background:#FBEACB; }              .stat-box.c-gold    .n{ color:#B8790A; }
.row-flex{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--border); }

/* Admin card list — same flat-card recipe as the leaderboard, used in place of
   dense multi-column tables that never fit a phone screen without scrolling. */
.admin-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:26px; }
.admin-card{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:12px 14px; box-shadow:var(--shadow-flat);
}
.admin-card-badge{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:0.8rem; color:#fff; background:var(--primary);
}
.admin-card-badge.accent{ background:var(--accent); }
.admin-card-info{ flex:1 1 160px; min-width:0; }
.admin-card-title{ font-weight:700; font-size:var(--fs-base); }
.admin-card-meta{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; }
.admin-empty{ text-align:center; color:var(--text-muted); font-size:var(--fs-sm); padding:22px; background:var(--surface-alt); border-radius:var(--radius-md); }
.toggle{ position:relative; width:46px; height:26px; border-radius:999px; background:var(--border-strong); cursor:pointer; flex-shrink:0; }
.toggle.on{ background:var(--success); }
.toggle::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .15s; }
.toggle.on::after{ left:23px; }

/* Footer nav for back buttons */
.backlink{ display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); font-weight:700; font-size:var(--fs-sm); cursor:pointer; margin-bottom:18px; text-decoration:none; }
.backlink:hover{ color:var(--primary); }

/* Toast */
#toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--primary-dark); color:#fff; padding:12px 22px; border-radius:var(--radius-md); font-weight:700; font-size:var(--fs-sm); box-shadow:0 8px 20px rgba(0,0,0,0.25); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:999; }
#toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }

/* Responsive */
@media (max-width: 640px){
  .page{ padding:20px 16px 48px; }

  .topbar{ padding:12px 16px 0; }
  .topbar .brand-mark, .avatar-btn{ width:38px; height:38px; }
  .topbar .brand-hospital{ font-size:0.66rem; }
  .topbar .brand-title{ font-size:1.25rem; }
  .topbar-link{ font-size:0.8rem; padding:9px 6px; }

  .hero-daily{ padding:24px 22px; }
  .hero-daily-actions{ width:100%; }
  .hero-daily-actions .btn{ width:100%; max-width:320px; }
  .cert-meta{ gap:20px; flex-wrap:wrap; }
}

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius:10px; }