/* ============================================================
   TOS ServiceDesk — app styles
   DESIGN TOKENS (brand-first). Components consume these variables,
   so the whole UI re-skins from here.
   Brand: #de424a (accent) · #303031 (ink) · white-dominant · Barlow Condensed.
   NOTE: --accent stays DYNAMIC — the submit form recolours it per issue
   type (spec §7 colour-coding), so it defaults to the brand red here.
   ============================================================ */
:root{
  /* Brand */
  --brand:#de424a; --brand-600:#c5323a; --brand-050:#fdecec;
  --accent:#de424a;                 /* dynamic: recoloured by submit-form JS */
  /* Neutrals (white-dominant) */
  --ink:#303031; --muted:#6b7280; --line:#e6e8eb;
  --bg:#f6f7f8; --card:#ffffff; --surface-2:#f5f6f8;
  /* Semantic */
  --green:#0f9d58; --red:#de424a; --amber:#d97706;
  /* Type — Manrope (UI/headings) + JetBrains Mono (accent micro-labels), per the
     Azurio look the owner liked. Mono is used for tracked uppercase labels, meta,
     ticket numbers — the "editorial/agency" signature. */
  --font-head:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"Manrope","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-accent:"JetBrains Mono",ui-monospace,"Cascadia Code",Consolas,monospace;
  /* Radius & elevation */
  --radius:10px; --radius-sm:6px; --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(48,48,49,.06);
  --shadow:0 8px 24px rgba(48,48,49,.10);
  --shadow-lg:0 18px 44px rgba(48,48,49,.16);
}
*{box-sizing:border-box}
body{
  margin:0;font-family:var(--font-body);font-size:16px;
  background:var(--bg);color:var(--ink);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-family:var(--font-head);font-size:1.75rem;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
h2{font-family:var(--font-head);font-size:1.2rem;font-weight:700;letter-spacing:-.01em;margin:0 0 12px}

/* ===== Page transitions =====
   1) Cross-document View Transitions — a smooth crossfade between pages on
      navigation (progressive enhancement: Chrome/Edge; older browsers just
      navigate as before, no harm).
   2) A gentle content entrance on every load so pages feel alive, not instant
      (works everywhere, incl. the login page). */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.4s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
main.container{animation:page-in .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes page-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Busy submit button — set by the double-submit guard in base.html.
   The label is kept (not replaced) so the button can't change width mid-press;
   the spinner sits alongside it. currentColor keeps it correct on every variant. */
button.is-busy{position:relative;cursor:progress}
button.is-busy>span{visibility:hidden}
button.is-busy::after{
  content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:btn-spin .6s linear infinite}
@keyframes btn-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  button.is-busy::after{animation-duration:1.6s}}

/* Top bar (frosted glass, brand-first) */
.topbar{background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);color:var(--ink);
  border-bottom:1px solid rgba(230,232,235,.7);position:sticky;top:0;z-index:900}
/* Width widened 1200 → 1320px (2026-07-20): the Employees table added Job Title
   and got tight; the extra 120px keeps role/status badges from wrapping without
   feeling wide-screen-ugly on narrower content (the submit form is centred inside
   a 660px hero, so nothing "spreads out"). */
.topbar-inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:10px 22px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);flex-shrink:0}
.brand:hover{text-decoration:none}
.brand img{height:30px;width:auto;display:block}
.brand-name{font-family:var(--font-head);font-weight:700;font-size:1.05rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink);border-left:2px solid var(--line);padding-left:11px}
/* Nav: never wrap — scroll horizontally on tight widths instead of breaking lines.
   ⚠️ The hidden scrollbar below is why the Admin link vanished for the Administrator
   (the only role with every link): it overflowed by 22px with nothing on screen to
   say so. Links that must never be missed do NOT belong in here — put them in
   .user-box. The .is-scrollable fade (toggled from base.html) is the guard so a
   future overflow announces itself instead of silently eating a link. */
.nav{display:flex;gap:2px;margin-left:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--ink);font-family:var(--font-accent);font-weight:500;font-size:.72rem;letter-spacing:.02em;
  text-transform:uppercase;white-space:nowrap;padding:7px 11px;border-radius:8px;transition:.15s ease}
.nav a:hover{color:var(--brand);background:var(--surface-2);text-decoration:none}
/* Desktop only — on mobile .nav is a vertical dropdown with overflow:visible, so
   nothing is ever clipped there and a fade would just dim the last item. */
@media(min-width:761px){
  .nav.is-scrollable{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
}
/* Shrink priority: the user box yields before the nav does.
   It used to be flex-shrink:0, which forced the nav to absorb the ENTIRE squeeze —
   that is what clipped a nav link on the Administrator (the only role wide enough
   to overflow). The display name is the right thing to sacrifice: it already
   ellipsises by design, and the full name is in the title attribute. */
.user-box{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:1;min-width:0}
.user-name{color:var(--ink);font-weight:600;font-family:var(--font-head);letter-spacing:.02em;
  max-width:170px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* At the container's full width the nav must keep every link. Below that it falls
   back to scrolling, where the .is-scrollable fade advertises the overflow —
   and ≤760px it becomes a vertical dropdown that never clips at all. */
@media(min-width:1200px){ .nav{flex-shrink:0} }
.role-badge{background:var(--surface-2);color:var(--muted);border:1px solid var(--line);
  font-family:var(--font-accent);font-size:.66rem;letter-spacing:.01em;padding:3px 9px;border-radius:999px;white-space:nowrap}
.link-btn{background:#fff;border:1px solid var(--line);color:var(--ink);padding:5px 12px;
  border-radius:8px;cursor:pointer;white-space:nowrap;transition:.15s ease}
.link-btn:hover{background:var(--surface-2);border-color:var(--muted)}
.logout-form{margin:0}
/* Hamburger (mobile only — shown ≤760px). Animates to an X when open. */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:4px;
  width:42px;height:42px;padding:0;flex-shrink:0;cursor:pointer;
  border:1px solid var(--line);background:#fff;border-radius:10px}
.nav-toggle:hover{background:var(--surface-2)}
.nav-toggle-bar{display:block;width:20px;height:2px;margin:0 auto;border-radius:2px;
  background:var(--ink);transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Keyboard focus: a visible brand ring for all interactive elements (accessibility). */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* Layout */
.container{max-width:1320px;margin:26px auto;padding:0 22px}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.muted{color:var(--muted)}
.small{font-size:.8rem}
.mono{font-family:var(--font-accent);letter-spacing:-.02em}
.empty{text-align:center;color:var(--muted);padding:32px}

/* Forms */
.field{margin-bottom:14px;position:relative}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:5px}
/* Checkbox rows: the box itself is a ~13px hit target, far under the 44px every
   other control on these forms meets. The label already toggles the box, so give
   the LABEL the comfortable row height rather than inflating the box out of
   proportion. Matters on /switch-pc/, which the whole firm fills in on phones. */
.field label.check-row{display:flex;align-items:center;gap:9px;min-height:44px;margin-bottom:0;cursor:pointer}
.field label.check-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}

/* Field hint — a small circled "?" revealing a tooltip on hover / keyboard focus.
   Markup: templates/tickets/_hint.html. Pure CSS, no JS.
   The tooltip is positioned against .field (position:relative above), NOT against
   the button — so it spans the field's width and can never spill off the viewport,
   however long the text or narrow the screen. */
.hint{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:15px;height:15px;padding:0;margin-left:5px;vertical-align:-2px;
  border:1px solid var(--line);border-radius:50%;
  background:#fff;color:var(--muted);
  font:700 10px/1 var(--font-body);cursor:help;transition:.15s ease}
.hint:hover,.hint:focus{border-color:var(--brand);color:var(--brand);background:var(--brand-050)}
.hint::after{
  content:attr(data-tip);
  position:absolute;left:0;right:0;bottom:calc(100% + 7px);
  padding:9px 11px;border-radius:8px;
  background:var(--ink);color:#fff;box-shadow:var(--shadow);
  /* Shorthand resets the label's 600 weight and .9rem size — the tip is prose. */
  font:400 .75rem/1.5 var(--font-body);letter-spacing:0;text-align:left;
  opacity:0;visibility:hidden;transform:translateY(3px);
  transition:opacity .15s ease,transform .15s ease;
  pointer-events:none;z-index:60}
/* :focus, not :focus-visible — focus-visible deliberately excludes touch, so on a
   phone (no hover at all) tapping the "?" would do nothing. This makes tap, click
   and keyboard all reveal it. */
.hint:hover::after,.hint:focus::after{opacity:1;visibility:visible;transform:none}
@media(prefers-reduced-motion:reduce){.hint::after{transition:none}}
.form-control,input[type=text],input[type=password],input[type=url],input[type=file],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff;
}
.form-control:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.err{color:var(--red);font-size:.82rem}
.err ul{margin:4px 0 0;padding-left:16px}
.stack{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.form-card{max-width:720px}
.form-actions{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
/* Conditional coloured section (spec §7 colour-coding) */
.accent-box{border-left:4px solid var(--accent);background:color-mix(in srgb,var(--accent) 6%,#fff);padding:12px;border-radius:8px}

/* Buttons */
.btn{display:inline-block;border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 17px;
  border-radius:var(--radius);font:inherit;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:.15s ease}
.btn:hover{background:var(--surface-2);text-decoration:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent);filter:brightness(.94)}
.btn-success{background:var(--green);border-color:var(--green);color:#fff}
.btn-success:hover{filter:brightness(.94)}
.btn-danger{background:var(--red);border-color:var(--red);color:#fff}
.btn-danger:hover{filter:brightness(.94)}
.btn-block{width:100%;margin-top:6px}

/* Tables */
.table{width:100%;border-collapse:collapse}
/* Horizontal padding is 8px (was 12): the employees table now carries 10 columns
   (checkbox + delete added 2026-07-20), and at 12px it no longer fit a 1280px
   viewport — the very clipped-buttons bug the overflow fix had just cured. */
.table th,.table td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);font-size:.92rem}
.table th{color:var(--muted);font-family:var(--font-accent);font-size:.68rem;text-transform:uppercase;letter-spacing:.02em;font-weight:500}
.table tbody tr:hover{background:var(--surface-2)}
/* Wide tables scroll INSIDE their card instead of overflowing it (fixes buttons
   spilling out of the container on the employees list, etc.). */
.table-wrap{width:100%;overflow-x:auto}
/* Overflow affordance (same disease as the nav's invisible Admin link): when the
   table is wider than the wrap, the action buttons in the last column sat clipped
   at the card edge with nothing saying "there's more". base.html toggles
   .is-scrollable while there is still content to the right of the scroll position,
   so the fade vanishes once you've scrolled to the buttons. */
.table-wrap.is-scrollable{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent)}
/* The actions column must never be the squeezed one: width:1% + nowrap makes the
   table allocate its intrinsic width, so squeezing happens in the text columns. */
.table th:last-child,.table td:last-child{width:1%;white-space:nowrap}
/* Long free-text cells yield instead (ellipsis; full value in the title attr).
   NOTE: max-width on a td is IGNORED by auto table layout — the clamp must live on
   an inner block element, hence the span.clamp-text wrapper in the templates. */
.table .clamp-text{display:block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Bulk-selection bar (employees screen) — visible only while rows are checked. */
.bulk-bar{display:flex;align-items:center;gap:10px;padding:10px 16px}
.bulk-bar[hidden]{display:none}
.table input[type=checkbox]{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}
/* Compact, aligned action buttons in a table row */
.row-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center;white-space:nowrap}
.row-actions form{margin:0}

/* Badges & chips — nowrap so a two-word role label ("Department Head",
   "IT Support") can never split across two lines inside a narrow table cell. */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:600;white-space:nowrap}
.chip{display:inline-block;padding:2px 9px;border-radius:6px;font-size:.75rem;font-weight:600;color:#fff}
.chip-hardware{background:#2563eb}
.chip-software_issues{background:#d97706}
.chip-software_installation{background:#059669}
.chip-unblocking_url{background:#7c3aed}
.chip-other{background:#6b7280}
.badge.breach{background:#fee2e2;color:#b91c1c}
.badge.late{background:#fef3c7;color:#92400e}
.status-new{background:#e0e7ff;color:#3730a3}
.status-pending_approval{background:#fef3c7;color:#92400e}
.status-approved{background:#d1fae5;color:#065f46}
.status-rejected{background:#fee2e2;color:#991b1b}
.status-assigned{background:#dbeafe;color:#1e40af}
.status-in_progress{background:#cffafe;color:#155e75}
.status-on_hold{background:#f3f4f6;color:#374151}
.status-resolved{background:#dcfce7;color:#166534}
.status-closed{background:#e5e7eb;color:#374151}
.status-reopened{background:#fef9c3;color:#854d0e}

/* Filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px}
.filter{padding:5px 13px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);
  color:var(--ink);font-size:.85rem;font-weight:600;transition:.15s ease}
.filter.active{background:var(--accent);border-color:var(--accent);color:#fff}
.filter:hover{text-decoration:none;border-color:var(--muted)}
.filter.active:hover{filter:brightness(.94);border-color:var(--accent)}

/* Detail page */
.detail-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:start}
.detail-list{display:grid;grid-template-columns:150px 1fr;gap:8px 12px;margin:0}
.detail-list dt{color:var(--muted);font-size:.85rem}
.detail-list dd{margin:0}
.plain{list-style:none;padding:0;margin:0}
.comment{border-top:1px solid var(--line);padding:10px 0}
.comment-head{display:flex;gap:8px;align-items:baseline;margin-bottom:2px}
.comment-form{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{padding:8px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.timeline li:last-child{border-bottom:none}
.link-back{color:var(--muted)}

/* Alerts */
.messages{margin-bottom:16px}
.alert{padding:11px 14px;border-radius:8px;margin-bottom:10px;font-size:.92rem}
.alert-success{background:#dcfce7;color:#166534;border:1px solid #86efac}
.alert-error,.alert-danger{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.alert-info{background:#dbeafe;color:#1e40af;border:1px solid #93c5fd}
.alert-warning{background:#fef3c7;color:#92400e;border:1px solid #fcd34d}

/* Near-real-time activity toast (bottom-right) */
.live-toast{position:fixed;right:20px;bottom:20px;z-index:1100;display:flex;align-items:center;
  gap:14px;max-width:380px;background:var(--ink);color:#fff;padding:16px 18px 16px 16px;
  border-radius:var(--radius);border-left:4px solid var(--brand);
  box-shadow:var(--shadow-lg);animation:toast-in .25s ease-out}
.live-toast[hidden]{display:none}
.live-toast-icon{font-size:1.6rem;line-height:1}
.live-toast-body{display:flex;flex-direction:column;gap:2px}
.live-toast-body strong{font-size:1rem}
.live-toast-body .muted{color:#9ca3af}
.live-toast-actions{display:flex;flex-direction:column;gap:6px;margin-left:auto}
@keyframes toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.btn-sm{padding:5px 12px;font-size:.8rem}

/* Nav notification bubbles */
.nav-badge{display:inline-block;min-width:18px;padding:0 5px;margin-left:2px;border-radius:999px;
  background:var(--brand);color:#fff;font-size:.7rem;font-weight:700;line-height:18px;text-align:center;
  vertical-align:middle;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.nav-badge[hidden]{display:none}

/* Required-field marker */
.req{color:#dc2626;font-weight:700}

/* Employees per-page control */
.perpage-row{display:flex;align-items:center;gap:6px;justify-content:flex-end;margin:-6px 0 12px}

/* Reports */
.stat-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.stat-card{flex:1;min-width:130px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat-n{font-size:2rem;font-weight:800;letter-spacing:-.03em}
.stat-l{color:var(--muted);font-family:var(--font-accent);font-size:.66rem;text-transform:uppercase;letter-spacing:.02em}
.bar-row{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:.9rem}
.bar-label{width:130px;flex-shrink:0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{flex:1;background:#eef2f7;border-radius:6px;height:14px;overflow:hidden}
.bar-fill{display:block;height:100%;background:var(--accent);border-radius:6px}
.bar-n{width:38px;text-align:right;color:var(--muted);flex-shrink:0}

/* Attachment preview modal */
.attach-link{background:none;border:none;color:var(--accent);cursor:pointer;font:inherit;padding:4px 0;text-align:left}
.attach-link:hover{text-decoration:underline}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.modal-overlay[hidden]{display:none}
.modal-box{background:#fff;border-radius:12px;width:min(900px,95vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.modal-actions{display:flex;gap:8px;white-space:nowrap}
.modal-body{padding:12px;overflow:auto;background:#f3f4f6}
.attach-img{max-width:100%;display:block;margin:0 auto}
.attach-frame{width:100%;height:70vh;border:none;background:#fff}

/* Email lookup (My Tickets) */
.lookup-form label{display:block;font-weight:600;margin-bottom:6px}
.lookup-row{display:flex;gap:8px}
.lookup-row .form-control{flex:1}

/* Auth (login) — glass card + helpdesk-robot */
.auth-wrap{min-height:calc(100vh - 130px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px 0}
.auth-card{width:100%;max-width:410px;margin:0;padding:24px 30px 28px;text-align:center}
.auth-card h1{font-family:var(--font-head);font-size:1.8rem;margin:4px 0 2px;text-transform:uppercase;letter-spacing:.01em}
.auth-card .sub{color:var(--muted);margin:0 0 4px}
.auth-card .case-note{margin:0 0 18px}
.auth-card .field{text-align:left}
/* Show / hide password toggle */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:62px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;
  color:var(--brand);font:inherit;font-weight:600;font-size:.82rem;cursor:pointer;padding:5px 8px}
.pw-toggle:hover{text-decoration:underline}
.robot{width:150px;margin:0 auto 4px}
.robot svg{width:100%;height:auto;display:block;overflow:visible}
.r-antenna{stroke:#c9ced5;stroke-width:4;stroke-linecap:round}
.r-antenna-tip{animation:r-pulse 1.8s ease-in-out infinite;transform-origin:center}
@keyframes r-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.r-eye,.r-pupil{transition:opacity .2s ease}
.r-pupil{transition:transform .16s ease, opacity .2s ease}
.r-hand{transition:transform .32s cubic-bezier(.3,.8,.3,1)}
.r-closed{opacity:0;transition:opacity .2s ease}
.robot.is-hiding .r-eye,.robot.is-hiding .r-pupil{opacity:0}
.robot.is-hiding .r-closed{opacity:1}
.robot.is-hiding .r-hand-l{transform:translate(22px,-58px)}
.robot.is-hiding .r-hand-r{transform:translate(-22px,-58px)}
@media(prefers-reduced-motion:reduce){.r-antenna-tip{animation:none}}

/* ===== Backdrops + glassmorphism =====
   Default: a clean STATIC vector (soft contour lines) on white.
   body.waves pages (submit / login): animated flowing line waves instead. */
.bg-static{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#fbfbfc}
.bg-static-svg{position:absolute;inset:0;width:100%;height:100%}
.waves-scene,.neural-scene{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#fbfbfc;display:none}
.waves-scene svg,.neural-scene svg{position:absolute;inset:0;width:100%;height:100%}
body.waves .bg-static,body.neural .bg-static{display:none}
body.waves .waves-scene{display:block}
body.neural .neural-scene{display:block}
.grain{position:fixed;inset:0;z-index:-1;width:100%;height:100%;opacity:.04;pointer-events:none;mix-blend-mode:multiply}

/* Decorative analytics Lottie — fixed bottom-LEFT, behind content, shown at full
   natural opacity. Internal pages only; hidden on login + submit (body.waves). */
/* Fade in only once Lottie has painted the first frame — otherwise the empty
   container renders alongside the page, then pops when the JSON parses. base.html
   adds .is-ready on the lottie 'DOMLoaded' event, which triggers this transition. */
.lottie-bg{position:fixed;left:-1.5vw;bottom:-1vw;z-index:-1;
  width:min(34vw,420px);aspect-ratio:1;opacity:0;pointer-events:none;
  transition:opacity .45s ease}
.lottie-bg.is-ready{opacity:1}
.lottie-bg svg{width:100%;height:100%;display:block}
body.waves .lottie-bg{display:none}
@media(max-width:760px){.lottie-bg{width:min(60vw,300px)}}
@media(prefers-reduced-motion:reduce){.lottie-bg{display:none}}

/* Glass surface (used as a tasteful accent, not the whole page) */
.glass-card{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.75);
  border-radius:22px;box-shadow:0 24px 70px rgba(48,48,49,.16), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4)}

/* Submit hero — centered form floating on the aurora */
.submit-hero{max-width:660px;margin:0 auto;padding:6px 0 48px}
.hero-head{text-align:center;margin:8px 0 22px;animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
/* Clean, minimal heading — sentence case, restrained size, solid colours (no
   all-caps display, no animated gradient sheen). */
.display{font-family:var(--font-head);font-weight:800;line-height:1.1;
  letter-spacing:-.025em;font-size:clamp(1.9rem,4vw,2.6rem);margin:0;color:var(--ink)}
.display .hl{color:var(--brand)}
.hero-head p{color:var(--muted);margin:8px auto 0;max-width:46ch}
.submit-hero .form-card{max-width:none;margin:0;animation:rise .7s .08s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* Contact strip under the submit form. Placeholder copy/numbers for now. */
.submit-hero .contact-box{max-width:none;margin:18px 0 0;padding:18px 22px;
  animation:rise .7s .16s cubic-bezier(.2,.7,.2,1) both}
.contact-box-head{margin:0 0 13px;font-family:var(--font-head);font-weight:700;
  font-size:.95rem;letter-spacing:-.01em;color:var(--ink)}
.contact-list{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.contact-list li{display:flex;flex-direction:column;gap:3px;min-width:0}
/* A person's name — deliberately NOT the uppercase mono micro-label used elsewhere:
   shouting someone's name reads as a category, not a colleague. */
.contact-name{font-family:var(--font-body);font-size:.78rem;font-weight:500;
  letter-spacing:.01em;color:var(--muted)}
.contact-num{font-family:var(--font-head);font-weight:700;font-size:.95rem;
  color:var(--ink);white-space:nowrap}
.contact-num:hover{color:var(--brand);text-decoration:none}
/* Stack before the three columns get too cramped to read. */
@media(max-width:600px){.contact-list{grid-template-columns:1fr;gap:13px}}

/* 404 page — minimalist and calm, reuses the .waves backdrop from submit/login. */
.notfound{max-width:520px;margin:60px auto;padding:36px 22px;text-align:center;
  animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.notfound-mark{width:56px;height:56px;margin-bottom:22px;opacity:.9}
.notfound-code{font-family:var(--font-accent);font-size:.72rem;font-weight:600;
  letter-spacing:.28em;color:var(--brand);margin:0 0 8px;text-transform:uppercase}
.notfound-title{font-family:var(--font-head);font-size:clamp(1.6rem,3.4vw,2.1rem);
  font-weight:800;letter-spacing:-.02em;margin:0 0 12px;color:var(--ink)}
.notfound-sub{color:var(--muted);margin:0 auto 26px;max-width:44ch}

/* Fixed glass credit pill, bottom-left */
/* "Powered by [Django logo]" — centered, in normal flow (below the form/card, so it
   never crowds the form). Muted mono label + the Django wordmark logo. */
.credit-line{display:flex;align-items:center;justify-content:center;gap:9px;
  color:var(--muted);font-family:var(--font-accent);font-size:.72rem;font-weight:500}
.credit-line .django-logo{height:22px;width:auto;display:block}
.credit-line.powered{margin:26px auto 6px}
/* On submit the form is inside .submit-hero; keep a clear gap under it. */
.submit-hero .credit-line.powered{margin-top:30px}

@media(prefers-reduced-motion:reduce){
  .hero-head,.submit-hero .form-card,.submit-hero .contact-box,main.container{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
@media(max-width:640px){
  /* Toast must never exceed a small viewport — span the width with side gutters. */
  .live-toast{left:12px;right:12px;bottom:12px;max-width:none}
  .live-toast-actions{flex-direction:row}
  .stat-card{min-width:calc(50% - 7px)}   /* 2-up stat grid on phones, not 1-up */
}

/* Mid-width laptops: free up header space so the nav stays on one row (no clip).
   The logo alone identifies the app, so the "ServiceDesk" wordmark + role badge drop. */
@media(max-width:1120px){
  .brand-name{display:none}
  .role-badge{display:none}
  .user-name{max-width:120px}
  .nav a{padding:7px 8px;letter-spacing:.03em}
}
@media(max-width:760px){
  .detail-grid,.grid-2{grid-template-columns:1fr}
  .detail-list{grid-template-columns:1fr}
  /* Show the hamburger; the nav becomes a full-width dropdown under the header. */
  .nav-toggle{display:flex}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:2px;margin:0;
    padding:8px;overflow:visible;display:none;
    background:rgba(255,255,255,.98);backdrop-filter:blur(16px) saturate(1.4);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);
    border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .nav.open{display:flex}
  /* Full-width links with comfortable ≥44px tap targets (accessibility). */
  .nav a{width:100%;padding:12px 14px;font-size:.9rem;letter-spacing:.04em;border-radius:8px}
  .nav-badge{float:right}
  .user-name{display:none}   /* reclaim room; identity still shown once expanded on desktop */
}