/* =============================================================================
   tokens.css — MVR Service Desk design system.

   Two apps share this file and they want opposite things: the customer portal
   is calm, spacious and almost wordless; the internal desk is dense and
   information-first. So the tokens carry BOTH scales (--sd-space-* and the
   .sd-compact modifier) rather than two stylesheets that drift apart.

   Mobile-first, light/dark aware, no framework.
   ============================================================================= */

:root {
  color-scheme: light dark;

  /* Brand — a steady blue for structure, amber reserved for the one action
     that matters on each screen (Get Help / the SLA clock). */
  --sd-primary: #2f5fd0;
  --sd-primary-600: #2850b8;
  --sd-primary-700: #21449c;
  --sd-primary-tint: #eaf0ff;
  --sd-accent: #d97706;
  --sd-accent-tint: #fff4e2;
  --sd-grad: linear-gradient(135deg, #3b6fe0 0%, #2f5fd0 55%, #23408f 100%);

  /* Surfaces & text (light) */
  --sd-bg: #f5f7fb;
  --sd-bg-2: #eaeef6;
  --sd-surface: #ffffff;
  --sd-surface-2: #f7f9fc;
  --sd-border: #e3e7f0;
  --sd-border-strong: #cfd6e4;
  --sd-text: #0f1523;
  --sd-text-2: #3a4358;
  --sd-muted: #6a7387;

  /* Meaning. Every status and priority chip resolves to one of these five. */
  --sd-ok: #15803d;      --sd-ok-bg: #dcfce7;   --sd-ok-fg: #14532d;
  --sd-info: #1d4ed8;    --sd-info-bg: #e0e9ff; --sd-info-fg: #1e3a8a;
  --sd-warn: #b45309;    --sd-warn-bg: #fef3c7; --sd-warn-fg: #92400e;
  --sd-err: #be123c;     --sd-err-bg: #ffe4e6;  --sd-err-fg: #9f1239;
  --sd-neutral: #64748b; --sd-neutral-bg: #eef1f6; --sd-neutral-fg: #334155;
  --sd-violet: #6d28d9;  --sd-violet-bg: #ede9fe; --sd-violet-fg: #4c1d95;

  /* Shape & depth */
  --sd-radius: 16px;
  --sd-radius-sm: 10px;
  --sd-radius-lg: 22px;
  --sd-shadow-sm: 0 1px 2px rgba(15, 21, 35, .06), 0 1px 3px rgba(15, 21, 35, .04);
  --sd-shadow: 0 2px 6px rgba(15, 21, 35, .06), 0 10px 24px -10px rgba(15, 21, 35, .16);
  --sd-shadow-lg: 0 24px 60px -14px rgba(15, 21, 35, .3);
  --sd-ring: 0 0 0 3px color-mix(in srgb, var(--sd-primary) 32%, transparent);

  /* Rhythm. The desk switches these down via .sd-compact. */
  --sd-space: 16px;
  --sd-card-pad: 18px;
  --sd-ease: cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --sd-primary: #7ea2ff;
    --sd-primary-600: #6b92fb;
    --sd-primary-700: #5b83f5;
    --sd-primary-tint: #17203c;
    --sd-accent: #fbbf24;
    --sd-accent-tint: #33270c;
    --sd-grad: linear-gradient(135deg, #3f63c8 0%, #2c4694 55%, #1b2c62 100%);

    --sd-bg: #080b14;
    --sd-bg-2: #0c1020;
    --sd-surface: #121829;
    --sd-surface-2: #161d31;
    --sd-border: #232c44;
    --sd-border-strong: #33405e;
    --sd-text: #eef1f8;
    --sd-text-2: #c2cadc;
    --sd-muted: #8a95af;

    --sd-ok-bg: #0b2c1c;   --sd-ok-fg: #86efac;
    --sd-info-bg: #16234a; --sd-info-fg: #a8c1ff;
    --sd-warn-bg: #38290b; --sd-warn-fg: #fcd34d;
    --sd-err-bg: #3a1220;  --sd-err-fg: #fda4af;
    --sd-neutral-bg: #1b2236; --sd-neutral-fg: #b8c2d6;
    --sd-violet-bg: #241a4a; --sd-violet-fg: #c4b5fd;

    --sd-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --sd-shadow: 0 2px 8px rgba(0, 0, 0, .45), 0 16px 40px -14px rgba(0, 0, 0, .6);
    --sd-shadow-lg: 0 30px 70px -14px rgba(0, 0, 0, .72);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1100px 560px at 100% -12%, color-mix(in srgb, var(--sd-primary) 9%, transparent), transparent 62%),
    radial-gradient(820px 460px at -10% 0%, color-mix(in srgb, var(--sd-accent) 6%, transparent), transparent 58%),
    var(--sd-bg);
  background-attachment: fixed;
  color: var(--sd-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  line-height: 1.5;
}

::selection { background: color-mix(in srgb, var(--sd-primary) 25%, transparent); }
:where(a) { color: var(--sd-primary-600); }
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none; box-shadow: var(--sd-ring); border-radius: 10px;
}

.sd-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--sd-surface); padding: 10px 16px; border-radius: 0 0 12px 0;
}
.sd-skip:focus { left: 0; }

/* ---- layout --------------------------------------------------------------- */
.sd-wrap { max-width: 1180px; margin: 0 auto; padding: 20px 16px 120px; }
.sd-wrap--narrow { max-width: 560px; }
.sd-wrap--mid { max-width: 820px; }

.sd-header {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--sd-surface) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--sd-border) 75%, transparent);
}
.sd-header__spacer { flex: 1; }

.sd-brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; letter-spacing: -.02em; font-size: 17px;
  color: var(--sd-text); text-decoration: none;
}
.sd-brand__mark {
  width: 28px; height: 28px; border-radius: 9px; flex: none;
  background: var(--sd-grad); color: #fff;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: -.03em;
  box-shadow: var(--sd-shadow-sm);
}
.sd-brand__sub { font-weight: 500; color: var(--sd-muted); font-size: 13px; }

.sd-stack { display: grid; gap: var(--sd-space); }
.sd-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sd-row--tight { gap: 6px; }
.sd-spacer { flex: 1; }
.sd-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sd-grid--wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ---- type ----------------------------------------------------------------- */
.sd-title { font-size: 24px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 4px; }
.sd-title--hero { font-size: clamp(24px, 6vw, 32px); }
.sd-h2 { font-size: 16px; font-weight: 750; letter-spacing: -.015em; margin: 0; }
.sd-sub { color: var(--sd-muted); margin: 0; font-size: 14px; }
.sd-small { font-size: 12.5px; color: var(--sd-muted); }
.sd-sectionhead { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 10px; }
.sd-sectionhead .sd-h2 { flex: 1; }
.sd-mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---- cards ---------------------------------------------------------------- */
.sd-card {
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius);
  box-shadow: var(--sd-shadow-sm);
  padding: var(--sd-card-pad);
}
.sd-card--flat { box-shadow: none; }
.sd-card--pad0 { padding: 0; overflow: hidden; }
a.sd-card, button.sd-card {
  display: block; width: 100%; text-align: left; color: inherit; text-decoration: none;
  cursor: pointer; font: inherit;
  transition: transform .16s var(--sd-ease), box-shadow .16s var(--sd-ease), border-color .16s var(--sd-ease);
}
a.sd-card:hover, button.sd-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--sd-shadow);
  border-color: var(--sd-border-strong);
}

/* An accent stripe down the left edge, coloured by state. */
.sd-card--accent { border-left: 4px solid var(--sd-accent-color, var(--sd-primary)); }

/* ---- buttons -------------------------------------------------------------- */
.sd-btn {
  appearance: none; border: 1px solid var(--sd-border-strong);
  background: var(--sd-surface); color: var(--sd-text);
  font: inherit; font-weight: 650; font-size: 14.5px;
  padding: 10px 16px; border-radius: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .12s var(--sd-ease), box-shadow .16s var(--sd-ease), background .16s var(--sd-ease);
  min-height: 42px;
}
.sd-btn:hover { box-shadow: var(--sd-shadow-sm); }
.sd-btn:active { transform: translateY(1px); }
.sd-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.sd-btn--primary {
  background: var(--sd-primary); border-color: transparent; color: #fff;
  box-shadow: 0 1px 2px rgba(15, 21, 35, .18);
}
.sd-btn--primary:hover { background: var(--sd-primary-600); }
.sd-btn--accent { background: var(--sd-accent); border-color: transparent; color: #1a1204; }
.sd-btn--ghost { background: transparent; border-color: transparent; color: var(--sd-primary-600); }
.sd-btn--danger { color: var(--sd-err); border-color: color-mix(in srgb, var(--sd-err) 40%, var(--sd-border)); }
.sd-btn--sm { padding: 6px 11px; min-height: 34px; font-size: 13px; border-radius: 10px; }
.sd-btn--block { width: 100%; }
.sd-btn--lg { padding: 14px 22px; min-height: 52px; font-size: 16px; border-radius: 14px; }

.sd-linkbtn {
  background: none; border: none; padding: 0; font: inherit; font-size: 13.5px;
  color: var(--sd-primary-600); cursor: pointer; text-decoration: none;
}
.sd-linkbtn:hover { text-decoration: underline; }

/* ---- chips & badges ------------------------------------------------------- */
.sd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; line-height: 1.7;
  background: var(--sd-neutral-bg); color: var(--sd-neutral-fg);
  white-space: nowrap;
}
.sd-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.sd-chip--ok { background: var(--sd-ok-bg); color: var(--sd-ok-fg); }
.sd-chip--info { background: var(--sd-info-bg); color: var(--sd-info-fg); }
.sd-chip--warn { background: var(--sd-warn-bg); color: var(--sd-warn-fg); }
.sd-chip--err { background: var(--sd-err-bg); color: var(--sd-err-fg); }
.sd-chip--violet { background: var(--sd-violet-bg); color: var(--sd-violet-fg); }
.sd-chip--outline { background: transparent; border: 1px solid var(--sd-border-strong); color: var(--sd-text-2); }

.sd-ref {
  font-weight: 700; font-size: 13px; color: var(--sd-muted);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* ---- forms ---------------------------------------------------------------- */
.sd-field { display: grid; gap: 6px; }
.sd-label { font-size: 13.5px; font-weight: 650; color: var(--sd-text-2); }
.sd-input, .sd-select, .sd-textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--sd-text);
  background: var(--sd-surface); border: 1px solid var(--sd-border-strong);
  border-radius: 12px; padding: 11px 13px; min-height: 44px;
}
.sd-textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.sd-input::placeholder, .sd-textarea::placeholder { color: var(--sd-muted); }
.sd-select { appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px center, right 10px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.sd-hint { font-size: 12.5px; color: var(--sd-muted); }
.sd-error { font-size: 13px; color: var(--sd-err); font-weight: 600; }

/* ---- pickers (the Get Help menu) ------------------------------------------ */
.sd-pick {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 15px 16px; border-radius: 14px; cursor: pointer; font: inherit;
  background: var(--sd-surface); border: 1.5px solid var(--sd-border);
  transition: border-color .14s var(--sd-ease), transform .14s var(--sd-ease), background .14s var(--sd-ease);
  color: inherit;
}
.sd-pick:hover { border-color: var(--sd-primary); transform: translateY(-1px); }
.sd-pick[aria-pressed="true"] {
  border-color: var(--sd-primary); background: var(--sd-primary-tint);
  box-shadow: inset 0 0 0 1px var(--sd-primary);
}
.sd-pick__emoji { font-size: 21px; line-height: 1; flex: none; }
.sd-pick__label { font-weight: 650; font-size: 15px; }
.sd-pick__meta { font-size: 12.5px; color: var(--sd-muted); }

/* ---- states --------------------------------------------------------------- */
.sd-empty {
  text-align: center; padding: 34px 18px; color: var(--sd-muted);
  border: 1px dashed var(--sd-border-strong); border-radius: var(--sd-radius);
  background: color-mix(in srgb, var(--sd-surface) 60%, transparent);
}
.sd-empty__emoji { font-size: 26px; display: block; margin-bottom: 8px; }

.sd-center { display: grid; place-items: center; min-height: 55dvh; }
.sd-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--sd-primary) 25%, transparent);
  border-top-color: var(--sd-primary);
  animation: sd-spin .8s linear infinite;
}
@keyframes sd-spin { to { transform: rotate(360deg); } }

.sd-skeleton {
  background: linear-gradient(90deg, var(--sd-surface-2) 25%, var(--sd-bg-2) 37%, var(--sd-surface-2) 63%);
  background-size: 400% 100%; animation: sd-shimmer 1.3s ease infinite;
  border-radius: 10px; height: 14px;
}
@keyframes sd-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---- toast ---------------------------------------------------------------- */
.sd-toast-host {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  display: grid; gap: 8px; width: min(94vw, 460px);
}
.sd-toast {
  background: #10182b; color: #f4f7ff; padding: 11px 15px; border-radius: 12px;
  box-shadow: var(--sd-shadow-lg); font-size: 14px; font-weight: 550;
  opacity: 0; transform: translateY(8px); transition: all .22s var(--sd-ease);
}
.sd-toast--in { opacity: 1; transform: none; }
.sd-toast--ok { background: #12492c; }
.sd-toast--err { background: #6b1327; }

/* ---- busy overlay --------------------------------------------------------- */
.sd-busy {
  position: fixed; inset: 0; z-index: 95; display: none; place-items: center;
  background: color-mix(in srgb, var(--sd-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.sd-busy--on { display: grid; }
.sd-busy__box {
  background: var(--sd-surface); border: 1px solid var(--sd-border);
  border-radius: 16px; padding: 22px 28px; display: grid; gap: 12px;
  justify-items: center; box-shadow: var(--sd-shadow-lg);
}

/* ---- modal ---------------------------------------------------------------- */
.sd-modal {
  position: fixed; inset: 0; z-index: 80; display: none;
  background: rgba(8, 11, 20, .5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  padding: 16px; overflow-y: auto;
}
.sd-modal--on { display: grid; align-items: start; justify-items: center; }
.sd-modal__box {
  background: var(--sd-surface); border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg); box-shadow: var(--sd-shadow-lg);
  width: min(96vw, 620px); margin: 24px 0; overflow: hidden;
}
.sd-modal__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--sd-border);
}
.sd-modal__body { padding: 18px; display: grid; gap: 14px; }
.sd-modal__foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 18px; border-top: 1px solid var(--sd-border); background: var(--sd-surface-2);
}

/* ---- footer --------------------------------------------------------------- */
.sd-footer {
  margin-top: 40px; padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--sd-border); text-align: center;
  display: grid; gap: 6px; color: var(--sd-muted); font-size: 12.5px;
}
.sd-footer__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- utilities ------------------------------------------------------------ */
[hidden] { display: none !important; }
.sd-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sd-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}