/* ============================================================
   UFM Cases Portal — base styles & design tokens
   Recreated from the BITS design handoff (navy + gold).
   ============================================================ */

:root {
  /* Brand navy */
  --navy-1: #0C2C4E;
  --navy-2: #0A2645;
  --navy-3: #0B2240;
  --navy-4: #08203A;
  /* Gold / accent */
  --gold: #D4AF37;
  --gold-1: #E6C04A;
  --gold-2: #C2932B;
  /* Surfaces & text */
  --page-bg: #EEF2F8;
  --ink: #16273B;
  --ink-2: #5B6B7F;
  --ink-3: #66727F;
  --line: #E4EAF1;
  /* Status / type accents */
  --danger: #D14B4B;
  --success: #15724E;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--page-bg);
  color: var(--ink);
}
textarea, input, button, select { font-family: inherit; }
a { color: inherit; }

/* ---------- Accessibility: visible keyboard focus + screen-reader helpers ---------- */
/* One consistent focus ring for keyboard users. !important guarantees it shows even on the
   many controls that set outline:none inline; mouse clicks don't trigger :focus-visible. */
:root { --focus: #1A56C4; }
:focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 2px; }
/* On the dark top navigation a gold ring stays visible against the navy. */
.topnav :focus-visible { outline-color: #E6C04A !important; }
/* ...but the dropdown menus inside the bar are white surfaces — keep the blue ring there
   (gold on white would be ~1.75:1 and fail as a focus indicator). */
.menu :focus-visible, .notif-menu :focus-visible { outline-color: var(--focus) !important; }
/* Visually hidden, still read by screen readers. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Skip-to-content link: parked off-screen until focused, then drops into view. */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: #0B2240; color: #fff; padding: 10px 16px; border-radius: 0 0 10px 10px; font-size: 13px; font-weight: 600; text-decoration: none; transition: top .16s ease; }
.skip-link:focus { top: 0; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C7D2E0; border-radius: 6px; border: 2px solid var(--page-bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Animations (from the design) ---------- */
@keyframes fadeUp      { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes loginRise   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes panelInRight{ from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes photoZoom   { from { transform: scale(1.12); } to { transform: scale(1); } }

/* Case-history timeline: each entry fades up and its icon springs in, staggered top-to-bottom
   (the per-row delay is set inline). Kept subtle; disabled under reduced-motion. */
@keyframes tlRise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes tlPop  { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
.tl-row  { animation: tlRise .5s cubic-bezier(.22,1,.36,1) both; }
.tl-node { animation: tlPop .5s cubic-bezier(.34,1.56,.64,1) both; }
@media (prefers-reduced-motion: reduce) {
  .tl-row, .tl-node { animation: none !important; }
}

/* ============================================================
   LOGIN SCREEN
   ============================================================ */
.login { height: 100vh; width: 100vw; overflow: hidden; position: relative; color: #16273B; }
.login__photo {
  position: absolute; inset: 0;
  background: #0A2240 url("../img/clock-hero-3.6290ad9ab91a.png") center/cover no-repeat;
  animation: photoZoom 1.8s cubic-bezier(.22,1,.36,1) both;
}
.login__tint  { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(5,14,30,.42) 0%, rgba(5,14,30,.12) 26%, rgba(5,14,30,0) 48%, rgba(5,14,30,0) 64%, rgba(7,18,38,.24) 100%); }
.login__glow  { position: absolute; inset: 0; background: radial-gradient(120% 85% at 87% 8%, rgba(212,175,55,.2), transparent 52%); }
.login__scroll{ position: absolute; inset: 0; z-index: 2; overflow-y: auto; }

.login__logo { width: 171px; height: 65px; display: block; position: absolute; left: 73px; top: 23px; }

.lg-wrap {
  min-height: 100%; display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(28px,5vw,80px); padding: 48px clamp(34px,6vw,76px); flex-wrap: wrap; position: relative;
}

/* Brand block */
.lg-brand { flex: 1 1 360px; max-width: 540px; min-width: 240px; display: flex; flex-direction: column; animation: loginRise .8s ease .15s both; }
.lg-eyebrow { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.lg-eyebrow span:first-child { width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg,#E6C04A,rgba(230,192,74,.12)); }
.lg-eyebrow span:last-child  { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(232,196,86,.95); text-shadow: 0 1px 8px rgba(4,11,24,.5); }
.lg-brand h1 { font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 600; font-size: clamp(27px,5.4vw,50px); line-height: 1.06; color: #fff; letter-spacing: -.012em; text-shadow: 0 2px 18px rgba(4,11,24,.6); }
.lg-brand p  { font-size: clamp(13.5px,1.5vw,15px); color: #C6D6E6; margin-top: 16px; max-width: 420px; line-height: 1.55; text-shadow: 0 1px 10px rgba(4,11,24,.55); }
.lg-pills { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.lg-pill  { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); color: #E8F0FA; font-size: 12px; font-weight: 500; padding: 7px 13px; border-radius: 20px; }

/* Glass sign-in card */
.lg-card {
  flex: 0 0 auto; width: 396px; max-width: 100%; align-self: center;
  background: linear-gradient(155deg, rgba(20,40,66,.44), rgba(9,23,43,.34));
  backdrop-filter: blur(26px) saturate(135%); -webkit-backdrop-filter: blur(26px) saturate(135%);
  border: 1px solid rgba(255,255,255,.22); border-radius: 24px; padding: 30px 30px 26px;
  box-shadow: 0 44px 90px -34px rgba(3,10,22,.82), inset 0 1px 0 rgba(255,255,255,.2);
  animation: panelInRight .85s cubic-bezier(.22,1,.36,1) both;
}
.lg-eyebrow-sm { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(230,192,74,.92); }
.lg-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; color: #fff; letter-spacing: -.01em; margin-top: 7px; }
.lg-sub   { font-size: 13px; color: rgba(226,236,247,.72); margin-top: 6px; line-height: 1.5; }

.lg-field { margin-top: 16px; }
.lg-label { display: block; font-size: 12px; font-weight: 500; color: rgba(226,236,247,.82); margin-bottom: 7px; }
.lg-inputwrap { display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.22); border-radius: 11px; padding: 11px 14px; background: rgba(255,255,255,.09); }
.lg-inputwrap:focus-within { border-color: rgba(230,192,74,.7); }
.lg-inputwrap span { color: rgba(255,255,255,.6); font-size: 14px; }
.lg-input { border: none; outline: none; flex: 1; font-size: 13.5px; color: #fff; background: transparent; }
.lg-input::placeholder { color: rgba(226,236,247,.45); }

.lg-btn {
  width: 100%; margin-top: 22px; border: none; cursor: pointer;
  background: linear-gradient(135deg,#E6C04A,#C2932B); color: #0B2240;
  font-weight: 700; font-size: 14.5px; padding: 13px; border-radius: 12px;
  box-shadow: 0 14px 30px -10px rgba(212,175,55,.7); font-family: 'Space Grotesk', sans-serif;
}
.lg-btn:hover { filter: brightness(1.03); }

.lg-error { background: rgba(209,75,75,.18); border: 1px solid rgba(209,75,75,.5); color: #FFE0E0; font-size: 12.5px; border-radius: 10px; padding: 9px 12px; margin-top: 16px; }

.lg-foot { margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; gap: 8px; }
.lg-foot span { font-size: 11px; color: rgba(214,226,240,.62); letter-spacing: .02em; }
.lg-foot b { color: rgba(232,196,86,.9); font-weight: 600; }

/* Responsive: stack brand above card */
@media (max-width: 900px) {
  .lg-wrap { flex-direction: column; align-items: stretch; justify-content: flex-start; padding-top: 100px; gap: 30px; }
  .lg-brand { order: 1; flex: 0 0 auto; max-width: 600px; align-self: flex-start; }
  .lg-card  { order: 2; align-self: flex-start; }
}
@media (max-width: 560px) {
  .lg-wrap { padding-left: 20px; padding-right: 20px; padding-bottom: 32px; }
  .lg-card { width: 100%; align-self: stretch; }
  .lg-brand h1 { font-size: clamp(28px,9vw,40px); }
  .login__logo { left: 24px; top: 18px; width: 140px; height: auto; }
}

/* ============================================================
   APP SHELL (top nav + content)
   ============================================================ */
.app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.topnav { height: 60px; flex: none; background: linear-gradient(135deg,#0C2C4E,#0A2645); display: flex; align-items: center; padding: 0 18px; gap: 14px; position: relative; z-index: 30; box-shadow: inset 0 -1px 0 rgba(255,255,255,.07); }
.topnav__logo { height: 40px; width: auto; display: block; }
/* Sized to its content (not flex:1) so the "Manage" button — which must live OUTSIDE this
   container, whose overflow-x would clip its dropdown — sits immediately after the last tab
   instead of being pushed to the far right of the bar. */
.navtabs { display: flex; align-items: stretch; gap: 2px; height: 100%; overflow-x: auto; overflow-y: hidden; flex: 0 1 auto; min-width: 0; margin-left: 10px; scrollbar-width: none; }
.navtabs::-webkit-scrollbar { display: none; }
.nav-tab { display: flex; align-items: center; height: 100%; padding: 0 14px; border: none; background: none; color: #9FB6CE; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; font-family: inherit; text-decoration: none; }
.nav-tab:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-tab--active { color: #fff; border-bottom-color: #D4AF37; }
.nav-badge { margin-left: 7px; background: #D4AF37; color: #0B2240; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 20px; font-family: 'IBM Plex Mono', monospace; }
.topnav__right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.divider-v { width: 1px; height: 27px; background: rgba(255,255,255,.12); }
/* "Manage" menu — the Admin's setup screens (Audit log / Codes / Users). Sits beside the tabs
   but outside .navtabs, whose overflow-x would clip the dropdown. */
.manage { position: relative; height: 100%; display: flex; align-items: stretch; flex: none; }
.manage__menu { left: 0; right: auto; top: 54px; width: 200px; }

/* Global search: an icon in the bar, opening a centred overlay (also on Ctrl+K / ⌘K). A permanent
   190px box left the nav tabs 152px short, hiding the last tabs behind a scrollbar we style away. */
.search-ov { position: fixed; inset: 0; z-index: 200; background: rgba(6,16,32,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 14vh 20px 20px; }
.search-ov__box { width: min(620px, 100%); background: #fff; border-radius: 14px; box-shadow: 0 30px 70px -18px rgba(6,16,32,.65); padding: 12px 14px; display: flex; align-items: center; gap: 11px; }
.search-ov__input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 15px; color: #16273B; }
.search-ov__input::placeholder { color: #66727F; }
.search-ov__kbd { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #66727F; border: 1px solid #E4EAF1; border-radius: 5px; padding: 3px 6px; flex: none; }
@media (max-width: 560px) { .search-ov__kbd { display: none; } }
/* Evidence preview modal — a held file (PDF/image/video) opens on the page instead of a new tab */
.ev-modal { position: fixed; inset: 0; z-index: 400; background: rgba(6,16,32,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 4vh 20px; }
.ev-modal--open { display: flex; }
.ev-modal__box { width: min(1040px, 96vw); height: min(88vh, 900px); background: #fff; border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(6,16,32,.7); display: flex; flex-direction: column; overflow: hidden; }
.ev-modal__bar { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid #EEF3F8; flex: none; }
.ev-modal__title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px; color: #0B2240; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-modal__link { font-size: 11.5px; color: #2D6BD4; font-weight: 600; text-decoration: none; border: 1px solid #CFE0F7; border-radius: 8px; padding: 6px 11px; flex: none; }
.ev-modal__link:hover { background: #F3F8FF; }
.ev-modal__close { width: 34px; height: 34px; border-radius: 8px; border: 1px solid #E4EAF1; background: #F6F9FD; color: #445; cursor: pointer; font-size: 14px; flex: none; }
.ev-modal__close:hover { background: #ECF1F7; }
.ev-modal__frame { flex: 1; min-height: 0; background: #F1F4F8; display: flex; align-items: center; justify-content: center; }
.ev-modal__frame iframe { width: 100%; height: 100%; border: 0; }
.ev-modal__frame img, .ev-modal__frame video { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Notification bell dropdown */
.notif-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #D14B4B; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 1.5px solid #0B2240; }
.notif-menu { position: absolute; right: 0; top: 46px; width: 322px; max-height: 424px; overflow-y: auto; background: #fff; border: 1px solid #E4EAF1; border-radius: 14px; box-shadow: 0 18px 44px rgba(11,34,64,.18); padding: 6px; z-index: 60; }
.notif-menu__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 6px; font-size: 12px; font-weight: 700; color: #0B2A4A; text-transform: uppercase; letter-spacing: .04em; }
.notif-readall { border: none; background: none; color: #2D6BD4; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; text-transform: none; letter-spacing: 0; }
.notif-readall:hover { text-decoration: underline; }
.notif-item { display: flex; gap: 9px; align-items: flex-start; padding: 9px 10px; border-radius: 9px; text-decoration: none; }
.notif-item:hover { background: #F3F7FC; }
.notif-item--unread { background: #EEF4FD; }
.notif-dot { width: 7px; height: 7px; border-radius: 50%; background: #CBD6E4; margin-top: 6px; flex: none; }
.notif-item--unread .notif-dot { background: #2D6BD4; }
.notif-body { display: flex; flex-direction: column; gap: 2px; }
.notif-msg { font-size: 12.5px; line-height: 1.4; color: #213347; }
.notif-time { font-size: 11px; color: #66727F; }
.notif-empty { padding: 22px 12px; text-align: center; font-size: 12.5px; color: #66727F; }

/* HTMX loading indicator: hidden by default, shown while a request is in flight */
.htmx-indicator { opacity: 0; transition: opacity .2s ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Alpine: hide x-cloak elements until Alpine initializes (prevents a flash of content) */
[x-cloak] { display: none !important; }

/* Responsive: stack the Appeals decision cards to one column on small screens */
@media (max-width: 720px) {
  .r-appeal { grid-template-columns: 1fr !important; gap: 14px !important; }
  .r-appeal__mid { border-left: none !important; padding-left: 0 !important; }
  .r-appeal__actions { align-items: flex-start !important; }
}
/* Responsive: let the wide Discussion-items table scroll sideways in its card on small screens */
@media (max-width: 820px) {
  .r-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .r-disc-row { min-width: 760px; }
}
.icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.07); color: #CFE0F7; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; position: relative; }
.icon-btn:hover { background: rgba(255,255,255,.15); }
.bell-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 9px; background: #D14B4B; color: #fff; font-size: 9.5px; font-weight: 700; font-family: 'IBM Plex Mono', monospace; display: flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid #0A2645; }
.avatar-btn { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: 30px; padding: 4px 12px 4px 4px; cursor: pointer; }
.avatar-btn:hover { background: rgba(255,255,255,.13); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#D4AF37,#B8862A); display: flex; align-items: center; justify-content: center; color: #0B2A4A; font-weight: 700; font-size: 12px; font-family: 'Space Grotesk', sans-serif; flex: none; }
.avatar-name { font-size: 11.5px; color: #fff; font-weight: 500; line-height: 1.15; }
.avatar-role { font-size: 10px; color: #9FB6CE; }
.menu { position: absolute; right: 0; top: 48px; width: 230px; background: #fff; border: 1px solid #E4EAF1; border-radius: 13px; box-shadow: 0 18px 40px -16px rgba(11,34,64,.4); padding: 7px; z-index: 50; animation: fadeUp .16s ease; }
.menu__label { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: #66727F; padding: 8px 10px 6px; }
.menu a, .menu button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: none; background: none; cursor: pointer; border-radius: 8px; font-size: 12.5px; color: #16273B; font-weight: 500; text-decoration: none; font-family: inherit; text-align: left; }
.menu a:hover, .menu button:hover { background: #F6F9FD; }
.menu .danger { color: #D14B4B; }
.menu hr { border: none; height: 1px; background: #EEF2F7; margin: 6px 4px; }
.content { flex: 1; overflow-y: auto; overflow-x: hidden; background: #EEF2F8; }

/* ============================================================
   SHARED PIECES
   ============================================================ */
/* Center width-limited content so leftover space is balanced (not dumped on the right).
   Has no effect on full-width screens: auto margins on a full-width block resolve to 0. */
.r-pad { padding-left: 34px; padding-right: 34px; margin-left: auto; margin-right: auto; }
.card { background: #fff; border: 1px solid #E8EEF5; border-radius: 16px; box-shadow: 0 8px 24px -20px rgba(11,34,64,.4); }
.card__head { display: flex; align-items: center; padding: 17px 22px; border-bottom: 1px solid #EEF3F8; }
.card__title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; color: #0B2240; }
.link-btn { margin-left: auto; border: none; background: none; color: #2D6BD4; font-size: 12.5px; font-weight: 500; cursor: pointer; text-decoration: none; }
.badge-pill { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 500; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.mono { font-family: 'IBM Plex Mono', monospace; }
.muted { color: #66727F; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.page-head { display: flex; align-items: flex-end; margin-bottom: 20px; }
.page-eyebrow { font-size: 12px; color: #66727F; letter-spacing: .02em; }
.page-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 23px; color: #0B2240; margin-top: 3px; }
.btn-light { border: 1px solid #D7DFE9; background: #fff; color: #0B2240; font-weight: 500; font-size: 12.5px; padding: 9px 15px; border-radius: 9px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-light:hover { border-color: #0B2A4A; }
.btn-dark { border: none; background: linear-gradient(135deg,#0C2C4E,#0A2645); color: #fff; font-weight: 500; font-size: 12.5px; padding: 10px 16px; border-radius: 9px; cursor: pointer; text-decoration: none; display: inline-block; box-shadow: 0 6px 14px -8px rgba(11,34,64,.6); }
.btn-gold { border: none; background: linear-gradient(135deg,#E6C04A,#C2932B); color: #0B2240; font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: 9px; cursor: pointer; text-decoration: none; display: inline-block; font-family: 'Space Grotesk', sans-serif; }

/* ===== DASHBOARD ===== */
.hero { background: linear-gradient(135deg,#0C2C4E 0%,#08203A 60%,#0A2747 100%); padding: 26px 34px 76px; position: relative; overflow: hidden; }
.hero__glow1 { position: absolute; top: -90px; right: -30px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle,rgba(212,175,55,.18),transparent 70%); }
.hero__glow2 { position: absolute; bottom: 0; left: 34%; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle,rgba(45,107,212,.16),transparent 70%); }
.hero__inner { position: relative; z-index: 2; }
.hero__eyebrow { font-size: 12.5px; color: #9FB6CE; letter-spacing: .03em; }
.hero h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 26px; color: #fff; margin-top: 6px; letter-spacing: -.01em; }
.hero p { font-size: 13.5px; color: #AFC2D6; margin-top: 7px; max-width: 560px; }
.stat-row { padding: 0 34px; margin-top: -50px; position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.stat-card { background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.9); border-radius: 15px; padding: 17px 19px; box-shadow: 0 14px 32px -16px rgba(11,34,64,.42); position: relative; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
/* The stat cards are links into a filtered case list — signal that they're clickable. */
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -16px rgba(11,34,64,.5); border-color: #C9DAF0; }
.stat-card::after { content: "→"; position: absolute; top: 15px; right: 16px; font-size: 13px; font-weight: 700; color: #2D6BD4; opacity: 0; transform: translateX(-3px); transition: opacity .15s ease, transform .15s ease; }
.stat-card:hover::after { opacity: 1; transform: none; }
.stat-card__label { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #5B6B7F; }
.stat-card__dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.stat-card__value { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 29px; color: #0B2240; margin-top: 11px; line-height: 1; }
.stat-card__sub { font-size: 11px; font-weight: 600; margin-top: 6px; }
.grid2 { padding: 24px 34px 40px; display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; }
.dist-bar { height: 7px; border-radius: 4px; background: #EEF3F8; overflow: hidden; }
.dist-bar > div { height: 100%; border-radius: 4px; }

/* ===== TABLES & FILTERS (Cases/Archive/etc.) ===== */
.filters { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
.chip { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #E1E8F1; border-radius: 10px; padding: 9px 14px; font-size: 12.5px; color: #0B2240; font-weight: 500; }
.type-filter { border: 1px solid #E1E8F1; background: #fff; color: #5B6B7F; font-size: 12px; font-weight: 500; padding: 8px 14px; border-radius: 9px; cursor: pointer; text-decoration: none; display: inline-block; }
.type-filter--active { background: #0B2240; color: #fff; border-color: #0B2240; }
.search { margin-left: auto; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #E1E8F1; border-radius: 10px; padding: 9px 14px; font-size: 12.5px; color: #66727F; min-width: 230px; }
.table-wrap { background: #fff; border: 1px solid #E8EEF5; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px -20px rgba(11,34,64,.4); }
.tbl-head { display: grid; gap: 12px; padding: 14px 22px; border-bottom: 1px solid #EEF3F8; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #66727F; font-weight: 600; }
.tbl-row { width: 100%; display: grid; gap: 12px; padding: 14px 22px; border: none; border-bottom: 1px solid #F3F7FB; background: #fff; cursor: pointer; align-items: center; text-align: left; text-decoration: none; color: inherit; font-family: inherit; }
.tbl-row:hover { background: #F7FAFD; }

/* Discussion items — the case id / student cell opens the full case record. Only these
   two cells are links: the same row carries the Award and "Shift back" controls, which
   must keep their own clicks. */
.disc-open { text-decoration: none; color: inherit; display: block; cursor: pointer; }
.disc-open:hover { text-decoration: underline; }
.disc-open:focus-visible { outline: 2px solid #2D6BD4; outline-offset: 3px; border-radius: 5px; }

/* ============================================================
   RESPONSIVE — phones, tablets, laptops.
   !important overrides the design's inline grid styles where needed.
   ============================================================ */

/* Any data table sits in a horizontal-scroll container on small screens
   (the parent card scrolls; the table keeps usable column widths). */
@media (max-width: 900px) {
  .card, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.table-wrap { overflow-x: auto; }
@media (max-width: 760px) {
  .tbl-head, .tbl-row { min-width: 700px; }
}

/* Laptops / small desktops: stack the two-column content regions */
@media (max-width: 1024px) {
  .grid2, .r-g2 { grid-template-columns: 1fr !important; }
}

/* Tablets */
@media (max-width: 860px) {
  .stat-row, .r-stat { grid-template-columns: repeat(2, 1fr) !important; }
  .page-head { flex-wrap: wrap; row-gap: 12px; }
  .filters { flex-wrap: wrap; }
  .search { margin-left: 0 !important; min-width: 0 !important; width: 100%; }
}

/* Compact the top nav so the notification bell + avatar menu always fit */
@media (max-width: 680px) {
  .topnav { padding: 0 10px; gap: 8px; }
  .avatar-name, .avatar-role { display: none !important; }
  .avatar-btn { padding: 4px !important; }
  /* The logo is a replaced element, so its automatic minimum size pins it at ~104px and it will
     not shrink. On a phone the Admin bar (logo + tabs + Manage + search + bell + avatar) has no
     slack left, and because .app is overflow:hidden the surplus is simply CLIPPED — the avatar,
     the only route to Sign out, falls off the screen, and the tab strip collapses to zero width.
     Dropping the logo here frees those 104px, restoring the fit (and the scrollable tab strip)
     down to 320px — the width this bar is expected to survive, incl. 400% browser zoom. */
  .topnav__logo { display: none; }
}

/* Phones */
@media (max-width: 560px) {
  .r-pad, .hero, .stat-row, .grid2, .r-stat { padding-left: 16px !important; padding-right: 16px !important; }
  .stat-row, .r-stat { grid-template-columns: 1fr !important; }
}

/* --- Simple form controls (New case form, add-evidence) --- */
.f-card { background: #fff; border: 1px solid #E8EEF5; border-radius: 16px; padding: 20px 22px; box-shadow: 0 8px 24px -20px rgba(11,34,64,.4); }
.f-card + .f-card { margin-top: 16px; }
.f-card__title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14.5px; color: #0B2240; margin-bottom: 14px; }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.f-field { display: flex; flex-direction: column; gap: 6px; }
.f-field.f-wide { grid-column: 1 / -1; }
.f-label { font-size: 11.5px; font-weight: 600; color: #5B6B7F; }
.f-label .req { color: #C0392B; }
.f-in, .f-ta, .f-sel { width: 100%; border: 1px solid #D7DFE9; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #16273B; background: #FAFCFE; outline: none; }
.f-in:focus, .f-ta:focus, .f-sel:focus { border-color: #0B2A4A; background: #fff; }
.f-ta { resize: vertical; min-height: 88px; }
.f-in.f-err, .f-ta.f-err { border-color: #E0A9A2; background: #FCF4F3; }
@media (max-width: 720px) { .f-grid { grid-template-columns: 1fr; } }