/* ---- AI Assistant hero input (Home) ---- */
.ai-hero{ padding: var(--space-6); }
.ai-hero .ai-tag{ display:flex; align-items:center; gap:8px; color: var(--accent-strong); font-weight:700; font-size: 12.5px; margin-bottom: var(--space-2); }
.ai-hero h1{ font-size: 24px; margin: 0 0 6px; letter-spacing: -0.01em; }
.ai-hero p{ color: var(--text-secondary); margin: 0 0 var(--space-4); }
.ai-input-row{ display:flex; align-items:center; gap: var(--space-3); background: var(--bg-elevated-2); border:1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); }
.ai-input-row input{ flex:1; border:none; background:transparent; outline:none; color: var(--text-primary); font-size: 14px; }

/* ---- Quick request tiles ---- */
.qr-card{ padding: var(--space-4); cursor:pointer; transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.qr-card:hover{ transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-3); }
.qr-card:active{ transform: translateY(-1px) scale(.99); }
.qr-icon{ transition: transform var(--t-fast) var(--ease-spring); }
.qr-card:hover .qr-icon{ transform: scale(1.1) rotate(-4deg); }
.qr-icon{ width:34px; height:34px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-strong); display:flex; align-items:center; justify-content:center; margin-bottom: var(--space-3); font-size: 16px; }
.qr-title{ font-weight:600; font-size: 13.5px; margin-bottom: 4px; }
.qr-desc{ color: var(--text-tertiary); font-size: 12px; line-height:1.4; margin-bottom: var(--space-2); }
.qr-automation{ display:inline-flex; align-items:center; gap:4px; font-size: 11px; font-weight:600; color: var(--status-success); }

/* ---- Metric tile ---- */
.metric-tile{ padding: var(--space-5); }
.metric-value{ font-size: 28px; font-weight:700; letter-spacing:-0.02em; }
.metric-label{ color: var(--text-tertiary); font-size: 12px; margin-top:4px; }
.metric-value.critical{ color: var(--status-critical); }

/* ---- AI Insight banner ---- */
.ai-insight{ padding: var(--space-4) var(--space-5); }
.ai-insight .ai-tag{ display:flex; align-items:center; gap:6px; color: var(--accent-strong); font-weight:700; font-size:11.5px; margin-bottom:6px; }

/* ---- Ticket detail layout ---- */
.ticket-detail-grid{ display:grid; grid-template-columns: 280px 1fr 300px; gap: var(--space-5); align-items:start; }
@media (max-width: 1100px){ .ticket-detail-grid{ grid-template-columns: 1fr; } }
.kv-row{ display:flex; justify-content:space-between; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12.5px; }
.kv-row:last-child{ border-bottom:none; }
.kv-row .k{ color: var(--text-tertiary); }
.kv-row .v{ font-weight:600; text-align:right; }

/* ---- Timeline ---- */
.timeline{ position:relative; padding-left: 22px; }
.timeline::before{ content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background: var(--border-subtle); }
.timeline-item{ position:relative; padding-bottom: var(--space-4); }
.timeline-item::before{
  content:""; position:absolute; left:-22px; top:2px; width:10px; height:10px; border-radius:50%;
  background: var(--accent); border: 2px solid var(--bg-elevated);
}
.timeline-item.automated::before{ background: var(--status-info); }
.timeline-item .t-desc{ font-weight:600; font-size: 13px; }
.timeline-item .t-detail{ color: var(--text-secondary); font-size: 12.5px; margin-top:2px; }
.timeline-item .t-meta{ color: var(--text-tertiary); font-size: 11px; margin-top:4px; }

/* ---- SLA / Health widgets ---- */
.progress-track{ height:6px; border-radius: var(--radius-pill); background: var(--bg-elevated-2); overflow:hidden; margin: var(--space-2) 0; }
.progress-fill{ height:100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--status-success), var(--status-warning)); }
.health-score{ font-size: 30px; font-weight:700; }
.health-score.good{ color: var(--status-success); } .health-score.mid{ color: var(--status-warning); } .health-score.bad{ color: var(--status-critical); }
.health-reasons li{ font-size: 12px; color: var(--text-secondary); padding: 3px 0; }
.health-reasons li::before{ content:"•"; margin-right:6px; color: var(--text-tertiary); }

/* ---- AI Copilot panel ---- */
.copilot-section{ margin-bottom: var(--space-4); }
.copilot-section .text-label{ margin-bottom:6px; display:block; }
.copilot-chip{ display:inline-block; font-size:11.5px; padding:4px 9px; margin: 2px 4px 2px 0; border-radius: var(--radius-pill); background: var(--bg-elevated-2); border:1px solid var(--border-subtle); }

/* ---- AI chat ---- */
.chat-window{ display:flex; flex-direction:column; height: 62vh; min-height: 380px; }
.chat-messages{ flex:1; overflow-y:auto; padding: var(--space-5); display:flex; flex-direction:column; gap: var(--space-3); }
.chat-bubble{ max-width: 70%; padding: 10px 14px; border-radius: var(--radius-lg); font-size: 13.5px; line-height:1.5; }
.chat-bubble.ai{ align-self:flex-start; background: var(--bg-elevated-2); border: 1px solid var(--border-subtle); }
.chat-bubble.user{ align-self:flex-end; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color:#fff; }
.chat-quick-replies{ display:flex; gap: var(--space-2); flex-wrap:wrap; padding: 0 var(--space-5) var(--space-3); }
.chat-input-row{ display:flex; gap: var(--space-2); padding: var(--space-4); border-top: 1px solid var(--border-subtle); }
.chat-input-row input{ flex:1; }
.typing-dots span{ display:inline-block; width:5px; height:5px; border-radius:50%; background: var(--text-tertiary); margin-right:3px; animation: bounce 1.2s infinite; }
.typing-dots span:nth-child(2){ animation-delay:.15s; } .typing-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes bounce{ 0%,80%,100%{ transform: translateY(0); opacity:.5; } 40%{ transform: translateY(-3px); opacity:1; } }

/* ---- Knowledge cards ---- */
.kb-card{ padding: var(--space-4); cursor:pointer; transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.kb-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--border-glass); }
.kb-card .text-label{ margin-bottom: 6px; }
.kb-card h3{ font-size: 13.5px; margin: 0 0 6px; }
.kb-card .text-small{ display:block; }

/* ---- Automation cards ---- */
.automation-card{ padding: var(--space-5); }
.automation-rate{ font-size: 24px; font-weight:700; margin: var(--space-2) 0 4px; }
.exec-flow{ display:flex; align-items:center; gap: var(--space-2); flex-wrap:wrap; }
.exec-step{ display:flex; align-items:center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--bg-elevated-2); border: 1px solid var(--border-subtle); font-size:12.5px; font-weight:600; }
.exec-step .num{ width:18px; height:18px; border-radius:50%; background: var(--accent-soft); color: var(--accent-strong); font-size:11px; display:flex; align-items:center; justify-content:center; }
.exec-arrow{ color: var(--text-tertiary); }

/* ---- Drawers / modal ---- */
.scrim{
  position:fixed; inset:0; background: rgba(4,5,8,0.5); backdrop-filter: blur(2px);
  opacity:0; pointer-events:none; transition: opacity var(--t-med) var(--ease); z-index: var(--z-drawer);
}
.scrim.open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; height:100vh; width: 380px; max-width:92vw;
  background: var(--bg-glass-strong); backdrop-filter: blur(var(--blur-lg)); border-left: 1px solid var(--border-glass);
  box-shadow: var(--shadow-3);
  transform: translateX(100%);
  transition: transform 0.78s cubic-bezier(.22,1,.36,1), box-shadow 0.78s cubic-bezier(.22,1,.36,1);
  will-change: transform;
  z-index: var(--z-drawer);
  display:flex; flex-direction:column;
}
.drawer.open{ transform: translateX(0); } #profile-drawer{ width: 50vw; max-width: 640px; min-width: 420px; } @media (max-width: 900px){ #profile-drawer{ width: 100vw; max-width: 100vw; min-width: 0; } }
.drawer-header{ display:flex; align-items:center; justify-content:space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.drawer-body{ flex:1; overflow-y:auto; padding: var(--space-4) var(--space-5); }
.notif-item{ display:flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); border-radius: var(--radius-md); transition: background var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease-out); }
.notif-item:hover{ background: var(--row-hover); padding-left: 6px; }
.notif-item:last-child{ border-bottom:none; }
.notif-icon{ width:32px; height:32px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notif-item.unread{ position:relative; }
.notif-item.unread::after{ content:""; position:absolute; right:0; top: 14px; width:7px; height:7px; border-radius:50%; background: var(--accent); }

/* ---- Command palette ---- */
.palette-wrap{ position:fixed; inset:0; z-index: var(--z-palette); display:flex; align-items:flex-start; justify-content:center; padding-top: 12vh; opacity:0; pointer-events:none; transition: opacity var(--t-fast) var(--ease); }
.palette-wrap.open{ opacity:1; pointer-events:auto; }
.palette-box{
  width: 560px; max-width: 92vw; background: var(--bg-glass-strong); backdrop-filter: blur(var(--blur-lg));
  border: 1px solid var(--border-glass); border-radius: var(--radius-xl); box-shadow: var(--shadow-3);
  overflow:hidden; transform: translateY(-8px) scale(.98); transition: transform var(--t-med) var(--ease-spring);
}
.palette-wrap.open .palette-box{ transform: translateY(0) scale(1); }
.palette-input-row{ display:flex; align-items:center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.palette-input-row input{ flex:1; border:none; background:transparent; outline:none; font-size:14.5px; color: var(--text-primary); }
.palette-list{ max-height: 360px; overflow-y:auto; padding: var(--space-2); }
.palette-item{ display:flex; align-items:center; gap: var(--space-3); padding: 10px 12px; border-radius: var(--radius-md); font-size:13.5px; transition: background var(--t-fast) var(--ease); }
.palette-item.active, .palette-item:hover{ background: var(--accent-soft); }

/* ---- Modal (confirmation / automation preview) ----
   CHANGED per request: rises up from below (not down from above) —
   starts well below its resting spot and eases upward into place — with
   a more pronounced white -> grey gradient (not var(--bg-elevated)/-2,
   which are #ffffff/#f7f9fc — too close to read as a gradient) and a
   matching dark-theme override, instead of the flat frosted-glass fill.
   Also a touch wider (420px -> 460px). */
.modal-box{
  width: 460px; max-width: 92vw;
  background: linear-gradient(180deg, #ffffff 0%, #d5dae3 100%);
  backdrop-filter: blur(var(--blur-lg));
  border: 1px solid var(--border-glass); border-radius: var(--radius-xl); box-shadow: var(--shadow-3);
  padding: var(--space-6);
  /* Positive translateY = starts below its resting position, then
     animates up to translateY(0) on .open below. */
  transform: translateY(90px); opacity: 0;
  transition: transform 850ms cubic-bezier(.16,1,.3,1), opacity 850ms cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"] .modal-box{
  background: linear-gradient(180deg, #2c303a 0%, #14171d 100%);
}
.modal-wrap{ position:fixed; inset:0; z-index: var(--z-modal); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition: opacity 400ms var(--ease); }
.modal-wrap.open{ opacity:1; pointer-events:auto; }
.modal-wrap.open .modal-box{ transform: translateY(0); opacity: 1; }

/* ---- Toast ---- */
#toast-host{ position:fixed; bottom: 24px; right:24px; z-index: var(--z-toast); display:flex; flex-direction:column; gap:8px; }
.toast{ padding: 12px 16px; border-radius: var(--radius-md); background: var(--bg-elevated); border:1px solid var(--border-subtle); box-shadow: var(--shadow-3); font-size: 13px; animation: toast-in var(--t-med) var(--ease-spring); }
@keyframes toast-in{ from{ transform: translateY(8px) scale(.96); opacity:0; } to{ transform:none; opacity:1; } }

/* ==========================================================================
   Login page v3 — ash glassmorphism (replaces the tilted-art "stage" v2).
   Modelled on the Glass Morphism mockup: a fractured, faceted ash-grey
   backdrop (a live canvas network map drawn by login.html) and one frosted-glass
   panel with a notch cut out of its bottom-right corner, holding a small
   separate glass pill ("Demo logins"). The notched outline is an SVG
   clip-path (#login-clip, defined in login.html) plus a matching stroke
   (.login-outline) so the border follows the notch too.
   Light theme = mid ash; dark theme = charcoal ash (like the mockup).
   ========================================================================== */
.login-page{
  --lg-base: 54%;              /* lightness of the facets */
  --lg-edge: .22;              /* opacity of the light edges between facets */
  --lg-fill: rgba(255,255,255,.24);
  --lg-sheen: rgba(255,255,255,.34);
  --lg-line: rgba(255,255,255,.62);
  --lg-text: #14161a;
  --lg-sub: #3a3d45;
  --lg-field: rgba(255,255,255,.34);
  --lg-btn: #1c1e23;
  --lg-btn-text: #ffffff;
  --lg-shadow: rgba(8,10,14,.38);
  --lg-pop: rgba(226,228,231,.9);
  position:relative; box-sizing:border-box; height:100vh; height:100dvh; display:grid; place-items:center;
  padding: var(--space-6); overflow:hidden; color: var(--lg-text);
  background: radial-gradient(ellipse at 50% 38%, #a9acb2 0%, #82858c 60%, #6c6f75 100%);
}
[data-theme="dark"] .login-page{
  --lg-base: 11%; --lg-edge: .16;
  --lg-fill: rgba(255,255,255,.07);
  --lg-sheen: rgba(255,255,255,.16);
  --lg-line: rgba(255,255,255,.34);
  --lg-text: #f4f5f7; --lg-sub: rgba(244,245,247,.7);
  --lg-field: rgba(255,255,255,.09);
  --lg-btn: #f1f2f4; --lg-btn-text: #14161a;
  --lg-shadow: rgba(0,0,0,.6);
  --lg-pop: rgba(30,32,37,.9);
  background: radial-gradient(ellipse at 50% 38%, #24262b 0%, #131417 60%, #0a0a0c 100%);
}

/* ---- Faceted backdrop ---- */
.login-bg{ position:absolute; inset:0; pointer-events:none; }
.login-bg canvas{ width:100%; height:100%; display:block; }
.login-bg::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.10) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.38) 100%);
}

/* ---- The glass panel (notched) ---- */
.login-stage{
  position:relative; width:min(440px, 100%); height:min(476px, calc(100dvh - 48px)); min-height:440px;
  /* Entrance animates transform only: an opacity animation would make the
     stage a "backdrop root" and switch off the glass blur behind it. */
  animation: login-stage-in .7s var(--ease-out) .05s backwards;
}
.login-glass{
  position:absolute; inset:0; clip-path:url(#login-clip);
  background: linear-gradient(145deg, var(--lg-sheen) 0%, var(--lg-fill) 42%, rgba(255,255,255,.03) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(135%); backdrop-filter: blur(26px) saturate(135%);
}
.login-outline{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible;
  filter: drop-shadow(0 26px 40px var(--lg-shadow)); }
.login-outline path{ fill:none; stroke: var(--lg-line); stroke-width:1.2; vector-effect: non-scaling-stroke; }

.login-content{ position:relative; z-index:1; padding: 30px 38px 0; }
.login-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 22px; }
.login-logo{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:16px; letter-spacing:-.01em; color: var(--lg-text); }
.login-logo-mark{ width:28px; height:28px; border-radius:8px; background: var(--lg-btn); color: var(--lg-btn-text); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; flex-shrink:0; }
.theme-toggle-pill{
  width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:14px; color: var(--lg-text);
  background: var(--lg-field); border:1px solid var(--lg-line);
  display:flex; align-items:center; justify-content:center;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.theme-toggle-pill:hover{ transform: rotate(20deg); }
.login-content h1{ font-size:28px; font-weight:800; letter-spacing:-.02em; margin:0 0 6px; color: var(--lg-text); }
.login-content > p, .login-sub{ font-size:13px; color: var(--lg-sub); margin:0 0 20px; }

#login-form .field-group{ margin-bottom:14px; }
#login-form .field-label{ display:block; font-size:12.5px; font-weight:600; color: var(--lg-text); margin-bottom:6px; }
#login-form .field{
  width:100%; box-sizing:border-box; padding:12px 14px; font-size:13.5px; border-radius:14px;
  background: var(--lg-field); color: var(--lg-text); border:1px solid var(--lg-line); box-shadow:none; outline:none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
#login-form .field::placeholder{ color: var(--lg-sub); opacity:.75; }
#login-form .field:focus{ border-color: var(--lg-text); box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
#login-form .field:-webkit-autofill{ -webkit-text-fill-color: var(--lg-text); transition: background-color 9999s; }
.login-row{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 0; font-size:12.5px; }
.login-row label{ display:flex; align-items:center; gap:7px; color: var(--lg-sub); cursor:pointer; }
.login-row input{ accent-color: var(--lg-btn); width:14px; height:14px; }
.login-row a, .login-footnote a{ color: var(--lg-text); font-weight:700; }
.login-error{ display:none; color:#b42318; font-size:12.5px; font-weight:600; margin-bottom:10px; }
[data-theme="dark"] .login-error{ color:#ff8f86; }
.btn-login-pill{
  position:absolute; right:0; bottom:0; z-index:2; width:34%; height:52px; border-radius:26px; border:none; cursor:pointer;
  background: var(--lg-btn); color: var(--lg-btn-text); font-weight:700; font-size:14px;
  box-shadow: 0 14px 28px rgba(8,10,14,.34);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease);
}
.btn-login-pill:hover{ transform: translateY(-2px); box-shadow: 0 18px 34px rgba(8,10,14,.42); }
.btn-login-pill:active{ transform:none; }
.btn-login-pill:disabled{ opacity:.7; cursor:default; transform:none; }
.login-footnote{ position:absolute; left:38px; bottom:30px; width:52%; font-size:12px; line-height:1.5; color: var(--lg-sub); }

@keyframes login-stage-in{ from{ transform: translateY(22px) scale(.985); } }
@media (prefers-reduced-motion: reduce){
  .login-stage{ animation:none !important; }
}
@media (max-width: 480px){
  .login-content{ padding: 24px 24px 0; }
  .login-footnote{ left:24px; }
}

/* Small inline remove-link used in Admin Console mapping/SLA lists */
.btn-inline {
  background: none; border: none; color: var(--status-critical, #f87171);
  cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1;
}
.btn-inline:hover { text-decoration: underline; }

/* ---- Searchable multi-select (chips + filtered dropdown) ---- */
.ms-select { position: relative; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ms-chips:empty { margin-bottom: 0; }
.ms-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft);
  color: var(--accent-strong); padding: 4px 8px 4px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600;
}
.ms-chip button {
  background: none; border: none; color: inherit; cursor: pointer; font-size: 15px;
  line-height: 1; padding: 0; display: flex; opacity: 0.75;
}
.ms-chip button:hover { opacity: 1; }
.ms-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 240px;
  overflow-y: auto; background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  z-index: 30; display: none;
}
.ms-dropdown.open { display: block; }
.ms-option { padding: 9px 12px; font-size: 13px; cursor: pointer; }
.ms-option:hover { background: var(--row-hover); }
.ms-empty { padding: 10px 12px; font-size: 12.5px; color: var(--text-tertiary); }
/* ==========================================================================
   v2 — IT Service Desk mockup components
   Added on top of the v1 components above (which keep working, since they
   are all driven by the shared tokens). Everything below maps to a specific
   region of the 16-screen mockup.
   ========================================================================== */

/* ---- Page header row (title + description on the left, actions right) ---- */
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.page-head .page-sub{ color: var(--text-secondary); font-size: 12.5px; margin-top: 3px; }
.page-head-actions{ display:flex; gap: var(--space-2); flex-shrink:0; }

/* ---- Welcome banner (Employee / Engineer dashboards) ---- */
.welcome-banner h1{ font-size: 21px; font-weight:650; margin:0 0 4px; letter-spacing:-0.01em; }
.welcome-banner p{ margin:0; color: var(--text-secondary); font-size: 13px; }

/* ---- Big action tiles: New Request / My Requests / Knowledge / AI ---- */
.action-tiles{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 980px){ .action-tiles{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .action-tiles{ grid-template-columns: 1fr; } }
.action-tile{
  display:block; padding: var(--space-4); background: var(--bg-elevated);
  border:1px solid var(--border-subtle); border-radius: var(--radius-lg);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.action-tile:hover{ border-color: var(--accent); box-shadow: var(--shadow-elevated); }
.action-tile .at-icon{
  width:34px; height:34px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:15px; margin-bottom: var(--space-3);
}
.action-tile .at-title{ font-weight:650; font-size:13px; margin-bottom:2px; }
.action-tile .at-desc{ color: var(--text-tertiary); font-size:11.5px; line-height:1.4; }

/* ---- KPI stat tiles (Engineer / Manager / Admin dashboards) ---- */
.stat-tile{
  padding: var(--space-4); background: var(--bg-elevated);
  border:1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.stat-tile .st-head{ display:flex; align-items:center; gap: var(--space-2); margin-bottom: var(--space-3); }
.stat-tile .st-icon{
  width:28px; height:28px; border-radius: var(--radius-md); display:flex; align-items:center; justify-content:center;
  font-size:13px; background: var(--tint-info); color: var(--status-info); flex-shrink:0;
}
.stat-tile .st-icon.success{ background: var(--tint-success); color: var(--status-success); }
.stat-tile .st-icon.warning{ background: var(--tint-warning); color: var(--status-warning); }
.stat-tile .st-icon.critical{ background: var(--tint-critical); color: var(--status-critical); }
.stat-tile .st-icon.neutral{ background: var(--tint-neutral); color: var(--status-neutral); }
.stat-tile .st-label{ font-size:12px; color: var(--text-secondary); font-weight:500; }
.stat-tile .st-value{ font-size: 26px; font-weight:700; letter-spacing:-0.02em; line-height:1.1; }
.stat-tile .st-value.critical{ color: var(--status-critical); }
.stat-tile .st-value.warning{ color: var(--status-warning); }
.stat-tile .st-value.success{ color: var(--status-success); }
.stat-tile .st-foot{ display:flex; align-items:center; gap:5px; margin-top:5px; font-size:11px; }
.trend{ font-weight:650; }
.trend.up{ color: var(--status-success); }
.trend.down{ color: var(--status-critical); }

/* ---- Wizard step header (Create Request, 4 steps) ---- */
.wizard-steps{ display:flex; align-items:center; gap: var(--space-2); margin-bottom: var(--space-6); flex-wrap:wrap; }
.wizard-step{ display:flex; align-items:center; gap: var(--space-2); font-size:12px; color: var(--text-tertiary); font-weight:600; }
.wizard-step .ws-num{
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; background: var(--bg-elevated-2); color: var(--text-tertiary);
  border:1px solid var(--border-subtle);
}
.wizard-step.active{ color: var(--text-primary); }
.wizard-step.active .ws-num{ background: var(--accent); color:#fff; border-color: var(--accent); }
.wizard-step.done .ws-num{ background: var(--tint-success); color: var(--status-success); border-color: transparent; }
.wizard-sep{ flex:1; min-width:18px; height:1px; background: var(--border-subtle); }

/* ---- Toolbar above a data table (search + filters + actions) ---- */
.table-toolbar{
  display:flex; align-items:center; gap: var(--space-2); flex-wrap:wrap;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle);
}
.table-toolbar .field{ max-width: 240px; }
.table-toolbar .spacer{ flex:1; }

/* ---- Saved-views rail inside Requests (Favorites / My Groups / Public) ---- */
.views-rail{ width: 190px; flex-shrink:0; border-right:1px solid var(--border-subtle); padding: var(--space-3); }
.views-rail .vr-group{ margin-bottom: var(--space-4); }
.views-rail .vr-item{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:6px 8px; border-radius: var(--radius-sm); font-size:12px; color: var(--text-secondary); cursor:pointer;
}
.views-rail .vr-item:hover{ background: var(--row-hover); color: var(--text-primary); }
.views-rail .vr-item.active{ background: var(--accent-soft); color: var(--accent); font-weight:600; }
.views-rail .vr-count{ font-size:10.5px; color: var(--text-tertiary); }
.split-view{ display:flex; align-items:stretch; }
@media (max-width: 900px){ .views-rail{ display:none; } }

/* ---- Approval rows (My Approvals) ---- */
.approval-actions{ display:flex; gap:6px; }

/* ---- Knowledge Base: category rail + article tiles ---- */
.kb-layout{ display:grid; grid-template-columns: 220px 1fr; gap: var(--space-5); align-items:start; }
@media (max-width: 900px){ .kb-layout{ grid-template-columns: 1fr; } }
.kb-cat{
  display:flex; align-items:center; justify-content:space-between; padding:8px 10px;
  border-radius: var(--radius-sm); font-size:12.5px; color: var(--text-secondary); cursor:pointer;
}
.kb-cat:hover{ background: var(--row-hover); color: var(--text-primary); }
.kb-cat.active{ background: var(--accent-soft); color: var(--accent); font-weight:600; }
.kb-cat .kb-count{ font-size:11px; color: var(--text-tertiary); }
.kb-tile{
  padding: var(--space-4); background: var(--bg-elevated); border:1px solid var(--border-subtle);
  border-radius: var(--radius-lg); transition: border-color var(--t-fast) var(--ease);
}
.kb-tile:hover{ border-color: var(--accent); }
.kb-tile .kb-icon{
  width:30px; height:30px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:14px; margin-bottom: var(--space-3);
}

/* ---- SLA timeline bar (Ticket Detail) ---- */
.sla-bar{ height:6px; border-radius: var(--radius-pill); background: var(--bg-elevated-2); overflow:hidden; }
.sla-bar > span{ display:block; height:100%; border-radius: var(--radius-pill); background: var(--status-success); }
.sla-bar.at-risk > span{ background: var(--status-warning); }
.sla-bar.breached > span{ background: var(--status-critical); }

/* ---- Lightweight charts (pure CSS/SVG — no chart library dependency) ---- */
.bar-chart{ display:flex; align-items:flex-end; gap: 8px; height: 120px; padding-top: var(--space-2); }
.bar-chart .bar-col{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; height:100%; }
.bar-chart .bar{ width:100%; max-width:26px; border-radius: 3px 3px 0 0; background: var(--accent); min-height:2px; }
.bar-chart .bar.warning{ background: var(--status-warning); }
.bar-chart .bar.critical{ background: var(--status-critical); }
.bar-chart .bar-label{ font-size:10px; color: var(--text-tertiary); white-space:nowrap; }
.donut-wrap{ display:flex; align-items:center; gap: var(--space-5); flex-wrap:wrap; }
.donut{ position:relative; width:150px; height:150px; flex-shrink:0; }
.donut .donut-center{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.donut .donut-total{ font-size: 24px; font-weight:700; line-height:1; }
.legend{ display:flex; flex-direction:column; gap:7px; font-size:12px; }
.legend .lg-item{ display:flex; align-items:center; gap:7px; color: var(--text-secondary); }
.legend .lg-swatch{ width:9px; height:9px; border-radius:2px; flex-shrink:0; }
.legend .lg-value{ margin-left:auto; font-weight:650; color: var(--text-primary); padding-left: var(--space-4); }

/* ---- Automation cards grid (Automation Center) ---- */
.auto-card{ padding: var(--space-4); background: var(--bg-elevated); border:1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.auto-card .ac-icon{
  width:30px; height:30px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:14px; margin-bottom: var(--space-3);
}

/* ---- Profile & Settings ---- */
.profile-head{ display:flex; align-items:center; gap: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-5); }
.profile-head .avatar-lg{
  width:88px; height:88px; border-radius:50%; background: var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:700; flex-shrink:0;
  box-shadow: 0 8px 22px rgba(16,24,40,.14), 0 0 0 4px rgba(255,255,255,.55);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.form-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--space-4); }
@media (max-width: 720px){ .form-grid{ grid-template-columns: 1fr; } }

/* ---- Pagination ---- */
.pagination{ display:flex; align-items:center; justify-content:center; gap:4px; padding: var(--space-3); }
.pagination button{
  min-width:28px; height:28px; border-radius: var(--radius-sm); border:1px solid var(--border-subtle);
  background: var(--bg-elevated); color: var(--text-secondary); font-size:12px;
}
.pagination button.active{ background: var(--accent); color:#fff; border-color: var(--accent); }
.pagination button:disabled{ opacity:.45; cursor:not-allowed; }

/* ==========================================================================
   v3 — Helpdesk Dashboard, SLA Monitoring and the Requests toolbar/table.
   Everything below is additive; nothing above was changed.
   ========================================================================== */

/* ---- Page header with the inline dropdown + date range ---- */
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap:wrap; }
.page-head .h-page-title{ display:flex; align-items:center; gap:6px; }
.page-head-sub{ color: var(--text-secondary); font-size: 12.5px; margin-top:2px; }
.range-picker{
  display:flex; align-items:center; gap:8px; padding: 8px 12px; font-size:12.5px; font-weight:600;
  background: var(--bg-elevated); border:1px solid var(--border-subtle); border-radius: var(--radius-md);
  color: var(--text-primary); cursor:pointer;
}
.range-picker input{ border:none; background:transparent; outline:none; color:inherit; font:inherit; width: 112px; cursor:pointer; }

/* ---- Metric tiles (Open / Completed / Overdue / Approaching SLA) ---- */
.tile-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
@media (max-width: 1100px){ .tile-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .tile-grid{ grid-template-columns: 1fr; } }
.tile{
  display:flex; align-items:center; gap: var(--space-4); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg); border:1px solid var(--border-subtle); background: var(--bg-elevated);
}
.tile.tint-info{ background: var(--tint-info); border-color: transparent; }
.tile.tint-success{ background: var(--tint-success); border-color: transparent; }
.tile.tint-critical{ background: var(--tint-critical); border-color: transparent; }
.tile.tint-warning{ background: var(--tint-warning); border-color: transparent; }
.tile-icon{
  width:46px; height:46px; flex-shrink:0; border-radius: var(--radius-lg); display:flex;
  align-items:center; justify-content:center; font-size:20px; background: var(--bg-elevated); color: var(--accent);
}
.tile-icon.success{ color: var(--status-success); } .tile-icon.critical{ color: var(--status-critical); }
.tile-icon.warning{ color: var(--status-warning); } .tile-icon.info{ color: var(--status-info); }
.tile-body{ min-width:0; flex:1; }
.tile-label{ font-size:12.5px; font-weight:600; color: var(--text-secondary); }
.tile-value{ font-size: 30px; font-weight:700; letter-spacing:-0.02em; line-height:1.15; color: var(--text-primary); }
.tile-foot{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.tile-delta{ font-size:11.5px; font-weight:700; }
.tile-delta.up{ color: var(--status-critical); } .tile-delta.down{ color: var(--status-success); }
.tile.tint-success .tile-delta.up, .tile.tint-info .tile-delta.up{ color: var(--status-success); }
.tile-delta-note{ font-size:10.5px; color: var(--text-tertiary); }

/* ---- Widget cards ---- */
.widget-grid{ display:grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.widget-grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
.widget-grid.cols-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px){ .widget-grid.cols-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px){ .widget-grid.cols-2, .widget-grid.cols-4{ grid-template-columns: 1fr; } }
.widget{ background: var(--bg-elevated); border:1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5) var(--space-5); }
.widget-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--space-4); }
.widget-title{ font-size:13.5px; font-weight:650; }
.widget-link{ font-size:11.5px; font-weight:600; color: var(--accent); }
.widget-link:hover{ text-decoration:underline; }
.widget-body{ display:flex; align-items:center; gap: var(--space-4); flex-wrap:wrap; justify-content:center; }
.talib-chart{ max-width:100%; height:auto; }

/* ---- Stacked (block) widget body — for text/content widgets like Quick
   Requests and Need Help? on the Employee dashboard. The default
   .widget-body above is a centered flex row built for chart+legend pairs;
   reusing it for plain text/input/list content laid its children out side
   by side instead of stacked, and let a shorter sibling stretch to match a
   taller one in a shared grid row. This makes the body a plain block so
   content stacks top-to-bottom and the widget's height simply hugs it. ---- */
.widget-body-stack{ display:block; }
.widget-body-stack > *{ width:100%; }

/* ---- Fixed-width widget (Need Help? on the Employee dashboard: 70% of
   the content column, on its own row, rather than sharing a cols-2 row
   and being stretched to match another widget's height). ---- */
.widget-70{ width:70%; }
@media (max-width: 900px){ .widget-70{ width:100%; } }

/* ---- Chart legend ---- */
.chart-legend{ display:flex; flex-direction:column; gap:8px; min-width: 170px; }
.chart-legend-row{ display:flex; align-items:center; gap:8px; font-size:12px; }
.chart-legend-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.chart-legend-label{ flex:1; color: var(--text-secondary); white-space:nowrap; }
.chart-legend-value{ font-weight:650; color: var(--text-primary); }
.chart-legend-pct{ color: var(--text-tertiary); width:36px; text-align:right; }

/* ---- Avatar chip inside tables ---- */
.avatar-xs{
  width:24px; height:24px; border-radius:50%; background: var(--accent-soft); color: var(--accent-strong);
  display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; flex-shrink:0;
}
/* CHANGED: white-space:nowrap so a technician's/requester's name (e.g.
   "Arun Kumar") never wraps onto a second line inside the table cell —
   that wrapping was what made every row in the Requests table taller
   than it needed to be. */
.cell-user{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.cell-user .avatar-xs{ flex-shrink:0; }
.num-critical{ color: var(--status-critical); font-weight:650; }
.num-muted{ color: var(--text-tertiary); }

/* ---- Requests page: saved-views dropdown ---- */
.view-switcher{ position:relative; }
.view-switcher-btn{ display:flex; align-items:center; gap:6px; background:transparent; border:none; cursor:pointer;
  font-size: var(--fs-page-title); font-weight:650; letter-spacing:-0.01em; color: var(--text-primary); padding:0; }
.view-menu{
  display:none; position:absolute; left:0; top: 34px; width: 250px; z-index: 60; padding: var(--space-3);
  background: var(--bg-elevated); border:1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}
.view-menu.open{ display:block; }
.view-menu-group{ font-size: var(--fs-label); text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  color: var(--text-tertiary); padding: 10px 8px 4px; }
.view-menu-item{ display:flex; align-items:center; gap:8px; padding: 8px 10px; border-radius: var(--radius-md);
  font-size:13px; color: var(--text-primary); cursor:pointer; }
.view-menu-item:hover{ background: var(--row-hover); }
.view-menu-item.active{ background: var(--accent-soft); color: var(--accent-strong); font-weight:600; }
.view-menu-sep{ height:1px; background: var(--border-subtle); margin: 8px 0; }

/* ---- Requests page: action toolbar ---- */
.req-toolbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding: var(--space-3) var(--space-4);
  border-bottom:1px solid var(--border-subtle); background: var(--bg-elevated-2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.req-toolbar .spacer{ flex:1; }
.req-toolbar .btn:disabled{ opacity:.45; }
.toolbar-search{ display:flex; align-items:center; gap:6px; background: var(--bg-elevated); border:1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 4px 10px; }
.toolbar-search input{ border:none; outline:none; background:transparent; font-size:12px; color: var(--text-primary); width: 170px; }
.dropdown{ position:relative; display:inline-block; }
.dropdown-menu{
  display:none; position:absolute; right:0; top: 32px; min-width: 210px; max-height: 280px; overflow-y:auto; z-index: 70;
  background: var(--bg-elevated); border:1px solid var(--border-subtle); border-radius: var(--radius-md);
  box-shadow: var(--shadow-glass); padding: 6px;
}
.dropdown-menu.open{ display:block; }
.dropdown-item{ padding: 8px 10px; border-radius: var(--radius-sm); font-size:12.5px; cursor:pointer; display:flex; align-items:center; gap:8px; }
.dropdown-item:hover{ background: var(--row-hover); }

/* ---- Requests table ----
   Denser than the general .data-table: this is the page with the most
   columns and rows on screen at once, so it gets smaller type and tighter
   row padding on purpose (per the brief: dense pages get smaller fonts and
   more breathing room from the wider page column, not bigger text). */
.req-table{ width:100%; border-collapse: separate; border-spacing: 0 3px; table-layout: auto; }
.req-table th{
  text-align:left; font-size:11px; font-weight:650; color: var(--text-secondary); text-transform:none;
  padding: 9px 12px; border-bottom:1px solid var(--border-subtle); white-space:nowrap; background: var(--bg-elevated);
  position: sticky; top: 0; z-index: 2;
}
.req-table td{ padding: 8px 12px; border-bottom:1px solid var(--border-subtle); font-size:12px; vertical-align:middle; line-height:1.35; }
/* NEW: Requester Name (4th column) and Technician (5th column) never wrap
   either, for the same reason as .cell-user above — keeps every row a
   single, consistent line instead of a mix of one- and two-line rows. */
.req-table td:nth-child(4), .req-table td:nth-child(5){ white-space:nowrap; }
/* Row hover — a slow "3D pop": the row lifts and grows very slightly with
   a soft shadow under it, plus curved corners on the row itself.
   CHANGED (actually fixes the "Unassigned" dropdown breaking on hover —
   the earlier `:not(:has(.dropdown-menu.open))` guard alone wasn't
   enough): a `transform` on a row makes it the containing block for any
   position:fixed descendant, and the inline "Unassigned" dropdown menu
   (opened via toggleAssignDropdown() in tickets.html) is positioned
   `fixed` and placed with getBoundingClientRect(), which assumes it's
   measuring against the real viewport. The row also has a 480ms
   `transition` on `transform`, so even right after the menu opens and the
   hover selector below stops matching, the row's transform keeps
   animating back down to none for another 480ms — and ANY non-none
   transform value during that window still creates a containing block,
   so the "fixed" menu kept landing relative to the row (and getting
   clipped by .rq-table-wrap's `overflow:auto`) instead of the viewport.
   Fix: rows that contain the inline assign-dropdown never get this
   transform at all — `:not(:has(.assign-dropdown))` below — so there's no
   transition to race against in the first place. Every other row (already
   assigned) keeps the full 3D hover pop. */
.req-table tbody tr{
  position: relative;
  transition: background var(--t-fast) var(--ease),
              box-shadow 480ms cubic-bezier(.22,.61,.36,1),
              transform 480ms cubic-bezier(.22,.61,.36,1);
}
.req-table tbody tr:hover{
  background: var(--row-hover);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated), inset 3px 0 0 var(--accent);
}
.req-table tbody tr:hover:not(:has(.assign-dropdown)){
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 16px 30px rgba(16,24,40,.16), 0 3px 8px rgba(16,24,40,.08), inset 3px 0 0 var(--accent);
  z-index: 3;
}
[data-theme="dark"] .req-table tbody tr:hover:not(:has(.assign-dropdown)){
  box-shadow: 0 16px 30px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.35), inset 3px 0 0 var(--accent);
}
.req-table tbody tr:hover td{ border-bottom-color: transparent; }
.req-table tbody tr.selected{ background: var(--accent-soft); }
@media (prefers-reduced-motion: reduce){
  .req-table tbody tr{ transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
  .req-table tbody tr:hover{ transform: none; }
}
.req-table input[type="checkbox"]{ width:14px; height:14px; accent-color: var(--accent); cursor:pointer; }
.req-subject{ color: var(--accent); font-weight:600; cursor:pointer; transition: color var(--t-fast) var(--ease); }
.req-subject:hover{ text-decoration:underline; }
.req-subject-sub{ color: var(--text-secondary); font-weight:400; display:block; font-size:11px; margin-top:1px; }
.type-dot{ width:15px; height:15px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:8.5px; font-weight:700; color:#fff; flex-shrink:0; }
.type-dot.INCIDENT{ background: var(--status-warning); } .type-dot.SERVICE_REQUEST{ background: var(--status-neutral); } .type-dot.HELPDESK{ background: var(--status-success); }
.assign-select{ padding: 4px 8px; font-size:12px; border-radius: var(--radius-sm); border:1px solid var(--border-subtle);
  background: var(--bg-elevated); color: var(--text-primary); max-width:170px; }
.pager{ display:flex; align-items:center; justify-content:space-between; padding: var(--space-3) var(--space-4); flex-wrap:wrap; gap:8px; }
.pager-pages{ display:flex; gap:4px; align-items:center; }
.page-btn{ min-width:30px; height:30px; padding:0 8px; border-radius: var(--radius-md); border:1px solid var(--border-subtle);
  background: var(--bg-elevated); font-size:12px; cursor:pointer; color: var(--text-primary); }
.page-btn.active{ background: var(--accent); color:#fff; border-color: var(--accent); }
.page-btn:disabled{ opacity:.45; cursor:not-allowed; }
.page-ellipsis{ padding:0 4px; color: var(--text-meta); }

/* ---- Ticket detail: tab strip + properties rail ---- */
.detail-head{ display:flex; align-items:flex-start; gap: var(--space-3); flex-wrap:wrap; margin-bottom: var(--space-3); }
.detail-title{ font-size: 16px; font-weight:650; }
.detail-meta{ font-size:11.5px; color: var(--text-tertiary); margin-top:3px; }
.detail-grid{ display:grid; grid-template-columns: minmax(0,1fr) 268px; gap: var(--space-4); align-items:start; }
@media (max-width: 1100px){ .detail-grid{ grid-template-columns: 1fr; } }
/* Pill tab row — same active-tab pill treatment as .tab-strip .tab in
   base.css (used by Automation/Reports/Admin Console/Profile), applied
   here to the ticket detail page's own tab markup (Conversations/
   Details/Tasks/Resolution/Reminders/Worklog/Approvals/History). Left-
   aligned with a fixed gap rather than the old space-between — spacing
   pill buttons out to fill the row's full width looked fine for a thin
   underline but reads as broken/unbalanced once each tab is its own
   rounded button. */
.detail-tabs{ display:flex; gap: var(--space-2); flex-wrap:wrap; overflow-x:auto; margin-bottom: var(--space-4); }
.detail-tab{ flex-shrink:0; padding: 8px 16px; font-size:12.5px; font-weight:600; color: var(--text-secondary);
  background:none; border: 1px solid transparent; border-radius: var(--radius-pill); cursor:pointer; white-space:nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.detail-tab:hover{ color: var(--text-primary); background: var(--bg-elevated-2); }
.detail-tab.active{ color:#fff; background: var(--accent); border-color: var(--accent); box-shadow: var(--shadow-1); }
.field-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 var(--space-6); }
@media (max-width: 800px){ .field-grid{ grid-template-columns: 1fr; } }
.field-row{ display:flex; justify-content:space-between; gap: var(--space-3); padding: 7px 0; border-bottom:1px solid var(--border-subtle); font-size:12.5px; }
.field-row .fk{ color: var(--text-tertiary); flex-shrink:0; }
.field-row .fv{ font-weight:600; text-align:right; word-break:break-word; }

/* Right rail keeps clear of the fixed AI bubble at all scroll positions —
   without this, the last card's content sits directly under it. */
#detail-rail{ padding-bottom: 90px; display:flex; flex-direction:column; gap: var(--space-4); }
#detail-rail > .surface{ margin:0 !important; padding: var(--space-4) !important; }

/* Rail cards run narrower than the main content, so their type steps down
   a notch too — denser, but still legible, and scoped to the rail only
   so the Details tab's field-grid (left column) is untouched. */
#detail-rail .rail-title{ font-size: 11px; }
#detail-rail .field-row{ font-size: 11px; padding: 6px 0; gap: var(--space-2); }
#detail-rail .text-small{ font-size: 10.5px; }
#detail-rail .cell-user > div > div{ font-size: 12px !important; }

/* ---- Conversations tab: chat-style thread ---- */
.conv-thread{ display:flex; flex-direction:column; gap: var(--space-4); padding: var(--space-5); }
.conv-row{ display:flex; gap: var(--space-3); max-width: 78%; animation: row-in 220ms var(--ease-out) backwards; }
.conv-row.right{ align-self:flex-end; flex-direction:row-reverse; }
.conv-avatar{
  width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff; background: var(--text-tertiary);
}
.conv-row.left .conv-avatar{ background: var(--accent); }
.conv-row.right .conv-avatar{ background: #7c3aed; }
.conv-col{ min-width:0; }
.conv-meta{ display:flex; align-items:center; gap:8px; font-size:11px; color: var(--text-tertiary); margin-bottom:4px; }
.conv-row.right .conv-meta{ flex-direction:row-reverse; }
.conv-name{ font-weight:650; color: var(--text-secondary); }
.conv-bubble{
  padding: 10px 14px; border-radius: var(--radius-lg); font-size:13px; line-height:1.5;
  box-shadow: var(--shadow-1);
}
.conv-bubble.left{ background: var(--bg-elevated-2); border: 1px solid var(--border-subtle); border-top-left-radius:4px; }
.conv-bubble.right{ background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color:#fff; border-top-right-radius:4px; }
@media (max-width: 720px){ .conv-row{ max-width:92%; } }
.section-head{ font-size:13px; font-weight:650; margin: var(--space-5) 0 var(--space-2); padding-bottom:6px; border-bottom:1px solid var(--border-subtle); }
.rail-section{ margin-bottom: var(--space-4); }
.rail-title{ font-size:12px; font-weight:650; margin-bottom: var(--space-2); display:flex; justify-content:space-between; align-items:center; }

/* ==========================================================================
   New Request page — v3: wide two-column layout (form column + a sticky
   summary/submit rail) instead of one narrow centered card, so the page
   uses the available canvas instead of floating in the middle of it. Each
   step is now its own bordered card (more structured/scannable than one
   long connected timeline), and the whole type scale here runs a notch
   smaller than the rest of the app for a denser, more "form-like" feel.
   The whole page picks up --nr-accent/--nr-tint, set by JS from the
   selected request type, so the accent isn't hard-coded to blue.
   ========================================================================== */
.new-request-page{ max-width: 1180px; margin: 0 auto; --nr-accent: var(--accent); --nr-tint: var(--accent-soft); }

.nr-hero{ display:flex; align-items:flex-end; justify-content:space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap:wrap; }
.nr-hero h1{ font-size:19px; font-weight:700; margin:0 0 3px; letter-spacing:-0.01em; color: var(--text-primary); }
.nr-hero p{ margin:0; color: var(--text-secondary); font-size:11.5px; }
.nr-type-badge{
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius: var(--radius-pill);
  font-size:11.5px; font-weight:700; white-space:nowrap;
  background: var(--nr-tint); color: var(--nr-accent);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

/* ---- Two-column layout: form on the left, sticky summary rail on the
   right — this is what actually puts the wider canvas to use, rather than
   just stretching the old single card across more pixels of whitespace. */
.nr-layout{ display:grid; grid-template-columns: minmax(0,1fr) 272px; align-items:start; gap: var(--space-5); }
.nr-main{ min-width:0; }

/* ---- Collapsed "Quick Requests" search (was an always-open card) ---- */
.nr-quick-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--space-3);
  padding: 10px var(--space-4); margin-bottom: var(--space-3);
  background: var(--bg-elevated); border: 1px dashed var(--border-subtle); border-radius: var(--radius-lg);
  cursor:pointer; font-size:11.5px; font-weight:600; color: var(--text-secondary);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nr-quick-toggle:hover{ border-color: var(--nr-accent); color: var(--text-primary); }
.nr-quick-toggle .chev{ transition: transform var(--t-fast) var(--ease); flex-shrink:0; }
.nr-quick-toggle.open .chev{ transform: rotate(180deg); }
.nr-quick-panel{
  padding: var(--space-4); margin: -4px 0 var(--space-3); background: var(--bg-elevated-2);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}

/* ---- Card-per-step (replaces one long connected-timeline card). Each
   step gets its own bordered surface with breathing room around it, so
   the extra width reads as distinct, scannable sections rather than one
   dense unbroken scroll. ---- */
.nr-steps{ display:flex; flex-direction:column; gap: var(--space-3); }
.nr-card{ padding: var(--space-4) var(--space-5); }
.nr-card-head{ display:flex; align-items:center; gap:10px; margin-bottom: var(--space-4); }
.nr-card-num{
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
  background: var(--nr-tint); color: var(--nr-accent);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nr-card-title{ font-weight:650; font-size:12.5px; color: var(--text-primary); }
.nr-card-body .field-label{ font-size:11px; }
.nr-card-body .field-hint{ font-size:10.5px; }
.nr-card-body .field{ font-size:11.5px; padding:7px 10px; }
.nr-card-body .grid{ gap: var(--space-3) var(--space-4); }

/* ---- Sticky summary + submit rail — gives the freed-up width a real job
   (live recap of what's about to be submitted) instead of leaving it as
   inert margin, and keeps Submit reachable without scrolling past a long
   form. ---- */
.nr-side{ position:sticky; top: var(--space-5); display:flex; flex-direction:column; gap: var(--space-3); }
.nr-side-card{ padding: var(--space-4); }
.nr-side-title{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--text-tertiary); margin-bottom: var(--space-3); }
.nr-recap-row{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-2); padding:6px 0; border-bottom:1px solid var(--border-subtle); font-size:11.5px; }
.nr-recap-row:last-of-type{ border-bottom:none; }
.nr-recap-row span:first-child{ color: var(--text-tertiary); }
.nr-recap-row span:last-child{ font-weight:600; color: var(--text-primary); text-align:right; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nr-side-card .field-hint{ margin-top: var(--space-2); font-size:10.5px; }
.nr-submit-card{ display:flex; flex-direction:column; gap: var(--space-3); }
.nr-submit-card #submit-btn{ width:100%; background: var(--nr-accent); border-color: var(--nr-accent); font-size:12px; padding:10px 14px; }
.nr-submit-card .text-small{ font-size:10.5px; line-height:1.5; }

/* ---- Selectable option cards (Request Type) — hidden native radio, a
   custom check-dot top-right instead, like a real product's tile picker. */
.option-card-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: var(--space-3); }
.option-card{
  position:relative; display:flex; gap: var(--space-3); align-items:flex-start;
  padding: var(--space-3) var(--space-4); border: 1.5px solid var(--border-subtle); border-radius: var(--radius-lg);
  background: var(--bg-elevated-2); cursor:pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.option-card:hover{ border-color: var(--oc-color, var(--accent)); box-shadow: var(--shadow-elevated); }
.option-card input[type="radio"]{ position:absolute; opacity:0; width:0; height:0; }
.option-card::after{
  content:""; position:absolute; top:12px; right:12px; width:15px; height:15px; border-radius:50%;
  border: 1.5px solid var(--border-subtle); background: var(--bg-elevated); box-sizing:border-box;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.option-card:has(input:checked){
  border-color: var(--oc-color, var(--accent));
  background: var(--oc-tint, var(--accent-soft));
  box-shadow: 0 0 0 3px var(--oc-tint, var(--accent-soft));
}
.option-card:has(input:checked)::after{
  border-color: var(--oc-color, var(--accent)); background: var(--oc-color, var(--accent));
  box-shadow: inset 0 0 0 3px var(--bg-elevated);
}
.option-card .oc-icon{
  width:32px; height:32px; border-radius: var(--radius-md); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:14px; line-height:1;
  background: var(--oc-tint, var(--accent-soft)); color: var(--oc-color, var(--accent));
}
.option-card .oc-body{ display:flex; flex-direction:column; padding:1px 20px 0 0; }
.option-card .oc-title{ font-weight:650; font-size:11.5px; color: var(--text-primary); }
.option-card .oc-desc{ font-size:10px; color: var(--text-tertiary); margin-top:2px; line-height:1.4; }
.option-card.is-locked{ cursor:default; }
.option-card.is-locked:hover{ border-color: var(--oc-color, var(--border-subtle)); box-shadow:none; }
.option-card.is-locked::after{ display:none; }

/* Colour language per request type — gives each type an instantly
   recognisable accent (icon badge + selected-state ring) instead of every
   card looking identical except for its label. */
.option-card.type-helpdesk{ --oc-color: var(--status-info);    --oc-tint: var(--tint-info); }
.option-card.type-incident{ --oc-color: var(--status-warning); --oc-tint: var(--tint-warning); }
.option-card.type-service { --oc-color: #7c3aed;               --oc-tint: #efe7fd; }
[data-theme="dark"] .option-card.type-service{ --oc-tint: rgba(124,58,237,0.18); }

@media (max-width: 980px){
  .nr-layout{ grid-template-columns: 1fr; }
  .nr-side{ position:static; }
}
@media (max-width: 680px){
  .nr-card{ padding: var(--space-3) var(--space-4); }
}

/* ---- Simple bulleted tip list (kept for reuse elsewhere; no longer used
   on new-request.html now that the side rail has been removed) ---- */
.tips-list{ margin:0; padding-left:18px; font-size:12px; color: var(--text-secondary); }
.tips-list li{ margin-bottom: var(--space-2); line-height:1.45; }
.tips-list li:last-child{ margin-bottom:0; }


/* ---- Floating AI Assistant button (every page via the shared shell) ---- */
.ai-fab{
  position: fixed; right: 26px; bottom: 26px; z-index: 45;
  width: 56px; height: 56px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 10px 26px rgba(82,82,91,0.38), var(--shadow-elevated);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ai-fab:hover{ transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 32px rgba(82,82,91,0.48), var(--shadow-elevated); }
.ai-fab:active{ transform: translateY(-1px) scale(0.97); }
.ai-fab-icon{ position:relative; font-size:22px; line-height:1; color:#fff; }
.ai-fab-ring{
  position:absolute; inset:0; border-radius:50%; border: 2px solid var(--accent);
  opacity:.55; animation: ai-fab-pulse 2.6s ease-out infinite;
}
@keyframes ai-fab-pulse{
  0%{ transform: scale(0.92); opacity:.5; }
  70%{ transform: scale(1.45); opacity:0; }
  100%{ transform: scale(1.45); opacity:0; }
}
.ai-fab-tooltip{
  position:absolute; right: calc(100% + 12px); top:50%; transform: translateY(-50%) translateX(6px);
  background: var(--bg-elevated); color: var(--text-primary); border:1px solid var(--border-subtle);
  padding:7px 13px; border-radius: var(--radius-md); font-size:12.5px; font-weight:650; white-space:nowrap;
  box-shadow: var(--shadow-elevated); opacity:0; pointer-events:none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.ai-fab:hover .ai-fab-tooltip{ opacity:1; transform: translateY(-50%) translateX(0); }
@media (max-width: 640px){
  .ai-fab{ right:16px; bottom:16px; width:50px; height:50px; }
  .ai-fab-icon{ font-size:19px; }
  .ai-fab-tooltip{ display:none; }
}

/* ---- Applications Overview: one card per Application ---- */
.app-card-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.app-card{
  padding: var(--space-5); cursor:pointer;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.app-card:hover{ transform: translateY(-2px); border-color: var(--accent); }
.app-card-head{ display:flex; align-items:center; gap: var(--space-3); margin-bottom: var(--space-4); }
.app-card-icon{
  width:40px; height:40px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-strong);
  display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; flex-shrink:0;
}
.app-card-title{ font-weight:650; font-size:14px; }
.app-card-sub{ font-size:11.5px; color: var(--text-tertiary); margin-top:1px; }
.app-card-stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-bottom: var(--space-3); }
.app-stat{ text-align:center; padding: 8px 4px; border-radius: var(--radius-md); background: var(--bg-elevated-2); }
.app-stat-value{ font-size:18px; font-weight:700; line-height:1.2; }
.app-stat-label{ font-size:10px; color: var(--text-tertiary); text-transform:uppercase; letter-spacing:.03em; margin-top:2px; }
.app-card-foot{ font-size:11.5px; font-weight:600; color: var(--accent); }
.app-card:hover .app-card-foot{ text-decoration:underline; }

/* ==========================================================================
   Admin Console — visible borders on cards, fields and tables (request:
   "better design with a borders and all"). Scoped to .admin-console (the
   wrapper admin.html now renders its content in), so this only changes
   the Admin Console page — .surface/.card/.field/.data-table elsewhere in
   the app (tickets, ticket detail, etc.) are untouched.
   ========================================================================== */
.admin-console .surface.card{
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-elevated-2) 100%);
  box-shadow:
    var(--shadow-3),
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 -1px 0 rgba(16,24,40,0.04) inset;
  padding: var(--space-6) var(--space-6) var(--space-5);
  max-width: 1180px;
}
[data-theme="dark"] .admin-console .surface.card{
  box-shadow:
    var(--shadow-3),
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 -1px 0 rgba(0,0,0,0.3) inset;
}
/* Card title becomes a proper section header: bigger, an accent tick in
   front, and a rule underneath to separate it from the field grid below —
   instead of a plain bold line sitting flush against the inputs. */
.admin-console .surface.card > .h-card-title{
  display: flex; align-items: center; gap: 9px;
  font-size: 15px;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5) !important;
  border-bottom: 1px solid var(--border-subtle);
}
.admin-console .surface.card > .h-card-title::before{
  content: ""; width: 4px; height: 16px; border-radius: 2px;
  background: var(--accent); flex-shrink: 0;
}
.admin-console .surface.card > .text-meta.mb-3{
  margin-top: calc(-1 * var(--space-4));
}
/* Fields sit in one wide, evenly-filled grid instead of two narrow columns
   with a lot of empty space on the right. */
.admin-console form .grid.grid-2{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
}
@media (max-width: 900px){
  .admin-console form .grid.grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .admin-console form .grid.grid-2{ grid-template-columns: 1fr; }
}
.admin-console .field{
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 13px;
  font-size: 13px;
  background: var(--bg-elevated-2);
  box-shadow:
    inset 0 1px 3px rgba(16,24,40,0.08),
    inset 0 1px 0 rgba(16,24,40,0.03);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
[data-theme="dark"] .admin-console .field{
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(0,0,0,0.2);
}
.admin-console .field:hover{ border-color: var(--border-glass); }
.admin-console .field:focus{
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 3px rgba(16,24,40,0.08),
    0 0 0 3px var(--accent-soft),
    0 2px 6px rgba(16,24,40,0.08);
  transform: translateY(-1px);
}
.admin-console .field-group{
  margin-bottom: var(--space-4);
}
.admin-console .field-label{
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}
/* Submit button gets its own footer strip — right-aligned, divided from the
   fields above — instead of hanging directly off the last input. */
.admin-console .admin-form-actions{
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
}
.admin-console .admin-form-actions .btn-primary{
  padding: 10px 22px;
  font-size: 13px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, var(--shadow-2);
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.admin-console .admin-form-actions .btn-primary:hover{
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, var(--shadow-3);
}
.admin-console .admin-form-actions .btn-primary:active{
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
  transform: translateY(1px) scale(.98);
}
.admin-console .data-table{
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.admin-console .data-table th{
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated-2);
}
.admin-console .data-table td{
  border-bottom: 1px solid var(--border-subtle);
}
.admin-console .data-table tr:last-child td{
  border-bottom: none;
}
.admin-console #admin-tabs .chip{
  border: 1px solid var(--border-subtle);
}
.admin-console #admin-tabs .chip.active{
  border-color: var(--accent);
}

/* ---- Login motion -------------------------------------------------------
   1) Load: the facets assemble from the centre outward, then the panel's
      content rises in one after another and Sign In pops into the notch.
   2) Alive: the backdrop drifts against the cursor (parallax), a soft
      light follows the cursor across the glass, and a slow sheen sweeps it.
   3) Feedback: a wrong password shakes the panel; a successful sign-in
      scatters the facets outward before moving on to /home/.
   Note: the stage itself never animates opacity on load — that would turn
   it into a "backdrop root" and switch the glass blur off. */
.login-bg canvas{ transform: translate3d(var(--px,0px), var(--py,0px), 0) scale(1.04); transition: transform .35s ease-out; }

.login-glass::before{
  content:""; position:absolute; inset:-30%; pointer-events:none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.26) 50%, transparent 58%);
  transform: translateX(-130%); animation: gl-sweep 8s ease-in-out 1.6s infinite;
}
.login-glass::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle 220px at var(--mx,30%) var(--my,20%), rgba(255,255,255,.30), transparent 65%);
  transition: background-position .2s;
}
@keyframes gl-sweep{ 0%{ transform: translateX(-130%); } 32%,100%{ transform: translateX(130%); } }

.login-top, .login-content h1, .login-sub, #login-form .field-group, .login-row, .login-footnote{
  animation: gl-rise .65s var(--ease-out) var(--d,.4s) backwards;
}
.login-top{ --d:.45s; } .login-content h1{ --d:.52s; } .login-sub{ --d:.58s; }
#login-form .field-group:nth-of-type(1){ --d:.66s; } #login-form .field-group:nth-of-type(2){ --d:.74s; }
.login-row{ --d:.82s; } .login-footnote{ --d:.95s; }
.btn-login-pill{ animation: gl-pop .7s cubic-bezier(.34,1.56,.64,1) 1s backwards; }
@keyframes gl-rise{ from{ opacity:0; transform: translateY(14px); filter: blur(4px); } }
@keyframes gl-pop{ from{ opacity:0; transform: translateY(16px) scale(.7); } }

#login-form .field:focus{ animation: gl-focus .5s var(--ease-out); }
@keyframes gl-focus{ 0%{ box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 100%{ box-shadow: 0 0 0 3px rgba(255,255,255,.28); } }

.btn-login-pill:disabled{
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
  background-size: 200% 100%; animation: gl-load 1s linear infinite;
}
@keyframes gl-load{ from{ background-position: 200% 0; } to{ background-position: -200% 0; } }

.login-stage.shake{ animation: gl-shake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes gl-shake{ 10%,90%{ transform: translateX(-2px); } 20%,80%{ transform: translateX(5px); } 30%,50%,70%{ transform: translateX(-9px); } 40%,60%{ transform: translateX(9px); } }

.login-page.is-leaving .login-stage{ opacity:0; transform: scale(1.06); transition: opacity .6s ease-in .1s, transform .7s ease-in; }

@media (prefers-reduced-motion: reduce){
  .login-glass::before, .login-top, .login-content h1, .login-sub,
  #login-form .field-group, .login-row, .login-footnote, .btn-login-pill, .login-stage.shake{ animation:none !important; }
  .login-bg canvas{ transform: scale(1.04); transition:none; }
}

/* Login page never scrolls: it always fits the window height. */
html:has(.login-page), body:has(.login-page){ height:100%; overflow:hidden; }

/* ==========================================================================
   New Request page — 3D / depth pass (same technique as the Admin Console
   treatment above): each step card and the side rail read as raised off
   the page, fields read as pressed slightly into their card, and the
   submit button gets a tactile press. Scoped to .new-request-page, so
   nothing outside Create Request changes.
   ========================================================================== */
.new-request-page .nr-card,
.new-request-page .nr-side-card{
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-elevated-2) 100%);
  box-shadow:
    var(--shadow-3),
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 -1px 0 rgba(16,24,40,0.04) inset;
}
[data-theme="dark"] .new-request-page .nr-card,
[data-theme="dark"] .new-request-page .nr-side-card{
  box-shadow:
    var(--shadow-3),
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 -1px 0 rgba(0,0,0,0.3) inset;
}
.new-request-page .nr-card-body .field,
.new-request-page .field{
  background: var(--bg-elevated-2);
  box-shadow:
    inset 0 1px 3px rgba(16,24,40,0.08),
    inset 0 1px 0 rgba(16,24,40,0.03);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
[data-theme="dark"] .new-request-page .nr-card-body .field,
[data-theme="dark"] .new-request-page .field{
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(0,0,0,0.2);
}
.new-request-page .nr-card-body .field:focus,
.new-request-page .field:focus{
  border-color: var(--nr-accent, var(--accent));
  box-shadow:
    inset 0 1px 3px rgba(16,24,40,0.08),
    0 0 0 3px var(--nr-tint, var(--accent-soft)),
    0 2px 6px rgba(16,24,40,0.08);
  transform: translateY(-1px);
}
/* The option cards (Helpdesk/Incident/Service Request) already lift on
   hover via .option-card:hover above — this just gives the selected one a
   touch more depth so it reads as "pressed in and locked" rather than
   only a colour change. */
.new-request-page .option-card:has(input:checked){
  box-shadow:
    0 0 0 3px var(--oc-tint, var(--accent-soft)),
    inset 0 1px 0 rgba(255,255,255,0.5),
    var(--shadow-1);
}
[data-theme="dark"] .new-request-page .option-card:has(input:checked){
  box-shadow:
    0 0 0 3px var(--oc-tint, var(--accent-soft)),
    inset 0 1px 0 rgba(255,255,255,0.08),
    var(--shadow-1);
}
.new-request-page .nr-submit-card #submit-btn{
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, var(--shadow-2);
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.new-request-page .nr-submit-card #submit-btn:hover{
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, var(--shadow-3);
}
.new-request-page .nr-submit-card #submit-btn:active{
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
  transform: translateY(1px) scale(.98);
}
/* Quick Requests search bar and the Summary card's little numbers get the
   same raised treatment as the step cards, instead of sitting flat next
   to them. */
.new-request-page .nr-quick-toggle{
  box-shadow: var(--shadow-1);
}
.new-request-page .nr-type-badge{
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, var(--shadow-1);
}