/* Inter, self-hosted. Replaces a blocking fonts.googleapis.com stylesheet:
       food trucks run on mobile hotspots, where a third-party render-blocking
       request is both a cold-start stall and a single point of failure.

       These rules are upstream's own (fonts.googleapis.com/css2?family=Inter
       :wght@400;500;600;700&display=swap) with only the URLs swapped, so
       rendering is unchanged. Inter v20 is a VARIABLE font — upstream points
       all four weights at one file per subset, so there are two files here, not
       eight; giving each weight its own URL would quadruple the bytes for
       identical content. Filenames are content-addressed because these are
       served immutable for a year and CSS is not hash-processed at boot.
       Only latin and latin-ext are carried: this portal is EN/AR, Inter has no
       Arabic coverage (Arabic falls through the font-family chain below), and
       the cyrillic/greek/vietnamese subsets upstream ships are unreachable
       here. To update, re-run the fetch documented in docs/merchant-ops/. */
    /* latin */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('/merchant-assets/fonts/inter-latin-f11d729b.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('/merchant-assets/fonts/inter-latin-ext-cf3eb50f.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url('/merchant-assets/fonts/inter-latin-f11d729b.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url('/merchant-assets/fonts/inter-latin-ext-cf3eb50f.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url('/merchant-assets/fonts/inter-latin-f11d729b.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url('/merchant-assets/fonts/inter-latin-ext-cf3eb50f.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url('/merchant-assets/fonts/inter-latin-f11d729b.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url('/merchant-assets/fonts/inter-latin-ext-cf3eb50f.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    :root {
      --pkt-orange: #FD770B;
      --pkt-orange-hover: #E56A0A;
      --pkt-orange-light: #fff5eb;
      --pkt-green: #2D6A4F;
      --pkt-green-dark: #1a4a35;
      --pkt-green-light: #e8f5e9;

      --bg-body: #f5f7fa;
      --bg-card: #ffffff;
      --bg-sidebar: #ffffff;
      --bg-topbar: rgba(255,255,255,0.85);
      --bg-hover: #f0f2f5;
      --bg-active: #fff5eb;
      --bg-input: #ffffff;
      --bg-badge: #f0f2f5;
      --bg-section: #f9fafb;

      --text-primary: #111827;
      --text-secondary: #6b7280;
      --text-tertiary: #9ca3af;
      --text-inverse: #ffffff;

      --border-color: #e5e7eb;
      --border-light: #f3f4f6;

      --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
      --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
      --shadow-lg: 0 10px 25px rgba(0,0,0,0.08);

      --space-xs: 4px;
      --space-sm: 8px;
      --space-md: 12px;
      --space-lg: 16px;
      --space-xl: 20px;
      --space-2xl: 24px;
      --space-3xl: 32px;
      --space-4xl: 48px;

      --radius-sm: 6px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-xl: 16px;
      --radius-full: 9999px;

      --font-xs: 11px;
      --font-sm: 13px;
      --font-base: 14px;
      --font-md: 15px;
      --font-lg: 18px;
      --font-xl: 22px;
      --font-2xl: 28px;

      --sidebar-width: 260px;
      --sidebar-collapsed: 68px;
      --topbar-height: 64px;

      --transition-fast: 0.15s ease;
      --transition: 0.2s ease;
      --transition-slow: 0.3s ease;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: var(--bg-body);
      color: var(--text-primary);
      font-size: var(--font-base);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

    .hidden { display: none !important; }

    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes pulse-border { 0%, 100% { border-color: #f44336; } 50% { border-color: #ff8a80; } }
    @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

    /* ============ LOGIN ============ */
    .login-wrapper {
      min-height: 100vh;
      display: flex;
      background: var(--bg-body);
    }
    .login-brand {
      flex: 1;
      background: linear-gradient(135deg, var(--pkt-green) 0%, var(--pkt-green-dark) 60%, #0f3d2e 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: var(--space-4xl);
      position: relative;
      overflow: hidden;
    }
    .login-brand::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(253,119,11,0.15) 0%, transparent 70%);
      pointer-events: none;
    }
    .login-brand-logo {
      font-size: 72px;
      font-weight: 700;
      color: var(--pkt-green-light);
      letter-spacing: -2px;
      margin-bottom: var(--space-lg);
    }
    .login-brand-logo .dot { color: var(--pkt-orange); }
    .login-brand-tagline {
      font-size: var(--font-lg);
      color: rgba(255,255,255,0.7);
      text-align: center;
      max-width: 300px;
      line-height: 1.6;
    }
    .login-form-side {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-4xl);
    }
    .login-container {
      width: 100%;
      max-width: 400px;
    }
    .login-container h2 {
      font-size: var(--font-2xl);
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: var(--space-sm);
    }
    .login-subtitle {
      color: var(--text-secondary);
      margin-bottom: var(--space-3xl);
      font-size: var(--font-md);
    }
    .login-mode-tabs {
      display: flex;
      gap: var(--space-xs);
      margin-bottom: var(--space-2xl);
      background: var(--bg-section);
      border-radius: var(--radius-md);
      padding: 3px;
    }
    .login-mode-btn {
      flex: 1;
      padding: 10px;
      border: none;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-weight: 600;
      font-size: var(--font-base);
      transition: all var(--transition);
      font-family: inherit;
    }
    .login-mode-btn.active {
      background: var(--pkt-orange);
      color: white;
      box-shadow: var(--shadow-sm);
    }
    .login-mode-btn:not(.active) {
      background: transparent;
      color: var(--text-secondary);
    }
    .login-mode-btn:not(.active):hover {
      color: var(--text-primary);
      background: var(--bg-hover);
    }
    .form-group { margin-bottom: var(--space-xl); }
    .form-group label {
      display: block;
      margin-bottom: var(--space-sm);
      font-weight: 500;
      font-size: var(--font-sm);
      color: var(--text-secondary);
    }
    .form-group input, .form-group select, .form-group textarea {
      width: 100%;
      padding: 11px 14px;
      border: 1.5px solid var(--border-color);
      border-radius: var(--radius-md);
      font-size: var(--font-base);
      font-family: inherit;
      background: var(--bg-input);
      color: var(--text-primary);
      transition: border-color var(--transition), box-shadow var(--transition);
      outline: none;
    }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
      border-color: var(--pkt-orange);
      box-shadow: 0 0 0 3px rgba(253,119,11,0.12);
    }
    .form-group input::placeholder { color: var(--text-tertiary); }
    .btn {
      width: 100%;
      padding: 12px;
      background: var(--pkt-orange);
      color: white;
      border: none;
      border-radius: var(--radius-md);
      font-size: var(--font-md);
      font-weight: 600;
      cursor: pointer;
      transition: all var(--transition);
      font-family: inherit;
    }
    .btn:hover { background: var(--pkt-orange-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(253,119,11,0.3); }
    .btn:active { transform: translateY(0); }
    .btn:disabled { background: var(--border-color); cursor: not-allowed; transform: none; box-shadow: none; }
    .error { color: #dc2626; text-align: center; margin-top: var(--space-lg); font-size: var(--font-sm); }

    /* ============ LAYOUT SHELL ============ */
    .app-layout {
      display: flex;
      min-height: 100vh;
    }

    /* ============ SIDEBAR ============ */
    .sidebar {
      width: var(--sidebar-width);
      background: var(--bg-sidebar);
      border-right: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 100;
      transition: transform var(--transition-slow), width var(--transition-slow);
      overflow-y: auto;
      overflow-x: hidden;
    }
    .sidebar-header {
      padding: var(--space-xl) var(--space-xl) var(--space-lg);
      border-bottom: 1px solid var(--border-light);
    }
    .sidebar-logo {
      font-size: 32px;
      font-weight: 700;
      color: var(--pkt-green);
      letter-spacing: -1px;
      margin-bottom: var(--space-lg);
    }
    .sidebar-logo .dot { color: var(--pkt-orange); }
    .sidebar-truck-select select {
      width: 100%;
      padding: 9px 12px;
      border: 1.5px solid var(--border-color);
      border-radius: var(--radius-md);
      font-size: var(--font-sm);
      background: var(--bg-input);
      color: var(--text-primary);
      font-family: inherit;
      cursor: pointer;
      transition: border-color var(--transition);
    }
    .sidebar-truck-select select:focus {
      border-color: var(--pkt-orange);
      outline: none;
    }
    .sidebar-nav {
      flex: 1;
      padding: var(--space-md) var(--space-md);
    }
    .nav-group {
      margin-bottom: var(--space-lg);
    }
    .nav-group-label {
      font-size: var(--font-xs);
      font-weight: 600;
      color: var(--text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: var(--space-sm) var(--space-md);
      margin-bottom: var(--space-xs);
    }
    .nav-item {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      width: 100%;
      padding: 9px var(--space-md);
      border: none;
      border-radius: var(--radius-md);
      background: transparent;
      color: var(--text-secondary);
      font-size: var(--font-base);
      font-weight: 500;
      cursor: pointer;
      transition: all var(--transition);
      text-align: left;
      font-family: inherit;
      white-space: nowrap;
    }
    .nav-item:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }
    .nav-item.active {
      background: var(--bg-active);
      color: var(--pkt-orange);
      font-weight: 600;
    }
    .nav-item svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .nav-item .nav-label { flex: 1; }
    .sidebar-footer {
      padding: var(--space-md);
      border-top: 1px solid var(--border-light);
    }
    .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 99;
      backdrop-filter: blur(2px);
    }
    .sidebar-overlay.active { display: block; }

    /* ============ TOPBAR ============ */
    .main-content {
      flex: 1;
      min-width: 0;
      margin-left: var(--sidebar-width);
      transition: margin-left var(--transition-slow);
      min-height: 100vh;
    }
    .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      height: var(--topbar-height);
      background: var(--bg-topbar);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--space-2xl);
    }
    .topbar-left {
      display: flex;
      min-width: 0;
      flex: 1;
      align-items: center;
      gap: var(--space-lg);
    }
    .topbar-left h1 {
      font-size: var(--font-lg);
      font-weight: 600;
      color: var(--text-primary);
    }
    .hamburger-btn {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: var(--space-sm);
      border-radius: var(--radius-sm);
      color: var(--text-primary);
      transition: background var(--transition);
    }
    .hamburger-btn:hover { background: var(--bg-hover); }
    .hamburger-btn svg { width: 24px; height: 24px; }
    .topbar-right {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }
    .topbar-btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
      padding: 7px 14px;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-full);
      background: var(--bg-card);
      color: var(--text-secondary);
      font-size: var(--font-sm);
      font-weight: 500;
      cursor: pointer;
      transition: all var(--transition);
      white-space: nowrap;
      font-family: inherit;
    }
    .topbar-btn:hover {
      background: var(--bg-hover);
      border-color: var(--text-tertiary);
      color: var(--text-primary);
    }
    #topbar-truck-status { display:flex; align-items:center; gap:6px; min-width:0; }
    .truck-current-name { min-width:0; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-secondary); font-size:var(--font-sm); font-weight:600; }
    .truck-status-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: var(--radius-full);
      font-size: var(--font-sm);
      font-weight: 600;
    }
    .truck-status-pill.open { background: var(--pkt-green-light); color: var(--pkt-green); }
    .truck-status-pill.closed { background: #fef2f2; color: #dc2626; }
    .truck-status-pill .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      animation: pulse-dot 2s infinite;
    }
    .truck-status-pill.open .status-dot { background: var(--pkt-green); }
    .truck-status-pill.closed .status-dot { background: #dc2626; }

    /* ============ CONTENT AREA ============ */
    .content-area {
      padding: var(--space-2xl);
      max-width: 1400px;
      animation: fadeIn 0.3s ease;
    }

    /* ============ STATS GRID ============ */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--space-xl);
      margin-bottom: var(--space-2xl);
    }
    .stat-card {
      background: var(--bg-card);
      padding: var(--space-2xl);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-light);
      transition: all var(--transition);
      position: relative;
      overflow: hidden;
    }
    .stat-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--pkt-orange), var(--pkt-green));
      opacity: 0;
      transition: opacity var(--transition);
    }
    .stat-card:hover::before { opacity: 1; }
    .stat-card:hover { box-shadow: var(--shadow-md); }
    .stat-card h3 {
      font-size: var(--font-sm);
      font-weight: 500;
      color: var(--text-secondary);
      margin-bottom: var(--space-sm);
    }
    .stat-card .value {
      font-size: var(--font-2xl);
      font-weight: 700;
      color: var(--pkt-orange);
    }
    .stat-card .stat-label { font-size: var(--font-sm); color: var(--text-secondary); margin-top: 4px; }
    .stat-card .stat-value { font-size: var(--font-2xl); font-weight: 700; color: var(--pkt-orange); }

    /* ============ CARDS ============ */
    .card {
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-light);
      margin-bottom: var(--space-xl);
      overflow: hidden;
      transition: box-shadow var(--transition);
    }
    .card:hover { box-shadow: var(--shadow-sm); }
    .card-header {
      padding: var(--space-xl) var(--space-2xl);
      border-bottom: 1px solid var(--border-light);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .card-header h2 {
      font-size: var(--font-lg);
      font-weight: 600;
      color: var(--text-primary);
    }
    .card-body { padding: var(--space-2xl); }

    /* ============ ORDER CARDS ============ */
    .order-card {
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      margin-bottom: var(--space-md);
      border: 1.5px solid var(--border-light);
      overflow: hidden;
      transition: all var(--transition);
    }
    .order-card:hover { border-color: var(--border-color); box-shadow: var(--shadow-sm); }
    .order-card.urgent { border-color: #f44336; animation: pulse-border 2s infinite; }
    .order-card.new-order { border-color: var(--pkt-orange); box-shadow: 0 0 0 3px rgba(253,119,11,0.1); }
    .order-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--space-lg) var(--space-xl);
      cursor: pointer;
      transition: background var(--transition);
    }
    .order-header:hover { background: var(--bg-section); }
    .order-header-left {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      flex: 1;
    }
    .order-number {
      font-weight: 700;
      font-size: var(--font-md);
      color: var(--text-primary);
      font-family: 'SF Mono', 'Fira Code', monospace;
    }
    .order-time { font-size: var(--font-xs); color: var(--text-tertiary); }
    .order-customer { font-size: var(--font-xs); color: var(--text-secondary); font-weight: 500; }
    .order-timer {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      border-radius: var(--radius-full);
      font-size: var(--font-xs);
      font-weight: 600;
    }
    .timer-ok { background: #ecfdf5; color: #059669; }
    .timer-warning { background: #fffbeb; color: #d97706; }
    .timer-urgent { background: #fef2f2; color: #dc2626; }
    .order-header-right {
      display: flex;
      align-items: center;
      gap: var(--space-md);
    }
    .order-total { font-weight: 700; font-size: var(--font-lg); color: var(--pkt-orange); }
    .expand-icon {
      font-size: 18px;
      color: var(--text-tertiary);
      transition: transform var(--transition);
      line-height: 1;
    }
    .order-card.expanded .expand-icon { transform: rotate(180deg); }

    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px;
      border-radius: var(--radius-full);
      font-size: var(--font-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    .status-badge::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .status-PAID { background: #eff6ff; color: #2563eb; }
    .status-PAID::before { background: #2563eb; }
    .status-ACCEPTED { background: #fffbeb; color: #d97706; }
    .status-ACCEPTED::before { background: #d97706; }
    .status-PREPARING { background: #fdf2f8; color: #db2777; }
    .status-PREPARING::before { background: #db2777; }
    .status-READY { background: #ecfdf5; color: #059669; }
    .status-READY::before { background: #059669; }
    .status-COMPLETED { background: var(--bg-badge); color: var(--text-secondary); }
    .status-COMPLETED::before { background: var(--text-secondary); }
    .status-CANCELLED { background: #fef2f2; color: #dc2626; }
    .status-CANCELLED::before { background: #dc2626; }
    .status-PENDING { background: var(--bg-badge); color: var(--text-tertiary); }
    .status-PENDING::before { background: var(--text-tertiary); }

    /* Non-blocking messages and per-card errors (plan 03 task 10), replacing
       the alert() calls in the orders flow. */
    .pkt-toast {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 9999;
      max-width: min(420px, calc(100vw - 40px));
      padding: 14px 20px;
      border-radius: var(--radius-lg);
      font-size: var(--font-sm);
      font-weight: 500;
      box-shadow: var(--shadow-md);
      animation: fadeIn 0.2s ease;
    }
    [dir="rtl"] .pkt-toast { right: auto; left: 20px; }
    .pkt-toast-ok { background: var(--pkt-green); color: var(--text-inverse); }
    .pkt-toast-error { background: #dc2626; color: #ffffff; }

    /* Why a cancelled order ended (plan 03 task 11). */
    .order-ended-reason {
      font-size: var(--font-xs);
      font-weight: 600;
      color: var(--text-secondary);
      background: var(--bg-badge);
      padding: 2px 8px;
      border-radius: var(--radius-full);
    }

    /* Plan 05 task 5 -- a marker, not a lock, so it is styled identically to
       the ended-reason badge rather than drawing attention away from the
       card's primary actions. */
    .order-printed-badge {
      font-size: var(--font-xs);
      font-weight: 600;
      color: var(--text-secondary);
      background: var(--bg-badge);
      padding: 2px 8px;
      border-radius: var(--radius-full);
    }

    .order-error {
      display: none;
      font-size: var(--font-xs);
      font-weight: 500;
      color: #b91c1c;
      background: #fef2f2;
      border: 1px solid #fca5a5;
      border-radius: var(--radius-sm);
      padding: 6px 10px;
    }
    .order-error.visible { display: block; }
    body.dark-mode .order-error { color: #f87171; background: #450a0a; border-color: #7f1d1d; }

    /* Board / history split (plan 03 task 8). Additive: every value is a
       var(--...) token that body.dark-mode already redefines. */
    .orders-view-switch {
      display: flex;
      gap: var(--space-sm);
      margin-bottom: var(--space-md);
    }
    .orders-view-btn {
      padding: 8px 16px;
      border: 1.5px solid var(--border-color);
      background: var(--bg-card);
      color: var(--text-secondary);
      border-radius: var(--radius-full);
      font-size: var(--font-sm);
      font-weight: 600;
      cursor: pointer;
      transition: all var(--transition);
    }
    .orders-view-btn:hover { background: var(--bg-hover); }
    .orders-view-btn.active {
      background: var(--pkt-orange);
      border-color: var(--pkt-orange);
      color: var(--text-inverse);
    }

    .order-group { margin-bottom: var(--space-xl); }
    .order-group:last-child { margin-bottom: 0; }
    .order-group-title {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      font-size: var(--font-xs);
      font-weight: 600;
      color: var(--text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: var(--space-md);
    }
    .order-group-count {
      background: var(--bg-badge);
      color: var(--text-secondary);
      padding: 1px 8px;
      border-radius: var(--radius-full);
      font-size: var(--font-xs);
      font-weight: 700;
    }

    .order-pager {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-md);
      margin-top: var(--space-lg);
    }
    .order-pager-label { font-size: var(--font-sm); color: var(--text-secondary); }
    .order-pager button:disabled { opacity: 0.4; cursor: not-allowed; }

    /* Always-visible card face (plan 03 task 4). A sibling of .order-header,
       not a child: the header is a single flex row with an RTL override that
       reverses it, so making it a column would have reversed the vertical
       stacking in Arabic. Every value here is a var(--...) token, all of which
       body.dark-mode redefines, so the strip follows the theme on its own.
       Horizontal padding matches .order-header; no top padding, because the
       header's own bottom padding already separates them. */
    .order-face {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
      padding: 0 var(--space-xl) var(--space-lg);
    }
    .order-face-meta {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      font-size: var(--font-xs);
      color: var(--text-tertiary);
    }
    .order-face-count {
      font-weight: 600;
      color: var(--text-secondary);
    }
    .order-face-plate {
      font-family: 'SF Mono', 'Fira Code', monospace;
      font-weight: 600;
      color: var(--text-secondary);
      background: var(--bg-badge);
      padding: 2px 8px;
      border-radius: var(--radius-sm);
    }
    .order-face-actions {
      display: flex;
      gap: var(--space-sm);
      flex-wrap: wrap;
    }

    .order-body { display: none; }
    .order-card.expanded .order-body { display: block; animation: fadeIn 0.2s ease; }

    .order-section {
      padding: var(--space-lg) var(--space-xl);
      border-bottom: 1px solid var(--border-light);
    }
    .order-section:last-child { border-bottom: none; }
    .order-section-title {
      font-size: var(--font-xs);
      font-weight: 600;
      color: var(--text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: var(--space-md);
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }
    .order-section-title svg { width: 15px; height: 15px; }

    .order-items-list { display: flex; flex-direction: column; gap: var(--space-sm); }
    .order-item-row {
      display: flex;
      align-items: flex-start;
      gap: var(--space-md);
      padding: var(--space-md);
      background: var(--bg-section);
      border-radius: var(--radius-md);
      transition: opacity var(--transition);
    }
    .item-checkbox { flex-shrink: 0; }
    .item-checkbox input {
      width: 18px;
      height: 18px;
      accent-color: var(--pkt-green);
      cursor: pointer;
      border-radius: 4px;
    }
    .item-details { flex: 1; }
    .item-name {
      font-weight: 600;
      font-size: var(--font-base);
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }
    .item-qty {
      background: var(--pkt-orange);
      color: white;
      padding: 1px 7px;
      border-radius: var(--radius-full);
      font-size: var(--font-xs);
      font-weight: 600;
    }
    .item-modifiers { margin-top: 6px; }
    .item-modifier {
      font-size: var(--font-sm);
      color: var(--text-secondary);
      padding-left: 12px;
      border-left: 2px solid var(--pkt-orange);
      margin-top: 4px;
    }
    .item-modifier.add-on { color: var(--pkt-green); }
    .item-instructions {
      margin-top: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      background: #fef3c7;
      border-radius: var(--radius-sm);
      font-size: var(--font-sm);
      color: #92400e;
      border-left: 3px solid #f59e0b;
    }
    .item-price { font-weight: 600; color: var(--text-primary); white-space: nowrap; font-size: var(--font-sm); }
    .item-row-prepared { opacity: 0.45; }
    .item-row-prepared .item-name { text-decoration: line-through; }

    .vehicle-info { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
    .vehicle-detail {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-lg);
      background: var(--bg-section);
      border-radius: var(--radius-md);
    }
    .vehicle-detail .label { font-size: var(--font-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
    .vehicle-detail .value { font-weight: 600; font-size: var(--font-base); color: var(--text-primary); }
    .vehicle-plate {
      background: linear-gradient(135deg, var(--pkt-orange), var(--pkt-orange-hover));
      color: white;
      font-size: var(--font-lg);
      font-weight: 700;
      letter-spacing: 2px;
      padding: var(--space-md) var(--space-xl);
      border-radius: var(--radius-md);
      font-family: 'SF Mono', 'Fira Code', monospace;
    }

    .customer-note {
      background: #eff6ff;
      border-left: 3px solid #3b82f6;
      padding: var(--space-md) var(--space-lg);
      border-radius: 0 var(--radius-md) var(--radius-md) 0;
      font-size: var(--font-base);
      color: #1e40af;
    }

    .order-actions {
      display: flex;
      gap: var(--space-sm);
      flex-wrap: wrap;
      padding: var(--space-lg) var(--space-xl);
      background: var(--bg-section);
    }
    .status-btn {
      padding: 10px 18px;
      border: none;
      border-radius: var(--radius-md);
      font-size: var(--font-sm);
      cursor: pointer;
      font-weight: 600;
      transition: all var(--transition);
      flex: 1;
      min-width: 110px;
      font-family: inherit;
    }
    .status-btn.accept { background: #059669; color: white; }
    .status-btn.accept:hover { background: #047857; }
    .status-btn.prepare { background: #d97706; color: white; }
    .status-btn.prepare:hover { background: #b45309; }
    .status-btn.ready { background: #2563eb; color: white; }
    .status-btn.ready:hover { background: #1d4ed8; }
    .status-btn.complete { background: var(--text-secondary); color: white; }
    .status-btn.cancel { background: transparent; color: #dc2626; border: 1.5px solid #fca5a5; }
    .status-btn.cancel:hover { background: #fef2f2; }
    .status-btn.print { background: transparent; color: var(--text-secondary); border: 1.5px solid var(--border-color); }
    .status-btn.print:hover { background: var(--bg-hover); }
    .status-btn.refund { background: #dc2626; color: white; }
    .status-btn.refund:hover { background: #b91c1c; }
    .status-btn.ack { background: transparent; color: var(--text-secondary); border: 1.5px solid var(--border-color); }
    .status-btn.ack:hover { background: var(--bg-hover); }
    .status-btn:hover { transform: translateY(-1px); }
    .status-btn:active { transform: translateY(0); }
    .status-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

    .progress-bar { height: 3px; background: var(--border-light); border-radius: 2px; margin-top: var(--space-sm); overflow: hidden; }
    .progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--pkt-orange), var(--pkt-green)); transition: width 0.3s ease; border-radius: 2px; }

    /* ============ MENU ============ */
    .menu-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--space-lg);
      border-bottom: 1px solid var(--border-light);
      transition: background var(--transition);
    }
    .menu-item:last-child { border-bottom: none; }
    .menu-item:hover { background: var(--bg-section); }
    .menu-info h4 { font-size: var(--font-md); margin-bottom: 2px; color: var(--text-primary); }
    .menu-info p { font-size: var(--font-sm); color: var(--text-secondary); }
    .menu-price { font-weight: 700; color: var(--pkt-orange); font-size: var(--font-md); }
    .menu-actions { display: flex; gap: 6px; flex-wrap: wrap; }
    .menu-btn {
      padding: 6px 14px;
      border: 1.5px solid var(--border-color);
      border-radius: var(--radius-sm);
      background: var(--bg-card);
      cursor: pointer;
      font-size: var(--font-xs);
      font-weight: 500;
      color: var(--text-secondary);
      transition: all var(--transition);
      font-family: inherit;
    }
    .menu-btn:hover { background: var(--bg-hover); border-color: var(--text-tertiary); color: var(--text-primary); }
    .menu-btn.delete { color: #dc2626; border-color: #fca5a5; }
    .menu-btn.delete:hover { background: #fef2f2; border-color: #dc2626; }

    .add-btn {
      background: var(--pkt-orange);
      color: white;
      border: none;
      padding: 9px 18px;
      border-radius: var(--radius-md);
      cursor: pointer;
      font-size: var(--font-sm);
      font-weight: 600;
      transition: all var(--transition);
      font-family: inherit;
    }
    .add-btn:hover { background: var(--pkt-orange-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(253,119,11,0.25); }

    /* ============ MODALS ============ */
    .modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      backdrop-filter: blur(4px);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }
    .modal.active { display: flex; }
    .modal-content {
      background: var(--bg-card);
      padding: var(--space-2xl);
      border-radius: var(--radius-xl);
      max-width: 520px;
      width: 92%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: var(--shadow-lg);
      animation: fadeIn 0.2s ease;
    }
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-2xl);
      padding-bottom: var(--space-lg);
      border-bottom: 1px solid var(--border-light);
    }
    .modal-header h3 {
      font-size: var(--font-lg);
      font-weight: 600;
      color: var(--text-primary);
    }
    .close-btn {
      background: var(--bg-hover);
      border: none;
      width: 32px;
      height: 32px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      color: var(--text-secondary);
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--transition);
    }
    .close-btn:hover { background: var(--border-color); color: var(--text-primary); }

    /* ============ TRUCK SELECT ============ */
    .truck-select { margin-bottom: var(--space-xl); }
    .truck-select select {
      width: 100%;
      padding: 11px 14px;
      border: 1.5px solid var(--border-color);
      border-radius: var(--radius-md);
      font-size: var(--font-base);
      font-family: inherit;
      background: var(--bg-card);
      color: var(--text-primary);
      cursor: pointer;
    }
    .truck-select select:focus { border-color: var(--pkt-orange); outline: none; }
    .truck-management-panel { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:var(--space-xl); padding:16px 20px; border:1px solid var(--border-color); border-radius:var(--radius-lg); background:linear-gradient(110deg, var(--bg-card), var(--pkt-orange-light)); }
    .truck-management-copy { flex:1 1 260px; }
    .truck-management-copy strong { display:block; margin-bottom:3px; }
    .truck-management-copy span { color:var(--text-secondary); font-size:var(--font-sm); }
    .truck-name-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .truck-form-note { color:var(--text-secondary); font-size:var(--font-sm); margin:-8px 0 18px; }
    .truck-form-error { color:#b42318; background:#fef3f2; border:1px solid #fecdca; padding:10px 12px; border-radius:var(--radius-md); margin-bottom:14px; }
    .truck-action-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
    .truck-action-row .add-btn { width:auto; }
    .sidebar-add-truck { width:100%; margin-top:9px; padding:8px 10px; border:1px dashed rgba(253,119,11,.55); border-radius:var(--radius-md); background:var(--pkt-orange-light); color:#a74c00; font-size:var(--font-sm); font-weight:600; font-family:inherit; cursor:pointer; }
    .sidebar-add-truck:hover { background:#ffead7; }
    .quick-owner-checklist { margin-bottom:12px; padding:12px; border:1px solid #ead9bd; border-radius:var(--radius-md); background:#fff8ed; color:#614322; font-size:12px; line-height:1.5; }
    .quick-owner-checklist p { margin:5px 0; color:#77644e; }
    .quick-owner-checklist a { color:#a74c00; font-weight:700; text-decoration:none; }
    .login-recovery-note { margin-top:14px; padding:11px 13px; background:var(--bg-section); border-inline-start:3px solid var(--pkt-orange); border-radius:var(--radius-sm); color:var(--text-secondary); font-size:12px; line-height:1.6; }
    .truck-manager-label { font-size:var(--font-sm); font-weight:600; color:var(--text-secondary); margin-bottom:6px; display:block; }
    button:focus-visible, select:focus-visible, input:focus-visible { outline:3px solid rgba(253,119,11,.35); outline-offset:2px; }

    /* ============ TOGGLES ============ */
    .toggle-switch {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      margin-bottom: var(--space-lg);
    }
    .toggle-switch label { font-weight: 500; color: var(--text-primary); font-size: var(--font-base); }
    .toggle-switch input[type="checkbox"] { width: 44px; height: 24px; cursor: pointer; accent-color: var(--pkt-orange); }

    /* ============ REVIEWS ============ */
    .review-item {
      padding: var(--space-xl);
      border-bottom: 1px solid var(--border-light);
      transition: background var(--transition);
    }
    .review-item:last-child { border-bottom: none; }
    .review-item:hover { background: var(--bg-section); }
    .review-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-sm);
    }
    .review-rating { color: var(--pkt-orange); font-weight: 600; font-size: var(--font-md); letter-spacing: 2px; }
    .review-date { font-size: var(--font-xs); color: var(--text-tertiary); }
    .review-comment { font-size: var(--font-base); color: var(--text-primary); margin-bottom: var(--space-md); line-height: 1.6; }
    .review-reply {
      background: var(--bg-section);
      padding: var(--space-md);
      border-radius: var(--radius-md);
      margin-top: var(--space-sm);
      font-size: var(--font-sm);
      color: var(--text-secondary);
      border-left: 3px solid var(--pkt-orange);
    }
    .reply-input {
      width: 100%;
      padding: var(--space-md);
      border: 1.5px solid var(--border-color);
      border-radius: var(--radius-md);
      margin-top: var(--space-sm);
      font-family: inherit;
      font-size: var(--font-sm);
      background: var(--bg-input);
      color: var(--text-primary);
    }
    .reply-input:focus { border-color: var(--pkt-orange); outline: none; }
    .reply-btn {
      margin-top: var(--space-sm);
      padding: 7px 16px;
      background: var(--pkt-orange);
      color: white;
      border: none;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: var(--font-xs);
      font-weight: 600;
      transition: all var(--transition);
      font-family: inherit;
    }
    .reply-btn:hover { background: var(--pkt-orange-hover); }

    .empty-state {
      text-align: center;
      padding: var(--space-4xl) var(--space-xl);
      color: var(--text-tertiary);
      font-size: var(--font-base);
    }

    /* ============ FILTER BAR ============ */
    .filters-bar {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: var(--space-md);
      margin-bottom: var(--space-xl);
      padding: var(--space-lg);
      background: var(--bg-section);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-light);
    }
    .filters-bar label {
      display: block;
      font-size: var(--font-xs);
      font-weight: 600;
      color: var(--text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      margin-bottom: 6px;
    }
    .filters-bar input, .filters-bar select {
      width: 100%;
      padding: 9px 12px;
      border: 1.5px solid var(--border-color);
      border-radius: var(--radius-md);
      font-size: var(--font-sm);
      font-family: inherit;
      background: var(--bg-card);
      color: var(--text-primary);
    }
    .filters-bar input:focus, .filters-bar select:focus {
      border-color: var(--pkt-orange);
      outline: none;
    }
    .filter-clear-btn {
      align-self: flex-end;
      padding: 9px 16px;
      background: var(--bg-card);
      border: 1.5px solid var(--border-color);
      border-radius: var(--radius-md);
      cursor: pointer;
      font-size: var(--font-sm);
      font-weight: 500;
      color: var(--text-secondary);
      transition: all var(--transition);
      font-family: inherit;
    }
    .filter-clear-btn:hover { background: var(--bg-hover); }

    /* ============ DARK MODE ============ */
    body.dark-mode {
      --bg-body: #0a0a0a;
      --bg-card: #141414;
      --bg-sidebar: #0f0f0f;
      --bg-topbar: rgba(20,20,20,0.85);
      --bg-hover: #1f1f1f;
      --bg-active: #261a0a;
      --bg-input: #1a1a1a;
      --bg-badge: #1f1f1f;
      --bg-section: #1a1a1a;

      --text-primary: #f0f0f0;
      --text-secondary: #a0a0a0;
      --text-tertiary: #666666;

      --border-color: #2a2a2a;
      --border-light: #1f1f1f;

      --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
      --shadow-md: 0 4px 6px rgba(0,0,0,0.5);
      --shadow-lg: 0 10px 25px rgba(0,0,0,0.6);
    }
    body.dark-mode .login-brand { background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%); }
    body.dark-mode .login-brand-logo { color: #f0f0f0; }
    body.dark-mode .login-form-side { background: #0a0a0a; }
    body.dark-mode .sidebar { border-color: #1f1f1f; }
    body.dark-mode .topbar { border-color: #1f1f1f; }
    body.dark-mode input::placeholder { color: #555; }
    body.dark-mode .status-PAID { background: #1e3a5f; color: #60a5fa; }
    body.dark-mode .status-PAID::before { background: #60a5fa; }
    body.dark-mode .status-ACCEPTED { background: #422006; color: #fbbf24; }
    body.dark-mode .status-ACCEPTED::before { background: #fbbf24; }
    body.dark-mode .status-PREPARING { background: #4a1942; color: #f472b6; }
    body.dark-mode .status-PREPARING::before { background: #f472b6; }
    body.dark-mode .status-READY { background: #064e3b; color: #34d399; }
    body.dark-mode .status-READY::before { background: #34d399; }
    body.dark-mode .status-COMPLETED { background: #1f1f1f; color: #888; }
    body.dark-mode .status-CANCELLED { background: #450a0a; color: #f87171; }
    body.dark-mode .status-CANCELLED::before { background: #f87171; }
    body.dark-mode .truck-status-pill.open { background: #064e3b; color: #34d399; }
    body.dark-mode .truck-status-pill.closed { background: #450a0a; color: #f87171; }
    /* Cancel is the only status button with hardcoded light-mode colours, and
       it had no dark-mode pair. That was survivable while it only appeared
       inside an expanded card; now that task 4 puts it on the always-visible
       face it would be a pale pink border sitting permanently on a dark card. */
    body.dark-mode .status-btn.cancel { color: #f87171; border-color: #7f1d1d; }
    body.dark-mode .status-btn.cancel:hover { background: #450a0a; }
    body.dark-mode .item-instructions { background: #422006; color: #fcd34d; border-left-color: #f59e0b; }
    body.dark-mode .customer-note { background: #1e3a5f; color: #93c5fd; border-left-color: #3b82f6; }

    /* ============ RTL SUPPORT ============ */
    [dir="rtl"] {
      direction: rtl;
      text-align: right;
    }
    [dir="rtl"] .sidebar { left: auto; right: 0; border-right: none; border-left: 1px solid var(--border-color); }
    [dir="rtl"] .main-content { margin-left: 0; margin-right: var(--sidebar-width); }
    [dir="rtl"] .nav-item { text-align: right; flex-direction: row-reverse; }
    [dir="rtl"] .topbar { flex-direction: row-reverse; }
    [dir="rtl"] .topbar-left { flex-direction: row-reverse; }
    [dir="rtl"] .topbar-right { flex-direction: row-reverse; }
    [dir="rtl"] .header-actions { flex-direction: row-reverse !important; }

    [dir="rtl"] .order-header { flex-direction: row-reverse; }
    [dir="rtl"] .order-header-left { flex-direction: row-reverse; }
    [dir="rtl"] .order-header-right { flex-direction: row-reverse; }
    [dir="rtl"] .order-section-title { flex-direction: row-reverse; }
    [dir="rtl"] .order-item-row { flex-direction: row-reverse; }
    [dir="rtl"] .order-actions { flex-direction: row-reverse; }
    [dir="rtl"] .order-face-meta { flex-direction: row-reverse; }
    [dir="rtl"] .order-face-actions { flex-direction: row-reverse; }
    [dir="rtl"] .orders-view-switch { flex-direction: row-reverse; }
    [dir="rtl"] .order-group-title { flex-direction: row-reverse; }
    [dir="rtl"] .order-pager { flex-direction: row-reverse; }
    [dir="rtl"] .item-name { flex-direction: row-reverse; }
    [dir="rtl"] .item-modifier { padding-left: 0; padding-right: 12px; border-left: none; border-right: 2px solid var(--pkt-orange); }
    [dir="rtl"] .item-instructions { border-left: none; border-right: 3px solid #f59e0b; }
    [dir="rtl"] .vehicle-info { flex-direction: row-reverse; }
    [dir="rtl"] .vehicle-detail { flex-direction: row-reverse; }
    [dir="rtl"] .customer-note { border-left: none; border-right: 3px solid #3b82f6; border-radius: var(--radius-md) 0 0 var(--radius-md); }
    [dir="rtl"] .menu-item { flex-direction: row-reverse; }
    [dir="rtl"] .menu-actions { flex-direction: row-reverse; }
    [dir="rtl"] .modal-header { flex-direction: row-reverse; }
    [dir="rtl"] .toggle-switch { flex-direction: row-reverse; }
    [dir="rtl"] .review-header { flex-direction: row-reverse; }
    [dir="rtl"] .review-reply { border-left: none; border-right: 3px solid var(--pkt-orange); }
    [dir="rtl"] .form-group label { text-align: right; }
    [dir="rtl"] input[type="text"], [dir="rtl"] input[type="email"],
    [dir="rtl"] input[type="password"], [dir="rtl"] input[type="number"],
    [dir="rtl"] input[type="date"], [dir="rtl"] input[type="time"],
    [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; }
    [dir="rtl"] .hours-row-inner { flex-direction: row-reverse !important; }
    [dir="rtl"] #categories-container { direction: rtl; }
    [dir="rtl"] #categories-container label { flex-direction: row-reverse !important; }
    [dir="rtl"] .stat-card { text-align: right; }
    [dir="rtl"] .stat-card::before { background: linear-gradient(270deg, var(--pkt-orange), var(--pkt-green)); }
    [dir="rtl"] table { direction: rtl; }
    [dir="rtl"] th, [dir="rtl"] td { text-align: right; }
    [dir="rtl"] th:last-child, [dir="rtl"] td:last-child { text-align: left; }
    [dir="rtl"] ul { padding-right: 20px; padding-left: 0; }
    [dir="rtl"] .filters-bar { direction: rtl; }
    [dir="rtl"] .chart-container { direction: ltr; }
    [dir="rtl"] .login-container h2, [dir="rtl"] .login-subtitle { text-align: right; }

    [dir="rtl"] [style*="margin-left: 8px"] { margin-left: 0 !important; margin-right: 8px !important; }
    [dir="rtl"] [style*="margin-left: 10px"] { margin-left: 0 !important; margin-right: 10px !important; }
    [dir="rtl"] [style*="margin-left: 12px"] { margin-left: 0 !important; margin-right: 12px !important; }
    [dir="rtl"] [style*="margin-right: 8px"] { margin-right: 0 !important; margin-left: 8px !important; }
    [dir="rtl"] [style*="padding-left: 12px"] { padding-left: 0 !important; padding-right: 12px !important; }
    [dir="rtl"] [style*="padding-left: 15px"] { padding-left: 0 !important; padding-right: 15px !important; }
    [dir="rtl"] [style*="padding-left: 16px"] { padding-left: 0 !important; padding-right: 16px !important; }
    [dir="rtl"] [style*="padding-left: 50px"] { padding-left: 0 !important; padding-right: 50px !important; }
    [dir="rtl"] [style*="border-left:"] { border-left: none !important; border-right: inherit !important; }
    [dir="rtl"] [style*="text-align: left"] { text-align: right !important; }
    [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] p { text-align: right; }
    [dir="rtl"] #truck-selector { direction: rtl; }

    /* ============ RESPONSIVE ============ */
    @media (max-width: 1024px) {
      .sidebar {
        width: var(--sidebar-collapsed);
      }
      .sidebar .nav-label,
      .sidebar .nav-group-label,
      .sidebar-truck-select,
      .sidebar-header .sidebar-logo { display: none; }
      .sidebar-header { padding: var(--space-lg) var(--space-sm); text-align: center; }
      .sidebar .sidebar-logo-icon { display: block; font-size: 24px; font-weight: 700; color: var(--pkt-green); text-align: center; }
      .nav-item { justify-content: center; padding: 10px; }
      .nav-item svg { margin: 0; }
      .main-content { margin-left: var(--sidebar-collapsed); }
      [dir="rtl"] .main-content { margin-right: var(--sidebar-collapsed); margin-left: 0; }
    }
    @media (max-width: 768px) {
      .login-wrapper { flex-direction: column; }
      .login-brand { padding: var(--space-3xl) var(--space-xl); min-height: auto; }
      .login-brand-logo { font-size: 48px; }
      .login-form-side { padding: var(--space-2xl); }

      .sidebar {
        width: var(--sidebar-width);
        display: none;
        transform: translateX(-100%);
      }
      .truck-name-fields { grid-template-columns:1fr; }
      #operating-hours-container { grid-template-columns:minmax(0,1fr); }
      .hours-row { min-width:0; }
      .hours-row-inner { flex-wrap:wrap; }
      .truck-management-panel { align-items:stretch; }
      .truck-action-row .add-btn { flex:1; }
      .sidebar.open { display:flex; transform: translateX(0); box-shadow: var(--shadow-lg); }
      .sidebar .nav-label,
      .sidebar .nav-group-label,
      .sidebar-truck-select,
      .sidebar-header .sidebar-logo { display: revert; }
      .sidebar .sidebar-logo-icon { display: none; }
      .nav-item { justify-content: flex-start; padding: 9px var(--space-md); }
      .main-content { margin-left: 0; }
      .hamburger-btn { display: flex; }
      .content-area { padding: var(--space-lg); }
      .stats-grid { grid-template-columns: 1fr 1fr; }
      .topbar-right { gap: 4px; }
      .topbar-btn { padding: 6px 10px; font-size: var(--font-xs); }
      .topbar-btn .btn-label { display: none; }
      .modal-content { width: 96%; border-radius: var(--radius-lg); }
      .filters-bar { grid-template-columns: 1fr 1fr; }
      [dir="rtl"] .sidebar { transform: translateX(100%); left: auto; right: 0; }
      [dir="rtl"] .sidebar.open { transform: translateX(0); }
      [dir="rtl"] .main-content { margin-right: 0; }
    }
    @media (max-width: 480px) {
      .topbar { padding:0 var(--space-md); }
      .topbar-left { gap:var(--space-sm); }
      .topbar-left h1 { display:none; }
      .truck-current-name { max-width:100px; }
      .stats-grid { grid-template-columns: 1fr; }
      .filters-bar { grid-template-columns: 1fr; }
      .order-actions { flex-direction: column; }
      .order-face-actions { flex-direction: column; }
      .status-btn { min-width: auto; }
    }

    .sidebar-logo-icon { display: none; }