/* ============================================================
   DT Apps — product design layer for DT Potentials
   Drop-in stylesheet. Load AFTER tailwind.css in base.html:
     <link rel="stylesheet" href="{% static 'css/tailwind.css' %}">
     <link rel="stylesheet" href="{% static 'css/dt-apps.css' %}">

   This restyles the shared primitives the templates already use
   (.dt-card, .dt-btn, .dt-chip, .dt-stat-label, .sidebar-nav-item)
   so every page is upgraded with a minimal diff, and adds the
   DT Apps tokens + materials + pipeline stage ramp.
   ============================================================ */

:root {
  /* ---- Ink & warm stone ramp ---- */
  --dt-black:#000; --dt-white:#fff;
  --dt-ink:#141312; --dt-ink-soft:#1e1e1c;
  --dt-stone-50:#f7f5f2; --dt-stone-100:#f0ede9; --dt-stone-150:#e8e4de;
  --dt-stone-200:#dad5cd; --dt-stone-300:#c6bfb4; --dt-stone-400:#aea69b;
  --dt-stone-500:#9d968d; --dt-stone-600:#7f7870; --dt-stone-700:#5c564f;
  --dt-stone-800:#393530; --dt-stone-900:#221f1c;
  --dt-paper:#fff; --dt-paper-warm:#f7f5f2;

  /* ---- Muted secondary accents ---- */
  --dt-clay:#a65f43;  --dt-clay-soft:#efe1d9;
  --dt-ochre:#b9933f; --dt-ochre-soft:#f1e8d2;
  --dt-sage:#79806a;  --dt-sage-soft:#e6e8df;
  --dt-slate:#5c6b75; --dt-slate-soft:#dfe4e7;

  /* ---- Semantic ---- */
  --text-primary:var(--dt-ink); --text-secondary:var(--dt-stone-700);
  --text-muted:var(--dt-stone-600); --text-faint:var(--dt-stone-400);
  --surface-card:var(--dt-white); --surface-sunken:var(--dt-stone-100);
  --surface-dark:var(--dt-ink-soft);
  --border-hairline:rgba(20,19,18,0.12); --border-soft:rgba(20,19,18,0.08);

  /* ---- Radii / shadow / motion ---- */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:28px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(20,19,18,0.05);
  --shadow-md:0 6px 24px rgba(20,19,18,0.07);
  --shadow-lg:0 18px 60px rgba(20,19,18,0.10);
  --ease-standard:cubic-bezier(0.22,0.61,0.36,1);
  --duration-fast:140ms; --duration-base:240ms;

  /* ---- Materials (overlays: top bar, popovers, sheets) ---- */
  --material-field-1:#f4f1ec; --material-field-2:#ece7e0; --material-field-3:#e7e0d6;
  --material-field:linear-gradient(160deg,var(--material-field-1) 0%,var(--material-field-2) 55%,var(--material-field-3) 100%);
  --material-bar-fill:rgba(247,245,242,0.62); --material-bar-blur:blur(20px) saturate(140%);
  --material-thick-fill:rgba(255,255,255,0.78); --material-thick-blur:blur(26px) saturate(160%);
  --material-thin-fill:rgba(255,255,255,0.55); --material-thin-blur:blur(20px) saturate(150%);
  --material-border:rgba(255,255,255,0.65);
  --material-separator:rgba(20,19,18,0.08);
  --material-shadow:0 10px 34px rgba(20,19,18,0.08);
  --material-shadow-float:0 24px 60px rgba(20,19,18,0.14);
  --material-scrim:rgba(20,19,18,0.32);
  --vibrant-primary:rgba(20,19,18,0.92); --vibrant-secondary:rgba(20,19,18,0.62); --vibrant-tertiary:rgba(20,19,18,0.42);

  /* ============================================================
     PIPELINE STAGE RAMP  (functional state coding)
     strong = headers / solid fills · soft = pill backgrounds ·
     ink = text on a soft pill. Map your Stage.name → one of these.
     ============================================================ */
  --dt-stage-cv:#356a8f;     --dt-stage-cv-soft:#dfe4e7;  --dt-stage-cv-ink:#3a5666;   /* Enquiry / New     */
  --dt-stage-first:#bf8a2b;  --dt-stage-first-soft:#f1e8d2; --dt-stage-first-ink:#8a6a1e; /* Proposal        */
  --dt-stage-second:#b3543a; --dt-stage-second-soft:#efe1d9; --dt-stage-second-ink:#a04026; /* Submitted     */

  /* Awarded / won — lightened sage per design review.
     Change THIS one value to re-tune the pipeline green app-wide. */
  --dt-stage-offer:#7e9669;  --dt-stage-offer-soft:#e6e8df; --dt-stage-offer-ink:#4a6030; /* Awarded / Won  */
}

/* ============================================================
   BASE
   ============================================================ */
body {
  background:var(--material-field);
  background-attachment:fixed;
  color:var(--dt-ink);
  -webkit-font-smoothing:antialiased;
}

/* ============================================================
   MATERIALS — overlay surfaces (top bar, popovers, sheets, menus)
   ============================================================ */
.dt-material {
  background:var(--material-thick-fill);
  -webkit-backdrop-filter:var(--material-thick-blur); backdrop-filter:var(--material-thick-blur);
  border:1px solid var(--material-border); border-radius:var(--radius-lg);
  box-shadow:var(--material-shadow);
}
.dt-material--thin { background:var(--material-thin-fill); -webkit-backdrop-filter:var(--material-thin-blur); backdrop-filter:var(--material-thin-blur); }
.dt-material--float { box-shadow:var(--material-shadow-float); }
.dt-material-bar {
  background:var(--material-bar-fill);
  -webkit-backdrop-filter:var(--material-bar-blur); backdrop-filter:var(--material-bar-blur);
  border-bottom:1px solid var(--material-separator);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  .dt-material, .dt-material--thin { background:rgba(255,255,255,0.94); }
  .dt-material-bar { background:rgba(247,245,242,0.96); }
}

/* ============================================================
   SHARED PRIMITIVES — restyled in place (templates unchanged)
   ============================================================ */
.dt-card {
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.dt-btn {
  display:inline-flex; align-items:center; gap:7px; padding:9px 17px;
  border-radius:var(--radius-pill); background:var(--dt-ink); color:#fff;
  font-size:13px; font-weight:500; border:none; cursor:pointer;
  transition:opacity var(--duration-fast);
}
.dt-btn:hover { opacity:.88; }
.dt-btn-outline {
  display:inline-flex; align-items:center; gap:7px; padding:9px 17px;
  border-radius:var(--radius-pill); background:rgba(255,255,255,0.7);
  color:var(--dt-ink); font-size:13px; font-weight:500;
  border:1px solid var(--border-hairline); cursor:pointer;
}
.dt-btn-outline:hover { background:#fff; }
.dt-chip {
  display:inline-flex; align-items:center; font-size:10px; font-weight:600;
  letter-spacing:.04em; padding:3px 10px; border-radius:var(--radius-pill); text-transform:uppercase;
}
.dt-stat-label {
  font-size:10px; font-weight:600; letter-spacing:.14em;
  color:var(--dt-stone-500); text-transform:uppercase;
}

/* ============================================================
   SIDEBAR — dark warm-ink chrome with material-style active pill
   ============================================================ */
.dt-sidebar { background:var(--dt-ink-soft); }
.sidebar-nav-item {
  display:flex; align-items:center; gap:11px; margin:1px 12px; padding:9px 12px;
  font-size:13px; color:rgba(255,255,255,0.62); text-decoration:none;
  border-radius:var(--radius-sm); border-right:none;
  transition:background var(--duration-fast), color var(--duration-fast);
}
.sidebar-nav-item:hover { color:rgba(255,255,255,0.9); background:rgba(255,255,255,0.06); }
.sidebar-nav-item.active { color:#fff; background:rgba(255,255,255,0.14); }
.sidebar-nav-item svg { width:18px; height:18px; flex-shrink:0; opacity:.6; }
.sidebar-nav-item.active svg { opacity:1; }
.sidebar-section-label {
  font-size:9px; font-weight:600; letter-spacing:.14em; color:rgba(255,255,255,0.28);
  text-transform:uppercase; padding:18px 24px 6px;
}
.dt-logo-mark { mix-blend-mode:lighten; border-radius:var(--radius-sm); }

/* ============================================================
   STAGE PILL HELPERS — apply by stage on board / detail / lists
   e.g. <span class="dt-stage-pill dt-stage--submitted">Submitted</span>
   ============================================================ */
.dt-stage-pill { display:inline-flex; align-items:center; font-size:11px; font-weight:600;
  letter-spacing:.02em; padding:3px 11px; border-radius:var(--radius-pill); }
.dt-stage--enquiry       { background:var(--dt-stage-cv-soft);     color:var(--dt-stage-cv-ink); }
.dt-stage--proposal      { background:var(--dt-stage-first-soft);  color:var(--dt-stage-first-ink); }
.dt-stage--submitted     { background:var(--dt-stage-second-soft); color:var(--dt-stage-second-ink); }
.dt-stage--clarifications{ background:var(--dt-stone-150);         color:var(--dt-stone-700); }
.dt-stage--awarded       { background:var(--dt-stage-offer-soft);  color:var(--dt-stage-offer-ink); }

/* Strong stage header bars for the kanban lanes */
.dt-lane-head { color:#fff; border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.dt-lane--enquiry        { background:var(--dt-stage-cv); }
.dt-lane--proposal       { background:var(--dt-stage-first); }
.dt-lane--submitted      { background:var(--dt-stage-second); }
.dt-lane--clarifications { background:var(--dt-ink); }
.dt-lane--awarded        { background:var(--dt-stage-offer); }