/* shadcn.css — TRIAL SKIN, scoped to `body.skin-shadcn` only.
   ------------------------------------------------------------------------
   A shadcn/ui-flavoured re-skin. shadcn itself is React + Radix + npm and
   cannot be used here (no build step, server-rendered PHP), so this is its
   visual language expressed in the app's own token system:

     - zinc neutrals, near-black primary, colour reserved for meaning
     - one --radius token instead of scattered radii
     - 1px borders carry elevation; shadows almost gone
     - tighter type scale, medium (not black) weights, muted-foreground
     - visible focus ring on every interactive element
     - no entrance animations / hover lifts

   Loaded ONLY when a page passes ['skin' => 'shadcn'] to layout_header(),
   and every rule is nested under body.skin-shadcn. To remove the trial:
   delete this file, the two lines in resources/views/partials/header.php,
   and the 'skin' key in modules/dashboard/pages/index.php. Nothing else in
   the app can be affected by it.
   ------------------------------------------------------------------------ */

/* ======================================================================
 | 1. Tokens — the whole re-skin, mostly. Every existing variable in
 |    theme.css is re-pointed at shadcn's zinc scale, so all 4,986 lines of
 |    app.css inherit the new palette without being touched.
 ====================================================================== */
body.skin-shadcn {
    /* shadcn zinc */
    --slate-50:  #fafafa;
    --slate-100: #f4f4f5;
    --slate-200: #e4e4e7;
    --slate-300: #d4d4d8;
    --slate-400: #a1a1aa;
    --slate-500: #71717a;
    --slate-600: #52525b;
    --slate-700: #3f3f46;
    --slate-800: #27272a;
    --slate-900: #18181b;

    /* Ordinal ramp for the order-pipeline funnel. The page writes
       var(--emerald-500..900) straight into SVG fills, so re-pointing them
       here re-colours the chart with zero PHP changes. One hue, monotone
       lightness — still an ordinal ramp, just neutral now. */
    --emerald-50:  #f4f4f5;
    --emerald-200: #d4d4d8;
    --emerald-400: #a1a1aa;
    --emerald-500: #a1a1aa;
    --emerald-600: #71717a;
    --emerald-700: #52525b;
    --emerald-800: #3f3f46;
    --emerald-900: #09090b;

    /* Status hues — desaturated one step toward shadcn's flatter chips.
       NOT neutralised: green/amber/red/blue carry real operational meaning
       on this page (late, blocked, done, in transit), and a dashboard that
       renders "3 commandes en retard" in the same grey as everything else
       is a worse dashboard, however on-brand it looks. */
    --blue-50:  #eff6ff;  --blue-600: #2563eb;  --blue-700: #1d4ed8;
    --amber-50: #fefce8;  --amber-600: #ca8a04; --amber-700: #a16207;
    --red-50:   #fef2f2;  --red-400:  #f87171;  --red-500: #ef4444; --red-600: #dc2626;
    --success-50: #f0fdf4; --success-200: #bbf7d0; --success-400: #4ade80;
    --success-500: #22c55e; --success-600: #16a34a; --success-700: #15803d;
    --success-800: #166534; --success-900: #14532d;

    /* Semantic roles, shadcn naming in the app's existing slots */
    --bg:             #f4f4f5;   /* muted   */
    --surface:        #ffffff;   /* card    */
    --text:           #27272a;   /* foreground-ish */
    --ink:            #09090b;   /* foreground */
    --muted:          #71717a;   /* muted-foreground */
    --faint:          #a1a1aa;
    --line:           #e4e4e7;   /* border  */
    --line-soft:      #f4f4f5;
    --hover:          #f4f4f5;   /* accent  */
    --primary:        #18181b;   /* shadcn primary IS near-black */
    --primary-strong: #09090b;
    --primary-soft:   #f4f4f5;
    --success:        #16a34a;
    --success-strong: #15803d;
    --success-soft:   #f0fdf4;

    /* shadcn: border + shadow-sm, nothing more */
    --shadow-card:  0 1px 2px 0 rgb(0 0 0 / .05);
    --ring-primary: 0 0 0 2px #fff, 0 0 0 4px #18181b;

    /* The one radius token shadcn is built on */
    --radius: .5rem;
    --radius-sm: calc(var(--radius) - 2px);

    -webkit-font-smoothing: antialiased;
    letter-spacing: -.006em;
}

/* ======================================================================
 | 2. Radius — one token, applied to every surface the dashboard renders.
 ====================================================================== */
body.skin-shadcn .card,
body.skin-shadcn .hero-panel .card,
body.skin-shadcn .kpi-card,
body.skin-shadcn .alerts-card,
body.skin-shadcn .hero-panel { border-radius: var(--radius); }

body.skin-shadcn .btn,
body.skin-shadcn .input,
body.skin-shadcn .card-icon-chip,
body.skin-shadcn .kpi-card-ico,
body.skin-shadcn .alerts-card-count,
body.skin-shadcn .table-page-link,
body.skin-shadcn .table-page-number { border-radius: var(--radius-sm); }

/* ======================================================================
 | 3. Card — shadcn: rounded-lg border bg-card shadow-sm, and a header
 |    whose title is `font-semibold leading-none tracking-tight` (not the
 |    heavier, larger heading this app uses).
 ====================================================================== */
body.skin-shadcn .card { box-shadow: var(--shadow-card); border-color: var(--line); }
body.skin-shadcn .card-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}
body.skin-shadcn .card-title {
    font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1;
    color: var(--ink);
}
body.skin-shadcn .card-pad { padding: 20px; }

/* Icon chips: shadcn puts a bordered neutral square here, not a colour wash.
   All four families that carry a .green/.blue/.amber/.slate/.red modifier are
   listed together on purpose — missing one is not a cosmetic slip. The .green
   variant of each resolves through --primary, which is now near-black, so a
   family left out doesn't stay its old green: it turns black next to siblings
   that are still blue. (Caught on /products, where "Total produits" went black
   while "SKU" stayed blue.) */
body.skin-shadcn .card-icon-chip,
body.skin-shadcn .kpi-card-ico,
body.skin-shadcn .stat-ico,
body.skin-shadcn .stat-compact-ico,
body.skin-shadcn .sku-price-chip {
    background: var(--surface) !important;
    border: 1px solid var(--line);
    color: var(--slate-600) !important;
}

/* ======================================================================
 | 4. Buttons — shadcn sizing (h-9, px-4, text-sm font-medium) and the four
 |    variants this page uses: default (near-black), outline, ghost, icon.
 ====================================================================== */
body.skin-shadcn .btn {
    height: 36px; padding: 0 16px;
    font-size: 14px; font-weight: 500;
    border-radius: var(--radius-sm);
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
body.skin-shadcn .btn-primary,
body.skin-shadcn .btn-dark {
    background: var(--primary); color: #fafafa; border-color: var(--primary);
}
body.skin-shadcn .btn-primary:hover,
body.skin-shadcn .btn-dark:hover { background: #27272a; border-color: #27272a; }

body.skin-shadcn .btn-outline {
    background: var(--surface); border-color: var(--line); color: var(--ink);
    box-shadow: var(--shadow-card);
}
body.skin-shadcn .btn-outline:hover { background: var(--hover); color: var(--ink); }

body.skin-shadcn .btn-ghost { color: var(--muted); }
body.skin-shadcn .btn-ghost:hover { background: var(--hover); color: var(--ink); }

body.skin-shadcn .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
body.skin-shadcn .btn-icon { width: 36px; height: 36px; padding: 0; }

/* shadcn's focus-visible ring — ring-2 + ring-offset-2. The app currently
   relies on the browser default, which is the single most visible
   accessibility gap between the two design languages. */
body.skin-shadcn .btn:focus-visible,
body.skin-shadcn .input:focus-visible,
body.skin-shadcn a:focus-visible,
body.skin-shadcn button:focus-visible {
    outline: none;
    box-shadow: var(--ring-primary);
}

/* ======================================================================
 | 5. Badges (pills) — shadcn badge: rounded-md, 1px border, px-2.5 py-0.5,
 |    text-xs font-semibold. The border is the tell; a shadcn badge is never
 |    a borderless colour wash.
 ====================================================================== */
body.skin-shadcn .pill {
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    padding: 2px 9px;
    font-size: 11.5px; font-weight: 500;
    letter-spacing: 0;
}
body.skin-shadcn .pill-slate { background: var(--slate-100); border-color: var(--slate-200); color: var(--slate-700); }
body.skin-shadcn .pill-green { background: var(--success-50); border-color: var(--success-200); color: var(--success-700); }
body.skin-shadcn .pill-blue  { background: var(--blue-50);  border-color: #bfdbfe; color: var(--blue-700); }
body.skin-shadcn .pill-amber { background: var(--amber-50); border-color: #fde68a; color: var(--amber-700); }
body.skin-shadcn .pill-red   { background: var(--red-50);   border-color: #fecaca; color: var(--red-600); }
/* Dots reuse .pill-* as a colour carrier, not as a chip — undo the chrome. */
body.skin-shadcn .activity-dot { border: 0; padding: 0; border-radius: 50%; }

/* ======================================================================
 | 6. Table — shadcn: h-12 header cells, muted-foreground, medium weight,
 |    every row a bottom border, hover:bg-muted/50, no zebra, no uppercase.
 ====================================================================== */
body.skin-shadcn .table thead th {
    height: 38px;
    background: transparent;
    border-bottom: 1px solid var(--line);
    font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
    color: var(--muted);
}
body.skin-shadcn .table tbody td {
    padding-top: 8px; padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
}
body.skin-shadcn .table tbody tr:hover { background: var(--hover); }
body.skin-shadcn .table tbody tr:last-child td { border-bottom: 0; }
/* The pinned row-actions header (app.css) needs an opaque fill here, since
   this skin's header cells are transparent. */
body.skin-shadcn .table-wrap .table:has(tbody td:last-child > .row-actions) thead tr:not(.table-filter-row) th:last-child { background: var(--surface); }

/* ======================================================================
 | 7. KPI cards — shadcn's card-with-a-number: title is small + medium
 |    weight above the value, value is text-2xl bold, sub is muted. The
 |    current design front-loads a coloured icon and an 800-weight number.
 ====================================================================== */
body.skin-shadcn .kpi-card { padding: 16px 20px; box-shadow: var(--shadow-card); }
body.skin-shadcn .kpi-card:hover {
    /* shadcn cards do not lift */
    transform: none; box-shadow: var(--shadow-card); border-color: var(--line);
}
body.skin-shadcn .kpi-card-label { font-size: 13px; font-weight: 500; color: var(--ink); margin-top: 10px; }
body.skin-shadcn .kpi-card-value { font-size: 24px; font-weight: 700; letter-spacing: -.025em; margin-top: 4px; }
body.skin-shadcn .kpi-card-sub,
body.skin-shadcn .kpi-card-change { font-size: 12px; font-weight: 400; color: var(--muted); }
body.skin-shadcn .kpi-card-change.is-up { color: var(--success-strong); font-weight: 500; }
body.skin-shadcn .kpi-card-change.is-down { color: var(--red-600); font-weight: 500; }

/* ======================================================================
 | 8. Alerts card — keep the fixed-height scrolling behaviour exactly as
 |    designed (dashboard/CLAUDE.md is emphatic about why), restyle only
 |    the chrome: shadcn header type, bordered count badge.
 ====================================================================== */
body.skin-shadcn .alerts-card { box-shadow: var(--shadow-card); }
body.skin-shadcn .alerts-card-title {
    font-size: 13px; font-weight: 600; letter-spacing: -.01em; text-transform: none;
    color: var(--ink);
}
body.skin-shadcn .alerts-card-count {
    background: var(--surface); border: 1px solid var(--line); color: var(--muted);
    font-weight: 500;
}

/* ======================================================================
 | 9. Page shell — the gradient hero panel and its gradient underline are
 |    the two most un-shadcn things on the page. shadcn pages open on a flat
 |    surface with a plain `text-3xl font-semibold tracking-tight` heading.
 ====================================================================== */
body.skin-shadcn .hero-panel { background-image: none; }
body.skin-shadcn .hero-panel .page-head h2::after { display: none; }
body.skin-shadcn .page-head h2 { font-size: 24px; font-weight: 600; letter-spacing: -.025em; }
body.skin-shadcn .hero-panel .page-head .sub,
body.skin-shadcn .page-head .sub { margin-top: 6px; font-size: 14px; color: var(--muted); }

/* Range pills above the chart → shadcn segmented control (rounded-md, not
   fully round; muted track; the active item is a raised white card). */
body.skin-shadcn .trend-range {
    background: var(--bg); border-radius: var(--radius-sm); padding: 3px; gap: 2px;
}
body.skin-shadcn .trend-range-btn {
    border-radius: calc(var(--radius) - 4px);
    padding: 4px 11px; font-weight: 500; color: var(--muted);
}
body.skin-shadcn .trend-range-btn.is-active {
    background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card);
}

/* ======================================================================
 | 10. Motion — shadcn animates state changes (open/close), never page
 |     entrance. The rise/draw/pulse choreography reads as a different
 |     design language, so the skin stands it down.
 ====================================================================== */
body.skin-shadcn .kpi-card,
body.skin-shadcn .alerts-card,
body.skin-shadcn .stat,
body.skin-shadcn .stat-compact,
body.skin-shadcn .hero-panel .grid-2 > .card,
body.skin-shadcn .hero-panel .table tbody tr { animation: none; }
body.skin-shadcn .hero-panel .grid-2 > .card:hover { box-shadow: var(--shadow-card); }
body.skin-shadcn .hero-panel .pill-blue { animation: none; }
body.skin-shadcn .hero-panel .trend-svg .trend-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
body.skin-shadcn .hero-panel .trend-svg .trend-area { opacity: .1; animation: none; }
/* The live in-transit dot keeps pulsing: it reports a live condition, it is
   not decoration. */

/* ======================================================================
 | 11. Shell — sidebar/topbar come from the shared header partial, so they
 |     re-skin with the page. Kept minimal: shadcn's sidebar is a flat
 |     surface with a 1px border and muted item labels.
 ====================================================================== */
body.skin-shadcn .topbar { border-bottom: 1px solid var(--line); }
body.skin-shadcn .topbar h1 { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
body.skin-shadcn .brand-name { font-weight: 600; letter-spacing: -.015em; }


/* ======================================================================
 | 12. Corrections found by rendering the page (kept as their own section
 |     so the reasoning survives).
 ====================================================================== */

/* 12a. Activity feed dots. These reuse .pill-green/.pill-blue/… purely as a
   colour carrier on an 8px circle, so the badge restyle above (pale tint +
   border) drained them to near-white, and .pill-green in particular resolved
   through --primary, which is now near-black. A status dot has to stay
   saturated: it is the only thing distinguishing five otherwise identical
   feed rows. */
body.skin-shadcn .activity-dot.pill-green { background: #22c55e; }
body.skin-shadcn .activity-dot.pill-blue  { background: #3b82f6; }
body.skin-shadcn .activity-dot.pill-amber { background: #f59e0b; }
body.skin-shadcn .activity-dot.pill-red   { background: #ef4444; }
body.skin-shadcn .activity-dot.pill-slate { background: #a1a1aa; }
/* Same story for the alert-row severity dots. */
body.skin-shadcn .alerts-row-dot { border: 0; }

/* 12b. Sidebar coherence. With the content area neutralised, the emerald
   brand mark and the emerald-tinted active row were the only saturated
   things left on screen and read as leftovers from the old theme. shadcn's
   sidebar is neutral: the active item is a flat accent fill, not a coloured
   one, and the brand mark is the foreground colour. */
body.skin-shadcn .brand-mark {
    background: var(--primary);
    box-shadow: none;
    border-radius: var(--radius-sm);
}
body.skin-shadcn .nav-item.active {
    background: var(--hover);
    color: var(--ink);
    font-weight: 500;
}
body.skin-shadcn .nav-item.active .icon {
    background: var(--surface); color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line);
}
body.skin-shadcn .nav-item.active::before { background: var(--ink); }
body.skin-shadcn .nav-item { font-weight: 400; }
body.skin-shadcn .sidebar-kpi {
    background: var(--primary);
    border-radius: var(--radius-sm);
}

/* 12d. Auth shell. The login/forgot/reset backdrop is the one place the app
   paints colour outside the token system: a deep petrol night behind the
   3D conveyor belts (app.css "Authentication", modules/scene3d/). It is the
   same in every skin on purpose — the scene's fog colour is matched to it. */

/* 12e. (The auth card's own overrides are gone: since 2026-10-28 the card
   is dark glass with an amber button in every skin — app.css "Authentication".) */