:root {
      --bg: #f7f8fc;
      --surface: #fff;
      --border: #e6e9f0;
      --text: #0f172a;
      --muted: #64748b;
      --accent: #ef4444;
      --success: #10b981;
      --warning: #f59e0b;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "Segoe UI", Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
    }
    .layout {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 260px 1fr;
      transition: grid-template-columns .2s ease;
    }
    .layout.collapsed { grid-template-columns: 72px 1fr; }
    .sidebar {
      background: var(--surface);
      border-right: 1px solid var(--border);
      padding: 12px 10px;
      overflow: hidden;
    }
    .brand {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 4px 12px;
    }
    .brand-text {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .8px;
    }
    .toggle {
      border: 1px solid #cbd5e1;
      background: #fff;
      border-radius: 8px;
      width: 30px;
      height: 30px;
      cursor: pointer;
    }
    .section-title {
      margin: 10px 6px 6px;
      font-size: 11px;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: .8px;
    }
    .menu-item {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: #1f2937;
      padding: 8px;
      border-radius: 10px;
      border: 1px solid transparent;
      font-size: 13px;
      white-space: nowrap;
    }
    .menu-item:hover { background: #f8fafc; border-color: #dbe2ea; }
    .menu-item.active {
      background: #ecfdf5;
      border-color: #a7f3d0;
      color: #065f46;
      font-weight: 600;
    }
    .icon {
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
    }
    .icon svg {
      width: 100%;
      height: 100%;
      stroke: currentColor;
      fill: none;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .layout.collapsed .brand-text,
    .layout.collapsed .section-title,
    .layout.collapsed .label { display: none; }
    .content { padding: 12px; }
    .panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .topbar {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }
    h1 { margin: 0; font-size: 22px; }
    .sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
    .actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .btn {
      border: 1px solid #cbd5e1;
      background: #fff;
      border-radius: 8px;
      padding: 7px 10px;
      font-size: 13px;
      cursor: pointer;
    }
    .btn.primary { background: var(--accent); border-color: #dc2626; color: #fff; }
    .btn.success { background: var(--success); border-color: #059669; color: #fff; }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn.btn-gated { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.25); }
    .table-section {
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #fff;
      overflow: hidden;
    }
    .table-header {
      background: #f8fafc;
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .table-title {
      font-weight: 600;
      font-size: 14px;
      color: #334155;
    }
    .table-title-note { font-size: 11px; color: #64748b; font-weight: 400; margin-left: 6px; }
    .table-wrap {
      max-height: 400px;
      overflow: auto;
    }
    table { width: 100%; border-collapse: collapse; }
    th, td {
      border-bottom: 1px solid var(--border);
      text-align: left;
      padding: 8px 7px;
      font-size: 13px;
    }
    th {
      color: #334155;
      background: #f8fafc;
      font-weight: 600;
      position: sticky;
      top: 0;
      z-index: 10;
    }
    .status-badge {
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
    }
    .status-pending { background: #fef3c7; color: #92400e; }
    .status-accepted { background: #dbeafe; color: #1e40af; }
    .status-processing { background: #d1fae5; color: #065f46; }
    .status-success { background: #d1fae5; color: #065f46; }
    .status-error { background: #fee2e2; color: #991b1b; }
    .status-duplicate { background: #f3e8ff; color: #6b21a8; }
    .po-badge {
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
    }
    .po-ok { background: #d1fae5; color: #065f46; }
    .po-missing { background: #fef3c7; color: #92400e; }
    .btn.po-btn { color: #b45309; border-color: #b45309; }
    .btn.warn { color: #b45309; border-color: #f59e0b; background: #fffbeb; }
    .btn.danger { color: #dc2626; border-color: #dc2626; }
    .btn.done-on  { background: #16a34a; border-color: #15803d; color: #fff; font-weight: 700; }
    .btn.done-off { background: #fff; border-color: #cbd5e1; color: #64748b; }
    tr.row-done td { opacity: 0.38; }
    tr.row-done { background: #f1f5f9; }
    tr.row-done td:last-child { opacity: 1; }
    tr.row-sync-warn td { background: #fffbeb; }
    .sync-warn-badge { background: #fef3c7; color: #92400e; }
    /* Table section colour themes */
    .table-section.blue-bg .table-header { background: #eff6ff; border-bottom-color: #bfdbfe; }
    .table-section.blue-bg { border-color: #bfdbfe; }
    .table-section.green-bg .table-header { background: #f0fdf4; border-bottom-color: #bbf7d0; }
    .table-section.green-bg { border-color: #bbf7d0; }
    .table-section.grey-bg .table-header { background: #f8fafc; border-bottom-color: #e2e8f0; }
    .table-section.grey-bg { border-color: #e2e8f0; }
    /* Status select in form */
    .status-select-wrap { position: relative; }
    .status-select-wrap select.form-input { background: #fff; cursor: pointer; }
    .status-hint { font-size: 11px; color: #64748b; margin-top: 3px; font-style: italic; }
    .expand-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 16px;
      padding: 0 4px;
    }
    .line-items-row {
      background: #f8fafc;
      display: none;
    }
    .line-items-row.expanded { display: table-row; }
    .line-items-content {
      padding: 10px 14px;
    }
    .line-items-table {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 6px;
      width: 100%;
    }
    .modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }
    .modal-overlay.active { display: flex; }
    .modal {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      max-width: 600px;
      width: 90%;
      max-height: 90vh;
      overflow-y: auto;
    }
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }
    .modal-title { font-size: 18px; font-weight: 600; margin: 0; }
    .modal-close {
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #64748b;
    }
    .form-group { margin-bottom: 12px; }
    .form-label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      margin-bottom: 4px;
    }
    .form-input {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      font-size: 13px;
    }
    .form-input:focus {
      outline: none;
      border-color: var(--accent);
    }
    .modal-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 16px;
    }
    /* Order Action Modal */
    .action-modal { max-width: 680px; }
    .action-buttons {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
      margin-bottom: 20px;
    }
    .action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 16px 10px;
      border-radius: 10px;
      border: 2px solid transparent;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      transition: opacity .15s, transform .1s;
    }
    .action-btn:hover { opacity: .85; transform: translateY(-1px); }
    .action-btn .action-icon { font-size: 22px; }
    .action-btn.blue  { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
    .action-btn.amber { background: #fffbeb; border-color: #fde68a; color: #92400e; }
    .action-btn.red   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
    .action-divider {
      border: none;
      border-top: 1px solid #e6e9f0;
      margin: 4px 0 16px;
    }
    .action-section-title {
      font-size: 11px;
      font-weight: 700;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: .7px;
      margin: 0 0 10px;
    }
    /* Stock level row colours */
    .stock-ok   td { background: #f0fdf4; }
    .stock-low  td { background: #fffbeb; }
    .stock-none td { background: #fef2f2; }
    .stock-unknown td { background: #f8fafc; color: #94a3b8; }
    .qty-badge {
      display: inline-block;
      padding: 1px 7px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 700;
    }
    .qty-ok   { background: #d1fae5; color: #065f46; }
    .qty-low  { background: #fef3c7; color: #92400e; }
    .qty-none { background: #fee2e2; color: #991b1b; }
    tr.postgres-row { cursor: pointer; }
    tr.postgres-row:hover td { background: #f0f9ff; }
    .alloc-badge {
      padding: 2px 7px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
    }
    .alloc-stock   { background: #d1fae5; color: #065f46; }
    .alloc-wo      { background: #dbeafe; color: #1e40af; }
    .alloc-wo-done { background: #dcfce7; color: #14532d; }
    .btn.btn-sm   { padding: 4px 8px; font-size: 12px; }
    .btn.btn-allocate { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
    .btn.btn-allocate:disabled { opacity: .45; cursor: not-allowed; }
    .btn.btn-wo   { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
    .btn.btn-wo:disabled { opacity: .45; cursor: not-allowed; }
    .wo-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    @media (max-width: 920px) {
      .layout, .layout.collapsed { grid-template-columns: 1fr; }
      .sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
      .action-buttons { grid-template-columns: 1fr; }
    }