/* ==========================================================================
   Component Library — consumes tokens from tokens.css via @layer tokens
   Design: Linear / Vercel / Stripe — minimal, dense, premium SaaS
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--font-size-base); text-size-adjust: 100%; }
body {
  margin: 0; padding: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { appearance: none; cursor: pointer; border: none; background: none; padding: 0; }
input, select, textarea { appearance: none; }
img, svg { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }

body[data-bg-pattern="solid"] { background: var(--color-bg); }
body[data-bg-pattern="mesh"]  { background: var(--color-bg); }
body[data-bg-pattern="grid"]  { background: var(--color-bg); }
body.auth-body { background: var(--color-bg-soft); }

/* ─────────────────────────────────────────────────────────────────────────
   TOP BAR — dark slate, no gradients (Linear-style)
───────────────────────────────────────────────────────────────────────── */
.app-topbar {
  height: 52px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  color: var(--topbar-text);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.topbar-main {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--topbar-text);
  opacity: 0.92;
  transition: opacity var(--transition-fast);
}
.brand-link:hover { opacity: 1; }
.brand-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--topbar-text);
}
.burger {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid oklch(1 0 0 / 0.12);
  background: oklch(1 0 0 / 0.06);
  color: var(--topbar-text);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-md);
  transition: background var(--transition-fast);
}
.burger:hover { background: oklch(1 0 0 / 0.10); }
.top-nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}
.top-nav-link {
  color: var(--topbar-text-muted);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.top-nav-link:hover { background: var(--topbar-nav-hover); color: var(--topbar-text); }
.top-nav-link.active { background: var(--topbar-nav-active); color: var(--topbar-text); }
.topbar-right { flex: 0 0 auto; }
.topbar-user { text-align: right; display: flex; flex-direction: column; gap: 1px; }
.topbar-user strong { font-size: var(--font-size-xs); color: var(--topbar-text); }
.topbar-user span   { font-size: var(--font-size-2xs); color: var(--topbar-text-muted); }
.motivation-pill,
.summary-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
.motivation-pill {
  background: oklch(1 0 0 / 0.08);
  color: var(--topbar-text-muted);
  border: 1px solid oklch(1 0 0 / 0.10);
}
.summary-pill {
  background: var(--color-bg-soft);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

/* ─────────────────────────────────────────────────────────────────────────
   MAIN LAYOUT
───────────────────────────────────────────────────────────────────────── */
.main-content {
  flex: 1;
  min-width: 0;
  padding: var(--space-4) var(--space-5) var(--space-8);
}
.main-content-full { width: 100%; }
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 var(--space-4);
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
}
.page-header h1,
.section-title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

/* ─────────────────────────────────────────────────────────────────────────
   CARDS
───────────────────────────────────────────────────────────────────────── */
.card,
.auth-card,
.stat-card,
.delivery-box {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card,
.auth-card,
.stat-card,
.delivery-box { padding: var(--space-4); }
.card + .card { margin-top: var(--space-3); }

/* ─────────────────────────────────────────────────────────────────────────
   GRID SYSTEM
───────────────────────────────────────────────────────────────────────── */
.grid   { display: grid; gap: var(--space-3); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.compact-grid { gap: var(--space-2); }
.compact-form .field label { margin-bottom: 2px; }

/* ─────────────────────────────────────────────────────────────────────────
   FORM FIELDS
───────────────────────────────────────────────────────────────────────── */
.field { display: grid; gap: 5px; }
.field label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.field input,
.field select,
.field textarea,
.request-table input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--field-border, var(--color-border-strong));
  border-radius: var(--radius-md);
  padding: 7px 10px;
  background: var(--field-bg, var(--color-bg-elevated));
  color: var(--color-text);
  font-size: var(--font-size-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field textarea { min-height: 80px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus,
.request-table input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--color-text-subtle); }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.checkbox-field { align-content: end; }
.checkbox-grid  { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checkbox-label {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-text);
  font-size: var(--font-size-base);
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--color-primary); cursor: pointer; }

/* ─────────────────────────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────────────────────────── */
.btn,
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 7px 13px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: background var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast), opacity var(--transition-fast);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.btn:hover  { background: var(--color-primary-hover); }
.btn:active { background: var(--color-primary-active); }
.btn:focus  { outline: none; box-shadow: var(--focus-ring); }
.btn-outline {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn-outline:hover { background: var(--color-bg-soft); border-color: var(--color-border-strong); color: var(--color-text); }
.btn-secondary {
  background: var(--color-bg-soft);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-bg-subtle); color: var(--color-text); border-color: var(--color-border-strong); }
.btn-success { background: var(--color-success); }
.btn-success:hover { background: var(--color-success-hover); }
.btn-danger,
.icon-btn-danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border-color: var(--color-danger-soft-hover);
}
.btn-danger:hover,
.icon-btn-danger:hover { background: var(--color-danger-soft-hover); }
.btn-small { padding: 5px 9px; font-size: var(--font-size-xs); }
.icon-btn {
  width: 30px; height: 30px; padding: 0;
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
.icon-btn:hover { background: var(--color-bg-soft); color: var(--color-text); border-color: var(--color-border-strong); }
.btn:disabled,
.btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ─────────────────────────────────────────────────────────────────────────
   TOOLBAR
───────────────────────────────────────────────────────────────────────── */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.toolbar-tight          { margin-bottom: var(--space-2); }
.toolbar-actions-spread { justify-content: flex-start; }
.compact-actions        { gap: var(--space-2); }

/* Bulk actions toolbar */
.bulk-actions-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}
.bulk-selected-count {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.bulk-actions-buttons {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}
.bulk-actions-buttons .btn {
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────
   DETAILS / SUMMARY
───────────────────────────────────────────────────────────────────────── */
.filter-panel summary,
.detail-box summary,
.order-card summary { cursor: pointer; list-style: none; font-weight: var(--font-weight-medium); }
.filter-panel summary::-webkit-details-marker,
.detail-box summary::-webkit-details-marker,
.order-card summary::-webkit-details-marker { display: none; }
.detail-box {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
}
.detail-box-content { margin-top: var(--space-3); }

/* ─────────────────────────────────────────────────────────────────────────
   TABLES
───────────────────────────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.data-table th,
.data-table td {
  padding: 9px var(--space-3);
  border-bottom: 3px solid oklch(1 0 0);
  text-align: left;
  vertical-align: top;
  min-width: 0;
}
.data-table th {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  background: var(--color-bg-soft);
  white-space: nowrap;
}
.data-table tbody tr { border-bottom: 1px solid #e5e7eb; padding-top: 5px; padding-bottom: 5px; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--color-bg-hover); }
.fit { width: 1%; white-space: nowrap; }
.table-wrap { overflow: auto; }
.data-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-table td input,
.data-table td select,
.data-table td a,
.data-table td details, .data-table td label { white-space: normal; }
.data-table td label.checkbox-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.data-table td label.checkbox-label input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--color-primary); cursor: pointer; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }

/* Ensure checkboxes in table are visible and clickable */
.data-table th.fit input[type="checkbox"],
.data-table td.fit input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
  display: inline-block !important;
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
}
.data-table th.fit,
.data-table td.fit {
  overflow: visible;
  padding: 9px var(--space-2);
}
.item-table td:first-child { white-space: normal; min-width: 200px; }
.item-table td { overflow: visible; }
.data-table td.dropdown-cell { overflow: visible; position: relative; text-align: right; }
.item-table td input,
.item-table td select { max-width: 100%; }
.row-details       { background: var(--color-bg-soft); }
.row-details-inner { display: grid; gap: var(--space-3); }
.table-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* ─────────────────────────────────────────────────────────────────────────
   CARD LIST (mobile)
───────────────────────────────────────────────────────────────────────── */
.card-list { display: none; gap: var(--space-3); }
.order-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  padding: var(--space-3);
}
.order-card summary { display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; }
.order-card-body { display: grid; gap: var(--space-2); padding-top: var(--space-3); }
.order-card.status-neutral { background: #f0f4f8; border-left-color: #8fa3b8; }
.order-card.status-amber   { background: #fdf6e3; border-left-color: #d4a843; }
.order-card.status-blue    { background: #e8f0fa; border-left-color: #5a8ec6; }
.order-card.status-green   { background: #e8f5e9; border-left-color: #4a9e6e; }
.order-card.status-red     { background: #fceae8; border-left-color: #c45a52; }
.order-card.status-purple  { background: #ede8f5; border-left-color: #8e7cc3; }

/* ─────────────────────────────────────────────────────────────────────────
   BADGES
───────────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}
.badge-neutral { background: #e8ecf1; color: #4a5568; }
.badge-amber   { background: #d4a843; color: #ffffff; }
.badge-blue    { background: #2c5282; color: #ffffff; }
.badge-green   { background: #1a7a3e; color: #ffffff; }
.badge-red     { background: #fceae8; color: #8b2e2e; }
.badge-purple  { background: #5b21b6; color: #ffffff; }

/* ─────────────────────────────────────────────────────────────────────────
   CHIPS
───────────────────────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

/* ─────────────────────────────────────────────────────────────────────────
   ALERTS
───────────────────────────────────────────────────────────────────────── */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  border: 1px solid transparent;
  font-size: var(--font-size-base);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.alert-success { background: var(--color-success-soft); border-color: var(--color-success-soft-hover); color: var(--color-success); }
.alert-danger  { background: var(--color-danger-soft);  border-color: var(--color-danger-soft-hover);  color: var(--color-danger); }
.alert-warning { background: var(--color-warning-soft); border-color: var(--color-warning-soft-hover); color: var(--color-warning); }
.alert-info    { background: var(--color-info-soft);    border-color: var(--color-primary-soft-hover);  color: var(--color-primary-dark); }

/* ─────────────────────────────────────────────────────────────────────────
   UTILITIES
───────────────────────────────────────────────────────────────────────── */
.help, .muted, .small-text { color: var(--color-text-muted); }
.small-text  { font-size: var(--font-size-xs); }
.date-short  { white-space: nowrap; font-weight: var(--font-weight-medium); }
.link-inline { color: var(--color-text-link); }
.link-inline:hover { text-decoration: underline; color: var(--color-text-link-hover); }
.w-100       { width: 100%; }
.is-hidden   { display: none !important; }
.inline-form { display: inline; }
.empty-state {
  padding: var(--space-10) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
  font-size: var(--font-size-base);
}

/* ─────────────────────────────────────────────────────────────────────────
   STATS
───────────────────────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.stat-card .label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-1);
}
.stat-card .value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

/* ─────────────────────────────────────────────────────────────────────────
   ADMIN GRID
───────────────────────────────────────────────────────────────────────── */
.admin-grid .card-span-2 { grid-column: span 2; }
.admin-grid .card-span-3 { grid-column: span 3; }

/* ─────────────────────────────────────────────────────────────────────────
   QUICK FILTERS
───────────────────────────────────────────────────────────────────────── */
.quick-filters { gap: var(--space-2); }
.quick-filters .btn.active {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border-color: oklch(0.568 0.178 258 / 0.25);
}

/* ─────────────────────────────────────────────────────────────────────────
    STATUS ROW VARIANTS — modern semantic palette
 ───────────────────────────────────────────────────────────────────────── */
.status-row { transition: background var(--transition-base); border-left: 3px solid transparent; }
.status-row.status-neutral { background: #f0f4f8; border-left-color: #8fa3b8; }
.status-row.status-amber   { background: #fdf6e3; border-left-color: #d4a843; }
.status-row.status-blue    { background: #e8f0fa; border-left-color: #5a8ec6; }
.status-row.status-green   { background: #e8f5e9; border-left-color: #4a9e6e; }
.status-row.status-red     { background: #fceae8; border-left-color: #c45a52; }
.status-row.status-purple  { background: #ede8f5; border-left-color: #8e7cc3; }
.status-row:hover td { background: transparent !important; }

/* ─────────────────────────────────────────────────────────────────────────
   REQUEST TOTALS CARD
───────────────────────────────────────────────────────────────────────── */
.request-totals-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  min-width: 200px;
}

/* ─────────────────────────────────────────────────────────────────────────
   COMPACT ORDER CARD
───────────────────────────────────────────────────────────────────────── */
.compact-order-card    { padding: var(--space-3); border-radius: var(--radius-lg); }
.compact-order-head    { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.compact-order-grid    { display: grid; gap: var(--space-2); }
.compact-order-actions { margin-top: var(--space-3); }

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE ORDER STYLES
───────────────────────────────────────────────────────────────────────── */
.mobile-filter-toggle { display: none; }
.orders-title-meta    { margin: -2px 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.contact-links {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px; height: 26px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.contact-icon:hover {
  background: var(--color-primary-soft);
  border-color: oklch(0.568 0.178 258 / 0.25);
  color: var(--color-primary-dark);
}

/* ─────────────────────────────────────────────────────────────────────────
   STATUS DROPDOWN
───────────────────────────────────────────────────────────────────────── */
.status-dropdown         { position: relative; display: inline-block; }
.status-dropdown summary { list-style: none; cursor: pointer; }
.status-dropdown summary::-webkit-details-marker { display: none; }
.status-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-dropdown);
  display: grid;
  gap: var(--space-1);
  min-width: 170px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-lg);
}
.status-option {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  padding: 6px 10px;
  text-align: left;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.status-option.active,
.status-option:hover { background: var(--color-bg-soft); color: var(--color-text); }
.order-status-trigger { cursor: pointer; }

/* ─────────────────────────────────────────────────────────────────────────
   PAYMENT PILL
───────────────────────────────────────────────────────────────────────── */.payment-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
.payment-pill.filled {
  background: var(--color-success-soft);
  color: var(--color-success);
  border-color: var(--color-success-soft-hover);
}
.payment-pill.belpost-pill,
.payment-pill.belpost-pill.filled {
  background: oklch(0.568 0.178 258);
  color: #fff;
  border-color: oklch(0.568 0.178 258 / 0.6);
}
.delivery-dropdown-menu .status-option[value="belpost"],
.delivery-dropdown-menu .status-option[value="belpost"].active,
.delivery-dropdown-menu .status-option[value="belpost"]:hover {
  background: oklch(0.568 0.178 258);
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────
   ORDER TABLE SPECIFICS
───────────────────────────────────────────────────────────────────────── */
.history-row td { padding-top: 0 !important; padding-bottom: var(--space-3) !important; border-top: 0; }
.order-row-actions { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-start; white-space: nowrap; }
.compact-products-list { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.order-table td { padding-top: var(--space-2); padding-bottom: var(--space-2); vertical-align: top; }

/* Inline delivery date editing */
.delivery-date-cell { position: relative; }
.editable-date { transition: background var(--transition-fast); border-radius: var(--radius-sm); padding: 2px 4px; }
.editable-date:hover { background: var(--row-hover); cursor: pointer; }
.editable-date:hover .date-display { text-decoration: underline; text-decoration-color: var(--color-primary); text-underline-offset: 2px; }
.date-input { font-family: inherit; }
.date-display { display: inline-block; }
.order-table th.order-client-col,
.order-table td.order-client-col { width: 220px; min-width: 220px; max-width: 220px; }
.order-table td.order-client-col { word-break: break-word; }
.order-table th.order-phone-col,
.order-table td.order-phone-col { width: 140px; min-width: 140px; }
.order-table td.order-phone-col .contact-links { flex-wrap: nowrap; white-space: nowrap; }
.history-panel {
  padding: var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
  opacity: 0.75;
}
.history-panel-title { font-weight: var(--font-weight-medium); margin-bottom: var(--space-3); font-size: var(--font-size-sm); }
.history-list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.history-chip {
  display: grid;
  gap: var(--space-1);
  min-width: 150px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  opacity: 0.75;
  font-size: var(--font-size-xs);
}
.history-chip.current {
  opacity: 1;
  border-color: oklch(0.568 0.178 258 / 0.30);
  background: var(--color-primary-soft);
}
.mobile-order-details summary { list-style: none; }
.mobile-order-details summary::-webkit-details-marker { display: none; }
.mobile-order-summary { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center; }
.mobile-order-number  { font-weight: var(--font-weight-semibold); }
.mobile-order-product { font-weight: var(--font-weight-medium); }
.mobile-order-body    { padding-top: var(--space-3); }
.mobile-product-line  { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-bg-soft); border: 1px solid var(--color-border); }
.mobile-history-panel { margin-top: var(--space-3); }
.compact-products-list,
.mobile-products-list { font-size: var(--font-size-xs); }

/* ─────────────────────────────────────────────────────────────────────────
   QUICK STATUS DROPDOWN
───────────────────────────────────────────────────────────────────────── */
.quick-status-dropdown { position: relative; }
.quick-status-dropdown summary { list-style: none; cursor: pointer; }
.quick-status-dropdown summary::-webkit-details-marker { display: none; }
.quick-filter-btn { display: inline-flex; align-items: center; gap: var(--space-2); }
.quick-status-menu {
  position: absolute;
  top: calc(100% + 6px);
  z-index: var(--z-dropdown);
  display: grid;
  gap: var(--space-1);
  min-width: 180px;
  padding: var(--space-2);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.status-dropdown { position: relative; }
.status-dropdown[open] .status-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  z-index: var(--z-dropdown);
}
.status-dropdown-right { position: relative; }
.status-dropdown-menu-right { right: 0; left: auto; }
.status-dropdown-topmost,
.status-dropdown-menu-topmost { z-index: 9999; right: 0; left: auto; }

/* ─────────────────────────────────────────────────────────────────────────
   MODAL
───────────────────────────────────────────────────────────────────────── */
.modal-shell { position: fixed; inset: 0; z-index: var(--z-modal-backdrop); display: none; }
.modal-shell.is-visible { display: block; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0.118 0.010 250 / 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal-card {
  position: relative;
  z-index: 1;
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  margin: var(--space-6) auto;
  padding: var(--space-5);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-2xl);
}
.modal-card-medium { width: min(760px, calc(100vw - 24px)); }
body.modal-open { overflow: hidden; }

/* ─────────────────────────────────────────────────────────────────────────
   COMPACT MATERIALS
───────────────────────────────────────────────────────────────────────── */
.compact-materials summary { cursor: pointer; font-weight: var(--font-weight-medium); }
.compact-materials .chips  { margin-top: var(--space-2); }
.materials-chip-wrap       { gap: var(--space-1); }

/* ─────────────────────────────────────────────────────────────────────────
   PROJECTS
───────────────────────────────────────────────────────────────────────── */
.projects-grid { display: grid; gap: var(--space-3); }
.project-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.project-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.project-card-head { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: start; }
.project-progress-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-md);
}
.project-card-main        { display: grid; gap: var(--space-1); }
.project-card-category    { font-weight: var(--font-weight-semibold); font-size: var(--font-size-md); }
.project-card-description { font-size: var(--font-size-base); color: var(--color-text-secondary); }
.project-card-side        { display: grid; gap: var(--space-2); justify-items: end; }
.project-progress-bar,
.metric-bar { height: 6px; border-radius: var(--radius-full); background: var(--color-bg-subtle); overflow: hidden; }
.project-progress-bar span,
.metric-bar span { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); }
.metric-bar-secondary span { background: var(--color-success); }
.overdue-row { background: color-mix(in srgb, var(--color-danger-soft) 50%, var(--color-bg-elevated)); }
.income-bars { display: grid; gap: var(--space-3); }
.income-bar-card { padding: var(--space-3); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-bg-elevated); }
.metric-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin: var(--space-2) 0 var(--space-1); }
.address-link { word-break: break-word; }

/* ─────────────────────────────────────────────────────────────────────────
   CUSTOMERS TABLE
───────────────────────────────────────────────────────────────────────── */
.customers-table-tight th,
.customers-table-tight td { padding-top: 6px; padding-bottom: 6px; }
.compact-icon-actions { flex-wrap: nowrap; }
.customer-history-list { display: grid; gap: var(--space-3); }
.compact-history-order { padding: var(--space-2) var(--space-3); }
.history-order-head {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
}
.history-order-id,
.history-order-date,
.history-order-sum { white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────────────────
   PROJECT STATUS
───────────────────────────────────────────────────────────────────────── */
.project-status-side        { align-items: flex-end; }
.project-status-actions     { display: flex; align-items: center; gap: var(--space-2); }
.project-task-summary-row   { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; }
.project-task-inline-list   { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }

/* ─────────────────────────────────────────────────────────────────────────
   ORDER FORM
───────────────────────────────────────────────────────────────────────── */
.order-form-card { max-width: 100%; overflow: hidden; }
.order-form-card form { overflow: hidden; }
.order-form-card .grid { max-width: 100%; }
.order-form-card .field input,
.order-form-card .field select,
.order-form-card .field textarea { max-width: 100%; min-width: 0; }
.item-table { width: 100%; table-layout: fixed; }
.item-table td,
.item-table th { overflow: hidden; vertical-align: top; padding: var(--space-2) var(--space-1); }
.item-table td:first-child { width: 30%; white-space: normal; word-wrap: break-word; }
.item-table td select,
.item-table td input[type="text"],
.item-table td input[type="number"] { width: 100%; max-width: 100%; box-sizing: border-box; }
.item-table td select { margin-bottom: var(--space-1); }
.item-table .properties-grid { grid-template-columns: repeat(2, 1fr); }
.nested-card { overflow: hidden; max-width: 100%; }
.nested-card .table-wrap { overflow-x: auto; max-width: 100%; }

/* ─────────────────────────────────────────────────────────────────────────
   REQUISITES BLOCK
───────────────────────────────────────────────────────────────────────── */
.requisites-block {
  display: grid;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  max-width: 100%;
  overflow: hidden;
}
.requisites-block.grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.requisites-block.is-hidden { display: none; }
.requisites-block .field { min-width: 0; }
.requisites-block .field input { width: 100%; max-width: 100%; box-sizing: border-box; }
.requisites-block .field[style*="grid-column: span 2"] { grid-column: span 2; }

/* ─────────────────────────────────────────────────────────────────────────
   STOCK INDICATORS
───────────────────────────────────────────────────────────────────────── */
.stock-indicator { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); vertical-align: middle; }
.stock-icon { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.stock-available   { background-color: var(--color-success); box-shadow: 0 0 0 2px oklch(0.568 0.158 152 / 0.18); }
.stock-unavailable { background-color: var(--color-danger);  box-shadow: 0 0 0 2px oklch(0.598 0.192 22  / 0.18); }
.stock-partial     { background-color: var(--color-warning); box-shadow: 0 0 0 2px oklch(0.688 0.172 82  / 0.18); }
.stock-negative    { background-color: var(--color-danger); box-shadow: 0 0 0 2px oklch(0.598 0.192 22 / 0.18); animation: pulse-danger 1.5s infinite; }
.stock-info        { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-left: var(--space-1); }
.order-table .stock-cell { width: 80px; text-align: center; }
.order-table .stock-cell .stock-indicator { justify-content: center; }


@keyframes pulse-danger {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ─────────────────────────────────────────────────────────────────────────
   WAREHOUSE SELECT GROUP
───────────────────────────────────────────────────────────────────────── */
.warehouse-select-group { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.warehouse-option {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-soft);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.warehouse-option:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.warehouse-option.selected { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: 0 0 0 2px oklch(0.568 0.178 258 / 0.12); }
.warehouse-stock { margin-left: auto; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.warehouse-stock.available   { color: var(--color-success); font-weight: var(--font-weight-medium); }
.warehouse-stock.unavailable { color: var(--color-danger); }

/* ─────────────────────────────────────────────────────────────────────────
   COMPOSITE DETAILS ACCORDION
───────────────────────────────────────────────────────────────────────── */
.composite-details-row td { padding: 0 !important; border-top: none !important; }
.composite-details-content { padding: var(--space-3); background: var(--color-bg-soft); border-top: 1px solid var(--color-border); }
.composite-details-table { overflow-x: auto; }
.composite-details-table table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.composite-details-table th,
.composite-details-table td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border); }
.composite-details-table th {
  background: var(--color-bg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.composite-details-stock.available   { color: var(--color-success); background: oklch(0.568 0.158 152 / 0.08); border-color: oklch(0.568 0.158 152 / 0.25); }
.composite-details-stock.unavailable { color: var(--color-danger);  background: oklch(0.598 0.192 22  / 0.08); border-color: oklch(0.598 0.192 22  / 0.25); }

/* ─────────────────────────────────────────────────────────────────────────
   WAREHOUSE DETAILS DROPDOWN
───────────────────────────────────────────────────────────────────────── */
.warehouse-details {
  position: absolute;
  top: 100%; left: 0;
  min-width: 300px; max-width: 460px;
  z-index: 100;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  margin-top: var(--space-1);
  max-height: 280px;
  overflow-y: auto;
  white-space: normal;
}
.stock-cell { position: relative; overflow: visible; }
.item-table td.stock-cell { overflow: visible; }
.warehouse-details-table { overflow-x: auto; }
.warehouse-details-table table { width: 100%; border-collapse: collapse; font-size: var(--font-size-xs); }
.warehouse-details-table th,
.warehouse-details-table td { padding: var(--space-1) var(--space-2); text-align: left; border-bottom: 1px solid var(--color-border); }
.warehouse-details-table th {
  background: var(--color-bg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.warehouse-details-table tr.in-stock td     { background: oklch(0.568 0.158 152 / 0.04); }
.warehouse-details-table tr.out-of-stock td { background: oklch(0.598 0.192 22  / 0.04); }
.warehouse-details-table .status-badge { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.warehouse-details-table .status-badge.in-stock     { background: oklch(0.568 0.158 152 / 0.10); color: var(--color-success); }
.warehouse-details-table .status-badge.out-of-stock { background: oklch(0.598 0.192 22  / 0.10); color: var(--color-danger); }
.stock-cell .expand-warehouses {
  margin-left: var(--space-1);
  padding: 2px 4px;
  font-size: var(--font-size-xs);
  line-height: 1;
  color: var(--color-text-muted);
  border-radius: var(--radius-xs);
  transition: all var(--transition-fast);
}
.stock-cell .expand-warehouses:hover { background: var(--color-bg-soft); color: var(--color-primary); }
.warehouse-badge {
  display: inline-block;
  padding: 2px 6px;
  margin: 2px 2px 2px 0;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-xs);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.warehouse-badge.available   { background: oklch(0.568 0.158 152 / 0.08); border-color: oklch(0.568 0.158 152 / 0.25); color: var(--color-success); }
.warehouse-badge.unavailable { background: oklch(0.598 0.192 22  / 0.08); border-color: oklch(0.598 0.192 22  / 0.25); color: var(--color-danger); }
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
.status-badge.in-stock     { background: oklch(0.568 0.158 152 / 0.10); color: var(--color-success); }
.status-badge.out-of-stock { background: oklch(0.598 0.192 22  / 0.10); color: var(--color-danger); }
.expand-composite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-left: var(--space-1);
}
.expand-composite:hover { background: var(--color-primary-soft); border-color: oklch(0.568 0.178 258 / 0.30); color: var(--color-primary); }
.loading-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ─────────────────────────────────────────────────────────────────────────
   FILTER PANEL DROPDOWN
───────────────────────────────────────────────────────────────────────── */
.filter-panel-dropdown { list-style: none; }
.filter-panel-dropdown summary {
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  list-style-type: none;
  position: relative;
  padding-left: 0;
}
.filter-panel-dropdown summary::-webkit-details-marker { display: none !important; }
.filter-panel-dropdown summary::-moz-list-marker       { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
   SORT ACTIONS
───────────────────────────────────────────────────────────────────────── */
.sort-actions { display: inline-flex; gap: var(--space-1); }
.compact-details { margin-top: var(--space-2); }
.compact-details summary { cursor: pointer; color: var(--color-text-link); font-size: var(--font-size-sm); }

/* ─────────────────────────────────────────────────────────────────────────
   ORDER ITEMS PREVIEW
───────────────────────────────────────────────────────────────────────── */
.order-items-preview-list { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.order-item-line {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
}
.inline-status-form select { min-width: 140px; }
.order-table td { vertical-align: top; }
.products-stack { display: grid; gap: var(--space-1); margin-top: var(--space-1); }
.order-status-badge { margin-bottom: var(--space-3); }

/* ─────────────────────────────────────────────────────────────────────────
   CUSTOMER AUTOCOMPLETE
───────────────────────────────────────────────────────────────────────── */
.customer-phone-row { display: flex; align-items: center; gap: var(--space-2); }
.customer-phone-row input { flex: 1 1 auto; }
.customer-autocomplete-list {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-3);
  max-height: 240px;
  overflow: auto;
}
.customer-autocomplete-option {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.customer-autocomplete-option:hover { background: var(--color-primary-soft); border-color: oklch(0.568 0.178 258 / 0.25); }
.customer-autocomplete-option strong { font-size: var(--font-size-sm); }
.customer-autocomplete-option small  { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.customer-lookup-card .actions { justify-content: flex-end; }

/* ─────────────────────────────────────────────────────────────────────────
   AUTH PAGE
───────────────────────────────────────────────────────────────────────── */
.login-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.login-brand {
  background: var(--topbar-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  color: var(--topbar-text);
}
.login-form-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background: var(--color-bg);
}
.auth-card { max-width: 400px; width: 100%; }

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-table td:first-child { width: 25%; }
  .item-table .properties-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .burger { display: inline-flex; align-items: center; justify-content: center; }
  .top-nav {
    display: none;
    position: absolute;
    top: 52px;
    left: var(--space-3);
    right: var(--space-3);
    background: var(--topbar-bg);
    border: 1px solid var(--topbar-border);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    box-shadow: var(--shadow-xl);
    flex-direction: column;
    align-items: stretch;
    z-index: var(--z-dropdown);
  }
  .top-nav.open { display: flex !important; }
  .topbar-main { position: relative; }
  .topbar-right { margin-left: auto; }
  .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-split { grid-template-columns: 1fr; }
}

@media (max-width: 992px) {
  .requisites-block.grid-2 { grid-template-columns: 1fr; }
  .requisites-block .field[style*="grid-column: span 2"] { grid-column: span 1; }
}

@media (max-width: 768px) {
  .app-topbar { padding: 0 var(--space-3); }
  .topbar-user { display: none; }
  .motivation-pill { display: none; }
  .grid-2, .grid-3, .grid-4, .grid-5, .checkbox-grid, .stats { grid-template-columns: 1fr; }
  .toolbar { align-items: flex-start; }
  .desktop-table { display: none; }
  .card-list { display: grid; }
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr {
    border: 1px solid var(--color-border);
    border-bottom: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: 5px var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--color-bg-elevated);
  }
  .data-table td { border: 0; padding: var(--space-1) 0; }
  .data-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    margin-bottom: 2px;
  }
  .modal-card { width: calc(100vw - 14px); margin: var(--space-2) auto; max-height: calc(100vh - 14px); border-radius: var(--radius-lg); }
  .project-card-head { grid-template-columns: 1fr; }
  .project-card-side { justify-items: start; }
  .history-order-head { grid-template-columns: 1fr; gap: var(--space-2); }
  .project-task-summary-row { flex-direction: column; align-items: flex-start; }
  .project-task-inline-list { justify-content: flex-start; }
  .mobile-filter-toggle { display: none !important; }
  .orders-topbar-tools .summary-pill { display: inline-flex; }
  .quick-filters {
    flex-wrap: wrap;
    overflow: visible;
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    min-width: 0;
  }
  .orders-topbar-tools {
    flex-wrap: wrap !important;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
  }
  .orders-topbar-tools .actions {
    flex-wrap: wrap !important;
  }
  /* Мобильные быстрые фильтры: видимость, тач-удобство, позиционирование */
  .quick-filters .btn {
    padding: 6px 10px;
    font-size: var(--font-size-xs);
    min-height: 36px;
    touch-action: manipulation;
  }
  .quick-filters .btn-outline {
    border-width: 1.5px;
  }
  .quick-status-dropdown summary,
  .quick-status-dropdown .quick-filter-btn {
    min-height: 36px;
    padding: 6px 10px;
  }
  .quick-status-menu {
    z-index: var(--z-dropdown);
    min-width: 200px;
  }
  .quick-status-form select { min-width: 150px; }
  .quick-status-menu,
  .status-dropdown[open] .status-dropdown-menu { position: static; margin-top: var(--space-2); box-shadow: none; }
  .mobile-order-summary {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .mobile-order-primary {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .mobile-order-secondary {
    flex: 1;
    min-width: 0;
    margin-left: var(--space-3);
    text-align: left;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .mobile-order-summary .badge {
    flex-shrink: 0;
    margin-left: auto;
    white-space: nowrap;
  }
  .mobile-order-summary .mobile-status-dropdown { flex-shrink: 0; margin-left: auto; }
  .mobile-order-summary .mobile-status-dropdown[open] .status-dropdown-menu { position: absolute; top: 100%; right: 0; left: auto; z-index: var(--z-dropdown); box-shadow: var(--shadow-lg); margin-top: 6px; }
  .order-form-card .grid-5,
  .order-form-card .grid-4,
  .order-form-card .grid-2 { grid-template-columns: 1fr; }
  .item-table { font-size: var(--font-size-sm); }
  .item-table td, .item-table th { padding: var(--space-1) var(--space-1); }
  .requisites-block { padding: var(--space-2); gap: var(--space-2); }
  .order-table .stock-cell { width: 60px; }
  .stock-icon { width: 7px; height: 7px; }
  .warehouse-select-group { gap: var(--space-1); }
  .warehouse-option { padding: var(--space-1) var(--space-2); }
  .composite-details-table th,
  .composite-details-table td { padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); }
  .filter-panel-dropdown { display: block; margin: var(--space-3) 0; }
  .filter-panel-dropdown[open] summary { margin-bottom: var(--space-3); color: var(--color-text); }
  .filter-panel-dropdown .filter-panel-form { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-soft); }
  .hide-mobile { display: none !important; }
  .login-brand { display: none; }
  .login-form-side { padding: var(--space-4); }

  /* Мобильная версия: белый фон, цвета как на ПК */
  :root {
    --color-bg: #ffffff;
    --color-bg-elevated: #ffffff;
    --color-bg-soft: #f8f9fa;
    --color-bg-subtle: #f0f2f5;
    --color-bg-hover: #f0f2f5;
    --color-bg-active: #e4e7eb;
  }

  /* Убираем стили card-обёртки на мобильных */
  .card {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }

  /* Карточки заказов — на всю ширину экрана с 5px отступом */
  .mobile-order-cards {
    grid-template-columns: 1fr;
    gap: 5px;
    margin-left: calc(-1 * var(--space-5) + 5px);
    margin-right: calc(-1 * var(--space-5) + 5px);
    width: calc(100% + 2 * var(--space-5) - 10px);
    max-width: none;
  }
  .mobile-order-cards .order-card {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .order-form-card .field input,
  .order-form-card .field select,
  .order-form-card .field textarea { font-size: 14px; padding: var(--space-2) var(--space-3); }
  .order-form-card .grid { gap: var(--space-3); }
  .requisites-block { padding: var(--space-2); gap: var(--space-2); }
  .item-table { font-size: var(--font-size-xs); }
  .item-table td, .item-table th { padding: var(--space-1) var(--space-1); }
}

/* ─────────────────────────────────────────────────────────────────────────
   SIDEBAR COLLAPSED (legacy support)
───────────────────────────────────────────────────────────────────────── */
body.sidebar-collapsed .sidebar      { width: 72px; flex-basis: 72px; }
body.sidebar-collapsed .nav-label    { display: none; }
body.sidebar-collapsed .nav-link     { justify-content: center; }
body.sidebar-collapsed .brand-copy   { display: inline-block; }

/* ─────────────────────────────────────────────────────────────────────────
    TODAY ORDERS GROUP
 ───────────────────────────────────────────────────────────────────────── */
.today-orders-group {
    outline: 2px solid #0055aa;
    outline-offset: -2px;
    border-radius: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────
    PRINT
 ───────────────────────────────────────────────────────────────────────── */
@media print {
  .app-topbar,
  .burger,
  .toolbar,
  .quick-filters,
  .modal-shell { display: none !important; }
  body { background: white; color: black; }
  .card, .stat-card { box-shadow: none; border: 1px solid #ddd; }
  .data-table th { background: #f5f5f5; }
}

/* ─────────────────────────────────────────────────────────────────────────
   KANBAN BOARD
   ───────────────────────────────────────────────────────────────────────── */
.kanban-board {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.kanban-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  min-height: 400px;
}
.kanban-column {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.kanban-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.kanban-column-header h3 {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text);
}
.kanban-column-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-elevated);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.kanban-column-body {
  flex: 1;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 200px;
}
.kanban-column-body.drag-over {
  background: var(--color-primary-soft);
}
.kanban-task {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: grab;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.kanban-task:hover {
  box-shadow: var(--shadow-md);
}
.kanban-task.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}
.kanban-task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}
.kanban-project-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.kanban-task-title {
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
}
.kanban-task-description {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}
.kanban-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
}
.kanban-due-date {
  color: var(--color-text-muted);
}
.kanban-due-date.overdue {
  color: var(--color-danger);
}
.kanban-assignee {
  color: var(--color-text-muted);
}
.kanban-task-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.kanban-empty-placeholder {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

/* ─────────────────────────────────────────────────────────────────────────
   KANBAN NOTIFICATIONS
   ───────────────────────────────────────────────────────────────────────── */
.kanban-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  z-index: 10000;
  transform: translateX(100%);
  transition: transform var(--transition-base);
}
.kanban-notification.show {
  transform: translateX(0);
}
.kanban-notification.notification-success {
  background: var(--color-success-soft);
  color: var(--color-success);
  border: 1px solid var(--color-success-soft-hover);
}
.kanban-notification.notification-danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-soft-hover);
}

/* ─────────────────────────────────────────────────────────────────────────
   MODAL HEADER
   ───────────────────────────────────────────────────────────────────────── */
.modal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.modal-card-header h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}
.modal-card-body {
  margin-top: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE KANBAN
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .kanban-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .kanban-columns {
    grid-template-columns: 1fr;
  }
  .kanban-column-body {
    padding: var(--space-2);
  }
}
.filter-panel-form { display: inline-flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 6px !important; align-items: center !important; white-space: nowrap !important; }
.filter-panel-form .field { flex: 0 1 auto !important; min-width: 100px !important; max-width: 200px !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; font-size: 11px; padding: 2px; }
.quick-filters { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 4px !important; align-items: center; white-space: nowrap; }
.quick-filters .btn { flex-shrink: 0 !important; white-space: nowrap !important; font-size: 11px !important; padding: 4px 8px !important; min-height: 28px; overflow: hidden; text-overflow: ellipsis; }
.quick-status-menu, .status-dropdown-menu, .delivery-dropdown-menu { display: block !important; position: absolute; z-index: var(--z-dropdown); white-space: normal; overflow: visible; flex-wrap: wrap; }