/* ============================================================
   DTCloud shell + left-rail nav for the Django (non-React) pages.
   Scoped to .dtc-* classes ONLY — deliberately does NOT set global
   body/* styles, so Tailwind continues to style page content.
   Tokens + Gilroy mirror the PSG-utilization React app's design system.
   ============================================================ */

/* ---- Gilroy (self-hosted) ---- */
@font-face { font-family:'Gilroy'; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/Gilroy-Regular.31ff7c1a62a3.ttf") format('truetype'); }
@font-face { font-family:'Gilroy'; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/Gilroy-Medium.c83281ae1ca7.ttf") format('truetype'); }
@font-face { font-family:'Gilroy'; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/Gilroy-SemiBold.a5cf732b1507.ttf") format('truetype'); }
@font-face { font-family:'Gilroy'; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/Gilroy-Bold.b381c2abd297.ttf") format('truetype'); }

/* ---- Design tokens (subset used by the shell) ---- */
:root {
  --neutral-100:#ffffff; --neutral-200:#fafcff; --neutral-300:#e7ecf4;
  --neutral-400:#c4ccda; --neutral-500:#52627a; --neutral-600:#0e1f38;
  --green-400:#1db77a; --blue-300:#519dd9; --blue-400:#2b7bbf; --red-400:#d23434;
  --white-alpha-10:rgba(255,255,255,.10); --white-alpha-20:rgba(255,255,255,.20);
  --white-alpha-80:rgba(255,255,255,.80);

  --surface-canvas:var(--neutral-100);
  --surface-shell:var(--blue-400);
  --surface-icon-container-soft:var(--white-alpha-10);
  --surface-icon-container:var(--white-alpha-20);
  --text-on-shell:var(--neutral-100);
  --icon-on-shell-inactive:var(--white-alpha-80);
  --border-subtle:var(--neutral-300);
  --dtc-font:'Gilroy', system-ui, -apple-system, sans-serif;
  /* Tokens used by the profile dropdown (kept in sync with colors_and_type.css). */
  --text-primary:var(--neutral-600);
  --text-secondary:var(--neutral-500);
  --surface-elevated:var(--neutral-100);
  --surface-container:var(--neutral-200);
  --border-default:var(--neutral-400);
  --dt-shadow-menu:0 2px 12px rgba(14,31,56,.16);
}

/* ---- Shell layout ---- */
.dtc-shell { display:flex; height:100vh; overflow:hidden; }
.dtc-main  { flex:1; min-width:0; overflow:auto; }

/* ---- Left rail ---- */
.dtc-nav {
  background:var(--surface-shell); color:var(--text-on-shell);
  /* 248px fits "Customer Journeys" (Kevin, 9/11 — 220px still clipped);
     matches the React rail's .nav (frontend/src/styles/kit.css) so every
     nav renderer stays the same width. */
  width:248px; flex:none; display:flex; flex-direction:column;
  padding:12px 8px; gap:2px; font-family:var(--dtc-font); overflow-y:auto;
}
.dtc-nav-brand {
  display:flex; align-items:center; gap:10px; padding:6px 8px 14px;
  text-decoration:none; color:#fff;
}
.dtc-nav-brand img {
  width:30px; height:30px; flex:none; object-fit:contain;
  background:#fff; border-radius:50%; padding:4px;
}
.dtc-wordmark { font-weight:700; font-size:15px; color:#fff; letter-spacing:-.01em; white-space:nowrap; }
.dtc-nav-item {
  display:flex; align-items:center; gap:12px; height:36px; padding:0 9px;
  border-radius:4px; color:var(--icon-on-shell-inactive); cursor:pointer;
  white-space:nowrap; font-size:14px; font-weight:400; font-family:var(--dtc-font);
  text-decoration:none; border:none; background:none; width:100%; text-align:left;
}
.dtc-nav-item:hover { background:var(--surface-icon-container-soft); color:#fff; }
.dtc-nav-item.active { background:var(--surface-icon-container); color:#fff; font-weight:600; }
.dtc-ic { width:22px; height:22px; flex:none; display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.dtc-ic svg { width:20px; height:20px; display:block; }
.dtc-label { overflow:hidden; text-overflow:ellipsis; }
.dtc-nav-spacer { flex:1; min-height:12px; }
.dtc-nav-sec {
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--white-alpha-80); padding:8px 9px 4px; opacity:.7;
}

/* ============================================================
   DARK THEME — toggled via <html data-theme="dark">.
   Values mirror the PSG-utilization dark.css for a consistent look.
   Two parts: (1) DTCloud token overrides for the .dtc-* shell/nav,
   (2) a skin over the Tailwind utility classes the Django page
   bodies use (they hardcode slate/blue colors, not tokens).
   ============================================================ */
html[data-theme="dark"] {
  --surface-canvas:#0c1a2c;
  --surface-shell:#081320;                 /* near-black console rail (matches PSG) */
  --surface-icon-container-soft:rgba(255,255,255,.06);
  --surface-icon-container:rgba(255,255,255,.12);
  --text-on-shell:#eef3fa;
  --icon-on-shell-inactive:rgba(255,255,255,.72);
  --border-subtle:#1e3149;
  --text-primary:#eef3fa;
  --text-secondary:#93a8c4;
  --surface-elevated:#16293f;
  --surface-container:#122236;
  --border-default:#2c425d;
}
html[data-theme="dark"] .dtc-nav-item.active { background:rgba(62,149,224,.22); }
html[data-theme="dark"] .dtc-nav-item:hover  { background:rgba(255,255,255,.07); }


/* ---- (2) Tailwind utility skin (dark) ---- */
html[data-theme="dark"] body { background:#0c1a2c; color:#eef3fa; }

/* surfaces */
html[data-theme="dark"] .bg-white   { background-color:#122236 !important; }
html[data-theme="dark"] .bg-slate-50  { background-color:#0c1a2c !important; }
html[data-theme="dark"] .bg-slate-100 { background-color:#16293f !important; }
html[data-theme="dark"] .bg-slate-200 { background-color:#243650 !important; }
html[data-theme="dark"] .bg-slate-300 { background-color:#36506e !important; }
html[data-theme="dark"] .bg-blue-50   { background-color:#102a44 !important; }
html[data-theme="dark"] .bg-blue-100  { background-color:#15314c !important; }
html[data-theme="dark"] .bg-red-50    { background-color:#36181a !important; }
html[data-theme="dark"] .bg-green-100, html[data-theme="dark"] .bg-emerald-50 { background-color:#103526 !important; }
html[data-theme="dark"] .bg-amber-100 { background-color:#332f0f !important; }

/* text */
html[data-theme="dark"] .text-slate-900, html[data-theme="dark"] .text-slate-800 { color:#eef3fa !important; }
html[data-theme="dark"] .text-slate-700 { color:#dbe6f3 !important; }
html[data-theme="dark"] .text-slate-600, html[data-theme="dark"] .text-slate-500 { color:#93a8c4 !important; }
html[data-theme="dark"] .text-slate-400 { color:#6f86a3 !important; }
html[data-theme="dark"] .text-slate-300 { color:#5d718e !important; }
html[data-theme="dark"] .text-blue-600, html[data-theme="dark"] .text-blue-700, html[data-theme="dark"] .text-blue-800 { color:#5fb0ee !important; }
html[data-theme="dark"] .text-red-500, html[data-theme="dark"] .text-red-600, html[data-theme="dark"] .text-red-700 { color:#f07a76 !important; }
html[data-theme="dark"] .text-green-600, html[data-theme="dark"] .text-green-700, html[data-theme="dark"] .text-emerald-700 { color:#3fe3a0 !important; }
html[data-theme="dark"] .text-amber-500, html[data-theme="dark"] .text-amber-600, html[data-theme="dark"] .text-amber-700 { color:#f6d64a !important; }

/* borders */
html[data-theme="dark"] .border-slate-100, html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-300, html[data-theme="dark"] .border-slate-400 { border-color:#243650 !important; }
html[data-theme="dark"] .border-blue-200, html[data-theme="dark"] .border-blue-300, html[data-theme="dark"] .border-blue-400,
html[data-theme="dark"] .border-blue-500, html[data-theme="dark"] .border-blue-600 { border-color:#2c4d6e !important; }
html[data-theme="dark"] .border-red-200, html[data-theme="dark"] .border-red-300 { border-color:#5a2424 !important; }
html[data-theme="dark"] .border-emerald-200 { border-color:#1c5a43 !important; }

/* form controls (inputs, selects, date pickers) */
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background-color:#16293f; color:#eef3fa; border-color:#2c425d;
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color:#5d718e; }
/* keep solid blue action buttons readable (bg-blue-600/700 stay as-is) */

/* ---- Dark: Tailwind VARIANT utilities (hover/odd/even/focus) ----
   The base-class overrides above don't catch hover:/odd:/even: forms, which
   caused white-on-white row hovers (Sales Orders) and unreadable zebra rows
   (Project Notes). Map them to dark equivalents here. */
/* row hover highlight (tables/lists) */
html[data-theme="dark"] .hover\:bg-slate-50:hover  { background-color:rgba(62,149,224,.12) !important; }
html[data-theme="dark"] .hover\:bg-slate-100:hover { background-color:rgba(62,149,224,.14) !important; }
html[data-theme="dark"] .hover\:bg-blue-50:hover   { background-color:rgba(62,149,224,.14) !important; }
html[data-theme="dark"] .hover\:bg-red-50:hover    { background-color:#36181a !important; }
/* secondary button hovers */
html[data-theme="dark"] .hover\:bg-slate-200:hover { background-color:#2c4263 !important; }
html[data-theme="dark"] .hover\:bg-slate-300:hover { background-color:#32496b !important; }
/* zebra striping */
html[data-theme="dark"] .odd\:bg-white:nth-child(odd)    { background-color:#122236 !important; }
html[data-theme="dark"] .even\:bg-slate-50:nth-child(even) { background-color:#16293f !important; }
/* focus + hover text/border */
html[data-theme="dark"] .focus\:bg-white:focus { background-color:#16293f !important; }
html[data-theme="dark"] .hover\:text-slate-900:hover { color:#eef3fa !important; }
html[data-theme="dark"] .hover\:text-slate-600:hover { color:#93a8c4 !important; }
html[data-theme="dark"] .hover\:text-blue-700:hover, html[data-theme="dark"] .hover\:text-blue-800:hover { color:#5fb0ee !important; }
html[data-theme="dark"] .hover\:text-red-500:hover, html[data-theme="dark"] .hover\:text-red-700:hover { color:#f07a76 !important; }
html[data-theme="dark"] .hover\:border-blue-300:hover, html[data-theme="dark"] .focus\:border-blue-300:focus { border-color:#2c4d6e !important; }
html[data-theme="dark"] .hover\:border-slate-200:hover { border-color:#243650 !important; }

/* ---- Rail profile block + dropdown ---- */
.dtc-profile { position:relative; margin-top:4px; border-top:1px solid var(--white-alpha-10); padding-top:6px; }
.dtc-profile-btn {
  display:flex; align-items:center; gap:10px; width:100%; border:none; background:none;
  cursor:pointer; padding:6px 8px; border-radius:6px; color:var(--text-on-shell); text-align:left;
  font-family:var(--dtc-font);
}
.dtc-profile-btn:hover { background:var(--surface-icon-container-soft); }
.dtc-avatar {
  width:30px; height:30px; flex:none; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--white-alpha-20); color:#fff; font-size:11px; font-weight:700; letter-spacing:.02em;
}
.dtc-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.dtc-profile-id { display:flex; flex-direction:column; min-width:0; }
.dtc-profile-name { font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dtc-profile-role { font-size:11px; color:var(--white-alpha-80); text-transform:capitalize; }
.dtc-profile-menu {
  position:absolute; left:8px; right:8px; bottom:calc(100% + 4px);
  background:var(--surface-elevated, #fff); color:var(--text-primary);
  border:1px solid var(--border-default); border-radius:8px; box-shadow:var(--dt-shadow-menu, 0 2px 12px rgba(14,31,56,.16));
  padding:6px; z-index:50;
}
.dtc-pm-head { padding:8px 10px 6px; border-bottom:1px solid var(--border-subtle); margin-bottom:4px; }
.dtc-pm-name { font-size:13px; font-weight:600; color:var(--text-primary); }
.dtc-pm-title { font-size:12px; color:var(--text-secondary); }
.dtc-pm-item {
  display:block; width:100%; text-align:left; border:none; background:none; cursor:pointer;
  padding:8px 10px; border-radius:6px; font-size:13px; color:var(--text-primary);
  font-family:var(--dtc-font); text-decoration:none;
}
.dtc-pm-item:hover { background:var(--surface-container); }
.dtc-pm-logout { color:var(--red-400); }


/* ---- Collapsible + mobile nav (8/26) ------------------------------------
   Same html-class mechanism as the React apps (dtc-nav-open /
   dtc-nav-collapsed) so every staff page behaves identically. */
html.dtc-nav-collapsed .dtc-nav { width:56px; padding-left:6px; padding-right:6px; }
html.dtc-nav-collapsed .dtc-label,
html.dtc-nav-collapsed .dtc-wordmark,
html.dtc-nav-collapsed .dtc-profile-id { display:none; }
.dtc-burger, .dtc-nav-backdrop { display:none; }
@media (max-width:820px) { .dtc-collapse-top { display:none !important; } }
.dtc-collapse-chev { transition: transform .15s ease; }
/* Shared page header — same treatment as the React apps (kit.css .header):
   Gilroy title on a canvas strip with a bottom border. */
.dtc-header {
  background:var(--surface-canvas); border-bottom:1px solid var(--border-subtle);
  flex:none; padding:0 24px; font-family:var(--dtc-font);
}
.dtc-header-row { display:flex; align-items:center; gap:16px; min-height:56px; flex-wrap:wrap; }
.dtc-header-title { font-size:24px; font-weight:600; line-height:1; color:var(--text-primary); }
.dtc-header-meta { display:flex; align-items:center; gap:8px; color:var(--text-secondary); font-size:13px; }
.dtc-header-spacer { flex:1; }
@media (max-width:820px) {
  .dtc-header { padding:0 12px; }
  .dtc-header-row { min-height:60px; padding:10px 0; row-gap:8px; column-gap:10px; }
  .dtc-header-title { margin-left:48px; font-size:19px; line-height:40px; white-space:nowrap; }
}

/* DTC-style top-corner collapse control: << open, >> collapsed */
.dtc-nav { position: relative; }
.dtc-collapse-top {
  position:absolute; top:8px; right:6px; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:none; border-radius:6px; cursor:pointer;
  color:var(--icon-on-shell-inactive); padding:0;
}
.dtc-collapse-top:hover { background:var(--surface-icon-container-soft); color:#fff; }
.dtc-collapse-top .ic-show { display:none; }
html.dtc-nav-collapsed .dtc-collapse-top .ic-hide { display:none; }
html.dtc-nav-collapsed .dtc-collapse-top .ic-show { display:flex; }
html.dtc-nav-collapsed .dtc-collapse-top { position:static; margin:0 auto 4px; }
html.dtc-nav-collapsed .dtc-nav-brand { justify-content:center; }
/* Sync accordion */
.dtc-caret { margin-left:auto; font-size:15px; transition:transform .12s ease; }
.dtc-caret.open { transform:rotate(90deg); }
.dtc-nav-subitem { height:30px; padding-left:40px; font-size:13px; }
.dtc-nav-subitem.has-ic { padding-left:24px; }
.dtc-nav-subitem.has-ic .dtc-ic { width:18px; height:18px; }
html.dtc-nav-collapsed .dtc-nav-subitem { padding-left:0; justify-content:center; }
/* Sub-items are label-only, so an icon-only rail hides the whole submenu */
html.dtc-nav-collapsed #dtcSyncMenu { display:none; }

@media (max-width: 820px) {
  html.dtc-nav-collapsed .dtc-nav { width:min(78vw,260px); padding-left:8px; padding-right:8px; }
  html.dtc-nav-collapsed .dtc-label,
  html.dtc-nav-collapsed .dtc-wordmark,
  html.dtc-nav-collapsed .dtc-profile-id { display:initial; }
  .dtc-nav {
    position:fixed; top:0; left:0; bottom:0; width:min(78vw,260px);
    transform:translateX(-102%); transition:transform .18s ease; z-index:80;
  }
  html.dtc-nav-open .dtc-nav { transform:none; box-shadow:4px 0 24px rgba(0,0,0,.4); }
  html.dtc-nav-open .dtc-nav-backdrop {
    display:block; position:fixed; inset:0; background:rgba(8,19,32,.5); z-index:79;
  }
  .dtc-burger {
    display:grid; place-items:center; position:fixed; top:10px; left:10px;
    z-index:55; width:40px; height:40px; border-radius:10px;
    border:1px solid rgba(128,128,128,.35); background:var(--surface-shell);
    color:#fff; cursor:pointer;
  }
  .dtc-main { padding-top:52px; }
  .dtc-collapse-item { display:none; }
}