/* AYMEN CPM components: one version of each, built only from tokens.css. Loaded right after tokens.css on every page,
   so older page stylesheets still win where they style their own markup. Class prefix: ds-. Inventory and markup in
   docs/ui-redesign/DESIGN-SYSTEM.md. Charts (CpmCharts, cpm-charts.js) are styled at the end of this file. */

/* ---------- base ---------- */
:where([class^="ds-"],[class*=" ds-"],.cc,.cc *){box-sizing:border-box}
.ds-1line,[data-single-line]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ds-num,.ds-money{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;line-height:var(--lh-figure)}
.ds-money{overflow:visible;text-overflow:clip}
.ds-money.is-negative,.ds-money[data-sign="-"]{color:var(--money-negative)}
.ds-money.is-positive{color:var(--money-positive)}
.ds-money.is-due{color:var(--money-due)}
.ds-muted{color:var(--text-muted)}
.ds-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:where(.ds-btn,.ds-input,.ds-select,.ds-tab,.ds-chip,.ds-kpi,.ds-card a,.ds-table button):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---------- layout: container + 12-column grid ---------- */
.ds-container{width:100%;max-width:var(--content-max);margin-inline:auto;container-type:inline-size;container-name:ds-page}
.ds-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sp-4);container-type:inline-size;container-name:ds-grid}
.ds-grid>*{grid-column:span 12;min-width:0}
.ds-col-3{grid-column:span 3}.ds-col-4{grid-column:span 4}.ds-col-6{grid-column:span 6}.ds-col-8{grid-column:span 8}.ds-col-9{grid-column:span 9}.ds-col-12{grid-column:span 12}
@container ds-grid (max-width:1100px){.ds-col-3{grid-column:span 6}.ds-col-4{grid-column:span 6}.ds-col-8,.ds-col-9{grid-column:span 12}}
@container ds-grid (max-width:720px){.ds-grid>[class*="ds-col-"]{grid-column:span 12}}
.ds-stack{display:grid;gap:var(--sp-4);min-width:0}
.ds-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);min-width:0}

/* ---------- buttons ---------- */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:36px;padding:0 var(--sp-4);border:1px solid var(--border);border-radius:var(--radius-input);background:var(--surface);color:var(--accent);font:var(--fw-semibold) var(--fs-14)/1 var(--font-sans);white-space:nowrap;cursor:pointer;text-decoration:none;transition:background-color .15s var(--ease),border-color .15s var(--ease)}
.ds-btn:hover{background:var(--surface-hover);border-color:var(--gray-300)}
.ds-btn:disabled,.ds-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.ds-btn--primary{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.ds-btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.ds-btn--secondary{background:var(--surface);color:var(--accent)}
.ds-btn--ghost{background:transparent;border-color:transparent;color:var(--accent)}
.ds-btn--ghost:hover{background:var(--accent-soft);border-color:transparent}
.ds-btn--danger{background:var(--surface);border-color:var(--status-negative-line);color:var(--status-negative)}
.ds-btn--danger:hover{background:var(--status-negative-bg)}
.ds-btn--sm{min-height:28px;padding:0 var(--sp-3);font-size:var(--fs-13)}
.ds-btn--icon{width:36px;padding:0}

/* ---------- form controls ---------- */
.ds-field{display:grid;gap:var(--sp-1);min-width:0}
.ds-field>label,.ds-label{font-size:var(--fs-13);font-weight:var(--fw-medium);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-input,.ds-select{width:100%;min-height:36px;padding:0 var(--sp-3);border:1px solid var(--border);border-radius:var(--radius-input);background:var(--surface);color:var(--text);font:var(--fs-14)/var(--lh-text) var(--font-sans)}
.ds-input[type="number"],.ds-input.is-amount{text-align:right;font-variant-numeric:tabular-nums}
.ds-input[type="date"]{font-variant-numeric:tabular-nums}
.ds-input::placeholder{color:var(--text-muted)}
.ds-input:hover,.ds-select:hover{border-color:var(--gray-300)}
.ds-input:focus,.ds-select:focus{outline:2px solid var(--focus-ring);outline-offset:0;border-color:var(--focus-ring)}
.ds-input[aria-invalid="true"]{border-color:var(--status-negative)}
.ds-field .ds-hint{font-size:var(--fs-12);color:var(--text-muted)}
.ds-field .ds-error{font-size:var(--fs-12);color:var(--status-negative)}

/* ---------- KPI tile ---------- */
.ds-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--sp-3)}
.ds-kpi{display:grid;gap:var(--sp-1);align-content:start;min-width:0;padding:var(--sp-3) var(--sp-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);color:inherit;text-decoration:none}
a.ds-kpi:hover,button.ds-kpi:hover{border-color:var(--accent-line);background:var(--surface-hover)}
.ds-kpi__label{font-size:var(--fs-13);font-weight:var(--fw-medium);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-kpi__value{font-size:var(--fs-24);font-weight:var(--fw-bold);line-height:var(--lh-figure);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}
.ds-kpi--hero .ds-kpi__value{font-size:var(--fs-32)}
.ds-kpi__meta{font-size:var(--fs-12);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-kpi.is-positive .ds-kpi__value{color:var(--money-positive)}
.ds-kpi.is-negative .ds-kpi__value{color:var(--money-negative)}
.ds-kpi.is-due .ds-kpi__value{color:var(--money-due)}

/* ---------- card ---------- */
.ds-card{display:grid;gap:var(--sp-3);align-content:start;min-width:0;padding:var(--sp-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow);container-type:inline-size}
.ds-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);min-width:0}
.ds-card__title{margin:0;font-size:var(--fs-16);font-weight:var(--fw-semibold);line-height:var(--lh-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-card__sub{margin:0;font-size:var(--fs-13);color:var(--text-muted)}
.ds-card__actions{display:flex;gap:var(--sp-2);flex:none}
.ds-card--flat{box-shadow:none}

/* ---------- table: only the table scrolls; sticky header + first column; 40px rows ---------- */
.ds-table-wrap{position:relative;max-width:100%;max-height:min(70vh,720px);overflow:auto;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);container-type:inline-size;container-name:ds-table;overscroll-behavior:contain}
.ds-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-13);font-variant-numeric:tabular-nums;color:var(--text)}
.ds-table :is(th,td){height:var(--row-h);padding:0 var(--sp-3);border-bottom:1px solid var(--divider);text-align:left;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28ch}
.ds-table thead th{position:sticky;top:0;z-index:2;background:var(--surface-sunken);font-weight:var(--fw-semibold);color:var(--text-secondary);border-bottom-color:var(--border)}
.ds-table :is(th,td):first-child{position:sticky;left:0;z-index:1;background:var(--surface)}
.ds-table thead th:first-child{z-index:3;background:var(--surface-sunken)}
.ds-table :is(th,td).num,.ds-table :is(th,td)[data-type="amount"]{text-align:right;max-width:none;overflow:visible;text-overflow:clip}
.ds-table tbody tr:hover>*{background:var(--surface-hover)}
.ds-table tfoot :is(th,td),.ds-table tfoot :is(th,td):first-child{position:sticky;bottom:0;z-index:1;background:var(--surface-sunken);font-weight:var(--fw-bold);border-top:1px solid var(--border);border-bottom:0}
.ds-table th[aria-sort] button{all:unset;cursor:pointer;display:inline-flex;gap:var(--sp-1);align-items:center}
.ds-table th[aria-sort="ascending"] button::after{content:"\2191"}
.ds-table th[aria-sort="descending"] button::after{content:"\2193"}
@container ds-table (max-width:900px){.ds-table [data-priority="3"]{display:none}}
@container ds-table (max-width:620px){.ds-table [data-priority="2"]{display:none}}
.ds-colchooser{position:relative}
.ds-colchooser>summary{list-style:none;cursor:pointer}
.ds-colchooser>summary::-webkit-details-marker{display:none}
.ds-colchooser__menu{position:absolute;right:0;z-index:20;display:grid;gap:var(--sp-1);min-width:200px;margin-top:var(--sp-1);padding:var(--sp-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow)}
.ds-colchooser__menu label{display:flex;align-items:center;gap:var(--sp-2);min-height:32px;font-size:var(--fs-13);white-space:nowrap}

/* ---------- tabs, chips, status badges ---------- */
.ds-tabs{display:flex;gap:var(--sp-1);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border)}
.ds-tabs::-webkit-scrollbar{display:none}
.ds-tab{flex:none;display:inline-flex;align-items:center;gap:var(--sp-2);min-height:40px;padding:0 var(--sp-3);border:0;border-bottom:2px solid transparent;background:none;color:var(--text-secondary);font:var(--fw-medium) var(--fs-14)/1 var(--font-sans);white-space:nowrap;cursor:pointer;text-decoration:none}
.ds-tab:hover{color:var(--text)}
.ds-tab[aria-selected="true"],.ds-tab[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.ds-chip{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:28px;padding:0 var(--sp-3);border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);color:var(--text-secondary);font:var(--fw-medium) var(--fs-13)/1 var(--font-sans);white-space:nowrap;cursor:pointer}
.ds-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.ds-badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:2px var(--sp-2);border:1px solid var(--status-draft-line);border-radius:var(--radius-pill);background:var(--status-draft-bg);color:var(--status-draft);font:var(--fw-semibold) var(--fs-12)/1.4 var(--font-sans);white-space:nowrap}
.ds-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ds-badge--positive{background:var(--status-positive-bg);border-color:var(--status-positive-line);color:var(--status-positive)}
.ds-badge--warning{background:var(--status-warning-bg);border-color:var(--status-warning-line);color:var(--status-warning)}
.ds-badge--negative{background:var(--status-negative-bg);border-color:var(--status-negative-line);color:var(--status-negative)}
.ds-badge--info{background:var(--status-info-bg);border-color:var(--status-info-line);color:var(--status-info)}
.ds-badge--draft{background:var(--status-draft-bg);border-color:var(--status-draft-line);color:var(--status-draft)}

/* ---------- drawer, modal, toast ---------- */
.ds-scrim{position:fixed;inset:0;z-index:80;background:var(--scrim)}
.ds-drawer{position:fixed;inset:0 0 0 auto;z-index:81;display:grid;grid-template-rows:auto 1fr auto;width:min(560px,100vw);background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow);transform:translateX(100%);transition:transform .2s var(--ease)}
.ds-drawer[open],.ds-drawer.is-open{transform:none}
.ds-drawer__head,.ds-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4);border-bottom:1px solid var(--divider)}
.ds-drawer__body,.ds-modal__body{overflow:auto;padding:var(--sp-4);min-height:0}
.ds-drawer__foot,.ds-modal__foot{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--divider)}
.ds-modal{width:min(640px,calc(100vw - var(--sp-8)));max-height:calc(100dvh - var(--sp-8));padding:0;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.ds-modal[open]{display:grid;grid-template-rows:auto 1fr auto}
.ds-modal::backdrop{background:var(--scrim)}
.ds-toast-region{position:fixed;right:var(--sp-4);bottom:var(--sp-4);z-index:90;display:grid;gap:var(--sp-2);max-width:min(420px,calc(100vw - var(--sp-8)))}
.ds-toast{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-card);background:var(--gray-900);color:var(--gray-0);font-size:var(--fs-14);box-shadow:var(--shadow)}
.ds-toast--negative{background:var(--status-negative);color:var(--gray-0)}

/* ---------- empty state, skeleton, progress ---------- */
.ds-empty{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:0;padding:var(--sp-3) 0;color:var(--text-muted);font-size:var(--fs-14)}
.ds-empty a,.ds-empty button{color:var(--accent);font-weight:var(--fw-semibold)}
.ds-skeleton{display:block;min-height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--gray-50) 25%,var(--gray-100) 50%,var(--gray-50) 75%) 0 0/200% 100%;animation:ds-shimmer 1.2s linear infinite}
@keyframes ds-shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.ds-skeleton{animation:none}.ds-drawer{transition:none}}
.ds-progress{position:relative;display:block;height:6px;min-width:48px;overflow:hidden;border-radius:var(--radius-pill);background:var(--chart-track)}
.ds-progress--inline{display:inline-block;width:96px;vertical-align:middle}
.ds-progress>i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--series-1)}
.ds-progress>b{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--gray-700)}
.ds-progress.is-positive>i{background:var(--status-positive)}
.ds-progress.is-warning>i{background:var(--status-warning-solid)}
.ds-progress.is-negative>i{background:var(--status-negative)}
.ds-progress-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--sp-1) var(--sp-3)}
.ds-progress-row>.ds-progress{grid-column:1/-1}

/* ---------- charts (CpmCharts) ---------- */
.cc{position:relative;display:grid;gap:var(--sp-2);margin:0;min-width:0;width:100%;color:var(--text)}
.cc-plot{position:relative;width:100%;min-width:0;height:var(--chart-md)}
.cc[data-chart-size="sm"] .cc-plot{height:var(--chart-sm)}
.cc[data-chart-size="lg"] .cc-plot{height:var(--chart-lg)}
.cc-plot>svg{display:block;width:100%;height:100%;overflow:visible}
.cc-grid{stroke:var(--chart-grid);stroke-width:1;shape-rendering:crispEdges}
.cc-zero{stroke:var(--gray-300);stroke-width:1;shape-rendering:crispEdges}
.cc-axis{font-size:var(--fs-12);fill:var(--chart-axis);font-family:var(--font-sans);font-variant-numeric:tabular-nums}
.cc-value{font-size:var(--fs-12);fill:var(--text-secondary);font-weight:var(--fw-semibold);font-family:var(--font-sans);font-variant-numeric:tabular-nums}
.cc-target{stroke:var(--gray-800);stroke-width:2;stroke-linecap:round}
.cc-bar{fill:var(--cc-c)}
.cc-mark{cursor:default}
.cc-strip{display:flex;gap:2px;height:16px;border-radius:var(--radius-sm);overflow:hidden;background:var(--chart-track)}
.cc-seg{display:block;min-width:2px;background:var(--cc-c)}
.cc-mark[data-cc-click]{cursor:pointer}
.cc-mark:hover,.cc-mark:focus-visible{opacity:.85;outline:none}
.cc-hit{fill:transparent}
.cc-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.cc-area{opacity:.14}
.cc-dot{stroke:var(--surface);stroke-width:2}
.cc-legend{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);margin:0;padding:0;list-style:none;font-size:var(--fs-12);color:var(--text-secondary);justify-content:flex-start}
.cc-legend li{display:inline-flex;align-items:center;gap:var(--sp-2);white-space:nowrap}
.cc-legend i{display:inline-block;width:10px;height:10px;border-radius:var(--radius-sm)}
.cc-legend b{font-weight:var(--fw-semibold);color:var(--text);font-variant-numeric:tabular-nums}
.cc-tip{position:absolute;z-index:5;pointer-events:none;display:grid;gap:2px;min-width:120px;padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--radius-input);background:var(--surface);box-shadow:var(--shadow);font-size:var(--fs-12);color:var(--text-secondary);white-space:nowrap;transform:translate(-50%,calc(-100% - var(--sp-2)))}
.cc-tip strong{font-size:var(--fs-14);color:var(--text);font-variant-numeric:tabular-nums}
.cc-tip[hidden]{display:none}
.cc-empty{display:flex;align-items:center;margin:0;padding:var(--sp-3) 0;color:var(--text-muted);font-size:var(--fs-13)}
.cc-table{position:absolute;display:block;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.cc-donut{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--sp-4)}
.cc-donut .cc-plot,.cc-donut[data-chart-size] .cc-plot{width:var(--chart-sm);max-width:100%;height:auto;aspect-ratio:1}
.cc-donut[data-chart-size="sm"] .cc-plot{width:160px;height:auto}
.cc-donut .cc-legend{flex-direction:column;gap:var(--sp-2)}
.cc-donut-value{font-size:var(--fs-20);font-weight:var(--fw-bold);fill:var(--text);font-family:var(--font-sans);font-variant-numeric:tabular-nums}
.cc-donut-label{font-size:var(--fs-12);fill:var(--text-muted);font-family:var(--font-sans)}
.cc-hbars{display:grid;gap:var(--sp-2)}
.cc-hrow{display:grid;grid-template-columns:minmax(80px,1.2fr) minmax(80px,2fr) auto;gap:var(--sp-3);align-items:center;font-size:var(--fs-13);color:inherit;text-decoration:none}
a.cc-hrow:hover .cc-hlabel strong,button.cc-hrow:hover .cc-hlabel strong{text-decoration:underline}
button.cc-hrow{all:unset;display:grid;grid-template-columns:minmax(80px,1.2fr) minmax(80px,2fr) auto;gap:var(--sp-3);align-items:center;font-size:var(--fs-13);cursor:pointer}
.cc-hlabel{display:grid;min-width:0}
.cc-hlabel strong{font-weight:var(--fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-hlabel small{color:var(--text-muted);font-size:var(--fs-12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-hbar{position:relative;height:12px;background:var(--chart-track);border-radius:var(--radius-sm);overflow:hidden}
.cc-hbar i{position:absolute;inset:0 auto 0 0;background:var(--gray-200);border-radius:var(--radius-sm)}
.cc-hbar b{position:absolute;inset:0 auto 0 0;border-radius:var(--radius-sm);background:var(--cc-c,var(--series-1))}
.cc-hbar b.is-over{background:var(--status-negative)}
.cc-hval{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.cc-hval small{color:var(--text-muted)}
@container (max-width:420px){.cc-donut{grid-template-columns:1fr;justify-items:center}}
@media (max-width:760px){.cc-hrow,button.cc-hrow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label val" "bar bar"}.cc-hlabel{grid-area:label}.cc-hbar{grid-area:bar}.cc-hval{grid-area:val}.cc-donut .cc-plot{width:160px}}