/* ── CSS Variables ── */
    :root {
      --sidebar-width: 200px;
      --btn-danger: #c93140;
      --btn-danger-hover: #b02a37;
      --accent-rgb: 204, 53, 127;
      --success: #138670;
      --error: #d93a4a;
      --warn: #9c6708;
      --chan-d2c: #4b7bd1;
      --chan-b2b: #9457d6;
      --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    }

    /* ── Reset ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body {
      font-family: var(--font);
      color: var(--text-primary);
      background: var(--content-bg);
      display: flex;
      flex-direction: column;
    }

    /* ── Top Bar ── */
    #topbar {
      background: var(--topbar-bg);
      border-bottom: 1px solid var(--topbar-border);
      display: flex;
      align-items: center;
      padding: 0 20px;
      z-index: 100;
      flex-shrink: 0;
    }
    #topbar h1 {
      font-weight: 700;
      color: var(--text-primary);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #topbar h1 span {
      color: var(--sidebar-accent);
    }
    #fx-display {
      margin-left: auto;
      font-size: 12px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      gap: 6px;
    }
    #fx-display .fx-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--success);
    }
    #auth-controls {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: var(--text-muted);
    }
    #auth-user-label {
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ── App Shell ── */
    #app {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    /* ── Sidebar ── */
    #sidebar {
      background: var(--sidebar-bg);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .nav-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--sidebar-text-dim);
      padding: 0 16px 8px;
    }
    .nav-section-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 14px 16px 4px;
    }
    .nav-section-label--admin {
      margin-top: 12px;
      padding-top: 16px;
      border-top: 1px solid var(--sidebar-hover);
    }
    .nav-section-label:first-of-type { padding-top: 4px; }
    .nav-item {
      display: flex;
      align-items: center;
      cursor: pointer;
      color: var(--sidebar-text);
      position: relative;
      user-select: none;
    }
    
    .nav-item.active {
      border-left-color: var(--sidebar-accent);
    }
    .nav-item svg { flex-shrink: 0; }
    
    .nav-item:focus-visible,
    .btn:focus-visible,
    .ops-mode-btn:focus-visible {
      outline: 3px solid rgba(204,53,127,.45);
      outline-offset: 2px;
    }
    .nav-badge {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--sidebar-accent);
      margin-left: auto;
      display: none;
    }
    .nav-badge.visible { display: block; }
    /* Numeric variant of the same unread-dot slot, for a count instead of a
       plain presence indicator (e.g. overdue invoices, open deliveries). */
    .nav-badge--count {
      width: auto; height: auto; border-radius: 999px;
      padding: 1px 6px; font-size: 11px; font-weight: 700; line-height: 1.4;
      color: #fff;
    }

    /* ── Nav collapse toggle ── */
    #nav-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    #nav-header .nav-label { padding: 0; }
    #nav-collapse-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5px;
      background: transparent;
      border: 1px solid var(--sidebar-hover);
      color: var(--sidebar-text-dim);
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
      flex-shrink: 0;
    }
    #nav-collapse-btn:hover { background: var(--sidebar-hover); color: var(--sidebar-text); }

    #nav-expand-btn {
      display: none;
      position: fixed;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 100;
      padding: 10px 4px;
      background: var(--sidebar-bg);
      border: 1px solid var(--sidebar-hover);
      border-left: none;
      border-radius: 0 6px 6px 0;
      color: var(--sidebar-text-dim);
      cursor: pointer;
      transition: color 0.12s;
    }
    #nav-expand-btn:hover { color: var(--sidebar-text); }

    #app.nav-collapsed #sidebar {
      width: 0;
      padding: 0;
      overflow: hidden;
    }
    #app.nav-collapsed #nav-expand-btn { display: flex; align-items: center; }

    /* ── Content Area ── */
    #content {
      flex: 1;
      min-width: 0;
      overflow-y: auto;
      padding: 24px;
    }

    /* ── Tab Panels ── */
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /* ── Page Header ── */
    .page-header {
      display: flex;
      justify-content: space-between;
    }
    .page-header h2 {
      font-size: 18px;
      color: var(--text-primary);
    }

    /* ── Stacked sections (Settings) ── */
    .stacked-section { margin-bottom: 28px; }
    .stacked-section:last-child { margin-bottom: 0; }
    .stacked-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border);
    }
    .stacked-section-header h3 {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .stacked-section-header p {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    /* ── Card ── */
    .card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      overflow: hidden;
    }

    /* ── Buttons ── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: none;
      font-size: 13px;
      cursor: pointer;
      white-space: nowrap;
      font-family: var(--font);
    }
    .btn:active { transform: scale(0.98); }
    .btn-primary { background: var(--btn-primary); color: var(--btn-primary-text, #fff); }
    .btn-primary:hover { background: var(--btn-primary-hover); }
    .btn-danger { background: var(--btn-danger); color: var(--btn-danger-text, #fff); }
    .btn-danger:hover { background: var(--btn-danger-hover); }
    .btn-secondary { background: var(--btn-secondary); color: var(--text-secondary); }
    .btn-secondary:hover { background: var(--btn-secondary-hover); }
    .btn-sm { padding: 4px 10px; font-size: 12px; }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ── Tables ── */
    .table-wrap { overflow-x: auto; }
    table {
      width: 100%;
      border-collapse: collapse;
    }
    thead th {
      text-align: left;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    tbody tr {
      border-bottom: 1px solid var(--border);
    }
    tbody tr:last-child { border-bottom: none; }
    tbody tr:hover { background: var(--table-row-hover); }
    td {
      color: var(--text-primary);
      vertical-align: middle;
    }
    td[contenteditable="true"] {
      outline: none;
      cursor: text;
      text-decoration: underline dotted var(--text-muted);
      text-underline-offset: 3px;
    }
    td[contenteditable="true"]:focus {
      background: #fdf1e2;
      box-shadow: inset 0 0 0 2px var(--border-focus);
      border-radius: 2px;
    }
    .actions-cell {
      white-space: nowrap;
      text-align: right;
    }
    .table-footer {
      background: var(--table-header-bg);
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .total-row td {
      font-weight: 600;
      background: var(--table-header-bg);
      border-top: 2px solid var(--border);
    }

    /* ── Inline Add Row ── */
    .add-row td {
      padding: 8px 14px;
      background: #e8fbf5;
    }
    .add-row input, .add-row select {
      width: 100%;
      padding: 5px 8px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-family: var(--font);
      background: var(--card-bg);
      color: var(--text-primary);
      outline: none;
    }
    .add-row input:focus, .add-row select:focus {
      border-color: var(--border-focus);
      box-shadow: 0 0 0 2px rgba(204,53,127,0.15);
    }

    /* ── Select Input ── */
    select.inline-select {
      padding: 3px 6px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-family: var(--font);
      background: var(--card-bg);
      cursor: pointer;
      outline: none;
    }
    select.inline-select:focus { border-color: var(--border-focus); }

    /* ── Error / Notice ── */
    .error-msg {
      color: var(--error);
      font-size: 12.5px;
      padding: 8px 14px;
      background: #fff1f4;
      border-left: 3px solid var(--error);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      margin-top: 8px;
    }
    .error-msg + .error-msg,
    .ops-warn + .ops-warn { margin-top: 8px; }
    .stale-data-notice { padding: 9px 12px; background: #fff5e4; border: 1px solid #f7d08c; border-left: 3px solid #d49a24; border-radius: var(--radius-sm); color: #8a5c08; font-size: 12px; line-height: 1.45; }
    /* Same shape as .stale-data-notice but for a reassuring/neutral status
       message (e.g. "this is pending, don't resubmit") -- visually distinct
       from a real warning so the two aren't read the same way. */
    .info-notice { padding: 9px 12px; background: var(--table-header-bg); border: 1px solid var(--border); border-left: 3px solid var(--sidebar-accent); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
    .btn-link { border: 0; padding: 0; background: none; color: var(--sidebar-accent); cursor: pointer; font: inherit; text-decoration: underline; }
    .btn-link:focus { outline: 2px solid var(--border-focus); outline-offset: 2px; }
    /* ── BOM Tab ── */
    #bom-selector-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }
    #bom-selector-wrap label {
      font-size: 11px;
      font-weight: 700;
      text-transform:none;
      letter-spacing:-.005em;
      color: var(--text-muted);
    }
    #bom-product-select {
      padding: 7px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 13.5px;
      font-family: var(--font);
      background: var(--card-bg);
      min-width: 200px;
      outline: none;
      cursor: pointer;
    }
    #bom-product-select:focus { border-color: var(--border-focus); }

    /* ── Chat Tab ── */
    
    .chat-model-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--text-secondary);
    }
    .chat-model-wrap label {
      font-weight: 600;
    }
    .chat-model-wrap select {
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--card-bg);
      color: var(--text-primary);
      padding: 7px 10px;
      font: inherit;
      min-width: 110px;
      outline: none;
    }
    .chat-model-wrap select:focus {
      border-color: var(--border-focus);
      box-shadow: 0 0 0 3px rgba(204,53,127,0.12);
    }
    .chat-panel {
      display: flex;
      flex-direction: column;
      height: min(720px, calc(100vh - 180px));
      height: min(720px, calc(100dvh - 180px));
    }
    /* Compact variant for chat panels embedded within a longer tab (e.g. Planning),
       rather than a full-tab chat experience. */
    .chat-panel.compact {
      height: 420px;
    }
    .chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .chat-msg {
      display: flex;
      flex-direction: column;
      max-width: 75%;
    }
    .chat-msg.user { align-self: flex-end; align-items: flex-end; }
    .chat-msg.assistant { align-self: flex-start; align-items: flex-start; }
    .chat-bubble {
      padding: 10px 14px;
      border-radius: var(--radius);
      font-size: 13.5px;
      line-height: 1.55;
      word-break: break-word;
    }
    .chat-bubble > :first-child { margin-top: 0; }
    .chat-bubble > :last-child { margin-bottom: 0; }
    .chat-bubble p,
    .chat-bubble ul,
    .chat-bubble ol,
    .chat-bubble pre,
    .chat-bubble h1,
    .chat-bubble h2,
    .chat-bubble h3,
    .chat-bubble h4 {
      margin: 0 0 0.7em;
    }
    .chat-bubble ul,
    .chat-bubble ol {
      padding-left: 1.2em;
    }
    .chat-bubble li + li {
      margin-top: 0.2em;
    }
    .chat-bubble h1,
    .chat-bubble h2,
    .chat-bubble h3,
    .chat-bubble h4 {
      line-height: 1.3;
    }
    .chat-bubble h1 { font-size: 1.1em; }
    .chat-bubble h2 { font-size: 1.03em; }
    .chat-bubble h3,
    .chat-bubble h4 { font-size: 0.98em; }
    .chat-bubble code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.92em;
      background: rgba(43,33,54, 0.08);
      border-radius: 6px;
      padding: 0.1em 0.35em;
    }
    .chat-bubble pre {
      background: var(--table-header-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      overflow-x: auto;
    }
    .chat-bubble pre code {
      background: transparent;
      padding: 0;
      border-radius: 0;
      font-size: 0.9em;
    }
    .chat-bubble a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 0.15em;
    }
    .chat-msg.user .chat-bubble {
      background: var(--sidebar-accent);
      color: #fff;
      border-bottom-right-radius: 3px;
    }
    .chat-msg.assistant .chat-bubble {
      background: var(--card-bg);
      color: var(--text-primary);
      border: 1px solid var(--border);
      border-bottom-left-radius: 3px;
    }
    .chat-msg.user .chat-bubble code {
      background: rgba(255,255,255,0.18);
    }
    .chat-msg.user .chat-bubble pre {
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.18);
    }
    .chat-meta {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 4px;
      padding: 0 2px;
    }
    .chat-evidence-panel {
      margin-top: 7px;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,.52);
      font-size: 11px;
      line-height: 1.45;
      max-width: 100%;
    }
    .chat-evidence-row { color: var(--text-secondary); margin-top: 3px; }
    .chat-evidence-row--action { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
    .chat-evidence-open { flex:0 0 auto; border:0; padding:0; background:transparent; color:var(--btn-primary); font:inherit; font-size:10px; cursor:pointer; text-decoration:underline; }
    .chat-evidence-open:hover, .chat-evidence-open:focus-visible { color:var(--btn-primary-hover); }
    .chat-evidence-row--muted { color: var(--text-muted); }
    .chat-db-notice {
      font-size: 11.5px;
      color: var(--success);
      background: #e8fbf5;
      border: 1px solid #a5e6d3;
      border-radius: var(--radius-sm);
      padding: 4px 10px;
      margin-top: 4px;
      display: inline-block;
    }
    .chat-action-panel {
      margin-top: 8px;
      background: #fff5e4;
      border: 1px solid #f7d08c;
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      font-size: 12px;
      max-width: 100%;
    }
    .chat-action-label {
      font-weight: 600;
      color: #8a5c08;
      margin-bottom: 5px;
      font-size: 11px;
      text-transform:none;
      letter-spacing:-.005em;
    }
    .chat-action-summary {
      color: var(--text-secondary);
      white-space: pre-wrap;
      margin-bottom: 8px;
      line-height: 1.5;
    }
    .chat-action-btns { display: flex; gap: 8px; }
    .chat-action-status {
      font-size: 11.5px;
      color: var(--text-muted);
    }
    .typing-indicator {
      display: none;
      align-self: flex-start;
    }
    .typing-indicator.visible { display: flex; }
    .typing-dots {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 10px 16px;
      display: flex;
      gap: 5px;
      align-items: center;
    }
    .typing-dots span {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--text-muted);
      animation: bounce 1.2s infinite;
    }
    .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
    .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes bounce {
      0%, 60%, 100% { transform: translateY(0); }
      30% { transform: translateY(-6px); }
    }
    .chat-input-wrap {
      padding: 14px 16px;
      background: var(--card-bg);
      border-top: 1px solid var(--border);
      display: flex;
      gap: 10px;
      align-items: flex-end;
    }
    .chat-textarea {
      flex: 1;
      resize: none;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 9px 12px;
      font-size: 13.5px;
      font-family: var(--font);
      line-height: 1.5;
      min-height: 40px;
      max-height: 140px;
      outline: none;
      overflow-y: auto;
      color: var(--text-primary);
      background: var(--card-bg);
    }
    .chat-textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(204,53,127,0.12); }
    .chat-textarea::placeholder { color: var(--text-muted); }
    .chat-send-btn {
      flex-shrink: 0;
      padding: 9px 18px;
    }

    /* ── Empty State ── */
    .empty-state {
      text-align: center;
      padding: 48px 24px;
      color: var(--text-muted);
    }
    .empty-state svg { margin-bottom: 12px; opacity: 0.4; }
    .empty-state p { font-size: 14px; }

    /* ── Loading Overlay ── */
    #loading-overlay {
      position: fixed;
      inset: 0;
      background: rgba(255,255,255,0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      flex-direction: column;
      gap: 12px;
    }
    #loading-overlay.hidden { display: none; }
    .spinner {
      width: 36px; height: 36px;
      border: 3px solid var(--border);
      border-top-color: var(--sidebar-accent);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    #loading-overlay p { font-size: 13px; color: var(--text-muted); }
    #auth-overlay {
      position: fixed;
      inset: 0;
      background: rgba(43,33,54, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1100;
      padding: 24px;
    }
    #auth-overlay.hidden { display: none; }
    #auth-card {
      width: min(420px, 100%);
      background: var(--card-bg);
      border-radius: var(--radius);
      box-shadow: 0 18px 40px rgba(43,33,54, 0.18);
      padding: 28px;
      display: grid;
      gap: 12px;
    }
    #auth-card h2 {
      font-size: 20px;
      margin: 0;
    }
    #auth-card p {
      color: var(--text-secondary);
      line-height: 1.5;
      margin-bottom: 4px;
    }
    #auth-card label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
    }
    #auth-card input {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      font: inherit;
    }
    #auth-card input:focus {
      outline: none;
      border-color: var(--border-focus);
      box-shadow: 0 0 0 3px rgba(204,53,127,0.12);
    }
    #auth-error {
      color: var(--error);
      font-size: 13px;
    }

    /* ── Part Images ── */
    .part-thumb {
      width: 40px; height: 40px;
      object-fit: cover;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      cursor: pointer;
      display: block;
    }
    /* Image lightbox */
    #img-lightbox {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.75);
      z-index: 2000;
      align-items: center;
      justify-content: center;
    }
    #img-lightbox.open { display: flex; }
    #img-lightbox img {
      max-width: 90vw;
      max-height: 90vh;
      border-radius: var(--radius);
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    }
    #img-lightbox-close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(255,255,255,.45);
      border-radius: 50%;
      background: rgba(0,0,0,.45);
      color: #fff;
      font-size: 20px;
      cursor: pointer;
    }
    #img-lightbox-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

    /* ── Confirm Modal ── */
    #confirm-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      z-index: 1500;
      align-items: center;
      justify-content: center;
    }
    #confirm-modal.open { display: flex; }
    .confirm-modal-card {
      background: var(--card-bg);
      padding: 24px;
      max-width: 480px;
      width: 90%;
      box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    }
    .confirm-modal-card h3 { margin: 0 0 12px; font-size: 16px; color: var(--text-primary); }
    .confirm-modal-list { margin: 0 0 12px; padding-left: 18px; font-size: 13px; color: var(--text-primary); line-height: 1.7; }
    .confirm-modal-warning {
      background: #ffedd0;
      border: 1px solid #f7d08c;
      border-radius: var(--radius);
      padding: 10px 12px;
      font-size: 12px;
      color: #8a5c08;
      margin-bottom: 12px;
    }
    .confirm-modal-warning strong { display: block; margin-bottom: 4px; }
    .confirm-modal-warning ul { margin: 0; padding-left: 16px; line-height: 1.7; }
    .confirm-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #d7c2ec; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #b99ad8; }

    /* ── Part Lookup Tab ── */
    .partview-search-wrap { margin-bottom: 16px; }
    .partview-search-row { display:flex; align-items:center; gap:10px; }
    .partview-search-row #partview-search { flex:1; min-width:0; }
    .partview-search-hint { margin-top:6px; color:var(--text-muted); font-size:12px; }
    .partview-workspace { display:grid; grid-template-columns:minmax(260px, 340px) minmax(0, 1fr); gap:16px; align-items:start; }
    .partview-results-panel { min-width:0; position:sticky; top:0; padding:12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--card-bg); box-shadow:var(--card-shadow); }
    .partview-results-header { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:24px; margin-bottom:8px; }
    .partview-results-count { color:var(--text-muted); font-size:12px; }
    .partview-clear-search { padding:2px 4px; border:0; background:none; color:var(--sidebar-accent); font:inherit; font-size:12px; cursor:pointer; }
    .partview-clear-search:hover { text-decoration:underline; }
    .partview-empty-state { min-height:170px; padding:20px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:var(--text-muted); text-align:center; font-size:12px; line-height:1.45; }
    .partview-empty-state strong { color:var(--text-primary); font-size:13px; }
    .partview-workspace > #partview-detail { min-width:0; }
    #partview-search {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 14px;
      font-family: var(--font);
      background: var(--card-bg);
      outline: none;
      transition: border-color 0.12s, box-shadow 0.12s;
    }
    #partview-search:focus {
      border-color: var(--border-focus);
      box-shadow: 0 0 0 3px rgba(204,53,127,0.12);
    }
    #partview-results {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: min(620px, calc(100vh - 270px));
      overflow-y: auto;
      padding-right: 2px;
    }
    .partview-result-item {
      padding: 10px;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: background 0.1s;
    }
    .partview-result-item:hover { background: var(--table-row-hover); }
    .partview-result-item.selected { border-color: var(--border-focus); background: #fdf1e2; }
    .partview-result-id { font-weight: 600; font-size: 13px; color: var(--sidebar-accent); min-width: 80px; }
    .partview-result-desc { font-size: 13px; color: var(--text-secondary); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .partview-result-type { font-size: 12px; font-weight: 500; color: var(--text-muted); }
    .partview-detail-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--card-shadow);
      padding: 24px;
    }
    .partview-detail-header {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      margin-bottom: 24px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--border);
    }
    .partview-detail-image {
      width: 120px; height: 120px;
      object-fit: cover;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      cursor: pointer;
      flex-shrink: 0;
    }
    .partview-detail-image-placeholder {
      width: 120px; height: 120px;
      background: var(--table-header-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      font-size: 12px;
      flex-shrink: 0;
    }
    .partview-detail-title { flex: 1; }
    .partview-detail-id { color: var(--text-primary); font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
    .partview-detail-type { margin-top: 2px; color: var(--text-muted); font-size: 12px; }
    .partview-file-input { display: none; }
    /* Detail view: form + activity in the main column, summary rail on the right.
       The results panel already takes ~340px, so the rail drops under the form
       sooner than the generic 900px breakpoint (the sidebar and results panel
       leave too little width for form + rail below ~1600px). */
    .detail-layout.partview-layout { grid-template-columns: minmax(0, 1fr) 280px; }
    .partview-main { display: grid; gap: 16px; min-width: 0; }
    .partview-layout .detail-rail { position: sticky; top: 0; }
    .partview-layout .partview-detail-image, .partview-layout .partview-detail-image-placeholder { display: flex; width: 100%; max-width: 200px; height: auto; aspect-ratio: 1; }
    .partview-activity-body { padding: 0 18px 18px; }
    .partview-activity-card .inv-scale-section { margin-top: 14px; }
    @media (max-width: 1600px) {
      /* Under 1600px the rail becomes a compact strip above the form, so stock
         and the image stay in view instead of landing under the whole editor. */
      .detail-layout.partview-layout { grid-template-columns: minmax(0, 1fr); }
      .partview-layout .detail-rail { position: static; order: -1; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; padding: 14px 16px; }
      .partview-layout .rail-section { padding: 0; border-top: 0; }
      .partview-layout .partview-detail-image, .partview-layout .partview-detail-image-placeholder { max-width: 88px; }
    }
    @media (max-width: 700px) {
      .partview-layout .detail-rail { grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; }
      .partview-layout .rail-section:last-child { grid-column: 1 / -1; }
    }
    .partview-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px 32px;
    }
    .partview-section {
      grid-column: 1 / -1;
      margin: 0 0 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--card-bg);
    }
    .partview-section summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 13px 16px;
      cursor: pointer;
      list-style: none;
      user-select: none;
    }
    .partview-section summary::-webkit-details-marker { display: none; }
    .partview-section summary strong {
      display: block;
      color: var(--text-primary);
      font-size: 13px;
    }
    .partview-section summary small {
      display: block;
      margin-top: 3px;
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 400;
    }
    .partview-section-chevron {
      color: var(--text-muted);
      font-size: 18px;
      transition: transform .15s ease;
    }
    .partview-section[open] .partview-section-chevron { transform: rotate(180deg); }
    .partview-section-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px 32px;
      padding: 0 16px 16px;
      border-top: 1px solid var(--border);
    }
    .partview-subgrid {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px 32px;
    }
    .partview-field-wide { grid-column: 1 / -1; }
    .partview-field { display: flex; flex-direction: column; gap: 4px; }
    .partview-field label,
    .partview-field-label {
      font-size: 11px;
      font-weight: 600;
      text-transform:none;
      letter-spacing:-.005em;
      color: var(--text-muted);
    }
    .partview-label-text { vertical-align: middle; }
    .partview-help {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      margin-left: 5px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 50%;
      color: var(--text-muted);
      background: var(--card-bg);
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
      cursor: help;
      vertical-align: middle;
    }
    .partview-help:hover,
    .partview-help:focus-visible { color: var(--sidebar-accent); border-color: var(--border-focus); outline: none; }
    .partview-help-tooltip {
      position: absolute;
      z-index: 20;
      left: 0;
      top: calc(100% + 7px);
      width: 250px;
      padding: 9px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-primary);
      background: var(--card-bg);
      box-shadow: var(--card-shadow);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.45;
      letter-spacing: 0;
      text-transform: none;
      text-align: left;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-3px);
      transition: opacity .12s ease, transform .12s ease;
    }
    .partview-help:hover .partview-help-tooltip,
    .partview-help:focus-visible .partview-help-tooltip { opacity: 1; transform: translateY(0); }
    .partview-check-label {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding-top: 5px;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
      color: var(--text-primary);
    }
    .partview-check-label input { width: 16px; height: 16px; flex: 0 0 auto; }
    .partview-readonly-value,
    .partview-readonly-input {
      min-height: 35px;
      box-sizing: border-box;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-secondary);
      background: var(--bg-subtle, #f5f5f5);
    }
    .partview-readonly-input { cursor: default; }
    .partview-inv-help { margin: 7px 0 10px; color: var(--text-muted); font-size: 12px; }
    .partview-inv-subhead { margin: 14px 0 6px; color: var(--text-secondary); font-size: 12px; font-weight: 600; letter-spacing: -.005em; }
    .partview-image-upload { display: block; cursor: pointer; }
    .partview-field input,
    .partview-field select {
      padding: 7px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 13.5px;
      font-family: var(--font);
      color: var(--text-primary);
      background: var(--card-bg);
      outline: none;
    }
    .partview-field input:focus,
    .partview-field select:focus {
      border-color: var(--border-focus);
      box-shadow: 0 0 0 2px rgba(204,53,127,0.12);
    }
    .partview-field textarea {
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 13.5px;
      font-family: var(--font);
      color: var(--text-primary);
      background: var(--card-bg);
      resize: vertical;
      outline: none;
      line-height: 1.55;
    }
    .partview-field textarea:focus {
      border-color: var(--border-focus);
      box-shadow: 0 0 0 2px rgba(204,53,127,0.12);
    }
    .shopify-field-stack {
      display:flex;
      align-items:center;
      gap:8px;
    }
    .shopify-field-stack input {
      flex:1;
      min-width:0;
    }
    .partview-form-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
    }
    .partview-save-status { font-size: 12px; color: var(--success); }
    .partview-used-in-list { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
    .partview-bom-tag {
      max-width: 100%;
      padding: 3px 10px;
      background: #fdf1e2;
      border: 1px solid #f7d3ae;
      border-radius: var(--radius-pill);
      font: inherit; font-size: 12px; font-weight: 600;
      color: var(--sidebar-accent);
      text-align: left;
      cursor: pointer;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .partview-bom-tag:hover { border-color: var(--border-focus); }
    .partview-files-section {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .partview-files-section h4 {
      font-size: 12px; font-weight: 600;
      letter-spacing: -.005em; color: var(--text-secondary); margin-bottom: 2px;
    }
    .partview-file-row {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
    }
    .partview-file-label {
      width: 100px;
      font-size: 11px;
      font-weight: 600;
      text-transform:none;
      letter-spacing:-.005em;
      color: var(--text-muted);
      flex-shrink: 0;
    }
    .partview-file-name {
      color: var(--text-secondary);
      font-size: 13px;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .partview-file-actions { display: flex; align-items: center; gap: 8px; flex: 1; }

    /* ── Hamburger Button (hidden on desktop) ── */
    #menu-btn {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      color: var(--text-primary);
      border-radius: var(--radius-sm);
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-right: 4px;
    }
    #menu-btn:hover { background: var(--btn-secondary); }

    /* ── Sidebar Overlay (hidden on desktop) ── */
    #sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 150;
    }

    /* ── Mobile Responsive ── */
    @media (max-width: 640px) {
      /* Show hamburger */
      #topbar { position: relative; z-index: 300; }
      #menu-btn { display: flex; position: relative; z-index: 250; }

      /* Sidebar becomes off-canvas drawer */
      #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        padding-top: 52px;
      }
      #sidebar.open { transform: translateX(0); }
      #sidebar-overlay.open { display: block; }

      /* Tighter content padding */

      /* Chat panel: use dynamic viewport height for mobile browser chrome */
      .chat-panel {
        height: min(640px, calc(100vh - 210px));
        height: min(640px, calc(100dvh - 210px));
      }

      /* Prevent iOS auto-zoom on input focus (requires font-size >= 16px) */
      input, select, textarea,
      .partview-field input,
      .partview-field select,
      .partview-field textarea,
      .add-row input, .add-row select,
      #partview-search,
      .chat-textarea,
      #bom-product-select,
      #prod-assembly-select,
      #prod-qty,
      #ops-assembly-select,
      #ops-qty,
      #ops-reason,
      #tx-note,
      #tx-extra-charges-cad,
      #logs-search,
      #logs-type-filter,
      #logs-source-filter,
      select.inline-select { font-size: 16px; }

      /* Collapse 2-column form grid to single column */
      .partview-form-grid { grid-template-columns: 1fr; }
      .partview-section-body,
      .partview-subgrid { grid-template-columns: 1fr; }
      .partview-help-tooltip { left: auto; right: 0; width: min(250px, calc(100vw - 56px)); }
      .partview-search-row { flex-direction:column; align-items:stretch; }
      .partview-search-row .btn { width:100%; }
      .partview-workspace { grid-template-columns:1fr; }
      .partview-results-panel { position:static; }
      #partview-results { max-height:min(42vh, 360px); }

      /* Part detail header: let image wrap below title if needed */
      .partview-detail-header { flex-wrap: wrap; }

      /* BOM selector: full-width select */
      #bom-selector-wrap { flex-wrap: wrap; }
      #bom-product-select { min-width: 0; width: 100%; }

      /* Page header stacks on small screens */
      .page-header { flex-wrap: wrap; }
      .chat-model-wrap {
        width: 100%;
        justify-content: space-between;
      }
      .chat-model-wrap select {
        min-width: 0;
        flex: 0 0 140px;
      }

      /* Larger tap targets */
      .btn { min-height: 44px; }
      .nav-item { padding: 14px 16px; }

      /* Wider chat bubbles */
      .chat-msg { max-width: 90%; }

      /* Compact topbar */
      #topbar { padding: 0 8px; gap: 8px; }
      #topbar h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      #fx-display { display: none; }
    #auth-user-label { max-width: 120px; }

      /* File rows wrap so buttons don't overflow */
      .partview-file-row { flex-wrap: wrap; }
      .partview-file-actions { flex-wrap: wrap; }

      /* Chat input area: stack on very small screens */
      .chat-input-wrap { padding: 10px 12px; gap: 8px; }
    }

    /* ── Tablet Responsive (iPad range: 641–1024px) ── */
    @media (min-width: 641px) and (max-width: 1024px) {
      /* Show hamburger and use drawer sidebar on tablet portrait/landscape */
      #topbar { position: relative; z-index: 300; }
      #menu-btn { display: flex; position: relative; z-index: 250; }

      #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        padding-top: 52px;
      }
      #sidebar.open { transform: translateX(0); }
      #sidebar-overlay.open { display: block; }

      /* Hide collapse/expand buttons — drawer mode handles show/hide */
      #nav-collapse-btn { display: none; }
      #nav-expand-btn { display: none; }

      /* Remove nav-collapsed width suppression on tablet (drawer handles it) */
      #app.nav-collapsed #sidebar { width: var(--sidebar-width); overflow-y: auto; }

      /* Larger touch targets */
      .btn { min-height: 44px; }
      .nav-item { padding: 14px 16px; }

      /* Prevent iOS auto-zoom on input focus */
      input, select, textarea,
      .partview-field input,
      .partview-field select,
      .partview-field textarea,
      .add-row input, .add-row select,
      #partview-search,
      .chat-textarea,
      #bom-product-select,
      #prod-assembly-select,
      #prod-qty,
      #ops-assembly-select,
      #ops-qty,
      #ops-reason,
      #tx-note,
      #tx-extra-charges-cad,
      #logs-search,
      #logs-type-filter,
      #logs-source-filter,
      select.inline-select { font-size: 16px; }

      /* Slightly tighter content padding */
      #content { padding: 20px; }

      /* Chat panel height for tablet */
      .chat-panel {
        height: min(640px, calc(100vh - 210px));
        height: min(640px, calc(100dvh - 210px));
      }

      /* Part form: keep 2-col layout but allow wrapping */
      .partview-form-grid { grid-template-columns: repeat(2, 1fr); }

      /* Keep the catalog panel usable beside the detail view on wider tablets. */
      .partview-workspace { grid-template-columns:minmax(230px, 280px) minmax(0, 1fr); }

      /* Page header wraps on tablet */
      .page-header { flex-wrap: wrap; gap: 8px; }

      /* Wider chat bubbles */
      .chat-msg { max-width: 85%; }

      /* File rows wrap */
      .partview-file-row { flex-wrap: wrap; }
      .partview-file-actions { flex-wrap: wrap; }
    }

    @media (min-width: 641px) and (max-width: 900px) {
      .partview-workspace { grid-template-columns:1fr; }
      .partview-results-panel { position:static; }
      #partview-results { max-height:360px; }
    }

    /* ── Pick List Tab ── */
    /* ── Pick List Controls ── */
    .prod-controls-card { margin-bottom:20px; padding:16px 20px; }
    #prod-controls { display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; }
    .prod-control-group { display:flex; flex-direction:column; gap:5px; }
    .prod-control-group label { font-size:11px; font-weight:700; text-transform:none; letter-spacing:-.005em; color:var(--text-muted); }
    #prod-assembly-select { padding:7px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13.5px; font-family:var(--font); background:var(--card-bg); min-width:240px; outline:none; cursor:pointer; }
    #prod-assembly-select:focus { border-color:var(--border-focus); }
    #prod-qty { width:80px; padding:7px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13.5px; font-family:var(--font); background:var(--card-bg); outline:none; text-align:center; }
    #prod-qty:focus { border-color:var(--border-focus); }
    /* ── Pick List Table ── */
    .prod-pick-table { width:100%; border-collapse:collapse; font-size:13px; }
    .prod-pick-table thead th { background:var(--table-header-bg); color:var(--text-muted); font-size:11px; font-weight:700; text-transform:none; letter-spacing:-.005em; padding:8px 12px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
    .prod-pick-table tbody tr { border-bottom:1px solid var(--border); transition:background .08s; }
    .prod-pick-table tbody tr:last-child { border-bottom:none; }
    .prod-pick-table tbody tr:hover { background:var(--table-row-hover); }
    .prod-pick-table tbody tr.prod-row-short { background:#fff1f4; }
    .prod-pick-table tbody tr.prod-row-short:hover { background:#ffe1e7; }
    .prod-pick-table td { padding:8px 12px; vertical-align:middle; }
    .prod-thumb { width:44px; height:44px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--border); display:block; cursor:pointer; }
    .prod-thumb-placeholder { width:44px; height:44px; background:var(--table-header-bg); border:1px solid var(--border); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:9px; text-transform:uppercase; letter-spacing:.04em; }
    .prod-part-id { white-space:nowrap; }
    .prod-desc { color:var(--text-primary); }
    .plm-inline-revision { white-space:nowrap; font-weight:600; }
    .plm-inline-package-link { border:0; background:none; padding:0; color:var(--link, #8a5c08); cursor:pointer; font:inherit; font-size:11px; text-decoration:underline; white-space:nowrap; }
    .plm-inline-revision--missing { color:var(--text-muted); font-size:11px; white-space:nowrap; }
    .plm-balance-chip { display:inline-block; margin:1px 3px 1px 0; padding:2px 6px; border-radius:999px; background:var(--table-header-bg); color:var(--text-secondary); font-size:11px; white-space:nowrap; }
    .prod-location-badge { display:inline-block; padding:2px 9px; border-radius:var(--radius-sm); font-size:11.5px; font-weight:600; background:#ffedd0; color:#8a5c08; border:1px solid #f7d08c; white-space:nowrap; }
    .prod-location-empty { color:var(--text-muted); font-style:italic; }
    .prod-td-center { text-align:center; }
    .prod-onhand-ok { font-weight:700; color:var(--success); font-family:var(--font-mono); }
    .prod-onhand-short { font-weight:700; color:var(--btn-danger); font-family:var(--font-mono); }
    .prod-unit { font-size:11px; color:var(--text-muted); }
    .prod-qty-needed { font-size:15px; font-weight:800; color:var(--text-primary); text-align:center; }
    .prod-qty-short { color:var(--btn-danger); }
    .prod-empty { padding:40px 24px; text-align:center; color:var(--text-muted); font-size:13.5px; }

    /* ── Inventory Section (part detail) ── */
    .inv-section { border-top:1px solid var(--border); margin-top:20px; padding-top:16px; }
    .inv-section h4 { font-size:12px; font-weight:600; letter-spacing:-.005em; color:var(--text-secondary); margin-bottom:12px; }
    .inv-onhand { font-size:20px; font-weight:700; color:var(--sidebar-accent); margin-bottom:4px; font-variant-numeric:tabular-nums; }
    .inv-onhand small { color:var(--text-muted); font-size:12px; font-weight:500; }
    .inv-adj-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
    .inv-adj-row input[type="number"] { width:80px; padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; font-family:var(--font); background:var(--card-bg); outline:none; text-align:center; }
    .inv-adj-row input[type="number"]:focus { border-color:var(--border-focus); }
    .inv-adj-row input[type="text"] { flex:1; min-width:140px; padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; font-family:var(--font); background:var(--card-bg); outline:none; }
    .inv-adj-row input[type="text"]:focus { border-color:var(--border-focus); }
    .inv-log-list { max-height:180px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--table-header-bg); margin-top:8px; }
    .inv-log-empty { padding:12px; font-size:12px; color:var(--text-muted); font-style:italic; text-align:center; }
    .inv-log-entry { display:flex; align-items:center; gap:8px; padding:6px 10px; border-bottom:1px solid var(--border); font-size:12px; }
    .inv-log-entry:last-child { border-bottom:none; }
    .inv-log-ts { color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
    .inv-log-reason { color:var(--text-secondary); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .inv-log-after { color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
    .inv-log-type { display:inline-block; padding:1px 7px; border-radius:var(--radius-sm); font-size:11px; font-weight:700; color:#3b54a8; background:#e3e7ff; flex-shrink:0; }
    .inv-delta-pos { display:inline-block; padding:1px 6px; border-radius:var(--radius-sm); font-size:11px; font-weight:700; background:#d6f7ec; color:#157a63; flex-shrink:0; font-family:var(--font-mono); }
    .inv-delta-neg { display:inline-block; padding:1px 6px; border-radius:var(--radius-sm); font-size:11px; font-weight:700; background:#ffe1e7; color:#b0303f; flex-shrink:0; font-family:var(--font-mono); }

    /* ── Scale Reconciliation ── */
    .inv-scale-section { border-top:1px solid var(--border); margin-top:14px; padding-top:12px; }
    .inv-scale-section h4 { font-size:12px; font-weight:600; letter-spacing:-.005em; color:var(--text-secondary); margin-bottom:10px; }
    .inv-scale-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
    .inv-scale-row label { font-size:12px; color:var(--text-secondary); white-space:nowrap; }
    .inv-scale-row input[type="number"] { width:90px; padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; font-family:var(--font); background:var(--card-bg); outline:none; text-align:center; }
    .inv-scale-row input[type="number"]:focus { border-color:var(--border-focus); }
    .inv-scale-result { font-size:13px; color:var(--text-secondary); margin-bottom:10px; }
    .inv-scale-result strong { color:var(--text-primary); }
    .inv-scale-disabled { font-size:12px; color:var(--text-muted); font-style:italic; padding:4px 0; }

    /* ── Assembly Availability Card (Pick List tab) ── */
    #prod-avail-card { margin-bottom:20px; }
    
    .avail-table { width:100%; border-collapse:collapse; font-size:13px; }
    .avail-table thead th { background:var(--table-header-bg); color:var(--text-muted); font-size:11px; font-weight:700; text-transform:none; letter-spacing:-.005em; padding:8px 12px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
    .avail-th-num { text-align:center !important; }
    .avail-table tbody tr { border-bottom:1px solid var(--border); transition:background .08s; }
    .avail-table tbody tr:last-child { border-bottom:none; }
    .avail-table tbody tr:hover { background:var(--table-row-hover); }
    .avail-table td { padding:8px 12px; vertical-align:middle; }
    .avail-num { text-align:center; color:var(--text-secondary); font-variant-numeric:tabular-nums; font-family:var(--font-mono); }
    .avail-can-build { font-size:18px; font-weight:800; color:var(--sidebar-accent); text-align:center; font-variant-numeric:tabular-nums; font-family:var(--font-mono); }
    .avail-can-build.zero { color:var(--btn-danger); }
    .avail-assembly-id { font-size:11px; color:var(--text-muted); margin-left:6px; }
    .avail-bottleneck { font-size:12px; color:var(--text-secondary); display:flex; align-items:baseline; gap:5px; }
    .avail-bottleneck-id { font-size:11px; color:var(--text-muted); }
    .avail-bottleneck-none { font-style:italic; color:var(--text-muted); }
    /* ── Operations Tab ─────────────────────────────────────── */
    .ops-mode-btns { display:flex; flex-wrap:wrap; gap:0; margin-bottom:16px; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; width:fit-content; max-width:100%; }
    .ops-mode-btn { padding:8px 20px; font-size:13px; font-weight:600; background:var(--table-header-bg); color:var(--text-secondary); border:none; cursor:pointer; font-family:var(--font); transition:background .15s,color .15s; }
    .ops-mode-btn:not(:last-child) { border-right:1px solid var(--border); }
    .ops-mode-btn.active { background:var(--sidebar-accent); color:var(--btn-primary-text, #fff); }
    @media (max-width:640px) {
      .ops-mode-btns { width:100%; }
      .ops-mode-btn { flex:1 1 auto; min-height:44px; }
    }
    .ops-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:16px; }
    .ops-controls label { font-size:11px; font-weight:700; color:var(--text-muted); display:block; margin-bottom:4px; text-transform:none; letter-spacing:-.005em; }
    .ops-controls select, .ops-controls input[type="number"], .ops-controls input[type="text"] { padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; font-family:var(--font); background:var(--card-bg); outline:none; }
    .ops-controls select:focus, .ops-controls input:focus { border-color:var(--border-focus); }
    .ops-controls select { min-width:220px; }
    .ops-controls input[type="number"] { width:80px; }
    .ops-controls input[type="text"] { min-width:240px; flex:1; }
    .ops-reason-wrap { flex:1; }
    #ops-reason { width:100%; box-sizing:border-box; }
    .ops-preview { margin-bottom:16px; }
    .ops-preview-table { width:100%; border-collapse:collapse; font-size:13px; }
    .ops-preview-table th { text-align:left; padding:6px 10px; font-size:11px; font-weight:700; text-transform:none; letter-spacing:-.005em; color:var(--text-muted); background:var(--table-header-bg); border-bottom:1px solid var(--border); }
    .ops-preview-table td { padding:7px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
    .ops-preview-table tr:last-child td { border-bottom:none; }
    .ops-change-pos { font-weight:700; color:var(--success); }
    .ops-change-neg { font-weight:700; color:var(--btn-danger); }
    .ops-warn { padding:8px 12px; background:#fff5e4; border:1px solid #f7d08c; border-radius:var(--radius-sm); font-size:12px; color:#8a5c08; margin-bottom:12px; }
    .ops-empty { color:var(--text-muted); font-size:13px; font-style:italic; padding:12px 0; }
    .ops-footer { display:flex; justify-content:flex-end; }

    /* ── Calc Explainer (shared, Operations + Shopify) ── */
    .calc-explainer { margin: 0 0 16px; }
    .calc-explainer > summary { cursor:pointer; font-size:12px; color:var(--text-muted); user-select:none; padding:4px 0; list-style:none; display:flex; align-items:center; gap:5px; }
    .calc-explainer > summary::before { content:'▶'; font-size:9px; display:inline-block; transition:transform .15s; }
    .calc-explainer[open] > summary::before { transform:rotate(90deg); }
    .calc-explainer-body { padding:10px 0 2px; display:flex; flex-direction:column; gap:10px; }
    .calc-section-label { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:none; letter-spacing:-.005em; margin-bottom:-4px; }
    .calc-formula { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
    .calc-pill { display:inline-flex; align-items:center; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:500; white-space:nowrap; }
    .calc-pill-blue { background:#e3e7ff; border:1px solid #c0c9f5; color:#3b54a8; }
    .calc-pill-green { background:#e8fbf5; border:1px solid #a5e6d3; color:#127a66; }
    .calc-pill-red { background:#fff1f4; border:1px solid #f8bfc9; color:#b0303f; }
    .calc-pill-total { background:#3b54a8; color:#fff; border:1px solid transparent; font-weight:600; }
    .calc-op { font-size:14px; font-weight:600; color:var(--text-secondary); }
    .calc-notes { margin:0; padding-left:16px; display:flex; flex-direction:column; gap:3px; }
    .calc-notes li { font-size:12px; color:var(--text-secondary); }
    .calc-notes li code { font-size:11px; background:var(--btn-secondary); padding:1px 4px; border-radius:3px; }
    .shopify-damped-badge { font-size:10px; font-weight:600; color:#8a5c08; background:#fff5e4; border:1px solid #f7d08c; border-radius:99px; padding:1px 5px; margin-left:4px; white-space:nowrap; cursor:default; }

    /* ── Transactions Tab ── */
    .tx-form { padding:16px 20px; display:flex; flex-direction:column; gap:14px; overflow:visible; }
    .tx-note-row { display:flex; flex-direction:column; gap:4px; }
    .tx-note-row label { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:none; letter-spacing:-.005em; }
    .tx-note-row input,
    .tx-note-row select { padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; font-family:var(--font); background:var(--card-bg); outline:none; width:100%; box-sizing:border-box; }
    .tx-note-row input:focus,
    .tx-note-row select:focus { border-color:var(--border-focus); }
    .tx-extra-header-controls { display:flex; gap:8px; }
    .tx-extra-header-controls input { flex:1; }
    .tx-extra-header-controls select { width:80px; flex-shrink:0; }
    .tx-lines-table { width:100%; border-collapse:collapse; font-size:13px; }
    .tx-lines-table th { text-align:left; padding:6px 10px; font-size:11px; font-weight:700; text-transform:none; letter-spacing:-.005em; color:var(--text-muted); background:var(--table-header-bg); border-bottom:1px solid var(--border); }
    .tx-lines-table td { padding:6px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
    .tx-lines-table tr:last-child td { border-bottom:none; }
    .tx-table-input { padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); font-family:var(--font); font-size:16px; outline:none; background:var(--card-bg); }
    .tx-table-input:focus { border-color:var(--border-focus); }
    .tx-qty-input { width:70px; text-align:center; }
    .tx-cost-input { width:110px; text-align:right; }
    .tx-extra-input { width:100px; text-align:right; }
    .tx-remove-btn { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:16px; line-height:1; padding:2px 6px; }
    .tx-remove-btn:hover { color:var(--btn-danger); }
    /* Planning tab — reorder recommendations: expandable rows, suggestion
       hints, trend sparkline */
    .pl-field-note { margin-top:4px; font-size:11px; color:var(--text-muted); white-space:nowrap; }
    .pl-suggestion-apply { margin-left:4px; background:none; border:none; padding:0; color:var(--btn-primary); font-size:11px; font-weight:600; cursor:pointer; text-decoration:underline; }
    .pl-suggestion-apply:hover { color:var(--btn-primary-hover); }
    .pl-trend-cell { display:flex; align-items:center; gap:6px; }
    .pl-sparkline { flex-shrink:0; display:block; }
    .pl-trend-label { font-size:11px; color:var(--text-secondary); white-space:nowrap; }
    .pl-row { cursor:pointer; }
    .pl-row:hover { background:var(--table-row-hover); }
    .pl-expand-toggle { color:var(--text-muted); font-size:12px; width:16px; text-align:center; }
    .pl-detail-row td { background:var(--content-bg); padding:14px 16px; }
    .pl-detail-grid { display:flex; flex-wrap:wrap; gap:16px; }
    .pl-detail-field { min-width:110px; }
    .pl-detail-field label { display:block; font-size:11px; font-weight:600; text-transform:none; letter-spacing:-.005em; color:var(--text-muted); margin-bottom:4px; }
    .pl-status-chip { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; }
    .pl-status-order_now { background:#ffe1e7; color:#b0303f; }
    
    .pl-status-watch { background:#ffedd0; color:#8a5c08; }
    .pl-status-covered { background:#d6f7ec; color:#157a63; }
    .pl-status-no_demand { background:var(--border); color:var(--text-muted); }
    /* Setup gaps are no longer a status (they used to mask urgency). This keeps the
       exact palette the old .pl-status-needs_setup chip used, so "setup" still reads as
       the same informational blue-grey — just demoted to a badge under the risk chip.
       Raw hex matches the surrounding .pl-status-* block; don't add new hues here. */
    .pl-setup-badge { display:inline-block; margin-top:4px; padding:1px 7px; border-radius:999px; font-size:10px; font-weight:700; white-space:nowrap; background:#e3e7ff; color:#3b54a8; }
    .pl-filter-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
    .pl-filter-supplier-select { padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; font-family:var(--font); background:var(--card-bg); }
    .pl-filter-more > summary { list-style:none; cursor:pointer; }
    .pl-filter-more > summary::-webkit-details-marker { display:none; }
    .pl-filter-more[open] { flex-basis:100%; }
    .pl-filter-more-body { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
    .pl-reorder-math { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); max-width:320px; }
    .pl-reorder-math-title { font-size:12px; font-weight:600; letter-spacing:-.005em; color:var(--text-muted); margin-bottom:6px; }
    .pl-reorder-math-row { display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:2px 0; font-variant-numeric:tabular-nums; }
    .pl-reorder-math-total { font-weight:700; border-top:1px solid var(--border); margin-top:4px; padding-top:6px; }
    .pl-freshness-chip { display:inline-block; margin-top:4px; padding:1px 7px; border-radius:999px; font-size:10px; font-weight:700; white-space:nowrap; }
    .pl-freshness-stale { background:#ffedd0; color:#8a5c08; }
    .pl-freshness-none { background:var(--border); color:var(--text-muted); }
    .tx-preview { margin-bottom:16px; }
    .tx-receive-summary { padding:10px 12px 0; font-size:12px; color:var(--text-muted); }
    .tx-po-link-banner {
      display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
      margin-bottom:12px; padding:10px 12px; border-radius:var(--radius-sm);
      background:#eceeff; border:1px solid #c0c9f5; color:#35459c; font-size:13px; font-weight:600;
    }
    .tx-footer { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:4px; }
    .tx-execute-status { color:var(--success); font-size:12px; font-weight:600; }
    .tx-history-link { border-top:1px solid var(--border); margin-top:28px; padding-top:18px; color:var(--text-muted); font-size:13px; }
    .tx-date-header { font-size:11px; font-weight:700; letter-spacing:-.005em; color:var(--text-muted); padding:10px 0 4px; }
    .tx-delta-pos { display:inline-block; padding:1px 6px; border-radius:var(--radius-sm); font-size:11px; font-weight:700; background:#d6f7ec; color:#157a63; flex-shrink:0; }
    .tx-delta-neg { display:inline-block; padding:1px 6px; border-radius:var(--radius-sm); font-size:11px; font-weight:700; background:#ffe1e7; color:#b0303f; flex-shrink:0; }
    .tx-history-empty { padding:30px 0; text-align:center; color:var(--text-muted); font-size:13px; font-style:italic; }
    .tx-part-wrap { position:relative; }
    .tx-part-search { padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); font-family:var(--font); background:var(--card-bg); outline:none; width:100%; box-sizing:border-box; }
    .tx-part-search:focus { border-color:var(--border-focus); }
    .tx-part-dropdown { position:fixed; background:var(--card-bg); border:1px solid var(--border); border-radius:0 0 var(--radius-sm) var(--radius-sm); max-height:200px; overflow-y:auto; z-index:900; display:none; box-shadow:0 4px 12px rgba(0,0,0,.08); }
    .tx-part-dropdown.open { display:block; }
    .tx-part-option { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; cursor:pointer; }
    .tx-part-option:hover { background:var(--table-row-hover); }
    .tx-part-option--active { background:var(--table-row-hover); outline:1px solid var(--border-focus); outline-offset:-1px; }
    .tx-part-option-desc { font-size:13px; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
    .tx-part-option-id { font-size:11px; color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
    .tx-part-option-empty { color:var(--text-muted); font-size:12px; font-style:italic; justify-content:center; cursor:default; }

    /* ── Logs Tab ── */
    .logs-panel { padding:18px 20px; }
    .logs-controls { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:10px; align-items:flex-end; }
    .logs-filter-group, .logs-search-group { display:flex; flex-direction:column; gap:4px; }
    .logs-filter-group label, .logs-search-group label { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:none; letter-spacing:-.005em; }
    .logs-filter-group select, .logs-filter-group input[type="date"], .logs-search-group input {
      padding:8px 10px;
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      font-size:14px;
      font-family:var(--font);
      background:var(--card-bg);
      outline:none;
    }
    .logs-search-group { flex:1; min-width:200px; }
    .logs-filter-group select:focus, .logs-filter-group input[type="date"]:focus, .logs-search-group input:focus { border-color:var(--border-focus); }
    .logs-filter-actions { display:flex; align-items:flex-end; }
    .logs-count { font-size:12px; color:var(--text-muted); margin-bottom:12px; }
    .logs-event {
      width:100%;
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      background:var(--card-bg);
      padding:12px 14px;
      text-align:left;
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:8px 14px;
      cursor:pointer;
      margin-bottom:10px;
      font-family:var(--font);
    }
    .logs-event.open { border-color:#f6c9a6; box-shadow:0 0 0 1px rgba(204,53,127,.08); }
    .logs-event-main { display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; }
    .logs-event-summary { font-size:13px; font-weight:600; color:var(--text-primary); }
    .logs-event-meta, .logs-event-ref { font-size:12px; color:var(--text-muted); }
    .logs-event-toggle { font-size:12px; font-weight:700; color:var(--sidebar-accent); margin-left:auto; }
    .logs-event-details {
      margin:-4px 0 12px;
      padding:12px 14px;
      border:1px solid var(--border);
      border-top:none;
      border-radius:0 0 var(--radius-sm) var(--radius-sm);
      background:var(--table-header-bg);
    }
    .logs-event-reference { font-size:12px; color:var(--text-secondary); margin-bottom:10px; }
    .logs-line-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:6px 0; border-bottom:1px solid var(--border); }
    .logs-line-row:last-child { border-bottom:none; }
    .logs-line-entity { font-size:12.5px; font-weight:600; color:var(--text-primary); }
    .logs-line-action, .logs-line-qty { font-size:12px; color:var(--text-muted); }
    .audit-type-sell { background:#ffe1e7; color:#b0303f; }
    .audit-type-receive { background:#d6f7ec; color:#157a63; }
    .audit-type-manual_adjustment { background:#ffedd0; color:#8a5c08; }
    .audit-type-assemble, .audit-type-disassemble { background:#f0e2fb; color:#7040a8; }
    .audit-type-part_edit, .audit-type-bom_edit, .audit-type-supplier_edit, .audit-type-account_edit { background:var(--border); color:var(--text-secondary); }

    /* ── Settings Tab ── */
    .settings-card { padding:18px 20px; }
    .settings-section + .settings-section {
      margin-top:18px;
      padding-top:18px;
      border-top:1px solid var(--border);
    }
    .settings-row { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; align-items:flex-end; }
    .settings-row:last-child { margin-bottom:0; }
    .settings-row input {
      flex:1;
      min-width:220px;
      padding:8px 10px;
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      font-size:14px;
      font-family:var(--font);
      background:var(--card-bg);
      outline:none;
    }
    .settings-row select {
      min-width:140px;
      padding:8px 10px;
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      font-size:14px;
      font-family:var(--font);
      background:var(--card-bg);
      outline:none;
    }
    .settings-row textarea {
      flex:1;
      min-width:220px;
      padding:8px 10px;
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      font-size:14px;
      font-family:var(--font);
      background:var(--card-bg);
      outline:none;
      resize:vertical;
    }
    .settings-row input:focus,
    .settings-row select:focus,
    .settings-row textarea:focus { border-color:var(--border-focus); }
    .settings-input-narrow { flex:0 0 auto !important; width:160px; }
    .settings-list-item {
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:12px;
      padding:12px 0;
      border-bottom:1px solid var(--border);
    }
    .settings-list-item:last-child { border-bottom:none; }
    .settings-list-main { min-width:0; flex:1; }
    .settings-list-name { font-size:13px; color:var(--text-primary); font-weight:600; line-height:1.4; }
    .settings-list-meta {
      margin-top:3px;
      font-size:12px;
      color:var(--text-muted);
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }
    .settings-account-type { text-transform:capitalize; }
    .settings-account-status {
      display:inline-block;
      padding:2px 8px;
      border-radius:999px;
      font-size:11px;
      font-weight:700;
      background:#d6f7ec;
      color:#157a63;
    }
    .settings-account-status.inactive {
      background:#ffe1e7;
      color:#b0303f;
    }
    .settings-list-actions { display:flex; gap:6px; }
    .settings-backup-header {
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:12px;
      margin-bottom:10px;
      flex-wrap:wrap;
    }
    .settings-backup-subtext {
      font-size:12px;
      color:var(--text-muted);
      margin-top:2px;
    }
    .settings-backup-status {
      font-size:12px;
      color:var(--text-secondary);
      margin-bottom:10px;
    }
    .settings-backup-item {
      padding:12px 0;
      border-bottom:1px solid var(--border);
    }
    .settings-backup-item:last-child { border-bottom:none; }
    .settings-backup-main { min-width:0; }
    .settings-backup-badge {
      display:inline-block;
      padding:2px 8px;
      border-radius:999px;
      font-size:11px;
      font-weight:700;
    }
    .settings-backup-badge--success {
      background:#d6f7ec;
      color:#157a63;
    }
    .settings-backup-badge--failed {
      background:#ffe1e7;
      color:#b0303f;
    }
    .settings-backup-badge--started {
      background:#f0e2fb;
      color:#7040a8;
    }
    .settings-backup-meta {
      margin-top:6px;
      font-size:12px;
      color:var(--text-muted);
      line-height:1.5;
    }
    .settings-backup-error {
      margin-top:6px;
      font-size:12px;
      color:#b0303f;
      line-height:1.5;
      word-break:break-word;
    }

    /* ── Shopify Tab ── */

    .shopify-summary { margin-bottom:12px; }
    .shopify-summary-meta { grid-column:1 / -1; justify-self:start; color:var(--text-muted); font-size:12px; white-space:normal; line-height:1.5; }
    .shopify-work-summary-card { margin-top:10px; padding:14px 16px; }
    .shopify-publish-card { margin:0 0 12px; padding:14px 16px; }
    .shopify-build-summary-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
    .shopify-build-summary-head h3 { margin:0; font-size:14px; color:var(--text-primary); }
    .shopify-build-summary-head span { color:var(--text-muted); font-size:12px; font-weight:600; }
    .shopify-summary-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-left:auto; }
    .shopify-build-summary-toggle { margin:0 0 12px; padding-top:2px; }
    .shopify-build-summary-toggle label { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-secondary); font-weight:500; }
    .shopify-build-summary-toggle input { width:14px; height:14px; }
    .shopify-build-summary-empty { color:var(--text-muted); font-size:13px; padding:2px 0 4px; }
    .shopify-pick-section { margin-top:14px; }
    .shopify-pick-section:first-of-type { margin-top:0; }
    .shopify-pick-section + .shopify-pick-section { padding-top:14px; border-top:1px solid var(--border); }
    .shopify-pick-section h4 { margin:0 0 10px; font-size:12px; font-weight:600; color:var(--text-secondary); letter-spacing:-.005em; }
    .shopify-order-card { margin-bottom:12px; padding:14px 16px; }
    .shopify-order-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
    .shopify-order-name { font-size:15px; font-weight:700; color:var(--text-primary); }
    .shopify-order-meta { font-size:12px; color:var(--text-muted); margin-top:3px; }
    .shopify-status-chip { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:700; }
    .shopify-status-ready { background:#d6f7ec; color:#157a63; }
    .shopify-status-blocked { background:#ffe1e7; color:#b0303f; }
    /* Neutral state for "nothing to report yet" — Preview not run / not publishing.
       Tokens rather than hex: this one is genuinely a muted-grey role, not a member of
       the hand-tuned status palette above. */
    .shopify-status-muted { background:var(--bg-subtle); color:var(--text-secondary); }
    /* Has a Shopify SKU but isn't publishing inventory. Sits under the health chip. */
    .shopify-listing-gap { margin-top:4px; font-size:10px; font-weight:700; color:var(--text-muted); white-space:nowrap; }
    .shopify-status-executed { background:#f0e2fb; color:#7040a8; }
    .shopify-status-fulfilled { background:#e3e7ff; color:#3b54a8; }
    .shopify-status-warning { background:#ffedd0; color:#8a5c08; }
    .shopify-section-heading { font-size:15px; font-weight:700; color:var(--text-primary); margin:24px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--border-color); }
    .shopify-lines-table { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:0; table-layout:fixed; }
    .shopify-lines-table th { background:var(--table-header-bg); font-size:11px; color:var(--text-muted); text-transform:none; letter-spacing:-.005em; padding:7px 10px; border-bottom:1px solid var(--border); text-align:left; }
    .shopify-lines-table td { padding:7px 10px; border-bottom:1px solid var(--border); }
    .shopify-lines-table tbody tr:last-child td { border-bottom:none; }
    .shopify-lines-table th:last-child,
    .shopify-lines-table td:last-child { text-align:right; }
    .shopify-lines-table th:nth-child(4),
    .shopify-lines-table td:nth-child(4),
    .shopify-lines-table th:nth-child(5),
    .shopify-lines-table td:nth-child(5),
    .shopify-lines-table th:nth-child(6),
    .shopify-lines-table td:nth-child(6) { text-align:right; }
    .shopify-subsection { margin-top:8px; font-size:13px; color:var(--text-secondary); }
    .shopify-subsection strong { display:block; margin-bottom:4px; color:var(--text-primary); }
    .shopify-subsection ul { margin:0; padding-left:18px; }
    .shopify-subsection li { margin:2px 0; }
    .shopify-order-actions { display:flex; justify-content:flex-end; margin-top:10px; }
    .shopify-exception-actions { margin-left:8px; }
    .shopify-exception-actions summary { cursor:pointer; list-style:none; padding:7px 4px; color:var(--text-muted); font-size:12px; }
    .shopify-exception-actions summary::-webkit-details-marker { display:none; }
    .shopify-exception-actions summary::before { content:'⋯'; margin-right:4px; }
    .shopify-exception-actions[open] { padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--table-header-bg); }
    .shopify-exception-actions p { margin:0 0 8px; max-width:260px; font-size:11px; line-height:1.4; color:var(--text-muted); }
    .ops-workorder-context { display:flex; align-items:flex-start; gap:8px; margin:0 0 12px; padding:10px 12px; border:1px solid rgba(75,123,209,.22); border-radius:var(--radius-sm); background:rgba(75,123,209,.07); color:var(--text-secondary); font-size:12px; }
    .ops-workorder-context strong { color:var(--text-primary); white-space:nowrap; }
    .inv-assembly-action { width:100%; margin-top:12px; justify-content:center; }
    .shopify-publish-meta {
      margin-bottom:12px;
    }
    .shopify-publish-table td:last-child,
    .shopify-publish-table th:last-child { text-align:left; }
    .shopify-publish-table td:nth-last-child(2),
    .shopify-publish-table th:nth-last-child(2) { text-align:left; }
    .shopify-publish-table tr.row-qty-zero td { background:rgba(224,67,80,.05); }
    .qty-zero { color:var(--error, #e04350); }
    .availability-bottleneck { font-size:11px; color:#8a5c08; background:#fff5e4; border:1px solid #f7d08c; border-radius:4px; padding:1px 6px; white-space:nowrap; display:inline-block; }
    .shopify-build-summary-title { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
    .shopify-build-summary-title h3 { margin:0; }
    .availability-last-updated { font-size:11px; color:var(--text-muted); white-space:nowrap; }
    .shopify-publish-reasons {
      margin-top:4px;
      font-size:11px;
      color:var(--text-muted);
      line-height:1.4;
    }
    .part-link-btn {
      background:none;
      border:none;
      padding:0;
      margin:0;
      color:var(--sidebar-accent);
      font:inherit;
      font-weight:600;
      cursor:pointer;
      text-decoration:underline;
      text-underline-offset:2px;
    }
    .part-link-btn:hover { color:var(--btn-primary-hover); }
    .part-link-btn.part-link-id { font-family:var(--font-mono); }

    @media print {
      body.printing-shopify-picks {
        background:var(--card-bg);
      }
      body.printing-shopify-picks #topbar,
      body.printing-shopify-picks #sidebar,
      body.printing-shopify-picks #sidebar-overlay,
      body.printing-shopify-picks #img-lightbox,
      body.printing-shopify-picks #loading-overlay,
      body.printing-shopify-picks #shopify-error,
      body.printing-shopify-picks #shopify-orders,
      body.printing-shopify-picks .nav-item,
      body.printing-shopify-picks .tx-footer,
      body.printing-shopify-picks .btn {
        display:none !important;
      }
      body.printing-shopify-picks #app,
      body.printing-shopify-picks #content,
      body.printing-shopify-picks main {
        display:block !important;
        overflow:visible !important;
        padding:0 !important;
      }
      body.printing-shopify-picks .tab-panel {
        display:none !important;
      }
      body.printing-shopify-picks #panel-shopify {
        display:block !important;
      }
      body.printing-shopify-picks .page-header {
        margin-bottom:14px;
      }
      body.printing-shopify-picks .card {
        box-shadow:none !important;
        border:1px solid #d1d5db !important;
        break-inside:avoid;
      }
      body.printing-shopify-picks .shopify-summary {
        margin-bottom:0;
      }
      body.printing-shopify-picks .shopify-summary-card,
      body.printing-shopify-picks .shopify-work-summary-card {
        margin-top:0;
        margin-bottom:12px;
      }
      body.printing-shopify-picks .shopify-summary-card {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }
      body.printing-shopify-picks .shopify-lines-table th,
      body.printing-shopify-picks .shopify-lines-table td {
        padding:6px 8px;
        font-size:11px;
      }
      body.printing-shopify-picks .shopify-build-summary-toggle {
        display:none !important;
      }
    }

/* ── QZ Tray Status ─────────────────────────────────── */
.qz-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.qz-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #786788;
  flex-shrink: 0;
}
.qz-status--connected .qz-status-dot { background: #138670; }
.qz-status--connecting .qz-status-dot { background: #d19a1f; }
.qz-status--disconnected .qz-status-dot { background: #786788; }
.qz-status--error .qz-status-dot { background: #e04350; }

.qz-printer-select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  min-width: 160px;
}
.qz-printer-select:disabled { opacity: 0.5; }
.settings-printer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* ── Labels Tab ─────────────────────────────────────── */
.labels-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.labels-toolbar-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.labels-search-input {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 400px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.labels-selected-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--sidebar-accent);
  background: color-mix(in srgb, var(--sidebar-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sidebar-accent) 30%, transparent);
  border-radius: 20px;
  padding: 2px 9px;
  white-space: nowrap;
  flex-shrink: 0;
}
.labels-printer-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
#labels-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  align-content: start;
}
.label-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.label-check-row:hover {
  background: var(--bg-hover, var(--bg-secondary));
  border-color: var(--sidebar-accent);
}
.label-check-row:has(input:checked) {
  border-color: var(--sidebar-accent);
  background: color-mix(in srgb, var(--sidebar-accent) 8%, var(--bg-secondary));
}
.label-check-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}
.label-check-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.label-check-id {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.label-check-desc {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Label Sheet (screen preview) ──────────────────── */
.label-sheet {
  display: flex;
  flex-wrap: wrap;
}
.label-item {
  width: 3in;
  height: 2in;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.12in 0.15in;
  box-sizing: border-box;
  border: 1px dashed #bbb;
  gap: 0.12in;
  break-inside: avoid;
  page-break-inside: avoid;
}
.label-qr {
  width: 1.5in;
  height: 1.5in;
  flex-shrink: 0;
}
.label-qr img,
.label-qr canvas {
  width: 1.5in !important;
  height: 1.5in !important;
}
.label-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.label-part-num {
  font-size: 13pt;
  font-weight: 700;
  color: #000;
  line-height: 1.1;
  word-break: break-all;
}
.label-desc {
  font-size: 7.5pt;
  color: #333;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ── Inventory Health Tab ──────────────────────────────────────────────────── */
.inv-summary-card {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px 16px;
}
.inv-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.inv-summary-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.inv-summary-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform:none;
  letter-spacing:-.005em;
  color: var(--text-muted);
}
.inv-stat-critical { color: var(--btn-danger, #e04350); }
.inv-stat-low { color: var(--warn-text); }

.inv-health-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.inv-health-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform:none;
  letter-spacing:-.005em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.inv-health-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}
.inv-health-table tr:last-child td { border-bottom: none; }
.inv-health-table tr:hover td { background: var(--hover-bg, rgba(0,0,0,.03)); }

/* ── GST tab ──────────────────────────────────────────────────────────────── */
.gst-period-card {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gst-period-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gst-period-range {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.gst-period-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.gst-summary-card { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gst-notes {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  border-left: 3px solid var(--warn, #d19a1f);
}
.gst-table td { font-variant-numeric: tabular-nums; }
.gst-row-excluded td { opacity: .62; }
.gst-source-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform:none;
  letter-spacing:-.005em;
  background: var(--table-header-bg);
  color: var(--text-secondary);
}
.gst-flag {
  display: inline-block;
  font-size: 11px;
  color: var(--warn-text);
  white-space: nowrap;
}
.gst-scope-note {
  margin-top: 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}
@media (max-width: 900px) {
  .gst-summary-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gst-period-actions { margin-left: 0; }
}
.inv-health-row-link {
  background: none;
  border: none;
  color: var(--sidebar-accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.inv-health-row-link:hover { text-decoration: underline; }

.inv-health-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform:none;
  letter-spacing:-.005em;
}
.inv-health-chip--ok { background: #d6f7ec; color: #157a63; }
.inv-health-chip--low { background: #ffedd0; color: #8a5c08; }
.inv-health-chip--critical { background: #ffe1e7; color: #b0303f; }
/* "No forecast data" — deliberately distinct from --ok, since absence of demand data
   is not evidence of health. Mirrors .pl-status-no_demand's neutral treatment. */
.inv-health-chip--none { background: var(--bg-subtle); color: var(--text-secondary); }

.inv-assemblies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.inv-assembly-card {
  background: var(--table-header-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.inv-assembly-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.inv-assembly-rec {
  font-size: 13px;
  font-weight: 600;
  margin: 6px 0 2px;
  padding: 5px 10px;
  border-radius: 6px;
}
.inv-assembly-rec--needed {
  background: #ffedd0;
  color: #8a5c08;
}
.inv-assembly-rec--ok {
  background: #d6f7ec;
  color: #157a63;
}
.inv-assembly-rec-reason {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.inv-assembly-divider {
  border-top: 1px solid var(--border);
  margin: 8px 0;
}
.inv-assembly-stat { font-size: 12px; color: var(--text-muted); margin: 2px 0; }
.inv-assembly-stat span { font-weight: 600; color: var(--text-primary); }
.inv-assembly-stat--orders { color: var(--text-primary); font-weight: 500; }
.inv-assembly-stat--orders span { color: var(--warn-text); }
.inv-bottleneck-label { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.inv-bottleneck-label span { color: var(--btn-danger, #e04350); font-weight: 600; }
.inv-assembly-breakdown { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.inv-shortfall-label { font-size: 11px; color: var(--warn-text); font-weight: 500; margin-top: 4px; }
.inv-asm-demand-badge { font-size: 12px; font-weight: 600; color: #7040a8; cursor: default; }

.wo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.wo-card {
  background: var(--table-header-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.wo-card-inactive { opacity: 0.6; }
.wo-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.wo-card-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.wo-status-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.wo-status-open { background: #ffedd0; color: #8a5c08; }
.wo-status-done { background: #d6f7ec; color: #157a63; }
.wo-status-dismissed { background: var(--border); color: var(--text-muted); }
.wo-qty { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 2px 0 4px; }
.wo-reason { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.wo-breakdown { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.wo-divider { border-top: 1px solid var(--border); margin: 8px 0; }
.wo-stat { font-size: 12px; color: var(--text-muted); margin: 2px 0; }
.wo-stat span { font-weight: 600; color: var(--text-primary); }
.wo-shortfall { font-size: 11px; color: var(--warn-text); font-weight: 500; margin-top: 4px; }
.wo-bottleneck { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.wo-bottleneck span { color: var(--btn-danger, #e04350); font-weight: 600; }
.wo-date { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.wo-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.wo-status-prereq { background: color-mix(in srgb, #4b7bd1 16%, var(--card-bg)); color: color-mix(in srgb, #4b7bd1 70%, var(--text-primary)); margin-bottom: 6px; }
.wo-blocked-banner {
  font-size: 11px;
  font-weight: 600;
  color: var(--warn-text);
  background: color-mix(in srgb, var(--warn) 16%, var(--card-bg));
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 6px;
}
.wo-required-for { font-size: 11px; color: var(--text-muted); margin-top: 2px; margin-bottom: 4px; }

.inv-report-panel { margin-top: 20px; }
.inv-report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.inv-report-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.inv-report-body {
  padding: 16px 20px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--table-header-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.inv-report-body h2 { font-size: 16px; font-weight: 700; margin: 18px 0 6px; }
.inv-report-body h3 { font-size: 14px; font-weight: 700; margin: 14px 0 4px; color: var(--text-secondary); }
.inv-report-body h4 { font-size: 13px; font-weight: 700; margin: 10px 0 3px; }
.inv-report-body ul { padding-left: 20px; margin: 6px 0; }
.inv-report-body ol { padding-left: 20px; margin: 6px 0; }
.inv-report-body li { margin: 3px 0; }
.inv-report-body strong { font-weight: 700; }
.inv-report-body em { font-style: italic; }
.inv-report-body p { margin: 6px 0; }
.inv-report-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px;
  color: var(--text-muted);
  font-size: 13px;
}

@media (max-width: 640px) {
  .inv-summary-card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .inv-summary-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Today: a KPI strip that routes to owning tabs, then one canonical handoff per queue row. */
.today-sub { font-variant-numeric:tabular-nums; }
.today-head-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.today-head-actions .commerce-context-meta { margin:0; }
#today-kpis { margin-bottom:16px; }
.today-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.today-queue { min-width:0; overflow:hidden; }
.today-queue-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:16px 16px 12px; border-bottom:1px solid var(--border); }
.today-kicker { color:var(--text-muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.today-queue h3 { margin:3px 0 0; font-size:14px; font-weight:650; letter-spacing:-.01em; }
.today-count { min-width:24px; height:24px; padding:3px 7px; border-radius:999px; background:var(--table-header-bg); color:var(--text-secondary); text-align:center; font-size:12px; }
.today-queue-body { padding:4px 16px 10px; }
.today-queue-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-subtle,var(--border)); }
.today-queue-row:last-child { border-bottom:0; }
.today-row-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.today-row-copy strong, .today-row-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.today-row-copy small, .today-empty { color:var(--text-muted); font-size:12px; }
.today-empty { padding:16px 0; }
.commerce-freshness { white-space:nowrap; }
.commerce-freshness-fresh { color:var(--success); }
.commerce-freshness-refreshing { color:var(--sidebar-accent); }
.commerce-freshness-stale, .commerce-freshness-unavailable { color:var(--warn); }
.today-queue-more { padding:10px 0 4px; color:var(--text-muted); font-size:11px; }
.today-queue-more button { padding:0; border:0; background:none; color:var(--sidebar-accent); font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; }

/* Shared semantic display helpers for JS-rendered cells and notes. */
.cell-empty { color:var(--text-muted); }
.cell-unit { color:var(--text-muted); font-size:11px; }
.note-muted { color:var(--text-muted); font-size:12px; }
.section-note { color:var(--text-muted); }
.subheading-note { color:var(--text-secondary); }
.chart-legend { color:var(--text-muted); }
.note-warn { color:var(--warn); }
.note-error { color:var(--error); }
.margin-value--negative { color:var(--error); font-weight:600; }
.margin-value--warn { color:var(--warn); font-weight:600; }
.margin-value--good { color:var(--success); font-weight:600; }
.pl-ontime--bad { color:var(--error); font-weight:600; }
.pl-ontime--warn { color:var(--warn); font-weight:600; }
.pl-ontime--good { color:var(--success); font-weight:600; }
.inv-demand-toggle { display:inline-flex; align-items:center; gap:4px; padding:3px 6px; border:1px solid var(--border); border-radius:999px; background:var(--bg-subtle); color:var(--sidebar-accent); font:inherit; font-size:11px; cursor:pointer; }
.inv-demand-toggle:hover, .inv-demand-toggle:focus-visible { border-color:var(--border-focus); background:var(--table-header-bg); outline:2px solid rgba(var(--accent-rgb),.12); outline-offset:1px; }
.inv-demand-toggle::after { content:'▸'; font-size:10px; }
.inv-demand-toggle[aria-expanded="true"]::after { content:'▾'; }
.inv-health-detail-row td { padding:12px 16px; background:var(--bg-subtle); }
.inv-demand-detail { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; color:var(--text-secondary); font-size:12px; }
.inv-demand-detail strong { color:var(--text-primary); }
.inv-demand-detail ul { display:flex; flex-wrap:wrap; gap:6px 14px; padding-left:18px; }
.pl-po-disabled-note { max-width:190px; line-height:1.3; }

@media (max-width: 720px) {
  /* Keep the decision and its subject visible while preserving the full table
     for horizontal exploration. Secondary engineering detail remains available
     on the desktop/tablet layout and in the part record. */
  #panel-inventory .inv-health-table th:nth-child(3), #panel-inventory .inv-health-table td:nth-child(3),
  #panel-inventory .inv-health-table th:nth-child(4), #panel-inventory .inv-health-table td:nth-child(4),
  #panel-inventory .inv-health-table th:nth-child(8), #panel-inventory .inv-health-table td:nth-child(8),
  #panel-inventory .inv-health-table th:nth-child(9), #panel-inventory .inv-health-table td:nth-child(9),
  #panel-inventory .inv-health-table th:nth-child(11), #panel-inventory .inv-health-table td:nth-child(11) { display:none; }
  #panel-inventory .inv-health-table th:first-child, #panel-inventory .inv-health-table td:first-child,
  #panel-inventory .inv-health-table th:last-child, #panel-inventory .inv-health-table td:last-child { position:sticky; z-index:2; background:var(--card-bg); }
  #panel-inventory .inv-health-table th:first-child, #panel-inventory .inv-health-table td:first-child { left:0; box-shadow:4px 0 8px rgba(90,60,125,.06); }
  #panel-inventory .inv-health-table th:last-child, #panel-inventory .inv-health-table td:last-child { right:0; box-shadow:-4px 0 8px rgba(90,60,125,.06); }
  #panel-inventory .inv-health-table thead th:first-child, #panel-inventory .inv-health-table thead th:last-child { background:var(--table-header-bg); }
  .inv-health-detail-row td { position:static; }
}

@media (max-width: 720px) {
  .today-head-actions { width:100%; justify-content:space-between; }
  .today-grid { grid-template-columns:1fr; }
  .today-queue-row { align-items:flex-start; flex-direction:column; }
  .today-queue-row .btn { width:100%; }
  .today-row-copy { width:100%; }
  .today-row-copy small { white-space:normal; }
}

    /* ── On Order inventory indicators ── */
    .inv-onorder { font-size: 13px; color: var(--text-secondary); margin-top: 4px; margin-bottom: 8px; }
    .inv-onorder span:first-child { font-weight: 600; color: #3b54a8; }
    .inv-onorder-pos { font-size: 12px; color: var(--text-muted); margin-left: 4px; }
    .inv-po-link { background: none; border: none; cursor: pointer; color: var(--sidebar-accent); font-size: 12px; padding: 0; text-decoration: underline; }
    .inv-po-link:hover { color: var(--btn-primary-hover); }
    .inv-onorder-badge { display: inline-block; padding: 1px 7px; border-radius: var(--radius-sm); background: #e3e7ff; color: #3b54a8; font-size: 11px; font-weight: 600; white-space: nowrap; }

    /* ── Purchase Orders ── */
    .po-list-table { width: 100%; border-collapse: collapse; }
    .po-list-table th { background: var(--table-header-bg); font-size: 11px; font-weight: 600; text-transform:none; letter-spacing:-.005em; color: var(--text-secondary); padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; }
    .po-list-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 13px; }
    .po-list-row { cursor: pointer; transition: background 0.1s; }
    .po-list-row:hover { background: var(--table-row-hover); }
    .po-list-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin-bottom:12px; }
    .po-list-controls label { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:none; letter-spacing:-.005em; }
    .po-list-controls select, .po-list-controls input { min-height:34px; padding:6px 9px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card-bg); color:var(--text-primary); font:inherit; font-size:16px; }
    .po-list-controls input { min-width:220px; }
    .po-list-count { margin-left:auto; color:var(--text-muted); font-size:12px; }
    .po-save-status { color:var(--success); font-size:12px; font-weight:600; }
    .po-lock-note { color:var(--text-secondary); font-size:12px; }
    .po-status-badge, .task-priority-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; text-transform:none; letter-spacing:-.005em; }
    .po-status-draft { background: var(--border); color: var(--text-secondary); }
    .po-status-sent { background: #e3e7ff; color: #3b54a8; }
    .po-status-received { background: #d6f7ec; color: #157a63; }
    .po-status-partially_received { background: #ffedd0; color: #8a5c08; }
    .po-status-cancelled { background: #ffe1e7; color: #b0303f; }
    .po-status-closed { background: var(--border); color: var(--text-secondary); }
    .po-status-unmatched { background: #ffedd0; color: #8a5c08; }
    .po-status-matched { background: #e3e7ff; color: #3b54a8; }
    .po-status-paid { background: #d6f7ec; color: #157a63; }
    .po-detail-wrap, .invoice-detail-wrap { display: flex; flex-direction: column; gap: 16px; }

    /* ── Invoices tab: document/tax line editors, PO allocations, OCR review ──
       Invoice fields are commonly filled in right after scanning a document on
       a phone, so every field in this tab stays at 16px to keep iOS from
       auto-zooming on focus -- same reasoning as .expense-field. */
    .invoice-detail-wrap .po-field input:not([type="checkbox"]):not([type="radio"]),
    .invoice-detail-wrap .po-field select { font-size: 16px; }
    /* Every direct child of these cards must share the header's own 16px
       horizontal padding -- the header, hint paragraph, line editors, and
       (in the PO-match card) the attached-PO rows/search box all need to line
       up on the same left edge instead of each picking its own inset. */
    .po-lines-card > .po-field-hint { padding: 0 16px; margin: 10px 0 0; }
    .po-lines-card > .po-field-hint:last-child { margin-bottom: 14px; }
    .invoice-lines-add-btn { margin: 8px 16px 4px; }
    #invoice-lines-editor, #invoice-tax-lines-editor { padding: 4px 16px 16px; }
    #invoice-po-match-panel { padding: 0 16px 16px; }
    .invoice-line-editor { padding: 14px 0; border-top: 1px solid var(--border); }
    .invoice-line-editor:first-child { border-top: 0; padding-top: 0; }
    .invoice-allocation-grid { display: grid; gap: 8px; margin-top: 10px; padding: 10px 12px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-sm); }
    .invoice-allocation-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(120px, 180px) minmax(180px, 1fr); gap: 10px; align-items: center; }
    .invoice-allocation-row label { font-size: 12px; font-weight: 600; }
    .invoice-fx-warning { color: var(--warn); }
    .invoice-due-overdue { color: var(--btn-danger, #e04350); font-weight: 600; }
    .tx-receive-summary-warning { color: var(--danger, #a12622); font-weight: 600; }
    @media (max-width: 720px) {
      .invoice-allocation-row { grid-template-columns: 1fr; gap: 5px; }
    }

    /* "Suggested treatment" is an assistant reading the scan, not another data
       card -- an accent rule + soft wash marks it read-review-decide, and each
       recommendation's tone repeats the po-status-badge palette (info/warning/
       success) so color means the same thing everywhere in this tab. */
    .invoice-ocr-review { border-left: 3px solid var(--sidebar-accent); background: linear-gradient(135deg, rgba(var(--accent-rgb, 204,53,127), 0.07), transparent 60%); }
    .invoice-ocr-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px 10px; }
    .invoice-ocr-review-head strong { font-size: 14px; }
    .invoice-ocr-review-head p { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }
    .invoice-ocr-review-badge { flex-shrink: 0; padding: 2px 9px; border-radius: 999px; background: var(--sidebar-accent); color: var(--btn-primary-text, #fff); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; }
    .invoice-ocr-rec-list { display: flex; flex-direction: column; gap: 8px; padding: 0 18px 16px; }
    .invoice-ocr-rec { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid transparent; }
    .invoice-ocr-rec-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .invoice-ocr-rec-copy strong { font-size: 12.5px; }
    .invoice-ocr-rec-copy span { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
    .invoice-ocr-rec .btn { flex-shrink: 0; }
    .invoice-ocr-rec--info { background: #e3e7ff; border-color: #c7cff5; }
    .invoice-ocr-rec--info .invoice-ocr-rec-copy strong { color: #3b54a8; }
    .invoice-ocr-rec--warning { background: #ffedd0; border-color: #f3d9a4; }
    .invoice-ocr-rec--warning .invoice-ocr-rec-copy strong { color: #8a5c08; }
    .invoice-ocr-rec--success { background: #d6f7ec; border-color: #b7e9d8; }
    .invoice-ocr-rec--success .invoice-ocr-rec-copy strong { color: #157a63; }
    .invoice-ocr-notes { margin: 0; padding: 10px 18px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); font-style: italic; }
    @media (max-width: 640px) {
      .invoice-ocr-rec { flex-direction: column; align-items: flex-start; }
    }

    /* Flatter/quieter variant of .card for secondary groupings (PO charges,
       supplier documents, FX conversion details) so the primary cards on the
       same page -- line items, core header fields -- read as more important
       by contrast instead of every section carrying identical weight. */
    .card--muted { background: var(--bg-subtle); box-shadow: none; }

    /* Compact stat strip for the top of a PO/Invoice detail page: a few key
       numbers (status, total, outstanding/due) in bolder, larger type than
       ordinary field values, so what matters is visible without reading the
       whole form underneath it. */
    .record-summary-bar { display: flex; flex-wrap: wrap; gap: 18px 28px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--card-shadow); }
    .record-stat { display: flex; flex-direction: column; gap: 2px; }
    .record-stats-stack { display: grid; gap: 12px; }
    .record-stat > .po-status-badge { align-self: flex-start; }
    .record-stat-label { font-size: 11px; font-weight: 700; text-transform:none; letter-spacing:-.005em; color: var(--text-muted); }
    .record-stat-value { font-size: 18px; font-weight: 700; color: var(--text-primary); }
    .record-stat-value.record-stat-warn { color: var(--warn); }
    .record-stat-value.record-stat-danger { color: var(--error); }
    /* A stat whose value is a set of links (e.g. matched POs) rather than a
       single number -- keeps the label/value rhythm but wraps chips instead. */
    .record-stat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .record-stat-chip { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 12px; background: var(--card-bg); color: var(--sidebar-accent); text-decoration: underline; cursor: pointer; }

    /* Two related editors (Document Lines / Taxes) sharing one card so they
       read as one "Charges" family instead of two independent floating cards,
       while keeping their own field sets and open/collapsed state. */
    .charges-group { padding: 0; }
    .charges-group > .po-lines-header { padding: 12px 16px; }
    .charges-captured-indicator { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
    .charges-captured-indicator.is-off { color: var(--warn); }
    .charges-group-section { border-top: 1px solid var(--border); }
    .charges-group-section > summary { padding: 12px 16px; cursor: pointer; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
    .charges-group-section > summary::-webkit-details-marker { display: none; }
    .charges-group-section > summary::before { content: '▸'; margin-right: 8px; color: var(--text-muted); font-size: 11px; }
    .charges-group-section[open] > summary::before { content: '▾'; }

    /* Sticky save action for a long capture page -- same recipe as
       .receiving-footer, so the primary action never requires scrolling back
       to the top of a freshly-scanned document. */
    .invoice-save-footer { position: sticky; bottom: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 0; margin-top: 4px; background: var(--content-bg); border-top: 1px solid var(--border); }

    /* Same accent-rule-plus-wash recipe as .invoice-ocr-review above, in the
       error tone instead of the brand accent -- marks an action as one-way/
       irreversible so it doesn't carry the same visual weight as a routine
       field edit. */
    .stakes-warning { border-left: 3px solid var(--error); background: linear-gradient(135deg, rgba(217, 58, 74, 0.07), transparent 60%); }

    /* PO "Supplier documents" panel rows -- native to this card's own rhythm
       (16px horizontal gutter matching .po-lines-header/.po-field-hint)
       instead of the borrowed Settings-tab list classes they used before. */
    .cell-right { text-align: right; }
    .cell-tabular { font-variant-numeric: tabular-nums; }
    .u-mt-4 { margin-top: 4px; } .u-mt-8 { margin-top: 8px; } .u-mt-12 { margin-top: 12px; } .u-mt-16 { margin-top: 16px; }
    .pl-empty { padding: 12px 0; font-size: 13px; }
    .pl-scroll { margin-top: 6px; overflow-x: auto; }
    .pl-label-sm { font-size: 12px; font-weight: 600; }
    .pl-legend { margin-top: 4px; font-size: 11px; }
    .pl-legend-line { display: inline-block; width: 14px; margin-right: 4px; border-top: 2px solid var(--btn-primary); vertical-align: middle; }
    .pl-legend-line--dashed { margin: 0 4px 0 12px; border-top-style: dashed; opacity: .7; }
    .pl-legend-swatch { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; vertical-align: middle; }
    .pl-legend-swatch--d2c { background: var(--chan-d2c); }
    .pl-legend-swatch--b2b { margin-left: 12px; background: var(--chan-b2b); }
    .pl-card-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px; }
    .pl-hero-value { margin-top: 4px; font-size: 20px; font-weight: 600; }
    .pl-hero-sub { font-size: 13px; font-weight: 400; }
    .pl-note-sm { margin-top: 2px; font-size: 12px; }
    .pl-actions-end { display: flex; justify-content: flex-end; margin-top: 12px; }
    /* Loose blocks inside a .card sit under a label that carries 18px of inset; match it. */
    .pl-hero-value, .pl-note-sm, .pl-legend, .pl-label-sm, .pl-scroll, .pl-actions-end,
    #panel-planning .card .note-muted.u-mt-4 { padding-inline: 18px; }
    .pl-card-head > .btn { margin: 12px 18px 0 0; }
    .pl-stat-strip { margin: 14px 18px 0; padding: 12px; border-radius: var(--radius); background: var(--content-bg); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
    .pl-stat-strip .inv-summary-stat-val { font-size: 18px; font-family: inherit; font-weight: 650; }
    .modal-note { margin: 0; font-size: 12px; }
    .modal-lead { margin: 0 0 10px; }
    .modal-select { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 14px; background: var(--card-bg); }
    .section-meta { font-weight: 400; font-size: 12px; }
    .empty-note { padding: 14px; }
    .inline-action { margin-left: 6px; }
    .cell-center { text-align: center; }
    .detail-rail .po-document-row { padding: 8px 0; }
    .detail-rail .stale-data-notice { margin: 8px 0; }
    .detail-rail .rail-section > .po-field-hint { margin: 0 0 6px; }
    .po-main { display: grid; gap: 16px; min-width: 0; }
    .po-main > *, .partview-main > * { min-width: 0; }
    /* The line-items table needs ~1000px, so the PO rail only sits beside the form on
       wide screens; below that it becomes a summary strip above the form. */
    @media (max-width: 1700px) {
      .detail-layout.po-layout { grid-template-columns: minmax(0, 1fr); }
      .po-layout .detail-rail { order: -1; grid-template-columns: auto minmax(0, 1fr); gap: 8px 32px; padding: 14px 16px; }
      .po-layout .rail-section { padding: 0; border-top: 0; }
      .po-layout .record-stats-stack { grid-auto-flow: column; gap: 28px; }
    }
    @media (max-width: 700px) {
      .po-layout .detail-rail { grid-template-columns: minmax(0, 1fr); gap: 14px; }
      .po-layout .record-stats-stack { grid-auto-flow: row; gap: 10px; }
    }
    .po-document-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
    .po-document-row:last-child { border-bottom: none; }
    .po-document-row-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
    .po-document-row-amount { font-weight: 600; white-space: nowrap; }

    /* Document capture step: a larger, more inviting drop target than the
       shared expense-photo-step default -- this is the primary entry point to
       a workflow with three document types and line/tax review behind it. */
    #panel-invoices .expense-photo-step {
      padding: 44px 20px;
      border: 1.5px dashed var(--border-strong);
      border-radius: var(--radius);
      background: var(--bg-subtle);
      transition: border-color .15s ease, background .15s ease;
    }
    #panel-invoices .expense-photo-step.is-dragover { border-color: var(--sidebar-accent); background: rgba(var(--accent-rgb, 204,53,127), 0.08); }
    #panel-invoices .expense-photo-step-icon { color: var(--sidebar-accent); margin-bottom: 8px; }
    #panel-invoices .expense-photo-step-title { font-size: 17px; }
    #panel-invoices .expense-photo-step-hint { max-width: 420px; }
    #panel-invoices .expense-photo-step #invoice-scan-status { margin-top: 10px; }
    .invoice-file-field { margin-bottom: 14px; }
    .invoice-file-attach-btn { margin-top: 6px; display: inline-block; }
    .invoice-file-thumb { max-width: 120px; max-height: 120px; border-radius: var(--radius-sm); border: 1px solid var(--border); margin-top: 6px; display: block; }
    .invoice-po-suggested { margin: 10px 0; }
    .invoice-po-suggested-label { margin-bottom: 6px; }
    .invoice-po-row-empty { margin: 4px 0 12px; }
    .invoice-po-search-wrap { max-width: 420px; margin-top: 10px; }
    .invoice-po-match-hint { margin-top: 12px; }
    .po-detail-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .po-detail-title { font-size: 17px; font-weight: 700; margin: 0; flex: 1; }
    .po-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .purchasing-more { position: relative; }
    .purchasing-more summary, .purchasing-disclosure summary { cursor: pointer; padding: 10px 0; color: var(--text-secondary); font-weight: 600; }
    .purchasing-more-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; }
    .purchasing-inset { padding: 0 16px; }
    .invoice-payment-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
    .invoice-payment-bar .po-field { min-width: 220px; }
    .invoice-payment-bar .po-field-hint { flex-basis: 100%; margin: 0; }
    #panel-invoices .invoice-detail-wrap > .po-header-card > .po-header-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .invoice-detail-wrap .po-field { min-width: 0; }
    .invoice-detail-wrap .po-field input:not([type="checkbox"]):not([type="radio"]), .invoice-detail-wrap .po-field select { min-width: 0; width: 100%; min-height: 40px; }
    .invoice-detail-wrap .invoice-ocr-rec--info { background: color-mix(in srgb, var(--sidebar-accent) 10%, var(--card-bg)); border-color: var(--border); }
    .invoice-detail-wrap .invoice-ocr-rec--warning { background: color-mix(in srgb, var(--warn) 12%, var(--card-bg)); border-color: var(--warn); }
    .invoice-detail-wrap .invoice-ocr-rec--success { background: color-mix(in srgb, var(--success) 10%, var(--card-bg)); border-color: var(--border); }
    .invoice-detail-wrap .invoice-ocr-rec-copy strong { color: var(--text-primary); }
    .invoice-detail-wrap .invoice-ocr-rec-copy span { color: var(--text-secondary); }
    /* Status slots that are usually empty must not take a share of the wrap's
       16px flex gap -- each empty one otherwise adds a blank 16px band. */
    #invoice-form-error:empty, #invoice-duplicate-warning:empty, #invoice-ocr-recommendations:empty { display: none; }
    /* A header inside a padded card spans the card edge-to-edge (same as the
       unpadded Charges/PO cards) instead of stacking its own inset on top. */
    .invoice-detail-wrap > .po-header-card > .po-lines-header { margin: -16px -20px 12px; }
    .invoice-payment-bar > .po-lines-header { flex: 0 0 calc(100% + 40px); margin-bottom: 0; }
    .charges-group-section > summary > span:first-child { flex: 1; }
    .charges-group-section > .po-field-hint { padding: 0 16px; margin: 0; }
    .invoice-line-editor .po-header-grid { align-items: end; }
    .invoice-line-editor .po-field > label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 6px; min-height: 40px; }
    .invoice-line-editor .po-field > .btn { align-self: flex-start; min-height: 40px; }
    #invoice-po-search { min-height: 40px; font-size: 16px; }
    .invoice-duplicate-exception { padding: 12px 20px; }
    .invoice-duplicate-exception > summary { cursor: pointer; font-weight: 600; color: var(--text-secondary); }
    .invoice-duplicate-exception[open] > summary { margin-bottom: 8px; }
    .invoice-duplicate-exception p { margin: 0 0 10px; font-size: 12px; color: var(--text-muted); }
    .invoice-duplicate-exception label { display: block; font-size: 11px; font-weight: 600; text-transform:none; letter-spacing:-.005em; color: var(--text-secondary); margin-bottom: 4px; }
    .invoice-duplicate-exception input { width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); font-size: 16px; font-family: var(--font); box-sizing: border-box; }
    #panel-pos .po-lines-card .table-wrap { overflow-x: auto; }
    
    #panel-transactions .tx-po-link-banner { flex-wrap: wrap; background: color-mix(in srgb, var(--sidebar-accent) 10%, var(--card-bg)); border-color: var(--border); color: var(--text-primary); }
    .tx-po-link-banner .po-field { flex: 1 1 260px; min-width: 0; }
    .tx-po-link-banner select { width: 100%; min-height: 40px; font-size: 16px; }
    @media (max-width: 900px) {
      #panel-invoices .invoice-detail-wrap > .po-header-card > .po-header-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 540px) {
      #panel-invoices .invoice-detail-wrap > .po-header-card > .po-header-grid { grid-template-columns: minmax(0, 1fr); }
      .po-detail-actions { width: 100%; }
      .po-detail-actions > .btn { flex: 1 1 auto; min-height: 40px; }
      .po-list-controls input { min-width: 0; width: 100%; }
      .invoice-payment-bar .po-field { min-width: 0; flex: 1 1 100%; }
    }
    .po-header-card { padding: 16px 20px; }
    .po-header-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 20px; }
    .po-field { display: flex; flex-direction: column; gap: 4px; }
    .po-field label { font-size: 11px; font-weight: 600; text-transform:none; letter-spacing:-.005em; color: var(--text-secondary); }
    .po-field input:not([type="checkbox"]):not([type="radio"]), .po-field select { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text-primary); font-size: 13px; }
    .po-field input:focus, .po-field select:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(204,53,127,0.15); }
    .po-field-full { grid-column: 1 / -1; }
    .po-field-hint { font-size: 11px; line-height: 1.4; color: var(--text-muted); }
    .po-receipt-date { font-size: 10px; color: var(--text-muted); white-space: nowrap; margin-top: 2px; }
    .po-lines-card { overflow: visible; }
    .po-lines-card .table-wrap { overflow: visible; }
    .po-lines-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
    .po-lines-table { width: 100%; border-collapse: collapse; }
    .po-lines-table th { background: var(--table-header-bg); font-size: 11px; font-weight: 600; text-transform:none; letter-spacing:-.005em; color: var(--text-secondary); padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; }
    .po-lines-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 13px; }
    .po-desc-cell { color: var(--text-secondary); max-width: 200px; }
    .po-revision-cell { white-space: nowrap; }
    .po-extended-cell { white-space: nowrap; }
    .po-total-row td { background: var(--table-header-bg); font-weight: 700; border-top: 2px solid var(--border); }
    /* A note below the total, not a row that adds to it -- distinct from the
       ordinary charge rows above so the table's "every row adds up" contract
       still reads correctly when this appears. */
    .po-annotation-row td { color: var(--text-muted); font-size: 12px; font-style: italic; border-top: 1px dashed var(--border); }
    .po-meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 20px; }
    .po-meta-item { display: flex; flex-direction: column; gap: 4px; }
    .po-meta-full { grid-column: 1 / -1; }
    .po-brand-block { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(135deg, #f7effc, #f6edfc); }
    .po-brand-logo { width: 34px; height: 34px; color: #4a3d5c; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; letter-spacing: 0.06em; flex: 0 0 34px; overflow: hidden; }
    .po-brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .po-brand-copy { min-width: 0; }
    .po-brand-name { font-size: 14px; font-weight: 800; color: var(--text-primary); }
    .po-brand-meta { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
    .po-meta-label { font-size: 11px; font-weight: 600; text-transform:none; letter-spacing:-.005em; color: var(--text-secondary); }
    .po-meta-value { font-size: 13px; color: var(--text-primary); }
    .po-charges-card { padding-bottom: 16px; }
    .po-charges-card .po-header-grid { padding: 16px; }
    .po-charges-card > .purchasing-inset { margin: 10px 0 0; }
    /* Totals sit on the muted card surface, not a white slab inside it. */
    .po-charges-card .table-wrap,
    .po-charges-card .po-totals-table tr:not(.po-total-row) > td { background: transparent; }
    /* Same empty-slot rule as Invoices: an empty error box must not take a
       share of the detail wrap's 16px flex gap. */
    #po-form-error:empty, #receiving-error:empty { display: none; }
    /* Badges shown in place of a field value keep their own width instead of
       stretching across the grid column, and sit level with neighbouring inputs. */
    .po-field > .po-status-badge { align-self: flex-start; margin-top: 7px; }
    .po-meta-item > .po-status-badge { align-self: flex-start; }
    #panel-pos .po-header-card .po-field :is(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: 36px; }
    /* "More actions" sits in the action row, so it reads as a button there. */
    .po-detail-actions .purchasing-more > summary { list-style: none; padding: 7px 14px; border-radius: var(--radius-sm); background: var(--btn-secondary); font-size: 13px; }
    .po-detail-actions .purchasing-more > summary::-webkit-details-marker { display: none; }
    .po-detail-actions .purchasing-more > summary::after { content: ' ▾'; font-size: 10px; }
    .po-detail-actions .purchasing-more > summary:hover { background: var(--btn-secondary-hover); }
    /* Receiving */
    .po-detail-wrap > .receiving-footer { margin-top: 0; }
    .po-detail-wrap > p { margin: 0; }
    #receiving-note { min-height: 40px; }
    .receiving-completion { margin-bottom: 16px; }
    .receiving-completion p { margin: 4px 0 12px; }
    .receiving-completion-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .po-totals-table { max-width: 320px; margin-left: auto; }
    .po-totals-table td { padding: 6px 12px; border-bottom: none; font-size: 13px; }
    .po-totals-table td:last-child { text-align: right; white-space: nowrap; }
    @media (max-width: 640px) {
      .po-header-grid { grid-template-columns: 1fr 1fr; }
      .po-meta-grid { grid-template-columns: 1fr 1fr; }
      .po-detail-header { flex-direction: column; align-items: flex-start; }
      .po-brand-block { align-items: flex-start; }
    }

    @media (max-width: 900px) {
      .shopify-summary-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      
      .shopify-summary-meta {
        justify-self:start;
      }
      .shopify-summary-actions {
        justify-content:flex-start;
        margin-left:0;
      }
    }

/* ── Packing Tab ─────────────────────────────────────────────────────────── */

.packing-stallion-label {
  flex: 1 1 420px;
  min-width: min(100%, 360px);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle, rgba(0,0,0,.025));
}
.packing-stallion-label-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.packing-stallion-label-title {
  font-size: 13px;
  font-weight: 700;
}
.packing-stallion-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.packing-stallion-label-status {
  margin-top: 7px;
  font-size: 12px;
}
.packing-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.packing-picker-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.packing-picker-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.packing-priority-toggle-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.packing-priority-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.packing-priority-toggle-btn:hover { background: var(--hover-bg, rgba(0,0,0,.06)); }
.packing-priority-toggle-btn .packing-priority-toggle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  flex: none;
  transition: background .15s;
}
.packing-priority-toggle-btn.active {
  background: var(--sidebar-accent);
  color: #fff;
  border-color: var(--sidebar-accent);
}
.packing-priority-toggle-btn.active .packing-priority-toggle-dot {
  background: #fff;
}
.packing-picker-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.packing-picker-row .btn {
  min-height: 48px;
  padding: 10px 18px;
  font-size: 14px;
}
.packing-order-select {
  flex: 1;
  min-height: 48px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: var(--font);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text-primary);
  cursor: pointer;
}
.packing-order-select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(204,53,127,.15);
}
.packing-manual-toggle {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
}
.packing-manual-toggle:hover { color: var(--text-secondary); }
.packing-picker-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 4px 0;
}
.packing-picker-empty a {
  color: var(--sidebar-accent);
  text-decoration: none;
}
#packing-manual-lookup {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.packing-order-input {
  width: 100%;
  max-width: 320px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px; /* 16px prevents iOS zoom */
  background: var(--input-bg, var(--bg-secondary));
  color: var(--text-primary);
}
.packing-order-input:focus {
  outline: none;
  border-color: var(--sidebar-accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 99,102,241), .15);
}
.packing-order-card {
  padding: 14px 16px;
  margin-bottom: 16px;
}
.packing-order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.packing-order-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-right: 8px;
}
.packing-order-status {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.packing-ship-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  vertical-align: middle;
  margin-left: 6px;
}
.packing-ship-badge--pickup {
  background: rgba(204,53,127,.15);
  color: var(--sidebar-accent);
  border: 1px solid rgba(204,53,127,.4);
}
.packing-ship-badge--priority {
  background: rgba(224,67,80,.12);
  color: #b0303f;
  border: 1px solid rgba(224,67,80,.4);
}
.packing-ship-badge--ground {
  background: rgba(19,134,112,.12);
  color: #127a66;
  border: 1px solid rgba(19,134,112,.4);
}
.packing-unmapped-warn {
  background: rgba(209,154,31,.12);
  border: 1px solid rgba(209,154,31,.4);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.packing-lines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.packing-lines-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}
.packing-lines-table td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
  line-height: 1.3;
}
.packing-lines-table tbody tr { cursor: pointer; }
.packing-lines-table tr:last-child td { border-bottom: none; }
.packing-row-active { background: rgba(204,53,127,.06); }
.packing-row-active td:first-child { border-left: 3px solid var(--sidebar-accent); }
.packing-row-confirmed { opacity: 0.6; }
.packing-row-confirmed td:first-child { border-left: 3px solid #138670; }
.packing-check-cell {
  width: 32px;
  text-align: center;
  font-size: 16px;
}
.packing-col-sku { font-family: monospace; font-size: 13px; color: var(--text-secondary); }
.packing-col-num { text-align: right; white-space: nowrap; font-size: 16px; font-weight: 600; }
.packing-weight-warning {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  background: rgba(209,154,31,.15);
  color: #8a5c08;
  border: 1px solid rgba(209,154,31,.35);
}
.packing-weight-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  padding: 6px 8px;
  background: rgba(209,154,31,.08);
  border-radius: 6px;
}
.packing-weight-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1024px) {
  .packing-weight-section { grid-template-columns: 1fr; }
  .packing-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .packing-execute-btn,
  .packing-print-btn {
    min-width: unset;
    width: 100%;
  }
}
.packing-box-card,
.packing-scale-card {
  padding: 14px 16px;
}
.packing-box-label,
.packing-scale-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.packing-box-presets {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.packing-box-btn {
  padding: 10px 16px;
  min-height: 48px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.packing-box-btn:hover { background: var(--hover-bg, rgba(0,0,0,.06)); }
.packing-box-btn.active {
  background: var(--sidebar-accent);
  color: #fff;
  border-color: var(--sidebar-accent);
}
.packing-box-custom-input {
  width: 80px;
  min-height: 48px;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  background: var(--input-bg, var(--bg-secondary));
  color: var(--text-primary);
}
.packing-expected-weight {
  font-size: 14px;
  color: var(--text-primary);
}
.packing-expected-breakdown {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 4px;
}
.packing-scale-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.packing-scale-waiting {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}
.packing-scale-source,
.count-scale-source {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.packing-weight-indicator {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}
.packing-weight--ok {
  background: rgba(19,134,112,.1);
  border-color: rgba(19,134,112,.4);
}
.packing-weight--ok .packing-scale-value,
.packing-weight--ok .packing-weight-indicator { color: #127a66; }
.packing-weight--close {
  background: rgba(209,154,31,.1);
  border-color: rgba(209,154,31,.4);
}
.packing-weight--close .packing-scale-value,
.packing-weight--close .packing-weight-indicator { color: #8a5c08; }
.packing-weight--off {
  background: rgba(224,67,80,.08);
  border-color: rgba(224,67,80,.35);
}
.packing-weight--off .packing-scale-value,
.packing-weight--off .packing-weight-indicator { color: #b0303f; }
.packing-counted-cell {
  text-align: right;
  white-space: nowrap;
  font-size: 22px;
  font-weight: 700;
  width: 80px;
}
.packing-counted-na {
  text-align: right;
  color: var(--text-muted);
}
.packing-counted--ok {
  color: #127a66;
  background: rgba(19,134,112,.08);
}
.packing-counted--off {
  color: #b0303f;
  background: rgba(224,67,80,.07);
}
.packing-focus-panel {
  margin-top: 12px;
  padding: 16px;
}
.packing-focus-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.packing-focus-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.packing-focus-item {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}
.packing-focus-meta {
  font-size: 13px;
  color: var(--text-muted);
}
.packing-focus-count-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 14px 0 16px;
}
.packing-focus-count-status {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}
.packing-focus-count {
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.packing-focus-count--match { color: #138670; }
.packing-focus-count--off { color: #e04350; }
.packing-focus-count--na {
  color: var(--text-muted);
  font-size: 32px;
}
.packing-focus-needed {
  font-size: 18px;
  color: var(--text-secondary);
}
.packing-focus-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.packing-focus-nav .btn {
  flex: 1;
  min-height: 48px;
  font-size: 15px;
  justify-content: center;
}
.packing-focus-nav .btn-primary {
  flex: 2;
  font-size: 16px;
  font-weight: 600;
}
@media (max-width: 480px) {
  .packing-focus-nav .btn { min-height: 52px; }
}
.packing-focus-all-done {
  font-size: 15px;
  font-weight: 600;
  color: #138670;
  padding: 8px 0;
}
.packing-focus-empty {
  font-size: 14px;
  color: var(--text-muted);
}
.packing-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  position: sticky;
  bottom: 0;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  padding: 12px 0;
  margin-top: 8px;
  z-index: 10;
}
.packing-execute-btn {
  min-width: 200px;
  min-height: 56px;
  font-size: 16px;
  font-weight: 700;
}
.packing-print-btn {
  min-width: 170px;
  min-height: 56px;
  font-size: 15px;
  font-weight: 600;
}

.packing-execute-btn--warning {
  border-color: rgba(209,154,31,.45);
  background: rgba(209,154,31,.14);
  color: #8a5c08;
}
.packing-execute-btn--warning:hover {
  background: rgba(209,154,31,.2);
}
.packing-clear-btn {
  color: #e04350;
  border: 1px solid rgba(224,67,80,.3);
  background: rgba(224,67,80,.05);
  padding: 5px 12px;
  min-height: 32px;
}
.packing-clear-btn:hover {
  background: rgba(224,67,80,.12);
}
.packing-error-msg {
  padding: 10px 14px;
  background: rgba(224,67,80,.08);
  border: 1px solid rgba(224,67,80,.3);
  border-radius: var(--radius);
  color: #b0303f;
  font-size: 13px;
  margin-bottom: 12px;
}
.packing-success-msg {
  padding: 10px 14px;
  background: rgba(19,134,112,.1);
  border: 1px solid rgba(19,134,112,.35);
  border-radius: var(--radius);
  color: #127a66;
  font-size: 13px;
  margin-bottom: 12px;
}
.scale-bridge-panel {
  display: none;
  margin: 0 0 12px;
  padding: 14px 16px;
}
.scale-bridge-panel.open {
  display: block;
}
.scale-bridge-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.scale-bridge-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.scale-bridge-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.scale-bridge-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.scale-bridge-input {
  min-width: 220px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  background: var(--input-bg, var(--bg-secondary));
  color: var(--text-primary);
}
.scale-bridge-live-wrap {
  margin-top: 12px;
}
.scale-bridge-live-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.scale-bridge-live-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scale-bridge-live-station {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
}
.scale-bridge-live-station:hover {
  background: var(--hover-bg, rgba(0,0,0,.06));
}
.scale-bridge-live-name {
  font-size: 13px;
  font-weight: 700;
}
.scale-bridge-live-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.scale-bridge-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 10px 0;
}
@media (max-width: 700px) {
  
}

/* ── Assemble to Order (Packing) ─────────────────────────────────────────── */
.packing-row-needs-build td:first-child { border-left: 3px solid var(--warn); }
.packing-ato-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  vertical-align: middle;
  margin-left: 6px;
}
.packing-ato-badge--pending { background: rgba(209,154,31,.18); color: #8a5c08; border: 1px solid rgba(209,154,31,.4); }
.packing-ato-badge--done    { background: rgba(19,134,112,.12);  color: #127a66; border: 1px solid rgba(19,134,112,.4); }
.packing-ato-panel {
  margin: 12px 0;
  padding: 14px 16px;
  background: rgba(209,154,31,.07);
  border: 1px solid rgba(209,154,31,.35);
  border-radius: var(--radius);
}
.packing-ato-header {
  font-size: 13px;
  font-weight: 700;
  color: #8a5c08;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.packing-ato-bom-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 10px; }
.packing-ato-bom-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 0 0 6px;
}
.packing-ato-bom-table td { padding: 7px 8px; border-top: 1px solid rgba(209,154,31,.2); }
.packing-ato-bom-table td:first-child { padding-left: 0; white-space: nowrap; }
.packing-ato-bom-table td:nth-child(2) { padding-left: 8px; }
.packing-ato-component-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.packing-ato-thumb {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.packing-ato-thumb-placeholder {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}
.packing-caption-muted {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.packing-ato-sufficient-cell {
  white-space: nowrap;
  font-weight: 600;
}
.packing-ato-sufficient { color: #127a66; font-weight: 600; }
.packing-ato-short      { color: #b0303f; font-weight: 700; }
.packing-ato-shortage   { font-size: 13px; color: #b0303f; font-weight: 600; margin-bottom: 8px; }
.packing-ato-assemble-btn {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
  font-weight: 600;
  justify-content: center;
  margin-top: 8px;
}
.packing-ato-status-msg { font-size: 13px; color: var(--text-secondary); margin-left: 10px; }
.packing-ato-done {
  font-size: 14px;
  font-weight: 600;
  color: #127a66;
  margin: 10px 0;
  padding: 8px 12px;
  background: rgba(19,134,112,.08);
  border-radius: var(--radius-sm);
}

/* Packing is used while moving around a bench, so at phone and portrait-tablet
   widths each line becomes a readable card instead of a seven-column strip. */
@media (max-width: 800px) {
  #panel-packing .page-header {
    align-items: flex-start;
  }
  
  #panel-packing .packing-commerce-freshness,
#panel-packing .commerce-context-meta {
    grid-column: 1 / -1;
  }

  #panel-packing #packing-manual-lookup {
    align-items: stretch;
    flex-direction: column;
  }
  #panel-packing .packing-order-input,
  #panel-packing #packing-manual-lookup .btn {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: 48px;
  }
  #panel-packing .packing-stallion-label-header {
    flex-direction: column;
  }

  #panel-packing .packing-stallion-label {
    flex-basis: 100%;
    min-width: 0;
  }
  #panel-packing .packing-stallion-label-row,
  #panel-packing .packing-stallion-label-row .btn {
    width: 100%;
  }
  #panel-packing .packing-stallion-label-row .btn {
    min-height: 48px;
    justify-content: center;
  }
  #panel-packing .packing-order-card,
  #panel-packing .packing-box-card,
  #panel-packing .packing-scale-card,
  #panel-packing .packing-focus-panel {
    padding: 14px;
  }
  #panel-packing .packing-lines-table,
  #panel-packing .packing-lines-table tbody,
  #panel-packing .packing-lines-table tr,
  #panel-packing .packing-lines-table td,
  #panel-packing .packing-ato-bom-table,
  #panel-packing .packing-ato-bom-table tbody,
  #panel-packing .packing-ato-bom-table tr,
  #panel-packing .packing-ato-bom-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  #panel-packing .packing-lines-table thead,
  #panel-packing .packing-ato-bom-table thead {
    display: none;
  }
  #panel-packing .packing-lines-table tr,
  #panel-packing .packing-ato-bom-table tr {
    margin: 10px 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
  }
  #panel-packing .packing-lines-table td,
  #panel-packing .packing-ato-bom-table td {
    display: grid;
    grid-template-columns: minmax(92px, 36%) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 34px;
    padding: 7px 0;
    border: 0;
    text-align: left;
  }
  #panel-packing .packing-lines-table td::before,
  #panel-packing .packing-ato-bom-table td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
  }
  #panel-packing .packing-lines-table .packing-check-cell,
  #panel-packing .packing-ato-bom-table .packing-ato-sufficient-cell {
    font-size: 15px;
  }
  #panel-packing .packing-lines-table .packing-col-num,
  #panel-packing .packing-lines-table .packing-counted-cell,
  #panel-packing .packing-ato-bom-table .packing-col-num {
    width: auto;
    font-size: 16px;
    text-align: left;
  }
  #panel-packing .packing-lines-table .packing-counted-cell {
    font-size: 20px;
  }
  #panel-packing .packing-lines-table .packing-row-active,
  #panel-packing .packing-lines-table .packing-row-confirmed,
  #panel-packing .packing-lines-table .packing-row-needs-build {
    border-left-width: 3px;
  }
  #panel-packing .packing-lines-table .packing-row-active td:first-child,
  #panel-packing .packing-lines-table .packing-row-confirmed td:first-child,
  #panel-packing .packing-lines-table .packing-row-needs-build td:first-child {
    border-left: 0;
  }
  #panel-packing .packing-ato-component-cell {
    justify-content: flex-start;
  }
  #panel-packing .packing-focus-header,
  #panel-packing .packing-focus-count-row {
    align-items: flex-start;
    flex-direction: column;
  }
  #panel-packing .packing-focus-count-row {
    gap: 6px;
  }
  #panel-packing .packing-focus-item {
    overflow-wrap: anywhere;
  }
  #panel-packing .packing-focus-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #panel-packing .packing-focus-nav .btn {
    width: 100%;
    min-width: 0;
    min-height: 52px;
  }
  #panel-packing .packing-focus-nav .btn-primary {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  #panel-packing .packing-focus-nav .btn:first-child { grid-column: 1; grid-row: 2; }
  #panel-packing .packing-focus-nav .btn:last-child { grid-column: 2; grid-row: 2; }
  #panel-packing .packing-actions {
    bottom: 0;
    gap: 8px;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 420px) {
  #panel-packing .packing-box-presets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #panel-packing .packing-box-btn,
  #panel-packing .packing-box-custom-input {
    width: 100%;
    min-width: 0;
  }
  #panel-packing .packing-box-presets .packing-box-btn:last-of-type {
    grid-column: 1 / -1;
  }
}

/* ── Count Tab (shared part search + scale reading, reused by Count Audit) ── */
.count-picker-wrap { position:relative; margin-bottom:20px; max-width:980px; }
.count-part-search {
  width:100%;
  font-size:18px;
  padding:14px 18px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--input-bg); color:var(--text-primary);
  box-shadow: 0 1px 2px rgba(43,33,54,.04);
}
.count-part-search::placeholder { color: var(--text-muted); }
.count-part-dropdown {
  position:absolute; top:100%; left:0; width:100%;
  background:var(--card-bg); border:1px solid var(--border); border-top:none;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  max-height:220px; overflow-y:auto; z-index:100;
  display:none; box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.count-part-dropdown.open { display:block; }
.count-part-option { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; cursor:pointer; }
.count-part-option:hover { background:var(--table-row-hover); }
.count-part-option-desc { font-size:13px; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.count-part-option-id { font-size:11px; color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
.count-part-option-empty { color:var(--text-muted); font-size:12px; font-style:italic; justify-content:center; cursor:default; }

.count-scale-reading {
  font-size:32px; font-weight:700; color:var(--text-primary);
  line-height:1; margin-bottom:12px;
}
.count-scale-calc { font-size:13px; color:var(--text-secondary); }
@media (max-width: 700px) {
  .count-picker-wrap {
    max-width: 100%;
  }
}

/* ── Tasks Tab ────────────────────────────────────────────────────────────── */
    .tasks-summary { margin-bottom: 14px; }
    .tasks-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
    .tasks-filter-bar { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
    .tasks-filter-bar .btn span { opacity: .7; }
    .tasks-toolbar-controls { display: flex; align-items: center; gap: 10px; margin-left: auto; }
    .task-filter-select { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; white-space: nowrap; }
    .task-filter-select select { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--card-bg); font: inherit; font-size: 12px; outline: none; cursor: pointer; }
    .task-filter-select select:focus { border-color: var(--border-focus); }
    .task-search-wrap { display: flex; align-items: center; gap: 7px; min-width: 220px; padding: 6px 9px; color: var(--text-muted); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color .12s, box-shadow .12s; }
    .task-search-wrap:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(204,53,127, .1); }
    .task-search-wrap input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; color: var(--text-primary); background: transparent; font: inherit; font-size: 13px; }
    .task-search-wrap kbd { padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); background: var(--bg-secondary); font-size: 10px; line-height: 1.4; }
    .task-sort-wrap { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; white-space: nowrap; }
    .task-sort-wrap select { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--card-bg); font: inherit; font-size: 12px; outline: none; cursor: pointer; }
    .task-sort-wrap select:focus { border-color: var(--border-focus); }
    .task-card { margin-bottom: 8px; transition: border-color .12s, box-shadow .12s, opacity .12s; }
    .task-card:hover { border-color: #d7c2ec; box-shadow: 0 3px 8px rgba(90,60,125,.1); }
    .task-card-inner { display: flex; align-items: flex-start; gap: 14px; padding: 15px 16px; }
    .task-card-done { opacity: 0.62; }
    .task-card-pending { opacity: .58; pointer-events: none; }
    .task-check-btn {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid var(--border);
      background: var(--card-bg);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
      transition: border-color 0.15s, background 0.15s, transform .12s;
      color: #fff;
      padding: 0;
    }
    .task-check-btn:hover { border-color: var(--sidebar-accent); transform: scale(1.08); }
    .task-check-done { background: var(--success); border-color: var(--success); }
    .task-check-done:hover { background: var(--success); border-color: var(--success); }
    .task-body { flex: 1; min-width: 0; }
    .task-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .task-title { min-width: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); }
    .task-title-done { text-decoration: line-through; color: var(--text-muted); }
    .task-notes { font-size: 13px; color: var(--text-secondary); margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
    .task-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
    .task-assignee, .task-project { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); font-size: 12px; }
    .task-assignee-avatar { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--btn-primary-text, #fff); background: var(--btn-primary); font-size: 9px; font-weight: 700; letter-spacing: .02em; }
    .task-project { padding-left: 8px; border-left: 1px solid var(--border); }
    .task-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
    .task-priority-high { background: #ffe1e7; color: #b0303f; }
    .task-priority-medium { background: #ffedd0; color: #8a5c08; }
    .task-priority-low { background: #e3e7ff; color: #3b54a8; }
    .task-meta { display: flex; gap: 10px; margin-top: 8px; color: var(--text-muted); font-size: 11px; }
    .task-meta span + span { padding-left: 10px; border-left: 1px solid var(--border); }
    .task-form-card { margin-bottom: 12px; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(204,53,127, .08), var(--card-shadow); }
    .task-form-wrap { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
    .task-form-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--text-primary); font-size: 13px; font-weight: 700; }
    .task-form-hint { color: var(--text-muted); font-size: 11px; font-weight: 400; }
    .task-field { display: flex; flex-direction: column; gap: 5px; color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing:-.005em; }
    .task-field em { color: var(--text-muted); font-size: 10px; font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; }
    .task-field input, .task-field textarea, .task-field select { box-sizing: border-box; width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); background: var(--card-bg); font: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; outline: none; }
    .task-field textarea { resize: vertical; line-height: 1.45; }
    .task-field input:focus, .task-field textarea:focus, .task-field select:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(204,53,127, .1); }
    .task-field-title input { font-size: 15px; font-weight: 500; }
    .task-form-footer { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
    .task-form-options { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
    .task-field-inline { min-width: 100px; }
    .task-field-inline select { padding: 6px 8px; font-size: 13px; }
    .task-project-field { min-width: 170px; }
    .task-order-field { min-width: 190px; }
    .task-order-input-wrap { position: relative; }
    .task-form-actions { display: flex; gap: 8px; }
    .task-linked-order { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--text-secondary); cursor: default; }
    .task-order-results {
      position: absolute; z-index: 200; top: calc(100% + 2px); left: 0; right: 0;
      background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1); max-height: 200px; overflow-y: auto;
    }
    .task-order-result { display: block; width: 100%; padding: 8px 10px; border: 0; text-align: left; font: inherit; font-size: 13px; color: var(--text-primary); background: transparent; cursor: pointer; }
    .task-order-result:not(.task-order-no-results):hover { background: var(--table-row-hover); }
    .task-order-no-results { color: var(--text-muted); cursor: default; }
    .task-order-hover-card {
      position: fixed; z-index: 500;
      background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
      box-shadow: 0 4px 20px rgba(0,0,0,0.13); padding: 12px 14px;
      min-width: 260px; max-width: 380px; pointer-events: none;
    }
    .task-hover-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .task-hover-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
    .task-hover-lines { width: 100%; border-collapse: collapse; font-size: 12px; }
    .task-hover-lines th { color: var(--text-muted); font-weight: 600; text-transform:none; font-size: 10px; letter-spacing:-.005em; padding-bottom: 4px; text-align: left; }
    .task-hover-lines td { padding: 4px 0; color: var(--text-primary); border-top: 1px solid var(--border); }
    .task-hover-empty { font-size: 12px; color: var(--text-muted); }
    .tasks-empty-state { padding: 42px 20px; border: 1px dashed var(--border); border-radius: var(--radius); background: rgba(255,255,255,.55); }
    .tasks-empty-icon { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 10px; border: 1px solid var(--border); border-radius: 50%; color: var(--text-muted); font-size: 14px; }

    @media (max-width: 700px) {
      /* Without wrapping, .task-sort-wrap (flex-shrink:0 + nowrap) is pushed
         past the right edge and the sort select ends up entirely off-screen. */
      .tasks-toolbar-controls { width: 100%; margin-left: 0; flex-wrap: wrap; }
      .task-filter-select { flex: 1; }
      .task-filter-select select { min-width: 0; flex: 1; }
      .task-search-wrap { flex: 1; min-width: 0; }
      .task-sort-wrap { flex-shrink: 0; }
      .task-card-inner { flex-wrap: wrap; }
      .task-actions { width: 100%; padding-left: 36px; }
      .task-form-footer { flex-direction: column; align-items: flex-start; }
      .task-form-options { width: 100%; }
      .task-field-inline, .task-project-field, .task-order-field { flex: 1; min-width: 0; }
      .task-form-actions { width: 100%; }
      .task-form-actions .btn { flex: 1; justify-content: center; }
      .task-form-hint { display: none; }
    }

    /* ── Expenses tab ──────────────────────────────────────────────────────── */
    .expense-form-card { margin-bottom: 12px; }
    .expense-form-wrap { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
    .expense-form-row { display: flex; gap: 12px; flex-wrap: wrap; }
    .expense-form-row .expense-field { flex: 1; min-width: 140px; }
    .expense-field { display: flex; flex-direction: column; gap: 4px; }
    .expense-field label {
      font-size: 11px;
      font-weight: 600;
      text-transform:none;
      letter-spacing:-.005em;
      color: var(--text-muted);
    }
    /* 16px prevents iOS auto-zoom — this form is used for phone/tablet receipt capture. */
    .expense-field input,
    .expense-field select,
    .expense-field textarea {
      padding: 9px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 16px;
      font-family: var(--font);
      color: var(--text-primary);
      background: var(--card-bg);
      outline: none;
      width: 100%;
      box-sizing: border-box;
    }
    .expense-field input:focus,
    .expense-field select:focus,
    .expense-field textarea:focus { border-color: var(--sidebar-accent); }

    @media (max-width: 700px) {
      .expense-form-row { flex-direction: column; }
    }
    .expense-photo-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 28px 16px;
      gap: 4px;
    }
    .expense-photo-step-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0; }
    .expense-photo-step-hint { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; max-width: 360px; }
    .expense-receipt-review { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
    .expense-verify-hint { font-size: 13px; color: var(--text-muted); margin: 8px 0 0; }
    .expense-receipt-pdf-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      margin-top: 6px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 13px;
      color: var(--text-primary);
      text-decoration: none;
      background: var(--bg-subtle, var(--card-bg));
    }
    .expense-receipt-pdf-chip:hover { border-color: var(--sidebar-accent); }
    .expense-reconciled-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      background: #d6f7ec;
      color: #157a63;
      vertical-align: middle;
    }

    /* ── Labels: shelf-mode toggle ──────────────────────────────────────────── */
    .labels-format-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      padding: 8px 0 4px;
    }
    .labels-format-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text-primary);
      cursor: pointer;
      user-select: none;
    }
    .labels-format-label input[type="checkbox"] {
      width: 16px;
      height: 16px;
      cursor: pointer;
      accent-color: var(--btn-primary);
    }
    .labels-quantity-control {
      margin-left: auto;
      cursor: default;
    }
    .labels-quantity-input {
      width: 74px;
      padding: 5px 7px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--input-bg);
      color: var(--text-primary);
      font: inherit;
      text-align: right;
    }
    .labels-quantity-help {
      color: var(--text-muted);
      font-size: 11px;
      white-space: nowrap;
    }

    /* ── Shelf Vision Panel ── */
    .shelf-toggle-btn {
      background: none;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      color: var(--text-secondary);
      padding: 4px 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 32px;
      min-height: 32px;
    }
    .shelf-toggle-btn:hover { background: var(--btn-secondary); }

    .shelf-panel {
      position: fixed;
      bottom: 1rem;
      right: 1rem;
      width: 340px;
      max-height: 60vh;
      overflow-y: auto;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 4px 20px rgba(0,0,0,.18);
      z-index: 200;
    }
    .shelf-panel.hidden { display: none; }

    .shelf-panel-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      background: var(--card-bg);
      z-index: 1;
    }
    .shelf-panel-header > span {
      flex: 1;
      font-weight: 600;
      font-size: 13px;
    }
    .shelf-upload-label {
      cursor: pointer;
      font-size: 12px;
      white-space: nowrap;
    }
    .shelf-debug-label {
      cursor: pointer;
      font-size: 12px;
      white-space: nowrap;
    }
    .shelf-panel-close {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-muted);
      font-size: 16px;
      padding: 0;
      min-width: 28px;
      min-height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
    }
    .shelf-panel-close:hover { background: var(--btn-secondary); color: var(--text-primary); }

    #shelf-panel-grid {
      display: grid;
      grid-template-columns: repeat(var(--shelf-cols, 4), 1fr);
      gap: 4px;
      padding: 8px;
    }

    .shelf-cell {
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      min-height: 58px;
      padding: 5px 6px;
      font-size: 11px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 2px;
    }
    .shelf-cell.empty {
      background: var(--content-bg);
      color: var(--text-muted);
    }
    .shelf-cell.occupied {
      background: var(--table-header-bg);
    }
    .shelf-cell.fresh {
      animation: shelf-pulse 2.5s ease-out forwards;
    }
    .shelf-cell.packing-highlight {
      border-color: #d19a1f;
      box-shadow: 0 0 0 2px rgba(209,154,31, 0.35);
      background: rgba(209,154,31, 0.12);
    }
    .shelf-cell.packing-highlight .shelf-cell-id {
      color: #8a5c08;
    }
    .shelf-cell.shelf-highlight-current {
      border-color: #4b7bd1;
      box-shadow: 0 0 0 3px rgba(75,123,209, 0.28);
      background: rgba(75,123,209, 0.12);
    }
    .shelf-cell.shelf-highlight-current .shelf-cell-id {
      color: #4054c8;
    }
    .shelf-cell.shelf-highlight-current .shelf-cell-status {
      color: #4054c8;
    }
    .shelf-cell.shelf-highlight-assembly {
      border-color: #12897a;
      background: rgba(47,199,176, 0.12);
      box-shadow: 0 0 0 3px rgba(47,199,176, 0.28);
    }
    .shelf-cell.shelf-highlight-assembly .shelf-cell-id {
      color: #12897a;
    }
    .shelf-cell.shelf-highlight-assembly .shelf-cell-status {
      color: #12897a;
    }
    .shelf-cell.shelf-highlight-queue {
      border-color: rgba(209,154,31, 0.85);
      box-shadow: inset 0 0 0 2px rgba(209,154,31, 0.24);
      background: rgba(209,154,31, 0.08);
    }
    .shelf-cell.shelf-highlight-queue .shelf-cell-status {
      color: #8a5c08;
    }
    .shelf-cell.occluded {
      background: rgba(209,154,31, 0.08);
      opacity: 0.72;
    }
    .shelf-cell.missing {
      background: rgba(224,67,80, 0.07);
      border-color: rgba(224,67,80, 0.45);
    }
    .shelf-cell-status {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.05em;
      margin-top: 1px;
      min-height: 12px;
    }
    .shelf-cell.occluded .shelf-cell-status { color: #8a5c08; }
    .shelf-cell.missing  .shelf-cell-status { color: #e04350; }
    @keyframes shelf-pick-flash {
      0%   { background: rgba(107,126,240, 0.30); border-color: rgba(107,126,240, 0.6); }
      100% { background: var(--table-header-bg);   border-color: var(--border); }
    }
    .shelf-cell.pick-flash {
      animation: shelf-pick-flash 1.4s ease-out forwards;
    }
    .shelf-missing-alert {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: rgba(224,67,80, 0.10);
      border: 1px solid rgba(224,67,80, 0.35);
      border-radius: 6px;
      padding: 6px 10px;
      margin-bottom: 6px;
      font-size: 12px;
      color: var(--text-primary);
    }
    .shelf-missing-dismiss {
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 14px;
      padding: 0 2px;
      line-height: 1;
    }
    .shelf-missing-dismiss:hover { color: var(--text-primary); }
    @keyframes shelf-pulse {
      0%   { background: rgba(19,134,112, 0.25); border-color: #138670; }
      100% { background: var(--table-header-bg); border-color: var(--border); }
    }

    .shelf-cell-id {
      font-weight: 600;
      font-size: 11px;
      color: var(--text-primary);
      word-break: break-all;
    }
    .shelf-cell-desc {
      font-size: 10px;
      color: var(--text-secondary);
      line-height: 1.2;
    }
    .shelf-cell-pos {
      font-size: 9px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .shelf-live-badge {
      font-size: 11px;
      font-weight: 600;
      color: #138670;
      letter-spacing: .03em;
      margin-right: auto;
    }

    .shelf-error-msg {
      margin: 6px 8px 0;
      padding: 6px 10px;
      background: rgba(224,67,80,.1);
      border: 1px solid rgba(224,67,80,.4);
      border-radius: var(--radius-sm);
      font-size: 12px;
      color: var(--error);
    }
    .shelf-debug-msg {
      grid-column: 1 / -1;
      margin: 0 0 4px;
      padding: 6px 10px;
      background: rgba(107,126,240, .08);
      border: 1px solid rgba(107,126,240, .32);
      border-radius: var(--radius-sm);
      font-size: 12px;
      line-height: 1.35;
      color: var(--text-primary);
    }
    .shelf-debug-msg a {
      color: var(--btn-primary);
      font-weight: 600;
    }

    .shelf-page {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: calc(100vh - 96px);
    }
    .shelf-page-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }
    .shelf-page-header h2 {
      margin: 0;
    }
    .shelf-page-header p {
      margin: 4px 0 0;
      color: var(--text-secondary);
    }
    .shelf-page-status {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }
    .shelf-page-summary {
      display: grid;
      grid-template-columns: minmax(140px, 0.8fr) minmax(220px, 1.4fr);
      gap: 12px;
      padding: 10px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .shelf-page-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-muted);
      text-transform:none;
      letter-spacing:-.005em;
      margin-bottom: 3px;
    }
    .shelf-page-value {
      font-size: 18px;
      font-weight: 700;
      color: var(--text-primary);
      overflow-wrap: anywhere;
    }
    .shelf-page-grid {
      display: grid;
      grid-template-columns: repeat(var(--shelf-cols, 3), minmax(0, 1fr));
      gap: clamp(8px, 1.4vw, 14px);
      flex: 1;
      min-height: 0;
    }
    .shelf-cell-page {
      min-height: clamp(118px, 17vh, 210px);
      padding: clamp(10px, 1.5vw, 18px);
      border-radius: var(--radius-sm);
      gap: 7px;
    }
    .shelf-cell-page .shelf-cell-id {
      font-size: clamp(19px, 3vw, 34px);
      line-height: 1;
    }
    .shelf-cell-page .shelf-cell-desc {
      font-size: clamp(12px, 1.5vw, 18px);
      line-height: 1.25;
    }
    .shelf-cell-page .shelf-cell-status {
      font-size: clamp(11px, 1.4vw, 18px);
      min-height: 18px;
    }
    .shelf-cell-page .shelf-cell-pos {
      font-size: clamp(11px, 1.2vw, 15px);
    }
    @media (max-width: 700px) {
      .shelf-page { min-height: calc(100vh - 82px); }
      .shelf-page-header {
        flex-direction: column;
        gap: 8px;
      }
      .shelf-page-status {
        justify-content: flex-start;
      }
      .shelf-page-summary {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .shelf-page-grid {
        gap: 6px;
      }
      .shelf-cell-page {
        min-height: 112px;
        padding: 8px;
      }
    }

    /* ── Tablet: packing + shelf overrides (641–1024px) ── */
    @media (min-width: 641px) and (max-width: 1024px) {
      /* btn-sm: usable tap target */
      .btn-sm { min-height: 40px; padding: 6px 12px; font-size: 13px; }

      /* Shelf panel → full-width bottom sheet */
      .shelf-panel {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 55vh;
        border-radius: var(--radius) var(--radius) 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
      }

      /* Shelf header: bigger tap zone, pull-handle feel */
      .shelf-panel-header {
        padding: 14px 16px;
        gap: 12px;
      }

      /* Shelf close: 44px tap target */
      .shelf-panel-close {
        min-width: 44px;
        min-height: 44px;
        font-size: 18px;
      }

      /* Shelf reset button: adequate height */
      #shelf-reset-btn { min-height: 40px; }

      /* Shelf grid cells: readable text and larger tap areas */
      .shelf-cell {
        min-height: 68px;
        padding: 7px 6px;
      }
      .shelf-cell-id     { font-size: 13px; }
      .shelf-cell-desc   { font-size: 11px; }
      .shelf-cell-status { font-size: 10px; }
      .shelf-cell-pos    { font-size: 10px; }

      /* Packing header: wrap gracefully */

      /* Box preset custom input: prevent iOS auto-zoom */
      .packing-box-custom-input { font-size: 16px; width: 80px; }

      /* Focus nav: bigger primary button */
      .packing-focus-nav .btn { min-height: 52px; }
    }
/* Count Audit */
.count-audit-card{max-width:760px;margin-bottom:18px;padding:22px;display:flex;flex-direction:column;gap:14px;overflow:visible}
.count-audit-kicker{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}
.count-audit-part-summary,.count-audit-meta{color:var(--text-secondary)}
.count-audit-image{width:120px;height:120px;object-fit:contain;border:1px solid var(--border);border-radius:var(--radius-sm)}
.count-audit-methods,.count-audit-actions,.count-audit-attempts{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.count-audit-attempts{flex-direction:column;align-items:flex-start;padding:12px;background:var(--bg-subtle);border-radius:var(--radius-sm)}
.count-audit-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.count-audit-methods label,.count-audit-attempts label{flex-direction:row;align-items:center;font-weight:500}
.count-audit-card input[type="number"],.count-audit-card select,.count-audit-card textarea{padding:9px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;background:var(--card-bg)}
.count-audit-quantity input{max-width:220px;font-size:24px}
.count-audit-scale{display:grid;gap:10px;padding:16px;border:1px solid var(--border);border-radius:var(--radius-sm)}
.count-audit-scale-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.count-audit-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.count-audit-result-grid>div{padding:14px;background:var(--bg-subtle);border-radius:var(--radius-sm);display:flex;flex-direction:column;gap:5px}
.count-audit-result-grid span{font-size:12px;color:var(--text-muted);}.count-audit-result-grid strong{font-size:24px}
.count-audit-list{margin-top:18px;max-width:760px}.count-audit-list table{width:100%}
.count-audit-list .empty-state{padding:24px}
@media(max-width:640px){.count-audit-result-grid{grid-template-columns:1fr}.count-audit-card{padding:16px}}

/* ── Responsive interaction polish ────────────────────────────────────────── */
button,
[role="button"],
select,
input[type="checkbox"],
input[type="radio"] {
  touch-action: manipulation;
}

.table-wrap {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.page-header > * { min-width: 0; }
.page-header > .btn { flex-shrink: 0; }

@media (max-width: 1024px) {
  #menu-btn,
  #shelf-toggle-btn {
    min-width: 44px;
    min-height: 44px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    min-height: 44px;
  }

  .btn-sm { min-height: 44px; }
  .tx-remove-btn { min-width: 44px; min-height: 44px; }
}

@media (min-width: 641px) and (max-width: 800px) {
  #fx-display { display: none; }
  #auth-user-label {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 44px; }
  .nav-item { min-height: 44px; }
  #shelf-toggle-btn { min-width: 44px; min-height: 44px; }
}
.plm-section { margin: 18px 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-subtle, rgba(0,0,0,.02)); }
.plm-section-header { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:14px; }
.plm-section h4 { margin:0 0 4px; }
.plm-summary-line, .plm-revision-meta, .plm-legacy-note { color:var(--text-muted); font-size:12px; }
.plm-actions, .plm-revision-actions { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.plm-summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:14px; }
.plm-summary-grid > div { padding:9px; border-radius:var(--radius-sm); background:var(--bg, #fff); }
.plm-summary-grid span { display:block; color:var(--text-muted); font-size:11px; letter-spacing:-.005em; margin-bottom:3px; }
.plm-summary-grid strong { font-size:13px; }
.plm-legacy-note { padding:8px 0; }
.plm-history { border-top:1px solid var(--border); padding-top:12px; }
.plm-history-title { font-size:11px; font-weight:700; letter-spacing:-.005em; margin-bottom:8px; }
.plm-revision-row { padding:10px 0; border-top:1px solid var(--border); }
.plm-revision-main { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.plm-status, .plm-eco-link { font-size:11px; color:var(--text-muted); border:1px solid var(--border); border-radius:999px; padding:2px 7px; }
.plm-revision-meta { margin-top:4px; }
.plm-disposition { margin-top:5px; font-size:12px; }
.plm-checklist { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:6px 14px; margin:10px 0; }
.plm-check-item { font-size:12px; color:var(--text-secondary); }
.plm-empty { color:var(--text-muted); font-size:12px; padding:6px 0; }
.plm-release-files { margin-top:12px; padding-top:10px; border-top:1px dashed var(--border); }
.plm-file-warning { color:var(--warn, #d19a1f); margin-left:8px; }
.plm-file-present { margin-left:8px; }
.plm-file-slots { display:grid; gap:6px; margin:8px 0; }
.plm-file-slot, .plm-file-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg, #fff); font-size:12px; }
.plm-file-slot > span { flex:1; }
.plm-file-slot em { color:var(--warn, #d19a1f); font-size:11px; font-style:normal; }
.plm-file-slot em.plm-file-present { color:var(--success, #138670); }
.plm-file-row { margin-top:6px; }
.plm-file-row > div:first-child { min-width:0; flex:1; }
.plm-file-actions, .plm-file-additional { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.plm-file-additional { margin:8px 0; }
.plm-file-additional select { min-height:30px; border:1px solid var(--border); border-radius:6px; padding:4px 8px; background:var(--bg, #fff); color:var(--text-primary); }
@media (max-width: 700px) { .plm-section-header { flex-direction:column; } .plm-actions, .plm-revision-actions { justify-content:flex-start; } }

/* ── PLM / Engineering workspace ───────────────────────────────────────── */
.plm-dashboard-shell { max-width: 1480px; margin: 0 auto; padding-bottom: 28px; }
.plm-dashboard-header, .plm-wizard-header, .plm-detail-header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:18px; }
.plm-dashboard-header h2, .plm-wizard-header h3, .plm-detail-header h3 { margin:2px 0 5px; letter-spacing:-.02em; }
.plm-dashboard-header p, .plm-wizard-header p, .plm-detail-header p { color:var(--text-secondary); max-width:720px; }
.plm-dashboard-header-actions, .plm-detail-header-actions, .plm-detail-actions { display:flex; gap:8px; flex-wrap:wrap; }
.plm-eyebrow { color:var(--btn-primary); font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.plm-workspace-tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:18px; overflow:auto; }
.plm-workspace-tab { border:0; background:transparent; color:var(--text-muted); padding:10px 13px; font:inherit; font-size:13px; cursor:pointer; white-space:nowrap; border-bottom:2px solid transparent; }
.plm-workspace-tab:hover, .plm-workspace-tab.active { color:var(--text-primary); border-bottom-color:var(--btn-primary); }
.plm-lifecycle-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.plm-lifecycle-card { text-align:left; padding:16px; min-height:112px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card-bg); box-shadow:var(--card-shadow); cursor:pointer; color:var(--text-primary); transition:transform .12s, border-color .12s; }
.plm-lifecycle-card:hover { transform:translateY(-1px); border-color:var(--btn-primary); }
.plm-lifecycle-card span, .plm-lifecycle-card small { display:block; color:var(--text-muted); }
.plm-lifecycle-card span { font-size:12px; font-weight:700; }
.plm-lifecycle-card strong { display:block; font-size:31px; line-height:1.1; margin:8px 0 3px; }
.plm-lifecycle-card--released strong { color:var(--success); }.plm-lifecycle-card--obsolete strong { color:var(--error); }.plm-lifecycle-card--pending-release strong { color:var(--warn); }
.plm-dashboard-section { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--card-shadow); padding:18px; margin-bottom:18px; }
.plm-section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:13px; }.plm-section-heading h3,.plm-section-heading h4 { margin:2px 0 3px; }.plm-section-heading p,.plm-section-caption { color:var(--text-muted); font-size:12px; }
.plm-queue-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.plm-queue-card { min-width:0; background:var(--bg-subtle); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px; }.plm-queue-title { display:flex; justify-content:space-between; gap:8px; font-size:12px; font-weight:700; margin-bottom:7px; }.plm-queue-title strong { color:var(--btn-primary); }
.plm-queue-row, .plm-eco-list-row { width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px; text-align:left; border:0; border-top:1px solid var(--border); background:transparent; padding:9px 0; color:var(--text-primary); cursor:pointer; }.plm-queue-row:hover,.plm-eco-list-row:hover { color:var(--btn-primary); }.plm-queue-row span,.plm-eco-list-row span { min-width:0; }.plm-queue-row strong,.plm-queue-row small,.plm-eco-list-row strong,.plm-eco-list-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.plm-queue-row small,.plm-eco-list-row small { color:var(--text-muted); font-size:11px; margin-top:2px; }.plm-queue-row em { color:var(--warn); font-size:11px; font-style:normal; white-space:nowrap; }.plm-queue-more { border-top:1px solid var(--border); color:var(--text-muted); font-size:11px; padding-top:7px; }
.plm-dash-status { display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:999px; padding:3px 8px; color:var(--text-secondary); font-size:11px; white-space:nowrap; }.plm-dash-status--released { color:var(--success); border-color:rgba(19,134,112,.35); background:rgba(19,134,112,.08); }.plm-dash-status--pending-release,.plm-dash-status--pending-approval { color:var(--warn); }.plm-dash-status--cancelled,.plm-dash-status--obsolete { color:var(--error); }
.plm-filter-bar { display:grid; grid-template-columns:1.6fr repeat(4,minmax(120px,1fr)) auto; align-items:end; gap:9px; margin-bottom:14px; }.plm-filter-bar label,.plm-form-grid label,.plm-release-controls label,.plm-snapshot-grid label { display:flex; flex-direction:column; gap:5px; min-width:0; }.plm-filter-bar label > span,.plm-form-grid label > span,.plm-release-controls label > span,.plm-snapshot-grid label > span { color:var(--text-muted); font-size:11px; font-weight:700; }.plm-filter-bar input,.plm-filter-bar select,.plm-form-grid input,.plm-form-grid select,.plm-form-grid textarea,.plm-release-controls select,.plm-snapshot-grid input,.plm-snapshot-grid textarea,.plm-bom-add select,.plm-bom-add input,.plm-dropzone select { width:100%; border:1px solid var(--border); border-radius:6px; background:var(--input-bg); color:var(--text-primary); padding:9px 10px; font:inherit; }.plm-filter-check { flex-direction:row!important; align-items:center; gap:7px!important; padding-bottom:10px; white-space:nowrap; color:var(--text-secondary); font-size:12px; }.plm-filter-check input { width:auto; }
.plm-table-wrap { overflow:auto; border:1px solid var(--border); border-radius:var(--radius-sm); }.plm-data-table { width:100%; border-collapse:collapse; min-width:820px; }.plm-data-table th { text-align:left; background:var(--table-header-bg); color:var(--text-muted); font-size:10px; text-transform:none; letter-spacing:-.005em; padding:10px; white-space:nowrap; }.plm-data-table td { border-top:1px solid var(--border); padding:11px 10px; font-size:12px; vertical-align:middle; }.plm-data-table tbody tr { cursor:pointer; }.plm-data-table tbody tr:hover,.plm-data-table tbody tr:focus { background:var(--table-row-hover); outline:none; }.plm-data-table td strong,.plm-data-table td small { display:block; }.plm-data-table td small { color:var(--text-muted); margin-top:2px; }.plm-file-warning,.plm-review-danger { color:var(--warn); }.plm-file-present { color:var(--success); }
.plm-stepper { display:grid; grid-template-columns:repeat(11,minmax(50px,1fr)); gap:4px; margin-bottom:16px; overflow:auto; }.plm-step { min-width:65px; border:0; border-top:2px solid var(--border); padding:8px 3px; background:transparent; color:var(--text-muted); font-size:10px; cursor:pointer; }.plm-step span { display:block; margin:auto auto 4px; width:20px; height:20px; line-height:20px; border-radius:50%; background:var(--btn-secondary); color:var(--text-secondary); font-size:10px; }.plm-step.active { border-top-color:var(--btn-primary); color:var(--text-primary); font-weight:700; }.plm-step.active span,.plm-step.complete span { background:var(--btn-primary); color:var(--btn-primary-text, #fff); }.plm-wizard-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--card-shadow); padding:20px; min-height:360px; }.plm-wizard-actions { display:flex; justify-content:space-between; gap:10px; padding-top:14px; }.plm-autosave { color:var(--success); font-size:12px; padding-top:5px; }.plm-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }.plm-form-grid label:first-child:last-child { grid-column:1/-1; }.plm-context-card,.plm-callout { border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-subtle); padding:13px; }.plm-context-card span,.plm-context-card strong,.plm-context-card small { display:block; }.plm-context-card span { color:var(--text-muted); font-size:11px; letter-spacing:-.005em; }.plm-context-card strong { font-size:18px; margin:5px 0; }.plm-context-card small,.plm-callout { color:var(--text-secondary); font-size:12px; line-height:1.45; }.plm-review-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }.plm-review-grid > div { border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-subtle); padding:13px; }.plm-review-grid span,.plm-review-grid strong,.plm-review-grid small { display:block; }.plm-review-grid span { color:var(--text-muted); font-size:11px; }.plm-review-grid strong { margin:5px 0; }.plm-review-grid small { color:var(--text-secondary); font-size:11px; overflow-wrap:anywhere; }.plm-category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.plm-category-grid label { display:flex; gap:8px; align-items:center; border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px; background:var(--bg-subtle); font-size:12px; }.plm-snapshot-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:22px; }.plm-snapshot-grid h4 { margin-bottom:10px; }.plm-snapshot-grid label { margin-bottom:10px; }.plm-bom-editor,.plm-file-workspace { display:flex; flex-direction:column; gap:12px; }.plm-bom-add { display:grid; grid-template-columns:1fr 110px auto; gap:8px; }.plm-file-state { font-size:12px; font-weight:700; }.plm-file-state.complete { color:var(--success); }.plm-file-state.missing { color:var(--warn); }.plm-file-category-list { border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }.plm-file-category-row { display:flex; justify-content:space-between; gap:15px; align-items:center; padding:11px; border-bottom:1px solid var(--border); }.plm-file-category-row:last-child { border-bottom:0; }.plm-file-category-row > div:last-child { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }.plm-file-category-row strong,.plm-file-category-row small { display:block; }.plm-file-category-row small { color:var(--text-muted); margin-top:2px; font-size:11px; }.plm-file-chip { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--border); border-radius:999px; padding:4px 7px; font-size:11px; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.plm-file-chip button { border:0; background:transparent; cursor:pointer; color:var(--text-muted); }.plm-dropzone { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; border:1px dashed var(--btn-primary); border-radius:var(--radius-sm); padding:15px; background:rgba(204,53,127,.04); }.plm-dropzone strong,.plm-dropzone span { display:block; }.plm-dropzone span { color:var(--text-muted); font-size:11px; }.plm-dropzone.dragging { background:rgba(204,53,127,.12); }.plm-release-review { display:flex; flex-direction:column; gap:16px; }.plm-review-banner { display:flex; justify-content:space-between; gap:15px; align-items:flex-start; padding-bottom:14px; border-bottom:1px solid var(--border); }.plm-release-controls { display:grid; grid-template-columns:repeat(2,minmax(0,240px)); gap:12px; }.plm-wizard-final-actions { display:flex; justify-content:flex-end; gap:8px; }.plm-inline-create { margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }.plm-inline-create h4 { margin-bottom:10px; }.plm-inline-create .plm-form-grid { margin-bottom:10px; }
.plm-eco-layout { display:grid; grid-template-columns:330px minmax(0,1fr); gap:16px; }.plm-eco-list,.plm-eco-detail { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--card-shadow); padding:16px; min-width:0; }.plm-eco-list-row.selected { background:var(--bg-hover); margin:0 -8px; padding-left:8px; padding-right:8px; }.plm-detail-actions { margin:-5px 0 14px; }.plm-eco-facts,.plm-history-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0; }.plm-eco-facts > div,.plm-history-facts > div { background:var(--bg-subtle); border-radius:var(--radius-sm); padding:11px; }.plm-eco-facts span,.plm-eco-facts strong,.plm-eco-facts small,.plm-history-facts span,.plm-history-facts strong,.plm-history-facts small { display:block; }.plm-eco-facts span,.plm-history-facts span { color:var(--text-muted); font-size:11px; }.plm-eco-facts strong,.plm-history-facts strong { margin:5px 0; }.plm-eco-facts small,.plm-history-facts small { color:var(--text-secondary); font-size:11px; overflow-wrap:anywhere; }.plm-eco-facts button { border:0; background:transparent; color:var(--btn-primary); padding:0 4px 0 0; cursor:pointer; }.plm-timeline { border-top:1px solid var(--border); padding-top:15px; }.plm-timeline h4 { margin:0 0 10px; }.plm-timeline-track { border-left:2px solid var(--border); margin:0 0 18px 9px; padding-left:16px; }.plm-timeline-event { position:relative; margin-bottom:13px; }.plm-timeline-event > span { position:absolute; left:-23px; top:3px; width:10px; height:10px; border-radius:50%; background:var(--btn-primary); }.plm-timeline-event strong,.plm-timeline-event small { display:block; }.plm-timeline-event small { color:var(--text-muted); font-size:11px; margin-top:3px; }.plm-blank-state { min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--text-muted); text-align:center; }.plm-blank-state strong { color:var(--text-primary); font-size:16px; }.plm-detail-view { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--card-shadow); padding:18px; }.plm-immutable-banner { display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:var(--radius-sm); background:rgba(19,134,112,.08); color:var(--success); font-size:12px; }.plm-detail-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }.plm-detail-columns h4,.plm-detail-section h4 { margin:0 0 9px; }.plm-json-snapshot { white-space:pre-wrap; overflow:auto; max-height:300px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-subtle); padding:12px; font:11px/1.5 var(--font-mono); color:var(--text-secondary); }.plm-snapshot-lines { border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:15px; }.plm-snapshot-lines div { display:flex; justify-content:space-between; gap:10px; padding:9px; border-bottom:1px solid var(--border); font-size:12px; }.plm-snapshot-lines div:last-child { border-bottom:0; }.plm-reference-card { display:flex; flex-direction:column; gap:4px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px; background:var(--bg-subtle); font-size:12px; }.plm-reference-card a { overflow-wrap:anywhere; color:var(--btn-primary); }.plm-reference-card span { color:var(--text-muted); }.plm-detail-section { margin-top:17px; }.plm-check-result-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }.plm-check-result-grid div { padding:8px; border-radius:6px; background:var(--bg-subtle); color:var(--text-muted); font-size:12px; }.plm-check-result-grid div.checked { color:var(--success); }.plm-check-result-grid span { margin-right:6px; }
@media(max-width:1000px){.plm-filter-bar{grid-template-columns:repeat(3,minmax(0,1fr))}.plm-queue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.plm-lifecycle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.plm-eco-layout{grid-template-columns:1fr}.plm-eco-list{max-height:330px;overflow:auto}}
@media(max-width:640px){.plm-dashboard-header,.plm-wizard-header,.plm-detail-header,.plm-review-banner{flex-direction:column}.plm-dashboard-header-actions{width:100%}.plm-dashboard-header-actions .btn{flex:1}.plm-filter-bar,.plm-form-grid,.plm-review-grid,.plm-snapshot-grid,.plm-release-controls,.plm-eco-facts,.plm-history-facts,.plm-detail-columns,.plm-check-result-grid{grid-template-columns:1fr}.plm-queue-grid{grid-template-columns:1fr}.plm-category-grid{grid-template-columns:1fr}.plm-bom-add{grid-template-columns:1fr 90px}.plm-bom-add .btn{grid-column:1/-1}.plm-file-category-row{align-items:flex-start;flex-direction:column}.plm-file-category-row > div:last-child{justify-content:flex-start}.plm-wizard-card{padding:14px}}
.plm-file-heading-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

/* ── Operator Chat Cockpit ──────────────────────────────────────────────── */
#panel-chat { max-width: 1480px; margin: 0 auto; }
.operator-headline { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:18px; }
.operator-headline h2 { margin:2px 0 5px; font-size:28px; letter-spacing:-.035em; }
.operator-headline p { color:var(--text-secondary); font-size:13px; }
.eyebrow, .operator-card-kicker { color:var(--btn-primary); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.operator-headline-actions { display:flex; align-items:center; gap:18px; }
.operator-live-status { display:flex; align-items:center; gap:7px; color:var(--text-secondary); font-size:12px; white-space:nowrap; }
.operator-live-dot { width:7px; height:7px; background:var(--success); border-radius:50%; box-shadow:0 0 0 3px rgba(19,134,112,.12); }
.operator-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
@media (min-width:701px) and (max-width:1080px) { .operator-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.operator-metric-value { font-variant-numeric:tabular-nums; }
.operator-metric { display:block; width:100%; min-width:0; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--card-bg); color:var(--text-primary); font:inherit; text-align:left; box-shadow:var(--card-shadow); cursor:pointer; appearance:none; transition:border-color .12s,box-shadow .12s,transform .12s; }
.operator-metric:hover { box-shadow:0 4px 12px rgba(90,60,125,.08); transform:translateY(-1px); }
.operator-metric:focus-visible { outline:2px solid var(--btn-primary); outline-offset:2px; }
.operator-metric-top { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--text-muted); font-size:12px; font-weight:600; letter-spacing:-.005em; }
.operator-metric-value { margin:8px 0 3px; color:var(--text-primary); font-size:25px; line-height:1; font-weight:750; letter-spacing:-.04em; }
.operator-metric-note { overflow:hidden; color:var(--text-secondary); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.operator-metric--urgent { border-color:rgba(224,67,80,.28); background:linear-gradient(135deg,var(--card-bg),rgba(224,67,80,.035)); }
.operator-metric--urgent .operator-metric-value { color:var(--error); }
.operator-metric--ready .operator-metric-value { color:var(--success); }
.operator-metric--approval .operator-metric-value { color:var(--warn); }
.operator-metric-icon { display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; background:var(--bg-subtle); color:var(--btn-primary); font-size:14px; }
.operator-workspace { display:grid; grid-template-columns:minmax(0,1fr) 292px; align-items:start; gap:14px; }
.operator-chat-card { min-width:0; overflow:hidden; padding:0; }
.operator-chat-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px 13px; border-bottom:1px solid var(--border); }
.operator-chat-subtitle { margin-top:4px; color:var(--text-muted); font-size:12px; }
.operator-refresh-btn { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card-bg); color:var(--text-secondary); cursor:pointer; }
.operator-refresh-btn:hover { border-color:var(--btn-primary); color:var(--btn-primary); background:var(--bg-hover); }
.operator-chat-panel { height:min(690px,calc(100vh - 290px)); height:min(690px,calc(100dvh - 290px)); min-height:470px; background:var(--card-bg); }
.operator-chat-panel .chat-messages { padding:18px 20px 12px; gap:13px; background:linear-gradient(180deg,rgba(246,237,252,.33),transparent 38%); }
.operator-welcome { display:flex; gap:12px; align-items:flex-start; max-width:620px; padding:14px 15px; border:1px solid rgba(204,53,127,.2); border-radius:var(--radius-sm); background:rgba(204,53,127,.055); }
.operator-welcome-mark { display:flex; align-items:flex-end; gap:3px; flex-shrink:0; height:22px; padding:0 2px; }
.operator-welcome-mark span { display:block; width:4px; border-radius:3px; background:var(--btn-primary); }
.operator-welcome-mark span:nth-child(1) { height:10px; opacity:.55; }.operator-welcome-mark span:nth-child(2) { height:18px; }.operator-welcome-mark span:nth-child(3) { height:14px; opacity:.75; }
.operator-welcome-title { margin-bottom:4px; font-size:13px; font-weight:750; }
.operator-welcome-copy { color:var(--text-secondary); font-size:12px; line-height:1.5; }
.operator-chat-panel .chat-msg { max-width:82%; }
.operator-chat-panel .chat-msg.assistant .chat-bubble { box-shadow:0 1px 2px rgba(90,60,125,.04); }
.operator-chat-panel .chat-msg.user .chat-bubble { background:var(--text-primary); color:var(--content-bg); border-bottom-right-radius:3px; }
.operator-chat-panel .chat-msg.user .chat-meta { color:var(--text-muted); }
.operator-prompt-row { display:flex; gap:7px; overflow-x:auto; padding:9px 18px; border-top:1px solid var(--border); background:var(--bg-subtle); scrollbar-width:none; }
.operator-prompt-row::-webkit-scrollbar { display:none; }
.operator-prompt-row button { flex:0 0 auto; padding:7px 10px; border:1px solid var(--border); border-radius:999px; background:var(--card-bg); color:var(--text-secondary); font:inherit; font-size:11px; cursor:pointer; white-space:nowrap; }
.operator-prompt-row button:hover { border-color:var(--btn-primary); color:var(--btn-primary); background:var(--card-bg); }
.operator-input-wrap { padding:11px 14px 7px 16px; border-top:0; background:var(--card-bg); }
.operator-input-icon { display:flex; align-items:center; justify-content:center; width:30px; height:39px; flex-shrink:0; color:var(--text-muted); }
.operator-input-wrap .chat-textarea { min-height:39px; border-radius:var(--radius-sm); background:var(--bg-subtle); border-color:var(--border); }
.operator-input-wrap .chat-textarea:focus { background:var(--card-bg); }
.operator-send-btn { display:flex; align-items:center; justify-content:center; width:39px; height:39px; flex-shrink:0; border:0; border-radius:var(--radius-sm); background:var(--btn-primary); color:var(--btn-primary-text, #fff); cursor:pointer; transition:background .12s,transform .12s; }
.operator-send-btn:hover { background:var(--btn-primary-hover); transform:translateY(-1px); }.operator-send-btn:disabled { opacity:.5; cursor:wait; transform:none; }
.operator-input-hint { display:flex; align-items:center; gap:14px; padding:0 18px 11px 62px; color:var(--text-muted); font-size:10px; }
.operator-secure-note { display:flex; align-items:center; gap:4px; margin-left:auto; color:var(--success); }

/* ── Unified connection status ──────────────────────────────────────────── */
.connection-status { position:relative; z-index:20; }
.connection-status-btn { display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:5px 9px; border:1px solid var(--border); border-radius:999px; background:var(--card-bg); color:var(--text-secondary); font:inherit; font-size:11px; cursor:pointer; }
.connection-status-btn:hover { border-color:var(--btn-primary); color:var(--text-primary); }
.connection-status-dot { width:7px; height:7px; border-radius:50%; background:var(--text-muted); box-shadow:0 0 0 3px rgba(135,120,150,.12); }
.connection-status[data-tone="ok"] .connection-status-dot { background:var(--success); box-shadow:0 0 0 3px rgba(19,134,112,.12); }
.connection-status[data-tone="warn"] .connection-status-dot { background:var(--warn); box-shadow:0 0 0 3px rgba(209,154,31,.12); }
.connection-status[data-tone="error"] .connection-status-dot { background:var(--error); box-shadow:0 0 0 3px rgba(224,67,80,.12); }
.connection-details { position:absolute; top:38px; right:0; width:285px; padding:10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card-bg); box-shadow:0 12px 30px rgba(43,33,54,.15); }
.connection-detail-row { padding:8px 4px; border-bottom:1px solid var(--border); }
.connection-detail-row:last-of-type { border-bottom:0; }
.connection-detail-name { color:var(--text-primary); font-size:12px; font-weight:700; }
.connection-detail-state { float:right; font-size:11px; font-weight:700; }
.connection-detail-state--ok { color:var(--success); }
.connection-detail-state--warn { color:var(--warn); }
.connection-detail-state--error { color:var(--error); }
.connection-detail-state--neutral { color:var(--text-muted); }
.connection-detail-sub { clear:both; padding-top:3px; color:var(--text-muted); font-size:10px; line-height:1.35; overflow-wrap:anywhere; }
.connection-journal-summary { margin-top:8px; padding:7px 4px; border-radius:6px; background:var(--bg-subtle); color:var(--warn); font-size:11px; font-weight:700; }
.connection-journal-list { display:grid; gap:5px; margin-top:6px; color:var(--text-muted); font-size:10px; }
.connection-journal-item { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; line-height:1.35; }
.connection-journal-item span { overflow-wrap:anywhere; }
.connection-journal-cancel { flex-shrink:0; padding:1px 4px; border:1px solid var(--border); border-radius:4px; background:var(--card-bg); color:var(--text-muted); font:inherit; font-size:10px; cursor:pointer; }
.connection-detail-actions { display:flex; justify-content:flex-end; gap:6px; padding-top:9px; }

@media (max-width: 760px) {
  .connection-status-btn { width:30px; justify-content:center; padding:5px; }
  .connection-status-btn #connection-status-label { display:none; }
  .connection-details { right:-46px; width:270px; }
}
.operator-rail { display:flex; flex-direction:column; gap:12px; min-width:0; }
.operator-rail-card { padding:15px; }
.operator-rail-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; font-size:12px; font-weight:750; }

.operator-capability-list { display:flex; flex-direction:column; gap:12px; }
.operator-capability-list > div { display:flex; align-items:flex-start; gap:9px; }.operator-capability-list strong, .operator-capability-list small { display:block; }.operator-capability-list strong { font-size:11.5px; }.operator-capability-list small { margin-top:2px; color:var(--text-muted); font-size:10px; line-height:1.35; }
.capability-icon { display:flex; align-items:center; justify-content:center; width:23px; height:23px; flex-shrink:0; border-radius:6px; font-size:14px; font-weight:700; }.capability-icon-read { color:var(--chan-d2c); background:rgba(75,123,209,.1); }.capability-icon-plan { color:var(--btn-primary); background:rgba(204,53,127,.1); }.capability-icon-write { color:var(--success); background:rgba(19,134,112,.1); }
.operator-approval-card { display:flex; align-items:flex-start; gap:10px; border:1px solid rgba(19,134,112,.24); border-radius:var(--radius-sm); background:rgba(19,134,112,.06); box-shadow:none; }.operator-approval-icon { display:flex; align-items:center; justify-content:center; width:27px; height:27px; flex-shrink:0; color:var(--success); border-radius:var(--radius-sm); background:rgba(19,134,112,.13); }.operator-approval-card strong { display:block; margin:1px 0 4px; font-size:11.5px; }.operator-approval-card p { color:var(--text-secondary); font-size:10.5px; line-height:1.45; }
.operator-chat-panel .chat-action-panel { margin-top:9px; border-color:rgba(209,154,31,.4); border-radius:var(--radius-sm); background:#fff5e4; box-shadow:0 2px 5px rgba(150,101,10,.06); }
.operator-chat-panel .chat-action-label { display:flex; align-items:center; gap:6px; color:#8a5c08; }.operator-chat-panel .chat-action-label::before { content:'!'; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:#f2b95c; color:#fff; font-size:10px; font-weight:800; }
.operator-chat-panel .chat-action-summary { padding:9px 10px; border:1px solid rgba(209,154,31,.22); border-radius:6px; background:rgba(255,255,255,.48); font-family:var(--font-mono); font-size:11px; }
.operator-chat-panel .chat-action-btns { align-items:center; }.operator-chat-panel .chat-action-btns .btn-primary { min-width:120px; }.operator-chat-panel .chat-action-status { display:inline-flex; align-items:center; gap:6px; }.operator-chat-panel .chat-action-status::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }

@media (max-width: 920px) {
  .operator-workspace { grid-template-columns:1fr; }
  .operator-rail { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .operator-approval-card { grid-column:1/-1; }
}
@media (max-width: 700px) {
  #panel-chat { max-width:none; }
  .operator-headline { align-items:flex-start; flex-direction:column; gap:12px; }.operator-headline h2 { font-size:25px; }.operator-headline-actions { width:100%; justify-content:space-between; gap:10px; }.operator-live-status { font-size:11px; }.operator-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }.operator-metric { padding:12px; }.operator-metric-value { font-size:22px; }
  .operator-chat-panel { min-height:500px; height:min(640px,calc(100vh - 335px)); height:min(640px,calc(100dvh - 335px)); }.operator-chat-panel .chat-messages { padding-left:12px; padding-right:12px; }.operator-chat-panel .chat-msg { max-width:92%; }.operator-chat-subtitle { max-width:260px; line-height:1.35; }.operator-input-hint { padding-left:47px; gap:8px; }.operator-input-hint > span:not(.operator-secure-note) { display:none; }.operator-secure-note { margin-left:0; }.operator-rail { grid-template-columns:1fr; }.operator-approval-card { grid-column:auto; }
}
@media (max-width: 420px) {
  .operator-metrics { gap:7px; }.operator-metric-top { font-size:11px; }.operator-metric-note { font-size:10px; }.operator-metric-icon { display:none; }.operator-chat-toolbar { padding-left:13px; padding-right:13px; }.operator-chat-subtitle { font-size:11px; }.operator-prompt-row { padding-left:12px; padding-right:12px; }.operator-input-wrap { padding-left:8px; padding-right:8px; }.operator-input-icon { width:24px; }.operator-input-hint { padding-left:35px; }.operator-send-btn { width:37px; }
}

/* ── 2026 UI overhaul: shared shell, surfaces, and responsive primitives ── */
:root {
  color-scheme: light;
  --sidebar-bg: #f0e5fc;
  --sidebar-hover: #e4d3f8;
  --sidebar-text: #57476a;
  --sidebar-text-active: #3a2456;
  --sidebar-text-dim: #75648f;
  --sidebar-accent: #cc357f;
  --topbar-bg: #ffffff;
  --topbar-border: #ecdff7;
  --content-bg: #f7effc;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(90, 60, 125, .04);
  --card-shadow-hover: 0 4px 14px rgba(90, 60, 125, .10);
  --text-primary: #2b2136;
  --text-secondary: #5c4e6e;
  --text-muted: #786788;
  --bg-subtle: #f7effd;
  --border: #eadcf6;
  --border-strong: #d7c2ec;
  --border-focus: #cc357f;
  --btn-primary: #cc357f;
  --btn-primary-hover: #b8286e;
  --btn-secondary: #f2e7fc;
  --btn-secondary-hover: #e7d6f7;
  --bg-secondary: #f7effc;
  --bg-hover: #fbf0fa;
  --input-bg: #ffffff;
  --border-color: #eadcf6;
  --table-header-bg: #f6edfc;
  --table-row-hover: #fbf0fa;
  --radius: 16px;
  --radius-sm: 10px;
}

/* Dark mode: an in-app toggle (js/views/theme.js) sets data-theme="light"/"dark"
   on <html> and wins over the OS setting; with no stored preference it falls
   back to prefers-color-scheme. Redefines the shared design tokens only — every
   surface built from var(--...) picks this up automatically. Semantic
   status/badge colors that are hardcoded hex per-component (po-status-*,
   inv-health-chip--*, wo-status-*, etc.) are a separate, larger pass and are
   not touched here. The variable list below is intentionally duplicated
   between the media-query block (OS default) and the [data-theme="dark"] block
   (explicit override) — keep them in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sidebar-bg: #241a33;
    --sidebar-hover: #33253f;
    --sidebar-text: #c9b8d9;
    --sidebar-text-active: #f5eaff;
    --sidebar-text-dim: #ab9cc4;
    --sidebar-accent: #e8659f;
    --topbar-bg: #1c1526;
    --topbar-border: #43335a;
    --content-bg: #150f1e;
    --card-bg: #1f1729;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --card-shadow-hover: 0 8px 22px rgba(0, 0, 0, .45);
    --text-primary: #f2e9fb;
    --text-secondary: #c3b3d6;
    --text-muted: #ab9cc4;
    --bg-subtle: #241a33;
    --border: #5a4a70;
    --border-strong: #75608c;
    --border-focus: #e8659f;
    --btn-primary: #e8659f;
    --btn-primary-hover: #f07eb0;
    --btn-danger: #f0616f;
    --btn-danger-hover: #ff7986;
    --btn-secondary: #2c2138;
    --btn-secondary-hover: #382a48;
    --bg-secondary: #1c1526;
    --bg-hover: #251b32;
    --input-bg: #201830;
    --border-color: #5a4a70;
    --accent-rgb: 232, 101, 159;
    --success: #3fd6a8;
    --error: #ff6b7a;
    --warn: #e0ab4a;
    --chan-d2c: #7ea6f0;
    --chan-b2b: #c199f2;
    --table-header-bg: #241a33;
    --table-row-hover: #251b32;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --sidebar-bg: #241a33;
  --sidebar-hover: #33253f;
  --sidebar-text: #c9b8d9;
  --sidebar-text-active: #f5eaff;
  --sidebar-text-dim: #ab9cc4;
  --sidebar-accent: #e8659f;
  --topbar-bg: #1c1526;
  --topbar-border: #43335a;
  --content-bg: #150f1e;
  --card-bg: #1f1729;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --card-shadow-hover: 0 8px 22px rgba(0, 0, 0, .45);
  --text-primary: #f2e9fb;
  --text-secondary: #c3b3d6;
  --text-muted: #ab9cc4;
  --bg-subtle: #241a33;
  --border: #5a4a70;
  --border-strong: #75608c;
  --border-focus: #e8659f;
  --btn-primary: #e8659f;
  --btn-primary-hover: #f07eb0;
  --btn-danger: #f0616f;
  --btn-danger-hover: #ff7986;
  --btn-secondary: #2c2138;
  --btn-secondary-hover: #382a48;
  --bg-secondary: #1c1526;
  --bg-hover: #251b32;
  --input-bg: #201830;
  --border-color: #5a4a70;
  --accent-rgb: 232, 101, 159;
  --success: #3fd6a8;
  --error: #ff6b7a;
  --warn: #e0ab4a;
  --chan-d2c: #7ea6f0;
  --chan-b2b: #c199f2;
  --table-header-bg: #241a33;
  --table-row-hover: #251b32;
}

html { background: var(--content-bg); }
body { line-height: 1.45; }

#topbar {
  height: 60px;
  padding: 0 clamp(12px, 2vw, 28px);
  gap: 12px;
  box-shadow: 0 1px 0 rgba(90,60,125, .03);
}
#topbar h1 { font-size: 16px; letter-spacing: -.02em; }
#auth-controls { gap: 8px; }
#auth-user-label { color: var(--text-secondary); font-weight: 500; }
#fx-display { font-variant-numeric: tabular-nums; }

#sidebar {
  width: 232px;
  padding: 18px 10px;
  border-right: 1px solid var(--border);
}
#nav-header { padding: 0 8px 14px; }
.nav-label, .nav-section-label { padding-left: 8px; padding-right: 8px; }

.nav-item {
  margin: 2px 0;
  border-left: 0;
  gap: 11px;
  font-size: 13px;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.nav-item:hover { background: var(--sidebar-hover); color: #3a2456; }
.nav-item.active { background: rgba(204,53,127, .18); border-left: 0; }
.nav-item svg { width: 17px; height: 17px; }
#nav-collapse-btn { border-color: var(--border-strong); border-radius: var(--radius-sm); }

#content {
  padding: clamp(18px, 2.5vw, 34px);
  background: var(--content-bg);
}
.tab-panel { max-width: 1800px; margin: 0 auto; }
.page-header {
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}
.page-header h2 { font-size: clamp(20px, 2vw, 25px); letter-spacing: -.025em; line-height: 1.2; }
.page-header p { max-width: 720px; margin-top: 5px; font-size: 13px; color: var(--text-secondary); }
.page-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.card {
  border-color: var(--border);
}
.prod-card-label,
.shopify-build-summary-head h3,
.shopify-section-heading,
.stacked-section-header h3 { letter-spacing: -.01em; }

.btn {
  min-height: 36px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-weight: 650;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .08s ease, box-shadow .16s ease;
}

.btn-secondary { border: 1px solid var(--border); }
/* Keyboard focus must clear 3:1 against the surface (WCAG 2.2 focus
   appearance); the earlier 22%-alpha ring all but vanished on white cards. */
.btn:focus-visible, .nav-item:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--sidebar-accent); outline-offset: 2px; }

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border-color: var(--border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text-primary);
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(204,53,127, .12);
}

.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  scrollbar-color: var(--border) transparent;
}
.card > .table-wrap { border: 0; border-radius: 0; }
table { font-variant-numeric: tabular-nums; }
thead th { padding: 11px 14px; background: var(--table-header-bg); }
td { padding: 11px 14px; }
tbody tr { transition: background .14s ease; }
.table-footer { padding: 12px 16px; }
.empty-state { padding: clamp(40px, 7vw, 72px) 24px; }

/* Availability is the first dashboard on the shared visual system. */
#panel-availability .page-header { margin-bottom: 26px; }
#panel-availability > #shopify-availability-health,
#panel-availability > #shopify-availability-sync { margin-bottom: 18px; }
#panel-availability .prod-card-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
#panel-availability .shopify-publish-meta {
  gap: 10px;
  padding: 16px 18px 18px;
  margin: 0;
}
#panel-availability .shopify-publish-meta .inv-summary-stat {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
#panel-availability .shopify-publish-card { padding: 0 18px 18px; }
#panel-availability .shopify-publish-card .shopify-build-summary-head { margin: 0 -18px 16px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
#panel-availability .shopify-publish-card .shopify-publish-meta { padding-left: 0; padding-right: 0; }
#panel-availability .shopify-publish-card .table-wrap { margin-top: 16px; }
#panel-availability .shopify-build-summary-head h3 { font-size: 16px; }
#panel-availability .shopify-summary-actions { gap: 8px; }
#panel-availability .shopify-summary-actions > span { color: var(--text-muted); font-size: 12px; font-weight: 650; }
#panel-availability .inv-health-table,
#panel-availability .shopify-publish-table { min-width: 1050px; }
#panel-availability .inv-health-table tbody tr:first-child td,
#panel-availability .shopify-publish-table tbody tr:first-child td { border-top: 0; }
#panel-availability .inv-health-table td:first-child,
#panel-availability .shopify-publish-table td:first-child { font-family: var(--font-mono); font-weight: 700; }
#panel-availability .shopify-status-chip { padding: 4px 9px; font-size: 10px; letter-spacing:-.005em; text-transform:none; }
#panel-availability .availability-bottleneck { margin-top: 4px; border-radius: 999px; }
#panel-availability .calc-explainer { margin: 0 18px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-subtle); }
#panel-availability .calc-explainer summary { padding: 10px 12px; color: var(--text-secondary); font-weight: 650; }
#panel-availability .calc-explainer-body { border-top: 1px solid var(--border); }

/* A small-screen contract shared by every dashboard: stack controls, keep data
   readable, and let wide tables scroll without pushing the page itself sideways. */
@media (max-width: 1024px) {
  #content { padding: 22px; }
}
@media (max-width: 640px) {
  #topbar { height: 56px; }
  #topbar h1 { font-size: 15px; }
  #content { padding: 16px 12px 28px; }
  .page-header { flex-direction: column; margin-bottom: 18px; gap: 12px; }
  .page-header > .btn,
.page-header-actions { width: 100%; }
  .page-header > .btn,
.page-header-actions .btn { flex: 1; justify-content: center; }
  
  .table-wrap { max-width: 100%; }
  thead th { padding: 10px 12px; }
  td { padding: 10px 12px; }
  #panel-availability .shopify-publish-card { padding: 0 12px 12px; }
  #panel-availability .shopify-publish-card .shopify-build-summary-head { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  #panel-availability .shopify-publish-meta { padding: 12px 0 14px; gap: 8px; }
  #panel-availability .shopify-publish-meta .inv-summary-stat { min-height: 0; padding: 9px 10px; }
  #panel-availability .shopify-publish-meta .inv-summary-stat:first-child { grid-column: 1 / -1; }
  #panel-availability .calc-explainer { margin-left: 0; margin-right: 0; }
  #panel-availability .shopify-summary-actions { width: 100%; justify-content: stretch; }
  #panel-availability .shopify-summary-actions .btn { flex: 1; justify-content: center; }
}
@media (max-width: 520px) {
  /* The email plus Sign Out pushed the top bar past a phone screen, which made
     every page scroll sideways. Sign Out carries the email as its tooltip. */
  #auth-user-label { display: none; }
}
@media (max-width: 420px) {
  #panel-availability .shopify-publish-meta { grid-template-columns: 1fr; }
  #panel-availability .shopify-publish-meta .inv-summary-stat:first-child { grid-column: auto; }
}

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

/* ── Planning dashboard ─────────────────────────────────────────────────── */
#panel-planning .page-header > div:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
#panel-planning #planning-forecast-run-status {
  max-width: 320px;
  color: var(--text-secondary);
  line-height: 1.35;
  text-align: right;
}
#panel-planning .ops-mode-btns {
  width: 100%;
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}
#panel-planning .ops-mode-btn {
  flex: 1 1 120px;
  min-height: 42px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.2;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
#panel-planning .ops-mode-btn:hover { background: var(--bg-subtle); color: var(--text-primary); }
#panel-planning .ops-mode-btn.active {
  background: var(--sidebar-accent);
  color: var(--btn-primary-text, #fff);
  box-shadow: 0 2px 6px rgba(204,53,127, .22);
}
#panel-planning [id^="planning-"][id$="-wrap"] > .card {
  overflow: visible;
}
#panel-planning [id^="planning-"][id$="-wrap"] .prod-card-label {
  min-height: 50px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
#panel-planning #planning-reorder-wrap .pl-filter-bar {
  padding: 14px 18px 0;
  margin-bottom: 0;
  gap: 7px;
}
#panel-planning #planning-reorder-wrap .pl-filter-bar + .table-wrap,
#panel-planning #planning-reorder-wrap .pl-filter-bar + .pl-filter-bar + .table-wrap {
  margin-top: 14px;
}
#panel-planning .pl-filter-bar .btn { min-height: 34px; }
#panel-planning .pl-filter-supplier-select {
  min-height: 36px;
  padding: 7px 10px;
  color: var(--text-secondary);
}
#panel-planning .pl-status-chip,
#panel-planning .pl-setup-badge,
#panel-planning .pl-freshness-chip {
  padding: 4px 9px;
  font-size: 10px;
  letter-spacing:-.005em;
  text-transform:none;
}
#panel-planning .pl-setup-badge { margin-top: 5px; }
#panel-planning .pl-row td { height: 54px; }
#panel-planning .pl-row:hover td { background: var(--table-row-hover); }
/* A three-line description used to blow the fixed row height above out to
   fit itself, breaking the scan down every other column. Clamp to two lines
   and hand the rest to the title attribute instead. max-width is required
   for the clamp to actually wrap rather than the (auto-layout) column just
   growing to fit the text on one line. */
#panel-planning .pl-desc-cell {
  min-width: 150px;
  max-width: 260px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
/* Screen-reader-only text for the Select/Detail utility column headers —
   the columns are real (checkbox, expand toggle) but visually unlabeled by
   design; this names them for assistive tech without adding visible chrome. */
#panel-planning .pl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* The old chevron was a bare glyph in a <td> — invisible until you already
   knew to look for it, and unreachable by keyboard. Now a real button with
   its own hover/focus state; kept small so it doesn't reopen the row-height
   fight above, with the touch target expanded separately below. */
#panel-planning .pl-expand-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#panel-planning .pl-expand-toggle:hover {
  background: var(--table-row-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
#panel-planning .pl-expand-toggle:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
/* Same expanded-hit-area-via-overlay technique as .task-check-btn/
   .inv-health-row-link further down this file: grow the touch target to
   44px without growing the visible button (and therefore the row). */
@media (hover: none) and (pointer: coarse) {
  #panel-planning .pl-expand-toggle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}
#panel-planning .pl-detail-row td {
  padding: 18px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
}
#panel-planning .pl-detail-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 14px;
}
#panel-planning .pl-detail-field {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
}
#panel-planning .pl-detail-field label { margin-bottom: 6px; }
#panel-planning .pl-detail-field input { width: 100%; max-width: 100%; }
#panel-planning .pl-reorder-math {
  max-width: 420px;
  padding: 14px 0 0;
}
#panel-planning .pl-field-note { white-space: normal; line-height: 1.35; }
#panel-planning .pl-trend-cell { min-width: 92px; }
#panel-planning .pl-suggestion-apply { min-height: 28px; padding: 4px 6px; }

#panel-planning .chat-panel.compact { height: min(520px, calc(100vh - 280px)); height: min(520px, calc(100dvh - 280px)); }
#panel-planning [id$="-wrap"] > .card > .pl-empty { padding: 22px 18px; }

@media (max-width: 900px) {
  #panel-planning .ops-mode-btn { flex-basis: 150px; }
  #panel-planning .pl-detail-grid { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
}
@media (max-width: 640px) {
  #panel-planning .page-header > div:last-child { width: 100%; justify-content: stretch; }
  #panel-planning #planning-forecast-run-status { max-width: none; flex: 1 1 100%; text-align: left; }
  #panel-planning .page-header > div:last-child .btn { width: 100%; justify-content: center; }
  #panel-planning .ops-mode-btns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
  #panel-planning .ops-mode-btn { min-width: 0; flex: none; min-height: 44px; padding: 8px 7px; }
  /* No more forced full-row span for the one long-labeled button: that was
     what turned 7 buttons into a ragged 2-1-1-2-1 grid instead of an even
     2-column one — Revenue landed alone on its own row because its neighbour
     got yanked onto a fresh line. Left to the grid, it just wraps its text. */
  /* The 10 filter pills used to each take a full line — roughly two screens
     of chrome before the first part row. Scroll them horizontally on one
     line instead; overflow-x:auto plus flex-wrap:nowrap keeps them in a
     single row, and the three rules below hide the scrollbar itself so it
     reads as a swipeable strip rather than a visible scroll widget. */
  #panel-planning .pl-filter-bar {
    padding-left: 12px !important;
    padding-right: 12px !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #panel-planning .pl-filter-bar::-webkit-scrollbar { display: none; }
  #panel-planning .pl-filter-bar .btn { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
  #panel-planning .pl-filter-supplier-select { flex: 0 0 auto; width: auto; min-width: 160px; }
  #panel-planning .pl-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #panel-planning .pl-detail-row td { padding: 12px; }
  #panel-planning .pl-reorder-math { max-width: none; }
  #panel-planning .chat-panel.compact { height: min(560px, calc(100dvh - 260px)); }
}
@media (max-width: 420px) {
  #panel-planning .ops-mode-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panel-planning .pl-detail-grid { grid-template-columns: 1fr; }
}

/* ── Inventory dashboard ────────────────────────────────────────────────── */
#panel-inventory #inv-health-summary { margin-bottom: 18px; }
#panel-inventory .inv-summary-card {
  padding: 8px 0;
  gap: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
#panel-inventory .inv-summary-stat {
  min-height: 68px;
  justify-content: center;
  padding: 8px 18px;
  border-left: 1px solid var(--border);
}
#panel-inventory .inv-summary-stat:first-child { border-left: 0; }
#panel-inventory .inv-summary-stat-val { font-size: clamp(20px, 2.2vw, 27px); letter-spacing: -.03em; }
#panel-inventory .inv-summary-stat-label { font-size: 10px; }
#panel-inventory #inv-health-table-wrap,
#panel-inventory #inv-health-assembly-wrap { margin-top: 18px; }
#panel-inventory #inv-health-table-wrap .prod-card-label,
#panel-inventory #inv-health-assembly-wrap .prod-card-label { border-bottom: 1px solid var(--border); }
#panel-inventory .inv-health-table { min-width: 1100px; }
#panel-inventory .inv-health-table td:first-child { font-family: var(--font-mono); font-weight: 700; }
#panel-inventory .inv-health-chip { padding: 4px 9px; font-size: 10px; letter-spacing: .04em; }
#panel-inventory .inv-assemblies-grid { gap: 14px; padding: 0 18px 18px; }
#panel-inventory .inv-assembly-card { background: var(--bg-subtle); border-radius: var(--radius-sm); }
#panel-inventory .inv-report-panel { margin-top: 18px; }
#panel-inventory .inv-report-header { padding: 0 2px; }

@media (max-width: 760px) {
  #panel-inventory .inv-summary-card { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 0; }
  #panel-inventory .inv-summary-stat { min-height: 64px; padding: 8px 14px; border-left: 0; }
  #panel-inventory .inv-summary-stat:nth-child(odd) { border-right: 1px solid var(--border); }
  #panel-inventory .inv-summary-stat:nth-child(n + 3) { border-top: 1px solid var(--border); }
  #panel-inventory .inv-summary-stat-val { font-size: 21px; }
}
@media (max-width: 420px) {
  #panel-inventory .inv-summary-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panel-inventory .inv-summary-stat,
  #panel-inventory .inv-summary-stat:nth-child(odd) { border-right: 0; border-top: 1px solid var(--border); }
  #panel-inventory .inv-summary-stat:first-child { border-top: 0; }
  #panel-inventory .inv-assemblies-grid { grid-template-columns: 1fr; padding-left: 12px; padding-right: 12px; }
}

/* ── Production dashboards ─────────────────────────────────────────────── */
#panel-production .prod-controls-card {
  padding: 18px;
  background: var(--card-bg);
}
#panel-production #prod-controls {
  align-items: end;
  gap: 14px;
}
#panel-production .prod-control-group { min-width: 0; }
#panel-production .prod-control-group:first-child { flex: 1 1 320px; }
#panel-production #prod-assembly-select { width: 100%; min-height: 40px; }
#panel-production #prod-qty { min-height: 40px; }
#panel-production #prod-avail-card > .card,
#panel-production #prod-pick-list > .card { overflow: hidden; }
#panel-production .avail-table { min-width: 780px; }
#panel-production .avail-table td:first-child,
#panel-production .avail-table td:last-child,
#panel-production .avail-table .avail-bottleneck { white-space: nowrap; }
#panel-production .prod-pick-table { min-width: 860px; }
#panel-production .prod-pick-table td,
#panel-production .prod-pick-table th { padding-top: 12px; padding-bottom: 12px; }
#panel-production .prod-empty {
  margin-top: 18px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--card-bg);
}

/* ── Operations dashboard ───────────────────────────────────────────────── */
#panel-operations .ops-mode-btns {
  margin-bottom: 18px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}
#panel-operations .ops-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) 110px minmax(240px, 2fr);
  align-items: end;
  gap: 14px;
  padding: 18px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}
#panel-operations .ops-controls > div { min-width: 0; }
#panel-operations .ops-controls select,
#panel-operations .ops-controls input[type="number"],
#panel-operations .ops-controls input[type="text"] {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
}
#panel-operations .ops-controls select { min-width: 0; }
#panel-operations .ops-controls input[type="number"] { width: 100%; }
#panel-operations .calc-explainer {
  padding: 0 2px;
  margin-bottom: 18px;
}
#panel-operations .ops-preview {
  padding: 0;
  margin-bottom: 18px;
}
#panel-operations .ops-preview > .card { overflow: hidden; }
#panel-operations .ops-footer {
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

/* ── Work Orders dashboard ──────────────────────────────────────────────── */
#panel-workorders .wo-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
#panel-workorders .wo-card {
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
#panel-workorders .wo-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-1px);
}
#panel-workorders .wo-card-header { margin-bottom: 10px; }
#panel-workorders .wo-card-name { font-size: 14px; line-height: 1.35; }
#panel-workorders .wo-qty { font-size: 17px; letter-spacing: -.01em; }
#panel-workorders .wo-actions { margin-top: auto; padding-top: 12px; }
#panel-workorders .wo-actions .btn { flex: 1 1 auto; justify-content: center; }
#panel-workorders .wo-status-chip { padding: 4px 9px; text-transform:none; letter-spacing:-.005em; }

@media (max-width: 760px) {
  #panel-operations .ops-controls { grid-template-columns: 1fr 96px; }
  #panel-operations .ops-reason-wrap { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  #panel-production .prod-controls-card { padding: 14px; }
  #panel-production #prod-controls { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 10px; }
  #panel-production .prod-control-group:first-child { min-width: 0; }
  #panel-production #prod-assembly-select { min-width: 0; }
  #panel-operations .ops-mode-btns { width: 100%; }
  #panel-operations .ops-controls { grid-template-columns: 1fr; padding: 14px; }
  #panel-operations .ops-reason-wrap { grid-column: auto; }
  #panel-operations .ops-footer .btn { width: 100%; justify-content: center; }
  #panel-workorders .wo-grid { grid-template-columns: 1fr; }
  #panel-workorders .wo-card { min-height: 0; }
}
@media (max-width: 420px) {
  #panel-production #prod-controls { grid-template-columns: 1fr; }
  #panel-production #prod-qty { width: 100%; text-align: left; }
}

/* ── Floor tools and transaction forms ──────────────────────────────────── */
#panel-boms #bom-selector-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}
#panel-countaudit .count-audit-kicker {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}
#panel-boms #bom-product-select { min-height: 40px; min-width: min(370px, 100%); }
#panel-boms #bom-card { overflow: hidden; }

#panel-transactions .ops-mode-btns {
  margin-bottom: 18px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}
#panel-transactions .tx-form {
  padding: 18px;
  gap: 16px;
}
#panel-transactions .tx-lines-table { min-width: 640px; }
#panel-transactions .tx-lines-table th,
#panel-transactions .tx-lines-table td { padding-top: 10px; padding-bottom: 10px; }
#panel-transactions .tx-footer {
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
#panel-transactions .tx-history-link {
  margin-top: 26px;
  padding: 16px 2px 0;
}

#panel-countaudit .count-audit-card,
#panel-countaudit .count-audit-list { max-width: 920px; }
#panel-countaudit .count-audit-card {
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}
#panel-countaudit .count-audit-list .card { overflow: hidden; }
#panel-packing .packing-focus-empty,
#panel-packing .packing-focus-all-done {
  max-width: none;
  margin-top: 20px;
  padding: 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text-secondary);
}

.packing-debug-card { margin:0 0 12px; border:1px solid #d8a33e; border-radius:var(--radius-sm); background:rgba(255,248,225,.72); color:var(--text-primary); }
.packing-debug-card > summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; cursor:pointer; font-weight:800; }
.packing-debug-badge { padding:3px 7px; border-radius:999px; color:#7a4e00; background:#ffe4a3; font-size:10px; letter-spacing:.06em; }
.packing-debug-body { padding:0 14px 14px; }
.packing-debug-warning { margin-bottom:10px; padding:9px 10px; border-left:3px solid #d08b00; color:#704b00; background:rgba(255,228,163,.4); font-size:12px; }
.packing-debug-toolbar { display:flex; align-items:end; gap:8px; flex-wrap:wrap; }
.packing-debug-toolbar label { display:flex; flex-direction:column; gap:4px; color:var(--text-muted); font-size:11px; font-weight:700; }
.packing-debug-toolbar select { min-height:32px; }
.packing-debug-simulation { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; padding:8px 10px; border-radius:var(--radius-sm); background:rgba(19,134,112,.09); font-size:12px; }
.packing-debug-meta { margin-top:10px; color:var(--text-muted); font-size:11px; }
.packing-debug-events { display:grid; gap:4px; max-height:220px; overflow:auto; margin:8px 0 0; padding:0 0 0 22px; font-size:11px; }
.packing-debug-events li { display:grid; grid-template-columns:78px 190px 1fr; gap:7px; align-items:baseline; }
.packing-debug-events time { color:var(--text-muted); }
.packing-debug-events code { color:#7a4e00; }
.packing-debug-empty { color:var(--text-muted); }
.packing-debug-note { flex:1 1 100%; margin:2px 0 0; padding:8px 10px; border-left:3px solid var(--text-muted); border-radius:0 5px 5px 0; background:var(--bg-subtle); color:var(--text-muted); font-size:11px; line-height:1.55; }

@media (max-width: 640px) {
  
}
#panel-shopify .shopify-lines-table { min-width: 720px; }
#panel-margins .inv-health-table { min-width: 1100px; }
#panel-gst .gst-table { min-width: 850px; }

@media (max-width: 640px) {
  #panel-boms #bom-selector-wrap { align-items: stretch; }
  #panel-boms #bom-product-select { width: 100%; min-width: 0; }
  #panel-boms #bom-add-btn { width: 100%; justify-content: center; }
  #panel-transactions .ops-mode-btns { width: 100%; }
  #panel-transactions .tx-form { padding: 14px; }
  #panel-transactions .tx-footer .btn { width: 100%; justify-content: center; }
}

/* ── Final responsive/accessibility polish ─────────────────────────────────
   Keep the workflow usable at phone widths without making the whole page a
   sideways-scrolling canvas. Data tables may scroll inside their own card;
   headers and primary actions must always fit the viewport. */
.partview-empty-state[hidden] { display: none; }

.nav-item,
.nav-item[role="button"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: left;
  border: 0;
  font: inherit;
  /* `nav.js` upgrades these to native <button> elements at boot. Without an
     explicit reset here, some browsers (notably Safari/WebKit) keep the native
     button chrome's light background even with appearance:none, so on a dark
     sidebar every item showed as a bright, low-contrast pill. */
  background: none;
  color: inherit;
}

@media (max-width: 640px) {
  #content,
  #content > .tab-panel,
  #content .tab-panel.active {
    min-width: 0;
    max-width: 100%;
  }

  /* Purchase order header fields are form controls, not a data table. Stack
     them tightly enough that every field remains visible on a phone. Invoices
     shares this exact card/grid/field markup (document header, per-line and
     per-tax editors) and gets the same treatment -- it's the one tab where a
     document is actually captured *from* a phone, so this gap mattered most. */
  #panel-pos .po-header-card,
  #panel-pos .po-charges-card,
  #panel-invoices .po-header-card,
  #panel-invoices .po-lines-card {
    min-width: 0;
    overflow: hidden;
  }
  #panel-pos .po-header-grid,
  #panel-invoices .po-header-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    gap: 12px;
  }
  #panel-pos .po-field,
  #panel-pos .po-field input,
  #panel-pos .po-field select,
  #panel-invoices .po-field,
  #panel-invoices .po-field input,
  #panel-invoices .po-field select {
    min-width: 0;
    max-width: 100%;
  }
  #panel-pos .po-field input:not([type="checkbox"]):not([type="radio"]),
  #panel-pos .po-field select,
  #panel-invoices .po-field input:not([type="checkbox"]):not([type="radio"]),
  #panel-invoices .po-field select {
    width: 100%;
  }
  #panel-pos .po-field-full,
  #panel-invoices .po-field-full {
    grid-column: 1 / -1;
  }

  /* Only the wide line-item table scrolls. Keep the scrollbar attached to the
     card so the page itself never hides the Pack/Save actions off-canvas. */
  #panel-pos .po-lines-card .table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  #panel-pos .po-lines-table {
    min-width: 760px;
  }
  /* The totals table is a short label/value list, not the wide line table --
     inheriting the 760px minimum pushed it past the card edge and clipped the
     order total out of view on phones. */
  #panel-pos .po-totals-table {
    min-width: 0;
  }

  /* Packing's order selector and action become a clear vertical decision
     stack, which gives the primary action a full-width, reliable hit target. */
  #panel-packing .packing-picker-row {
    flex-direction: column;
    align-items: stretch;
  }
  #panel-packing .packing-order-select,
  #panel-packing .packing-picker-row .btn {
    width: 100%;
    min-width: 0;
  }
  #panel-packing .packing-priority-toggle-row {
    width: 100%;
  }
  #panel-packing .packing-priority-toggle-btn {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
  }
  
}

@media (max-width: 420px) {
  #panel-pos .po-header-card,
  #panel-pos .po-charges-card,
  #panel-invoices .po-header-card {
    padding-left: 12px;
    padding-right: 12px;
  }
  #panel-pos .po-charges-card .po-header-grid {
    padding: 12px 0;
  }
  #panel-pos .po-charges-card > .po-lines-header {
    margin: 0 -12px;
  }
  #panel-pos .po-charges-card > .purchasing-inset {
    padding: 0;
  }
  #panel-invoices .invoice-detail-wrap > .po-header-card > .po-lines-header {
    margin-left: -12px;
    margin-right: -12px;
  }
  #panel-invoices .invoice-payment-bar > .po-lines-header {
    flex-basis: calc(100% + 24px);
  }
  #panel-packing .packing-priority-toggle-row {
    flex-direction: column;
  }
  #panel-packing .packing-priority-toggle-btn {
    width: 100%;
  }
}

.commerce-context-meta { margin:0 0 12px; color:var(--text-muted); font-size:12px; line-height:1.5; }
.commerce-context-summary { display:block; min-width:0; white-space:normal; }

/* Contextual assistant drawer: a lightweight handoff surface that keeps the
   full conversation and all approved writes on the canonical Chat page. */
.contextual-assistant[hidden] { display:none; }
.contextual-assistant { position:fixed; z-index:120; top:0; right:0; display:flex; flex-direction:column; width:min(390px,calc(100vw - 24px)); height:100dvh; padding:22px; border-left:1px solid var(--border); background:var(--card-bg); box-shadow:-12px 0 35px rgba(90,60,125,.16); }
.contextual-assistant-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.contextual-assistant h2 { margin:3px 0 0; font-size:22px; letter-spacing:-.03em; }
.contextual-assistant-model { display:inline-block; margin-top:6px; padding:2px 8px; border-radius:999px; background:var(--bg-subtle); color:var(--text-muted); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.contextual-assistant-close { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card-bg); color:var(--text-secondary); font-size:22px; line-height:1; cursor:pointer; }
.contextual-assistant-copy { margin:18px 0 10px; color:var(--text-secondary); font-size:13px; line-height:1.55; }
.contextual-assistant-freshness { padding:9px 10px; border-radius:var(--radius-sm); background:var(--bg-subtle); color:var(--text-muted); font-size:11px; }
.contextual-assistant-prompts { display:grid; gap:8px; margin-top:16px; }
.contextual-assistant-prompt { padding:11px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card-bg); color:var(--text-primary); font:inherit; font-size:12px; text-align:left; cursor:pointer; }
.contextual-assistant-prompt:hover, .contextual-assistant-prompt:focus-visible { border-color:var(--btn-primary); background:var(--bg-hover); }
.contextual-assistant-open { width:100%; margin-top:auto; justify-content:center; }
body.contextual-assistant-open::after { content:''; position:fixed; z-index:119; inset:0; background:rgba(43,33,54,.18); }

@media (max-width: 640px) {
  .contextual-assistant { width:100%; max-width:none; border-left:0; }
}

/* ── Candy pastel: per-section nav hues and tinted metric tiles ──
   The palette above is deliberately one family (blush/lilac) so dense tables stay
   calm. The colour variety lives here instead, where it carries meaning: every
   sidebar section owns a hue, and a nav item's icon, active tint, and active rail
   all read from a single `--nav-hue` set per data-tab. Adding a tab without a hue
   is safe -- it falls back to the raspberry accent. */
.nav-item { --nav-hue: var(--sidebar-accent); }

/* Catalog & Engineering — grape */
.nav-item[data-tab="partview"], .nav-item[data-tab="plm"],
.nav-item[data-tab="boms"],     .nav-item[data-tab="suppliers"] { --nav-hue: #8b5cd6; }
/* Supply — periwinkle */
.nav-item[data-tab="receiving"],
.nav-item[data-tab="pos"],       .nav-item[data-tab="planning"],
.nav-item[data-tab="inventory"] { --nav-hue: #4b7bd1; }
/* Production — mint */
.nav-item[data-tab="production"], .nav-item[data-tab="operations"],
.nav-item[data-tab="workorders"] { --nav-hue: #138670; }
/* Operations & Floor — slate iris */
.nav-item[data-tab="countaudit"], .nav-item[data-tab="packing"],
.nav-item[data-tab="packing-station"], .nav-item[data-tab="shelf"],
.nav-item[data-tab="labels"], .nav-item[data-tab="expenses"] { --nav-hue: #6b6fa8; }
/* Fulfillment — apricot */
.nav-item[data-tab="pickups"], .nav-item[data-tab="shopify"],
.nav-item[data-tab="availability"], .nav-item[data-tab="tasks"] { --nav-hue: #c07f10; }
/* Finance & Admin — terracotta */
.nav-item[data-tab="transactions"], .nav-item[data-tab="margins"],
.nav-item[data-tab="settings"],     .nav-item[data-tab="gst"],
.nav-item[data-tab="logs"],         .nav-item[data-tab="chat"] { --nav-hue: #c8503f; }

.nav-item svg { color: var(--nav-hue); opacity: .9; }
.nav-item:hover svg { opacity: 1; }
.nav-item.active {
  background: color-mix(in srgb, var(--nav-hue) 15%, transparent);
  color: var(--sidebar-text-active);
}
.nav-item.active svg { color: var(--nav-hue); opacity: 1; }
.nav-section-label { color: #7a5fa0; font-weight: 700; }

/* Today's metric tiles carry colour only when their data does (urgent / ready /
   approval). Positional colours made an all-clear tile look like a warning and
   painted the 3rd tile "ready" green regardless of its value. */
.operator-metric--urgent  { --tile: #e04350; }
.operator-metric--ready   { --tile: #138670; }
.operator-metric--approval{ --tile: #8b5cd6; }
.operator-metric {
  border-color: color-mix(in srgb, var(--tile, var(--text-muted)) 22%, var(--border));
  background: linear-gradient(135deg, var(--card-bg), color-mix(in srgb, var(--tile, var(--card-bg)) 9%, var(--card-bg)));
}
.operator-metric .operator-metric-top,
.operator-metric .operator-metric-icon { color: color-mix(in srgb, var(--tile, var(--text-muted)) 78%, var(--text-primary)); }
.operator-metric:hover { border-color: var(--tile, var(--btn-primary)); }

/* `arriving_late` and `watch` both landed on apricot in the recolour; pull late
   toward orange so the two states stay distinguishable at a glance. */
.pl-status-arriving_late { background: #ffe6cc; color: #a3550a; }

/* ── Touch targets missed by the coarse-pointer block above ──
   That block bumps .btn/.btn-sm/inputs to 44px but deliberately excludes
   checkboxes and radios, because min-height stretches the control's box without
   making the control itself any easier to hit. Size those directly instead, and
   give the two custom controls an expanded hit area via an overlay so dense
   table rows keep their current height. */
@media (hover: none) and (pointer: coarse) {
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }

  .task-check-btn, .inv-health-row-link { position: relative; }
  .task-check-btn::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .inv-health-row-link::after {
    content: ''; position: absolute; left: 0; top: 50%;
    width: 100%; height: 44px; transform: translateY(-50%);
  }

  /* Small inline controls that aren't .btn and so missed the 44px rule. */
  .today-queue-more button, .partview-clear-search, .inv-demand-toggle,
  .operator-prompt-row button, .station-priority-button { min-height: 44px; }
  .operator-refresh-btn { min-width: 44px; min-height: 44px; }

  /* iOS Safari zooms the whole page when a field under 16px takes focus. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; }
}

/* A visually hidden file input inside a label-button stays keyboard-reachable;
   show the focus on the visible button. */
.btn:has(> input[type="file"]:focus-visible),
.partview-image-upload:has(> input[type="file"]:focus-visible) { outline: 2px solid var(--sidebar-accent); outline-offset: 2px; }

/* ── Skip link ──
   Off-screen until focused, then pinned over the top bar. The sidebar carries 25
   nav items; without this, reaching the active panel by keyboard means tabbing
   through all of them on every page load. */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-sm) 0;
  background: var(--card-bg);
  color: var(--sidebar-accent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform .12s;
}
.skip-link:focus-visible,
.skip-link:focus { transform: translateY(0); outline: 3px solid rgba(204,53,127,.45); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* Standalone Pick, Pack & Ship station dashboard. */
.packing-station-queue, .packing-station-active { max-width: 1120px; margin: 0 auto; }
.packing-station-queue-head, .packing-station-identity { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.packing-station-queue h3, .packing-station-identity h3 { margin:4px 0; font-size:26px; }
.station-kicker { color:var(--sidebar-accent); font-weight:800; letter-spacing:.1em; }
.station-muted, .packing-station-identity p { color:var(--text-secondary); }
.station-hardware-pill { border:1px solid var(--border); border-radius:999px; padding:7px 11px; color:var(--text-secondary); white-space:nowrap; }
.btn[hidden] { display:none; }
.station-hardware-pill.is-ready, .station-status-dot.is-ready { color:color-mix(in srgb, var(--success) 75%, var(--text-primary)); }
.station-next-order { width:100%; display:flex; justify-content:space-between; align-items:center; text-align:left; border:1px solid rgba(204,53,127,.35); border-radius:var(--radius); background:linear-gradient(135deg,rgba(204,53,127,.1),var(--card-bg)); cursor:pointer; color:var(--text-primary); }
.station-next-order strong { display:block; font-size:21px; }.station-next-order small, .station-order-row small { display:block; margin-top:6px; color:var(--text-secondary); }.station-arrow { font-size:28px; color:var(--sidebar-accent); }
.station-disclosure { border-top:1px solid var(--border); margin-top:20px; padding-top:15px; }.station-disclosure summary { cursor:pointer; font-weight:600; }.station-queue-list { margin-top:10px; }.station-order-row { display:flex; width:100%; justify-content:space-between; text-align:left; padding:14px 2px; border:0; border-bottom:1px solid var(--border); background:transparent; cursor:pointer; color:var(--text-primary); }.station-order-row > span:last-child { color:var(--sidebar-accent); font-weight:600; }
.station-address-summary { display:flex; justify-content:space-between; padding:15px; border-radius:var(--radius-sm); background:var(--surface); margin-bottom:16px; }.station-address-summary > span { color:var(--text-secondary); }
.station-main-grid { display:grid; }.station-task-card { border:1px solid var(--border); border-radius:var(--radius); background:var(--card-bg); }.station-primary { min-height:60px; min-width:240px; font-size:15px; }.station-task-actions { align-items:center; }
.packing-station-active button, .packing-station-active summary { min-height:48px; }.station-scale-compact { margin-left:auto; display:flex; align-items:center; gap:7px; color:var(--text-secondary); }.station-scale-compact .station-status-dot { margin:0; }.station-override-check { display:flex; gap:12px; align-items:center; min-height:58px; padding:10px 12px; border:1px solid rgba(176,48,63,.28); border-radius:var(--radius-sm); background:rgba(176,48,63,.06); margin:12px 0; }.station-override-check input { width:24px; height:24px; flex:0 0 auto; }.station-override-check span { display:grid; gap:2px; }.station-override-check small { color:var(--text-secondary); }
body.packing-station-focus #sidebar { width:0; padding:0; border:0; overflow:hidden; }
body.packing-station-focus #panel-packing-station > .page-header { display:none; }
.packing-station-focus .packing-station-active { max-width:1320px; }
body.packing-station-focus .station-sticky-action { position:sticky; bottom:0; z-index:4; margin:18px -24px -24px; padding:12px 24px max(12px,env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:rgba(255,255,255,.96); backdrop-filter:blur(8px); }
.station-product { display:flex; gap:18px; align-items:center; margin-bottom:18px; }.station-product-image, .station-product-placeholder { width:94px; height:94px; object-fit:contain; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface); }.station-product-placeholder { display:grid; place-items:center; color:var(--text-secondary); }.station-product p { margin:5px 0; color:var(--text-secondary); }.station-weight-hint { color:var(--text-secondary); }.station-scale-reading strong { font-size:32px; }.station-scale-reading span { color:var(--text-secondary); }.station-box-grid, .station-route-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:16px; }.station-box-choice, .station-route-choice { text-align:left; display:grid; gap:6px; padding:15px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card-bg); cursor:pointer; color:var(--text-primary); }.station-box-choice span, .station-box-choice small, .station-route-choice span { color:var(--text-secondary); }.station-box-choice.is-selected { border-color:var(--sidebar-accent); box-shadow:0 0 0 2px rgba(204,53,127,.15); }.station-selected-box { display:flex; justify-content:space-between; gap:15px; padding:15px; border-radius:var(--radius-sm); background:var(--surface); margin-bottom:16px; }.station-selected-box span { color:var(--text-secondary); }.station-sealed-check { display:flex; gap:8px; align-items:center; margin:15px 0; font-weight:600; }.station-field { display:grid; gap:6px; font-weight:600; margin:12px 0; }.station-field input { min-height:42px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; font:inherit; }.station-rates { display:grid; gap:8px; margin-bottom:16px; }.station-rate { display:flex; justify-content:space-between; gap:12px; text-align:left; border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; background:var(--card-bg); cursor:pointer; color:var(--text-primary); }.station-rate small { display:block; color:var(--text-secondary); margin-top:4px; }.station-rate.is-selected { border-color:var(--sidebar-accent); background:rgba(204,53,127,.08); }.station-status-dot { width:9px; height:9px; border-radius:50%; background:var(--error); margin-top:4px; }.station-details > div { display:grid; gap:3px; padding:10px 0; border-bottom:1px solid var(--border); }.station-details span, .station-exception-actions small { color:var(--text-secondary); }.station-exception-actions { display:grid; gap:8px; margin-top:12px; }.packing-station-error { color:#b0303f; background:rgba(176,48,63,.08); border:1px solid rgba(176,48,63,.2); border-radius:var(--radius-sm); padding:10px 12px; margin:10px 0; }.station-hint { color:var(--text-primary); background:rgba(204,53,127,.08); border:1px solid var(--sidebar-accent); border-radius:var(--radius-sm); padding:10px 12px; margin:10px 0; font-weight:600; }.station-complete { text-align:center; }.station-complete-badge { width:48px; height:48px; margin:0 auto 10px; border-radius:50%; display:grid; place-items:center; font-size:24px; font-weight:800; color:#fff; background:#127a66; }
@media (max-width: 800px) { .station-side { order:initial; }.packing-station-queue-head { flex-direction:column; }.packing-station-identity { align-items:center; }.station-primary { width:100%; min-width:0; }.station-sticky-action { position:sticky; bottom:0; z-index:4; margin:18px -24px -24px; padding:12px 24px max(12px,env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:rgba(255,255,255,.96); backdrop-filter:blur(8px); }.station-task-actions .station-primary { flex-basis:100%; }.station-side .station-disclosure { margin-top:4px; }.packing-station-active { padding-bottom:18px; } }
@media (max-width: 480px) { body.packing-station-focus #fx-display, body.packing-station-focus #auth-user-label { display:none; } body.packing-station-focus #topbar h1 { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } body.packing-station-focus #auth-signout-btn { display:none !important; }.station-task-card { padding:20px 16px; }.station-sticky-action { margin:16px -16px -20px; padding-left:16px; padding-right:16px; }.packing-station-identity h3 { font-size:23px; }.station-pause { min-width:80px; }.station-address-summary { display:grid; }.station-address-summary strong { text-align:left; }.station-box-grid { grid-template-columns:1fr; } }
.station-history { margin-top:14px; border-top:1px solid var(--border); padding-top:8px; }.station-history > div { display:grid; gap:3px; padding:8px 0; border-bottom:1px solid var(--border); }.station-history span { color:var(--text-secondary); }.station-custom-box { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding-top:10px; }.station-custom-box select { min-height:42px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; font:inherit; background:var(--card-bg); color:var(--text-primary); }
.station-choice-banner { display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border); margin:10px 0; }.station-choice-banner span { line-height:1.5; }.station-choice-over { color:#b0303f; font-weight:600; }.station-choice-ok { color:var(--text-secondary); }
.station-address-edit { display:grid; gap:2px; margin-bottom:12px; }.station-address-edit select { min-height:42px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; font:inherit; background:var(--card-bg); color:var(--text-primary); }.station-task-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }.station-field select { min-height:42px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; font:inherit; background:var(--card-bg); color:var(--text-primary); }
/* Pick step: line checklist, live scale feedback, by-hand fallback */
.station-line-checklist { list-style:none; margin:0 0 16px; padding:0; display:grid; gap:6px; }
.station-line-checklist li { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-secondary); }
.station-line-checklist li.is-active { border-color:var(--sidebar-accent); color:var(--text-primary); font-weight:600; box-shadow:0 0 0 2px rgba(204,53,127,.12); }
.station-line-checklist li.is-done { color:var(--text-secondary); }
.station-line-checklist li.is-done .station-line-text { text-decoration:line-through; }
.station-line-mark { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--surface); font-weight:700; flex:0 0 auto; }
.station-line-checklist li.is-done .station-line-mark { background:#127a66; color:#fff; }
.station-line-text { flex:1 1 auto; }
.station-pick-feedback, .station-pack-feedback { margin:12px 0; font-size:14px; font-weight:600; min-height:1.2em; }
.station-pick-feedback.is-match, .station-pack-feedback.is-match { color:#127a66; }
.station-pick-feedback.is-off, .station-pack-feedback.is-off { color:#b0303f; }
.station-pick-feedback.is-na { color:var(--text-secondary); font-weight:500; }
.station-pick-feedback.is-warn, .station-pack-feedback.is-warn { color:#b26a00; }
.station-manual-pick { display:grid; gap:10px; padding-top:10px; }
.station-box-choice.is-suggested { border-color:var(--sidebar-accent); }
.station-box-choice.is-suggested small { color:var(--sidebar-accent); }
.station-build-list { display:grid; gap:8px; margin:16px 0; }
.station-build-list > div { display:flex; justify-content:space-between; gap:18px; padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); }
.station-build-list > div > span { display:grid; gap:3px; }
.station-build-list > div > span:last-child { text-align:right; }
.station-build-list small { color:var(--text-secondary); }
.station-build-list > div.is-short { border-color:var(--error); background:rgba(176,48,63,.06); }

/* Packing station operator polish: the station is a focused work surface,
   so the current step and next physical action should read before the details. */
.packing-station-active { --station-accent: var(--sidebar-accent); }

.packing-station-active .packing-station-identity h3 { letter-spacing:-.02em; }
.station-order-meta { display:flex; align-items:center; gap:8px; color:var(--text-secondary); }
.station-mode-badge { display:inline-flex; align-items:center; min-height:24px; padding:3px 9px; border-radius:999px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.station-mode-badge.is-shipping { color:color-mix(in srgb, var(--sidebar-accent) 62%, var(--text-primary)); background:rgba(204,53,127,.12); }
.station-mode-badge.is-pickup { background:rgba(18,122,102,.12); }
.station-status-dot.is-ready { background:#127a66; }
.station-hardware-pill.is-ready { background:rgba(18,122,102,.08); }
.station-hardware-pills { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.station-btn-spinner, .station-spinner { display:inline-block; width:14px; height:14px; margin-right:8px; vertical-align:-2px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:station-spin .7s linear infinite; }
@keyframes station-spin { to { transform:rotate(360deg); } }
.station-button-progress, .station-button-success { display:inline-flex; align-items:center; justify-content:center; }
.station-task-card button:disabled { opacity:.62; cursor:wait; }
.station-reason-chips { display:flex; flex-wrap:wrap; gap:9px; margin:12px 0; }
.station-reason-chip { min-height:48px; padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card-bg); color:var(--text-primary); cursor:pointer; font:inherit; font-weight:650; }
.station-reason-chip:hover, .station-reason-chip:focus-visible, .station-reason-chip.is-selected { border-color:var(--sidebar-accent); box-shadow:0 0 0 2px rgba(204,53,127,.14); outline:none; }
.station-health-disclosure { margin-bottom:18px; }
.station-health-body { padding-top:12px; }
.station-health-metrics { display:grid; gap:10px; margin:0 0 18px; padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card-bg); }

.station-health-metric-strip { display:flex; flex-wrap:wrap; align-items:center; gap:6px; color:var(--text-secondary); }
.station-health-metric-strip i { color:var(--text-muted); font-style:normal; }
.station-health-manual-rate--attention { color:var(--warn); font-weight:700; }
.station-health-breakdown { border-top:1px solid var(--border); padding-top:9px; }
.station-health-breakdown > summary { color:var(--text-secondary); cursor:pointer; font-weight:700; }
.station-health-breakdown-body { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; padding-top:12px; }
.station-health-breakdown-body > div { min-width:0; }
.station-health-breakdown-body > div > strong { display:block; margin-bottom:8px; }
.station-health-dwell { display:grid; gap:7px; }
.station-health-dwell-row { display:grid; grid-template-columns:82px minmax(60px,1fr) 42px; align-items:center; gap:7px; color:var(--text-secondary); }
.station-health-dwell-row b { color:var(--text-primary); text-align:right; }
.station-health-dwell-track { height:7px; overflow:hidden; border-radius:999px; background:var(--border); }
.station-health-dwell-track i { display:block; height:100%; border-radius:inherit; background:var(--sidebar-accent); }
.station-health-code-list { display:grid; gap:6px; }
.station-health-code-list span { display:flex; justify-content:space-between; gap:8px; color:var(--text-secondary); }
.station-health-code-list b { color:var(--text-primary); }
.station-health-operator-table { min-width:340px; }
.station-health-operator-table th, .station-health-operator-table td { padding:7px 8px; }
.station-health-operator-table small { white-space:nowrap; }
.station-health-section { display:grid; gap:8px; margin:8px 0 18px; }

.station-health-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); }
.station-health-row > span { display:grid; gap:3px; min-width:0; }
.station-health-row small { color:var(--text-secondary); overflow-wrap:anywhere; }
.station-health-feedback { align-items:flex-start; }
.station-health-confirm { display:grid; gap:8px; justify-items:end; text-align:right; }
.station-health-fix { margin-top:4px; }
.station-health-badge { display:inline-grid; place-items:center; min-width:18px; height:18px; margin-left:8px; padding:0 5px; border-radius:999px; background:#b26a00; color:#fff; font-weight:800; vertical-align:middle; }
.station-health-reconcile { gap:10px; }
.station-health-subnote { color:var(--text-secondary); margin-top:2px; }
.station-health-flagged { margin:4px 0 0; padding-left:18px; display:grid; gap:5px; color:var(--text-secondary); }
.station-health-flagged strong { color:var(--text-primary); }
/* A flagged session is actionable from the panel, so the row carries its own
   controls and the closed-reason panel opens in place underneath it. Touch
   targets keep the 44px floor the rest of the station uses. */
.station-flagged-row { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:6px 12px; }
.station-flagged-row > span { min-width:0; flex:1 1 220px; }
.station-flagged-actions { display:flex; flex:0 0 auto; gap:8px; }
.station-flagged-actions .btn { min-height:40px; }
.station-health-flagged .station-reason-panel { margin:8px 0 4px; }
.station-purchase-overspend { color:#b0303f; font-weight:650; }
@media (prefers-reduced-motion: reduce) { .station-btn-spinner, .station-spinner { animation:none; opacity:.7; } }
.station-step-rail { display:flex; align-items:center; gap:8px; margin:0 0 14px; border:1px solid var(--border); border-radius:var(--radius); }
.station-step { display:flex; align-items:center; gap:8px; min-width:0; color:var(--text-secondary); }
.station-step > span:last-child { display:grid; gap:1px; min-width:0; }
.station-step strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.station-step small { color:var(--text-secondary); }
.station-step-marker { display:grid; place-items:center; flex:0 0 auto; border:1px solid var(--border); border-radius:50%; background:var(--surface); color:var(--text-secondary); font-weight:800; }
.station-step.is-current { color:var(--text-primary); }
.station-step.is-current strong { color:var(--station-accent); }
.station-step.is-current .station-step-marker { border-color:var(--station-accent); color:var(--station-accent); box-shadow:0 0 0 3px rgba(204,53,127,.12); }
.station-step.is-complete .station-step-marker { color:#fff; }
.station-step-connector { height:1px; flex:1 1 14px; min-width:10px; }
.station-step-rail .station-scale-compact { flex:0 0 auto; margin-left:auto; }
.station-step.is-neutral { color:var(--text-secondary); }
.station-step.is-neutral .station-step-marker { opacity:.72; }
.station-identity-actions { display:flex; align-items:center; gap:10px; }
.station-progress-status { color:var(--text-secondary); }
.station-box-suggestion { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 16px; padding:14px 16px; border:2px solid var(--sidebar-accent); border-radius:var(--radius); color:var(--text-primary); background:rgba(204,53,127,.08); cursor:pointer; text-align:left; }
.station-box-suggestion span:first-child { display:grid; gap:5px; }
.station-box-suggestion small { color:var(--text-secondary); }
.station-label-confirmed { display:flex; justify-content:space-between; gap:15px; padding:15px; border-radius:var(--radius-sm); background:var(--surface); margin-bottom:16px; }
.station-label-confirmed span { color:var(--text-secondary); }
.station-reason-panel { margin:-4px -4px 18px; padding:16px; border:1px solid var(--sidebar-accent); border-radius:var(--radius-sm); background:rgba(204,53,127,.06); }
.station-reason-panel h5 { margin:0 0 8px; font-size:16px; }
/* The two cheap ways out of an order nothing has been recorded on. Secondary by
   construction — never .station-primary, so the hardware button still walks the
   happy path rather than backing out of it. */
/* History-derived box suggestion. Same affordance as the scale-derived one, with a
   quieter edge — it is evidence from past orders, not a live measurement. */
.station-box-history { border-style:dashed; }
/* An order that left the unfulfilled queue mid-session: a warning edge, not an
   error, because the operator may legitimately be finishing a real parcel. */
.station-left-queue { border-color:var(--warn); margin-bottom:16px; }
.station-left-queue h4 { margin-top:0; }
.station-pick-escape { display:flex; flex-wrap:wrap; align-items:center; margin:0 0 14px; }

.station-pick-escape small { flex:1 1 180px; }
.station-end-of-shift { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 14px; margin:0 0 12px; padding:12px 14px; border:1px solid var(--warn); border-radius:var(--radius); background:rgba(192,127,16,.08); }
.station-end-of-shift > span { display:grid; gap:3px; min-width:0; flex:1 1 260px; }
.station-end-of-shift small { color:var(--text-secondary); }
.station-cancelled .station-complete-badge { background:var(--text-secondary); font-size:18px; }
.station-scale-compact { align-self:center; padding:5px 9px; border-radius:999px; background:var(--surface); }
/* No overflow rule on the card: `overflow-x:hidden` forces `overflow-y:auto`,
   which makes the card its own scroll container and pins `.station-sticky-action`
   to the card's bottom edge instead of the viewport. Wide children clip
   themselves (rail scrolls, address wraps). */
.station-task-card h4 { letter-spacing:-.015em; }
.station-task-card .station-sticky-action { border-radius:0 0 14px 14px; }
.station-sticky-reading { display:inline-flex; align-items:baseline; gap:6px; margin-right:4px; padding:6px 10px; border-radius:999px; background:var(--surface); color:var(--text-secondary); white-space:nowrap; }
.station-sticky-reading b { font-size:15px; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.station-task-notice { margin:0 0 12px; }
.station-task-notice .packing-station-error, .station-task-notice .station-hint { margin:0 0 8px; }
.packing-station-active > #packing-station-error { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.packing-station-active { position:relative; }
.station-next-suggestion { display:grid; gap:4px; margin:0 0 14px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); text-align:left; }
.station-next-suggestion small { color:var(--text-secondary); }

/* Queue triage: expose the information an operator needs before opening an
   order, while keeping the existing one-click start/resume action. */
.station-queue-toolbar { display:flex; align-items:center; gap:12px; margin:0 0 12px; padding:0; }
.station-toolbar-label { display:block; margin:0; color:var(--text-secondary); font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.station-priority-buttons { display:flex; flex-wrap:wrap; gap:7px; }
.station-priority-button { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:7px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card-bg); color:var(--text-primary); cursor:pointer; font:inherit; }
.station-priority-button strong { min-width:18px; padding:2px 5px; border-radius:999px; background:var(--surface); color:var(--text-secondary); text-align:center; }
.station-priority-button:hover { border-color:var(--sidebar-accent); }
.station-priority-button:focus-visible { border-color:var(--sidebar-accent); outline:3px solid rgba(204,53,127,.45); outline-offset:2px; }
.station-priority-button.is-selected { border-color:var(--sidebar-accent); background:rgba(204,53,127,.1); color:var(--sidebar-accent); box-shadow:0 0 0 2px rgba(204,53,127,.1); }
.station-priority-button.is-selected strong { background:var(--sidebar-accent); color:var(--btn-primary-text, #fff); }
.station-queue-section-label { display:flex; align-items:center; justify-content:space-between; margin:16px 0 8px; color:var(--text-secondary); font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.station-queue-section-label span:last-child { font-weight:600; letter-spacing:0; }
.station-queue-section-label--secondary { margin-top:24px; }

.station-next-order:hover { background:rgba(204,53,127,.14); }
.station-next-order:focus-visible { outline:3px solid rgba(204,53,127,.45); outline-offset:2px; }
.station-order-card-main { display:grid; gap:9px; min-width:0; text-align:left; }
.station-order-card-heading { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }

.station-next-order .station-order-card-heading > strong { font-size:20px; }
.station-recommended-label { display:inline-flex; align-items:center; min-height:22px; padding:3px 8px; border-radius:999px; background:rgba(204,53,127,.12); font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.station-queue-badges { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.station-queue-badge { display:inline-flex; align-items:center; min-height:24px; padding:3px 8px; border-radius:999px; font-weight:700; }
.station-queue-badge.is-build { background:rgba(202,138,4,.13); }
.station-queue-badge.is-converted { color:color-mix(in srgb, var(--sidebar-accent) 62%, var(--text-primary)); background:rgba(204,53,127,.16); }
.station-queue-items { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.station-queue-item { display:inline-flex; align-items:center; gap:7px; min-width:0; max-width:265px; padding:5px 8px 5px 5px; border:1px solid var(--border); border-radius:var(--radius-sm); }
.station-queue-item img, .station-queue-item-placeholder { width:28px; height:28px; flex:0 0 auto; object-fit:cover; border-radius:6px; background:var(--surface); }
.station-queue-item-placeholder { display:grid; place-items:center; color:var(--sidebar-accent); font-weight:800; }
.station-queue-item > span:last-child { display:grid; min-width:0; gap:1px; }
.station-queue-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.station-queue-item small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-secondary); }
.station-queue-more { color:var(--text-secondary); font-weight:700; }
.station-order-card-contents { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-secondary); }
.station-order-card > small, .station-order-card-main > small { color:var(--text-secondary); }
.station-order-card-meta { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.station-order-card-action { display:flex; align-items:center; align-self:center; gap:6px; flex:0 0 auto; }

.station-order-row.station-order-card--row { display:flex; align-items:center; gap:8px; width:100%; }
.station-order-card-grid { display:grid; align-items:center; gap:12px; flex:1 1 auto; min-width:0; min-height:48px; padding:7px 4px; }

.station-next-order-wrap { display:grid; gap:6px; }

.station-health-disclosure { margin-top:26px; }
.station-health-disclosure summary { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.station-health-summary { display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; color:var(--text-secondary); font-weight:500; }
.station-health-summary i { font-style:normal; opacity:.6; }
.station-health-summary .is-blocking { color:#b0303f; font-weight:700; }
.station-health-summary-ok { color:var(--text-secondary); font-weight:500; }
@media (max-width: 640px) {
  .station-queue-toolbar { display:block; }
  .station-next-order { gap:12px; }
  
  .station-order-card-grid { grid-template-columns:minmax(70px,auto) minmax(0,1fr) auto; gap:6px 10px; padding:8px 2px; }
  .station-order-card-grid > .station-order-card-heading { grid-column:1 / 3; grid-row:1; }
  .station-order-card-grid > .station-queue-badges { grid-column:1 / 3; grid-row:2; }
  .station-order-card-grid > .station-order-card-contents { grid-column:1 / 3; grid-row:3; }
  .station-order-card-grid > .station-order-card-meta { grid-column:1 / 3; grid-row:4; }
  .station-order-card-grid > .station-order-card-action { grid-column:3; grid-row:1 / 5; }
}
.station-order-row.station-order-card.station-order-card--session { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.station-order-row.station-order-card.station-order-card--session:hover { background:transparent; }
.station-order-card--session.is-stale { box-shadow:inset 3px 0 0 #b26a00; }
.station-order-card-tap { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; background:transparent; border:0; padding:6px 4px; cursor:pointer; text-align:left; color:var(--text-primary); border-radius:var(--radius-sm); }
.station-order-card-tap:hover { background:rgba(255,255,255,.36); }
.station-order-card-tap:focus-visible { outline:3px solid rgba(204,53,127,.45); outline-offset:2px; background:rgba(255,255,255,.36); }
.station-order-age { font-weight:700; padding:2px 7px; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--text-secondary); }
.station-order-age.is-stale { border-color:#b26a00; color:#8a5200; background:rgba(178,106,0,.08); }
.station-order-session-status { text-transform:capitalize; color:var(--text-secondary); }
.station-order-abandon { align-self:flex-end; }
.station-order-abandon-confirm { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); }
.station-order-abandon-confirm > div { display:flex; gap:8px; flex:0 0 auto; }
.station-scale-reading { position:relative; display:grid; column-gap:14px; row-gap:2px; }
.station-measurement-label { grid-column:1/-1; color:var(--text-secondary); font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.station-scale-reading strong { line-height:1; letter-spacing:-.04em; }
.station-scale-reading span:last-child { align-self:end; padding-bottom:3px; }
.station-pack-feedback { padding:10px 12px; border-left:3px solid var(--border); background:var(--surface); border-radius:0 8px 8px 0; }
.station-pack-feedback.is-match { border-left-color:#127a66; background:rgba(18,122,102,.07); }
.station-pack-feedback.is-off { border-left-color:#b0303f; background:rgba(176,48,63,.06); }
.station-pack-feedback.is-warn { border-left-color:#b26a00; background:rgba(178,106,0,.07); }
.station-internal-label-recovery { box-shadow:inset 3px 0 0 #b0303f; }
.station-carrier-recovery { box-shadow:inset 3px 0 0 #b0303f; }
.station-primary:not(:disabled) { box-shadow:0 5px 14px rgba(54,31,57,.14); }
.station-primary:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 7px 18px rgba(54,31,57,.2); }
.station-primary:disabled { cursor:not-allowed; opacity:.58; }

@media (max-width: 800px) {
  .station-step-rail { overflow-x:auto; scrollbar-width:thin; }
  .station-step { flex:0 0 auto; }
  .station-step-connector { flex:0 0 18px; }
}

@media (max-width: 480px) {
  .station-step-rail { margin-left:-4px; margin-right:-4px; padding:9px 8px; }
  
  .station-step small { display:none; }
  .station-step-marker { width:23px; height:23px; }
  .station-scale-compact { margin-left:auto; width:auto; }
  .station-scale-reading strong { font-size:29px; }
}
.settings-toggle-row { align-items:center; }.settings-toggle-label { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
/* Pickups tab */
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.pickups-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:14px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius); background:rgba(255,255,255,.58); }
.pickups-day-nav, .pickups-bar-end { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.pickups-day-field { display:flex; }
.pickups-day-field input { font:var(--font); color:var(--text-primary); border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 8px; background:var(--card-bg); }
.pickups-enabled { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; color:var(--text-muted); background:var(--table-header-bg); font-size:12px; font-weight:600; }
.pickups-enabled.is-on { color:color-mix(in srgb, var(--success) 70%, var(--text-primary)); background:color-mix(in srgb, var(--success) 16%, var(--card-bg)); }
.pickups-enabled-dot { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:currentColor; }
.pickups-section { padding:16px 20px; margin-bottom:14px; }
.pickups-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; }
.pickups-count-badge { min-width:28px; padding:6px 9px; border-radius:999px; background:var(--table-header-bg); color:var(--text-primary); font-size:12px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; }
.pickups-tally { font-size:12.5px; color:var(--text-secondary); white-space:nowrap; font-variant-numeric:tabular-nums; }
.pickups-tally b { color:var(--text-primary); font-weight:700; }
.pickups-blackout-label { color:var(--error); }
.pickups-empty { padding:14px 2px; color:var(--text-muted); font-size:13px; }
/* Agenda */
.pickups-agenda { display:flex; flex-direction:column; }
.pickups-appt { display:grid; grid-template-columns:76px minmax(0,1fr) auto auto; gap:8px 14px; align-items:center; padding:12px 2px; border-bottom:1px solid var(--border); }
.pickups-appt:last-child { border-bottom:0; }
.pickups-appt--done { opacity:.7; }
.pickups-appt-time { font-family:var(--font-mono); font-size:12.5px; font-weight:650; color:var(--text-primary); }
.pickups-appt-who { min-width:0; }
.pickups-appt-who strong { display:block; font-weight:650; }
.pickups-appt-who small { display:block; margin-top:2px; color:var(--text-muted); font-size:12px; }
.pickups-appt-actions { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.pickups-ghost { background:transparent; }
.pickups-open-line { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px dashed var(--border); color:var(--text-muted); font-size:12.5px; }
.pickups-linkbtn { border:0; background:none; padding:0; color:var(--sidebar-accent); font:inherit; font-weight:650; cursor:pointer; }
.pickups-linkbtn:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
.pickups-dayedit { margin-top:12px; padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--table-header-bg); }
.pickups-dayedit-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.pickups-dayedit-slot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0; font-size:12.5px; color:var(--text-secondary); }
/* Needs attention */
.pickups-attention { display:flex; flex-direction:column; }
.pickups-attn-row { padding:12px 2px; border-bottom:1px solid var(--border); }
.pickups-attn-row:last-child { border-bottom:0; }
.pickups-attn-main { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px 14px; align-items:center; }
.pickups-attn-copy { min-width:0; }
.pickups-attn-copy strong { display:block; font-weight:650; }
.pickups-attn-copy small { display:block; margin-top:2px; color:var(--text-muted); font-size:12px; }
.pickups-cleared { margin-top:12px; border-top:1px solid var(--border); }
.pickups-cleared > summary { list-style:none; cursor:pointer; padding:10px 0 2px; font-size:12px; font-weight:650; color:var(--text-muted); }
.pickups-cleared > summary::-webkit-details-marker { display:none; }
.pickups-cleared > summary::before { content:'▸ '; }
.pickups-cleared[open] > summary::before { content:'▾ '; }
.pickups-cleared[open] > summary { color:var(--text-secondary); }
.pickups-cleared .pickups-attn-row { opacity:.72; }
/* Next 7 days */
.pickups-week { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.pickups-wday { display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 6px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card-bg); color:var(--text-primary); cursor:pointer; }
.pickups-wday:hover { border-color:var(--border-focus); }
.pickups-wday:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
.pickups-wday.is-current { border-color:var(--sidebar-accent); background:var(--bg-hover); }
.pickups-wday-d { font-size:11px; color:var(--text-muted); font-weight:600; }
.pickups-wday-n { font-size:17px; font-weight:700; font-family:var(--font-mono); }
.pickups-wday-n.is-zero { color:var(--text-muted); font-weight:500; }
.pickup-status { padding:4px 8px; border-radius:999px; background:var(--table-header-bg); color:var(--text-muted); font-size:11px; text-transform:capitalize; white-space:nowrap; }
.pickup-status--invited { color:var(--warn-text); background:color-mix(in srgb, var(--warn) 18%, var(--card-bg)); }
.pickup-status--booked { color:color-mix(in srgb, #4b7bd1 70%, var(--text-primary)); background:color-mix(in srgb, #4b7bd1 16%, var(--card-bg)); }
.pickup-status--checked_in, .pickup-status--completed { color:color-mix(in srgb, var(--success) 70%, var(--text-primary)); background:color-mix(in srgb, var(--success) 16%, var(--card-bg)); }
.pickup-status--no_show, .pickup-status--cancelled { color:var(--error); background:color-mix(in srgb, var(--error) 14%, var(--card-bg)); }
.pickups-rebook { margin-top:12px; padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--table-header-bg); display:grid; gap:10px; }
.pickups-rebook-day-label { display:grid; gap:4px; font-size:12px; color:var(--text-muted); max-width:260px; }
.pickups-rebook-times { display:flex; flex-wrap:wrap; gap:6px; }
.pickups-rebook-slot small { opacity:0.7; margin-left:4px; }
.pickups-config { margin-top:4px; padding:0; overflow:hidden; }
.pickups-config-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; cursor:pointer; list-style:none; }
.pickups-config-summary::-webkit-details-marker { display:none; }
.pickups-config-summary > span:first-child, .pickups-config-summary .prod-card-label, .pickups-config-summary .settings-backup-subtext { display:block; }
.pickups-config-summary .settings-backup-subtext { margin:4px 0 0; }
.pickups-config-summary:hover { background:var(--table-header-bg); }
.pickups-config-summary:focus-visible { outline:2px solid var(--border-focus); outline-offset:-3px; }
.pickups-config-toggle { display:inline-flex; align-items:center; gap:7px; color:var(--sidebar-accent); font-size:12px; font-weight:700; white-space:nowrap; }
.pickups-config-toggle::after { content:'+'; display:grid; place-items:center; width:22px; height:22px; border:1px solid var(--border); border-radius:50%; color:var(--text-primary); font-size:16px; line-height:1; }
.pickups-config[open] .pickups-config-toggle::after { content:'−'; }
.pickups-config-body { padding:4px 20px 20px; border-top:1px solid var(--border); }
.pickups-config-intro { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:16px 0; }
.pickups-config-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.pickups-config-grid label, .pickup-window-row { display:flex; flex-direction:column; gap:5px; color:var(--text-muted); font-size:11px; font-weight:700; text-transform:none; letter-spacing:-.005em; }
.pickups-config-grid input, .pickups-config-grid textarea, .pickup-window-row input, .pickup-window-row select { width:100%; font:var(--font); color:var(--text-primary); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px; text-transform:none; letter-spacing:normal; }
.pickups-config-grid label:nth-child(6), .pickups-config-grid label:nth-child(7) { grid-column:1 / -1; }
.pickups-weekly, .pickups-blackouts { margin-top:18px; }
.pickups-subheading { margin-bottom:8px; color:var(--text-secondary); font-size:12px; font-weight:700; }
.pickup-window-header, .pickup-window-row { display:grid; grid-template-columns:minmax(86px,.8fr) repeat(2,minmax(126px,1fr)) minmax(88px,.7fr) minmax(88px,.7fr) auto; align-items:center; gap:8px; }
.pickup-window-header { margin:0 0 6px; padding:0 1px; color:var(--text-muted); font-size:12px; font-weight:700; text-transform:none; letter-spacing:-.005em; }
.pickup-window-row { margin-bottom:8px; }
.pickup-window-row > * { min-width:0; }
.pickup-window-row > span { color:var(--text-muted); }
.pickup-blackout-row { grid-template-columns:minmax(140px,1fr) auto minmax(140px,1fr) minmax(180px,1.3fr) auto; }
.pickup-remove { color:var(--error); }
.pickup-remove:hover, .pickup-remove:focus-visible { border-color:var(--error); background:rgba(176,48,63,.07); color:var(--error); }
.pickups-config-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:20px; }
.station-pickup-window { display:inline-block; margin-top:8px; padding:6px 9px; border-radius:999px; background:var(--success); color:#287653; font-weight:700; }
.pickups-preview { margin-top:16px; }
.pickups-preview-list { display:flex; flex-wrap:wrap; gap:7px; }
.pickups-preview-slot { padding:7px 9px; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-secondary); font-size:12px; }
.pickups-preview-slot.is-closed { background:var(--table-header-bg); color:var(--text-muted); text-decoration:line-through; }
@media (max-width:640px) {
  .pickups-bar { align-items:flex-start; }
  .pickups-section-heading, .pickups-config-intro { flex-direction:column; gap:8px; }
  .pickups-appt { grid-template-columns:60px minmax(0,1fr); }
  .pickups-appt .pickup-status { grid-column:2; justify-self:start; }
  .pickups-appt-actions { grid-column:1 / -1; justify-content:flex-start; }
  .pickups-attn-main { grid-template-columns:minmax(0,1fr) auto; }
  .pickups-attn-main .pickups-appt-actions { grid-column:1 / -1; }
  .pickups-week { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:760px) { .pickup-window-header { display:none; } .pickup-window-row { grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px; border:1px solid var(--border); border-radius:var(--radius-sm); } .pickup-window-row > select, .pickup-window-row > button { grid-column:1 / -1; } .pickup-blackout-row > span { display:none; } .pickup-blackout-row > input[type="text"] { grid-column:1 / -1; } }
@media (max-width:600px) { .pickups-config-grid { grid-template-columns:1fr; } .pickups-config-grid label:nth-child(6), .pickups-config-grid label:nth-child(7) { grid-column:auto; } }

@media (max-width:720px) {
  /* The inventory decision table becomes a compact, viewport-fitting scan on
     phones. Part and status stay pinned; secondary columns are hidden above. */
  #panel-inventory .inv-health-table { min-width:0; width:100%; table-layout:fixed; }
  #panel-inventory .inv-health-table th, #panel-inventory .inv-health-table td { padding:8px 4px; overflow-wrap:normal; word-break:normal; }
  #panel-inventory .inv-health-table thead th { white-space:normal; font-size:9px; line-height:1.15; }
  #panel-inventory .inv-health-table th:nth-child(1), #panel-inventory .inv-health-table td:nth-child(1) { width:15%; }
  #panel-inventory .inv-health-table th:nth-child(2), #panel-inventory .inv-health-table td:nth-child(2) { width:20%; }
  #panel-inventory .inv-health-table th:nth-child(5), #panel-inventory .inv-health-table td:nth-child(5),
  #panel-inventory .inv-health-table th:nth-child(6), #panel-inventory .inv-health-table td:nth-child(6),
  #panel-inventory .inv-health-table th:nth-child(7), #panel-inventory .inv-health-table td:nth-child(7) { width:13%; }
  #panel-inventory .inv-health-table th:nth-child(10), #panel-inventory .inv-health-table td:nth-child(10) { width:11%; }
  #panel-inventory .inv-health-table th:nth-child(12), #panel-inventory .inv-health-table td:nth-child(12) { width:16%; }
}
/* Receiving is a counting surface; wide line tables scroll inside the card. */
.receiving-table { min-width: 620px; }
.receiving-table input { min-width: 88px; font-size: 16px; }
/* Sticky so the primary action (and the live counted-so-far summary) stays
   reachable without scrolling back down past a long line list. */
.receiving-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; position: sticky; bottom: 0; padding: 12px 0; background: var(--content-bg); }
.receiving-count-summary { font-weight: 600; color: var(--text-primary); }
.invoice-correction { margin: 12px 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
/* Each action (correct payment / reopen / re-match) gets its own reason
   field directly above its own button, so a reason typed for one can't be
   submitted against another. */
.invoice-correction-group { padding-top: 14px; border-top: 1px dashed var(--border); }
.invoice-correction-group:first-child { padding-top: 0; border-top: 0; }
.invoice-correction-group > .btn { margin: 8px 0 0; }
.invoice-cost-section { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.invoice-cost-section > .po-lines-header { margin: -16px -16px 12px; flex-wrap: wrap; gap: 4px 12px; }
.invoice-cost-section > .po-field-hint { margin: 0 0 10px; }
.invoice-cost-section h4 { margin: 0 0 6px; }
.invoice-cost-section p { margin: 0 0 4px; }
.invoice-cost-section > .table-wrap { overflow-x: auto; }
/* Allocate step is a proper table now (Source/Receipt/Qty/Amount/On-hand/Legacy
   columns) instead of a stack of per-row mini-forms -- easier to scan across
   several allocations at once, matching receiving.js's table-based flow. */
.invoice-cost-row td { padding: 8px 6px; vertical-align: top; }
.invoice-cost-row input, .invoice-cost-row select { width: 100%; min-width: 90px; font-size: 16px; }
.invoice-cost-section > .btn { margin: 10px 0; }
@media (max-width: 600px) {
  /* Each row reads as its own card -- matching the border-radius/shadow the
     rest of the app uses for a "card" -- rather than a bare label/value list
     that just happens to sit inside one. */
  .receiving-table, .receiving-table tbody { display: block; min-width: 0; width: 100%; }
  .receiving-table thead { display: none; }
  .receiving-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 10px;
    padding: 12px; margin: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--card-bg); box-shadow: var(--card-shadow);
  }
  .receiving-table td { display: block; border: 0; padding: 6px 0; }
  .receiving-table td:first-child { grid-column: 1 / -1; padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
  .receiving-table td::before { display: block; font-size: 11px; opacity: .75; margin-bottom: 4px; }
  .receiving-table td:nth-child(2)::before { content: 'Ordered'; }
  .receiving-table td:nth-child(3)::before { content: 'Received before'; }
  .receiving-table td:nth-child(4)::before { content: 'Counted now'; }
  .receiving-table input { width: 100%; }
}

/* ── Shopify-admin structure pass ─────────────────────────────────────────
   Structure only: Shopify's shell, radii, type scale and component shapes on
   top of the existing candy-pastel palette. No colour tokens change here.
   - Desktop shell: lilac frame, transparent top bar and sidebar, and the
     content area as one rounded sheet. Drawer widths (<=1024px) keep the
     original solid sidebar, because it is an overlay there.
   - Type: 13px base with -0.01em tracking (Shopify's -0.13px at 13px).
   - Components: pill buttons, hairline cards, sentence-case labels, dot badges.
   Status colours (chips, floor-screen cues) are deliberately untouched. */
:root {
  --frame-bg: var(--sidebar-bg);
  --radius-pill: 999px;
}

body { font-size: 13px; letter-spacing: -.01em; }
input, select, textarea, button { letter-spacing: inherit; }
table { font-size: 13px; }
code, pre, kbd, samp { letter-spacing: 0; }

@media (min-width: 1025px) {
  html, body { background: var(--frame-bg); }
  #topbar { height: 52px; background: transparent; border-bottom: 0; box-shadow: none; }
  #topbar .btn-secondary { background: var(--card-bg); }
  #sidebar { background: transparent; border-right: 0; padding: 4px 10px 14px; }
  #content {
    margin: 0 10px 10px 0;
    border-radius: var(--radius);
    background: var(--content-bg);
  }
  #nav-expand-btn { background: var(--card-bg); }
}

/* Nav: tinted pill instead of a left rail; section labels in sentence case. */
.nav-item { min-height: 32px; padding: 6px 10px; border-radius: var(--radius-sm); font-weight: 500; }
.nav-item:hover { transform: none; }
.nav-item.active { box-shadow: none; font-weight: 600; }
.nav-label, .nav-section-label {
  text-transform: none;
  letter-spacing: -.005em;
  font-size: 12px;
  font-weight: 600;
  color: var(--sidebar-text-dim);
}
.nav-section-label { margin-top: 6px; padding-top: 14px; }

/* Cards and section headers. */
.card { border-radius: var(--radius); box-shadow: var(--card-shadow); }
.prod-card-label {
  padding: 14px 18px 10px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--text-primary);
}
.page-header h2 { font-weight: 650; }

/* Icon tile for card/section headers: a small tinted rounded square. */

/* Buttons: pills, flatter. Heights are left alone (floor screens and the
   coarse-pointer block depend on them). */
.btn, .btn-sm { border-radius: var(--radius-pill); font-weight: 600; }
.btn-primary {
  background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(204,53,127,.22);
}
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 6px rgba(204,53,127,.24); }
.btn-secondary { border-color: transparent; }

/* Tables: quieter sentence-case headers, airier rows. */
thead th {
  text-transform: none;
  letter-spacing: -.005em;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
td { padding-top: 12px; padding-bottom: 12px; }

/* Status badges: sentence-case pill with a leading dot in the chip's own
   colour. Colours are unchanged; the dot is currentColor. */
.po-status-badge, .task-priority-badge, .pl-status-chip, .shopify-status-chip,
.wo-status-chip, .inv-health-chip, #panel-availability .shopify-status-chip {
  border-radius: var(--radius-pill);
  text-transform: none;
  letter-spacing: 0;
}
.po-status-badge::before, .pl-status-chip::before, .shopify-status-chip::before,
.wo-status-chip::before, .inv-health-chip::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
}

/* Modal and popovers share the larger radius. */
.confirm-modal-card { border-radius: var(--radius); }

@media (max-width: 640px) {
  .card { border-radius: var(--radius-sm); }
}

/* Detail layout primitives (Shopify's main column + right rail). Opt-in: add
   .detail-layout to a wrapper holding a main column and an <aside class="detail-rail">
   of .rail-section blocks. The rail collapses under the main column below 900px. */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.detail-rail { display: grid; align-content: start; gap: 0; padding: 4px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); }
.rail-section { padding: 14px 0; border-top: 1px solid var(--border); }
.rail-section:first-child { border-top: 0; }
.rail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
@media (max-width: 900px) { .detail-layout { grid-template-columns: minmax(0, 1fr); } }

/* Today: queues with nothing to do fold into one disclosure under the active ones. */
.today-clear { margin-top: 16px; padding: 0; }
.today-clear > summary { cursor: pointer; padding: 14px 18px; color: var(--text-secondary); font-size: 13px; font-weight: 600; list-style-position: inside; }
.today-clear[open] > summary { border-bottom: 1px solid var(--border); }
.today-clear > .today-grid { padding: 16px; }

/* Empty states lead with the next step, the way Polaris empty states do. */
.empty-state > .btn { margin-top: 14px; }
.station-empty { padding: 32px 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--card-bg); color: var(--text-secondary); text-align: center; }
.station-empty > .btn { margin-top: 12px; }

.partview-inv-exception { margin: 10px 0 4px; }
.partview-inv-exception > summary { cursor: pointer; color: var(--text-secondary); font-size: 12px; font-weight: 600; padding: 6px 0; }
.partview-inv-exception[open] > summary { margin-bottom: 6px; }

/* Button and status text tokens. Dark mode brightens the accent fills, where
   white text drops to ~3:1; dark text on them reads at ~6:1. --warn-text is the
   readable apricot for small warning copy on either surface. */
:root { --btn-primary-text: #fff; --btn-danger-text: #fff; --warn-text: #8a5c08; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --btn-primary-text: #1f0f1a; --btn-danger-text: #1f0f1a; --warn-text: #f0c57a; }
}
:root[data-theme="dark"] { --btn-primary-text: #1f0f1a; --btn-danger-text: #1f0f1a; --warn-text: #f0c57a; }

/* Row-level destructive actions stay quiet until hovered, as in Polaris index
   tables; a column of solid red buttons drowned out the data. The confirm
   modal is still the gate. */
.btn-quiet-danger { color: var(--btn-danger); }
.btn-quiet-danger:hover, .btn-quiet-danger:focus-visible { background: var(--btn-danger); color: var(--btn-danger-text, #fff); }

/* Chat header: the model picker and actions wrap under the title on phones
   instead of pushing the page sideways. */
@media (max-width: 640px) {
  .operator-headline, .operator-headline-actions { flex-wrap: wrap; }
  .operator-headline-actions { width: 100%; }
}
/* Second pass (rendered check): identifiers and status chips never wrap mid-token,
   and the long commerce summary stays out of the way in page headers and cards. */
.part-link-btn, .inv-health-row-link, .inv-health-chip, .pl-status-chip, .po-status-badge,
.shopify-status-chip, .wo-status-chip { white-space: nowrap; }
.page-header-actions .commerce-context-meta, .today-head-actions .commerce-context-meta,
#planning-commerce-freshness .commerce-context-meta { max-width: 440px; text-align: right; }
.inv-summary-commerce { grid-column: 1 / -1; padding: 0 16px 12px; }
.inv-summary-commerce .commerce-context-meta { margin: 0; }

/* Rendered-check fixes: four-digit PO quantities fit their input, the Settings toggle
   keeps its checkbox next to its label, and the Inventory table keeps headings and
   values on one line (it scrolls sideways instead of breaking words). */
.po-lines-table .tx-qty-input { width: 96px; }
.inv-demand-toggle { white-space: nowrap; }
.settings-row .settings-toggle-label input[type="checkbox"] { min-width: 0; width: 16px; padding: 0; flex: 0 0 auto; }
.settings-section .prod-card-label { padding-left: 0; padding-right: 0; }
.settings-backup-header .prod-card-label { padding-top: 0; }

/* Planning reorder queue on phones: one stacked card per part instead of a 13-column
   table. Each value gets a small label (the header row is hidden), and the select
   checkbox and expand toggle stay in a left rail. The expand detail row is unchanged. */
@media (max-width: 720px) {
  #panel-planning .pl-reorder-table { display: block; min-width: 0 !important; width: 100%; table-layout: auto; }
  #panel-planning .pl-reorder-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  #panel-planning .pl-reorder-table tbody { display: block; }
  #panel-planning .pl-reorder-table tr.pl-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "sel exp part  stat"
      "sel exp desc  desc"
      "sel exp onh   ord"
      "sel exp inb   days"
      "sel exp urg   trend"
      "sel exp supp  supp"
      "sel exp act   act";
    gap: 6px 12px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
  }
  #panel-planning .pl-reorder-table tr.pl-row > td {
    display: block; position: static; min-width: 0; height: auto; padding: 0; border: 0; box-shadow: none; background: transparent;
  }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(1)  { grid-area: sel; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(2)  { grid-area: exp; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(3)  { grid-area: stat; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(4)  { grid-area: part; align-self: center; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(5)  { grid-area: desc; }
  #panel-planning .pl-reorder-table .pl-desc-cell { min-width: 0; max-width: none; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(6)  { grid-area: onh; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(7)  { grid-area: ord; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(8)  { grid-area: inb; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(9)  { grid-area: days; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(10) { grid-area: urg; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(11) { grid-area: trend; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(12) { grid-area: supp; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(13) { grid-area: act; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(n+6):nth-child(-n+12)::before {
    display: block; margin-bottom: 1px; color: var(--text-muted); font-size: 11px; font-weight: 600;
  }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(6)::before  { content: "On hand"; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(7)::before  { content: "Order qty"; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(8)::before  { content: "Inbound"; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(9)::before  { content: "Days of inventory"; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(10)::before { content: "Urgency"; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(11)::before { content: "Trend"; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(12)::before { content: "Supplier"; }
  #panel-planning .pl-reorder-table tr.pl-row > td:nth-child(13) .btn { width: 100%; }
  #panel-planning .pl-reorder-table tr.pl-detail-row, #panel-planning .pl-reorder-table tr.pl-detail-row > td { display: block; width: 100%; }
}

/* Inventory on phones: chips and badges shrink so the pinned Status column and the
   On order / Assembly demand cells stay inside the table instead of clipping. */
@media (max-width: 720px) {
  #panel-inventory .inv-health-chip { padding: 3px 6px; font-size: 9px; }
  #panel-inventory .inv-onorder-badge, #panel-inventory .inv-demand-toggle { padding: 1px 5px; font-size: 10px; }
}

.nowrap { white-space: nowrap; }

/* BOM selector label is a field label, not an eyebrow; qty inputs get real input styling;
   row-level destructive buttons are tinted until hovered so a column of them isn't a wall of red. */
#panel-boms #bom-selector-wrap > label { font-size: 12px; font-weight: 600; letter-spacing: -.005em; color: var(--text-secondary); }
input.inline-select { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 13px; background: var(--card-bg); text-align: right; outline: none; }
input.inline-select:focus { border-color: var(--border-focus); }
td.actions-cell .btn-danger { background: color-mix(in srgb, var(--btn-danger) 12%, var(--card-bg)); color: var(--btn-danger); box-shadow: none; }
td.actions-cell .btn-danger:hover { background: var(--btn-danger); color: #fff; }
.count-audit-card .prod-card-label { padding: 0; }
.gst-period-card + .gst-summary-card { margin-top: 16px; }

/* Loose blocks inside a .card sit under a label with 18px of inset; match it (Margins, notes). */
.pad-note { padding: 10px 18px; font-size: 13px; }
.note-xs { font-size: 11px; }
.row-total { border-top: 2px solid var(--border); font-weight: 600; }
.margins-intro { margin-bottom: 10px; padding: 0 18px; font-size: 12px; }
.margins-stat-strip { margin: 0 18px 12px; padding: 12px; border-radius: var(--radius); background: var(--content-bg); }
#panel-margins .card > .ops-mode-btns { margin-left: 18px; }
.inv-summary-stat-val--text { font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; overflow-wrap: anywhere; }
#panel-chat .commerce-context-meta { margin: 0; padding: 8px 18px; }

/* Phones: BOM drops the revision and USD columns so Qty, cost and Remove stay on screen;
   Transactions line items stack (part on its own row, then qty / cost / extra) instead of
   scrolling sideways past the fields you are filling in. */
@media (max-width: 640px) {
  .bom-col-rev, .bom-col-usd { display: none; }
  #panel-transactions .tx-lines-table { display: block; min-width: 0; width: 100%; }
  #panel-transactions .tx-lines-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  #panel-transactions .tx-lines-table tbody { display: block; }
  #panel-transactions .tx-lines-table tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  #panel-transactions .tx-lines-table tr:last-child { border-bottom: 0; }
  #panel-transactions .tx-lines-table td { display: block; min-width: 0; padding: 0; border: 0; }
  #panel-transactions .tx-lines-table td:first-child { grid-column: 1 / -1; }
  #panel-transactions .tx-lines-table td:last-child { align-self: end; justify-self: end; }
  #panel-transactions .tx-lines-table td:nth-child(n+2):not(:last-child)::before { display: block; margin-bottom: 2px; color: var(--text-muted); font-size: 11px; font-weight: 600; }
  #panel-transactions .tx-lines-table td:nth-child(2)::before { content: "Qty"; }
  #panel-transactions .tx-lines-table td:nth-child(3):not(:last-child)::before { content: "Unit cost"; }
  #panel-transactions .tx-lines-table td:nth-child(4):not(:last-child)::before { content: "Extra"; }
  #panel-transactions .tx-lines-table .tx-qty-input, #panel-transactions .tx-lines-table .tx-cost-input { width: 100%; }
}

/* PO line items on phones: part search on its own full-width row, then qty / cost / total.
   The revision and supplier-part columns are reference data and drop out; they stay on desktop. */
@media (max-width: 640px) {
  .po-lines-edit { display: block; min-width: 0 !important; width: 100%; }
  .po-lines-edit thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .po-lines-edit tbody { display: block; }
  .po-lines-edit tbody tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .po-lines-edit tbody td { display: block; min-width: 0; padding: 0; border: 0; }
  .po-lines-edit .po-part-cell, .po-lines-edit .po-desc-cell { grid-column: 1 / -1; }
  .po-lines-edit .po-revision-cell, .po-lines-edit .po-supplier-pn-cell { display: none; }
  .po-lines-edit .po-desc-cell { color: var(--text-muted); font-size: 12px; }
  .po-lines-edit .po-remove-cell { align-self: end; justify-self: end; }
  .po-lines-edit .po-qty-cell::before, .po-lines-edit .po-cost-cell::before, .po-lines-edit .po-recv-cell::before,
  .po-lines-edit .po-rem-cell::before, .po-lines-edit .po-extended-cell::before { display: block; margin-bottom: 2px; color: var(--text-muted); font-size: 11px; font-weight: 600; }
  .po-lines-edit .po-qty-cell::before { content: "Qty"; }
  .po-lines-edit .po-recv-cell::before { content: "Received"; }
  .po-lines-edit .po-rem-cell::before { content: "Remaining"; }
  .po-lines-edit .po-cost-cell::before { content: "Unit cost"; }
  .po-lines-edit .po-extended-cell::before { content: "Extended"; }
  .po-lines-edit .tx-qty-input, .po-lines-edit .tx-cost-input { width: 100%; }
  .po-lines-edit .po-extended-cell { align-self: end; padding-bottom: 8px; }
}
.pickups-section .prod-card-label { padding-left: 0; padding-right: 0; }
.pickup-status::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.operator-headline-actions { flex-wrap: wrap; } .operator-headline-actions select { min-width: 0; max-width: 100%; }
.commerce-context-compact { white-space: nowrap; }
@media (max-width: 700px) { .operator-metrics .operator-metric:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ── Utilities and small components that replace inline style="" ─────────────────────
   STYLE_GUIDE.md: inline styles are for runtime values and display toggles only. */
.u-mt-6 { margin-top: 6px; } .u-mt-10 { margin-top: 10px; }
.u-mb-6 { margin-bottom: 6px; } .u-mb-8 { margin-bottom: 8px; } .u-mb-10 { margin-bottom: 10px; }
.u-m-0 { margin: 0; } .u-ml-8 { margin-left: 8px; } .u-ml-auto { margin-left: auto; }
 .u-fw-600 { font-weight: 600; } 
.u-w-full { width: 100%; } .u-w-40 { width: 40px; } .u-w-52 { width: 52px; } .u-w-70 { width: 70px; }
.u-w-100 { width: 100px; } .u-w-120 { width: 120px; } .u-w-130 { width: 130px; }
.u-flex-gap-8 { display: flex; gap: 8px; }
.is-clickable { cursor: pointer; }
.note-sm { font-size: 12px; }
/* iOS zooms into inputs under 16px; form fields on the PO, GST and scale screens opt out. */
input.input-no-zoom, select.input-no-zoom, textarea.input-no-zoom { font-size: 16px !important; }
.icon-inline { margin-right: 5px; vertical-align: middle; }
.icon-spin { animation: spin 1s linear infinite; }
.table-footer-top { border-top: 0; border-bottom: 1px solid var(--border); }
.settings-inline-field { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.settings-status { font-size: 12px; color: var(--text-muted); }
.settings-row--center { align-items: center; gap: 10px; }
.settings-row--wrap { flex-wrap: wrap; }
.packing-debug-check--row { flex-direction: row; align-items: center; gap: 6px; }
.textarea-full { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.expense-thumb { display: block; max-width: 120px; max-height: 120px; margin-top: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.fx-dot--warn { background: var(--warn) !important; }

/* PLM section on the Parts page: the callout sits clear of the tile grid, links use the app link colour, release controls get room. */
.plm-section .plm-callout { margin-bottom: 12px; }
.plm-summary-grid a { color: var(--btn-primary); font-weight: 600; text-decoration: none; }
.plm-summary-grid a:hover { text-decoration: underline; }
.plm-revision-row .plm-checklist { margin-top: 12px; }
.plm-revision-row .plm-revision-actions { margin-top: 12px; }

/* Chat: markdown tables from the assistant. */
.chat-table-wrap { max-width: 100%; margin: 8px 0; overflow-x: auto; }
.chat-bubble table { border-collapse: collapse; font-size: 12px; }
.chat-bubble th, .chat-bubble td { padding: 5px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.chat-bubble th { color: var(--text-muted); font-weight: 600; background: var(--table-header-bg); }

/* Suppliers: ids like SUP-1 should not break at the hyphen. */
#panel-suppliers td:first-child { white-space: nowrap; }

/* Phones: the delivery list stacks so "Count delivery" is on screen instead of past the right edge;
   the Tasks search field takes its own row instead of being squeezed beside two selects. */
@media (max-width: 640px) {
  .receiving-list-table, .receiving-list-table tbody { display: block; width: 100%; min-width: 0; }
  .receiving-list-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .receiving-list-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .receiving-list-table tbody td { display: block; min-width: 0; padding: 0; border: 0; }
  .receiving-list-table tbody td:nth-child(1) { font-weight: 600; }
  .receiving-list-table tbody td:nth-child(2) { text-align: right; color: var(--text-secondary); }
  .receiving-list-table tbody td:nth-child(3)::before { content: "Expected "; color: var(--text-muted); }
  .receiving-list-table tbody td:nth-child(4)::before { content: "Remaining "; color: var(--text-muted); }
  .receiving-list-table tbody td:nth-child(4) { text-align: right; }
  .receiving-list-table tbody td:last-child { grid-column: 1 / -1; margin-top: 6px; }
  .receiving-list-table tbody td:last-child .btn { width: 100%; }
  .receiving-list-table tbody td[colspan] { grid-column: 1 / -1; }
  .receiving-list-table tbody td[colspan]::before { content: none; }
  .task-search-wrap { flex: 1 1 100%; }
}

/* ── Packing Station restyle ───────────────────────────────────────────────
   A floor screen used on a tablet at arm's length: one obvious next action,
   large targets, quiet chrome. Uppercase kickers and badges stay on purpose.
   Colours come from tokens so dark mode follows. */

/* Queue: the count is the heading (the page header already names the screen). */
.packing-station-queue-head { align-items: flex-end; margin-bottom: 14px; }
.packing-station-queue-head h3 { margin: 0 0 4px; font-size: 28px; letter-spacing: -.02em; }
.station-queue-toolbar { margin-bottom: 4px; }

/* "Start" / "Resume" is a real button, not a text link. The whole card stays clickable. */
.station-order-card-action { min-height: 44px; padding: 0 20px; border-radius: var(--radius-pill); background: var(--btn-primary); color: #fff; font-weight: 700; letter-spacing: 0; }
.station-order-card-action .station-arrow { color: inherit; font-size: 18px; line-height: 1; }
.station-next-order:hover .station-order-card-action, .station-order-card-tap:hover .station-order-card-action { background: var(--btn-primary-hover); }

/* Next up: the recommended order is the one card that stands out. */
.station-next-order { padding: 18px 20px; gap: 20px; border-color: color-mix(in srgb, var(--sidebar-accent) 45%, var(--border)); background: color-mix(in srgb, var(--sidebar-accent) 7%, var(--card-bg)); box-shadow: var(--card-shadow); }
.station-next-order:hover { background: color-mix(in srgb, var(--sidebar-accent) 11%, var(--card-bg)); }
.station-recommended-label { background: color-mix(in srgb, var(--sidebar-accent) 14%, transparent); color: var(--sidebar-accent); }
.station-queue-item { background: var(--card-bg); }

/* The rest of the queue: one bordered row per order, columns that line up. */
.station-order-row.station-order-card--row { padding: 6px 12px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); }
.station-order-row.station-order-card--row:hover { border-color: color-mix(in srgb, var(--sidebar-accent) 40%, var(--border)); }
.station-order-card--row .station-order-card-action { min-height: 40px; padding: 0 16px; }
@media (min-width: 641px) { .station-order-card-grid { grid-template-columns: minmax(70px, .6fr) auto minmax(150px, 1.6fr) minmax(150px, 1fr) auto; } }
.station-order-card-meta { text-align: right; }
@media (max-width: 640px) { .station-order-card-meta { text-align: left; } .packing-station-queue-head { align-items: flex-start; } }

/* Convert to pickup/shipping is occasional, so it is a quiet text button at the end of the card. */

/* Active order: header, step rail, then the task beside the order's items. */
.packing-station-active .packing-station-identity { align-items: center; margin-bottom: 14px; }
.station-pause { min-width: 0; padding-inline: 22px; }
.station-mode-badge.is-shipping, .station-queue-badge.is-converted { background: color-mix(in srgb, var(--sidebar-accent) 14%, transparent); color: var(--sidebar-accent); }
.station-mode-badge.is-pickup { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.station-queue-badge.is-build { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--text-primary); }

.station-step-rail { padding: 12px 16px; background: var(--card-bg); box-shadow: var(--card-shadow); }

.station-step-marker { width: 28px; height: 28px; }
.station-step.is-complete .station-step-marker { border-color: var(--success); background: var(--success); }
.station-step.is-current .station-step-marker { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sidebar-accent) 16%, transparent); }
.station-step-connector { background: var(--border); }
.station-step.is-complete + .station-step-connector { background: var(--success); }
/* The scale status in the rail is a status, not an action. */
.packing-station-active .station-step-rail .station-scale-compact { gap: 10px; padding: 0 0 0 14px; border-left: 1px solid var(--border); border-radius: 0; background: transparent; }
.packing-station-active .station-step-rail .station-scale-compact .btn { min-height: 34px; padding: 0 14px; }

.station-main-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.station-task-card { padding: 28px; box-shadow: var(--card-shadow); }
.station-task-card h4 { margin: 0 0 18px; font-size: 22px; line-height: 1.25; }
.station-task-card p { margin: 0 0 16px; color: var(--text-secondary); font-size: var(--st-fs-sm, 14px); line-height: 1.5; }
.station-task-card .station-task-actions { margin-top: 18px; }
.station-task-card .station-primary { min-height: 56px; }

/* Reprinting the box label is a utility; it must not look like the next step. */
.station-reprint { align-items: center; gap: 4px 12px; margin: -6px 0 16px; }
.station-reprint .btn { min-height: 36px; padding: 0 14px; }
.station-reprint small { color: var(--text-secondary); }

/* Side column: the items being packed are always visible; the rest is tucked away. */
.station-side { display: grid; gap: 12px; align-content: start; }
.station-items-card { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--card-shadow); }
.station-items-card h5 { margin: 0 0 10px; color: var(--text-secondary); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.station-items-card .station-details { display: grid; gap: 10px; }
.station-items-card .station-details > div { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.station-items-card .station-details > div:last-child { padding-bottom: 0; border-bottom: 0; }
.station-items-card strong { font-size: var(--st-fs-base, 15px); }
.station-items-card span { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.station-side .station-disclosure { margin: 0; padding: 0; border-top: 0; }
.station-side .station-disclosure summary { min-height: 40px; align-items: center; padding: 0 4px; color: var(--text-secondary); }
.station-side .station-disclosure[open] { padding-bottom: 8px; }

@media (max-width: 1180px) {
  .station-step-rail { flex-wrap: wrap; }
  .packing-station-active .station-step-rail .station-scale-compact { flex: 1 0 100%; margin: 4px 0 0; padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 640px) {
  /* Only the current step keeps its label on a phone, so the whole rail fits. */
  .station-step:not(.is-current) > span:last-child { display: none; }
}
@media (max-width: 800px) {
  .station-main-grid { grid-template-columns: 1fr; }
  .station-task-card { padding: 22px 18px; }
  .station-step-rail { gap: 6px; padding: 10px 12px; }
  .station-step-connector { min-width: 6px; }
  .packing-station-active .station-step-rail .station-scale-compact { flex: 1 0 100%; margin: 4px 0 0; padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--border); }
  .station-step-rail { flex-wrap: wrap; }
}
.station-side .station-disclosure summary { display: list-item; list-style-position: inside; }
/* The sticky action bar spans the card edge to edge whatever the card padding is. */
.station-task-card { --station-card-pad: 28px; }
body.packing-station-focus .station-task-card .station-sticky-action { margin: 18px calc(var(--station-card-pad) * -1) calc(var(--station-card-pad) * -1); padding: 12px var(--station-card-pad) max(12px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--card-bg) 96%, transparent); }
@media (max-width: 800px) { .station-task-card { --station-card-pad: 18px; } }
/* .station-order-card-tap (flex) was declared after .station-order-card-grid, so the row never became a grid. */
.station-order-card-tap.station-order-card-grid { display: grid; }

/* Convert to pickup on the pick step is occasional, so it reads as a utility like Reprint. */
.station-pick-escape { gap: 4px 12px; }
.station-pick-escape .btn { min-height: 36px; padding: 0 14px; }
.station-pick-escape small { color: var(--text-secondary); }

/* Queue card "⋯" menu: occasional actions (convert to pickup/shipping) without a button on every card. */
.station-order-menu { position: relative; flex: 0 0 auto; }
.station-order-menu > summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--text-secondary); font-size: 22px; line-height: 1; list-style: none; cursor: pointer; }
.station-order-menu > summary::-webkit-details-marker { display: none; }
.station-order-menu > summary:hover, .station-order-menu[open] > summary { background: var(--surface); color: var(--text-primary); }
.station-order-menu > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--sidebar-accent) 45%, transparent); outline-offset: 2px; }
.station-order-menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 6; min-width: 200px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--card-shadow-hover); }
.station-order-menu-list button { display: block; width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); font: inherit; font-size: var(--st-fs-base, 15px); font-weight: 600; text-align: left; cursor: pointer; white-space: nowrap; }
.station-order-menu-list button:hover:not(:disabled) { background: var(--surface); }
.station-order-menu-list button:disabled { color: var(--text-secondary); cursor: default; }
/* On the next-up card the menu sits at the right edge, vertically centred beside Start. */
.station-next-order-wrap { position: relative; }
.station-next-order-wrap > .station-next-order { padding-right: 72px; }
.station-next-order-wrap > .station-order-menu { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); }
.station-order-card--row .station-order-menu { margin-left: 2px; }
@media (max-width: 640px) { .station-order-row.station-order-card--row { flex-wrap: nowrap; } }

/* ── Packing Station: the live scale reading is the hero of the pick and weigh steps ──────────
   Tone says whether to act: none/empty (nothing yet), settling (wait), ok (matches),
   warn (advisory), off (wrong weight). The tone class is patched live by stationPatchScaleNodes. */
.station-scale-reading { grid-template-columns: 1fr auto; grid-template-areas: "label note" "grams grams" "expect expect"; align-items: baseline; gap: 2px 14px; margin: 4px 0 14px; padding: 16px 20px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--card-bg); }
.station-scale-reading .station-measurement-label { grid-area: label; }
.station-scale-reading > strong { grid-area: grams; font-size: 56px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.station-scale-reading > #station-scale-note { grid-area: note; align-self: baseline; justify-self: end; padding: 0; font-size: var(--st-fs-sm, 14px); font-weight: 700; color: var(--text-secondary); }
.station-scale-reading > .station-scale-expect { grid-area: expect; align-self: baseline; padding: 0; color: var(--text-secondary); font-size: var(--st-fs-sm, 14px); font-variant-numeric: tabular-nums; }
.station-scale-reading > .station-scale-expect:empty { display: none; }
.station-scale-reading.is-none > strong, .station-scale-reading.is-empty > strong { color: var(--text-muted); }
.station-scale-reading.is-settling { border-style: dashed; border-color: var(--warn); }
.station-scale-reading.is-settling > strong { color: var(--text-secondary); }
.station-scale-reading.is-ok { border-color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--card-bg)); }
.station-scale-reading.is-ok > strong, .station-scale-reading.is-ok > #station-scale-note { color: var(--success); }
.station-scale-reading.is-warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--card-bg)); }
.station-scale-reading.is-off { border-color: var(--btn-danger); background: color-mix(in srgb, var(--btn-danger) 8%, var(--card-bg)); }
.station-scale-reading.is-off > strong, .station-scale-reading.is-off > #station-scale-note { color: var(--btn-danger); }
@media (max-width: 480px) { .station-scale-reading > strong { font-size: 44px; } .station-scale-reading { padding: 14px 16px; } }

/* ── Packing Station: type scale for a screen read at arm's length ────────────────────────────
   Nothing in the station is smaller than 13px (it was 10-12px in places). The three sizes are
   variables so a tablet can opt into a larger scale: body.station-floor-large (Text size: Large). */
.packing-station-queue, .packing-station-active { --st-fs-xs: 13px; --st-fs-sm: 14px; --st-fs-md: 14px; --st-fs-base: 15px; font-size: var(--st-fs-base); }
body.station-floor-large .packing-station-queue, body.station-floor-large .packing-station-active { --st-fs-xs: 15px; --st-fs-sm: 16px; --st-fs-md: 16px; --st-fs-base: 17px; }
.packing-station-queue .btn, .packing-station-active .btn { font-size: var(--st-fs-base); }
.packing-station-queue .btn-sm, .packing-station-active .btn-sm { font-size: var(--st-fs-md); }
.station-kicker { font-size: var(--st-fs-xs); }
.station-muted, .packing-station-identity p { font-size: var(--st-fs-md); }
.station-hardware-pill { font-size: var(--st-fs-sm); }
.station-next-order small, .station-order-row small { font-size: var(--st-fs-md); }
.station-disclosure summary { font-size: var(--st-fs-md); }

.station-scale-compact { font-size: var(--st-fs-sm); }
.station-product-placeholder { font-size: var(--st-fs-sm); }
.station-weight-hint { font-size: var(--st-fs-sm); }
.station-scale-reading span { font-size: var(--st-fs-md); }
.station-box-choice span, .station-box-choice small, .station-route-choice span { font-size: var(--st-fs-sm); }
.station-selected-box span { font-size: var(--st-fs-sm); }
.station-field { font-size: var(--st-fs-md); }
.station-details span, .station-exception-actions small { font-size: var(--st-fs-sm); }
.packing-station-error { font-size: var(--st-fs-md); }
.station-hint { font-size: var(--st-fs-md); }
.station-history span { font-size: var(--st-fs-sm); }
.station-choice-banner { font-size: var(--st-fs-md); }
.station-line-checklist li { font-size: var(--st-fs-md); }
.station-line-mark { font-size: var(--st-fs-sm); }
.station-order-meta { font-size: var(--st-fs-md); }
.station-mode-badge { font-size: var(--st-fs-xs); }
.station-health-metrics > strong { font-size: var(--st-fs-md); }
.station-health-metric-strip { font-size: var(--st-fs-md); }
.station-health-breakdown > summary { font-size: var(--st-fs-sm); }
.station-health-breakdown-body > div > strong { font-size: var(--st-fs-sm); }
.station-health-dwell-row { font-size: var(--st-fs-xs); }
.station-health-code-list span { font-size: var(--st-fs-xs); }
.station-health-section > strong { font-size: var(--st-fs-md); }
.station-health-badge { font-size: var(--st-fs-xs); }
.station-health-subnote { font-size: var(--st-fs-sm); }
.station-health-flagged { font-size: var(--st-fs-sm); }
.station-health-flagged .station-reason-panel { font-size: var(--st-fs-md); }
.station-step small { font-size: var(--st-fs-xs); }
.station-progress-status { font-size: var(--st-fs-sm); }
.station-sticky-reading { font-size: var(--st-fs-sm); }
.station-toolbar-label { font-size: var(--st-fs-xs); }
.station-priority-button { font-size: var(--st-fs-sm); }
.station-priority-button strong { font-size: var(--st-fs-xs); }
.station-queue-section-label { font-size: var(--st-fs-xs); }
.station-recommended-label { font-size: var(--st-fs-xs); }
.station-queue-badge { font-size: var(--st-fs-xs); }
.station-queue-item-placeholder { font-size: var(--st-fs-sm); }
.station-queue-item strong { font-size: var(--st-fs-sm); }
.station-queue-item small { font-size: var(--st-fs-xs); }
.station-queue-more { font-size: var(--st-fs-xs); }
.station-order-card-contents { font-size: var(--st-fs-sm); }
.station-order-card > small, .station-order-card-main > small { font-size: var(--st-fs-sm); }
.station-health-summary { font-size: var(--st-fs-sm); }
.station-health-summary-ok { font-size: var(--st-fs-sm); }
.station-order-age { font-size: var(--st-fs-xs); }
.station-order-session-status { font-size: var(--st-fs-xs); }
.station-order-abandon-confirm { font-size: var(--st-fs-sm); }
.station-measurement-label { font-size: var(--st-fs-xs); }
.station-pickup-window { font-size: var(--st-fs-sm); }
.station-order-card--row .station-order-card-action { font-size: var(--st-fs-md); }
.station-step strong { font-size: var(--st-fs-md); }
.station-step-marker { font-size: var(--st-fs-sm); }
.packing-station-active .station-step-rail .station-scale-compact .btn { font-size: var(--st-fs-sm); }
.station-reprint .btn { font-size: var(--st-fs-sm); }
.station-reprint small { font-size: var(--st-fs-sm); }
.station-items-card h5 { font-size: var(--st-fs-xs); }
.station-items-card span { font-size: var(--st-fs-sm); }
.station-side .station-disclosure summary { font-size: var(--st-fs-md); }
.station-pick-escape .btn { font-size: var(--st-fs-sm); }
.station-pick-escape small { font-size: var(--st-fs-sm); }
.station-scale-reading .station-measurement-label { font-size: var(--st-fs-xs); }
@media (max-width: 480px) {
  .station-step strong { font-size: var(--st-fs-xs); }
}
.station-order-card-action { font-size: var(--st-fs-base, 15px); }
.station-order-card-heading > strong { font-size: calc(var(--st-fs-base, 15px) + 2px); }

/* Queue triage: order search, age urgency, and the shipping method the customer chose. */
.station-queue-toolbar { flex-wrap: wrap; row-gap: 10px; }
.station-queue-search { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; }
.station-queue-search input { width: 190px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--card-bg); color: var(--text-primary); font: inherit; font-size: var(--st-fs-base, 15px); }
.station-queue-search input:focus { border-color: var(--border-focus); outline: none; }
.station-age.is-late { color: var(--warn); font-weight: 700; }
.station-age.is-urgent { color: var(--btn-danger); font-weight: 700; }
.station-queue-badge.is-method { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--surface); color: var(--text-secondary); }
@media (max-width: 640px) { .station-queue-search { flex: 1 1 100%; margin-right: 0; } .station-queue-search input { flex: 1; width: auto; } }

/* Hardware status: scale and printer sit together in the step rail on every step, and a printer that
   is not ready is called out on the two steps that print. */
.station-rail-hardware { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; margin-left: auto; padding-left: 14px; border-left: 1px solid var(--border); }
.packing-station-active .station-step-rail .station-rail-hardware .station-scale-compact { flex: 0 0 auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
@media (max-width: 1180px) {
  .packing-station-active .station-step-rail .station-rail-hardware { flex: 1 0 100%; flex-wrap: wrap; margin: 4px 0 0; padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--border); }
}
.station-hardware-notice { margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid var(--warn); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warn) 12%, var(--card-bg)); color: var(--text-primary); font-size: var(--st-fs-sm, 14px); line-height: 1.45; }

/* Carrier and station error panels: the headline, the provider's message and the "what to do" line are
   three separate lines (they were running together: "...ups.express_saver.No label was purchased"). */
.packing-station-error > strong { display: block; }
.packing-station-error > br { display: none; }
.packing-station-error > span { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.packing-station-error > small { display: block; margin-top: 8px; font-size: var(--st-fs-sm, 14px); line-height: 1.45; }

/* "Ships to": a label above the address, not a four-line bold block pushed to the far edge. */
.station-address-summary { flex-direction: column; align-items: flex-start; gap: 4px; }
.station-address-summary > span { font-size: var(--st-fs-sm, 14px); }
.station-address-summary strong { text-align: left; font-size: var(--st-fs-base, 15px); font-weight: 600; line-height: 1.45; }

/* Settings: section jump links and collapsed rarely-used tools. */
.settings-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 18px; }
.settings-jump button { min-height: 32px; padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--card-bg); color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.settings-jump button:hover { border-color: var(--border-strong); color: var(--text-primary); }
.stacked-section[id] { scroll-margin-top: 16px; }
.settings-advanced > summary { cursor: pointer; padding: 4px 0; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.settings-advanced[open] > summary { margin-bottom: 8px; }
@media (hover: none) and (pointer: coarse) { .settings-jump button { min-height: 44px; } }

/* Shopify: each list owns its own pull and load-more controls, so the page
   header keeps one primary action. */
.shopify-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 24px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-color); }
.shopify-section-head .shopify-section-heading { margin: 0; padding: 0; border: 0; }
.shopify-list-more { display: flex; justify-content: center; }
.shopify-list-more > .btn { margin-top: 10px; }

/* While a PO or invoice is open, its own Save/Send is the page's primary
   action; the header's "New" button steps aside until the list returns. */
#panel-pos.is-record-open > .page-header > .btn-primary,
#panel-invoices.is-record-open > .page-header > .btn-primary { display: none; }

/* Inventory: status chips and a search box above the parts table. */
.inv-health-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 12px; }
.inv-health-toolbar .tasks-filter-bar { margin: 0; }
.inv-health-search { flex: 0 1 260px; min-width: 0; }
@media (max-width: 640px) { .inv-health-search { flex-basis: 100%; } }