/* =============================================================================
   site_dashboard.css
   Complete standalone CSS for the site dashboard.
   Mirrors store_dashboard.css + receive_stock.css + new_sale.css exactly.
   All store classes (kpi-card, rs-*, ns-*, data-table etc.) are replicated
   here under the sd- namespace so sites and stores are fully independent.
   =============================================================================

   TABLE OF CONTENTS
   1.  CSS Variables
   2.  Layout — dashboard shell, sidebar, content
   3.  Typography helpers
   4.  KPI Cards
   5.  Quick Actions
   6.  Dashboard Cards & Tables
   7.  Status pills & badges
   8.  Store/site meta card
   9.  Settings grid
   10. Empty states
   11. Section header row
   12. Activity-specific styles (expandable rows, pro chips)
   13. Modal overlay system  (sd-modal-*)
   14. Three-column browse  (sd-browse-*)
   15. Product rows         (sd-product-*)
   16. Selected items panel (sd-item-*)
   17. Confirm modal        (sd-confirm-*)
   18. New order steps      (sd-step-*)
   19. Buttons              (sd-btn-*)
   20. Utility
   21. Responsive
   ============================================================================= */


/* ─────────────────────────────────────────────────────────────────────────────
   1. CSS VARIABLES
   ───────────────────────────────────────────────────────────────────────────── */

.site-dashboard,
.sd-modal-overlay,
.sd-confirm-overlay {
  --sd-bg:           inherit;
  --sd-surface:      rgba(17, 25, 40, 0.19);
  --sd-surface-2:    rgba(17, 25, 40, 0.29);
  --sd-border:       rgba(255, 255, 255, 0.125);
  --sd-border-solid: #e2e0d8;
  --sd-text:         var(--text, #1a1a1a);
  --sd-text-muted:   #7a7870;

  --sd-primary:      #1a4d2e;
  --sd-primary-lt:   #e8f3ec;
  --sd-accent:       #c8511b;
  --sd-warning:      #d97706;
  --sd-warning-lt:   #fef3c7;
  --sd-danger:       #b91c1c;
  --sd-danger-lt:    #fee2e2;
  --sd-success:      #15803d;
  --sd-success-lt:   #dcfce7;
  --sd-info:         #1d4ed8;
  --sd-info-lt:      #dbeafe;

  --sd-radius-sm:    4px;
  --sd-radius-md:    8px;
  --sd-radius-lg:    12px;
  --sd-shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
  --sd-shadow-md:    0 4px 12px rgba(0,0,0,0.10);

  --sd-font-body:    'DM Sans', 'EpundaSans-Variable', system-ui, sans-serif;
  --sd-font-mono:    'DM Mono', monospace;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. LAYOUT — DASHBOARD SHELL, SIDEBAR, CONTENT
   Mirrors the .professions-container + .sidebar + .content pattern
   ───────────────────────────────────────────────────────────────────────────── */

.site-dashboard {
  display: flex;
  gap: 0;
  min-height: 100vh;
  font-family: var(--sd-font-body);
  color: var(--sd-text);
  background: var(--sd-bg);
}

/* Sidebar — identical rules to stores sidebar */
.site-dashboard .sidebar {
  width: 220px;
  flex-shrink: 0;
  backdrop-filter: blur(1px) saturate(72%);
  -webkit-backdrop-filter: blur(1px) saturate(72%);
  background-color: var(--sd-surface-2);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100vh;
  border-right: 1px solid var(--sd-border);
}

.site-dashboard .sidebar h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  color: var(--major-link, #0096FF);
  font-family: 'Quantico-Regular', var(--sd-font-body);
}

.site-dashboard .sidebar small {
  font-size: 0.8rem;
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.site-dashboard .sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.site-dashboard .sidebar ul li a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--sd-radius-sm);
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  background: transparent;
  margin: 0;
}

.site-dashboard .sidebar ul li a:hover,
.site-dashboard .sidebar ul li a.active {
  background: var(--sd-surface);
  color: var(--major-link, #0096FF);
}

/* Content area */
.site-dashboard .content {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  max-width: 1100px;
}

/* Section wrapper — matches dashboard-section in store */
.sd-section,
.site-dashboard .dashboard-section,
.site-dashboard .dashboard-overview {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Section heading */
.sd-section-heading,
.site-dashboard .section-heading {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--sd-text);
  margin: 0 0 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Quantico-Regular', var(--sd-font-body);
}

/* Section header row — header + action button side by side */
.sd-header-row,
.site-dashboard .section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. TYPOGRAPHY HELPERS
   ───────────────────────────────────────────────────────────────────────────── */

.site-dashboard .text-right  { text-align: right; }
.site-dashboard .text-muted  { color: var(--sd-text-muted); font-size: 0.82rem; }
.site-dashboard .font-bold   { font-weight: 700; }
.site-dashboard .mt-2        { margin-top: 0.5rem; }
.site-dashboard .mt-4        { margin-top: 1.25rem; }


/* ─────────────────────────────────────────────────────────────────────────────
   4. KPI CARDS
   Mirrors kpi-card, kpi-strip, kpi-label, kpi-value, kpi-meta, kpi-link
   ───────────────────────────────────────────────────────────────────────────── */

.site-dashboard .kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.75rem;
}

.site-dashboard .kpi-strip--4 {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.site-dashboard .kpi-card {
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-md);
  padding: 1rem;
  box-shadow: var(--sd-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  backdrop-filter: blur(1px) saturate(72%);
  -webkit-backdrop-filter: blur(1px) saturate(72%);
}

.site-dashboard .kpi-card--alert   { border-color: var(--sd-danger);  background: var(--sd-danger-lt); }
.site-dashboard .kpi-card--warning { border-color: var(--sd-warning); background: var(--sd-warning-lt); }
.site-dashboard .kpi-card--positive { border-color: var(--sd-success); background: var(--sd-success-lt); }
.site-dashboard .kpi-card--wide    { grid-column: 1 / -1; }

.site-dashboard .kpi-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sd-text-muted);
}

.site-dashboard .kpi-value {
  font-family: var(--sd-font-mono);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--major-link, #0096FF);
  line-height: 1.2;
}

.site-dashboard .kpi-value--large { font-size: 1.8rem; }

.site-dashboard .kpi-meta {
  font-size: 0.78rem;
  color: var(--sd-text-muted);
  margin-top: 0.1rem;
}

.site-dashboard .kpi-link {
  font-size: 0.78rem;
  color: var(--sd-primary);
  font-weight: 600;
  text-decoration: none;
}
.site-dashboard .kpi-link:hover { text-decoration: underline; }


/* ─────────────────────────────────────────────────────────────────────────────
   5. QUICK ACTIONS
   Mirrors quick-actions, action-grid, action-btn, action-icon
   ───────────────────────────────────────────────────────────────────────────── */

.site-dashboard .quick-actions {
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg);
  padding: 1rem;
  box-shadow: var(--sd-shadow-sm);
  backdrop-filter: blur(1px) saturate(72%);
  -webkit-backdrop-filter: blur(1px) saturate(72%);
}

.site-dashboard .section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--sd-text-muted);
  margin: 0 0 0.75rem;
}

.site-dashboard .action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.6rem;
}

.site-dashboard .action-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--sd-border-solid);
  border-radius: var(--sd-radius-md);
  background: var(--sd-surface);
  font-family: var(--sd-font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sd-text);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  text-align: left;
  min-height: 60px;
  text-decoration: none;
}

.site-dashboard .action-btn:hover:not(:disabled) {
  border-color: var(--sd-primary);
  box-shadow: 0 0 0 2px var(--sd-primary-lt);
  background: inherit;
  color: var(--sd-text);
}

.site-dashboard .action-btn--primary {
  border-color: var(--sd-primary);
  color: var(--sd-primary);
}

.site-dashboard .action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.site-dashboard .action-icon {
  font-size: 1rem;
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. DASHBOARD CARDS & TABLES
   Mirrors dashboard-card, card-header, table-wrapper, data-table
   ───────────────────────────────────────────────────────────────────────────── */

.site-dashboard .dashboard-card {
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg);
  box-shadow: var(--sd-shadow-sm);
  overflow: hidden;
  backdrop-filter: blur(1px) saturate(72%);
  -webkit-backdrop-filter: blur(1px) saturate(72%);
}

.site-dashboard .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--sd-border);
  background: rgba(17, 25, 40, 0.08);
}

.site-dashboard .card-header h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
  color: var(--sd-text);
  font-family: 'Quantico-Regular', var(--sd-font-body);
}

.site-dashboard .table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.site-dashboard .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}

.site-dashboard .data-table thead tr {
  background: rgba(17, 25, 40, 0.06);
  border-bottom: 2px solid var(--sd-border);
}

.site-dashboard .data-table th {
  padding: 0.6rem 0.875rem;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sd-text-muted);
  white-space: nowrap;
}

.site-dashboard .data-table td {
  padding: 0.65rem 0.875rem;
  border-bottom: 1px solid var(--sd-border);
  vertical-align: middle;
  color: var(--sd-text);
}

.site-dashboard .data-table tbody tr:last-child td { border-bottom: none; }
.site-dashboard .data-table tbody tr:hover          { background: rgba(17,25,40,0.06); }

.site-dashboard .data-table .product-name {
  font-weight: 600;
  font-size: 0.85rem;
}

/* Highlight rows — mirrors row-critical / row-warning */
.site-dashboard .row-critical td { background: var(--sd-danger-lt)  !important; }
.site-dashboard .row-warning  td { background: var(--sd-warning-lt) !important; }

/* Table total footer */
.site-dashboard .sd-table-total td {
  font-weight: 700;
  background: rgba(17, 25, 40, 0.06);
  border-top: 2px solid var(--sd-border-solid);
  padding: 0.75rem 0.875rem;
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. STATUS PILLS & BADGES
   Mirrors status-pill, badge — using sd- prefix
   ───────────────────────────────────────────────────────────────────────────── */

/* Generic pill */
.site-dashboard .status-pill {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.site-dashboard .status-pill--status-ok  { background: var(--sd-success-lt); color: var(--sd-success); }
.site-dashboard .status-pill--status-low { background: var(--sd-warning-lt); color: var(--sd-warning); }
.site-dashboard .status-pill--status-out { background: var(--sd-danger-lt);  color: var(--sd-danger);  }

/* Rounded badge */
.site-dashboard .badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2em 0.55em;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.site-dashboard .badge-danger  { background: var(--sd-danger-lt);  color: var(--sd-danger);  }
.site-dashboard .badge-warning { background: var(--sd-warning-lt); color: var(--sd-warning); }
.site-dashboard .badge-success { background: var(--sd-success-lt); color: var(--sd-success); }
.site-dashboard .badge-info    { background: var(--sd-info-lt);    color: var(--sd-info);    }
.site-dashboard .badge-muted   { background: var(--sd-border-solid); color: var(--sd-text-muted); }


/* ─────────────────────────────────────────────────────────────────────────────
   8. SITE META CARD
   Mirrors store-meta-card, store-meta-row, meta-label
   ───────────────────────────────────────────────────────────────────────────── */

.site-dashboard .store-meta-card {
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg);
  padding: 1rem 1.25rem;
  box-shadow: var(--sd-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  backdrop-filter: blur(1px) saturate(72%);
  -webkit-backdrop-filter: blur(1px) saturate(72%);
}

.site-dashboard .store-meta-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--sd-border);
}
.site-dashboard .store-meta-row:last-child { border-bottom: none; }

.site-dashboard .meta-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sd-text-muted);
  min-width: 90px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   9. SETTINGS GRID
   Mirrors settings-grid, setting-row, setting-label
   ───────────────────────────────────────────────────────────────────────────── */

.site-dashboard .settings-grid {
  padding: 0.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.site-dashboard .setting-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--sd-border);
  font-size: 0.875rem;
}
.site-dashboard .setting-row:last-child { border-bottom: none; }

.site-dashboard .setting-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sd-text-muted);
  min-width: 120px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   10. EMPTY STATES
   Mirrors empty-state, empty-icon
   ───────────────────────────────────────────────────────────────────────────── */

.site-dashboard .empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--sd-text-muted);
  font-size: 0.875rem;
}

.site-dashboard .empty-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}

.site-dashboard .text-muted { color: var(--sd-text-muted); }


/* ─────────────────────────────────────────────────────────────────────────────
   11. SECTION HEADER ROW
   ───────────────────────────────────────────────────────────────────────────── */

.site-dashboard .section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}


/* ─────────────────────────────────────────────────────────────────────────────
   12. ACTIVITY-SPECIFIC STYLES
   Expandable rows, professional chips, attendance detail panel
   ───────────────────────────────────────────────────────────────────────────── */

/* Expandable detail row inner padding */
.site-activity-detail__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1rem 1.25rem 1.25rem;
}

@media (max-width: 700px) {
  .site-activity-detail__inner { grid-template-columns: 1fr; }
}

.site-activity-detail__panel {
  background: rgba(17, 25, 40, 0.06);
  border-radius: var(--sd-radius-md);
  padding: 0.875rem 1rem;
}

.site-activity-caret {
  color: var(--sd-text-muted);
  font-size: 0.85rem;
  transition: transform 0.2s;
  display: inline-block;
}


/* ─────────────────────────────────────────────────────────────────────────────
   13. MODAL OVERLAY SYSTEM
   Mirrors rs-overlay, rs-modal, rs-modal-header, rs-modal-body,
   rs-close-btn, rs-actions, rs-actions--confirm, rs-btn-*
   All prefixed sd- to avoid collision with store styles.
   ───────────────────────────────────────────────────────────────────────────── */

.sd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.sd-overlay[hidden] { display: none !important; }

.sd-modal {
  background: var(--sd-bg);
  border-radius: var(--sd-radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sd-border);
}

.sd-modal--confirm { max-width: 620px; }

.sd-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 2px solid var(--sd-border-solid);
  background: rgba(17, 25, 40, 0.06);
  flex-shrink: 0;
}

.sd-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--major-link, #0096FF);
  font-family: 'Quantico-Regular', var(--sd-font-body);
}

.sd-close-btn {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--sd-text-muted);
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.15s;
}
.sd-close-btn:hover { color: var(--sd-danger); background: none; }

.sd-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Action bars */
.sd-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 0.25rem;
}

.sd-actions--confirm {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--sd-border-solid);
  background: rgba(17, 25, 40, 0.04);
}

/* Buttons inside modals */
.sd-btn {
  padding: 0.6rem 1.25rem;
  border-radius: var(--sd-radius-md);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  font-family: 'Quantico-Regular', var(--sd-font-body);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.sd-btn--primary {
  background: var(--major-link, #0096FF);
  color: #fff;
}
.sd-btn--primary:hover { opacity: 0.88; color: #fff; }
.sd-btn--primary:disabled {
  background: var(--sd-border-solid);
  color: var(--sd-text-muted);
  cursor: not-allowed;
}

.sd-btn--secondary {
  background: transparent;
  border: 1.5px solid var(--sd-border-solid);
  color: var(--sd-text);
}
.sd-btn--secondary:hover { border-color: var(--sd-text); background: transparent; }

.sd-btn--confirm {
  background: var(--sd-success);
  color: #fff;
  font-size: 0.9rem;
}
.sd-btn--confirm:hover { opacity: 0.88; }

.sd-btn--sm { padding: 0.35rem 0.75rem; font-size: 0.78rem; }


/* ─────────────────────────────────────────────────────────────────────────────
   14. THREE-COLUMN BROWSE
   Mirrors rs-browse, rs-browse-col, rs-col-header,
   rs-category-list, rs-cat-btn, rs-sub-btn, rs-cat-group etc.
   ───────────────────────────────────────────────────────────────────────────── */

.sd-browse {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--sd-border-solid);
  border-radius: var(--sd-radius-md);
  overflow: hidden;
}

.sd-browse-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--sd-border-solid);
}
.sd-browse-col:last-child { border-right: none; }

.sd-col-header {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--sd-text-muted);
  padding: 0.6rem 0.875rem;
  background: rgba(17,25,40,0.04);
  border-bottom: 1px solid var(--sd-border-solid);
  flex-shrink: 0;
}

/* Categories column */
.sd-category-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sd-cat-group { display: flex; flex-direction: column; }

.sd-cat-btn,
.sd-sub-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-radius: var(--sd-radius-sm);
  border: none;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--sd-text);
  cursor: pointer;
  transition: background 0.12s;
  margin: 0;
}
.sd-cat-btn:hover,
.sd-sub-btn:hover { background: rgba(0,150,255,0.08); }

.sd-cat-btn.sd-active,
.sd-sub-btn.sd-active {
  background: rgba(0,150,255,0.12);
  color: var(--major-link, #0096FF);
  font-weight: 700;
}

.sd-cat-all {
  font-weight: 600;
  border-bottom: 1px solid var(--sd-border-solid);
  border-radius: 0;
  margin-bottom: 0.35rem;
  padding-bottom: 0.55rem;
}

.sd-sub-group {
  padding-left: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sd-sub-btn {
  font-size: 0.73rem;
  padding: 0.35rem 0.5rem;
  color: var(--sd-text-muted);
}
.sd-sub-btn.sd-active { color: var(--major-link, #0096FF); }

.sd-count {
  font-size: 0.65rem;
  background: var(--sd-border-solid);
  color: var(--sd-text-muted);
  padding: 0.1em 0.45em;
  border-radius: 999px;
  font-weight: 700;
  flex-shrink: 0;
  margin-left: 0.35rem;
}


/* ─────────────────────────────────────────────────────────────────────────────
   15. PRODUCT ROWS
   Mirrors rs-product-row, rs-product-info, rs-product-name,
   rs-product-meta, rs-product-foot, rs-product-stock,
   rs-add-btn, rs-added, rs-kebs-badge, rs-in-store-badge
   ───────────────────────────────────────────────────────────────────────────── */

/* Product list column */
.sd-product-list {
  flex: 1;
  overflow-y: auto;
}

.sd-product-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.65rem 0.875rem;
  border-bottom: 1px solid var(--sd-border-solid);
  gap: 0.75rem;
  transition: background 0.1s;
}
.sd-product-row:last-child { border-bottom: none; }
.sd-product-row:hover      { background: rgba(0,150,255,0.04); }
.sd-product-row.sd-selected { background: rgba(0,179,104,0.05); }

.sd-product-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.sd-product-name {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--sd-text);
}

.sd-product-meta {
  font-size: 0.7rem;
  color: var(--sd-text-muted);
}

.sd-product-foot {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.sd-product-stock {
  font-size: 0.7rem;
  color: var(--sd-text-muted);
}

.sd-kebs-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.1em 0.4em;
  border-radius: 999px;
  background: rgba(0,179,104,0.1);
  color: var(--sd-success);
  border: 1px solid rgba(0,179,104,0.25);
}

.sd-local-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.1em 0.4em;
  border-radius: 999px;
  background: rgba(0,150,255,0.1);
  color: var(--major-link, #0096FF);
  border: 1px solid rgba(0,150,255,0.25);
}

/* Add button */
.sd-add-btn {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: var(--sd-radius-sm);
  border: 1.5px solid var(--major-link, #0096FF);
  background: transparent;
  color: var(--major-link, #0096FF);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;
}
.sd-add-btn:hover:not(:disabled) {
  background: var(--major-link, #0096FF);
  color: #fff;
}
.sd-add-btn.sd-added {
  border-color: var(--sd-success);
  color: var(--sd-success);
  cursor: default;
}


/* ─────────────────────────────────────────────────────────────────────────────
   16. SELECTED ITEMS PANEL
   Mirrors rs-selected-items, rs-item-row, rs-item-header, rs-item-controls,
   rs-item-label, rs-input, rs-input-wrap, rs-unit, rs-item-subtotal,
   rs-subtotal-label, rs-subtotal-value, rs-remove-btn, rs-total-bar,
   rs-field, rs-field--notes, rs-meta-strip
   ───────────────────────────────────────────────────────────────────────────── */

.sd-items-col {
  background: rgba(17,25,40,0.02);
  padding: 0;
}

.sd-selected-items {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sd-item-row {
  background: var(--sd-bg);
  border: 1px solid var(--sd-border-solid);
  border-radius: var(--sd-radius-md);
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sd-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.sd-item-name {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
}

.sd-item-brand {
  font-size: 0.68rem;
  color: var(--sd-text-muted);
  font-weight: 400;
  margin-left: 0.3rem;
}

.sd-item-controls {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.sd-item-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sd-text-muted);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.sd-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.sd-input {
  padding: 0.3rem 0.45rem;
  border: 1.5px solid var(--sd-border-solid);
  border-radius: var(--sd-radius-sm);
  font-size: 0.78rem;
  width: 72px;
  background: var(--sd-bg);
  color: var(--sd-text);
  margin: 0;
  font-family: var(--sd-font-mono);
}
.sd-input--wide { width: 84px; }
.sd-input--full { width: 100%; }

.sd-input:focus {
  outline: none;
  border-color: var(--major-link, #0096FF);
}

textarea.sd-input {
  width: 100%;
  resize: vertical;
  font-family: var(--sd-font-body);
}

.sd-unit {
  font-size: 0.65rem;
  color: var(--sd-text-muted);
}

.sd-item-subtotal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
}

.sd-subtotal-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sd-text-muted);
  font-weight: 700;
}

.sd-subtotal-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--major-link, #0096FF);
  font-family: var(--sd-font-mono);
}

.sd-remove-btn {
  background: none;
  border: none;
  color: var(--sd-text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.1rem 0.2rem;
  line-height: 1;
  flex-shrink: 0;
  margin: 0;
  transition: color 0.12s;
}
.sd-remove-btn:hover { color: var(--sd-danger); background: none; }

/* Total bar */
.sd-total-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.875rem;
  background: rgba(0,150,255,0.06);
  border-top: 1px solid rgba(0,150,255,0.15);
  border-bottom: 1px solid rgba(0,150,255,0.15);
  font-size: 0.83rem;
  font-weight: 600;
  flex-shrink: 0;
}

.sd-total-bar strong {
  font-family: var(--sd-font-mono);
  font-size: 1rem;
  color: var(--major-link, #0096FF);
}

/* Meta strip — form fields row above the browse area */
.sd-meta-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--sd-border-solid);
}

/* Individual field */
.sd-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.sd-field label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sd-text-muted);
}

.sd-field input,
.sd-field textarea,
.sd-field select {
  padding: 0.5rem 0.7rem;
  border: 1.5px solid var(--sd-border-solid);
  border-radius: var(--sd-radius-sm);
  font-size: 0.875rem;
  background: var(--sd-bg);
  color: var(--sd-text);
  transition: border-color 0.15s;
  font-family: var(--sd-font-body);
  margin: 0;
}

.sd-field input:focus,
.sd-field textarea:focus {
  outline: none;
  border-color: var(--major-link, #0096FF);
  box-shadow: 0 0 0 2px rgba(0,150,255,0.15);
}

.sd-field--notes {
  padding: 0.5rem 0.75rem 0;
  flex-shrink: 0;
}

.sd-field--notes label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sd-text-muted);
  display: block;
  margin-bottom: 0.3rem;
}


/* ─────────────────────────────────────────────────────────────────────────────
   17. CONFIRM MODAL CONTENT
   Mirrors rs-confirm-meta, rs-confirm-table, rs-confirm-warning, rs-detail-list
   ───────────────────────────────────────────────────────────────────────────── */

.sd-confirm-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--sd-border-solid);
  margin-bottom: 0.75rem;
}

.sd-confirm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 1rem;
}

.sd-confirm-table th {
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sd-text-muted);
  background: rgba(17,25,40,0.04);
  border-bottom: 2px solid var(--sd-border-solid);
}

.sd-confirm-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--sd-border-solid);
}

.sd-confirm-warning {
  font-size: 0.78rem;
  color: var(--sd-warning);
  background: var(--sd-warning-lt);
  padding: 0.6rem 0.875rem;
  border-radius: var(--sd-radius-sm);
  border: 1px solid var(--sd-warning);
}

.sd-detail-list {
  margin: 0.5rem 0 0.25rem 1rem;
  font-size: 0.75rem;
  color: var(--sd-text-muted);
}

/* Empty / hint */
.sd-empty {
  padding: 1rem;
  text-align: center;
  color: var(--sd-text-muted);
  font-size: 0.83rem;
}
.sd-hint  { color: var(--sd-text-muted); font-style: italic; }
.sd-error { color: var(--sd-danger); }


/* ─────────────────────────────────────────────────────────────────────────────
   18. NEW ORDER STEPS
   Mirrors ns-steps, ns-step-dot, ns-step-line, ns-step-title,
   ns-step-actions, ns-header-left, ns-modal
   ───────────────────────────────────────────────────────────────────────────── */

.sd-modal--wide { max-width: 960px; }
.sd-modal-body--tall { min-height: 420px; }

.sd-header-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.sd-steps {
  display: flex;
  align-items: center;
  gap: 0;
}

.sd-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sd-border-solid);
  border: 2px solid var(--sd-border-solid);
  transition: all 0.2s;
  flex-shrink: 0;
}
.sd-step-dot--active {
  background: var(--major-link, #0096FF);
  border-color: var(--major-link, #0096FF);
  box-shadow: 0 0 0 3px rgba(0,150,255,0.2);
}
.sd-step-dot--completed {
  background: var(--sd-success);
  border-color: var(--sd-success);
}

.sd-step-line {
  width: 24px;
  height: 2px;
  background: var(--sd-border-solid);
}

.sd-step-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 1rem;
}

.sd-step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sd-border-solid);
  margin-top: 0.5rem;
}


/* ─────────────────────────────────────────────────────────────────────────────
   19. UTILITY BUTTON — standalone (outside .site-dashboard scope)
   For the open-receive-material and open-new-order trigger buttons
   which may appear in overview cards outside the dashboard wrapper.
   ───────────────────────────────────────────────────────────────────────────── */

.sd-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--sd-radius-md);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  font-family: 'Quantico-Regular', var(--sd-font-body);
  text-decoration: none;
  background: var(--major-link, #0096FF);
  color: #fff;
}
.sd-trigger-btn:hover { opacity: 0.88; color: #fff; }


/* ─────────────────────────────────────────────────────────────────────────────
   20. UTILITY — no-scroll body lock (shared)
   ───────────────────────────────────────────────────────────────────────────── */

body.no-scroll { overflow: hidden; }


/* ─────────────────────────────────────────────────────────────────────────────
   21. RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 830px) {

  /* Sidebar collapses to top strip — mirrors zmobile.css store behaviour */
  .site-dashboard {
    flex-direction: column;
  }

  .site-dashboard .sidebar {
    width: 100%;
    min-height: unset;
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0.3rem 0.5rem;
    flex-direction: row;
    align-items: center;
    gap: 0;
    border-right: none;
    border-bottom: 1px solid var(--sd-border);
  }

  .site-dashboard .sidebar h2,
  .site-dashboard .sidebar small { display: none; }

  .site-dashboard .sidebar ul {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 0.25rem;
    width: 100%;
  }

  .site-dashboard .sidebar ul::-webkit-scrollbar { display: none; }

  .site-dashboard .sidebar ul li a {
    white-space: nowrap;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    margin: 0.25rem 0;
  }

  .site-dashboard .content {
    padding: 1rem;
  }

  .site-dashboard .kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-dashboard .action-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Modal browse — stack columns */
  .sd-browse {
    grid-template-columns: 1fr;
  }

  .sd-browse-col {
    border-right: none;
    border-bottom: 1px solid var(--sd-border-solid);
  }
  .sd-browse-col:last-child { border-bottom: none; }

  .sd-category-list,
  .sd-product-list,
  .sd-selected-items { max-height: 200px; }

  .sd-meta-strip { grid-template-columns: 1fr; }

  .site-activity-detail__inner { grid-template-columns: 1fr; }
}