:root {
  /* Darak Stock — custom 2026 palette */
  --ds-ink-950: #10233f;
  --ds-ink-900: #183354;
  --ds-ink-800: #274768;
  --ds-ink-700: #3e5d7c;
  --ds-ink-600: #5f7690;
  --ds-ink-500: #8395a8;
  --ds-ink-300: #c5d0db;
  --ds-ink-200: #dce4eb;
  --ds-ink-100: #edf2f6;
  --ds-ink-50: #f7f9fb;
  --ds-white: #ffffff;

  --ds-brand-700: #075c65;
  --ds-brand-600: #08747a;
  --ds-brand-500: #0d9292;
  --ds-brand-400: #36b5ad;
  --ds-brand-100: #d9f4f0;
  --ds-brand-50: #edfbf9;

  --ds-success-700: #16704c;
  --ds-success-500: #20a36a;
  --ds-success-100: #dff7eb;
  --ds-warning-700: #9a5b00;
  --ds-warning-500: #edaa2e;
  --ds-warning-100: #fff3d6;
  --ds-danger-700: #a52d45;
  --ds-danger-500: #df5365;
  --ds-danger-100: #fde5e8;
  --ds-info-700: #245a9c;
  --ds-info-500: #4f8ed6;
  --ds-info-100: #e4efff;
  --ds-violet-700: #6543a5;
  --ds-violet-500: #9471d4;
  --ds-violet-100: #eee8ff;

  --ds-font: "IBM Plex Sans Arabic", "Tajawal", "Cairo", system-ui, sans-serif;
  --ds-text-xs: .75rem;
  --ds-text-sm: .875rem;
  --ds-text-md: 1rem;
  --ds-text-lg: 1.125rem;
  --ds-text-xl: 1.375rem;
  --ds-text-2xl: 1.75rem;
  --ds-text-3xl: 2.25rem;

  --ds-radius-sm: .5rem;
  --ds-radius-md: .75rem;
  --ds-radius-lg: 1rem;
  --ds-radius-xl: 1.25rem;
  --ds-radius-pill: 999px;
  --ds-shadow-sm: 0 1px 3px rgb(16 35 63 / .06), 0 1px 2px rgb(16 35 63 / .04);
  --ds-shadow-md: 0 12px 32px rgb(16 35 63 / .09), 0 2px 8px rgb(16 35 63 / .05);
  --ds-shadow-brand: 0 10px 24px rgb(8 116 122 / .2);
  --ds-focus: 0 0 0 3px rgb(54 181 173 / .28);
  --ds-sidebar-width: 17rem;
  --ds-content-max: 1440px;
  --ds-transition: 160ms cubic-bezier(.2, .8, .2, 1);
}

/* Base: scope integration under .ds-app to avoid collisions */
.ds-app,
.ds-app * {
  box-sizing: border-box;
}

.ds-app {
  min-height: 100vh;
  color: var(--ds-ink-900);
  background: var(--ds-ink-50);
  direction: rtl;
  font-family: var(--ds-font);
  font-size: var(--ds-text-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.ds-app :where(a) { color: inherit; text-decoration: none; }
.ds-app :where(img, svg) { display: block; max-width: 100%; }
.ds-app :where(h1, h2, h3, h4, p) { margin: 0; }
.ds-app :where(button, input, select, textarea) { font: inherit; }
.ds-app :where(button) { cursor: pointer; }
.ds-app :where(button:disabled, [aria-disabled="true"]) { cursor: not-allowed; }

.ds-app :where(:focus-visible) {
  outline: none;
  box-shadow: var(--ds-focus);
}

.ds-shell { display: flex; min-height: 100vh; }
.ds-main { flex: 1; min-width: 0; margin-right: var(--ds-sidebar-width); }
.ds-container { width: min(100% - 2.5rem, var(--ds-content-max)); margin-inline: auto; }
.ds-page { padding-block: 1.5rem 3rem; }
.ds-stack { display: flex; flex-direction: column; gap: 1rem; }
.ds-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.ds-muted { color: var(--ds-ink-600); }
.ds-eyebrow { color: var(--ds-brand-700); font-size: var(--ds-text-xs); font-weight: 700; letter-spacing: .05em; }

/* Sidebar */
.ds-sidebar {
  position: fixed; z-index: 30; inset-block: 0; right: 0;
  display: flex; width: var(--ds-sidebar-width); flex-direction: column;
  padding: 1.25rem .875rem; color: var(--ds-white);
  background: var(--ds-ink-950);
  box-shadow: 8px 0 32px rgb(16 35 63 / .08);
}
.ds-brand { display: flex; align-items: center; gap: .75rem; padding: .35rem .5rem 1.75rem; }
.ds-brand__mark {
  display: grid; width: 2.5rem; height: 2.5rem; place-items: center;
  color: var(--ds-ink-950); background: var(--ds-brand-400);
  border-radius: .8rem; box-shadow: var(--ds-shadow-brand);
}
.ds-brand__name { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.ds-brand__caption { display: block; color: var(--ds-ink-300); font-size: .67rem; font-weight: 500; }
.ds-sidebar__section { margin: 0 .5rem .5rem; color: var(--ds-ink-500); font-size: .67rem; font-weight: 700; }
.ds-sidebar__nav { display: grid; gap: .25rem; overflow: auto; }
.ds-nav-item {
  display: flex; align-items: center; gap: .7rem; min-height: 2.75rem; padding: .6rem .75rem;
  color: var(--ds-ink-300); border: 1px solid transparent; border-radius: .7rem;
  transition: background var(--ds-transition), color var(--ds-transition), transform var(--ds-transition);
}
.ds-nav-item:hover { color: var(--ds-white); background: rgb(255 255 255 / .08); transform: translateX(-2px); }
.ds-nav-item[aria-current="page"], .ds-nav-item.is-active { color: var(--ds-white); background: var(--ds-brand-700); border-color: rgb(54 181 173 / .35); }
.ds-nav-item__icon { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; stroke-width: 1.8; }
.ds-nav-item__label { flex: 1; font-size: var(--ds-text-sm); font-weight: 600; }
.ds-nav-item__count { min-width: 1.35rem; padding: .05rem .35rem; color: var(--ds-white); background: var(--ds-danger-500); border-radius: var(--ds-radius-pill); font-size: .7rem; text-align: center; }
.ds-sidebar__footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / .1); }
.ds-sidebar__close, .ds-sidebar-toggle { display: none; }

/* Header and search */
.ds-header {
  position: sticky; z-index: 20; top: 0; min-height: 4.5rem; padding: .85rem 0;
  background: rgb(247 249 251 / .88); border-bottom: 1px solid var(--ds-ink-200);
  backdrop-filter: blur(14px);
}
.ds-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ds-header__tools { display: flex; align-items: center; gap: .75rem; }
.ds-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.ds-page-heading__title { color: var(--ds-ink-950); font-size: var(--ds-text-2xl); font-weight: 800; letter-spacing: -.04em; }
.ds-page-heading__description { margin-top: .2rem; color: var(--ds-ink-600); font-size: var(--ds-text-sm); }
.ds-search { position: relative; display: flex; align-items: center; width: min(100%, 31rem); }
.ds-search__icon { position: absolute; right: .9rem; width: 1.1rem; color: var(--ds-ink-500); pointer-events: none; }
.ds-search__input {
  width: 100%; min-height: 2.8rem; padding: .6rem 2.7rem .6rem 4.5rem; color: var(--ds-ink-900);
  background: var(--ds-white); border: 1px solid var(--ds-ink-200); border-radius: .7rem;
  box-shadow: var(--ds-shadow-sm); transition: border var(--ds-transition), box-shadow var(--ds-transition);
}
.ds-search__input::placeholder { color: var(--ds-ink-500); }
.ds-search__input:hover { border-color: var(--ds-ink-300); }
.ds-search__input:focus { border-color: var(--ds-brand-500); box-shadow: var(--ds-focus); outline: none; }
.ds-search__shortcut { position: absolute; left: .7rem; padding: .1rem .4rem; color: var(--ds-ink-500); background: var(--ds-ink-50); border: 1px solid var(--ds-ink-200); border-radius: .35rem; font-size: .68rem; }
.ds-icon-button { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; place-items: center; color: var(--ds-ink-700); background: var(--ds-white); border: 1px solid var(--ds-ink-200); border-radius: .7rem; transition: background var(--ds-transition), color var(--ds-transition), border var(--ds-transition); }
.ds-icon-button:hover { color: var(--ds-brand-700); background: var(--ds-brand-50); border-color: var(--ds-brand-400); }
.ds-icon-button svg { width: 1.15rem; }
.ds-avatar { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; color: var(--ds-brand-700); background: var(--ds-brand-100); border-radius: 50%; font-size: .8rem; font-weight: 800; }

/* Buttons */
.ds-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .55rem 1rem; border: 1px solid transparent; border-radius: .65rem; font-size: var(--ds-text-sm); font-weight: 700; transition: transform var(--ds-transition), background var(--ds-transition), box-shadow var(--ds-transition), border var(--ds-transition); }
.ds-button:active { transform: translateY(1px); }
.ds-button--primary { color: var(--ds-white); background: var(--ds-brand-600); box-shadow: 0 5px 14px rgb(8 116 122 / .18); }
.ds-button--primary:hover { background: var(--ds-brand-700); box-shadow: var(--ds-shadow-brand); }
.ds-button--secondary { color: var(--ds-ink-800); background: var(--ds-white); border-color: var(--ds-ink-200); }
.ds-button--secondary:hover { color: var(--ds-brand-700); background: var(--ds-brand-50); border-color: var(--ds-brand-400); }
.ds-button--danger { color: var(--ds-danger-700); background: var(--ds-danger-100); }
.ds-button--danger:hover { color: var(--ds-white); background: var(--ds-danger-500); }
.ds-button--ghost { color: var(--ds-brand-700); background: transparent; }
.ds-button--ghost:hover { background: var(--ds-brand-50); }
.ds-button--sm { min-height: 2.25rem; padding: .4rem .7rem; font-size: var(--ds-text-xs); }
.ds-button__icon { width: 1rem; height: 1rem; }

/* Cards, dashboard, metrics */
.ds-card { padding: 1.25rem; background: var(--ds-white); border: 1px solid var(--ds-ink-200); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-sm); }
.ds-card--interactive { transition: transform var(--ds-transition), box-shadow var(--ds-transition), border var(--ds-transition); }
.ds-card--interactive:hover { border-color: var(--ds-brand-400); box-shadow: var(--ds-shadow-md); transform: translateY(-2px); }
.ds-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ds-card__title { color: var(--ds-ink-950); font-size: var(--ds-text-lg); font-weight: 750; }
.ds-card__subtitle { margin-top: .15rem; color: var(--ds-ink-600); font-size: var(--ds-text-sm); }
.ds-dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.ds-dashboard-grid__full { grid-column: span 12; }
.ds-dashboard-grid__wide { grid-column: span 8; }
.ds-dashboard-grid__side { grid-column: span 4; }
.ds-metric { position: relative; overflow: hidden; min-height: 8.5rem; }
.ds-metric::after { position: absolute; width: 6rem; height: 6rem; left: -2rem; bottom: -2.25rem; background: var(--ds-brand-50); border-radius: 50%; content: ""; }
.ds-metric__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ds-metric__icon { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; color: var(--ds-brand-700); background: var(--ds-brand-100); border-radius: .7rem; }
.ds-metric__label { color: var(--ds-ink-600); font-size: var(--ds-text-sm); font-weight: 600; }
.ds-metric__value { margin-top: .45rem; color: var(--ds-ink-950); font-size: var(--ds-text-3xl); font-weight: 800; letter-spacing: -.06em; line-height: 1.1; }
.ds-metric__trend { margin-top: .65rem; color: var(--ds-success-700); font-size: var(--ds-text-xs); font-weight: 700; }
.ds-metric__trend--negative { color: var(--ds-danger-700); }
.ds-progress { height: .45rem; overflow: hidden; background: var(--ds-ink-100); border-radius: var(--ds-radius-pill); }
.ds-progress__bar { height: 100%; background: var(--ds-brand-500); border-radius: inherit; transition: width 400ms ease; }

/* Stock summary: real availability is intentionally dominant */
.ds-product-summary { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: .75rem; align-items: stretch; padding: .85rem; background: var(--ds-ink-50); border: 1px solid var(--ds-ink-200); border-radius: var(--ds-radius-lg); }
.ds-product-summary__cell { min-height: 6.8rem; padding: .9rem; background: var(--ds-white); border: 1px solid var(--ds-ink-200); border-radius: .75rem; }
.ds-product-summary__cell--available { color: var(--ds-brand-700); background: var(--ds-brand-50); border-color: var(--ds-brand-400); box-shadow: inset 0 0 0 1px rgb(54 181 173 / .12); }
.ds-product-summary__label { display: block; color: var(--ds-ink-600); font-size: var(--ds-text-xs); font-weight: 700; }
.ds-product-summary__value { display: block; margin-top: .2rem; color: var(--ds-ink-950); font-size: var(--ds-text-2xl); font-weight: 800; line-height: 1.1; }
.ds-product-summary__cell--available .ds-product-summary__value { color: var(--ds-brand-700); font-size: 2.7rem; letter-spacing: -.06em; }
.ds-product-summary__hint { display: block; margin-top: .2rem; color: var(--ds-ink-600); font-size: .7rem; }
.ds-product-summary__cell--unavailable { color: var(--ds-danger-700); background: var(--ds-danger-100); border-color: var(--ds-danger-500); }
.ds-product-summary__cell--unavailable .ds-product-summary__value { color: var(--ds-danger-700); }

/* Status badges: never communicate with color only */
.ds-stock-status { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.8rem; padding: .25rem .55rem; border: 1px solid transparent; border-radius: var(--ds-radius-pill); font-size: .72rem; font-weight: 750; white-space: nowrap; }
.ds-stock-status__icon { width: .9rem; height: .9rem; flex: 0 0 auto; stroke-width: 2.1; }
.ds-stock-status--available { color: var(--ds-success-700); background: var(--ds-success-100); border-color: rgb(32 163 106 / .25); }
.ds-stock-status--low { color: var(--ds-warning-700); background: var(--ds-warning-100); border-color: rgb(237 170 46 / .35); }
.ds-stock-status--out { color: var(--ds-danger-700); background: var(--ds-danger-100); border-color: rgb(223 83 101 / .3); }
.ds-stock-status--reserved { color: var(--ds-violet-700); background: var(--ds-violet-100); border-color: rgb(148 113 212 / .3); }
.ds-stock-status--negative { color: var(--ds-danger-700); background: var(--ds-white); border: 1px dashed var(--ds-danger-500); }
.ds-stock-status--new { color: var(--ds-info-700); background: var(--ds-info-100); border-color: rgb(79 142 214 / .3); }
.ds-stock-status--restocked { color: var(--ds-brand-700); background: var(--ds-brand-100); border-color: rgb(54 181 173 / .35); }

/* Tables and mobile-friendly data rows */
.ds-table-wrap { overflow-x: auto; border: 1px solid var(--ds-ink-200); border-radius: var(--ds-radius-lg); background: var(--ds-white); }
.ds-table { width: 100%; border-collapse: collapse; min-width: 42rem; text-align: right; }
.ds-table th { padding: .8rem 1rem; color: var(--ds-ink-600); background: var(--ds-ink-50); border-bottom: 1px solid var(--ds-ink-200); font-size: var(--ds-text-xs); font-weight: 750; white-space: nowrap; }
.ds-table td { padding: .9rem 1rem; color: var(--ds-ink-800); border-bottom: 1px solid var(--ds-ink-100); font-size: var(--ds-text-sm); vertical-align: middle; }
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr { transition: background var(--ds-transition); }
.ds-table tbody tr:hover { background: var(--ds-brand-50); }
.ds-table__product { display: flex; align-items: center; gap: .65rem; min-width: 12rem; }
.ds-table__thumb { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; flex: 0 0 auto; color: var(--ds-ink-600); background: var(--ds-ink-100); border-radius: .55rem; }
.ds-table__product-name { color: var(--ds-ink-950); font-weight: 700; }
.ds-table__product-meta { display: block; color: var(--ds-ink-500); font-size: .72rem; }
.ds-table__actions { display: flex; justify-content: flex-start; gap: .35rem; }
.ds-data-card { display: none; }
.ds-pagination { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: 1rem; }

/* Forms */
.ds-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ds-field { display: grid; gap: .4rem; }
.ds-field--full { grid-column: 1 / -1; }
.ds-field__label { color: var(--ds-ink-800); font-size: var(--ds-text-sm); font-weight: 700; }
.ds-field__required { color: var(--ds-danger-700); }
.ds-field__control { width: 100%; min-height: 2.75rem; padding: .6rem .75rem; color: var(--ds-ink-900); background: var(--ds-white); border: 1px solid var(--ds-ink-300); border-radius: .65rem; transition: border var(--ds-transition), box-shadow var(--ds-transition); }
.ds-field__control:hover { border-color: var(--ds-ink-500); }
.ds-field__control:focus { border-color: var(--ds-brand-500); box-shadow: var(--ds-focus); outline: none; }
.ds-field__control:disabled { color: var(--ds-ink-500); background: var(--ds-ink-100); }
.ds-field__help { color: var(--ds-ink-600); font-size: .75rem; }
.ds-field__error { color: var(--ds-danger-700); font-size: .75rem; font-weight: 650; }
.ds-field--error .ds-field__control { border-color: var(--ds-danger-500); }
.ds-toggle { display: inline-flex; align-items: center; gap: .55rem; color: var(--ds-ink-800); font-size: var(--ds-text-sm); font-weight: 650; }
.ds-toggle__control { position: relative; width: 2.6rem; height: 1.5rem; appearance: none; background: var(--ds-ink-300); border-radius: var(--ds-radius-pill); transition: background var(--ds-transition); }
.ds-toggle__control::after { position: absolute; top: .2rem; right: .2rem; width: 1.1rem; height: 1.1rem; background: var(--ds-white); border-radius: 50%; content: ""; transition: transform var(--ds-transition); }
.ds-toggle__control:checked { background: var(--ds-brand-500); }
.ds-toggle__control:checked::after { transform: translateX(-1.1rem); }

/* Alerts, notifications, roles */
.ds-alert { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 1rem; border: 1px solid transparent; border-radius: .75rem; font-size: var(--ds-text-sm); }
.ds-alert--warning { color: var(--ds-warning-700); background: var(--ds-warning-100); border-color: rgb(237 170 46 / .35); }
.ds-alert--danger { color: var(--ds-danger-700); background: var(--ds-danger-100); border-color: rgb(223 83 101 / .3); }
.ds-alert--success { color: var(--ds-success-700); background: var(--ds-success-100); border-color: rgb(32 163 106 / .25); }
.ds-alert__icon { width: 1.2rem; flex: 0 0 auto; }
.ds-notification { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem; border-bottom: 1px solid var(--ds-ink-100); }
.ds-notification:last-child { border-bottom: 0; }
.ds-notification.is-unread { background: var(--ds-brand-50); }
.ds-notification__dot { width: .55rem; height: .55rem; margin-top: .45rem; flex: 0 0 auto; background: var(--ds-brand-500); border-radius: 50%; }
.ds-notification__title { color: var(--ds-ink-900); font-size: var(--ds-text-sm); font-weight: 750; }
.ds-notification__body { margin-top: .15rem; color: var(--ds-ink-600); font-size: var(--ds-text-sm); }
.ds-notification__time { display: block; margin-top: .35rem; color: var(--ds-ink-500); font-size: .72rem; }
.ds-role { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .55rem; color: var(--ds-info-700); background: var(--ds-info-100); border-radius: var(--ds-radius-pill); font-size: .72rem; font-weight: 700; }
.ds-permission-list { display: grid; gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-permission { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem; background: var(--ds-ink-50); border: 1px solid var(--ds-ink-200); border-radius: .65rem; }

/* Loading, empty, toast, utility */
.ds-skeleton { background: linear-gradient(90deg, var(--ds-ink-100) 25%, var(--ds-ink-50) 37%, var(--ds-ink-100) 63%); background-size: 400% 100%; border-radius: .4rem; animation: ds-shimmer 1.4s ease infinite; }
.ds-empty { display: grid; place-items: center; min-height: 15rem; padding: 2rem; color: var(--ds-ink-600); text-align: center; }
.ds-empty__icon { width: 2.5rem; margin-bottom: .75rem; color: var(--ds-ink-300); }
.ds-toast { position: fixed; z-index: 50; right: 1.25rem; bottom: 1.25rem; display: flex; align-items: center; gap: .65rem; max-width: min(24rem, calc(100vw - 2rem)); padding: .85rem 1rem; color: var(--ds-white); background: var(--ds-ink-900); border: 1px solid rgb(255 255 255 / .12); border-radius: .75rem; box-shadow: var(--ds-shadow-md); }
.ds-divider { height: 1px; margin-block: 1.25rem; background: var(--ds-ink-200); border: 0; }
.ds-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(1px, 1px, 1px, 1px) !important; white-space: nowrap !important; }

@keyframes ds-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Responsive: sidebar drawer, persistent search, no accidental horizontal overflow */
@media (max-width: 1024px) {
  .ds-sidebar { transform: translateX(100%); transition: transform 220ms ease; }
  .ds-sidebar.is-open { transform: translateX(0); }
  .ds-sidebar__close, .ds-sidebar-toggle { display: grid; place-items: center; }
  .ds-sidebar__close { position: absolute; top: 1rem; left: 1rem; width: 2.2rem; height: 2.2rem; color: var(--ds-ink-300); background: transparent; border: 0; }
  .ds-sidebar-toggle { width: 2.75rem; height: 2.75rem; color: var(--ds-ink-700); background: var(--ds-white); border: 1px solid var(--ds-ink-200); border-radius: .7rem; }
  .ds-main { margin-right: 0; }
  .ds-dashboard-grid__wide, .ds-dashboard-grid__side { grid-column: span 12; }
  .ds-header__inner { flex-wrap: wrap; }
  .ds-header .ds-search { order: 3; width: 100%; }
}

@media (max-width: 640px) {
  .ds-container { width: min(100% - 1.25rem, var(--ds-content-max)); }
  .ds-page { padding-block: 1rem 2rem; }
  .ds-header { min-height: 4rem; padding-block: .65rem; }
  .ds-page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 1rem; }
  .ds-page-heading__title { font-size: var(--ds-text-xl); }
  .ds-header__tools .ds-button { display: none; }
  .ds-card { padding: 1rem; border-radius: .85rem; }
  .ds-product-summary { grid-template-columns: 1fr 1fr; }
  .ds-product-summary__cell--available { grid-column: 1 / -1; grid-row: 1; }
  .ds-product-summary__cell--available .ds-product-summary__value { font-size: 2.4rem; }
  .ds-form-grid, .ds-permission-list { grid-template-columns: 1fr; }
  .ds-field--full { grid-column: auto; }
  .ds-table-wrap { overflow: visible; border: 0; background: transparent; }
  .ds-table { display: none; }
  .ds-data-card { display: grid; gap: .7rem; padding: .9rem; background: var(--ds-white); border: 1px solid var(--ds-ink-200); border-radius: .8rem; box-shadow: var(--ds-shadow-sm); }
  .ds-data-card + .ds-data-card { margin-top: .65rem; }
  .ds-data-card__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
  .ds-data-card__label { color: var(--ds-ink-600); font-size: .72rem; }
  .ds-data-card__value { color: var(--ds-ink-900); font-size: var(--ds-text-sm); font-weight: 700; text-align: left; }
  .ds-data-card__actions { display: flex; justify-content: stretch; gap: .5rem; padding-top: .45rem; border-top: 1px solid var(--ds-ink-100); }
  .ds-data-card__actions .ds-button { flex: 1; }
  .ds-pagination { align-items: stretch; flex-direction: column; }
  .ds-toast { right: .625rem; bottom: .625rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-app *, .ds-app *::before, .ds-app *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
  .ds-button, .ds-stock-status, .ds-field__control, .ds-nav-item { border: 1px solid ButtonText; }
}

/* ======================================================================
   Darak Stock V5.7.3 — compatibility layer for the production templates
   The design tokens above remain the source of truth. These selectors map
   the existing Flask/Jinja classes to the scoped .ds-* visual system.
   ====================================================================== */

.ds-app { margin: 0; background: var(--ds-ink-50); }
.ds-app .shell { min-height: 100vh; }
.ds-app .main.ds-main { margin-right: var(--ds-sidebar-width); background: var(--ds-ink-50); }
.ds-app .main.full { margin: 0; }
html[dir="ltr"] .ds-app .main.ds-main { margin-right: 0; margin-left: var(--ds-sidebar-width); }
html[dir="ltr"] .ds-app .main.full { margin-left: 0; }

/* Sidebar */
.ds-app .sidebar.ds-sidebar {
  width: var(--ds-sidebar-width);
  padding: 1.1rem .85rem;
  background: linear-gradient(180deg, #10233f 0%, #132a47 100%);
  box-shadow: -12px 0 34px rgb(16 35 63 / .10);
}
html[dir="ltr"] .ds-app .sidebar.ds-sidebar { left: 0; right: auto; }
.ds-app .brand-logo-wrap {
  min-height: 74px; padding: .65rem .75rem; background: #fff;
  border: 1px solid rgb(255 255 255 / .16); border-radius: .9rem;
  box-shadow: 0 12px 30px rgb(4 14 29 / .18);
}
.ds-app .brand-logo-wrap img { max-width: 184px; height: 54px; }
.ds-app .system-name { color: #9fb2c4; margin: .55rem 0 1.35rem; font-size: .68rem; }
.ds-app .nav.ds-sidebar__nav { gap: .25rem; }
.ds-app .nav-link.ds-nav-item {
  min-height: 2.85rem; padding: .65rem .75rem; color: #c5d0db;
  border-radius: .72rem; font-size: .82rem; border: 1px solid transparent;
}
.ds-app .nav-link.ds-nav-item:hover { color: #fff; background: rgb(255 255 255 / .075); transform: translateX(-2px); }
html[dir="ltr"] .ds-app .nav-link.ds-nav-item:hover { transform: translateX(2px); }
.ds-app .nav-link.ds-nav-item.active {
  color: #fff; background: linear-gradient(135deg, #075c65, #08747a);
  border-color: rgb(54 181 173 / .28); box-shadow: 0 8px 22px rgb(0 0 0 / .12);
}
.ds-app .nav-link .icon { width: 1.18rem; height: 1.18rem; stroke-width: 1.85; }
.ds-app .nav-badge { background: var(--ds-danger-500); color: #fff; }
.ds-app .sidebar-bottom { border-top-color: rgb(255 255 255 / .10); }
.ds-app .sidebar-language { color: #c5d0db; }
.ds-app .language-select.dark,
.ds-app .sidebar-language select { color: #edf2f6; background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .12); }
.ds-app .install-app { color: #dce4eb; border-color: rgb(255 255 255 / .12); background: rgb(255 255 255 / .05); }
.ds-app .avatar { background: var(--ds-brand-700); color: #fff; }
.ds-app .user-chip span { color: #9fb2c4; }
.ds-app .logout { display: flex; align-items: center; gap: .45rem; color: #c5d0db; }
.ds-app .logout:hover { color: #fff; }
.ds-app .logout .icon { width: 1rem; height: 1rem; }

/* Header / search */
.ds-app .topbar.ds-header {
  height: auto; min-height: 4.5rem; padding: .75rem 1.5rem;
  background: rgb(247 249 251 / .92); border-color: var(--ds-ink-200);
  box-shadow: 0 6px 18px rgb(16 35 63 / .035); backdrop-filter: blur(16px);
}
.ds-app .top-search { max-width: 46rem; }
.ds-app .global-search > input,
.ds-app .search-input-wrap > input {
  color: var(--ds-ink-900); background: #fff; border-color: var(--ds-ink-200);
  border-radius: .72rem; box-shadow: var(--ds-shadow-sm);
}
.ds-app .global-search > input:focus,
.ds-app .search-input-wrap > input:focus {
  border-color: var(--ds-brand-500); background: #fff; box-shadow: var(--ds-focus);
}
.ds-app .search-svg { color: var(--ds-ink-500); }
.ds-app .camera-search-inline { color: var(--ds-brand-700); background: var(--ds-brand-50); }
.ds-app .camera-search-inline:hover { background: var(--ds-brand-100); }
.ds-app .task-bell { color: var(--ds-ink-700); border-color: var(--ds-ink-200); border-radius: .7rem; }
.ds-app .task-bell.enabled { color: var(--ds-brand-700); }
.ds-app .oracle-live strong { color: var(--ds-ink-800); }
.ds-app .oracle-live span { color: var(--ds-ink-500); }
.ds-app .oracle-live.good .live-dot { background: var(--ds-success-500); box-shadow: 0 0 0 4px rgb(32 163 106 / .12); }
.ds-app .menu-btn.ds-sidebar-toggle { color: var(--ds-ink-700); }
.ds-app .menu-btn.ds-sidebar-toggle .icon { width: 1.2rem; height: 1.2rem; }

/* Main content */
.ds-app .content.ds-page { max-width: 1520px; padding: 1.5rem 1.75rem 3rem; }
.ds-app .eyebrow { color: var(--ds-brand-700); font-size: .68rem; font-weight: 700; }
.ds-app .page-head h1,
.ds-app .product-head h1,
.ds-app .hero h1 { color: var(--ds-ink-950); letter-spacing: -.04em; }
.ds-app .hero p,
.ds-app .page-head p { color: var(--ds-ink-600); }
.ds-app .modern-hero {
  align-items: center; min-height: 9.5rem; padding: 1.5rem 1.6rem;
  background:
    radial-gradient(circle at 12% 20%, rgb(54 181 173 / .10), transparent 28%),
    linear-gradient(135deg, #fff 0%, #f7fbfb 65%, #edf8f7 100%);
  border-color: #d7e5e8; box-shadow: var(--ds-shadow-sm);
}
.ds-app .modern-hero h1 { margin: .28rem 0 .35rem; font-size: clamp(1.65rem, 3vw, 2.2rem); }
.ds-app .modern-hero p { margin: 0; color: var(--ds-ink-600); }
.ds-app .permission-chip { color: var(--ds-ink-700); background: #fff; border-color: var(--ds-ink-200); }

/* Core cards */
.ds-app .panel,
.ds-app .metric-card,
.ds-app .result-card,
.ds-app .total-card,
.ds-app .planner-card,
.ds-app .form-panel,
.ds-app .table-panel,
.ds-app .barcode-card,
.ds-app .commercial-section,
.ds-app .push-settings-card,
.ds-app .explain-card,
.ds-app .hint-box {
  background: #fff; border-color: var(--ds-ink-200); border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
}
.ds-app .panel { padding: 1.25rem; }
.ds-app .panel-head h2 { color: var(--ds-ink-950); }
.ds-app .metric-card { min-height: 8.3rem; padding: 1.15rem; overflow: hidden; }
.ds-app .metric-card:hover { border-color: var(--ds-brand-400); box-shadow: var(--ds-shadow-md); }
.ds-app .metric-card span { color: var(--ds-ink-600); }
.ds-app .metric-card strong { color: var(--ds-ink-950); letter-spacing: -.05em; }
.ds-app .metric-icon { color: var(--ds-brand-700); background: var(--ds-brand-100); border-radius: .72rem; }
.ds-app .metric-card.warning .metric-icon { color: var(--ds-warning-700); background: var(--ds-warning-100); }
.ds-app .metric-card.danger .metric-icon { color: var(--ds-danger-700); background: var(--ds-danger-100); }
.ds-app .search-command { background: #fff; border-color: var(--ds-ink-200); }
.ds-app .search-methods span { color: var(--ds-brand-700); background: var(--ds-brand-50); border-color: var(--ds-brand-100); }
.ds-app .mini-row { border-color: var(--ds-ink-100); }
.ds-app .mini-row:hover { background: var(--ds-brand-50); }
.ds-app .state-icon.out { color: var(--ds-danger-700); background: var(--ds-danger-100); }
.ds-app .state-icon.new { color: var(--ds-info-700); background: var(--ds-info-100); }
.ds-app .state-icon.back { color: var(--ds-success-700); background: var(--ds-success-100); }

/* Buttons */
.ds-app .btn {
  min-height: 2.65rem; border-radius: .66rem; padding: .52rem .9rem;
  font-weight: 700; transition: var(--ds-transition);
}
.ds-app .btn.primary { color: #fff; background: var(--ds-brand-600); box-shadow: 0 5px 14px rgb(8 116 122 / .16); }
.ds-app .btn.primary:hover { background: var(--ds-brand-700); box-shadow: var(--ds-shadow-brand); }
.ds-app .btn.ghost { color: var(--ds-ink-800); background: #fff; border-color: var(--ds-ink-200); }
.ds-app .btn.ghost:hover { color: var(--ds-brand-700); background: var(--ds-brand-50); border-color: var(--ds-brand-400); }
.ds-app .btn.danger,
.ds-app .confirm-danger { color: var(--ds-danger-700); background: var(--ds-danger-100); }
.ds-app .btn.small { min-height: 2.2rem; }
.ds-app .btn.tiny { min-height: 1.95rem; }

/* Forms and data tables */
.ds-app .form-grid input,
.ds-app .form-grid select,
.ds-app .user-form-grid input,
.ds-app .user-form-grid select,
.ds-app .planner-form input,
.ds-app .period-filter select,
.ds-app .period-filter input {
  color: var(--ds-ink-900); background: #fff; border-color: var(--ds-ink-300);
  border-radius: .65rem; transition: border var(--ds-transition), box-shadow var(--ds-transition);
}
.ds-app .form-grid input:focus,
.ds-app .form-grid select:focus,
.ds-app .planner-form input:focus { border-color: var(--ds-brand-500); box-shadow: var(--ds-focus); outline: none; }
.ds-app .data-table { color: var(--ds-ink-800); background: #fff; }
.ds-app .data-table th { color: var(--ds-ink-600); background: var(--ds-ink-50); border-color: var(--ds-ink-200); }
.ds-app .data-table td { border-color: var(--ds-ink-100); }
.ds-app .data-table tbody tr:hover { background: var(--ds-brand-50); }
.ds-app .count-pill,
.ds-app .tag { color: var(--ds-brand-700); background: var(--ds-brand-100); }
.ds-app .status-tag.on { color: var(--ds-success-700); background: var(--ds-success-100); }
.ds-app .status-tag.off { color: var(--ds-danger-700); background: var(--ds-danger-100); }
.ds-app .status-tag.pending { color: var(--ds-warning-700); background: var(--ds-warning-100); }

/* Product / commercial */
.ds-app .product-code { color: var(--ds-brand-700); background: var(--ds-brand-50); border-color: var(--ds-brand-100); }
.ds-app .product-meta { color: var(--ds-ink-600); }
.ds-app .barcode-card { background: linear-gradient(135deg, #f0fbf9, #fff); border-color: #cde9e5; }
.ds-app .barcode-card strong { color: var(--ds-brand-700); }
.ds-app .commercial-grid { gap: .8rem; }
.ds-app .price-card { border-color: var(--ds-ink-200); background: #fff; box-shadow: var(--ds-shadow-sm); }
.ds-app .price-card:before { background: var(--ds-brand-500); }
.ds-app .price-card.retail:before { background: var(--ds-success-500); }
.ds-app .price-card.wholesale:before { background: var(--ds-info-500); }
.ds-app .price-card.cost:before { background: var(--ds-warning-500); }
.ds-app .price-card.supplier-price:before { background: var(--ds-violet-500); }
.ds-app .price-card.supplier:before { background: var(--ds-ink-600); }

/* Top stock summary */
.ds-app .modern-product-summary { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr); gap: 1rem; align-items: stretch; }
.ds-app .stock-summary-overview { height: 100%; }
.ds-app .reserved-cell { background: #faf8ff; border-color: #ddd3f7; }
.ds-app .reserved-cell .ds-product-summary__value { color: var(--ds-violet-700); }
.ds-app .planner-card { min-height: 100%; }
.ds-app .commercial-warning { border-radius: .75rem; color: var(--ds-warning-700); background: var(--ds-warning-100); border: 1px solid rgb(237 170 46 / .35); }

/* Warehouse real availability */
.ds-app .stock-formula { margin: .25rem 0 0; color: var(--ds-ink-500); font-size: .72rem; }
.ds-app .warehouse-group-card { overflow: hidden; background: #fff; border-color: var(--ds-ink-200); border-radius: .9rem; }
.ds-app .warehouse-group-head { padding: .8rem .9rem; background: var(--ds-ink-50); border-color: var(--ds-ink-200); }
.ds-app .group-total span { color: var(--ds-ink-500); }
.ds-app .group-total strong { color: var(--ds-brand-700); font-size: 1.3rem; }
.ds-app .warehouse-clean-list { padding: .15rem .85rem; }
.ds-app .warehouse-clean-row.modern-warehouse-row {
  grid-template-columns: minmax(0, 1fr) 9.2rem; gap: 1rem; min-height: 7.25rem;
  padding: .85rem 0; border-color: var(--ds-ink-100);
}
.ds-app .warehouse-state { width: 2rem; height: 2rem; border-radius: .62rem; }
.ds-app .warehouse-state.available { color: var(--ds-success-700); background: var(--ds-success-100); }
.ds-app .warehouse-state.low { color: var(--ds-warning-700); background: var(--ds-warning-100); }
.ds-app .warehouse-state.out,
.ds-app .warehouse-state.empty { color: var(--ds-danger-700); background: var(--ds-danger-100); }
.ds-app .warehouse-state.negative { color: var(--ds-danger-700); background: #fff; border: 1px dashed var(--ds-danger-500); }
.ds-app .warehouse-title { flex-wrap: wrap; }
.ds-app .warehouse-title strong { color: var(--ds-ink-900); font-size: .82rem; }
.ds-app .warehouse-code { color: var(--ds-ink-500); }
.ds-app .best-pill { color: var(--ds-brand-700); background: var(--ds-brand-100); }
.ds-app .warehouse-clean-row .bar { background: var(--ds-ink-100); }
.ds-app .warehouse-clean-row .bar i { background: linear-gradient(90deg, var(--ds-brand-400), var(--ds-brand-600)); }
.ds-app .warehouse-availability-block {
  display: grid; align-content: center; justify-items: center; min-height: 5.4rem;
  padding: .65rem .7rem; background: var(--ds-brand-50); border: 1px solid var(--ds-brand-100); border-radius: .78rem;
}
.ds-app .warehouse-available-label { color: var(--ds-brand-700); font-size: .67rem; font-weight: 750; }
.ds-app .warehouse-available-value { margin-top: .05rem; color: var(--ds-brand-700); font-size: 2.25rem; line-height: 1; font-weight: 800; letter-spacing: -.06em; }
.ds-app .warehouse-qty-meta { display: flex; align-items: center; justify-content: center; gap: .48rem; margin-top: .45rem; color: var(--ds-ink-500); font-size: .62rem; white-space: nowrap; }
.ds-app .warehouse-qty-meta b { color: var(--ds-ink-700); }
.ds-app .warehouse-qty-meta .has-reserved { color: var(--ds-violet-700); }
.ds-app .warehouse-qty-meta .has-reserved b { color: var(--ds-violet-700); }
.ds-app .warehouse-availability-block.low { background: var(--ds-warning-100); border-color: rgb(237 170 46 / .35); }
.ds-app .warehouse-availability-block.low .warehouse-available-label,
.ds-app .warehouse-availability-block.low .warehouse-available-value { color: var(--ds-warning-700); }
.ds-app .warehouse-availability-block.out { background: var(--ds-danger-100); border-color: rgb(223 83 101 / .30); }
.ds-app .warehouse-availability-block.out .warehouse-available-label,
.ds-app .warehouse-availability-block.out .warehouse-available-value { color: var(--ds-danger-700); }
.ds-app .warehouse-availability-block.negative { background: #fff; border: 1px dashed var(--ds-danger-500); }
.ds-app .warehouse-availability-block.negative .warehouse-available-label,
.ds-app .warehouse-availability-block.negative .warehouse-available-value { color: var(--ds-danger-700); }
.ds-app .ds-stock-status--reserved { color: var(--ds-violet-700); background: var(--ds-violet-100); border-color: rgb(148 113 212 / .30); }
.ds-app .modern-availability-panel .availability-primary { margin: -.15rem -.15rem .25rem; padding: 1rem .85rem; background: var(--ds-brand-50); border: 1px solid var(--ds-brand-100); border-radius: .75rem; }
.ds-app .modern-availability-panel .availability-primary span,
.ds-app .modern-availability-panel .availability-primary strong { color: var(--ds-brand-700); }
.ds-app .modern-availability-panel .availability-primary strong { font-size: 1.8rem; }

/* Recommendations */
.ds-app .recommendation { border-radius: var(--ds-radius-lg); border-color: var(--ds-ink-200); box-shadow: var(--ds-shadow-sm); }
.ds-app .recommendation.single { background: var(--ds-success-100); }
.ds-app .recommendation.multi { background: var(--ds-info-100); }
.ds-app .recommendation.short { background: var(--ds-danger-100); }

/* Login */
.ds-app .login-content { padding: 0; }
.ds-app .login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem;
  background:
    radial-gradient(circle at 18% 18%, rgb(54 181 173 / .18), transparent 30%),
    radial-gradient(circle at 85% 80%, rgb(79 142 214 / .10), transparent 28%),
    linear-gradient(145deg, #0e2039 0%, #10233f 46%, #f7f9fb 46.2%, #f7f9fb 100%);
}
.ds-app .modern-login-card {
  width: min(100%, 28rem); margin: 0; padding: 1.75rem; background: rgb(255 255 255 / .97);
  border: 1px solid var(--ds-ink-200); border-radius: 1.15rem; box-shadow: 0 28px 80px rgb(16 35 63 / .24);
}
.ds-app .login-logo { background: #fff; border-color: var(--ds-ink-200); }
.ds-app .login-copy h2 { color: var(--ds-ink-950); }
.ds-app .login-copy p,
.ds-app .secure-note { color: var(--ds-ink-600); }
.ds-app .login-card .stack input { color: var(--ds-ink-900); background: #fff; border-color: var(--ds-ink-300); }
.ds-app .login-card .stack input:focus { border-color: var(--ds-brand-500); box-shadow: var(--ds-focus); outline: none; }
.ds-app .login-language { background: rgb(255 255 255 / .96); border-color: var(--ds-ink-200); }

/* Footer */
.ds-app .darak-footer { color: var(--ds-ink-500); background: transparent; border-top-color: var(--ds-ink-200); }

/* Flash / alerts */
.ds-app .flash.success { color: var(--ds-success-700); background: var(--ds-success-100); }
.ds-app .flash.error,
.ds-app .error-panel { color: var(--ds-danger-700); background: var(--ds-danger-100); border-color: rgb(223 83 101 / .28); }

@media (max-width: 1024px) {
  .ds-app .sidebar.ds-sidebar { transform: translateX(105%); }
  .ds-app .sidebar.ds-sidebar.open,
  .ds-app .sidebar.ds-sidebar.is-open { transform: translateX(0); }
  html[dir="ltr"] .ds-app .sidebar.ds-sidebar { transform: translateX(-105%); }
  html[dir="ltr"] .ds-app .sidebar.ds-sidebar.open,
  html[dir="ltr"] .ds-app .sidebar.ds-sidebar.is-open { transform: translateX(0); }
  .ds-app .main.ds-main,
  html[dir="ltr"] .ds-app .main.ds-main { margin: 0; }
  .ds-app .modern-product-summary { grid-template-columns: 1fr; }
  .ds-app .topbar.ds-header { padding-inline: .8rem; }
}

@media (max-width: 640px) {
  .ds-app .content.ds-page { padding: 1rem .7rem 2rem; }
  .ds-app .modern-hero { align-items: flex-start; padding: 1.1rem; }
  .ds-app .modern-hero .hero-tools { width: 100%; justify-content: flex-start; }
  .ds-app .metrics-grid.five { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ds-app .metric-card { min-height: 7.2rem; }
  .ds-app .warehouse-groups { grid-template-columns: 1fr; }
  .ds-app .warehouse-clean-row.modern-warehouse-row { grid-template-columns: 1fr; gap: .6rem; }
  .ds-app .warehouse-availability-block { width: 100%; grid-template-columns: auto 1fr; justify-items: start; column-gap: .65rem; }
  .ds-app .warehouse-available-label { align-self: end; }
  .ds-app .warehouse-available-value { grid-row: span 2; font-size: 2rem; }
  .ds-app .warehouse-qty-meta { justify-content: flex-start; margin-top: .1rem; }
  .ds-app .stock-summary-overview { grid-template-columns: 1fr 1fr; }
  .ds-app .stock-summary-overview .ds-product-summary__cell--available { grid-column: 1 / -1; grid-row: 1; }
  .ds-app .login-wrap { background: linear-gradient(160deg, #10233f 0%, #183354 43%, #f7f9fb 43.2%, #f7f9fb 100%); }
}


/* ============================================================
   V5.7.3.1 — Mobile sidebar click hotfix
   Keep the drawer above the backdrop on mobile.
   ============================================================ */
@media (max-width: 820px) {
  .ds-app .sidebar-backdrop.show {
    z-index: 120 !important;
    pointer-events: auto !important;
  }

  .ds-app .sidebar.ds-sidebar,
  .ds-app .sidebar.ds-sidebar.open,
  .ds-app .sidebar.ds-sidebar.is-open {
    z-index: 140 !important;
  }

  .ds-app .sidebar.ds-sidebar.open,
  .ds-app .sidebar.ds-sidebar.is-open {
    pointer-events: auto !important;
    visibility: visible !important;
  }

  .ds-app .sidebar.ds-sidebar .nav-link,
  .ds-app .sidebar.ds-sidebar .logout,
  .ds-app .sidebar.ds-sidebar button,
  .ds-app .sidebar.ds-sidebar select {
    position: relative;
    z-index: 1;
    pointer-events: auto !important;
  }
}