/* ==========================================================================================
   Dandelion 360 — dashboard-design.css
   The "soft glass 2026" skin.  2026-10-12.
   ------------------------------------------------------------------------------------------
   HOW IT WORKS
   * Loaded LAST, after ui.css, gallery-controls-r64.css, ui-2026.css and ui-2026-phone.css:
       <link rel="stylesheet" href="assets/css/dashboard-design.css">
   * It changes NO markup and NO class names.  §1 re-points the ~40 base colour tokens that
     ui.css declares in its theme block (the one commented "the only colour source") — every
     other colour in both sheets is an alias of those, so the whole app follows.  §2–§7 add
     the surface recipes (glass, radius, elevation) the new look needs on top of ui-2026.css.
   * Every selector starts with `html.ui-2026`, like ui-2026.css, so the classic skin is
     untouched.  Where ui-2026.css uses `body:not(#dn26)` to outrank a page skin, so do we.
   * Direction: logical properties only (inline-start/end, padding-inline).  LTR and RTL both
     work with no extra rules.
   * Themes: §1 carries a light and a dark set; nothing below §1 names a hex colour, so dark
     mode needs no second pass.
   ========================================================================================== */


/* ------------------------------------------------------------------ §1. The palette */
/* Light.  Ground moves off warm bone onto a soft sage-ivory; ink gets a green cast so text,
   surfaces and brand sit in one family.  Status colours are desaturated: a dashboard that is
   looked at all day should not shout.  Contrast on --surface: ink 14.9:1, ink-3 5.6:1,
   ink-4 5.0:1, brand 5.6:1, danger 5.5:1, warn 5.2:1 — all above 4.5:1. */
html.ui-2026,
html.ui-2026 body{
  --bg:#edf0e9;              --bg-glass:rgba(237,240,233,.80);
  --surface:#ffffff;         --surface-2:#f6f8f4;      --surface-hover:#eaeee8;
  --border:#dde3da;          --border-subtle:#e9ede6;  --border-strong:#ccd5c9;
  --track:#e8ece6;

  --ink:#16211c;  --ink-2:#2d3a33;  --ink-3:#5a675f;  --ink-4:#64736a;  --ink-5:#7e8c83;

  --brand:#0e6b4b;           --brand-hover:#0a4e37;    --brand-text:#0c6044;
  --brand-tint:#e8f0eb;      --brand-tint-hover:#dbe8e0;
  --brand-line:#c3dccf;      --on-brand:#ffffff;

  --warn:#8a5f21;            --warn-tint:#f7f1e4;      --warn-line:#e4d4b6;
  --danger:#a63a33;          --danger-tint:#f9edeb;    --danger-line:#eccfcb;
  --on-danger:#ffffff;

  --chart-1:#0e6b4b; --chart-2:#3e9a77; --chart-3:#72b89b; --chart-4:#a8cfbc; --chart-5:#cde4d8;

  --overlay:rgba(16,24,20,.42);
  --shadow-float:0 24px 60px -24px rgba(20,40,32,.34);
  --primary-rgb:14,107,75;
}

/* Dark.  Same hues lifted onto a near-black green.  --on-brand is dark ink, not white:
   white on #2f9d6e is 2.9:1, #04150e is 7.9:1. */
html.ui-2026[data-theme="dark"],
html.ui-2026 body.dark,
html.ui-2026[data-theme="dark"] body{
  --bg:#0d1412;              --bg-glass:rgba(13,20,18,.82);
  --surface:#161d1a;         --surface-2:#1c2420;      --surface-hover:#212a26;
  --border:#273029;          --border-subtle:#1f2824;  --border-strong:#33403a;
  --track:#232c28;

  --ink:#eef3ef;  --ink-2:#d6ded8;  --ink-3:#a3b0a8;  --ink-4:#8c9a92;  --ink-5:#8d9a93;

  --brand:#2f9d6e;           --brand-hover:#3cb37e;    --brand-text:#5cc79a;
  --brand-tint:#15271f;      --brand-tint-hover:#1b3328;
  --brand-line:#2b4a3a;      --on-brand:#04150e;

  --warn:#d6a765;            --warn-tint:#241e12;      --warn-line:#473a22;
  --danger:#e0887f;          --danger-tint:#2a1917;    --danger-line:#4a2e2a;
  --on-danger:#1a0a08;

  --chart-1:#5cc79a; --chart-2:#3fa178; --chart-3:#2f8c68; --chart-4:#256b50; --chart-5:#1c4f3c;

  --overlay:rgba(0,0,0,.58);
  --shadow-float:0 28px 64px -24px rgba(0,0,0,.8);
  --primary-rgb:47,157,110;
}


/* ------------------------------------------------------------------ §2. Shape and depth */
/* Corners grow one step (cards 22, tiles 17, controls 12) and the flat 2026 shadows become
   a hairline ring plus one long, very soft drop.  --dg-* is this file's own namespace. */
html.ui-2026 body{
  --dg-glass:rgba(255,255,255,.70);
  --dg-glass-strong:rgba(255,255,255,.80);
  --dg-glass-soft:rgba(255,255,255,.58);
  --dg-edge:rgba(255,255,255,.78);
  --dg-ring:0 0 0 1px rgba(22,42,33,.055);
  --dg-shadow:0 0 0 1px rgba(22,42,33,.055), 0 16px 36px -26px rgba(20,40,32,.55);
  --dg-shadow-hover:0 0 0 1px rgba(22,42,33,.07), 0 22px 46px -26px rgba(20,40,32,.7);
  --dg-shadow-float:0 0 0 1px rgba(22,42,33,.06), 0 28px 60px -28px rgba(20,40,32,.85);
  --dg-blur:blur(22px) saturate(1.45);
  --dg-sunk:rgba(22,42,33,.035);

  /* the 2026 layer's own scale, one step rounder */
  --dn-r-xs:7px; --dn-r-sm:10px; --dn-r-md:12px; --dn-r-lg:16px; --dn-r-xl:20px; --dn-r-2xl:24px;
  --radius-card:22px; --radius-tile:17px; --radius-lg:20px; --radius:14px; --radius-sm:10px;
  --dn-shadow-1:0 1px 2px rgba(20,40,32,.04);
  --dn-shadow-2:0 0 0 1px rgba(22,42,33,.05), 0 12px 28px -22px rgba(20,40,32,.6);
  --dn-shadow-3:0 0 0 1px rgba(22,42,33,.06), 0 22px 48px -26px rgba(20,40,32,.75);
  --dn-shadow-4:0 0 0 1px rgba(22,42,33,.06), 0 34px 70px -28px rgba(20,40,32,.9);
  --shadow:var(--dn-shadow-1);
  --shadow-md:var(--dn-shadow-2);
  --shadow-lg:var(--dn-shadow-3);
}

html.ui-2026 body.dark,
html.ui-2026[data-theme="dark"] body{
  --dg-glass:rgba(255,255,255,.055);
  --dg-glass-strong:rgba(255,255,255,.075);
  --dg-glass-soft:rgba(255,255,255,.04);
  --dg-edge:rgba(255,255,255,.09);
  --dg-ring:0 0 0 1px rgba(255,255,255,.055);
  --dg-shadow:0 0 0 1px rgba(255,255,255,.055), 0 20px 46px -32px rgba(0,0,0,.95);
  --dg-shadow-hover:0 0 0 1px rgba(255,255,255,.09), 0 26px 54px -30px rgba(0,0,0,1);
  --dg-shadow-float:0 0 0 1px rgba(255,255,255,.08), 0 34px 70px -30px rgba(0,0,0,1);
  --dg-sunk:rgba(255,255,255,.03);
  --dn-shadow-1:0 1px 2px rgba(0,0,0,.4);
  --dn-shadow-2:0 0 0 1px rgba(255,255,255,.055), 0 16px 34px -26px rgba(0,0,0,.95);
  --dn-shadow-3:0 0 0 1px rgba(255,255,255,.07), 0 26px 54px -28px rgba(0,0,0,1);
  --dn-shadow-4:0 0 0 1px rgba(255,255,255,.07), 0 38px 76px -30px rgba(0,0,0,1);
}


/* ------------------------------------------------------------------ §3. The ground */
/* Two very low-alpha washes fixed to the viewport give the translucent surfaces something to
   pick up; without them "glass" is just flat grey. */
html.ui-2026 body:not(#dn26){
  background-color:var(--bg);
  background-image:
    radial-gradient(1320px 760px at 2% -16%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 64%),
    radial-gradient(1120px 620px at 100% -8%, color-mix(in srgb, var(--warn) 20%, transparent), transparent 62%),
    radial-gradient(900px 700px at 70% 100%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 66%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}
/* ui.css paints #content and every .page with a solid var(--bg) — and does it with
   !important — which would cover the wash and leave the translucent cards on flat grey.
   Let the ground through; this is the one place the file needs !important back. */
html.ui-2026 body:not(#dn26) :is(#main, #content, #content > .page, #content .page.active, #page-dashboard, .dn-dash-frame){
  background-color:transparent !important;
  background-image:none;
}
@media (prefers-reduced-transparency: reduce){
  html.ui-2026 body:not(#dn26){ background-image:none; }
}


/* ------------------------------------------------------------------ §4. Shell */
/* Sidebar: a translucent panel rather than a solid column with a rule down its edge. */
html.ui-2026 body:not(#dn26) #sidebar.dn-shell{
  background:var(--dg-glass-soft);
  -webkit-backdrop-filter:var(--dg-blur);
  backdrop-filter:var(--dg-blur);
  border-inline-end:1px solid var(--border-subtle);
  box-shadow:none;
}
html.ui-2026 body:not(#dn26) #sidebar.dn-shell .sidebar-logo-img{
  border-radius:11px;
  box-shadow:0 6px 16px -9px rgba(20,40,32,.75);
}
/* nav rows: rounder, and the active row is a tinted pill with a hairline instead of a flat fill */
html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-nav-item{
  border-radius:var(--dn-r-md);
  min-height:38px;
}
html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-nav-item:hover{
  background:color-mix(in srgb, var(--ink) 4%, transparent);
}
html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-nav-item.active,
html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-nav-item[aria-current="page"]{
  background:var(--brand-tint);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent);
  color:var(--brand-text);
  font-weight:600;
}
html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-user-card{
  border-radius:15px;
  background:var(--dg-glass);
  box-shadow:inset 0 0 0 1px var(--border-subtle);
  border-color:transparent;
}

/* Top bar: the same glass, no rule, no shadow. */
html.ui-2026 body:not(#dn26) #topbar{
  background:var(--dg-glass-soft) !important;
  -webkit-backdrop-filter:var(--dg-blur);
  backdrop-filter:var(--dg-blur);
  border-color:transparent !important;
  box-shadow:none !important;
}


/* ------------------------------------------------------------------ §5. Card surfaces */
/* One recipe for every card on the dashboard.  Cards are translucent; anything that sits
   INSIDE a card (tiles, rows, empty states) stays opaque so text never doubles up. */
html.ui-2026 body:not(#dn26) :is(
  #page-dashboard .dc-panel,
  #page-dashboard .dd-card,
  #page-dashboard .dc-admin-center,
  #page-dashboard .dc-attention,
  #page-dashboard .dc-assistant-card,
  #page-dashboard .dc-metric-card
){
  background:var(--dg-glass);
  -webkit-backdrop-filter:var(--dg-blur);
  backdrop-filter:var(--dg-blur);
  border:1px solid var(--dg-edge);
  box-shadow:var(--dg-shadow);
  transition:box-shadow var(--dn-dur-2, 200ms) var(--dn-ease-out, ease),
             transform var(--dn-dur-2, 200ms) var(--dn-ease-out, ease);
}
html.ui-2026 body:not(#dn26) :is(
  #page-dashboard .dc-panel,
  #page-dashboard .dd-card,
  #page-dashboard .dc-admin-center,
  #page-dashboard .dc-metric-card
){
  border-radius:var(--radius-card);
}
html.ui-2026 body:not(#dn26) #page-dashboard .dc-attention{ border-radius:var(--radius-card); }

/* hover lift, on the two card families that are clickable through */
html.ui-2026 body:not(#dn26) :is(#page-dashboard .dc-metric-card, #page-dashboard .dc-panel):hover{
  box-shadow:var(--dg-shadow-hover);
}
html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-card:hover{ transform:translateY(-1px); }
html.ui-2026 body.dark:not(#dn26) :is(#page-dashboard .dc-metric-card, #page-dashboard .dc-panel):hover{
  box-shadow:var(--dg-shadow-hover);
}

/* the overdue tile keeps a warm ring so it reads before the figure does */
html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-card.red{
  box-shadow:0 0 0 1px color-mix(in srgb, var(--danger) 22%, transparent),
             0 16px 36px -26px color-mix(in srgb, var(--danger) 55%, transparent);
}

/* nested surfaces: opaque, one step smaller radius, hairline only */
html.ui-2026 body:not(#dn26) :is(
  #page-dashboard .dc-admin-action-grid > button,
  #page-dashboard .dc-event-row,
  #page-dashboard .dc-status-strip,
  #page-dashboard .dc-attention button
){
  border-radius:var(--radius-tile);
  background:var(--surface);
  border:1px solid var(--border-subtle);
  box-shadow:none;
}
html.ui-2026 body:not(#dn26) :is(
  #page-dashboard .dc-admin-action-grid > button,
  #page-dashboard .dc-event-row
):hover{
  background:var(--surface-hover);
  border-color:var(--border);
}

/* empty states sink instead of floating.  ui.css gives .dc-empty a fixed #85858f, which is
   4.1:1 on the night surface — it takes --ink-3 here instead, on both themes. */
html.ui-2026 body:not(#dn26) #page-dashboard :is(.dc-empty, .dn-act-list .dc-empty){
  border-radius:var(--radius-tile);
  background:var(--dg-sunk);
  box-shadow:inset 0 0 0 1px var(--border-subtle);
  padding:30px 18px;
  border:0;
  color:var(--ink-3);
  font-size:13px;
}
/* the corner "open" arrow on a KPI tile was --ink-5 at 12px: lift it to --ink-4 */
html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-arrow{ color:var(--ink-4); }


/* ------------------------------------------------------------------ §6. Dashboard detail */
/* Metric tiles: the icon chip picks up its card's accent, the figure gets the display face. */
html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-icon{
  border-radius:12px;
  background:var(--brand-tint);
  color:var(--brand-text);
}
html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-card.blue .dc-metric-icon{
  background:var(--warn-tint); color:var(--warn);
}
html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-card.muted .dc-metric-icon{
  background:color-mix(in srgb, var(--ink) 6%, transparent); color:var(--ink-3);
}
html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-card.red .dc-metric-icon{
  background:var(--danger-tint); color:var(--danger);
}
html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-main strong{
  font-family:var(--font-display, inherit);
  font-weight:700;
  letter-spacing:-.03em;
}

/* Hero greeting */
html.ui-2026 body:not(#dn26) #page-dashboard #dash-greeting h1{
  font-family:var(--font-display, inherit);
  font-weight:700;
  letter-spacing:-.028em;
}
html.ui-2026 body:not(#dn26) #page-dashboard .dc-sub-alert{
  border-radius:999px;
  background:var(--danger-tint);
  color:var(--danger);
  box-shadow:inset 0 0 0 1px var(--danger-line);
}

/* Pipeline donut and its legend */
html.ui-2026 body:not(#dn26) #page-dashboard .dc-donut{
  filter:drop-shadow(0 14px 28px color-mix(in srgb, var(--brand) 32%, transparent));
}
html.ui-2026 body:not(#dn26) #page-dashboard .dc-chart-legend i{ border-radius:3px; }

/* Lead-source bars */
html.ui-2026 body:not(#dn26) #page-dashboard .dc-source-bar{
  border-radius:999px;
  background:var(--track);
  overflow:hidden;
}
html.ui-2026 body:not(#dn26) #page-dashboard .dc-source-bar i{ border-radius:999px; }
html.ui-2026 body:not(#dn26) #page-dashboard .dc-source-row{
  border-radius:var(--dn-r-md);
  border:0;
}
html.ui-2026 body:not(#dn26) #page-dashboard .dc-source-row:hover{
  background:color-mix(in srgb, var(--ink) 3.5%, transparent);
}

/* Task list: the check box is a real target, the overdue row reads warm without a left border */
html.ui-2026 body:not(#dn26) #page-dashboard .dc-task-list > button{
  border-radius:var(--dn-r-lg);
  border:0;
  border-bottom:1px solid var(--border-subtle);
}
html.ui-2026 body:not(#dn26) #page-dashboard .dc-task-list > button:last-child{ border-bottom:0; }
html.ui-2026 body:not(#dn26) #page-dashboard .dc-task-list > button:hover{
  background:color-mix(in srgb, var(--ink) 3.5%, transparent);
}
html.ui-2026 body:not(#dn26) #page-dashboard .dc-task-check{ border-radius:7px; }
html.ui-2026 body:not(#dn26) #page-dashboard .dc-task-list > button.overdue .dc-task-check{
  border-color:var(--danger);
}

/* Needs-attention and the status strip: tinted fills, no coloured left rule */
html.ui-2026 body:not(#dn26) #page-dashboard :is(.dc-attention button.danger, .dc-status-strip.warning){
  background:var(--danger-tint);
  box-shadow:inset 0 0 0 1px var(--danger-line);
  border:0;
  color:var(--danger);
}
html.ui-2026 body:not(#dn26) #page-dashboard .dc-attention button.neutral{
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border-subtle);
  border:0;
}

/* Brief rows */
html.ui-2026 body:not(#dn26) #page-dashboard .eb-facts > li{
  border-radius:var(--dn-r-md);
  border-bottom:1px solid var(--border-subtle);
}
html.ui-2026 body:not(#dn26) #page-dashboard .eb-facts > li:last-child{ border-bottom:0; }

/* Pills, segmented controls and quiet buttons on the dashboard */
html.ui-2026 body:not(#dn26) #page-dashboard :is(.dc-seg, .dc-range-toggle){
  border-radius:999px;
  background:color-mix(in srgb, var(--ink) 5%, transparent);
  padding:3px;
  border:0;
}
html.ui-2026 body:not(#dn26) #page-dashboard :is(.dc-seg, .dc-range-toggle) > button{
  border-radius:999px;
  border:0;
  background:transparent;
}
html.ui-2026 body:not(#dn26) #page-dashboard :is(.dc-seg, .dc-range-toggle) > button.active{
  background:var(--surface);
  box-shadow:0 1px 2px rgba(20,40,32,.12);
  font-weight:600;
}
html.ui-2026 body.dark:not(#dn26) #page-dashboard :is(.dc-seg, .dc-range-toggle) > button.active{
  background:color-mix(in srgb, #ffffff 12%, transparent);
  box-shadow:none;
}
html.ui-2026 body:not(#dn26) #page-dashboard .btn{ border-radius:999px; }
html.ui-2026 body:not(#dn26) #page-dashboard .btn-primary{
  box-shadow:0 10px 22px -14px color-mix(in srgb, var(--brand) 90%, transparent);
}
html.ui-2026 body:not(#dn26) #page-dashboard .btn-ghost{
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border);
  border:0;
}

/* Assistant card sits on brand tint so it reads as the one "ask" surface */
html.ui-2026 body:not(#dn26) #page-dashboard .dc-assistant-card{
  border-radius:var(--radius-card);
}
html.ui-2026 body:not(#dn26) #page-dashboard .dash-assistant-chip{
  border-radius:999px;
  background:var(--brand-tint);
  color:var(--brand-text);
  border:0;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent);
}

/* Agent-scope select and the combo in the hero */
html.ui-2026 body:not(#dn26) #page-dashboard :is(.dc-admin-user-combo input, .dc-agent-filter input){
  border-radius:13px;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border);
  border:0;
}


/* ------------------------------------------------------------------ §7. Phone */
/* Under 900px the blur costs more than it gives: surfaces go opaque, radii come down a step
   so cards do not eat the 16px gutter. */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) :is(
    #page-dashboard .dc-panel,
    #page-dashboard .dd-card,
    #page-dashboard .dc-admin-center,
    #page-dashboard .dc-attention,
    #page-dashboard .dc-assistant-card,
    #page-dashboard .dc-metric-card
  ){
    background:var(--surface);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    border-radius:19px;
    border:1px solid var(--border-subtle);
    box-shadow:0 1px 2px rgba(20,40,32,.05);
  }
  html.ui-2026 body:not(#dn26) :is(#sidebar.dn-shell, #topbar){
    background:var(--bg-glass) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.5);
    backdrop-filter:blur(18px) saturate(1.5);
  }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-card:hover{ transform:none; }
}


/* ------------------------------------------------------------------ §8. RTL */
/* The layout mirrors on its own (logical properties everywhere above).  Only the ambient wash
   is directional, so it is mirrored here, and Persian/Arabic text gets its usual +1px. */
html.ui-2026[dir="rtl"] body:not(#dn26){
  background-image:
    radial-gradient(1320px 760px at 98% -16%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 64%),
    radial-gradient(1120px 620px at 0% -8%, color-mix(in srgb, var(--warn) 20%, transparent), transparent 62%),
    radial-gradient(900px 700px at 30% 100%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 66%);
}
html.ui-2026[dir="rtl"] body:not(#dn26) #page-dashboard #dash-greeting h1{ letter-spacing:0; }


/* ------------------------------------------------------------------ §9. Motion */
html.ui-2026 body:not(#dn26) #page-dashboard :is(.dc-metric-card, .dc-panel, .dc-source-row, .dc-task-list > button, .dc-event-row){
  transition-duration:var(--dn-dur-2, 200ms);
  transition-timing-function:var(--dn-ease-out, cubic-bezier(.2,.8,.2,1));
}
@media (prefers-reduced-motion: reduce){
  html.ui-2026 body:not(#dn26) #page-dashboard *{ transition:none !important; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-card:hover{ transform:none; }
}