/* ═══════════════════════════════════════════════════════════════
   APANG'S ONLINE — companion-theme.css  (V1.2 Admin Companion redesign)
   COMPANION ONLY. Everything is scoped under html[data-app="companion"],
   which only the companion page sets — the main storefront admin is never
   touched. Light is the base; [data-theme="dark"] flips it.

   Strategy: the admin panel is already tokenized (--op-*, --at-*, --s-*
   on :root). Redefining those tokens here (higher specificity than :root)
   re-themes ~everything for free. Below the tokens we re-skin the few
   HARD-CODED bits (the dark header, the grey sidebar, section tabs) and
   set the new fonts.
═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   1. TOKENS — LIGHT
──────────────────────────────────────────────────────────────── */
html[data-app="companion"] {
  /* orders / panels */
  --op-bg:            #f7f5f2;
  --op-surface:       #ffffff;
  --op-border:        #e7e2db;
  --op-border-subtle: #f0ece6;
  --op-text-primary:  #252220;
  --op-text-secondary:#6b6259;
  --op-text-muted:    #8a827b;
  --op-accent:        #a11c1e;
  --op-accent-light:  rgba(161,28,30,0.07);
  --op-accent-mid:    rgba(161,28,30,0.15);

  --s-received:#2563a8; --s-received-bg:#e7eef8; --s-received-border:#cfe0f4;
  --s-processing:#b7791f; --s-processing-bg:#fbf0d9; --s-processing-border:#f0dcae;
  --s-scheduled:#7c5cd6; --s-scheduled-bg:#efeafb; --s-scheduled-border:#ded3f6;
  --s-out_for_delivery:#0e8a9e; --s-out_for_delivery-bg:#e2f2f4; --s-out_for_delivery-border:#c2e4e8;
  --s-completed:#2f8f57; --s-completed-bg:#e6f4ec; --s-completed-border:#b9e2c9;
  --s-cancelled:#8a827b; --s-cancelled-bg:#f1ede8; --s-cancelled-border:#e7e2db;
  --s-pending:#b7791f;

  --op-shadow-sm: 0 1px 2px rgba(40,34,30,0.05);
  --op-shadow-md: 0 4px 14px -6px rgba(40,34,30,0.12);
  --op-shadow-lg: 0 16px 40px -16px rgba(40,34,30,0.22);
  --op-radius: 14px;
  --op-radius-lg: 20px;

  /* product tables */
  --at-bg:#f7f5f2; --at-surface:#ffffff; --at-border:#e7e2db; --at-border-sub:#f0ece6;
  --at-text:#252220; --at-text-2:#6b6259; --at-text-3:#8a827b;
  --at-accent:#a11c1e; --at-accent-bg:rgba(161,28,30,0.06);
  --at-green:#2f8f57; --at-green-bg:#e6f4ec;
  --at-amber:#b7791f; --at-amber-bg:#fbf0d9;
  --at-red:#c23b3b; --at-red-bg:#fbe9e9;
  --at-shadow:0 1px 2px rgba(40,34,30,0.05);

  /* companion extras */
  --cx-num:'Space Grotesk','Hanken Grotesk',system-ui,sans-serif;
  --cx-ui:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ────────────────────────────────────────────────────────────────
   2. TOKENS — DARK
──────────────────────────────────────────────────────────────── */
/* Neutral near-black — matches the main admin panel's dark mode
   (was a warm brown; retargeted to the same tokens as companion-plus.css
   so both apps read identically in dark). Status pill tints use alpha
   overlays so they never reintroduce a warm cast on the neutral surface. */
html[data-app="companion"][data-theme="dark"] {
  --op-bg:            #0e0e11;
  --op-surface:       #1a1a1f;
  --op-border:        #34343d;
  --op-border-subtle: #26262c;
  --op-text-primary:  #f5f5f7;
  --op-text-secondary:#c4c4cf;
  --op-text-muted:    #9a9aa6;
  --op-accent:        #f2555a;
  --op-accent-light:  rgba(242,85,90,0.13);
  --op-accent-mid:    rgba(242,85,90,0.24);

  --s-received:#6ea8e6; --s-received-bg:rgba(110,168,230,0.14); --s-received-border:rgba(110,168,230,0.36);
  --s-processing:#e0a94a; --s-processing-bg:rgba(224,169,74,0.14); --s-processing-border:rgba(224,169,74,0.36);
  --s-scheduled:#a98bec; --s-scheduled-bg:rgba(169,139,236,0.14); --s-scheduled-border:rgba(169,139,236,0.36);
  --s-out_for_delivery:#4fc0d0; --s-out_for_delivery-bg:rgba(79,192,208,0.14); --s-out_for_delivery-border:rgba(79,192,208,0.36);
  --s-completed:#4ec07f; --s-completed-bg:rgba(78,192,127,0.14); --s-completed-border:rgba(78,192,127,0.36);
  --s-cancelled:#9a9aa6; --s-cancelled-bg:rgba(154,154,166,0.14); --s-cancelled-border:rgba(154,154,166,0.34);
  --s-pending:#e0a94a;

  --op-shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --op-shadow-md: 0 4px 14px -6px rgba(0,0,0,0.5);
  --op-shadow-lg: 0 18px 44px -16px rgba(0,0,0,0.65);

  --at-bg:#0e0e11; --at-surface:#1a1a1f; --at-border:#34343d; --at-border-sub:#26262c;
  --at-text:#f5f5f7; --at-text-2:#c4c4cf; --at-text-3:#9a9aa6;
  --at-accent:#f2555a; --at-accent-bg:rgba(242,85,90,0.14);
  --at-green:#4ec07f; --at-green-bg:#14291d;
  --at-amber:#e0a94a; --at-amber-bg:#2c2410;
  --at-red:#f2555a; --at-red-bg:#341c1e;
  --at-shadow:0 1px 2px rgba(0,0,0,0.4);
}

/* ────────────────────────────────────────────────────────────────
   3. TYPOGRAPHY
──────────────────────────────────────────────────────────────── */
html[data-app="companion"] body,
html[data-app="companion"] .orders-shell,
html[data-app="companion"] #co-modal-inner,
html[data-app="companion"] .gallery-shell,
html[data-app="companion"] .admin-header,
html[data-app="companion"] input,
html[data-app="companion"] select,
html[data-app="companion"] textarea,
html[data-app="companion"] button {
  font-family: var(--cx-ui);
}
/* Tabular numerics for figures that get scanned */
html[data-app="companion"] .metric-value,
html[data-app="companion"] .order-row-id,
html[data-app="companion"] .order-row-total,
html[data-app="companion"] .order-row-discounted-total,
html[data-app="companion"] .co-cart-total,
html[data-app="companion"] .stk-now,
html[data-app="companion"] .dl-fee {
  font-family: var(--cx-num);
  letter-spacing: -0.01em;
}

/* ────────────────────────────────────────────────────────────────
   4. BASE SURFACES (hard-coded values the tokens don't reach)
──────────────────────────────────────────────────────────────── */
html[data-app="companion"] body { background: var(--op-bg); color: var(--op-text-primary); }
html[data-app="companion"] #admin-panel { background: var(--op-bg); }
html[data-app="companion"] .admin-item-list { background: var(--op-bg); }
html[data-app="companion"] .admin-content-area { background: var(--op-bg); }

/* ────────────────────────────────────────────────────────────────
   5. HEADER — from the heavy dark bar to light chrome
──────────────────────────────────────────────────────────────── */
html[data-app="companion"] .admin-header {
  background: var(--op-surface);
  border-bottom: 1px solid var(--op-border);
  box-shadow: none;
}
html[data-app="companion"] .admin-header-title { color: var(--op-text-primary); }
html[data-app="companion"] .admin-menu-toggle {
  background: var(--op-bg);
  border: 1px solid var(--op-border);
  color: var(--op-text-primary);
}
/* Mobile dropdown sheet + its buttons */
html[data-app="companion"] .admin-header-actions { background: var(--op-surface); border-top: 1px solid var(--op-border); box-shadow: var(--op-shadow-lg); }
html[data-app="companion"] .admin-gallery-btn,
html[data-app="companion"] .admin-crash-reports-btn {
  background: var(--op-bg);
  border: 1px solid var(--op-border);
  color: var(--op-text-primary);
}
html[data-app="companion"] .admin-close-btn {
  background: var(--op-accent);
  border: 1px solid var(--op-accent);
  color: #fff;
}

/* ────────────────────────────────────────────────────────────────
   6. SIDEBAR + SECTION / CATEGORY TABS — grey/black → clean chips
──────────────────────────────────────────────────────────────── */
html[data-app="companion"] .admin-sidebar { background: var(--op-surface); border-right-color: var(--op-border); border-bottom-color: var(--op-border); }
html[data-app="companion"] .admin-section-tabs,
html[data-app="companion"] .admin-cat-tabs { background: transparent; }
html[data-app="companion"] .admin-section-tab,
html[data-app="companion"] .admin-cat-tab {
  background: var(--op-surface);
  border: 1px solid var(--op-border);
  color: var(--op-text-secondary);
  box-shadow: none;
}
html[data-app="companion"] .admin-section-tab.active,
html[data-app="companion"] .admin-cat-tab.active {
  background: var(--op-accent);
  border-color: var(--op-accent);
  color: #fff;
  box-shadow: var(--op-shadow-sm);
}
html[data-app="companion"] .admin-cat-tab-add-btn {
  background: transparent; border: 1px dashed var(--op-border); color: var(--op-text-muted);
}
/* Delivery is not a product view — its "Build Your Box / Signature / Wholesale"
   section strip is just noise here (you reach Delivery from the Home hub and
   leave via the bottom nav). Hide the whole sidebar chrome on that section. */
html[data-app="companion"] #admin-panel[data-section="delivery-locations"] .admin-sidebar {
  display: none;
}

/* ────────────────────────────────────────────────────────────────
   7. PRODUCT CARDS (M7/M8) — retoken the hard-coded #fff / borders so
      they read correctly in dark mode
──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  html[data-app="companion"] #admin-item-list .at-table tbody tr.at-draggable-row,
  html[data-app="companion"] #admin-item-list .at-table tbody tr[id^="admin-row-cat-"] {
    background: var(--at-surface);
    border-color: var(--at-border);
    box-shadow: var(--op-shadow-sm);
  }
  html[data-app="companion"] #admin-item-list .at-table tbody tr.at-draggable-row.at-dirty,
  html[data-app="companion"] #admin-item-list .at-table tbody tr[id^="admin-row-cat-"].at-dirty {
    background: var(--at-amber-bg);
    border-color: var(--at-amber);
  }
  html[data-app="companion"] #admin-item-list .at-table tr.at-draggable-row td:nth-child(7),
  html[data-app="companion"] #admin-item-list .at-table tr[id^="admin-row-sp-"] td:nth-child(9),
  html[data-app="companion"] #admin-item-list .at-table tr[id^="admin-row-ws-"] td:nth-child(8),
  html[data-app="companion"] #admin-item-list .at-table tr[id^="admin-row-cat-"] td:nth-child(5) {
    border-top-color: var(--op-border-subtle) !important;
  }
}

/* Inputs / selects / textareas adopt themed surfaces */
html[data-app="companion"] .at-input,
html[data-app="companion"] .at-select,
html[data-app="companion"] .co-field-input,
html[data-app="companion"] .stk-now,
html[data-app="companion"] .cmp-field input {
  background: var(--op-surface);
  color: var(--op-text-primary);
  border-color: var(--op-border);
}
html[data-app="companion"] .stk-adjust { background: var(--op-surface); border-color: var(--op-border); }
html[data-app="companion"] .stk-step { background: var(--op-bg); }

/* ────────────────────────────────────────────────────────────────
   8. THEME TOGGLE control (injected into the header + shown on login)
──────────────────────────────────────────────────────────────── */
.cmp-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid var(--op-border, #e7e2db);
  background: var(--op-bg, #f7f5f2);
  color: var(--op-text-primary, #252220);
  cursor: pointer; padding: 0;
}
.cmp-theme-toggle .lucide, .cmp-theme-toggle svg { width: 20px; height: 20px; }
.cmp-theme-toggle .cx-sun { display: none; }
html[data-theme="dark"] .cmp-theme-toggle .cx-sun { display: inline-block; }
html[data-theme="dark"] .cmp-theme-toggle .cx-moon { display: none; }

/* ────────────────────────────────────────────────────────────────
   9. HOME HUB (redesign landing dashboard)
──────────────────────────────────────────────────────────────── */
.cmp-home {
  position: fixed; inset: 0; z-index: 1;
  background: var(--op-bg); color: var(--op-text-primary);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  font-family: var(--cx-ui);
  display: flex; flex-direction: column;
}
.cmp-home-inner {
  flex: 1;
  display: flex; flex-direction: column;
  padding: calc(16px + env(safe-area-inset-top)) 18px 8px;
  box-sizing: border-box;
}
.cmp-home-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cmp-home-hi { display: flex; align-items: center; gap: 11px; }
.cmp-home-mark { width: 40px; height: 40px; border-radius: 12px; background: var(--op-accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.cmp-home-mark svg { width: 21px; height: 21px; }
.cmp-home-greet { font-size: 12.5px; color: var(--op-text-muted); font-weight: 600; }
.cmp-home-brand { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }

.cmp-metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 16px 0 6px; }
.cmp-metric { background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 16px; padding: 13px 14px; }
.cmp-metric-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--op-text-muted); }
.cmp-metric-v { font-family: var(--cx-num); font-size: 24px; font-weight: 700; margin-top: 4px; line-height: 1; }
.cmp-metric-v.cmp-pos { color: var(--s-completed); }
.cmp-metric-v.cmp-accent { color: var(--op-accent); }
.cmp-metric-s { font-size: 11px; color: var(--op-text-muted); margin-top: 3px; }

.cmp-sec { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--op-text-muted); padding: 18px 2px 10px; }

.cmp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.cmp-tile {
  text-align: left; cursor: pointer; font-family: inherit;
  background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 18px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
  color: var(--op-text-primary);
}
.cmp-tile:active { transform: scale(0.985); }
.cmp-tile-top { display: flex; align-items: center; justify-content: space-between; }
.cmp-tile-ic { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; }
.cmp-tile-ic svg { width: 22px; height: 22px; }
.cmp-tile-title { font-size: 16px; font-weight: 700; }
.cmp-tile-sub { font-size: 12.5px; color: var(--op-text-muted); margin-top: 2px; }
.cmp-tile-badge { font-family: var(--cx-num); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }

.cmp-ic-red   { background: var(--op-accent-light); color: var(--op-accent); }
.cmp-ic-green { background: var(--s-completed-bg); color: var(--s-completed); }
.cmp-ic-blue  { background: var(--s-received-bg);  color: var(--s-received); }
.cmp-ic-amber { background: var(--s-processing-bg); color: var(--s-processing); }
.cmp-badge-red   { background: var(--op-accent); color: #fff; }
.cmp-badge-blue  { background: var(--s-received-bg); color: var(--s-received); }
.cmp-badge-amber { background: var(--s-processing-bg); color: var(--s-processing); }

.cmp-minis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.cmp-mini {
  cursor: pointer; font-family: inherit; color: var(--op-text-primary);
  background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 16px;
  padding: 14px 6px; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.cmp-mini:active { transform: scale(0.98); }
.cmp-mini-ic svg { width: 22px; height: 22px; color: var(--op-text-secondary); }
.cmp-mini-t { font-size: 11.5px; font-weight: 600; }

/* ── Empty Home (admin hid every section) ──────────────────────── */
.cmp-home-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px; padding: 40px 20px; color: var(--op-text-muted);
}
.cmp-home-empty-ic {
  width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: var(--op-surface); border: 1px solid var(--op-border); color: var(--op-text-secondary); margin-bottom: 4px;
}
.cmp-home-empty-ic svg { width: 26px; height: 26px; }
.cmp-home-empty-t { font-size: 17px; font-weight: 800; color: var(--op-text-primary); }
.cmp-home-empty-s { font-size: 13px; max-width: 240px; }
.cmp-home-empty-btn {
  margin-top: 12px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px;
  background: var(--op-accent); color: #fff; border: none; border-radius: 12px; padding: 11px 20px;
}
.cmp-home-empty-btn:active { transform: scale(0.98); }

/* ── Settings screen ───────────────────────────────────────────── */
.cmp-settings {
  position: fixed; inset: 0; z-index: 2;            /* above Home (1), below nav (10001) */
  background: var(--op-bg); color: var(--op-text-primary);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  font-family: var(--cx-ui); display: flex; flex-direction: column;
}
.cmp-set-inner {
  flex: 1; display: flex; flex-direction: column;
  padding: calc(14px + env(safe-area-inset-top)) 18px calc(var(--cmp-navh, 60px) + 16px);
  box-sizing: border-box;
}
.cmp-set-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cmp-set-title { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.cmp-set-intro { font-size: 13px; color: var(--op-text-secondary); line-height: 1.5; margin: 2px 0 6px; }
.cmp-set-sec {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--op-text-muted); padding: 14px 2px 8px;
}
.cmp-set-navcount { font-size: 11.5px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--op-text-secondary); }
.cmp-set-list { display: flex; flex-direction: column; gap: 8px; }
.cmp-set-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 16px; padding: 12px 14px;
}
.cmp-set-ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cmp-set-ic svg { width: 20px; height: 20px; }
.cmp-set-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cmp-set-t { font-size: 14.5px; font-weight: 700; }
.cmp-set-s { font-size: 12px; color: var(--op-text-muted); }
.cmp-set-toggles { display: flex; gap: 14px; flex-shrink: 0; }
.cmp-set-toggle { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cmp-set-toggle-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--op-text-muted); }
.cmp-switch-na { color: var(--op-text-muted); font-size: 15px; height: 26px; display: flex; align-items: center; }

/* Toggle switch */
.cmp-switch {
  position: relative; width: 44px; height: 26px; border-radius: 999px; cursor: pointer; padding: 0;
  border: 1px solid var(--op-border); background: var(--op-border-subtle); transition: background 0.15s, border-color 0.15s;
}
.cmp-switch-k {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.15s;
}
.cmp-switch.on { background: var(--op-accent); border-color: var(--op-accent); }
.cmp-switch.on .cmp-switch-k { transform: translateX(18px); }
.cmp-switch.disabled { opacity: 0.4; cursor: not-allowed; }

.cmp-set-actions { margin-top: 20px; }
.cmp-set-save {
  width: 100%; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 15px;
  background: var(--op-accent); color: #fff; border: none; border-radius: 14px; padding: 15px;
}
.cmp-set-save:active { transform: scale(0.99); }
.cmp-set-save:disabled { opacity: 0.6; cursor: default; }

/* Settings → Team link row + chevron */
.cmp-set-link { width: 100%; cursor: pointer; font-family: inherit; text-align: left; }
.cmp-set-chev { color: var(--op-text-muted); display: flex; align-items: center; }
.cmp-set-chev svg { width: 18px; height: 18px; }

/* ── Pending (awaiting approval) screen ────────────────────────── */
.cmp-pending {
  position: fixed; inset: 0; z-index: 3;
  background: var(--op-bg); color: var(--op-text-primary);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  font-family: var(--cx-ui);
}
.cmp-pending-card { max-width: 340px; text-align: center; }
.cmp-pending-ic {
  width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--s-processing-bg); color: var(--s-processing);
}
.cmp-pending-ic svg { width: 30px; height: 30px; }
.cmp-pending-t { font-size: 21px; font-weight: 800; margin: 0 0 8px; }
.cmp-pending-s { font-size: 14px; color: var(--op-text-secondary); line-height: 1.55; margin: 0 0 20px; }
.cmp-pending-btn {
  cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px;
  background: var(--op-surface); color: var(--op-text-primary);
  border: 1px solid var(--op-border); border-radius: 12px; padding: 11px 20px;
}

/* ── Team screen ───────────────────────────────────────────────── */
.cmp-team-loading { padding: 30px 4px; color: var(--op-text-muted); text-align: center; font-size: 14px; }
.cmp-team-list { display: flex; flex-direction: column; gap: 10px; }
.cmp-team-card {
  background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 16px; padding: 14px;
}
.cmp-team-head { display: flex; align-items: center; gap: 11px; }
.cmp-team-card .cmp-avatar {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--op-accent-light); color: var(--op-accent); font-weight: 800; font-size: 16px;
}
.cmp-team-id { flex: 1; min-width: 0; }
.cmp-team-name { font-size: 15px; font-weight: 700; }
.cmp-team-you { font-weight: 600; color: var(--op-text-muted); font-size: 12px; }
.cmp-team-email { font-size: 12.5px; color: var(--op-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cmp-role { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 4px 10px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.03em; }
.cmp-role-ok   { background: var(--s-completed-bg);  color: var(--s-completed); }
.cmp-role-warn { background: var(--s-processing-bg); color: var(--s-processing); }
.cmp-role-off  { background: var(--op-border-subtle); color: var(--op-text-muted); }

.cmp-team-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cmp-team-btn {
  cursor: pointer; font-family: inherit; font-weight: 700; font-size: 12.5px;
  background: var(--op-bg); color: var(--op-text-primary);
  border: 1px solid var(--op-border); border-radius: 10px; padding: 8px 14px;
}
.cmp-team-btn.ok  { background: var(--s-completed-bg);  color: var(--s-completed);  border-color: transparent; }
.cmp-team-btn.off { background: var(--op-accent-light); color: var(--op-accent);    border-color: transparent; }

/* Per-section access grid */
.cmp-acc-grid {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--op-border-subtle);
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px;
}
.cmp-acc-quick { grid-column: 1 / -1; display: flex; gap: 8px; margin-bottom: 2px; }
.cmp-acc-quick button {
  cursor: pointer; font-family: inherit; font-weight: 700; font-size: 12px;
  background: none; border: 1px solid var(--op-border); border-radius: 8px; padding: 6px 14px; color: var(--op-text-secondary);
}
.cmp-acc-chip {
  cursor: pointer; font-family: inherit; text-align: left;
  display: flex; align-items: center; gap: 8px;
  background: var(--op-bg); border: 1px solid var(--op-border); border-radius: 11px; padding: 9px 11px;
  color: var(--op-text-secondary); font-size: 13px; font-weight: 600;
}
.cmp-acc-chip svg { width: 17px; height: 17px; flex-shrink: 0; }
.cmp-acc-chip.on { background: var(--op-accent-light); border-color: var(--op-accent); color: var(--op-accent); }

/* Invite link box */
.cmp-invite-box {
  background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 14px; padding: 13px; margin-bottom: 12px;
  font-size: 13px; color: var(--op-text-secondary);
}
.cmp-invite-box.err { color: var(--op-accent); }
.cmp-invite-label { font-size: 11.5px; font-weight: 700; color: var(--op-text-muted); margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.03em; }
.cmp-invite-url {
  font-family: var(--cx-num, monospace); font-size: 12.5px; color: var(--op-text-primary);
  background: var(--op-bg); border: 1px solid var(--op-border-subtle); border-radius: 9px; padding: 9px 11px;
  word-break: break-all; margin-bottom: 10px;
}
.cmp-invite-actions { display: flex; gap: 8px; }
.cmp-invite-copy, .cmp-invite-wa {
  flex: 1; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px; border-radius: 10px; padding: 10px; border: none;
}
.cmp-invite-copy { background: var(--op-bg); color: var(--op-text-primary); border: 1px solid var(--op-border); }
.cmp-invite-wa   { background: #25d366; color: #04310f; }

/* ═══════════════════════════════════════════════════════════════
   CHAT — DMs + group channels
═══════════════════════════════════════════════════════════════ */
.cmp-chat-av {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--op-accent-light); color: var(--op-accent); font-weight: 800; font-size: 17px;
}
.cmp-chat-av.grp { background: var(--s-received-bg); color: var(--s-received); }
.cmp-chat-av.grp svg, .cmp-chat-av svg { width: 22px; height: 22px; }
.cmp-chat-av.sm { width: 36px; height: 36px; border-radius: 11px; font-size: 14px; }
.cmp-chat-av.sm svg { width: 18px; height: 18px; }

/* Conversation list */
.cmp-chat-list { display: flex; flex-direction: column; gap: 4px; }
.cmp-chat-conv {
  display: flex; align-items: center; gap: 12px; cursor: pointer; font-family: inherit; text-align: left;
  background: none; border: none; border-radius: 14px; padding: 10px 10px; color: var(--op-text-primary);
}
.cmp-chat-conv:active { background: var(--op-border-subtle); }
.cmp-chat-conv-mid { flex: 1; min-width: 0; }
.cmp-chat-conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cmp-chat-conv-name { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-chat-conv-time { font-size: 11.5px; color: var(--op-text-muted); flex-shrink: 0; }
.cmp-chat-conv-sub { font-size: 12.5px; color: var(--op-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-chat-conv.unread .cmp-chat-conv-name { font-weight: 800; }
.cmp-chat-conv.unread .cmp-chat-conv-sub { color: var(--op-text-secondary); font-weight: 600; }
.cmp-chat-badge {
  flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--op-accent); color: #fff; font-size: 11.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-family: var(--cx-num, inherit);
}

/* People picker (new chat / group) */
.cmp-chat-people { display: flex; flex-direction: column; gap: 4px; }
.cmp-chat-person {
  display: flex; align-items: center; gap: 12px; cursor: pointer; font-family: inherit; text-align: left; width: 100%;
  background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 13px; padding: 10px 12px; color: var(--op-text-primary);
}
.cmp-chat-person.on { border-color: var(--op-accent); background: var(--op-accent-light); }
.cmp-chat-person-id { flex: 1; min-width: 0; }
.cmp-chat-person-n { font-size: 14.5px; font-weight: 700; }
.cmp-chat-person-e { font-size: 12px; color: var(--op-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-chat-check { width: 22px; height: 22px; color: var(--op-accent); flex-shrink: 0; }
.cmp-chat-check svg { width: 22px; height: 22px; }

/* Thread view — fills the screen; composer pinned to the bottom */
.cmp-chat-thread {
  position: fixed; inset: 0; z-index: 10050;   /* above the fixed bottom nav (10001) so the composer isn't covered */
  display: flex; flex-direction: column;
  background: var(--op-bg); color: var(--op-text-primary); font-family: var(--cx-ui);
}
.cmp-chat-thead {
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  border-bottom: 1px solid var(--op-border); background: var(--op-surface);
}
.cmp-chat-thead-id { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.cmp-chat-thead-n { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-chat-thead-s { font-size: 12px; color: var(--op-text-muted); }
.cmp-chat-msgs {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 14px; display: flex; flex-direction: column; gap: 3px;
}
.cmp-chat-empty { margin: auto; color: var(--op-text-muted); font-size: 14px; }
.cmp-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 82%; margin-bottom: 4px; }
.cmp-msg.mine { align-self: flex-end; align-items: flex-end; }
.cmp-msg-name { font-size: 11.5px; font-weight: 700; color: var(--op-text-secondary); margin: 0 0 3px 4px; }
.cmp-msg-bubble {
  background: var(--op-surface); border: 1px solid var(--op-border);
  padding: 9px 13px; border-radius: 16px; border-bottom-left-radius: 5px;
  font-size: 14.5px; line-height: 1.4; word-break: break-word; white-space: pre-wrap;
}
.cmp-msg.mine .cmp-msg-bubble {
  background: var(--op-accent); color: #fff; border-color: var(--op-accent);
  border-radius: 16px; border-bottom-right-radius: 5px;
}
.cmp-msg-time { font-size: 10.5px; color: var(--op-text-muted); margin: 2px 6px 0; }
.cmp-chat-compose {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--op-border); background: var(--op-surface);
}
.cmp-chat-compose input {
  flex: 1; font-family: inherit; font-size: 15px; color: var(--op-text-primary);
  background: var(--op-bg); border: 1px solid var(--op-border); border-radius: 999px; padding: 11px 16px; outline: none;
}
.cmp-chat-compose input:focus { border-color: var(--op-accent); }
.cmp-chat-send {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--op-accent); color: #fff; display: flex; align-items: center; justify-content: center;
}
.cmp-chat-send svg { width: 20px; height: 20px; }
.cmp-chat-attach {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: var(--op-bg); color: var(--op-text-secondary); border: 1px solid var(--op-border);
  display: flex; align-items: center; justify-content: center;
}
.cmp-chat-attach svg { width: 20px; height: 20px; }
.cmp-chat-attach.busy { opacity: 0.5; pointer-events: none; }

/* Message attachments */
.cmp-msg-img {
  max-width: 220px; max-height: 260px; border-radius: 14px; display: block; cursor: pointer;
  object-fit: cover; background: var(--op-border-subtle); border: 1px solid var(--op-border);
}
.cmp-msg.mine .cmp-msg-img { margin-left: auto; }
.cmp-msg-file {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-family: inherit; max-width: 240px;
  background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 14px; padding: 11px 13px;
  color: var(--op-text-primary); font-size: 13.5px; font-weight: 600; text-align: left;
}
.cmp-msg.mine .cmp-msg-file { background: var(--op-accent); color: #fff; border-color: var(--op-accent); }
.cmp-msg-file svg { width: 20px; height: 20px; flex-shrink: 0; }
.cmp-msg-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Reactions */
.cmp-react-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; align-items: center; }
.cmp-msg.mine .cmp-react-row { justify-content: flex-end; }
.cmp-react {
  cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700;
  background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 999px; padding: 2px 9px; color: var(--op-text-primary);
}
.cmp-react.mine { background: var(--op-accent-light); border-color: var(--op-accent); color: var(--op-accent); }
.cmp-react-add { cursor: pointer; background: none; border: none; color: var(--op-text-muted); padding: 2px; display: inline-flex; opacity: 0.5; }
.cmp-react-add svg { width: 16px; height: 16px; }
.cmp-react-add:hover { opacity: 1; }
.cmp-react-pop {
  position: fixed; z-index: 10060; background: var(--op-surface); border: 1px solid var(--op-border);
  border-radius: 999px; box-shadow: var(--op-shadow-lg); padding: 6px 8px; display: flex; gap: 2px;
}
.cmp-react-pop button { cursor: pointer; background: none; border: none; font-size: 22px; padding: 4px 6px; border-radius: 50%; line-height: 1; }
.cmp-react-pop button:hover { background: var(--op-border-subtle); }

/* @mentions */
.cmp-mention { color: var(--op-accent); font-weight: 700; background: var(--op-accent-light); border-radius: 4px; padding: 0 3px; }
.cmp-msg.mine .cmp-mention { color: #fff; background: rgba(255,255,255,0.22); }
.cmp-chat-at { color: var(--op-accent); font-weight: 800; }
/* Typing indicator */
.cmp-typing { padding: 0 16px; font-size: 12px; color: var(--op-text-muted); font-style: italic; height: 0; overflow: hidden; transition: height 0.12s; }
.cmp-typing.on { height: 20px; padding-bottom: 2px; }

/* In-flow mention picker — sits directly above the compose box */
.cmp-mention-list { border-top: 1px solid var(--op-border); background: var(--op-surface); max-height: 210px; overflow-y: auto; }
.cmp-mention-item {
  display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; background: none; border: none;
  padding: 9px 14px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--op-text-primary); text-align: left;
}
.cmp-mention-item:active, .cmp-mention-item:hover { background: var(--op-border-subtle); }
.cmp-mention-item .cmp-chat-av { width: 30px; height: 30px; border-radius: 9px; font-size: 12px; }

/* Edit / delete a message */
.cmp-msg { position: relative; }
.cmp-msg-menu-btn {
  position: absolute; top: 2px; background: none; border: none; cursor: pointer;
  color: var(--op-text-muted); opacity: 0.5; padding: 2px;
}
.cmp-msg.mine .cmp-msg-menu-btn { left: -24px; }
.cmp-msg-menu-btn svg { width: 18px; height: 18px; }
.cmp-msg-menu-btn:hover { opacity: 1; }
.cmp-msg-bubble.deleted { font-style: italic; color: var(--op-text-muted); background: transparent; border-style: dashed; }
.cmp-msg.mine .cmp-msg-bubble.deleted { color: var(--op-text-muted); background: transparent; border: 1px dashed var(--op-border); }
.cmp-msg-edited { font-size: 10.5px; color: var(--op-text-muted); }

.cmp-msg-menu {
  position: fixed; z-index: 10060; background: var(--op-surface); border: 1px solid var(--op-border);
  border-radius: 12px; box-shadow: var(--op-shadow-lg); padding: 5px; min-width: 130px; display: flex; flex-direction: column;
}
.cmp-msg-menu button {
  cursor: pointer; background: none; border: none; text-align: left; font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 10px 12px; border-radius: 8px; color: var(--op-text-primary);
}
.cmp-msg-menu button:hover { background: var(--op-border-subtle); }
.cmp-msg-menu button.danger { color: var(--op-accent); }

.cmp-msg-edit { display: flex; flex-direction: column; gap: 8px; max-width: 86vw; }
.cmp-msg-edit input {
  font-family: inherit; font-size: 14.5px; color: var(--op-text-primary);
  background: var(--op-bg); border: 1px solid var(--op-accent); border-radius: 14px; padding: 9px 13px; outline: none; min-width: 200px;
}
.cmp-msg-edit-actions { display: flex; gap: 8px; justify-content: flex-end; }
.cmp-msg-edit-actions button {
  cursor: pointer; font-family: inherit; font-weight: 700; font-size: 12.5px; border-radius: 9px; padding: 7px 14px; border: 1px solid var(--op-border); background: var(--op-bg); color: var(--op-text-primary);
}
.cmp-msg-edit-actions button[type="submit"] { background: var(--op-accent); color: #fff; border-color: var(--op-accent); }

/* ── Avatars + presence (shared) ───────────────────────────────── */
.cmp-avatar {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--op-accent-light); color: var(--op-accent); font-weight: 800; font-size: 16px;
}
.cmp-avatar.md { width: 44px; height: 44px; border-radius: 13px; }
.cmp-avatar.xl { width: 96px; height: 96px; border-radius: 28px; font-size: 38px; }
.cmp-av-img { background-size: cover; background-position: center; color: transparent; }

.cmp-avwrap { position: relative; display: inline-flex; flex-shrink: 0; }
.cmp-pres {
  position: absolute; bottom: -1px; right: -1px; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid var(--op-bg); box-sizing: border-box;
}
.cmp-pres.on  { background: #2f8f57; }
.cmp-pres.off { background: var(--op-text-muted); opacity: 0.55; }
/* On surfaces (cards) the dot ring should match the card, not the page */
.cmp-team-card .cmp-pres, .cmp-chat-person .cmp-pres { border-color: var(--op-surface); }

/* Clickable home mark (opens profile) */
.cmp-home-mark { border: none; padding: 0; cursor: pointer; font: inherit; overflow: hidden; }

/* ── Profile screen ────────────────────────────────────────────── */
.cmp-prof-top { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0 20px; }
.cmp-prof-avbtn { position: relative; border: none; background: none; cursor: pointer; padding: 0; }
.cmp-prof-cam {
  position: absolute; bottom: -2px; right: -2px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--op-accent); color: #fff; display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--op-bg);
}
.cmp-prof-cam svg { width: 15px; height: 15px; }
.cmp-prof-cam.busy { opacity: 0.5; }
.cmp-prof-email { font-size: 13px; color: var(--op-text-muted); }

/* Notifications toggle (Profile) */
.cmp-notif-btn {
  width: 100%; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px;
  background: var(--op-surface); color: var(--op-text-primary); border: 1px solid var(--op-border);
  border-radius: 13px; padding: 13px;
}
.cmp-notif-btn.on { background: var(--s-completed-bg); color: var(--s-completed); border-color: transparent; }
.cmp-notif-btn.off { color: var(--op-text-muted); }
.cmp-notif-btn:disabled { cursor: default; opacity: 0.8; }

/* Muted conversation cues */
.cmp-theme-toggle.muted { color: var(--op-accent); }
.cmp-chat-muted-ic { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--op-text-muted); }
.cmp-chat-muted-ic svg { width: 14px; height: 14px; }

/* ── Unread count badge (Home tile + bottom nav) ───────────────── */
.cmp-nav-item { position: relative; }
.cmp-chat-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--op-accent); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--cx-num, inherit);
}
.cmp-nav-badge { position: absolute; top: 2px; left: calc(50% + 3px); }

.cmp-nav {
  position: sticky; bottom: 0;
  display: flex; justify-content: space-around; align-items: center;
  background: var(--op-surface); border-top: 1px solid var(--op-border);
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
}
.cmp-nav-item {
  background: none; border: none; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--op-text-muted); padding: 4px 10px;
}
.cmp-nav-item svg { width: 23px; height: 23px; }
.cmp-nav-item span { font-size: 11px; font-weight: 600; }
.cmp-nav-item.active { color: var(--op-accent); }
.cmp-nav-item.active span { font-weight: 700; }

/* Persistent (fixed) bottom nav — above every panel/overlay */
html[data-app="companion"] { --cmp-navh: calc(60px + env(safe-area-inset-bottom)); }
.cmp-nav-fixed {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 10001;              /* above overlays (900) + admin panel (500) */
  box-shadow: 0 -6px 20px -12px rgba(0,0,0,0.35);
}
/* Reserve space so content / sticky footers never hide behind the nav */
html[data-app="companion"] .cmp-home-inner { padding-bottom: calc(var(--cmp-navh) + 8px); }
html[data-app="companion"] #orders-overlay .orders-shell,
html[data-app="companion"] #stock-management-overlay .orders-shell,
html[data-app="companion"] #invoices-overlay .orders-shell,
html[data-app="companion"] #finance-overlay .orders-shell,
html[data-app="companion"] #discount-codes-overlay .orders-shell,
html[data-app="companion"] #driver-fees-overlay .orders-shell,
html[data-app="companion"] #transfer-receipts-overlay .orders-shell,
html[data-app="companion"] #crash-reports-overlay .orders-shell,
html[data-app="companion"] .gallery-shell,
html[data-app="companion"] #co-modal-inner {
  padding-bottom: var(--cmp-navh);
  box-sizing: border-box;
}
html[data-app="companion"] #admin-panel > main { padding-bottom: var(--cmp-navh); box-sizing: border-box; }

/* ────────────────────────────────────────────────────────────────
   10. PER-SCREEN POLISH — carry the mockup detailing to every panel
   (rounded pills, pill tabs, themed pipeline ring, chunkier steppers,
   softer buttons). All scoped to the companion; colour comes from the
   theme tokens so it works light + dark.
──────────────────────────────────────────────────────────────── */

/* Pills & badges → fully rounded */
html[data-app="companion"] .status-badge,
html[data-app="companion"] .at-badge,
html[data-app="companion"] .dc-chip,
html[data-app="companion"] .scheduled-date-pill,
html[data-app="companion"] .discount-badge,
html[data-app="companion"] .tab-count { border-radius: 999px; }
html[data-app="companion"] .status-badge { padding: 4px 11px; font-weight: 700; }
html[data-app="companion"] .at-badge { padding: 7px 13px; }

/* Pipeline: theme the active ring (was a hard-coded red rgba) */
html[data-app="companion"] .ps-step.active .ps-step-dot {
  box-shadow: 0 0 0 4px var(--op-accent-light);
}

/* Panel nav tabs → pill chips (Orders/Stock/Invoices/Finance tabs) */
html[data-app="companion"] .orders-nav { gap: 8px; border-bottom-color: var(--op-border); }
html[data-app="companion"] .orders-nav-tab {
  border-radius: 999px;
  padding: 8px 14px;
  border: 1px solid var(--op-border);
  margin-bottom: 8px;
}
html[data-app="companion"] .orders-nav-tab.active {
  background: var(--op-accent);
  border-color: var(--op-accent);
  color: #fff;
}
html[data-app="companion"] .orders-nav-tab.active .tab-count {
  background: rgba(255,255,255,0.25); color: #fff;
}

/* Create-order section tabs → pill chips */
html[data-app="companion"] .co-section-tabs { gap: 8px; }
html[data-app="companion"] .co-section-tab {
  border-radius: 999px;
  padding: 9px 15px;
  border: 1px solid var(--op-border);
  margin-bottom: 0;
}
html[data-app="companion"] .co-section-tab.active {
  background: var(--op-accent);
  border-color: var(--op-accent);
  color: #fff;
}
/* Create-order category buttons → soft chips */
html[data-app="companion"] .co-cat-btn { border-radius: 999px; }
html[data-app="companion"] .co-cat-btn.active { background: var(--op-accent-light); color: var(--op-accent); }

/* Create-order quantity steppers → round, chunkier */
html[data-app="companion"] .co-qty-btn {
  width: 38px; height: 38px; border-radius: 12px; font-size: 1.2rem;
}
html[data-app="companion"] .co-product-card { border-radius: 16px; }

/* Stock stepper: rounder shell */
html[data-app="companion"] .stk-adjust { border-radius: 14px; }

/* Buttons → softer corners everywhere in the companion */
html[data-app="companion"] .orders-header-close,
html[data-app="companion"] .orders-create-btn,
html[data-app="companion"] .op-advance-btn,
html[data-app="companion"] .co-proceed-btn,
html[data-app="companion"] .co-place-btn,
html[data-app="companion"] .co-close-btn,
html[data-app="companion"] .co-back-btn,
html[data-app="companion"] .stock-btn,
html[data-app="companion"] .dl-btn,
html[data-app="companion"] .at-add-btn { border-radius: 11px; }

/* Metric cards + section headers a touch roomier */
html[data-app="companion"] .metric-card { border-radius: var(--op-radius); padding: 15px 16px; }
html[data-app="companion"] .orders-metrics { gap: 11px; }

/* Shell header icon squares rounder to match the hub */
html[data-app="companion"] .orders-header-icon,
html[data-app="companion"] .co-header-icon,
html[data-app="companion"] .gallery-header-icon { border-radius: 12px; }

/* Search fields → pill-ish, themed surface */
html[data-app="companion"] #orders-search-input,
html[data-app="companion"] #inv-search-input,
html[data-app="companion"] #addon-search-input {
  border-radius: 12px !important;
  background: var(--op-surface) !important;
  color: var(--op-text-primary) !important;
  border-color: var(--op-border) !important;
}

/* ────────────────────────────────────────────────────────────────
   11. ORDER CARD LAYOUT — match the mockup structure
   The order row is an 8-cell table row (check/id/customer/items/value/
   pipeline/status/actions). Re-lay it as the mockup: order# top-left with
   the status pill top-right, customer with the total right-aligned beside
   it, item chips, pipeline, then a compact action grid. CSS-only (no JS),
   companion-only.
──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  html[data-app="companion"] #orders-overlay .orders-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "id     status"
      "cust   value"
      "items  items"
      "pipe   pipe"
      "actions actions";
    column-gap: 12px;
    row-gap: 10px;
    align-items: start;
    padding: 15px 15px 13px;
  }
  /* batch checkbox: hidden on the companion card (batch-select is a desktop
     power feature; the mockup has none) */
  html[data-app="companion"] #orders-overlay .order-col-check { display: none; }

  html[data-app="companion"] #orders-overlay .orders-table td { padding: 0 !important; }
  html[data-app="companion"] #orders-overlay .orders-table td:nth-child(2) { grid-area: id; padding-right: 0 !important; }
  html[data-app="companion"] #orders-overlay .orders-table td:nth-child(3) { grid-area: cust; min-width: 0; display: flex; gap: 11px; align-items: flex-start; }
  html[data-app="companion"] #orders-overlay .cmp-avatar {
    flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 11px;
    background: var(--op-bg); border: 1px solid var(--op-border);
    color: var(--op-text-secondary); font-weight: 800; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
  }
  html[data-app="companion"] #orders-overlay .cmp-cust-text { flex: 1; min-width: 0; }
  html[data-app="companion"] #orders-overlay .orders-table td:nth-child(4) { grid-area: items; }
  html[data-app="companion"] #orders-overlay .orders-table td:nth-child(5) { grid-area: value; justify-self: end; text-align: right; }
  html[data-app="companion"] #orders-overlay .orders-table td:nth-child(6) { grid-area: pipe; }
  html[data-app="companion"] #orders-overlay .orders-table td:nth-child(7) { grid-area: status; justify-self: end; }

  /* Header row: bigger order id, status pill aligned to its top */
  html[data-app="companion"] #orders-overlay .order-row-id { font-size: 1rem; }
  html[data-app="companion"] #orders-overlay .order-row-date { margin-top: 4px; }
  /* Prominent total */
  html[data-app="companion"] #orders-overlay .order-row-total { font-size: 1.15rem; font-weight: 700; }
  html[data-app="companion"] #orders-overlay .order-row-payment,
  html[data-app="companion"] #orders-overlay .order-row-type { margin-top: 2px; }

  /* Actions: compact grid — primary "Move Stage/Confirm" full width, the rest 2-up */
  html[data-app="companion"] #orders-overlay .order-actions-cell { grid-area: actions; padding-top: 12px !important; margin-top: 4px; border-top: 1px solid var(--op-border-subtle); }
  html[data-app="companion"] #orders-overlay .op-action-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  html[data-app="companion"] #orders-overlay .op-action-group .op-advance-btn {
    flex: none !important;
    min-width: 0 !important;
    width: 100%;
    margin: 0 !important;
    padding: 11px 10px !important;
  }
  /* Primary stage button spans the full width, on top */
  html[data-app="companion"] #orders-overlay .op-action-group .btn-advance {
    grid-column: 1 / -1;
    background: var(--op-accent) !important;
    border-color: var(--op-accent) !important;
    color: #fff !important;
  }
  /* A lone "Terminal/Fulfilled" text label shouldn't sit in a button cell */
  html[data-app="companion"] #orders-overlay .op-action-group > span { grid-column: 1 / -1; align-self: center; }
}

/* ────────────────────────────────────────────────────────────────
   12. PRODUCT EDIT CARD (Build Your Box) — cleaner layout
   Image beside the name, a corner remove button, price row, in-stock /
   visible toggles, then a clear labelled Save / Delete row. Build rows
   only (specialty/wholesale keep their own column rules).
──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  html[data-app="companion"] #admin-item-list .at-table tr.at-draggable-row:not([id^="admin-row-sp-"]):not([id^="admin-row-ws-"]) {
    display: grid;
    grid-template-columns: 92px 1fr;
    grid-template-areas:
      "img   name"
      "price price"
      "stock vis"
      "act   act";
    column-gap: 14px;
    row-gap: 12px;
    align-items: start;
    padding: 16px;
  }
  /* width:auto !important is REQUIRED — every product-row <td> carries an inline
     width (28/54/100/90/80px) that would otherwise crush the grid cells (the
     actions cell was stuck at 90px, cramming Save/Delete together). */
  html[data-app="companion"] #admin-item-list .at-table tr.at-draggable-row:not([id^="admin-row-sp-"]):not([id^="admin-row-ws-"]) td { padding: 0 !important; margin: 0 !important; border: none !important; width: auto !important; }

  html[data-app="companion"] #admin-item-list .at-table tr.at-draggable-row:not([id^="admin-row-sp-"]):not([id^="admin-row-ws-"]) td:nth-child(2) { grid-area: img; position: relative; width: auto; }
  html[data-app="companion"] #admin-item-list .at-table tr.at-draggable-row:not([id^="admin-row-sp-"]):not([id^="admin-row-ws-"]) td:nth-child(3) { grid-area: name; }
  html[data-app="companion"] #admin-item-list .at-table tr.at-draggable-row:not([id^="admin-row-sp-"]):not([id^="admin-row-ws-"]) td:nth-child(4) { grid-area: price; }
  html[data-app="companion"] #admin-item-list .at-table tr.at-draggable-row:not([id^="admin-row-sp-"]):not([id^="admin-row-ws-"]) td:nth-child(5) { grid-area: stock; display: block; width: auto; }
  html[data-app="companion"] #admin-item-list .at-table tr.at-draggable-row:not([id^="admin-row-sp-"]):not([id^="admin-row-ws-"]) td:nth-child(6) { grid-area: vis; display: block; width: auto; justify-self: end; }
  html[data-app="companion"] #admin-item-list .at-table tr.at-draggable-row:not([id^="admin-row-sp-"]):not([id^="admin-row-ws-"]) td:nth-child(7) { grid-area: act; }

  /* Square rounded thumbnail filling the image column */
  html[data-app="companion"] #admin-item-list .at-thumb,
  html[data-app="companion"] #admin-item-list .at-thumb-empty {
    width: 92px !important; height: 92px !important; border-radius: 12px;
  }
  /* Remove-image "×" → small round button on the thumb corner (was a wide bar) */
  html[data-app="companion"] #admin-item-list .at-img-remove-btn {
    position: absolute; top: 5px; right: 5px;
    width: 24px; height: 24px; margin: 0 !important; padding: 0;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.55); color: #fff; border: none; font-size: 12px;
  }

  /* Stock / Visibility as clear, larger toggle pills */
  html[data-app="companion"] #admin-item-list .at-draggable-row .at-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 9px 14px; font-size: 0.82rem;
  }

  /* Labelled Save (primary) + Delete (outline) buttons */
  html[data-app="companion"] #admin-item-list .at-actions-cell { display: flex; gap: 10px; }
  html[data-app="companion"] #admin-item-list .at-act-btn { flex: 1; height: 46px; border-radius: 12px; font-weight: 700; }
  html[data-app="companion"] #admin-item-list .at-act-btn.save {
    background: var(--op-accent); border-color: var(--op-accent); color: #fff;
  }
  html[data-app="companion"] #admin-item-list .at-act-btn.save::after { content: "Save"; margin-left: 7px; font-size: 0.9rem; }
  html[data-app="companion"] #admin-item-list .at-act-btn.del { background: transparent; }
  html[data-app="companion"] #admin-item-list .at-act-btn.del::after { content: "Delete"; margin-left: 7px; font-size: 0.9rem; }
}

/* ══════════════════════════════════════════════════════════════════
   TASKS — shared team activities board (admin-tasks.js)
════════════════════════════════════════════════════════════════════ */
/* #cmp-tasks reuses the shared .cmp-settings full-screen shell; nothing extra needed here. */

/* Add-an-activity row */
.cmp-task-add { display: flex; gap: 8px; margin: 4px 0 10px; }
.cmp-task-inp {
  flex: 1; min-width: 0; font-family: inherit; font-size: 14.5px;
  background: var(--op-surface); color: var(--op-text-primary);
  border: 1px solid var(--op-border); border-radius: 14px; padding: 13px 15px; outline: none;
}
.cmp-task-inp:focus { border-color: var(--op-accent); }
.cmp-task-inp::placeholder { color: var(--op-text-muted); }
.cmp-task-add-btn {
  flex-shrink: 0; width: 46px; border: none; cursor: pointer; border-radius: 14px;
  background: var(--op-accent); color: #fff; display: flex; align-items: center; justify-content: center;
}
.cmp-task-add-btn svg { width: 20px; height: 20px; }
.cmp-task-add-btn:active { transform: scale(0.97); }

/* Assign-before-create selector */
.cmp-task-newassign { margin: -4px 0 12px; }
.cmp-task-newassign-btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; color: var(--op-text-secondary);
  background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 999px; padding: 6px 12px 6px 8px;
}
.cmp-task-newassign-btn.on { color: var(--op-accent); border-color: var(--op-accent); }
.cmp-task-newassign-btn > svg { width: 17px; height: 17px; }
.cmp-task-newassign-btn .cmp-task-av { width: 22px; height: 22px; font-size: 11px; }
.cmp-task-caret { display: inline-flex; opacity: 0.6; }
.cmp-task-caret svg { width: 15px; height: 15px; }
.cmp-task-picker-new {
  margin-top: 8px; border-top: none; padding-top: 0;
  background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 14px; padding: 6px;
}

/* Filter chips */
.cmp-task-filters { display: flex; gap: 8px; margin-bottom: 12px; }
.cmp-task-chip {
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: var(--op-surface); color: var(--op-text-secondary);
  border: 1px solid var(--op-border); border-radius: 999px; padding: 8px 14px;
}
.cmp-task-chip.on { background: var(--op-accent); border-color: var(--op-accent); color: #fff; }
.cmp-task-chip-n { opacity: 0.7; font-size: 11.5px; }
.cmp-task-chip.on .cmp-task-chip-n { opacity: 0.9; }

/* Cards */
.cmp-task-list { display: flex; flex-direction: column; gap: 8px; }
.cmp-task-card {
  background: var(--op-surface); border: 1px solid var(--op-border);
  border-radius: 16px; padding: 12px 14px; transition: background 0.15s, border-color 0.15s;
}
.cmp-task-card.is-done { background: var(--at-green-bg); border-color: var(--at-green); }
.cmp-task-row { display: flex; align-items: flex-start; gap: 12px; }

.cmp-task-box {
  flex-shrink: 0; width: 26px; height: 26px; margin-top: 1px; cursor: pointer; padding: 0;
  border: 2px solid var(--op-border); border-radius: 8px; background: var(--op-bg);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background 0.15s, border-color 0.15s;
}
.cmp-task-box svg { width: 16px; height: 16px; }
.cmp-task-box.done { background: var(--at-green); border-color: var(--at-green); }
.cmp-task-box.locked { opacity: 0.45; cursor: not-allowed; }
.cmp-task-box:disabled { opacity: 0.5; cursor: default; }

.cmp-task-main { flex: 1; min-width: 0; }
.cmp-task-title { font-size: 15px; font-weight: 700; line-height: 1.35; word-break: break-word; }
.cmp-task-card.is-done .cmp-task-title { text-decoration: line-through; color: var(--op-text-secondary); }
.cmp-task-meta { font-size: 12px; color: var(--op-text-muted); margin-top: 3px; }

.cmp-task-av {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--op-accent); color: #fff; font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.cmp-task-assignee { flex-shrink: 0; margin-top: 1px; }

.cmp-task-actions { display: flex; gap: 4px; flex-shrink: 0; margin-top: -2px; }
.cmp-task-mini {
  width: 34px; height: 34px; border: none; background: none; cursor: pointer; border-radius: 9px;
  color: var(--op-text-muted); display: flex; align-items: center; justify-content: center;
}
.cmp-task-mini svg { width: 18px; height: 18px; }
.cmp-task-mini:active { background: var(--op-border-subtle); }
.cmp-task-mini.on { color: var(--op-accent); }
.cmp-task-mini.danger:active { color: var(--at-red); }
.cmp-task-mini:disabled { opacity: 0.5; cursor: default; }

/* Inline assignee picker */
.cmp-task-picker {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--op-border);
  display: flex; flex-direction: column; gap: 4px;
}
.cmp-task-picker-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--op-text-muted); padding: 2px 2px 4px; }
.cmp-task-pick {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font-family: inherit; font-size: 14px; cursor: pointer; color: var(--op-text-primary);
  background: none; border: none; border-radius: 10px; padding: 8px 8px;
}
.cmp-task-pick:active { background: var(--op-border-subtle); }
.cmp-task-pick.on { color: var(--op-accent); font-weight: 700; }
.cmp-task-pick-tick { margin-left: auto; display: inline-flex; color: var(--op-accent); }
.cmp-task-pick-tick svg { width: 16px; height: 16px; }
.cmp-task-pick.clear { color: var(--op-text-secondary); font-size: 13px; justify-content: center; margin-top: 2px; }

/* Empty state */
.cmp-task-empty { text-align: center; color: var(--op-text-muted); padding: 40px 10px; font-size: 14px; }
.cmp-task-empty svg { width: 34px; height: 34px; opacity: 0.5; margin-bottom: 8px; }

/* ══════════════════════════════════════════════════════════════════
   REMINDERS — custom calendar + due popup (admin-reminders.js)
════════════════════════════════════════════════════════════════════ */
.cmp-cal { background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 18px; padding: 12px 12px 14px; margin-bottom: 14px; }
.cmp-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cmp-cal-title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.cmp-cal-nav {
  width: 36px; height: 36px; border: none; cursor: pointer; border-radius: 10px;
  background: var(--op-border-subtle); color: var(--op-text-primary);
  display: flex; align-items: center; justify-content: center;
}
.cmp-cal-nav svg { width: 18px; height: 18px; }
.cmp-cal-nav:active { transform: scale(0.95); }

.cmp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cmp-cal-dows { margin-bottom: 4px; }
.cmp-cal-dow { text-align: center; font-size: 11px; font-weight: 800; color: var(--op-text-muted); padding: 2px 0; }

.cmp-cal-cell {
  position: relative; aspect-ratio: 1 / 1; border: none; cursor: pointer; padding: 0;
  background: none; color: var(--op-text-primary); border-radius: 11px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: inherit;
}
.cmp-cal-cell.empty { pointer-events: none; }
.cmp-cal-cell:active { background: var(--op-border-subtle); }
.cmp-cal-num { font-size: 14px; font-weight: 600; line-height: 1; }
.cmp-cal-cell.today .cmp-cal-num { color: var(--op-accent); font-weight: 800; }
.cmp-cal-cell.sel { background: var(--op-accent); }
.cmp-cal-cell.sel .cmp-cal-num { color: #fff; font-weight: 800; }
.cmp-cal-cell.sel.today .cmp-cal-num { color: #fff; }
.cmp-cal-dots { display: flex; gap: 2px; height: 4px; }
.cmp-cal-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--at-amber); }
.cmp-cal-cell.sel .cmp-cal-dot { background: #fff; }

/* Day panel */
.cmp-rem-dayhead { font-size: 14px; font-weight: 800; margin: 4px 2px 10px; }
.cmp-rem-list { display: flex; flex-direction: column; gap: 8px; }
.cmp-rem-none { color: var(--op-text-muted); font-size: 13.5px; padding: 6px 2px 10px; }
.cmp-rem-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 14px; padding: 11px 13px;
}
.cmp-rem-card.past { opacity: 0.55; }
.cmp-rem-time { font-size: 13px; font-weight: 800; color: var(--op-accent); white-space: nowrap; padding-top: 1px; min-width: 62px; }
.cmp-rem-main { flex: 1; min-width: 0; }
.cmp-rem-title { font-size: 14.5px; font-weight: 700; word-break: break-word; }
.cmp-rem-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.cmp-rem-tag { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 999px; }
.cmp-rem-tag.pub { background: var(--at-green-bg); color: var(--at-green); }
.cmp-rem-tag.priv { background: var(--op-border-subtle); color: var(--op-text-muted); }
.cmp-rem-by { font-size: 11.5px; color: var(--op-text-muted); }

/* Add form */
.cmp-rem-add { margin-top: 16px; display: flex; flex-direction: column; gap: 10px;
  background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 16px; padding: 14px; }
.cmp-rem-add-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--op-text-muted); }
.cmp-rem-time-row { display: flex; align-items: center; gap: 8px; }
.cmp-rem-sel {
  font-family: inherit; font-size: 15px; font-weight: 700; color: var(--op-text-primary);
  background: var(--op-bg); border: 1px solid var(--op-border); border-radius: 11px; padding: 11px 12px; cursor: pointer;
}
.cmp-rem-colon { font-weight: 800; color: var(--op-text-muted); }
.cmp-rem-ap { display: flex; gap: 4px; margin-left: auto; background: var(--op-bg); border: 1px solid var(--op-border); border-radius: 11px; padding: 3px; }
.cmp-rem-ap-btn {
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border: none;
  background: none; color: var(--op-text-muted); border-radius: 8px; padding: 8px 12px;
}
.cmp-rem-ap-btn.on { background: var(--op-accent); color: #fff; }
.cmp-rem-vis { display: flex; gap: 8px; }
.cmp-rem-vis-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; color: var(--op-text-secondary);
  background: var(--op-bg); border: 1px solid var(--op-border); border-radius: 12px; padding: 11px;
}
.cmp-rem-vis-btn svg { width: 17px; height: 17px; }
.cmp-rem-vis-btn.on { border-color: var(--op-accent); color: var(--op-accent); background: var(--op-accent-subtle, var(--op-border-subtle)); }
.cmp-rem-vis-hint { font-size: 12px; color: var(--op-text-muted); line-height: 1.45; }

/* Due popup (in-app, above everything) */
.cmp-rem-popup { position: fixed; inset: 0; z-index: 11000; display: flex; align-items: center; justify-content: center; padding: 22px; }
.cmp-rem-pop-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.cmp-rem-pop {
  position: relative; width: 100%; max-width: 340px; text-align: center;
  background: var(--op-surface); border: 1px solid var(--op-border); border-radius: 22px; padding: 26px 22px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35); animation: cmpRemPop 0.18s ease-out;
}
@keyframes cmpRemPop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cmp-rem-pop-ic {
  width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--at-amber-bg); color: var(--at-amber);
  display: flex; align-items: center; justify-content: center;
}
.cmp-rem-pop-ic svg { width: 26px; height: 26px; }
.cmp-rem-pop-l { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--op-text-muted); }
.cmp-rem-pop-t { font-size: 19px; font-weight: 800; margin: 5px 0 4px; line-height: 1.25; word-break: break-word; }
.cmp-rem-pop-time { font-size: 13px; color: var(--op-text-secondary); margin-bottom: 18px; }