/*
 * Al Jowder Product System
 *
 * This is the final, route-wide presentation layer. It intentionally loads
 * after legacy and module styles so every existing workflow can share one
 * coherent visual language while the PHP and API behaviour stays unchanged.
 */

:root {
  --aj-primary: #0d5c4a;
  --aj-primary-hover: #08483a;
  --aj-primary-strong: #073e33;
  --aj-text: #13231f;
  --aj-text-secondary: #66736f;
  --aj-text-subtle: #87938f;
  --aj-background: #f4f5f2;
  --aj-surface: #ffffff;
  --aj-surface-soft: #f9faf8;
  --aj-soft-green: #e8f3ed;
  --aj-soft-green-strong: #d9ebe1;
  --aj-rose: #c98791;
  --aj-gold: #d5a640;
  --aj-warning: #d39a32;
  --aj-error: #c84b4b;
  --aj-border: #e2e7e4;
  --aj-border-strong: #ccd7d1;
  --aj-focus: rgba(13, 92, 74, .2);
  --aj-sidebar-width: 264px;
  --aj-sidebar-collapsed: 78px;
  --aj-radius-sm: 10px;
  --aj-radius-md: 14px;
  --aj-radius-lg: 18px;
  --aj-shadow-sm: 0 1px 2px rgba(19, 35, 31, .04), 0 7px 20px rgba(19, 35, 31, .035);
  --aj-shadow-md: 0 18px 45px rgba(19, 35, 31, .11);
  --aj-space-1: 4px;
  --aj-space-2: 8px;
  --aj-space-3: 12px;
  --aj-space-4: 16px;
  --aj-space-5: 20px;
  --aj-space-6: 24px;
  --aj-space-8: 32px;
  --aj-space-10: 40px;
  --forest: var(--aj-primary);
  --forest-2: var(--aj-primary-hover);
  --paper: var(--aj-background);
  --white: var(--aj-surface);
  --ink: var(--aj-text);
  --muted: var(--aj-text-secondary);
  --line: var(--aj-border);
  --border: var(--aj-border);
  --surface: var(--aj-surface);
  --surface-muted: var(--aj-surface-soft);
  --text: var(--aj-text);
  --text-strong: var(--aj-text);
  --text-body: var(--aj-text);
  --text-muted: var(--aj-text-secondary);
  --text-subtle: var(--aj-text-subtle);
  --text-label: #40514b;
  --ui-plane: var(--aj-background);
  --ui-surface: var(--aj-surface);
  --ui-text: var(--aj-text);
  --ui-muted: var(--aj-text-secondary);
  --ui-subtle: var(--aj-text-subtle);
  --ui-grid: var(--aj-border);
  --ui-rule: var(--aj-border-strong);
  --ui-ring: var(--aj-border);
  --ui-shadow: var(--aj-shadow-sm);
  --ui-chrome: var(--aj-primary);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 0; max-width: 100%; background: var(--aj-background); overflow-x: visible !important; scroll-behavior: smooth; }
body { min-width: 0; max-width: 100%; background: var(--aj-background); color: var(--aj-text); overflow-x: visible !important; font-size: 15px; line-height: 1.55; }
body, button, input, select, textarea { font-family: Inter, "Noto Sans Arabic", "Segoe UI", Arial, sans-serif; }
img, video, canvas, iframe, svg { max-width: 100%; }
main, section, article, aside, nav, header, footer, form, fieldset, label, div { min-width: 0; }
p, li, td, th, label, small, strong, span, a, code { overflow-wrap: anywhere; }

/* Readability floor: legacy modules used 6–10px utility copy in places. */
.page p, .page li { font-size: max(14px,.875rem) !important; line-height: 1.58; }
.page small, .page time, .page code, .page dt, .page dd {
  font-size: max(12px,.75rem) !important;
  line-height: 1.45;
}
.page label { font-size: max(13px,.8125rem); line-height: 1.45; }
.page input, .page select, .page textarea, .page button { font-size: max(13px,.8125rem) !important; }
.page table th { font-size: 12px !important; line-height: 1.4; }
.page table td { font-size: 13px !important; line-height: 1.5; }
.badge, .status, .pill, .chip, .nav-badge { font-size: 12px !important; }
.readable-type-floor { font-size: 12px !important; }

/* Application shell */
.app-shell { min-height: 100dvh; background: var(--aj-background); }
.sidebar {
  width: var(--aj-sidebar-width);
  flex: 0 0 var(--aj-sidebar-width);
  height: 100dvh;
  min-height: 100dvh;
  padding: 18px 14px 16px;
  overflow-y: auto;
  overflow-x: visible;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, #0d5c4a 0%, #08483a 100%);
  border-inline-end: 0;
  scrollbar-color: rgba(255,255,255,.28) transparent;
  scrollbar-width: thin;
}
.sidebar-brand-row { min-height: 52px; padding: 0 4px 12px; }
.sidebar .brand-lockup { padding: 0; gap: 11px; }
.sidebar .brand-lockup strong { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.sidebar .brand-lockup span { color: rgba(255,255,255,.68); font-size: 12px !important; }
.sidebar .sidebar-toggle { width: 40px; height: 40px; min-width: 40px; border-radius: 10px !important; }
.sidebar > nav { padding-top: 12px; }
.nav-group { margin-bottom: 12px; }
.sidebar .nav-label { padding: 0 9px 7px; color: rgba(255,255,255,.62); font-size: 12px; letter-spacing: .08em; }
.sidebar .nav-label > span { font-size: 12px !important; }
.sidebar .nav-group-toggle { width: 44px; height: 44px; margin-block: -8px; }
.sidebar .nav-item {
  min-height: 42px;
  margin: 2px 0;
  padding: 9px 10px;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(255,255,255,.82) !important;
  font-size: 13px;
  font-weight: 540;
}
.sidebar .nav-item .nav-icon, .sidebar .nav-item .nav-icon-svg { color: rgba(255,255,255,.72) !important; }
.sidebar .nav-item:hover { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.1); color: #fff !important; }
.sidebar .nav-item.active {
  border-color: rgba(255,255,255,.9);
  background: #fff;
  color: var(--aj-primary) !important;
  box-shadow: 0 10px 24px rgba(3, 38, 30, .22);
}
.sidebar .nav-item.active .nav-item-label,
.sidebar .nav-item.active .nav-icon,
.sidebar .nav-item.active .nav-icon-svg { color: var(--aj-primary) !important; }
.sidebar .nav-badge { background: #f3c976; color: #173a31; }

.sidebar-bottom { padding-top: 8px; }
.sidebar .user-chip { min-height: 56px; padding: 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; }
.sidebar .user-chip .avatar { width: 36px; height: 36px; font-size: 12px !important; }
.sidebar .user-chip small,
.sidebar .user-chip span { font-size: 12px !important; }
.topbar .avatar.small { font-size: 12px !important; }

.main { width: calc(100% - var(--aj-sidebar-width)); min-height: 100dvh; background: var(--aj-background); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 35;
  height: 68px;
  min-height: 68px;
  padding-inline: clamp(20px, 2.5vw, 32px);
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--aj-border);
  box-shadow: 0 1px 0 rgba(19,35,31,.02);
  backdrop-filter: blur(16px);
}
.topbar .crumb { color: var(--aj-text-subtle); font-size: 12px; }
.topbar .crumb strong { color: var(--aj-text); font-weight: 650; }
.topbar .top-actions { gap: 7px; }
.topbar .top-actions .search {
  width: clamp(210px, 24vw, 330px);
  height: 42px;
  padding-inline: 12px;
  border: 1px solid var(--aj-border);
  border-radius: 11px;
  background: var(--aj-surface-soft);
  color: var(--aj-text-secondary);
}
.topbar .top-actions .search:focus-within { border-color: var(--aj-primary); background: #fff; box-shadow: 0 0 0 4px var(--aj-focus); }
.topbar .top-actions .search input { color: var(--aj-text); font-size: 13px; }
.topbar .top-actions .search input::placeholder { color: var(--aj-text-subtle); }
.topbar .top-action-button,
.topbar .topbar-user-menu-trigger {
  display: inline-flex;
  width: auto;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-inline: 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--aj-text-secondary);
}
.topbar .top-action-button:hover,
.topbar .top-action-button:focus-visible,
.topbar .topbar-user-menu-trigger:hover,
.topbar .topbar-user-menu.is-open .topbar-user-menu-trigger { border-color: var(--aj-border); background: var(--aj-soft-green); color: var(--aj-primary); box-shadow: none; }
.topbar .topbar-user-menu-trigger .avatar.small { width: 30px; height: 30px; background: var(--aj-soft-green); color: var(--aj-primary); }
.topbar .nav-badge { background: var(--aj-error); color: #fff; }
.locale-switcher { font-weight: 750; letter-spacing: .04em; }
.locale-switcher [data-locale-label] { min-width: 21px; text-align: center; }

.page { width: min(1520px,100%); padding: 28px clamp(20px,2.5vw,32px) 64px; }
.heading { align-items: flex-start; margin-bottom: 24px; }
.heading h1 { margin: 7px 0 8px; color: var(--aj-text); font-size: clamp(1.9rem,2.5vw,2.6rem); font-weight: 680; letter-spacing: -.035em; }
.heading p { max-width: 74ch; color: var(--aj-text-secondary); font-size: 14px; }
.eyebrow, .kicker { color: var(--aj-primary); font-size: 12px !important; font-weight: 750; letter-spacing: .08em; }

/* Shared components */
.panel, .stat, .task-manager-stat, .security-summary-card,
.filters, .task-manager-filters, .report-filters, .analytics-filters, .security-login-filters,
.tablewrap {
  border: 1px solid var(--aj-border);
  border-radius: var(--aj-radius-md);
  background: var(--aj-surface);
  box-shadow: var(--aj-shadow-sm);
}
.panel:hover, .stat:hover { box-shadow: var(--aj-shadow-sm); }
.panel-head { padding: 20px 22px 15px; }
.panel-head h2 { color: var(--aj-text); font-size: 17px; font-weight: 650; }
.panel-head p { color: var(--aj-text-secondary); font-size: 13px; }
.panel-head a { color: var(--aj-primary); }
.stats { gap: 16px; margin-bottom: 20px; }
.stat { min-height: 116px; padding: 18px; }
.stat-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--aj-soft-green); color: var(--aj-primary); }
.stat-copy span { color: var(--aj-text-secondary); font-size: 12px; }
.stat-copy strong { color: var(--aj-text); font-size: 29px; font-weight: 680; }
.stat-copy small { color: var(--aj-text-subtle); font-size: 12px; }

.button {
  min-height: 44px;
  height: 44px;
  padding-inline: 15px;
  border: 1px solid var(--aj-border-strong);
  border-radius: 10px;
  background: #fff;
  color: #40514b;
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
}
.page .button { font-size: 13px !important; }
.button:hover { border-color: #afc0b7; background: var(--aj-surface-soft); color: var(--aj-text); }
.button-primary, .button.button-primary, .button.button-primary:visited { border-color: var(--aj-primary); background: var(--aj-primary); color: #fff; }
.button-primary:hover, .button.button-primary:hover, .button.button-primary:focus-visible { border-color: var(--aj-primary-hover); background: var(--aj-primary-hover); color: #fff; box-shadow: 0 8px 18px rgba(13,92,74,.17); }
.button-danger { border-color: rgba(200,75,75,.24); background: #fff7f7; color: #a93f3f; }
.button-wide { min-height: 46px; height: 46px; }
.icon-button, button[aria-label]:not(.button) { min-width: 44px; min-height: 44px; }
.page button, .page .button { min-height: 44px !important; }
.page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.page select { min-height: 44px !important; }
button:disabled, .button:disabled { cursor: not-allowed; opacity: .56; }

.table-scroll { max-width: 100%; border-radius: 0 0 var(--aj-radius-md) var(--aj-radius-md); }
.table { color: var(--aj-text); }
.table th { padding: 12px 15px; background: #fafbf9; border-color: var(--aj-border); color: var(--aj-text-subtle); font-size: 12px; font-weight: 700; }
.table td { padding: 14px 15px; border-color: #edf0ee; color: var(--aj-text-secondary); font-size: 13px; }
.table td > strong { color: var(--aj-text); font-weight: 650; }
.table tbody tr { transition: background .14s ease; }
.table tbody tr:hover { background: #fbfdfb; }
.pill, .status, .tag { font-weight: 650; }
.status, .pill { min-height: 25px; align-items: center; padding: 5px 9px; border-radius: 999px; }

.form-grid { gap: 16px; }
.form-grid label, .settings-field, .task-create-form label, .template-form label,
.report-filters label, .analytics-filters label, .task-manager-filters label,
.security-login-filters label { color: #40514b; font-size: 13px; font-weight: 620; }
.form-grid input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-grid select, .form-grid textarea,
.settings-field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
.settings-field select, .settings-field textarea,
.task-create-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.task-create-form select, .task-create-form textarea,
.template-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.template-form select, .template-form textarea,
.report-filters input, .report-filters select, .report-filters textarea,
.analytics-filters input, .analytics-filters select, .analytics-filters textarea,
.task-manager-filters input, .task-manager-filters select,
.security-login-filters input, .security-login-filters select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--aj-border-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--aj-text);
  font-size: 14px;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus,
.settings-field input:focus, .settings-field select:focus, .settings-field textarea:focus,
.task-create-form input:focus, .task-create-form select:focus, .task-create-form textarea:focus,
.template-form input:focus, .template-form select:focus, .template-form textarea:focus {
  border-color: var(--aj-primary);
  outline: 0;
  box-shadow: 0 0 0 4px var(--aj-focus);
}

.alert, .notice, .banner { border-radius: 11px; font-size: 13px; line-height: 1.5; }
.alert-success { border-color: #cfe3d7; background: #eff8f2; color: #28664f; }
.alert-error { border-color: #f0d0d0; background: #fff4f4; color: #9f3f3f; }
.chip { min-height: 36px; border-color: var(--aj-border); background: #fff; color: var(--aj-text-secondary); }
.chip[aria-pressed="true"] { border-color: var(--aj-primary); background: var(--aj-primary); color: #fff; }

/* Authentication and public utility surfaces */
.auth-page { min-height: 100dvh; padding: 32px 18px; overflow-x: visible !important; background: radial-gradient(circle at 12% 8%, #e1f0e7 0, transparent 34%), linear-gradient(145deg, #f4f5f2 0%, #edf3ef 100%); }
.auth-card { width: min(470px,100%); padding: 36px; border: 1px solid rgba(13,92,74,.12); border-radius: var(--aj-radius-lg); background: rgba(255,255,255,.96); box-shadow: 0 24px 70px rgba(19,55,43,.13); }
.auth-card h1 { color: var(--aj-text); font-size: 30px; font-weight: 680; }
.auth-intro { color: var(--aj-text-secondary); font-size: 14px; }
.auth-page :where(.auth-eyebrow,.field-help,.auth-footnote,.brand-lockup span,.auth-method-heading span,small) { font-size: 12px !important; line-height: 1.45; }
.auth-page label, .auth-page p { font-size: 14px !important; line-height: 1.55; }
.auth-card input { min-height: 46px; border-radius: 10px; font-size: 16px !important; }
.auth-page .button { font-size: 14px !important; }
.auth-card .brand-lockup strong { color: var(--aj-text); }

/* Dialogs, drawers, menus and live connection state */
dialog, .modal, [role="dialog"], .global-search-palette, .notification-preview-popover, .user-menu-popover {
  border-color: var(--aj-border);
  border-radius: var(--aj-radius-lg);
  box-shadow: var(--aj-shadow-md);
}
dialog::backdrop { background: rgba(10,35,28,.48); backdrop-filter: blur(3px); }
.connection-status {
  position: fixed;
  inset-inline: 16px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 150;
  display: flex;
  max-width: 440px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-inline-start: auto;
  padding: 10px 14px;
  border: 1px solid #ecd197;
  border-radius: 11px;
  background: #fff9eb;
  color: #775719;
  box-shadow: var(--aj-shadow-md);
  font-size: 12px;
  font-weight: 650;
}
.connection-status[hidden] { display: none; }
.connection-status[data-state="online"] { border-color: #c7e1d1; background: #eff8f2; color: #28664f; }

/* Wrapped controls replace mobile horizontal strips. */
.settings-tab-nav, .materials-view-tabs, .analytics-attention-items,
.report-suite-tabs, .quality-staff-dialog-tabs, .marhaba-orders-view-switch {
  flex-wrap: wrap;
  overflow-x: visible !important;
}
.settings-tab-nav > *, .materials-view-tabs > * { min-width: 0; }
.analytics-chart-wrap, .dashboard-chart, .chart-container { width: 100%; max-width: 100%; }
.analytics-chart-wrap canvas, .dashboard-chart canvas { width: 100% !important; max-width: 100% !important; }

/* Mobile navigation */
.mobile-bottom-nav { min-height: 68px; padding: 7px 8px max(7px,env(safe-area-inset-bottom)); border-top: 1px solid var(--aj-border); background: rgba(255,255,255,.97); backdrop-filter: blur(14px); }
.mobile-bottom-nav a, .mobile-bottom-nav button { min-width: 0; min-height: 52px; border: 0; border-radius: 11px; background: transparent; color: var(--aj-text-secondary); }
.mobile-bottom-nav a.active { background: var(--aj-soft-green); color: var(--aj-primary); }
.mobile-bottom-nav button { display: none; flex: 1; align-items: center; justify-content: center; flex-direction: column; gap: 3px; padding: 4px; font-size: 12px; font-weight: 650; }
.mobile-bottom-nav span { font-size: 12px; line-height: 1.2; }
.mobile-bottom-nav button svg { width: 20px; height: 20px; }

/* RTL foundations use logical alignment and keep controls inside the viewport. */
html[dir="rtl"] body { direction: rtl; text-align: start; }
html[dir="rtl"] .app-shell { direction: rtl; }
html[dir="rtl"] .table th, html[dir="rtl"] .table td { text-align: start; }
html[dir="rtl"] .nav-badge { margin-inline-start: auto; margin-left: 0; }
html[dir="rtl"] .user-menu-popover, html[dir="rtl"] .notification-preview-popover { right: auto; left: 0; }
html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="url"], html[dir="rtl"] code { direction: ltr; text-align: left; }

@media (min-width: 651px) {
  .app-shell.sidebar-collapsed .sidebar { width: var(--aj-sidebar-collapsed); flex-basis: var(--aj-sidebar-collapsed); }
  .app-shell.sidebar-collapsed .main { width: calc(100% - var(--aj-sidebar-collapsed)); }
}

@media (max-width: 1050px) {
  .sidebar { width: 236px; flex-basis: 236px; }
  .main { width: calc(100% - 236px); }
  .top-action-text { display: none; }
  .topbar .top-actions .search { width: min(28vw,260px); }
}

@media (min-width: 821px) and (max-width: 1100px) {
  .settings-tab-nav {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 7px;
  }
  .settings-tab-nav > * { width: 100%; min-width: 0 !important; }
  .settings-tab span { max-width: 100%; white-space: normal !important; overflow-wrap: anywhere; }
}

@media (max-width: 820px) {
  html, body { width: 100%; max-width: 100%; }
  .app-shell { display: block; width: 100%; }
  .main { width: 100%; }
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: calc((min(304px,100vw - 32px) + 12px) * -1);
    z-index: 80;
    width: min(304px,calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    height: 100dvh;
    padding-top: max(16px,env(safe-area-inset-top));
    transition: left .2s ease, right .2s ease, box-shadow .2s ease;
  }
  .sidebar.open { left: 0; box-shadow: 24px 0 60px rgba(6,35,28,.3); }
  html[dir="rtl"] .sidebar { right: calc((min(304px,100vw - 32px) + 12px) * -1); left: auto; }
  html[dir="rtl"] .sidebar.open { right: 0; left: auto; box-shadow: -24px 0 60px rgba(6,35,28,.3); }
  .sidebar-backdrop { z-index: 70; background: rgba(8,30,24,.45); backdrop-filter: blur(2px); }
  .topbar { height: 62px; min-height: 62px; padding-inline: 10px 12px; }
  .topbar .crumb { display: none; }
  .topbar .mobile-menu { display: inline-grid; width: 44px !important; min-width: 44px !important; height: 44px !important; place-items: center; border-radius: 11px !important; color: var(--aj-primary) !important; }
  .topbar .top-actions { margin-inline-start: auto; }
  .topbar .top-actions .search { display: none; }
  .topbar .guide-link, .topbar .settings-link, .topbar .pwa-install-link { display: none !important; }
  .topbar .top-action-button, .topbar .topbar-user-menu-trigger { width: 44px; min-width: 44px; padding: 0; }
  .locale-switcher { display: inline-flex !important; }
  .page { width: 100%; padding: 22px 16px calc(94px + env(safe-area-inset-bottom)); }
  .heading { gap: 16px; margin-bottom: 22px; }
  .heading h1 { font-size: clamp(1.75rem,8vw,2.15rem); }
  .heading .actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .heading .actions .button, .heading .actions form, .heading .actions form .button { display: inline-flex !important; width: 100%; }
  .heading .actions .dashboard-edit-button { width: 44px !important; min-width: 44px; justify-self: end; padding-inline: 0; }
  .panel-head { padding: 17px 16px 13px; }
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .stat { min-height: 112px; padding: 15px; align-items: flex-start; }
  .stat-copy strong { font-size: 25px; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .form-grid input, .form-grid select, .form-grid textarea,
  .settings-field input, .settings-field select, .settings-field textarea,
  .task-create-form input, .task-create-form select, .task-create-form textarea,
  .template-form input, .template-form select, .template-form textarea { font-size: 16px; }
  .page input, .page select, .page textarea { font-size: 16px !important; }
  .filters, .task-manager-filters, .report-filters, .analytics-filters, .security-login-filters { max-width: 100%; }
  .actions, .form-actions, .filter-actions { flex-wrap: wrap; }
  .actions > *, .form-actions > *, .filter-actions > * { min-width: 0; }
  dialog, .modal, [role="dialog"] {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  dialog > *, .modal > *, [role="dialog"] > * { max-width: 100%; }
  .global-search-overlay { padding: 0; }
  .global-search-palette { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .notification-preview-popover { position: fixed !important; inset: 62px 8px auto !important; width: auto !important; max-width: none !important; max-height: calc(100dvh - 72px) !important; }
  .user-menu-popover { position: fixed; inset-inline: 8px; top: 62px; bottom: auto; width: auto; max-width: none; }
  .settings-tab-nav, .materials-view-tabs { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding-inline: 14px; }
  .settings-tab-nav > *, .materials-view-tabs > * { width: 100%; white-space: normal !important; }
  .settings-tab span { max-width: 100%; white-space: normal !important; overflow-wrap: anywhere; text-overflow: clip; }
  .arrangement-type-toolbar, .weekly-plan-toolbar { display: grid !important; width: 100%; grid-template-columns: minmax(0,1fr) !important; }
  .arrangement-type-toolbar > *, .weekly-plan-toolbar > * { width: 100% !important; min-width: 0 !important; grid-column: 1 !important; margin-inline: 0 !important; }
  .arrangement-type-assignment-tabs, .weekly-plan-tabs { min-width: 0 !important; flex-wrap: wrap; }
  .arrangement-type-assignment-tabs > *, .weekly-plan-tabs > * { min-width: 0 !important; flex: 1 1 auto; white-space: normal !important; }
  .arrangement-type-toolbar select, .weekly-plan-toolbar select { width: 100% !important; min-width: 0 !important; }
  .analytics-attention-items { display: grid !important; grid-template-columns: 1fr; }
  .analytics-attention-item { min-width: 0 !important; max-width: 100%; }
  .emirates-draft-list { overflow-x: visible !important; }
  .emirates-draft-row, .emirates-draft-summary { min-width: 0 !important; max-width: 100%; }
  .emirates-draft-summary { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .roster-mobile-day-picker { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 6px; }
  .mobile-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 35;
    display: flex;
  }
  .mobile-bottom-nav a, .mobile-bottom-nav button { display: flex; }
  .connection-status { inset-inline: 12px; max-width: none; }
}

/* Marketing Hub readable type scale on desktop and mobile. */
.marketing-hub-page .mh-shell { font-size: 14px; line-height: 1.55; }
.marketing-hub-page .mh-button { min-height: 44px; font-size: 13px !important; line-height: 1.25; }
.marketing-hub-page .mh-language-switch a { width: 44px; height: 44px; }
.marketing-hub-page :where(
  .mh-overline,
  .mh-hero-meta span,
  .mh-language-switch a,
  .mh-nav-item > span:last-of-type,
  .mh-nav-item b,
  .mh-view-heading > div:first-child > span,
  .mh-card-head > div > span,
  .mh-card-head > span:first-child,
  .mh-card-head > a,
  .mh-source-chip,
  .mh-kpi > span,
  .mh-kpi > strong em,
  .mh-action-number,
  .mh-mini-funnel span,
  .mh-content-art b,
  .mh-status,
  .mh-day-number,
  .mh-platform-pills span,
  .mh-consent-pills span,
  .mh-conversation header span,
  .mh-conversation footer > span,
  .mh-inbox-insight > span,
  .mh-campaign-card header small,
  .mh-campaign-dates,
  .mh-campaign-card footer span,
  .mh-ad-card header small,
  .mh-ad-metrics span,
  .mh-budget-bar > span,
  .mh-big-funnel span,
  .mh-workflow-card header small,
  .mh-workflow-card > footer,
  .mh-segment-grid span,
  .mh-segment-grid small,
  .mh-offer-card > div > span,
  .mh-offer-card footer,
  .mh-review-card > div small,
  .mh-draft-response span,
  .mh-review-card footer > span,
  .mh-integration-logo,
  .mh-integration-card header small,
  .mh-integration-card dt,
  .mh-integration-card dd,
  .mh-switch-field small,
  .mh-dialog header > span,
  .mh-dialog-note
) { font-size: 12px !important; line-height: 1.4; }
.marketing-hub-page :where(
  .mh-action-list strong,
  .mh-content-tile h4,
  .mh-conversation header strong,
  .mh-campaign-card header > strong,
  .mh-ad-card header strong,
  .mh-workflow-card header strong,
  .mh-integration-card header strong,
  .mh-switch-field strong,
  .mh-security-card strong
) { font-size: 14px !important; line-height: 1.35; }
.marketing-hub-page .mh-platform-pills span { width: 28px; height: 28px; }
.marketing-hub-page .mh-mini-funnel strong { font-size: 13px !important; }
.marketing-hub-page .mh-alert,
.marketing-hub-page .mh-toast { font-size: 14px !important; }

/*
 * Marketing Hub mobile composition.
 * Its desktop navigation and data surfaces are deliberately expansive; on a
 * phone they become wrapped controls, agenda rows and the same record-card
 * table pattern used throughout the operations workspace.
 */
@media (max-width: 820px) {
  .marketing-hub-page .page {
    width: 100%;
    max-width: 100%;
    padding: 14px 12px calc(94px + env(safe-area-inset-bottom));
  }
  .mh-shell, .mh-main, .mh-view,
  .mh-hero, .mh-hero-copy, .mh-hero-actions,
  .mh-view-heading, .mh-view-heading > *,
  .mh-card, .mh-card > *,
  .mh-dashboard-grid, .mh-composer-layout, .mh-composer-side,
  .mh-inbox-layout, .mh-analytics-grid, .mh-settings-grid,
  .mh-campaign-grid, .mh-ad-grid, .mh-review-grid,
  .mh-integration-grid, .mh-offer-grid, .mh-library-grid,
  .mh-automation-grid, .mh-occasion-grid, .mh-field-grid,
  .mh-field-grid-three, .mh-content-strip, .mh-table-scroll {
    min-width: 0;
    max-width: 100%;
  }
  .mh-hero {
    display: grid;
    min-height: 0;
    align-items: end;
    grid-template-columns: minmax(0,1fr);
    gap: 22px;
    padding: 28px 20px 22px;
  }
  .mh-hero h1 {
    max-width: 100%;
    font-size: clamp(2.25rem,12vw,3.25rem);
    line-height: .98;
    overflow-wrap: anywhere;
  }
  .mh-hero p { max-width: 100%; }
  .mh-hero-meta { max-width: 100%; }
  .mh-hero-meta span { min-width: 0; max-width: 100%; }
  .mh-hero-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
  }
  .mh-hero-actions .mh-language-switch {
    width: max-content;
    max-width: 100%;
    grid-column: 1 / -1;
  }
  .mh-hero-actions .mh-button {
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  .mh-nav {
    position: static;
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 5px;
    overflow-x: visible;
    padding: 6px;
  }
  .mh-nav-item {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    justify-content: center;
    padding: 7px 6px;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .mh-nav-item > span:last-of-type { min-width: 0; line-height: 1.25; }
  .mh-view-heading { width: 100%; }
  .mh-view-heading h2, .mh-card-head h3 { max-width: 100%; overflow-wrap: anywhere; }
  .mh-filter-pills {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .mh-filter-pills button { min-width: 0; flex: 1 1 120px; white-space: normal; }
  .mh-segmented {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2,minmax(0,1fr));
    overflow-x: visible;
  }
  .mh-segmented button { min-width: 0; width: 100%; }
  .mh-table-scroll {
    width: 100%;
    overflow-x: visible !important;
  }
  .mh-table-card { overflow: visible; }
  .mh-calendar-grid { width: 100%; }
  .mh-calendar-day, .mh-calendar-item { min-width: 0; max-width: 100%; }
  .mh-calendar-item span { min-width: 0; }
  .mh-calendar-list > div { min-width: 0; }
  .mh-conversation, .mh-conversation > *, .mh-conversation header,
  .mh-conversation footer, .mh-conversation footer > div { min-width: 0; max-width: 100%; }
  .mh-conversation p, .mh-conversation strong { overflow-wrap: anywhere; }
  .mh-content-tile, .mh-content-tile > *, .mh-content-art { min-width: 0; max-width: 100%; }
  .mh-preview-visual, .mh-asset-visual { max-width: 100%; }
}

/*
 * Universal mobile table -> record cards.
 * product-system.js derives each label from the real table header, preserving
 * live server data and avoiding brittle route-specific duplicate markup.
 */
@media (max-width: 820px) {
  .table-scroll, .quality-table-wrap, .analytics-chart-table,
  .quality-staff-dialog-table-wrap, .quality-issue-history-table-wrap,
  .qc-issue-dialog-table-wrap, .recipe-table-scroll,
  .arrangement-type-table-scroll, .weekly-plan-table-scroll,
  .roster-scroll, .my-task-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: visible !important;
    overscroll-behavior-x: auto;
  }
  table.responsive-record-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-collapse: separate !important;
    table-layout: auto !important;
  }
  table.responsive-record-table > thead { display: none !important; }
  table.responsive-record-table > tbody {
    display: grid !important;
    width: 100%;
    min-width: 0;
    gap: 12px;
    padding: 12px;
  }
  table.responsive-record-table > tbody > tr {
    display: grid !important;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 0 16px !important;
    padding: 14px !important;
    overflow: visible !important;
    border: 1px solid var(--aj-border) !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(19,35,31,.045) !important;
  }
  table.responsive-record-table > tbody > tr > td,
  table.responsive-record-table > tbody > tr > th {
    position: relative;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
    gap: 4px !important;
    grid-column: auto !important;
    grid-row: auto !important;
    padding: 9px 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-top: 1px solid #edf0ee !important;
    background: transparent !important;
    color: var(--aj-text-secondary) !important;
    text-align: start !important;
    white-space: normal !important;
  }
  table.responsive-record-table > tbody > tr > td::before,
  table.responsive-record-table > tbody > tr > th::before {
    display: block !important;
    margin: 0 0 2px;
    color: var(--aj-text-subtle);
    content: attr(data-label) !important;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .07em;
    line-height: 1.25;
    text-transform: uppercase;
  }
  table.responsive-record-table > tbody > tr > .mobile-primary-cell {
    grid-column: 1 / -1 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }
  table.responsive-record-table > tbody > tr > .mobile-primary-cell > strong,
  table.responsive-record-table > tbody > tr > .mobile-primary-cell a { color: var(--aj-text) !important; font-size: 14px; font-weight: 680; }
  table.responsive-record-table > tbody > tr > .mobile-full-cell,
  table.responsive-record-table > tbody > tr > .mobile-action-cell,
  table.responsive-record-table > tbody > tr > .mobile-empty-cell { grid-column: 1 / -1 !important; }
  table.responsive-record-table > tbody > tr > .mobile-action-cell { padding-bottom: 0 !important; }
  table.responsive-record-table > tbody > tr > .mobile-action-cell form,
  table.responsive-record-table > tbody > tr > .mobile-action-cell .actions,
  table.responsive-record-table > tbody > tr > .mobile-action-cell .area-actions,
  table.responsive-record-table > tbody > tr > .mobile-action-cell .staff-actions,
  table.responsive-record-table > tbody > tr > .mobile-action-cell .roles-actions { width: 100%; }
  table.responsive-record-table > tbody > tr > .mobile-action-cell .button { flex: 1 1 auto; min-height: 42px; }
  table.responsive-record-table > tbody > tr > .mobile-empty-cell { align-items: center !important; padding: 22px 8px !important; border-top: 0 !important; text-align: center !important; }
  table.responsive-record-table > tbody > tr > .mobile-empty-cell::before { display: none; }
  table.responsive-record-table select, table.responsive-record-table input,
  table.responsive-record-table textarea, table.responsive-record-table .button { max-width: 100%; }
}

@media (max-width: 430px) {
  .page { padding-inline: 16px; }
  .stats { grid-template-columns: 1fr; }
  .stat { min-height: 104px; }
  table.responsive-record-table > tbody { padding: 10px; }
  table.responsive-record-table > tbody > tr { grid-template-columns: 1fr !important; padding: 13px !important; }
  table.responsive-record-table > tbody > tr > td,
  table.responsive-record-table > tbody > tr > th { grid-column: 1 !important; }
  table.responsive-record-table > tbody > tr > .mobile-primary-cell,
  table.responsive-record-table > tbody > tr > .mobile-full-cell,
  table.responsive-record-table > tbody > tr > .mobile-action-cell,
  table.responsive-record-table > tbody > tr > .mobile-empty-cell { grid-column: 1 !important; }
  .mh-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mh-hero-actions { grid-template-columns: minmax(0,1fr); }
  .mh-hero-actions .mh-language-switch { grid-column: 1; }
  .mh-segment-grid { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 360px) {
  .page { padding-inline: 12px; }
  .topbar { padding-inline: 6px 8px; }
  .topbar .top-actions { gap: 2px; }
  .topbar .top-action-button, .topbar .topbar-user-menu-trigger { width: 40px; min-width: 40px; }
  .panel-head { padding-inline: 14px; }
  .auth-page { padding: 10px; }
  .auth-card { padding: 24px 18px; }
}

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

@media (prefers-contrast: more) {
  :root { --aj-border: #b8c4be; --aj-border-strong: #879990; }
  .button, input, select, textarea, .panel, .stat { border-width: 2px; }
}

/*
 * Warehouse workspace.
 *
 * The warehouse module is server-rendered and deliberately reuses the
 * product-system primitives instead of introducing a second visual language.
 * These rules make its KPI surfaces, review forms and card tables readable at
 * desktop widths while turning every wide record surface into a stacked,
 * labelled record card on phones.
 */
.warehouse-workspace-page .page {
  width: 100%;
  max-width: 100%;
  padding-block: 24px 44px;
}
.warehouse-workspace-page .alert { margin-block: 0 16px; }
.warehouse-workspace-page .warehouse-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
  margin-block: 0 18px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  background:
    radial-gradient(circle at 84% 4%, rgba(213,166,64,.25), transparent 34%),
    linear-gradient(130deg, #073e33 0%, #0d5c4a 58%, #187258 100%);
  color: #fff;
  box-shadow: 0 20px 48px rgba(7,62,51,.18);
}
.warehouse-workspace-page .warehouse-hero .eyebrow,
.warehouse-workspace-page .warehouse-hero .kicker { color: rgba(255,255,255,.72); }
.warehouse-workspace-page .warehouse-hero h1 {
  max-width: 820px;
  margin: 7px 0 10px;
  color: #fff;
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.04;
  letter-spacing: -.04em;
}
.warehouse-workspace-page .warehouse-hero p {
  max-width: 720px;
  margin: 0;
  color: rgba(255,255,255,.8) !important;
  font-size: 16px !important;
  line-height: 1.65;
}
.warehouse-hero-actions,
.warehouse-workspace-page .actions,
.warehouse-workspace-page .warehouse-row-actions,
.warehouse-workspace-page .warehouse-approval-actions,
.warehouse-workspace-page .warehouse-workflow-actions,
.warehouse-workspace-page .warehouse-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}
.warehouse-hero-actions { justify-content: flex-end; }
.warehouse-hero-actions .button {
  min-width: 126px;
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.1);
  color: #fff;
}
.warehouse-hero-actions .button:hover,
.warehouse-hero-actions .button:focus-visible { border-color: #fff; background: rgba(255,255,255,.2); color: #fff; }
.warehouse-hero-actions .button-primary { border-color: #f0d58e; background: #f0d58e; color: #173a31; }
.warehouse-hero-actions .button-primary:hover,
.warehouse-hero-actions .button-primary:focus-visible { background: #ffe4a4; color: #173a31; }
.warehouse-workspace-page .warehouse-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  width: 100%;
  margin-block: 0 24px;
  padding: 7px;
  border: 1px solid var(--aj-border);
  border-radius: 15px;
  background: var(--aj-surface);
  box-shadow: var(--aj-shadow-sm);
}
.warehouse-tabs a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--aj-text-secondary);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.25;
  text-decoration: none;
  white-space: normal;
  text-align: center;
}
.warehouse-tabs a:hover,
.warehouse-tabs a:focus-visible { border-color: var(--aj-border-strong); background: var(--aj-surface-soft); color: var(--aj-primary); }
.warehouse-tabs a.active {
  border-color: var(--aj-primary);
  background: var(--aj-primary);
  color: #fff;
  box-shadow: 0 6px 14px rgba(13,92,74,.17);
}
.warehouse-workspace-page .warehouse-view { display: grid; gap: 20px; }
.warehouse-section-head {
  display: flex;
  min-width: 0;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}
.warehouse-section-head h2 {
  margin: 5px 0 6px;
  color: var(--aj-text);
  font-size: clamp(22px, 2.4vw, 31px);
  line-height: 1.12;
  letter-spacing: -.025em;
}
.warehouse-section-head p { max-width: 720px; margin: 0; color: var(--aj-text-secondary); font-size: 14px; }
.warehouse-asof { flex: 0 0 auto; color: var(--aj-text-secondary); font-size: 13px; font-weight: 650; }
.warehouse-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.warehouse-kpi {
  display: flex;
  min-height: 136px;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--aj-border);
  border-radius: var(--aj-radius-md);
  background: var(--aj-surface);
  color: var(--aj-text);
  text-decoration: none;
  box-shadow: var(--aj-shadow-sm);
}
.warehouse-kpi:hover,
.warehouse-kpi:focus-visible { border-color: var(--aj-primary); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(13,92,74,.12); }
.warehouse-kpi > span { color: var(--aj-text-secondary); font-size: 13px; font-weight: 700; line-height: 1.3; }
.warehouse-kpi > strong { color: var(--aj-primary); font-size: clamp(26px, 3vw, 37px); line-height: 1; letter-spacing: -.04em; }
.warehouse-kpi > small { color: var(--aj-text-subtle); font-size: 12px !important; line-height: 1.4; }
.warehouse-kpi > small b { color: var(--aj-primary); font-size: 15px; }
.warehouse-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
}
.warehouse-workspace-page .warehouse-panel {
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--aj-border);
  border-radius: var(--aj-radius-md);
  background: var(--aj-surface);
  box-shadow: var(--aj-shadow-sm);
}
.warehouse-workspace-page .warehouse-panel > .panel-head,
.warehouse-workspace-page .warehouse-panel > .warehouse-section-head { padding: 18px 20px 0; }
.warehouse-workspace-page .warehouse-panel > .panel-head { min-width: 0; }
.warehouse-workspace-page .warehouse-panel > .panel-head h2 { font-size: 20px; line-height: 1.2; }
.warehouse-workspace-page .warehouse-panel > .panel-head p { color: var(--aj-text-secondary); font-size: 13px; }
.warehouse-record-list { display: grid; gap: 0; padding: 10px 20px 18px; }
.warehouse-record-list-horizontal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.warehouse-record {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid #edf0ee;
  color: var(--aj-text);
  text-decoration: none;
}
.warehouse-record:last-child { border-bottom: 0; }
.warehouse-record:hover, .warehouse-record:focus-visible { color: var(--aj-primary); }
.warehouse-record > div { min-width: 0; }
.warehouse-record > div:first-child { display: grid; gap: 3px; }
.warehouse-record strong { color: inherit; font-size: 14px; line-height: 1.35; }
.warehouse-record span,
.warehouse-record small { display: block; color: var(--aj-text-secondary); font-size: 12px !important; line-height: 1.4; }
.warehouse-record > div:last-child { flex: 0 0 auto; text-align: end; }
.warehouse-record > div:last-child b { display: block; color: var(--aj-text); font-size: 14px; }
.warehouse-record-metric { display: grid; gap: 3px; min-width: 108px; text-align: end; }
.warehouse-record-metric span { color: var(--aj-text-subtle); font-size: 11px !important; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.warehouse-record-warning { border-inline-start: 3px solid var(--aj-warning); padding-inline-start: 12px; }
.warehouse-record-danger { border-inline-start: 3px solid var(--aj-error); padding-inline-start: 12px; }
.warehouse-empty {
  display: grid;
  min-height: 92px;
  place-items: center;
  padding: 20px;
  color: var(--aj-text-secondary);
  font-size: 14px;
  text-align: center;
}
.warehouse-status {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border: 1px solid var(--aj-border);
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 760;
  line-height: 1.2;
  white-space: normal;
}
.warehouse-status-success { border-color: #b9dcc9; background: #edf8f1; color: #14714b; }
.warehouse-status-warning { border-color: #ead49b; background: #fff8e8; color: #8b5f0d; }
.warehouse-status-danger { border-color: #e9bebe; background: #fff1f1; color: #a83030; }
.warehouse-status-neutral { border-color: var(--aj-border); background: var(--aj-surface-soft); color: var(--aj-text-secondary); }
.warehouse-card-table {
  display: grid;
  min-width: 0;
  overflow: visible;
  padding: 12px 20px 20px;
}
.warehouse-card-table > .warehouse-table-head,
.warehouse-card-table > article {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 12px;
  align-items: start;
}
.warehouse-card-table > .warehouse-table-head {
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--aj-surface-soft);
  color: var(--aj-text-subtle);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .07em;
  line-height: 1.3;
  text-transform: uppercase;
}
.warehouse-card-table > article {
  padding: 13px 12px;
  border-bottom: 1px solid #edf0ee;
  color: var(--aj-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}
.warehouse-card-table > article:last-child { border-bottom: 0; }
.warehouse-card-table > article > div { min-width: 0; overflow-wrap: anywhere; }
.warehouse-card-table > article strong { color: var(--aj-text); font-size: 13px; }
.warehouse-card-table > article span,
.warehouse-card-table > article small { display: block; color: var(--aj-text-secondary); font-size: 12px !important; line-height: 1.4; }
.warehouse-card-table > article a { color: var(--aj-primary); font-weight: 700; }
.warehouse-row-actions { justify-content: flex-start; }
.warehouse-row-actions .button { min-height: 36px; }
.warehouse-workspace-page .button-small { min-height: 44px !important; }
.warehouse-form-grid,
.warehouse-filter-grid,
.warehouse-invoice-review-form,
.warehouse-line-grid,
.warehouse-transfer-form,
.warehouse-transfer-lines,
.warehouse-count-form {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
}
.warehouse-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.warehouse-form-grid > label,
.warehouse-filter-grid > label,
.warehouse-invoice-review-form label,
.warehouse-line-grid > label,
.warehouse-transfer-form > label,
.warehouse-count-form > label { display: grid; min-width: 0; gap: 6px; color: var(--aj-text); font-size: 13px; font-weight: 720; }
.warehouse-form-grid input,
.warehouse-form-grid select,
.warehouse-form-grid textarea,
.warehouse-filter-grid input,
.warehouse-filter-grid select,
.warehouse-filter-grid textarea,
.warehouse-invoice-review-form input,
.warehouse-invoice-review-form select,
.warehouse-invoice-review-form textarea,
.warehouse-line-grid input,
.warehouse-line-grid select,
.warehouse-line-grid textarea,
.warehouse-transfer-form input,
.warehouse-transfer-form select,
.warehouse-transfer-form textarea,
.warehouse-count-form input,
.warehouse-count-form select,
.warehouse-count-form textarea { min-width: 0; width: 100%; }
.warehouse-form-grid small,
.warehouse-filter-grid small,
.warehouse-invoice-review-form small,
.warehouse-line-grid small { color: var(--aj-text-secondary); font-size: 12px !important; font-weight: 500; line-height: 1.4; }
.warehouse-form-wide { grid-column: 1 / -1; }
.warehouse-filter-panel { overflow: visible; }
.warehouse-filter-panel .warehouse-filter-grid { padding: 16px 20px 20px; }
.warehouse-check { display: flex !important; min-height: 44px; align-items: center; grid-column: 1 / -1; gap: 9px !important; font-weight: 600 !important; }
.warehouse-check input,
.warehouse-quality-flags input,
.warehouse-line-confirm input { width: 20px; min-width: 20px; height: 20px; accent-color: var(--aj-primary); }
.warehouse-location-layout { align-items: stretch; }
.warehouse-location-tree { display: grid; gap: 8px; padding: 16px 20px 20px; }
.warehouse-location-node { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--aj-border); border-radius: 10px; background: var(--aj-surface-soft); }
.warehouse-location-node.active { border-color: var(--aj-primary); background: var(--aj-soft-green); }
.warehouse-location-node strong { color: var(--aj-text); font-size: 14px; }
.warehouse-location-node span { color: var(--aj-text-secondary); font-size: 12px; }
.warehouse-location-node a { color: var(--aj-primary); font-size: 12px; font-weight: 700; }
.warehouse-edit-link { justify-self: start; }
.warehouse-material-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.warehouse-material-grid .warehouse-kpi { min-height: 122px; }
.warehouse-review-shell {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.warehouse-document-preview { position: sticky; top: 20px; }
.warehouse-document-preview > * { min-width: 0; }
.warehouse-document-preview iframe,
.warehouse-document-preview img,
.warehouse-document-preview embed { display: block; width: 100%; max-width: 100%; min-height: 220px; border: 0; border-radius: 10px; object-fit: contain; background: var(--aj-surface-soft); }
.warehouse-upload .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.warehouse-posting-boundary { display: inline-flex; min-height: 30px; align-items: center; padding: 6px 10px; border-radius: 999px; background: var(--aj-soft-green); color: var(--aj-primary); font-size: 12px; font-weight: 750; white-space: nowrap; }
.warehouse-file-field input[type="file"] { min-height: 48px; padding: 10px; }
.warehouse-extracted-text { margin: 14px 20px; padding: 12px; border: 1px solid var(--aj-border); border-radius: 10px; background: #1b2c27; color: #e9f4ef; }
.warehouse-extracted-text strong { display: block; margin-block-end: 7px; color: #fff; font-size: 13px; }
.warehouse-extracted-text pre { max-height: 360px; margin: 0; overflow: auto; color: #dcebe5; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.warehouse-warning-list { margin: 14px 20px; padding: 12px 14px; border: 1px solid #ead49b; border-radius: 10px; background: #fff8e8; color: #6f5014; font-size: 13px; }
.warehouse-warning-list ul { margin: 7px 0 0; padding-inline-start: 20px; }
.warehouse-invoice-lines { display: grid; gap: 12px; padding: 0 20px 20px; }
.warehouse-invoice-line { min-width: 0; padding: 16px; border: 1px solid var(--aj-border); border-radius: 12px; background: var(--aj-surface-soft); }
.warehouse-line-summary { display: flex; min-width: 0; align-items: start; justify-content: space-between; gap: 12px; }
.warehouse-line-summary h3 { margin: 4px 0; color: var(--aj-text); font-size: 16px; }
.warehouse-line-summary p { margin: 0; color: var(--aj-text-secondary); font-size: 13px; }
.warehouse-line-number { color: var(--aj-text-subtle); font-size: 12px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.warehouse-line-grid { padding: 16px 0 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.warehouse-line-grid .warehouse-form-wide { grid-column: 1 / -1; }
.warehouse-line-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 20px 20px 0; }
.warehouse-line-heading > span { color: var(--aj-text-secondary); font-size: 13px; }
.warehouse-confidence { display: inline-flex; min-height: 26px; align-items: center; padding: 4px 8px; border-radius: 999px; background: #edf8f1; color: #14714b; font-size: 12px; font-weight: 760; }
.warehouse-confidence.low { background: #fff8e8; color: #8b5f0d; }
.warehouse-quality-flags { display: flex; min-width: 0; flex-wrap: wrap; gap: 10px; grid-column: 1 / -1; margin: 0; padding: 12px; border: 1px solid var(--aj-border); border-radius: 10px; }
.warehouse-quality-flags legend { padding-inline: 5px; color: var(--aj-text-secondary); font-size: 12px; font-weight: 750; }
.warehouse-quality-flags label,
.warehouse-line-confirm label { display: flex; min-height: 42px; align-items: center; gap: 8px; color: var(--aj-text-secondary); font-size: 13px; font-weight: 600; }
.warehouse-line-confirm { display: grid; gap: 4px; padding: 14px 0 0; }
.warehouse-sticky-actions,
.warehouse-approval-panel { position: sticky; bottom: 0; z-index: 4; padding: 14px 20px; border: 1px solid var(--aj-border-strong); border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 -8px 24px rgba(19,35,31,.09); backdrop-filter: blur(8px); }
.warehouse-sticky-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.warehouse-approval-panel { display: grid; gap: 10px; }
.warehouse-approval-actions { justify-content: flex-end; }
.warehouse-pick-grid,
.warehouse-issue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 16px 20px 20px; }
.warehouse-pick-card,
.warehouse-issue-card { min-width: 0; padding: 16px; border: 1px solid var(--aj-border); border-radius: 12px; background: var(--aj-surface-soft); }
.warehouse-pick-card h3,
.warehouse-issue-card h3 { margin: 0 0 5px; color: var(--aj-text); font-size: 17px; }
.warehouse-pick-card p,
.warehouse-issue-card p { margin: 0; color: var(--aj-text-secondary); font-size: 13px; }
.warehouse-pick-form,
.warehouse-issue-card form,
.warehouse-row-form { display: grid; gap: 10px; margin-block-start: 14px; }
.warehouse-pick-form label,
.warehouse-issue-card label,
.warehouse-row-form label { display: grid; gap: 5px; color: var(--aj-text); font-size: 13px; font-weight: 680; }
.warehouse-reconciliation-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 20px 16px; padding: 12px 14px; border: 1px solid var(--aj-border); border-radius: 10px; background: var(--aj-soft-green); }
.warehouse-reconciliation-bar strong { color: var(--aj-primary); font-size: 14px; }
.warehouse-shortage { color: #a83030; font-weight: 750; }
.warehouse-reconciled-copy { color: #14714b; font-weight: 700; }
.warehouse-transfer-lines { grid-template-columns: minmax(0,1fr); padding-block-start: 0; }
.warehouse-transfer-line { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px; border: 1px solid var(--aj-border); border-radius: 10px; background: var(--aj-surface-soft); }
.warehouse-transfer-line-detail { grid-column: 1 / -1; color: var(--aj-text-secondary); font-size: 12px; }
.warehouse-count-approval { margin: 0 20px 16px; padding: 14px; border: 1px solid #ead49b; border-radius: 10px; background: #fff8e8; }
.warehouse-blind-value { color: var(--aj-text-subtle); font-size: 12px; font-style: italic; }
.warehouse-scanner-body { display: grid; gap: 16px; padding: 20px; }
.warehouse-scan-dialog { width: min(560px, calc(100vw - 32px)); max-width: calc(100vw - 32px); padding: 0; border: 0; border-radius: 18px; color: var(--aj-text); box-shadow: var(--aj-shadow-md); }
.warehouse-scan-dialog::backdrop { background: rgba(7,40,32,.6); backdrop-filter: blur(3px); }
.warehouse-dialog-head { display: flex; min-width: 0; align-items: start; justify-content: space-between; gap: 14px; padding: 20px; border-bottom: 1px solid var(--aj-border); }
.warehouse-dialog-head h2 { margin: 4px 0 0; font-size: 22px; }
.warehouse-dialog-head button { min-width: 44px; min-height: 44px; border: 1px solid var(--aj-border); border-radius: 10px; background: var(--aj-surface); color: var(--aj-text); font-size: 24px; line-height: 1; }
.warehouse-scan-state { padding: 14px; border-radius: 10px; background: var(--aj-soft-green); color: var(--aj-text-secondary); font-size: 14px; }
.warehouse-scan-form { display: grid; gap: 12px; }
.warehouse-scan-form label { display: grid; gap: 6px; color: var(--aj-text); font-size: 13px; font-weight: 720; }
.warehouse-scan-form .actions { justify-content: flex-end; }
.warehouse-scan-dialog video { width: 100%; min-height: 220px; border-radius: 12px; background: #10231d; object-fit: cover; }

@media (max-width: 1100px) {
  .warehouse-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .warehouse-material-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .warehouse-form-grid, .warehouse-line-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .warehouse-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .warehouse-pick-grid, .warehouse-issue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .warehouse-workspace-page .page { padding: 14px 12px calc(98px + env(safe-area-inset-bottom)); }
  .warehouse-workspace-page .warehouse-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 26px 20px 22px; border-radius: 18px; }
  .warehouse-workspace-page .warehouse-hero h1 { font-size: clamp(28px, 9vw, 42px); }
  .warehouse-workspace-page .warehouse-hero p { font-size: 15px !important; }
  .warehouse-hero-actions { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  .warehouse-hero-actions .button { width: 100%; min-width: 0; }
  .warehouse-workspace-page .warehouse-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-block-end: 18px; }
  .warehouse-tabs a { min-width: 0; min-height: 44px; padding-inline: 6px; font-size: 12px; }
  .warehouse-section-head { align-items: start; flex-direction: column; gap: 8px; }
  .warehouse-section-head h2 { font-size: 24px; }
  .warehouse-kpi-grid, .warehouse-material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .warehouse-kpi { min-height: 120px; padding: 14px; }
  .warehouse-kpi > strong { font-size: 30px; }
  .warehouse-two-column, .warehouse-review-shell { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .warehouse-document-preview { position: static; }
  .warehouse-record-list-horizontal { grid-template-columns: minmax(0, 1fr); }
  .warehouse-card-table { padding-inline: 12px; }
  .warehouse-card-table > .warehouse-table-head { display: none; }
  .warehouse-card-table > article { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; padding: 14px; margin-block: 8px; border: 1px solid var(--aj-border); border-radius: 12px; background: var(--aj-surface-soft); box-shadow: 0 4px 14px rgba(19,35,31,.04); }
  .warehouse-card-table > article > div { display: grid; gap: 3px; min-width: 0; padding: 9px 0; border-top: 1px solid #e8eeea; }
  .warehouse-card-table > article > div:first-child { border-top: 0; }
  .warehouse-card-table > article > div::before { content: attr(data-label); color: var(--aj-text-subtle); font-size: 11px; font-weight: 780; letter-spacing: .07em; line-height: 1.25; text-transform: uppercase; }
  .warehouse-card-table > article > div:only-child,
  .warehouse-card-table > article > .warehouse-row-actions,
  .warehouse-card-table > article > div[data-label="Actions"] { grid-column: 1 / -1; }
  .warehouse-form-grid, .warehouse-filter-grid, .warehouse-invoice-review-form, .warehouse-line-grid, .warehouse-transfer-form, .warehouse-count-form { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
  .warehouse-filter-panel .warehouse-filter-grid { padding: 14px 16px 16px; }
  .warehouse-form-wide, .warehouse-line-grid .warehouse-form-wide, .warehouse-quality-flags { grid-column: 1; }
  .warehouse-pick-grid, .warehouse-issue-grid { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 16px; }
  .warehouse-upload .panel-head, .warehouse-line-heading, .warehouse-line-summary { align-items: start; flex-direction: column; }
  .warehouse-upload .panel-head { padding-inline: 16px !important; }
  .warehouse-line-heading { gap: 4px; padding: 16px 16px 0; }
  .warehouse-invoice-lines { padding: 0 16px 16px; }
  .warehouse-invoice-line { padding: 14px; }
  .warehouse-line-grid { padding: 14px 0 0; }
  .warehouse-extracted-text, .warehouse-warning-list { margin-inline: 16px; }
  .warehouse-sticky-actions, .warehouse-approval-panel { position: static; padding: 14px 16px; }
  .warehouse-sticky-actions .button, .warehouse-approval-actions .button, .warehouse-workflow-actions .button, .warehouse-secondary-actions .button { flex: 1 1 160px; }
  .warehouse-transfer-line { grid-template-columns: minmax(0, 1fr); }
  .warehouse-transfer-line-detail { grid-column: 1; }
  .warehouse-reconciliation-bar { margin-inline: 16px; }
  .warehouse-scan-dialog { width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .warehouse-scanner-body { overflow: auto; }
}

@media (max-width: 430px) {
  .warehouse-hero-actions { grid-template-columns: minmax(0, 1fr); }
  .warehouse-workspace-page .warehouse-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .warehouse-kpi-grid, .warehouse-material-grid { grid-template-columns: minmax(0, 1fr); }
  .warehouse-kpi { min-height: 104px; }
  .warehouse-card-table > article { grid-template-columns: minmax(0, 1fr); }
  .warehouse-card-table > article > div,
  .warehouse-card-table > article > div:only-child,
  .warehouse-card-table > article > .warehouse-row-actions,
  .warehouse-card-table > article > div[data-label="Actions"] { grid-column: 1; }
  .warehouse-row-actions .button { flex: 1 1 100%; }
  .warehouse-workspace-page .warehouse-hero h1 { font-size: 29px; }
}

@media (max-width: 360px) {
  .warehouse-workspace-page .page { padding-inline: 10px; }
  .warehouse-workspace-page .warehouse-tabs { margin-inline: -2px; }
  .warehouse-tabs a { font-size: 12px; }
  .warehouse-kpi { padding: 13px; }
}

html[dir="rtl"] .warehouse-workspace-page .warehouse-record > div:last-child,
html[dir="rtl"] .warehouse-record-metric { text-align: start; }
html[dir="rtl"] .warehouse-hero-actions { justify-content: flex-start; }

/* Marketing Hub keeps its primary navigation easy to scan and tap on phones. */
@media (max-width: 820px) {
  .marketing-hub-page .mh-hero {
    display: flex;
    min-height: 232px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-end;
    gap: 16px;
    padding: 24px 18px;
    border-radius: 20px;
  }
  .marketing-hub-page .mh-hero-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .marketing-hub-page .mh-hero-actions .mh-language-switch {
    width: max-content;
    grid-column: 1 / -1;
  }
  .marketing-hub-page .mh-hero-actions .mh-button {
    width: 100%;
    min-width: 0;
  }
  .marketing-hub-page .mh-nav-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 6px;
  }
  .marketing-hub-page .mh-nav {
    display: grid !important;
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex-wrap: initial !important;
    gap: 6px;
    overflow: visible;
    padding: 0;
  }
  .marketing-hub-page .mh-nav-item {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    justify-content: center;
    padding: 7px 6px;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .marketing-hub-page .mh-nav-scroll {
    display: none !important;
  }
  .marketing-hub-page .mh-mega-menu {
    position: static;
    inset: auto;
    width: 100%;
    max-height: calc(100vh - 170px);
    margin-top: 2px;
  }
  .marketing-hub-page .mh-nav-more {
    position: static;
    min-width: max-content;
  }
  .marketing-hub-page .mh-nav-more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100vh - 142px);
  }
}

/* Marketing Hub fills the desktop navigation bar instead of leaving a trailing gap. */
@media (min-width: 821px) {
  .marketing-hub-page .mh-nav-shell {
    display: block;
  }
  .marketing-hub-page .mh-nav {
    display: grid !important;
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding: 0 1px 2px;
  }
  .marketing-hub-page .mh-nav-item {
    width: 100%;
    flex: none;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
  }
  .marketing-hub-page .mh-nav-scroll {
    display: none !important;
  }
}