:root{
  --bg:#F3F6FA;
  --surface:#FFFFFF;
  --surface-2:#F8FAFD;
  --border:#DCE4EE;
  --text:#071B37;
  --text-muted:#566783;
  --brand:#1479C4;
  --brand-strong:#0B4F8A;
  --brand-soft:#E5F1FB;
  --logo-blue:#1689D9;
  --accent:#D9820F;
  --accent-soft:#FEF1DC;
  --status-lead:#6A4FBF;
  --status-lead-soft:#EEE9FA;
  --status-active:#1E8F72;
  --status-active-soft:#E3F5EF;
  --status-vip:#B5791F;
  --status-vip-soft:#FEF1DC;
  --status-inactive:#66728A;
  --status-inactive-soft:#EBEEF4;
  --danger:#AD4230;
  --danger-soft:#F7E7E2;
  --focus:#1479C4;
  --shadow: 0 1px 2px rgba(7,27,55,.06), 0 8px 24px rgba(7,27,55,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0A1220;
    --surface:#111B2E;
    --surface-2:#15213A;
    --border:#22304A;
    --text:#E6EDF7;
    --text-muted:#93A3BD;
    --brand:#4DAAF0;
    --brand-strong:#7CC0F5;
    --brand-soft:#14263F;
    --logo-blue:#4DAAF0;
    --accent:#F0A94C;
    --accent-soft:#2C2313;
    --status-lead:#A58EF0;
    --status-lead-soft:#231C3E;
    --status-active:#4CC3A0;
    --status-active-soft:#12302A;
    --status-vip:#E0A94C;
    --status-vip-soft:#2C2313;
    --status-inactive:#93A3BD;
    --status-inactive-soft:#1A2438;
    --danger:#E28A73;
    --danger-soft:#332019;
    --focus:#4DAAF0;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:14px;
  line-height:1.45;
}
h1,h2,h3{ font-family:"Sora","IBM Plex Sans",sans-serif; margin:0; }
/* The browser's built-in [hidden] rule loses to any of our own rules that set
   display (e.g. .modal-backdrop{display:flex}), even without one of us
   writing !important — that mismatch is what left the Add customer/staff
   modals stuck open. This makes hidden actually hide, no matter what else
   sets display on the same element. */
[hidden]{ display:none !important; }
input,select,textarea,button{ font-family:inherit; font-size:inherit; color:inherit; }
.num{ font-family:"IBM Plex Mono", monospace; font-variant-numeric:tabular-nums; }
button{ cursor:pointer; }
a{ color:var(--brand); }

.page{ max-width:1180px; margin:0 auto; padding:16px 16px 48px; }

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px 16px; max-width:1180px; margin:0 auto; border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand-mark{ background:transparent; padding:0; display:flex; align-items:center; justify-content:center; flex:none; }
.brand-mark-img{ height:38px; width:38px; object-fit:contain; display:block; }
.brand-text h1{ font-size:19px; font-weight:700; letter-spacing:-.01em; }
.brand-text p{ margin:2px 0 0; font-size:12.5px; color:var(--text-muted); }
.auth-brand .brand-mark{ padding:0; }
.auth-brand .brand-mark-img{ height:48px; width:48px; }

.topnav{ display:flex; gap:4px; flex-wrap:wrap; }
.topnav a{ white-space:nowrap; text-decoration:none; color:var(--text-muted); font-weight:600; font-size:13px; padding:8px 12px; border-radius:8px; }
.topnav a:hover{ background:var(--surface-2); }
.topnav a.active{ background:var(--brand-soft); color:var(--brand); }

/* "Sales and Purchases" dropdown in the top nav (see includes/layout_start.php) */
.nav-dropdown{ position:relative; }
.nav-dropdown-btn{ font:inherit; font-weight:600; font-size:13px; color:var(--text-muted); background:none; border:0; padding:8px 12px; border-radius:8px; cursor:pointer; white-space:nowrap; }
.nav-dropdown-btn:hover{ background:var(--surface-2); }
.nav-dropdown.has-active .nav-dropdown-btn{ background:var(--brand-soft); color:var(--brand); }
.nav-caret{ font-size:10px; margin-left:2px; }
.nav-icon-btn{ display:inline-flex; align-items:center; justify-content:center; padding:8px 10px; }
.nav-icon-btn svg{ display:block; }
/* the icon-only menu sits at the end of the bar, so it opens towards the left and never runs off the screen */
.nav-dropdown-iconic .nav-dropdown-menu{ left:auto; right:0; }
.nav-dropdown-menu{ position:absolute; top:calc(100% + 4px); left:0; min-width:210px; z-index:30; background:var(--surface, #fff); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:6px; display:flex; flex-direction:column; gap:2px; }
.nav-dropdown-menu[hidden]{ display:none; }
.nav-dropdown-menu a{ display:block; white-space:nowrap; }

.topbar-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.viewer-chip{ display:flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); }
.viewer-avatar{ width:26px; height:26px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.viewer-name{ font-size:12.5px; font-weight:600; }
.role-pill{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:999px; }
.role-owner{ background:var(--status-vip-soft); color:var(--status-vip); }
.role-admin{ background:var(--status-active-soft); color:var(--status-active); }
.role-manager{ background:var(--status-lead-soft); color:var(--status-lead); }
.role-office{ background:var(--accent-soft); color:var(--accent); }
.role-user{ background:var(--status-inactive-soft); color:var(--status-inactive); }
.role-cashier{ background:var(--status-inactive-soft); color:var(--status-inactive); } /* legacy role name, kept so an unmigrated account (pre migration_012) still renders a styled pill instead of a blank one */

.btn{ border:1px solid var(--border); background:var(--surface); color:var(--text); padding:9px 14px; border-radius:9px; font-weight:600; white-space:nowrap; text-decoration:none; display:inline-block; }
.btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.btn-primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-primary:hover{ background:var(--brand-strong); border-color:var(--brand-strong); }
.btn-ghost{ background:transparent; border-color:transparent; }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-danger{ background:transparent; border-color:var(--danger); color:var(--danger); }
.btn-danger:hover{ background:var(--danger-soft); }
.btn-sm{ padding:6px 10px; font-size:12.5px; border-radius:7px; }
.btn-secondary{ background:var(--brand-soft); border-color:var(--brand-soft); color:var(--brand); }
.btn-secondary:hover{ background:var(--brand); color:#fff; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn-disabled-look{ opacity:.5; pointer-events:none; }

/* auth pages */
.auth-shell{ min-height:calc(100vh - 40px); display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.auth-card{ width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:28px; box-shadow:var(--shadow); }
.auth-brand{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.auth-card h2{ font-size:19px; margin-bottom:4px; }
.auth-sub{ color:var(--text-muted); font-size:13px; margin:0 0 18px; }
.auth-form{ display:flex; flex-direction:column; gap:12px; }
.auth-form label{ display:block; font-size:12px; font-weight:600; color:var(--text-muted); }
.auth-form input, .auth-form select{ width:100%; margin-top:4px; border:1px solid var(--border); background:var(--surface-2); border-radius:8px; padding:10px 11px; }
.auth-form .btn{ margin-top:6px; text-align:center; }
.form-errors{ background:var(--danger-soft); border:1px solid var(--danger); color:var(--text); border-radius:8px; padding:10px 12px; margin-bottom:14px; font-size:13px; }
.form-errors p{ margin:2px 0; }
.form-saved{ color:var(--status-active); font-size:12.5px; font-weight:600; }
.form-info{ background:var(--status-lead-soft); border:1px solid var(--status-lead); color:var(--text); border-radius:8px; padding:10px 12px; margin-bottom:14px; font-size:13px; }
.form-info p{ margin:2px 0; }

/* toolbar / stats / filters */
.toolbar{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:16px 0 0; }
.search input{ width:260px; max-width:52vw; padding:9px 12px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text); }
.search input:focus{ outline:2px solid var(--focus); outline-offset:1px; }
.ss-month-label{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--text-muted); }
.ss-month-label select, .ss-month-label input, #ssSort, #sbToolbar select, #stDepartment{ border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:9px; padding:8px 10px; font-family:inherit; font-size:13px; }
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--border); background:var(--surface); border-radius:9px; font-size:15px; line-height:1; cursor:pointer; padding:0; }
.icon-btn:hover{ background:var(--surface-2); }
.so-step{ width:30px; font-size:22px; padding-bottom:3px; }
.so-step:disabled{ opacity:.35; cursor:default; }
.so-step:disabled:hover{ background:var(--surface); }
/* #sbDatePicker itself: kept in the document and focusable (so .showPicker()
   works) but shrunk to nothing visible — the calendar button next to it is
   the actual control the person sees and clicks. */
#sbDatePicker, #soDatePicker{ position:absolute; width:1px; height:1px; padding:0; margin:-8px 0 0; border:none; opacity:0; overflow:hidden; }
.users-table th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
.users-table th.sortable:hover{ color:var(--text); }
.users-table th.sortable .sort-arrow{ display:inline-block; margin-left:4px; opacity:0; font-size:10px; }
.users-table th.sortable.sort-active .sort-arrow{ opacity:1; color:var(--accent); }
.sb-checked-cell{ text-align:center; }
.sb-checked-cell input[type="checkbox"]{ width:16px; height:16px; }
.sb-info-has-data{ position:relative; }
.sb-info-has-data::after{ content:""; position:absolute; top:4px; right:4px; width:6px; height:6px; border-radius:50%; background:var(--brand); }
.orders-date-group{ background:var(--surface-2); }
.orders-date-group td{ font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); padding:8px 14px !important; }
.orders-table-empty td{ text-align:center; color:var(--text-muted); padding:22px !important; }
.order-status-pill{ font-size:11.5px; font-weight:600; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.order-status-pill.complete{ background:var(--brand-soft); color:var(--brand); }
.order-status-pill.pending{ background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); }
.orders-table-checks{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0; }
.stat-tile{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; }
.stat-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:600; }
.stat-value{ font-size:24px; font-weight:600; }
.stat-sub{ font-size:12px; color:var(--text-muted); font-weight:500; }

/* Sales Overview: the muted "LY <figure> · <growth%>" line under a Sales/
   Units table cell or stat tile, and the growth% colour coding within it. */
.users-table td.so-nowrap{ white-space:nowrap; }
.so-sub{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.so-growth-pos{ color:var(--status-active); }
.so-growth-neg{ color:var(--danger); }

.filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.chip{ border:1px solid var(--border); background:var(--surface); color:var(--text-muted); padding:7px 13px; border-radius:999px; font-weight:600; font-size:12.5px; }
.chip.active{ background:var(--brand-soft); border-color:var(--brand); color:var(--brand); }
.chip:hover:not(.active){ background:var(--surface-2); }
.filter-divider{ width:1px; height:20px; background:var(--border); flex:none; margin:0 2px; }
.chip-birthday.active{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }

/* list + detail */
.main{ display:flex; gap:16px; align-items:flex-start; }
.list-pane{ flex:1 1 380px; min-width:0; }
.detail-pane{ flex:1 1 560px; min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px; box-shadow:var(--shadow); position:sticky; top:16px; max-height:calc(100vh - 32px); overflow-y:auto; }
.back-btn{ display:none; background:none; border:none; color:var(--brand); font-weight:600; padding:0 0 12px; }

.customer-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.customer-row{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:11px 13px; text-align:left; width:100%; cursor:pointer; }
.customer-row:hover{ border-color:var(--brand); }
.customer-row.selected{ border-color:var(--brand); background:var(--brand-soft); }
.avatar{ width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff; }
.row-main{ flex:1; min-width:0; }
.row-top{ display:flex; align-items:center; gap:8px; }
.row-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-sub{ margin-top:2px; display:flex; gap:10px; color:var(--text-muted); font-size:12px; }
.row-sub span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-meta{ flex:none; text-align:right; font-size:11.5px; color:var(--text-muted); }
.row-meta-birthday{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.row-birthday-date{ font-size:12px; font-weight:600; color:var(--accent); white-space:nowrap; }
.row-wa-btn{ white-space:nowrap; }

.pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; flex:none; }
.pill-lead{ background:var(--status-lead-soft); color:var(--status-lead); }
.pill-active{ background:var(--status-active-soft); color:var(--status-active); }
.pill-vip{ background:var(--status-vip-soft); color:var(--status-vip); }
.pill-inactive{ background:var(--status-inactive-soft); color:var(--status-inactive); }
.pill-archived{ background:var(--status-inactive-soft); color:var(--text-muted); }

.empty-state{ text-align:center; color:var(--text-muted); padding:48px 16px; border:1px dashed var(--border); border-radius:14px; background:var(--surface-2); }
.empty-state .btn{ margin-top:12px; }
.loading{ text-align:center; color:var(--text-muted); padding:40px 0; }

.detail-head{ display:flex; align-items:flex-start; gap:12px; }
.detail-avatar{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:17px; flex:none; }
.detail-titlerow{ flex:1; min-width:0; }
.name-input{ font-family:"Sora",sans-serif; font-size:19px; font-weight:700; border:1px solid transparent; background:transparent; padding:2px 4px; border-radius:6px; width:100%; margin-left:-4px; }
.name-input:hover, .name-input:focus{ border-color:var(--border); background:var(--surface-2); }
.name-input:focus{ outline:2px solid var(--focus); outline-offset:0; }
.quick-actions-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.status-row{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.status-select{ border:1px solid var(--border); background:var(--surface); border-radius:7px; padding:4px 8px; font-size:12.5px; font-weight:600; }
.status-static{ font-size:12.5px; color:var(--text-muted); margin-top:6px; }
.customer-id-readout{ display:block; font-family:"IBM Plex Mono", monospace; font-size:11.5px; color:var(--text-muted); margin-top:5px; }

.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.field-grid .full{ grid-column:1 / -1; }
.field label{ display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:600; margin-bottom:4px; }
.field input, .field textarea{ width:100%; border:1px solid var(--border); background:var(--surface-2); border-radius:8px; padding:8px 10px; font-family:inherit; }
.field textarea{ min-height:70px; resize:vertical; }
.field input:focus, .field textarea:focus{ outline:2px solid var(--focus); outline-offset:0; background:var(--surface); }
.field input[disabled], .field textarea[disabled]{ opacity:.6; }
/* A read-only .field value (e.g. the Returns report's row-detail popup) —
   same label styling as an editable field, just plain text instead of an
   input/textarea below it. */
.field p{ margin:0; font-size:13.5px; min-height:1.3em; }
.field p:empty::after{ content:"—"; color:var(--text-muted); }
.ss-card-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--border); background:var(--surface-2); border-radius:8px; padding:8px 10px; }
.ss-card-value{ font-family:"IBM Plex Mono", monospace; font-size:13px; }

/* tabbed detail panel */
.tab-strip{ display:flex; gap:4px; flex-wrap:wrap; margin-top:16px; border-bottom:1px solid var(--border); padding-bottom:0; }
.tab-btn{ background:transparent; border:none; border-bottom:2px solid transparent; color:var(--text-muted); font-weight:600; font-size:12.5px; padding:8px 10px; border-radius:6px 6px 0 0; }
.tab-btn:hover{ background:var(--surface-2); color:var(--text); }
.tab-btn.active{ color:var(--brand); border-bottom-color:var(--brand); }
.tab-panels{ padding-top:4px; }
.tab-note{ color:var(--text-muted); font-size:12.5px; margin:10px 0; }
.placeholder-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.quick-links{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.whatsapp-summary{ font-size:13px; margin-top:12px; }
.kv-list{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:12px 0 0; font-size:13px; }
.kv-list dt{ color:var(--text-muted); font-weight:600; }
.kv-list dd{ margin:0; word-break:break-word; }
.text-message-draft{ width:100%; min-height:80px; margin-top:10px; border:1px solid var(--border); background:var(--surface-2); border-radius:8px; padding:8px 10px; resize:vertical; }

.legacy-details{ margin-top:16px; border:1px solid var(--border); border-radius:10px; padding:2px 12px 12px; background:var(--surface-2); }
.legacy-details summary{ cursor:pointer; padding:10px 0; font-weight:600; font-size:12.5px; color:var(--text-muted); list-style:none; display:flex; align-items:center; gap:6px; }
.legacy-details summary::-webkit-details-marker{ display:none; }
.legacy-details summary::before{ content:"▸"; font-size:10px; }
.legacy-details[open] summary::before{ content:"▾"; }
.legacy-details .field-grid{ margin-top:4px; }
.legacy-details .field input{ background:var(--surface); }
.checkbox-field label{ display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:13px; font-weight:500; color:var(--text); }
.checkbox-field input[type="checkbox"]{ width:16px; height:16px; }
.order-notify-row{ display:flex; gap:20px; flex-wrap:wrap; padding:10px 12px; background:var(--surface-2); border-radius:10px; }
.order-notify-row .checkbox-field{ flex:1; min-width:160px; }
.order-notify-row .order-modal-note{ margin:2px 0 0 24px; }
.legacy-caption{ margin:10px 0 0; font-size:11.5px; color:var(--text-muted); }

.ss-spend-link{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:12.5px; font-weight:600; color:var(--brand); text-decoration:none; }
.ss-spend-link:hover{ text-decoration:underline; }

/* Details tab's "Birthday gift due" button — see "Birthday gift" in
   README.txt. --accent (not --brand, the usual .btn-primary color) so it
   stands out from every other button on the page when it's shown, since
   staff need to spot it quickly once a customer's in store to claim it. */
.gift-due-btn{ display:flex; margin-top:12px; background:var(--accent); border-color:var(--accent); }
.gift-due-btn:hover{ filter:brightness(0.93); }

.tags-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; align-items:center; }
.tag-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--border); padding:4px 8px 4px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.tag-chip button{ background:none; border:none; color:var(--text-muted); font-size:13px; line-height:1; padding:0; }
.tag-add{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.tag-add input{ border:1px solid var(--border); background:var(--surface-2); border-radius:999px; padding:5px 12px; font-size:12px; width:140px; }
.tag-suggest{ border:1px dashed var(--border); background:transparent; color:var(--text-muted); border-radius:999px; padding:4px 10px; font-size:11.5px; }
.tag-suggest:hover{ border-color:var(--brand); color:var(--brand); }

.related-customers-field{ margin-top:14px; }
.notes-field{ margin-top:14px; }
.related-customers-list{ display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.related-customers-empty{ color:var(--text-muted); font-size:12.5px; margin:4px 0; }
.related-customer-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--border); background:var(--surface-2); border-radius:8px; padding:6px 10px; }
.related-customer-main{ display:flex; align-items:baseline; gap:8px; overflow:hidden; cursor:pointer; }
.related-customer-name{ font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.related-customer-label{ color:var(--text-muted); font-size:12px; white-space:nowrap; }
.related-customer-remove{ background:none; border:none; color:var(--text-muted); font-size:15px; line-height:1; padding:2px 4px; cursor:pointer; flex-shrink:0; }
.related-customer-remove:hover{ color:var(--danger); }
.related-search-results{ list-style:none; margin:6px 0 0; padding:0; max-height:160px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; }
.related-search-results:empty{ border:none; }
.related-search-result{ display:flex; justify-content:space-between; gap:10px; padding:7px 10px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--border); }
.related-search-result:last-child{ border-bottom:none; }
.related-search-result:hover{ background:var(--surface-2); }
.related-search-result-sub{ color:var(--text-muted); font-size:12px; }

/* Duplicate-customer prompts: the New customer form's live SmartShopper-
   number check (#newCardCheck), the Set/Replace card modal's holder list
   (#ssCardHolders), and the Details tab's Merge button. */
.card-check-box{ background:var(--status-lead-soft); border:1px solid var(--status-lead); color:var(--text); border-radius:8px; padding:10px 12px; margin:0 0 14px; font-size:13px; }
.card-check-box.needs-choice{ border-color:var(--danger); background:var(--danger-soft); }
.card-check-intro{ margin:0 0 8px; font-weight:600; }
.card-check-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; border:1px solid var(--border); background:var(--surface); border-radius:8px; padding:7px 10px; margin-bottom:6px; }
.card-check-row.selected{ border-color:var(--status-active); }
.card-check-label{ flex:1 1 180px; min-width:0; overflow-wrap:anywhere; }
.card-check-replace{ display:block; margin:6px 0; font-size:12.5px; }
.card-check-hint{ color:var(--danger); font-size:12.5px; margin:6px 0 0; font-weight:600; }
.merge-field{ margin-top:10px; }

.meta-line{ margin-top:14px; font-size:12px; color:var(--text-muted); display:flex; gap:14px; flex-wrap:wrap; }
hr.sep{ border:none; border-top:1px solid var(--border); margin:18px 0; }

.composer{ display:flex; flex-direction:column; gap:8px; }
.composer-row{ display:flex; gap:8px; }
.composer select{ border:1px solid var(--border); background:var(--surface-2); border-radius:8px; padding:8px; }
.composer textarea{ flex:1; min-height:60px; resize:vertical; border:1px solid var(--border); background:var(--surface-2); border-radius:8px; padding:8px 10px; }
.composer textarea:focus, .composer select:focus{ outline:2px solid var(--focus); outline-offset:0; }
.composer-actions{ display:flex; justify-content:flex-end; }

.notes-list, .comms-list, .orders-list{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.note{ display:flex; gap:10px; }
.note-dot{ width:8px; height:8px; border-radius:50%; margin-top:7px; flex:none; }
.note-body{ flex:1; min-width:0; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:9px 11px; }
.note-head{ display:flex; align-items:center; gap:6px; font-size:12px; margin-bottom:3px; flex-wrap:wrap; }
.note-author{ font-weight:700; }
.note-type{ color:var(--text-muted); text-transform:capitalize; }
.note-time{ color:var(--text-muted); margin-left:auto; }
.note-text{ white-space:pre-wrap; word-break:break-word; }
.notes-empty{ color:var(--text-muted); font-size:12.5px; padding:10px 0; }
.order-extra-notes{ color:var(--text-muted); font-size:12.5px; margin-top:4px; }
.order-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:8px; font-size:12.5px; color:var(--text-muted); }
.order-check{ display:flex; align-items:center; gap:5px; font-weight:500; color:var(--text); }
.order-check input{ width:14px; height:14px; }
.order-status-select{ border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:8px; padding:4px 8px; font-family:inherit; font-size:12.5px; font-weight:500; }

.photo-preview-wrap{ display:flex; justify-content:center; padding:10px 0 4px; }
.photo-preview{ max-width:100%; max-height:320px; border-radius:12px; border:1px solid var(--border); object-fit:cover; }
.photo-upload-label{ cursor:pointer; }
.photo-paste-zone{ border:2px dashed var(--border); border-radius:10px; padding:14px; text-align:center; font-size:12.5px; color:var(--text-muted); cursor:text; margin:4px 0 10px; }
.photo-paste-zone:focus{ outline:2px solid var(--focus); outline-offset:2px; border-color:var(--focus); }
.photo-paste-zone.drag-over{ border-color:var(--focus); background:var(--surface-2); }

.detail-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; gap:8px; flex-wrap:wrap; }

.modal-backdrop{ position:fixed; inset:0; background:rgba(16,20,15,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:20; }
.modal{ background:var(--surface); border-radius:14px; padding:20px; width:100%; max-width:420px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; max-height:90vh; overflow-y:auto; }
/* A modal whose content is a data table (e.g. Articles' price history/sales
   transactions popups) rather than a short form — wider so the table's
   columns aren't cramped. */
.modal-wide{ max-width:760px; }
.modal label{ display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:4px; }
.modal input, .modal select, .modal textarea{ width:100%; border:1px solid var(--border); background:var(--surface-2); border-radius:8px; padding:9px 10px; font-family:inherit; }
.modal textarea{ min-height:64px; resize:vertical; }
.modal input:focus, .modal select:focus, .modal textarea:focus{ outline:2px solid var(--focus); outline-offset:0; background:var(--surface); }
.modal .field-grid{ margin-top:0; }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
.order-modal-note{ color:var(--text-muted); font-size:12.5px; margin:-4px 0 2px; }
.order-draft-note{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--accent-soft); border:1px solid var(--accent); border-radius:8px; padding:8px 10px; margin:-4px 0 4px; }
.order-draft-note p{ margin:0; color:var(--accent); font-size:12.5px; }
.order-draft-note .btn{ flex:none; }

/* settings / users table */
.settings-wrap{ padding-top:16px; }
.settings-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.settings-head h2{ font-size:19px; }
.users-table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.users-table th, .users-table td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--border); font-size:13px; }
.users-table th{ background:var(--surface-2); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); }
.users-table tr:last-child td{ border-bottom:none; }
.users-table tr.clickable-row{ cursor:pointer; }
.users-table tr.clickable-row:hover td{ background:var(--surface-2); }
.users-table .row-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.users-table select{ border:1px solid var(--border); background:var(--surface-2); border-radius:7px; padding:5px 7px; font-size:12.5px; }
.users-table input[type="email"]{ border:1px solid var(--border); background:var(--surface-2); border-radius:7px; padding:5px 7px; font-size:12.5px; width:170px; max-width:100%; }
.users-table input[type="checkbox"]{ width:16px; height:16px; }

/* One row per allowed IP address in the "Manage IPs" modal — see
   assets/settings.js renderAllowedIps(). */
.ip-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.ip-row:last-child{ border-bottom:none; }
.ip-row-main{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.ip-row-address{ font-family:inherit; font-weight:600; font-size:13.5px; }
.ip-row-label{ font-size:12px; color:var(--text-muted); }
.field-optional{ font-weight:400; color:var(--text-muted); font-size:11.5px; }
.status-dot{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; }
.status-dot::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--status-active); }
.status-dot.inactive::before{ background:var(--status-inactive); }

/* sales data transaction browser (sales_data.php) */
.sb-txn-row:hover{ background:var(--surface-2); }
.sb-toggle{ color:var(--text-muted); width:18px; text-align:center; }
.sb-detail-row td{ background:var(--surface-2); padding:12px 14px; }
.sb-articles .users-table{ border-radius:8px; }
.sb-articles .users-table th, .sb-articles .users-table td{ padding:8px 12px; font-size:12.5px; }

/* dashboard.php landing page */
.dashboard-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:14px; margin-top:14px; align-items:start; }
.dashboard-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; }
.dashboard-card h3{ margin:0 0 4px; font-size:15px; }
.dashboard-card .tab-note{ margin-top:0; }
.dashboard-order-row, .dashboard-birthday-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.dashboard-order-row:last-child, .dashboard-birthday-row:last-child{ border-bottom:none; }
.dashboard-row-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dashboard-row-main .dashboard-row-title{ font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dashboard-row-main .dashboard-row-sub{ font-size:12px; color:var(--text-muted); }
.dashboard-search-cta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0 4px; }
.dashboard-search-cta input{ flex:1 1 200px; min-width:0; border:1px solid var(--border); background:var(--surface); border-radius:9px; padding:10px 12px; font-size:14px; }

@media (max-width: 860px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .field-grid{ grid-template-columns:1fr; }
  .main{ flex-direction:column; }
  .detail-pane{ position:fixed; inset:0; border-radius:0; max-height:100%; z-index:15; }
  .back-btn{ display:block; }
  body.detail-open .list-pane{ display:none; }
  .topbar{ padding:12px; }
  .users-table{ display:block; overflow-x:auto; }
  .tab-strip{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tab-btn{ flex:none; }
  .dashboard-grid{ grid-template-columns:1fr; }
}

/* Print-only content: hidden on screen everywhere, shown only inside
   @media print (currently used by Sales Overview's Print button — a plain
   browser print of the page rather than a dedicated print page). */
.print-only{ display:none; }

@media print{
  /* Chrome that only makes sense on screen: top nav, the toolbar's pickers
     and the Print/Share buttons themselves, any loading placeholder, and
     anything else explicitly flagged .no-print. */
  .topbar, .toolbar, .no-print, .loading{ display:none !important; }
  .print-only{ display:block !important; margin:0 0 10px; font-weight:600; }
  body{ background:#fff; }
  .page, .settings-wrap{ padding:0; margin:0; max-width:none; }
  .users-table{ display:table; overflow-x:visible; }
  a{ color:inherit; text-decoration:none; }
}

/* ---------- Article pictures + Promotions (migration_047) ---------- */
.field select{ width:100%; border:1px solid var(--border); background:var(--surface-2); border-radius:8px; padding:8px 10px; font-family:inherit; }
.field input[type="color"]{ cursor:pointer; }
.art-thumb{ width:44px; height:44px; object-fit:contain; background:#fff; border:1px solid var(--border); border-radius:6px; display:block; }
.art-thumb-empty{ display:inline-block; background:var(--surface-2); }
.art-img-preview{ min-height:160px; display:flex; align-items:center; justify-content:center; background:repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 16px 16px; border:1px solid var(--border); border-radius:10px; color:var(--text-muted); padding:8px; }
.art-img-preview img{ max-width:100%; max-height:260px; object-fit:contain; }
.promo-results{ max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.promo-result{ display:flex; gap:10px; align-items:center; border:1px solid var(--border); background:var(--surface-2); border-radius:8px; padding:6px 8px; cursor:pointer; font-size:13px; }
.promo-result:hover{ border-color:var(--brand); background:var(--brand-soft); }
.promo-pic-note{ font-size:12.5px; color:var(--text-muted); min-height:44px; display:flex; align-items:center; }
.promo-swatch{ display:inline-block; width:16px; height:16px; border-radius:4px; border:1px solid var(--border); vertical-align:middle; }
.flyer-pic-row{ display:flex; gap:12px; align-items:center; }
.paste-zone{ border:2px dashed var(--border); border-radius:10px; padding:14px; text-align:center; color:var(--text-muted); font-size:13px; background:var(--surface-2); }
.paste-zone:focus{ outline:2px solid var(--focus); border-color:var(--brand); }
/* Multiple article pictures */
.art-thumb-wrap{ position:relative; display:inline-block; }
.art-thumb-count{ position:absolute; right:-6px; bottom:-6px; background:var(--brand); color:#fff; border-radius:999px; font-size:10.5px; font-weight:700; padding:1px 6px; line-height:1.4; }
.art-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.art-gallery-card{ position:relative; border:1px solid var(--border); border-radius:10px; padding:8px; background:repeating-conic-gradient(#f1f1f1 0 25%, #fff 0 50%) 0 0 / 14px 14px; display:flex; flex-direction:column; gap:6px; }
.art-gallery-card img{ width:100%; height:120px; object-fit:contain; }
.art-gallery-main{ position:absolute; left:6px; top:6px; background:var(--brand); color:#fff; border-radius:6px; font-size:10.5px; font-weight:700; padding:1px 7px; }
.art-gallery-actions{ display:flex; flex-wrap:wrap; gap:4px; background:var(--surface); border-radius:8px; padding:4px; }
.art-gallery-empty{ grid-column:1 / -1; color:var(--text-muted); font-size:13px; padding:14px; text-align:center; border:1px dashed var(--border); border-radius:10px; }
.art-flyer-pics{ display:flex; flex-wrap:wrap; gap:8px; }
.flyer-pic-choice{ position:relative; border:1px solid var(--border); border-radius:8px; padding:6px; width:96px; background:#fff; cursor:pointer; }
.flyer-pic-choice img{ width:100%; height:80px; object-fit:contain; display:block; }
.flyer-pic-choice input{ position:absolute; right:6px; bottom:6px; width:18px; height:18px; }
.flyer-pic-choice .art-gallery-main{ left:4px; top:4px; }
.promo-thumbs{ display:flex; gap:4px; }

/* Sales Purchase Receipt Overview: five headline tiles instead of four */
.stats.stats-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width: 860px){ .stats.stats-5{ grid-template-columns:repeat(2,1fr); } }

/* ---- To Do list (todos.php, dashboard.php "My to do list") ---- */
.nav-badge{ display:inline-block; min-width:18px; padding:1px 6px; margin-left:4px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:11px; font-weight:700; text-align:center; line-height:1.5; }
.nav-badge-alert{ background:var(--danger-soft); color:var(--danger); }
.td-muted{ color:var(--text-muted); font-size:12px; }
.td-title{ font-weight:600; font-size:13.5px; }
.td-sub{ font-size:12px; color:var(--text-muted); margin-top:2px; }
.td-table tr.td-done .td-title{ text-decoration:line-through; color:var(--text-muted); }
.td-check{ width:17px; height:17px; cursor:pointer; }
.td-pri{ display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); }
.td-pri-high{ background:var(--danger-soft); color:var(--danger); border-color:var(--danger); }
.td-pri-low{ background:var(--status-inactive-soft); color:var(--status-inactive); }
.td-due{ white-space:nowrap; font-size:12.5px; }
.td-due.td-overdue{ color:var(--danger); font-weight:700; }
.td-due.td-today{ color:var(--accent); font-weight:700; }
.td-bar{ flex:1; min-width:70px; height:8px; background:var(--border); border-radius:999px; overflow:hidden; }
.td-bar span{ display:block; height:100%; background:var(--brand); border-radius:999px; transition:width .2s; }
.td-progress-cell{ min-width:130px; }
.td-progress-cell .td-bar{ margin-bottom:3px; }
.td-progress-text{ font-size:11.5px; color:var(--text-muted); }
.td-cust-chosen{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:8px 10px; font-size:13px; }
.td-x{ border:0; background:none; color:var(--text-muted); font-size:18px; line-height:1; cursor:pointer; padding:0 4px; }
.td-x:hover{ color:var(--danger); }
.td-cust-results{ border:1px solid var(--border); border-radius:8px; background:var(--surface); margin-top:4px; max-height:180px; overflow-y:auto; }
.td-cust-results button{ display:block; width:100%; text-align:left; border:0; background:none; padding:8px 10px; font:inherit; font-size:13px; cursor:pointer; color:var(--text); }
.td-cust-results button:hover{ background:var(--surface-2); }
.td-cust-none{ padding:8px 10px; font-size:12.5px; color:var(--text-muted); }
.td-progress{ border-top:1px solid var(--border); padding-top:12px; }
.td-progress h3{ margin:0 0 2px; font-size:15px; }
.td-progress-top{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.td-status-btns{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.td-update-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:8px; }
.td-update-row .ss-month-label{ margin:0; }
.td-update-row select{ width:auto; }
.td-log{ margin-top:12px; display:flex; flex-direction:column; }
.td-log-row{ position:relative; padding:8px 28px 8px 0; border-bottom:1px solid var(--border); font-size:13px; }
.td-log-row:last-child{ border-bottom:0; }
.td-log-system{ color:var(--text-muted); font-size:12px; }
.td-log-head{ font-size:12px; }
.td-log-when{ color:var(--text-muted); font-size:11.5px; }
.td-log-pct{ font-size:11px; font-weight:700; background:var(--brand-soft); color:var(--brand); padding:1px 7px; border-radius:999px; margin-left:4px; }
.td-log-text{ white-space:pre-wrap; word-break:break-word; margin-top:2px; }
.td-log-del{ position:absolute; top:6px; right:0; }
/* dashboard card */
.dash-todo-quick{ display:flex; gap:8px; margin:8px 0 6px; }
.dash-todo-quick input{ flex:1; min-width:0; border:1px solid var(--border); background:var(--surface-2); color:var(--text); border-radius:8px; padding:8px 10px; font:inherit; font-size:13px; }
.dash-todo-row{ display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.dash-todo-row:last-child{ border-bottom:none; }
.dash-todo-row input[type="checkbox"]{ width:17px; height:17px; margin-top:2px; flex:none; cursor:pointer; }
.dash-todo-row .dashboard-row-main{ flex:1; cursor:pointer; }
.dash-todo-row .dashboard-row-title{ white-space:normal; }
.dash-todo-meta{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; font-size:12px; color:var(--text-muted); }
.dash-todo-summary{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--text-muted); margin:2px 0 4px; }
.dash-todo-summary strong.bad{ color:var(--danger); }
@media (max-width: 860px){
  .td-table td, .td-table th{ white-space:nowrap; }
  .td-table td:nth-child(2){ white-space:normal; min-width:180px; }
}
/* Save/Close stay visible while a long progress log scrolls inside the modal. */
.td-modal-actions{ position:sticky; bottom:-20px; background:var(--surface); border-top:1px solid var(--border); padding:10px 0 2px; margin-top:0; z-index:1; }

/* ---- Staff leave: Leave Calendar + Leave Requests (assets/leave.js) ---- */
.lv-t-annual{ --c:#2F8F5B; }
.lv-t-sick{ --c:#C4552F; }
.lv-t-family{ --c:#8A5BB5; }
.lv-t-parental{ --c:#C2487F; }
.lv-t-study{ --c:#3E7BC4; }
.lv-t-unpaid{ --c:#7A8479; }
.lv-t-other{ --c:#B88A1F; }
.lv-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--c, var(--text-muted)); vertical-align:baseline; flex:none; }
.lv-dot-pending{ background:transparent; border:2px dashed var(--c, var(--text-muted)); }
.lv-monthnav{ display:flex; align-items:center; gap:8px; }
.lv-month-title{ min-width:150px; text-align:center; font-family:"Sora", sans-serif; font-size:16px; }
.lv-check{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted); cursor:pointer; }
.lv-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:12px 0 8px; font-size:12.5px; color:var(--text-muted); }
.lv-legend-item{ display:inline-flex; align-items:center; gap:6px; }
.lv-cal-wrap{ overflow-x:auto; }
.lv-cal{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); min-width:640px; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); }
.lv-dow{ padding:8px 10px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); background:var(--surface-2); border-bottom:1px solid var(--border); }
.lv-day{ min-height:112px; padding:6px 6px 8px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:3px; cursor:pointer; min-width:0; }
.lv-day:nth-child(7n){ border-right:0; }
.lv-day:hover{ background:var(--surface-2); }
.lv-day:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px; }
.lv-day.lv-weekend, .lv-dow.lv-weekend{ background:var(--surface-2); }
.lv-day.lv-other{ opacity:.55; }
.lv-day-head{ display:flex; align-items:center; justify-content:space-between; gap:4px; }
.lv-daynum{ font-size:12.5px; font-weight:600; color:var(--text-muted); }
.lv-today .lv-daynum{ background:var(--brand); color:#fff; border-radius:999px; min-width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; }
.lv-count{ display:none; font-size:11px; font-weight:700; background:var(--brand-soft); color:var(--brand-strong); border-radius:999px; padding:1px 7px; }
.lv-chip{ display:block; width:100%; text-align:left; font:inherit; font-size:12px; line-height:1.25; padding:2px 6px; border:0; border-left:3px solid var(--c); border-radius:4px; background:color-mix(in srgb, var(--c) 20%, var(--surface)); color:var(--text); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lv-chip:hover{ background:color-mix(in srgb, var(--c) 32%, var(--surface)); }
.lv-chip.lv-pending{ background:transparent; border:1px dashed var(--c); border-left:3px dashed var(--c); font-style:italic; }
.lv-more{ font-size:11.5px; color:var(--text-muted); padding-left:4px; }
.lv-day-list{ max-height:55vh; overflow:auto; }
.lv-day-dept{ margin:14px 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.lv-day-row{ display:flex; align-items:center; gap:10px; padding:8px 8px; border:1px solid var(--border); border-radius:9px; margin-bottom:6px; flex-wrap:wrap; }
.lv-day-row.lv-clickable{ cursor:pointer; }
.lv-day-row.lv-clickable:hover, .lv-table tr.lv-clickable:hover{ background:var(--surface-2); }
.lv-day-name{ flex:1 1 160px; min-width:0; }
.lv-day-what{ flex:2 1 220px; font-size:13px; color:var(--text-muted); }
.lv-table tr.lv-clickable{ cursor:pointer; }
.lv-actions{ text-align:right; }
.pill-lv-pending{ background:var(--accent-soft); color:var(--accent); }
.pill-lv-approved{ background:var(--status-active-soft); color:var(--status-active); }
.pill-lv-declined{ background:var(--danger-soft); color:var(--danger); }
@media (max-width:700px){
  .lv-cal{ min-width:0; }
  .lv-day{ min-height:58px; padding:4px; align-items:flex-start; }
  .lv-chip, .lv-more{ display:none; }
  .lv-count{ display:inline-block; }
  .lv-dow{ padding:6px 2px; text-align:center; font-size:10.5px; }
  .lv-month-title{ min-width:120px; }
}

/* ---- Staff record: Details / Leave history tabs ---- */
.st-tabs{ margin:6px 0 12px; align-items:flex-end; flex:none; }
.st-tabs .st-tabs-add{ margin-left:auto; align-self:center; }
.st-leave-summary{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin-bottom:10px; }
.st-leave-summary .tab-note{ flex-basis:100%; }
.lv-sum-chip{ display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:3px 10px; border:1px solid var(--border); border-radius:999px; background:var(--surface-2); }
#stPanelLeave .lv-actions{ white-space:normal; min-width:120px; }
#stPanelLeave .lv-actions .btn{ margin:2px 0; }
.lv-days-calc{ background:var(--surface-2); font-weight:600; cursor:default; }

/* ---- Industrial Relations (assets/ir.js) ---- */
.st-tabs .st-tabs-actions{ margin-left:auto; align-self:center; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.ir-table td{ vertical-align:top; }
.ir-offence{ font-weight:600; }
.ir-snippet{ max-width:420px; margin-top:2px; }
.ir-cancelled .ir-offence, .ir-cancelled .ir-snippet{ text-decoration:line-through; opacity:.7; }
.ir-pager{ display:flex; align-items:center; justify-content:center; gap:14px; margin:14px 0; }
.ir-checks{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.pill-ir-warn{ background:var(--accent-soft); color:var(--accent); }
.pill-ir-final{ background:var(--danger-soft); color:var(--danger); }
.pill-ir-neutral, .pill-ir-cancelled{ background:var(--status-inactive-soft); color:var(--status-inactive); }
.pill-ir-unlinked{ background:var(--status-lead-soft); color:var(--status-lead); }
.lv-sum-warn{ border-color:var(--accent); }
#irStaff, #irStaffFilter{ width:100%; margin-top:6px; }
@media (max-width:700px){ .ir-snippet{ max-width:none; } }
.toolbar .ss-month-label select{ max-width:100%; }
@media (max-width:700px){
  #irApp .toolbar .ss-month-label{ width:100%; }
  #irApp .toolbar .ss-month-label select{ flex:1; min-width:0; max-width:none; }
  #irApp .search, #irApp .search input{ width:100%; max-width:100%; }
}

/* Inventory > Suppliers */
.sup-table td{ vertical-align:top; }
.sup-inactive td:first-child strong{ opacity:.65; }
.pill-sup-active{ background:var(--accent-soft); color:var(--accent); }
.pill-sup-inactive{ background:var(--status-inactive-soft); color:var(--status-inactive); }
@media (max-width:700px){ #supApp .toolbar .ss-month-label{ width:100%; } #supApp .toolbar .ss-month-label select{ width:100%; } }
.sup-sortbar{ align-items:center; gap:10px; }
#supApp .sup-sortbar .btn{ white-space:nowrap; }
@media (max-width:700px){ #supApp .sup-sortbar .ss-month-label{ width:auto; flex:1; } }
@media (max-width:700px){
  #supApp .toolbar .ss-month-label{ display:flex; flex-direction:column; align-items:stretch; gap:4px; }
  #supApp .sup-sortbar{ align-items:flex-end; }
}

/* Financial Dashboard */
.fd-h{ font-size:15px; margin:22px 0 8px; display:flex; align-items:baseline; gap:8px; }
.fd-h-note{ font-size:12px; color:var(--text-muted); font-weight:500; }
.fd-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.fd-tile{ text-align:left; font:inherit; color:inherit; cursor:pointer; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:5px; min-height:150px; }
.fd-tile:hover{ border-color:var(--brand); }
.fd-tile:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.fd-tile.fd-selected{ border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-soft), var(--shadow); }
.fd-value{ font-size:34px; font-weight:650; line-height:1.15; }
.fd-caption{ font-size:13px; color:var(--text-muted); }
.fd-caption.fd-warn{ color:var(--accent); }
.fd-line{ font-size:13px; }
.fd-breakdown{ margin-top:8px; }
.fd-table td.num, .fd-table th.num{ text-align:right; white-space:nowrap; }
.fd-table tfoot th{ border-top:2px solid var(--border); }
.fd-bar{ display:inline-block; vertical-align:middle; width:70px; height:8px; background:var(--status-inactive-soft); border-radius:4px; margin-right:6px; overflow:hidden; }
.fd-bar > span{ display:block; height:100%; background:var(--brand); border-radius:4px; }
@media (max-width:700px){ .fd-grid{ grid-template-columns:1fr; } .fd-value{ font-size:30px; } .fd-tile{ min-height:0; } }
.fd-grid.fd-grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1000px){ .fd-grid.fd-grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){ .fd-grid.fd-grid-3{ grid-template-columns:1fr; } }

/* Sales and Purchases > Budgets */
.bg-month-pick{ display:inline-flex; align-items:center; gap:4px; }
.bg-month-pick input{ min-width:0; }
.bg-grid-wrap{ overflow:auto; max-height:70vh; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.bg-grid{ border-collapse:separate; border-spacing:0; font-size:13px; min-width:100%; }
.bg-grid th, .bg-grid td{ padding:3px 6px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); white-space:nowrap; background:var(--surface); }
.bg-grid thead th{ position:sticky; top:0; z-index:2; background:var(--surface-2); font-size:11.5px; text-align:right; vertical-align:bottom; }
.bg-grid .bg-sticky{ position:sticky; left:0; z-index:1; text-align:left; background:var(--surface-2); min-width:118px; }
.bg-grid thead .bg-sticky{ z-index:3; }
.bg-dh{ display:block; max-width:96px; overflow:hidden; text-overflow:ellipsis; margin-left:auto; }
.bg-dc{ display:block; font-weight:400; color:var(--text-muted); font-size:10.5px; }
.bg-grid td.num{ text-align:right; font-family:"IBM Plex Mono", monospace; }
.bg-cell{ width:88px; border:1px solid transparent; background:transparent; border-radius:6px; padding:5px 6px; text-align:right; font:inherit; font-family:"IBM Plex Mono", monospace; color:inherit; }
.bg-cell:hover{ border-color:var(--border); }
.bg-cell:focus{ outline:2px solid var(--focus); outline-offset:0; background:var(--surface); }
.bg-cell.bg-dirty{ background:var(--brand-soft); border-color:var(--brand); }
.bg-cell.bg-bad{ background:var(--danger-soft, #fde8e8); border-color:var(--danger); }
.bg-grid .bg-weekend td{ background:var(--surface-2); }
.bg-grid .bg-weekend td.bg-sticky{ background:var(--surface-2); }
.bg-grid .bg-sum{ background:var(--surface-2); font-weight:600; }
.bg-grid .bg-store-h, .bg-grid td.bg-store{ border-left:2px solid var(--border); }
.bg-grid .bg-week td, .bg-grid .bg-month td{ background:var(--brand-soft); font-weight:600; }
.bg-grid .bg-month td{ border-top:2px solid var(--brand); }
.bg-grid .bg-over{ color:var(--danger); }
.bg-grid .bg-under{ color:var(--accent); }
.bg-review-table td .tab-note{ margin:0 0 0 6px; }
@media (max-width:700px){ .bg-grid-wrap{ max-height:65vh; } .bg-grid .bg-sticky{ min-width:96px; } }
.fd-table tbody tr.fd-click{ cursor:pointer; }
.fd-table tbody tr.fd-click:hover td{ background:var(--brand-soft); }
.fd-table tbody tr.fd-click:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px; }
.fd-table th.sortable{ cursor:pointer; user-select:none; }
.bg-day-table td.num, .bg-day-table th.num{ text-align:right; white-space:nowrap; }
.bg-day-table .bg-cell{ width:110px; }
.bg-day-table .bg-pct{ width:84px; }
.bg-day-table tr.bg-day-total td{ background:var(--brand-soft); font-weight:600; }
.bg-day-table tfoot th{ border-top:1px solid var(--border); }
.bg-day-table tfoot tr:first-child th{ border-top:2px solid var(--border); }
.bg-day-table .bg-over{ color:var(--danger); }
.bg-day-table .bg-under{ color:var(--accent); }
.fd-table th.sortable .sort-arrow{ opacity:.3; }
.fd-table th.sortable.sort-active .sort-arrow{ opacity:1; color:var(--accent); }
.fd-table th.sortable:hover .sort-arrow{ opacity:.8; }
.fd-chev{ color:var(--brand); font-weight:700; margin-left:6px; }
.fd-table tbody tr.fd-click td:first-child{ color:var(--brand); font-weight:600; }

/* Inventory > Stock on Hand: 12-13 numeric columns, so tighter cells and the description kept to one line. */
.soh-table th, .soh-table td{ padding:9px 8px; }
.soh-table td:nth-child(2){ max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.soh-table th{ letter-spacing:.03em; }
.soh-filters{ display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; border:1px solid var(--border); border-radius:9px; padding:6px 14px 9px; margin:0; background:var(--surface); }
.soh-filters legend{ font-size:12px; font-weight:600; color:var(--text-muted); padding:0 6px; }
.soh-filters label{ display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; }

/* Inventory > Article: one article's form (article.php). */
.ar-search{ position:relative; }
.ar-search input{ width:380px; }
.ar-results{ position:absolute; z-index:20; top:100%; left:0; right:0; margin:4px 0 0; padding:4px; list-style:none; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); max-height:340px; overflow:auto; }
.ar-results li{ padding:8px 10px; border-radius:7px; cursor:pointer; font-size:13px; display:flex; gap:10px; }
.ar-results li:hover, .ar-results li.on{ background:var(--brand-soft); }
.ar-results li .ar-no{ font-weight:700; color:var(--brand); min-width:84px; }
.ar-results li.ar-none{ cursor:default; color:var(--text-muted); }
.ar-card{ display:flex; gap:18px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin:6px 0 4px; }
.ar-pic{ flex:none; width:120px; height:120px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--text-muted); font-size:12px; text-align:center; }
.ar-pic img{ width:100%; height:100%; object-fit:contain; }
.ar-main{ flex:1; min-width:0; }
.ar-main h3{ margin:0; font-size:20px; }
.ar-facts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px 18px; }
.ar-fact{ display:flex; flex-direction:column; gap:2px; font-size:13px; }
.ar-fact .stat-label{ font-size:11px; }
.ar-fact b{ font-size:15px; }
.ar-fact .tab-note{ margin:0; }
#arApp .stats{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
#arApp .stat-value{ font-size:20px; }
@media (max-width:700px){ .ar-card{ flex-direction:column; } .ar-search, .ar-search input{ width:100%; max-width:100%; } }
.fd-art-link{ color:var(--brand); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.fd-art-link:hover{ text-decoration-thickness:2px; }
.users-table tr.cc-selected td{ background:var(--brand-soft); font-weight:600; }

.ar-picwrap{ flex:none; width:120px; display:flex; flex-direction:column; align-items:stretch; gap:6px; }
.ar-picwrap .btn{ justify-content:center; text-align:center; border:1px solid var(--border); }
#arPicsPanel .art-gallery{ margin:12px 0 8px; }
#pbApp .users-table td:first-child, #pbApp .users-table th:first-child{ white-space:nowrap; }

/* Sales and Purchases > Calendar (report_calendar.php) */
.rc-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.rc-reports{ display:inline-flex; gap:0; }
.rc-reports .rc-rep{ border-radius:0; margin-left:-1px; }
.rc-reports .rc-rep:first-child{ border-radius:9px 0 0 9px; margin-left:0; }
.rc-reports .rc-rep:last-child{ border-radius:0 9px 9px 0; }
.rc-reports .rc-rep:only-child{ border-radius:9px; }
.rc-reports .rc-rep.active{ background:var(--brand); border-color:var(--brand); color:#fff; }
.rc-month{ display:flex; align-items:center; gap:6px; }
.rc-nav{ padding:6px 12px; font-size:16px; line-height:1; }
.rc-dept{ position:relative; }
.rc-dept-menu{ position:absolute; z-index:30; top:calc(100% + 4px); left:0; min-width:260px; max-height:340px; overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:6px 0; }
.rc-dept-row{ display:flex; align-items:center; gap:8px; padding:6px 12px; font-size:13px; cursor:pointer; }
.rc-dept-row:hover{ background:var(--surface-2); }
.rc-dept-all{ border-bottom:1px solid var(--border); margin-bottom:4px; }
.rc-gridwrap{ overflow-x:auto; }
.rc-grid{ width:100%; border-collapse:separate; border-spacing:4px; table-layout:fixed; min-width:640px; }
.rc-grid th{ font-size:12px; color:var(--text-muted); font-weight:600; text-align:center; padding:4px; }
.rc-grid td{ height:84px; vertical-align:top; border-radius:9px; padding:6px 8px; position:relative; }
.rc-grid td.rc-out{ background:transparent; }
.rc-grid td.rc-empty{ background:var(--surface-2); color:var(--text-muted); opacity:.7; }
.rc-grid td.rc-day{ background:color-mix(in srgb, var(--brand) calc(var(--rc-shade) * 100%), var(--brand-soft)); cursor:pointer; border:1px solid var(--border); }
.rc-grid td.rc-day:hover, .rc-grid td.rc-day:focus{ outline:2px solid var(--brand); outline-offset:-2px; }
.rc-grid td.rc-sel{ outline:2px solid var(--brand); outline-offset:-2px; }
.rc-grid td.rc-wk, .rc-grid th.rc-wk{ width:104px; text-align:right; font-weight:700; background:transparent; font-size:13px; vertical-align:middle; }
.rc-dn{ display:block; font-size:11.5px; font-weight:600; color:var(--text-muted); }
.rc-val{ display:block; font-size:15px; font-weight:700; margin-top:4px; }
.rc-sub{ display:block; font-size:11px; color:var(--text-muted); margin-top:2px; }
.rc-detail{ margin-top:16px; }
.rc-grid td.rc-future{ background:transparent; border:1px dashed var(--border); opacity:1; }
.rc-muted{ color:var(--text-muted); font-weight:600; }
.rc-weekview td{ height:150px !important; }
.rc-weekview .rc-val{ font-size:20px; }
.rc-t-pos{ color:var(--status-active); }
.rc-t-neg{ color:var(--danger); }
@media (max-width:700px){
  .rc-grid{ border-spacing:2px; min-width:560px; }
  .rc-grid td{ height:70px; padding:4px 5px; }
  .rc-val{ font-size:13px; }
  .rc-grid td.rc-wk, .rc-grid th.rc-wk{ width:70px; }
  /* the 7-day view has big numbers: shrink them so six and seven figure amounts fit a phone's column */
  .rc-weekview{ min-width:480px; }
  .rc-weekview td{ height:112px !important; padding:4px 3px; }
  .rc-weekview .rc-val{ font-size:11px; letter-spacing:-.2px; white-space:nowrap; }
  .rc-weekview .rc-dn{ font-size:10.5px; }
  .rc-weekview .rc-sub{ font-size:9.5px; white-space:nowrap; }
  .rc-weekview td.rc-wk, .rc-weekview th.rc-wk{ width:64px; font-size:11px; }
}

/* Requests page: ageing tiles and the Age column (assets/requests.js) */
.rq-aging{ margin:10px 0 4px; }
.rq-age{ font:inherit; text-align:left; cursor:pointer; color:var(--text); }
.rq-age:hover{ border-color:var(--brand); }
.rq-age.active{ outline:2px solid var(--brand); outline-offset:-2px; }
.rq-age-warn .stat-value{ color:var(--accent); }
.rq-age-bad .stat-value{ color:var(--danger); }
.rq-age-cell{ white-space:nowrap; }
.rq-age-cell.rq-age-warn{ color:var(--status-vip); font-weight:600; }
.rq-age-cell.rq-age-bad{ color:var(--danger); font-weight:700; }
@media (max-width:700px){ .rq-aging.stats-5{ grid-template-columns:repeat(2,1fr); } }

/* Financial Dashboard: POS channel split, investment participation and customer count tiles */
.fd-split{ display:flex; height:10px; border-radius:999px; overflow:hidden; background:var(--surface-2); border:1px solid var(--border); margin:4px 0 2px; }
.fd-split-in{ background:var(--brand); }
.fd-split-on{ background:var(--accent); }
.fd-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:baseline; }
.fd-dot-in{ background:var(--brand); }
.fd-dot-on{ background:var(--accent); }
.fd-tile-inv .fd-value{ color:var(--brand); font-size:44px; }
@media (max-width:700px){ .fd-tile-inv .fd-value{ font-size:38px; } }

/* Sales and Purchases > Daily Report (daily_report.php): the picture preview and its controls */
.dr-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.dr-day{ display:flex; align-items:center; gap:6px; }
.dr-nav{ padding:6px 12px; font-size:16px; line-height:1; }
.dr-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; }
.dr-stage{ max-width:720px; margin-top:12px; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); background:#F2F4EF; }
.dr-stage canvas{ display:block; width:100%; height:auto; }
@media (max-width:700px){ .dr-actions{ margin-left:0; width:100%; } .dr-actions .btn{ flex:1; } }

/* Dashboard > Unresolved customer requests card (assets/dashboard.js) */
.dash-rq-bands{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:8px 0 6px; }
.dash-rq-band{ display:flex; flex-direction:column; gap:2px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); text-decoration:none; color:var(--text); }
.dash-rq-band:hover{ border-color:var(--brand); }
.dash-rq-n{ font-size:20px; font-weight:700; }
.dash-rq-l{ font-size:11.5px; color:var(--text-muted); }
.dash-rq-warn .dash-rq-n{ color:var(--accent); }
.dash-rq-bad .dash-rq-n{ color:var(--danger); }
.dash-rq-band.zero .dash-rq-n{ color:var(--text-muted); font-weight:600; }
.pill.dash-rq-pill-bad{ background:var(--danger-soft); color:var(--danger); }
@media (max-width:700px){ .dash-rq-bands{ grid-template-columns:repeat(2,1fr); } }

/* Sales Transactions: "Search all dates" toggle; Article form > Sales Transactions tab */
.sb-alldates{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--text); white-space:nowrap; cursor:pointer; }
.sb-alldates input{ width:16px; height:16px; }
.ar-txn-filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.ar-txn-filters input[type="search"], .ar-txn-filters input[type="date"]{ padding:8px 10px; border:1px solid var(--border, #d8d8d8); border-radius:8px; font:inherit; background:var(--surface, #fff); color:var(--text); }

/* My Account > API credentials (Owner only) */
.pill.ac-ok{ background:var(--status-active-soft); color:var(--status-active); }
.pill.ac-bad{ background:#fde8e8; color:var(--danger, #b3261e); }
.pill.ac-unknown{ background:var(--status-inactive-soft); color:var(--text-muted); }
.ac-actions{ white-space:normal; min-width:230px; }
.ac-actions .btn{ margin:0 4px 4px 0; }
.ac-secret{ display:inline-block; padding:8px 10px; background:var(--surface-2, #f3f3f3); border-radius:8px; font-size:14px; word-break:break-all; user-select:all; }
.ac-log{ margin-top:14px; }
.ac-log summary{ cursor:pointer; font-weight:600; margin-bottom:8px; }

/* Financial Calendar (financial_calendar.php) and the fiscal labels / chooser used on other screens (assets/fiscal.js) */
.fc-jump{ display:inline-flex; }
.fiscal-picker{ display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap; }
.fiscal-picker select{ max-width:300px; }
.fiscal-label{ display:block; font-size:12.5px; color:var(--text-muted); margin-top:2px; }
.fiscal-label a{ color:inherit; text-decoration:underline dotted; }
.fc-grid td.fc-day{ height:92px; overflow:hidden; }
.fc-grid td.rc-wk.fc-wk, .fc-grid th.fc-wkh{ width:96px; text-align:right; font-weight:700; font-size:13px; vertical-align:middle; }
.fc-wk-sub{ display:block; font-size:11px; font-weight:500; color:var(--text-muted); }
.fc-grid td.fc-day{ background:var(--surface); border:1px solid var(--border); cursor:pointer; }
.fc-grid td.fc-day.fc-pstart{ border-left:4px solid var(--brand); }
.fc-grid td.fc-day.fc-none{ background:var(--surface-2); opacity:.6; }
.fc-grid td.fc-day.fc-today{ background:var(--brand-soft); }
.fc-grid td.fc-day.fc-today .rc-dn{ color:var(--brand); }
.fc-mark{ display:inline-block; font-size:10px; font-weight:700; background:var(--brand-soft); color:var(--brand); border-radius:6px; padding:1px 5px; margin:1px 3px 1px 0; }
.fc-mark-q{ background:var(--accent-soft); color:var(--accent); }
.fc-mark-y{ background:var(--status-lead-soft); color:var(--status-lead); }
.fc-note-line{ display:block; font-size:11px; line-height:1.3; margin-top:2px; padding-left:6px; border-left:2px solid var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fc-note-more{ display:block; font-size:10.5px; color:var(--text-muted); margin-top:1px; }
.fc-detail-panel{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; }
.fc-detail-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.fc-detail-head h3{ margin:0; }
.fc-fiscal-line{ margin:6px 0 2px; }
.fc-detail-panel h4{ margin:14px 0 6px; font-size:13px; }
.fc-notes{ list-style:none; margin:0 0 10px; padding:0; }
.fc-notes li{ padding:6px 0; border-bottom:1px solid var(--border); display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.fc-note-text{ font-weight:600; }
.fc-add, .fc-edit-form{ display:flex; gap:8px; flex-wrap:wrap; }
.fc-add input{ flex:1; min-width:220px; }
.fc-edit-form input{ flex:1; min-width:200px; }
.fc-year-table tr.fc-prow{ cursor:pointer; }
.fc-year-table tr.fc-prow:hover td, .fc-year-table tr.fc-cur td{ background:var(--brand-soft); }
@media (max-width:700px){
  .fc-grid td.fc-day{ height:76px; }
  .fc-mark{ font-size:9px; padding:0 3px; }
  .fc-grid td.rc-wk.fc-wk, .fc-grid th.fc-wkh{ width:66px; }
}

/* Subscription banner from fourSITE HQ (includes/hq.php, layout_start.php) */
.hq-banner{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; padding:10px 14px; border-radius:10px; font-size:13.5px; font-weight:500; }
.hq-banner-warning{ background:var(--accent-soft); border:1px solid var(--accent); color:var(--text); }
.hq-banner-readonly{ background:var(--danger-soft); border:1px solid var(--danger); color:var(--text); }

/* fourSITE wordmark (brand_name_html in includes/db.php): "four" in the text colour, "SITE" in the logo blue */
.bn-site{ color:var(--logo-blue); }
.bn-rest{ font-weight:500; color:var(--text-muted); }

/* ---- Inventory > Buy-in Deals (supplier_deals.php, assets/supplier_deals.js) ---- */
.sd-head-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.sd-box{ border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:12px 16px 16px; margin:0 0 16px; min-width:0; }
.sd-box legend{ font-weight:700; font-size:14px; padding:0 6px; }
.sd-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px 14px; }
.sd-grid label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:4px; color:var(--text-muted); }
.sd-grid input, .sd-grid select{ width:100%; box-sizing:border-box; }
.sd-inline{ display:flex; align-items:flex-end; grid-column:span 2; }
.sd-linebar{ display:flex; gap:12px; justify-content:space-between; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.sd-add{ display:inline-flex; gap:6px; align-items:center; }
.sd-add input{ width:130px; }
.sd-stats{ margin-top:8px; }
.sd-table tbody tr.sd-row{ cursor:pointer; }
.sd-table tbody tr.sd-row:hover{ background:var(--surface-2); }
.sd-lines-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:8px; }
.sd-lines{ min-width:100%; border:0; }
.sd-lines th, .sd-lines td{ white-space:nowrap; padding:5px 8px; }
.sd-lines thead th{ font-size:11.5px; vertical-align:bottom; }
.sd-lines tfoot th{ background:var(--surface-2); }
.sd-lines .sd-g-order{ background:var(--brand-soft); color:var(--brand); text-align:center; }
.sd-lines .sd-g-receipt{ background:var(--status-vip-soft); color:var(--status-vip); text-align:center; }
.sd-lines .sd-g-review{ background:var(--status-active-soft); color:var(--status-active); text-align:center; }
.sd-lines .sd-g-base{ text-align:left; }
.sd-in{ border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:6px; padding:5px 6px; font:inherit; font-size:13px; box-sizing:border-box; }
.sd-in.sd-art{ width:96px; }
.sd-in.sd-desc{ width:210px; }
.sd-in.sd-num{ width:92px; text-align:right; }
.sd-in.sd-narrow{ width:56px; }
.sd-in.sd-wide{ width:220px; text-align:left; }
.sd-calc{ background:var(--surface-2); color:var(--text-muted); }
.sd-calc-h{ color:var(--text-muted); font-style:italic; }
.sd-pulled{ color:var(--status-active); font-size:10px; margin-left:3px; }
.sd-pos, .sd-pos-t{ color:var(--status-active); }
.sd-neg, .sd-neg-t{ color:var(--danger); }
.sd-over{ background:var(--danger-soft); color:var(--danger); }
.sd-soon{ background:var(--status-vip-soft); color:var(--status-vip); }
.sd-v-ok, .sd-v-ok-t{ background:var(--status-active-soft); color:var(--status-active); }
.sd-v-mid, .sd-v-mid-t{ background:var(--status-vip-soft); color:var(--status-vip); }
.sd-v-bad, .sd-v-bad-t{ background:var(--danger-soft); color:var(--danger); }
.stat-value.sd-v-ok-t, .stat-value.sd-v-mid-t, .stat-value.sd-v-bad-t{ background:none; }
.stat-value.sd-v-ok-t{ color:var(--status-active); } .stat-value.sd-v-mid-t{ color:var(--status-vip); } .stat-value.sd-v-bad-t{ color:var(--danger); }
@media (max-width:640px){ .sd-box{ padding:10px 10px 14px; } .sd-grid{ grid-template-columns:1fr 1fr; } }

/* Strike Rate: colour bands (green 95%+, amber 85-95%, red below) and the ring that shows the percentage. */
.sr-green{ --sr:var(--status-active); --sr-soft:var(--status-active-soft); }
.sr-amber{ --sr:var(--status-vip); --sr-soft:var(--status-vip-soft); }
.sr-red{ --sr:var(--danger); --sr-soft:var(--danger-soft); }
.sr-none{ --sr:var(--status-inactive); --sr-soft:var(--status-inactive-soft); }
.sr-pill{ display:inline-block; min-width:56px; text-align:center; padding:2px 8px; border-radius:999px; font-weight:700; background:var(--sr-soft); color:var(--sr); }
.sr-ring{ position:relative; width:120px; height:120px; flex:none; }
.sr-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.sr-ring .sr-track{ fill:none; stroke:var(--status-inactive-soft); stroke-width:3.4; }
.sr-ring .sr-arc{ fill:none; stroke:var(--sr); stroke-width:3.4; stroke-linecap:round; }
.sr-ring .sr-num{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:24px; font-weight:700; color:var(--sr); line-height:1.1; }
.sr-ring .sr-num small{ font-size:11px; font-weight:500; color:var(--text-muted); }
.sr-ring-sm{ width:84px; height:84px; } .sr-ring-sm .sr-num{ font-size:17px; }
.sr-hero{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin:6px 0 14px; padding:14px 18px; background:var(--surface); border:1px solid var(--border); border-radius:14px; }
.sr-hero-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px 22px; flex:1; min-width:240px; }
.sr-hero-stats .stat-label{ display:block; font-size:12px; color:var(--text-muted); }
.sr-hero-stats .stat-value{ font-size:20px; font-weight:650; }
.sr-legend{ font-size:12px; color:var(--text-muted); }
.sr-legend .sr-pill{ min-width:0; padding:1px 8px; font-size:11px; margin:0 2px; }
.sr-tile-body{ display:flex; align-items:center; gap:16px; }
.sr-tile-body .fd-line{ line-height:1.5; }

/* Sales Transactions: time-of-day window (CCTV) */
.sb-timewrap { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-timewrap label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-muted); }
.sb-timewrap input[type="time"] { padding: 5px 6px; }
.sb-time { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Sales by Time Slot / Fresh Demand / Production Plan */
.ts-table td, .ts-table th { white-space: nowrap; }
.ts-table tfoot td { font-weight: 700; border-top: 2px solid var(--border); }
.ts-barcol { width: 150px; min-width: 110px; }
.ts-bar { display: flex; height: 14px; background: rgba(128,128,128,.12); border-radius: 3px; overflow: hidden; }
.ts-bar-s { background: #2f6f9f; display: block; height: 100%; }
.ts-bar-o { background: #e0a030; display: block; height: 100%; }
.ts-key { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; margin: 0 4px 0 12px; }
.ts-key-s { background: #2f6f9f; margin-left: 0; }
.ts-key-o { background: #e0a030; }
.table-scroll { overflow-x: auto; }
.fd-table td small { color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.fd-table .fd-first { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 200px; white-space: normal; }
.fd-table .fd-cell { min-width: 52px; }
.fd-table tr.fd-click { cursor: pointer; }
.fd-table tr.fd-click:hover td.fd-first { text-decoration: underline; }
.empty-cell { text-align: center; color: var(--text-muted); padding: 22px !important; }
.pp-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 12px 14px; margin: 12px 0; }
.pp-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pp-card-head h3 { margin: 0; font-size: 16px; }
.pp-card-actions { margin-left: auto; }
.pp-tot { color: var(--text-muted); }
.pp-hist { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.pp-day { background: var(--sr-soft); color: var(--sr); font-size: 11px; line-height: 1.25; text-align: center; padding: 3px 6px; border-radius: 6px; min-width: 52px; }
.pp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; }
.pp-chip small { color: var(--text-muted); }
.pp-x { background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1; color: var(--text-muted); }
.pp-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.pp-plan-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; }
@media (max-width: 860px) { .pp-plan-grid { grid-template-columns: 1fr; } }
.pp-guide h3 { margin: 0 0 6px; font-size: 15px; }
.pp-meas td small { color: var(--text-muted); }
.pp-batch-table input[type="time"], .pp-batch-table input[type="number"], .pp-batch-table input[type="text"] { padding: 5px 6px; max-width: 100%; }

/* Dashboards: switcher, Personalized Dashboard grid and chooser */
.dash-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.dash-switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-switch-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.dash-switch-label select { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: 13px; }
.dash-personal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
.dash-personal > .dash-wide { grid-column: 1 / -1; }
@media (max-width: 860px) { .dash-personal { grid-template-columns: 1fr; } }
.dash-personal .dashboard-card { margin: 0; }
.dash-links { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-fin a.fd-tile { text-decoration: none; }
.dash-fin .fd-h { margin: 0 0 8px; }
.dash-fin .fd-h .fd-h-note { margin-left: 8px; font-weight: 400; }
.dash-custom { margin-top: 14px; }
.dash-custom-list { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dash-custom-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: var(--surface); }
.dash-custom-item:not(.on) { opacity: .7; background: var(--surface-2); }
.dash-custom-item label { flex: 1; cursor: pointer; display: block; }
.dash-custom-move { display: inline-flex; gap: 4px; flex: none; }
.dash-prod-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.dash-prod-row:last-of-type { border-bottom: none; }
.dash-prod-batches { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.dash-prod-batch { font-size: 12.5px; color: var(--text-muted); }

.ts-nav-row { display: flex; gap: 6px; align-items: center; }
.ts-arrow { padding: 6px 10px; min-width: 38px; }
.ts-arrow:disabled { opacity: .35; cursor: default; }
.ts-sort { cursor: pointer; user-select: none; }
.ts-sort:hover { text-decoration: underline; }
.ts-sorted { color: var(--accent); }

.fd-sub-note { font-size: 12px; color: var(--text-muted); margin: 14px 0 8px; }
.fd-pie-row { display: flex; align-items: center; gap: 14px; margin: 4px 0 6px; }
.fd-pie { width: 84px; height: 84px; flex: 0 0 84px; }
.fd-pie-in { fill: var(--brand); stroke: var(--surface); stroke-width: 1.5; }
.fd-pie-on { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.fd-pie-legend { font-size: 13px; line-height: 1.5; min-width: 0; }

/* ---------- Visual Dashboard ---------- */
:root { --vd-red: #D1362B; }
@media (prefers-color-scheme: dark) { :root { --vd-red: #F2584B; } }
.vd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 4px 0 14px; }
.vd-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.vd-seg button { border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px; cursor: pointer; }
.vd-seg button + button { border-left: 1px solid var(--border); }
.vd-seg button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.vd-seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.vd-nav { display: inline-flex; align-items: center; gap: 8px; }
.vd-label { min-width: 150px; text-align: center; font-size: 14px; }
.vd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 14px; }
.vd-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; }
.vd-kpi-label { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.vd-kpi-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 30px; font-weight: 700; line-height: 1.15; }
.vd-kpi-line { font-size: 13px; }
.vd-red-text { color: var(--vd-red); }
.vd-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px 16px; margin-bottom: 14px; min-width: 0; }
.vd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.vd-card-head h3 { margin: 0; font-size: 15px; display: flex; align-items: baseline; gap: 8px; }
.vd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.vd-chart { position: relative; }
.vd-svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.vd-grid { stroke: var(--border); stroke-width: 1; }
.vd-axis { fill: var(--text-muted); font-size: 11px; }
.vd-guide { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.vd-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.vd-line.vd-ty { stroke: var(--brand); stroke-width: 2.8; }
.vd-line.vd-ly { stroke: var(--text-muted); stroke-width: 2; opacity: .75; }
.vd-line.vd-bud { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; }
.vd-dot.vd-ty { fill: var(--brand); }
.vd-dot.vd-ly { fill: var(--text-muted); opacity: .75; }
.vd-dot.vd-bud { fill: var(--accent); }
.vd-store { fill: var(--brand); background: var(--brand); }
.vd-online { fill: var(--accent); background: var(--accent); }
.vd-col:hover .vd-store, .vd-col:hover .vd-online { opacity: .8; }
.vd-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.vd-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.vd-key.vd-ty { background: var(--brand); }
.vd-key.vd-ly { background: var(--text-muted); opacity: .75; }
.vd-key.vd-bud { background: var(--accent); }
.vd-legend-inline { margin-right: 10px; }
.vd-bars { display: flex; flex-direction: column; gap: 7px; }
.vd-bar-row { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.vd-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-bar-track { background: var(--surface-2); border-radius: 5px; height: 16px; overflow: hidden; }
.vd-bar-fill { display: block; height: 100%; background: var(--brand); border-radius: 5px; }
.vd-bars-red .vd-bar-fill { background: var(--vd-red); }
.vd-bar-val { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.vd-more { align-self: flex-start; margin-top: 4px; }
.vd-tip { position: fixed; z-index: 60; pointer-events: none; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; font-size: 12.5px; line-height: 1.5; box-shadow: 0 6px 20px rgba(0,0,0,.18); max-width: 260px; }
@media (max-width: 900px) { .vd-two { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .vd-label { min-width: 0; flex: 1; }
  .vd-nav { width: 100%; justify-content: space-between; }
  .vd-bar-row { grid-template-columns: minmax(80px, 38%) 1fr auto; gap: 8px; }
  .vd-kpi-value { font-size: 26px; }
}
@media (prefers-color-scheme: dark) { .vd-seg button[aria-pressed="true"] { color: var(--bg); } }

/* ---------- Franchise Integrated Margin Detail ---------- */
.fim-custom { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.fim-scroll { overflow: auto; max-height: 78vh; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.fim-table { border-collapse: separate; border-spacing: 0; font-size: 12px; white-space: nowrap; width: 100%; }
.fim-table th, .fim-table td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4px 8px; }
.fim-table thead th { position: sticky; top: 0; z-index: 3; background: var(--surface); text-align: center; white-space: normal; font-weight: 600; font-size: 11.5px; min-width: 92px; vertical-align: middle; }
.fim-table thead tr:nth-child(2) th { top: 52px; font-weight: 500; color: var(--text-muted); white-space: nowrap; min-width: 0; padding: 2px 8px; text-align: right; z-index: 3; }
.fim-table thead th.fim-grey { background: var(--surface-2); }
.fim-table thead tr:nth-child(1) th { height: 52px; box-sizing: border-box; }
.fim-s1, .fim-s2 { position: sticky; background: var(--surface); z-index: 2; text-align: left; }
.fim-s1 { left: 0; min-width: 78px; }
.fim-s2 { left: 78px; min-width: 190px; border-right: 2px solid var(--border) !important; }
.fim-table thead .fim-s1, .fim-table thead .fim-s2 { z-index: 5; }
.fim-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.fim-table td.c { text-align: center; font-variant-numeric: tabular-nums; }
.fim-table td.fim-warn { background: var(--accent-soft); }
.fim-overall td { font-weight: 600; background: var(--surface-2); }
.fim-overall td.fim-s1, .fim-overall td.fim-s2 { background: var(--surface-2); }
.fim-table tbody tr:hover td { background: var(--brand-soft); }
.fim-table tbody tr:hover td.fim-warn { background: var(--accent-soft); }
.fim-total td { font-weight: 700; background: var(--surface-2); position: sticky; bottom: 0; z-index: 2; border-top: 2px solid var(--border); }
.fim-total td.fim-s1, .fim-total td.fim-s2 { z-index: 4; }
.fim-summary { border-collapse: collapse; margin: 18px 0 6px; font-size: 13.5px; }
.fim-summary th { text-align: left; font-weight: 700; padding: 6px 14px 6px 10px; border: 1px solid var(--border); background: var(--surface); min-width: 170px; }
.fim-summary td { padding: 6px 14px; border: 1px solid var(--border); text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 130px; background: var(--surface); }
.fim-summary td.tab-note { border: 0; text-align: left; font-weight: 400; background: transparent; padding-left: 12px; }
.fim-summary .fim-pctcell { background: var(--accent-soft); }
.fim-summary td.fim-bad { color: var(--danger); background: var(--accent-soft); }
.fim-summary td.fim-good { color: #2E7D32; background: #E2F0E3; }
@media (prefers-color-scheme: dark) { .fim-summary td.fim-good { color: #7ED08A; background: #17301B; } }
.fim-warnnote { border-color: var(--accent); }
.fim-modal { max-width: 640px; }
.fim-set-list { max-height: 46vh; overflow: auto; margin: 10px 0; }
.fim-store-budget { margin: 6px 0; }
@media (max-width: 700px) { .fim-scroll { max-height: 70vh; } .fim-s2 { min-width: 140px; left: 64px; } .fim-s1 { min-width: 64px; } }

/* POS Channel Sales (pos_channels.php) and POS Basket Analysis (pos_basket_analysis.php) */
.pc-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.pc-pick-label { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.pc-chips { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; }
.pc-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; background: var(--bg); }
.pc-chip input { margin: 0; }
.pc-quick { display: inline-flex; gap: 4px; }
.pc-group { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; margin-left: auto; cursor: pointer; }
.fd-table tbody tr.pc-hot td { background: var(--brand-soft); font-weight: 600; }
.pb-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.pb-search input[type="search"] { min-width: 260px; max-width: 100%; }
.pb-tree .pb-div td { background: var(--bg); font-weight: 700; }
.pb-tree .pb-dept td:first-child { padding-left: 26px; }
.pb-tree .pb-art td { font-size: 12.5px; }
.pb-tree .pb-art td:first-child { padding-left: 52px; }
.pb-tree .pb-toggle { display: inline-block; width: 18px; cursor: pointer; color: var(--text-muted); user-select: none; }
.pb-tree tr.pb-click { cursor: pointer; }
.pb-tree tr.pb-click:hover td { background: var(--brand-soft); }
.pb-tree .pb-more td { padding-left: 52px; }
.pb-code { color: var(--text-muted); font-size: 12px; margin-right: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@media (max-width: 700px) { .pc-group { margin-left: 0; } .pb-search input[type="search"] { min-width: 0; width: 100%; } }
.pc-table th:first-child, .pc-table td:first-child { white-space: nowrap; }
.rb-bar .vd-seg { max-width: 100%; }
@media (max-width: 480px) { .rb-bar .vd-seg button { padding: 8px 10px; font-size: 12.5px; } }

/* Fresh Demand: every time slot fits on screen (no sideways scroll); long headings wrap */
.fd-demand { table-layout: fixed; width: 100%; min-width: 760px; }
.fd-demand th, .fd-demand td { padding: 7px 4px; }
.fd-demand th.fd-first, .fd-demand td.fd-first { width: 170px; min-width: 0; padding-left: 10px; }
.fd-demand th.fd-slot { white-space: normal; line-height: 1.2; font-size: 11px; letter-spacing: 0; overflow-wrap: anywhere; vertical-align: bottom; }
.fd-demand th.sortable { white-space: normal; }
.fd-demand th.num { white-space: normal; }
.fd-demand td.num { padding-right: 5px; }
.fd-demand th:nth-last-child(2) { width: 62px; }
.fd-demand th:last-child { width: 72px; }
.fd-demand.fd-dense th.fd-slot, .fd-demand.fd-dense td.fd-cell { font-size: 10.5px; padding-left: 1px; padding-right: 1px; text-align: center; }
.fd-demand.fd-dense th.fd-first, .fd-demand.fd-dense td.fd-first { width: 150px; }
.fd-demand .fd-cell { min-width: 0; }
.fd-demand th.sortable .sort-arrow { display: inline-block; font-size: 9px; }
.fd-demand.fd-dense th.sortable:not(.sort-active) .sort-arrow { display: none; }
.fd-demand.fd-dense th.fd-slot { font-size: 9px; letter-spacing: -.04em; overflow-wrap: normal; white-space: nowrap; }

/* Sales Graph (sales_graph.php) and the Visual Dashboard link into it */
.sg-back { margin: 0 0 6px; }
.sg-pick { margin-top: -4px; }
.sg-chart .vd-svg { max-height: 420px; }
.vd-link-hint { font-size: 12.5px; }
.vd-line-click { cursor: pointer; }

/* Customer merge preview (customers.php merge modal) */
.merge-preview { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--border, #d9e0ea); border-radius: 10px; background: var(--surface-2, #f6f8fb); font-size: 14px; max-height: 280px; overflow: auto; }
.merge-preview p { margin: 6px 0; }
.merge-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.merge-list { margin: 4px 0 6px 18px; padding: 0; columns: 2; }
.merge-confirm { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 6px 0; }
@media (max-width: 560px) { .merge-cols { grid-template-columns: 1fr; } .merge-list { columns: 1; } }

/* Per-person permissions (Settings > Staff accounts > Permissions) */
.modal.modal-wide { max-width: 860px; width: calc(100% - 32px); }
.up-scroll { max-height: 55vh; overflow: auto; margin: 8px 0; }
.up-table td, .up-table th { padding: 6px 10px; }
.up-yes { color: #1b7f4b; font-weight: 600; }
.up-no { color: #8a94a6; }
.up-result.up-custom { text-decoration: underline dotted; }
.up-row-custom { background: rgba(251, 191, 36, 0.12); }
.up-table select { min-width: 140px; }

.sg-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.vd-line.sg-trend { stroke: #7c3aed; stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; fill: none; }
.vd-key.sg-trend-key { background: #7c3aed; }

/* Department access modal (Settings > Staff accounts > Departments) */
.ud-mode, .ud-all, .ud-item { display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:13px; font-weight:500; color:var(--text); }
.ud-mode { margin:8px 0; }
.ud-mode input, .ud-all input, .ud-item input { width:16px; height:16px; flex:none; margin:0; }
.ud-bar { display:flex; gap:12px; align-items:center; margin:10px 0 4px; }
.ud-bar input[type=search] { flex:1; max-width:320px; }
.ud-group { margin:10px 0; }
.ud-all { font-weight:600; margin-bottom:2px; }
.ud-item { padding:2px 0 2px 24px; }
#userDeptsList { max-height: 36vh; }

/* POS Basket Analysis: click a column heading to sort */
.pb-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.pb-sortable:hover { color: var(--accent, #1478c8); }
.pb-arrow { font-size: 10px; display: inline-block; min-width: 12px; }

/* Financial Dashboard: POS net sales shown as big In store / Online figures, total small, mismatch flag */
.fd-pos-pair { display: flex; gap: 16px; flex-wrap: wrap; margin: 6px 0 4px; }
.fd-pos-one { display: flex; flex-direction: column; min-width: 0; }
.fd-pos-name { font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted, #5b6b85); }
.fd-value-pos { font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--brand); }
.fd-pos-one:nth-child(2) .fd-value-pos { color: var(--accent); }
.fd-pos-total { font-size: 12px; color: var(--muted, #5b6b85); margin-top: 6px; }
.fd-flag { display: block; margin-top: 8px; padding: 6px 8px; border-radius: 6px; background: #fdeceb; color: #a3271f; border: 1px solid #f2b8b3; font-size: 12px; font-weight: 600; line-height: 1.35; }
.fd-ok { display: block; margin-top: 6px; font-size: 11px; color: #2c7a4b; }
@media (max-width:700px){ .fd-value-pos { font-size: 28px; } }

/* Waste Report: a column per period, the first column stays in view while scrolling */
.wr-table th, .wr-table td { white-space: nowrap; }
.wr-table td.wr-first, .wr-table thead th:first-child, .wr-table tfoot th:first-child { position: sticky; left: 0; background: var(--surface, #fff); z-index: 1; min-width: 220px; }
.wr-click { cursor: pointer; }
.wr-click:hover td.wr-first { background: #f2f6fb; }
.wr-dept td.wr-first { font-weight: 600; }
.wr-bmc td.wr-first { padding-left: 28px; }
.wr-art td.wr-first { padding-left: 52px; }
.wr-zero { color: #b8c2cf; }
#vdDeptWaste .vd-bar-row { cursor: pointer; }
#vdDeptWaste .vd-bar-row:hover .vd-bar-name { text-decoration: underline; }
.vd-link { color: inherit; text-decoration: none; }
.vd-link:hover { text-decoration: underline; }

/* Notification bell */
.notif { position: relative; }
.notif-btn { position: relative; background: transparent; border: 0; padding: 7px 8px; border-radius: 8px; cursor: pointer; color: var(--text, #14233b); display: inline-flex; align-items: center; }
.notif-btn:hover, .notif-btn[aria-expanded="true"] { background: rgba(29,123,196,.1); }
.notif-has { color: var(--brand, #1d7bc4); }
.notif-badge { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #d4372c; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.notif-panel { position: absolute; right: 0; top: calc(100% + 6px); width: 360px; max-width: 92vw; background: var(--surface, #fff); border: 1px solid var(--border, #dbe3ee); border-radius: 12px; box-shadow: 0 10px 30px rgba(20,35,59,.18); z-index: 60; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border, #dbe3ee); }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; padding: 10px 12px; border-bottom: 1px solid var(--border, #eef2f7); text-decoration: none; color: inherit; font-size: 13px; }
.notif-item:hover { background: #f5f8fc; }
.notif-unread { background: #eef6fd; }
.notif-kind { grid-row: 1; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 4px; background: #e3eaf3; color: #44546a; align-self: start; }
.notif-kind-todo { background: #fdf0d8; color: #8a5a00; }
.notif-kind-watch { background: #dcf1e5; color: #1f6a43; }
.notif-title { grid-column: 2; font-weight: 600; }
.notif-body { grid-column: 2 / 4; color: #5b6b85; font-size: 12px; }
.notif-when { grid-column: 3; grid-row: 1; font-size: 11px; color: #7b8aa0; white-space: nowrap; }
.notif-foot { padding: 8px 12px; font-size: 12px; text-align: center; }


/* Article Watch List */
.wl-add { margin-bottom: 16px; }
.wl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; margin: 6px 0 10px; }
.wl-field { display: flex; flex-direction: column; gap: 4px; position: relative; text-transform: none; letter-spacing: 0; }
.wl-field > span { font-size: 12px; font-weight: 600; color: var(--muted, #5b6b85); }
.wl-wide { grid-column: span 2; }
.wl-search { grid-column: 1 / -1; }
@media (max-width: 700px) { .wl-wide { grid-column: 1 / -1; } }
.wl-results { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--surface, #fff); border: 1px solid var(--border, #dbe3ee); border-radius: 8px; box-shadow: 0 8px 24px rgba(20,35,59,.15); max-height: 280px; overflow-y: auto; }
.wl-res { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; cursor: pointer; font: inherit; font-size: 13px; }
.wl-res:hover { background: #eef6fd; }
.wl-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.wl-checks label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.wl-checks input, .wl-c input { width: 16px; height: 16px; }
.wl-checks button { margin-left: auto; }
.wl-table th.wl-c, .wl-table td.wl-c { text-align: center; }
.wl-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #e6eef8; color: #2a4a72; font-size: 11px; font-weight: 600; margin: 1px 2px 1px 0; }
.wl-seen { font-size: 11px; color: #5b6b85; }
.wl-seen span { display: inline-block; margin-right: 8px; white-space: nowrap; }
.wl-act { white-space: nowrap; }
.wl-focus td { background: #fff8d9; }
.wl-filters input[type=search] { min-width: 200px; }
.wl-field input, .wl-field select, .wl-filters input[type=search], .wl-filters select { border: 1px solid var(--border); background: var(--surface-2, #f6f9fc); border-radius: 8px; padding: 8px 10px; width: 100%; }
.wl-filters input[type=search], .wl-filters select { width: auto; }
.wl-field input:focus, .wl-field select:focus { outline: 2px solid var(--focus); background: var(--surface); }
.modal .wl-field { margin-top: 10px; }
.notif-panel { position: fixed; }

/* Promo participation speedometer (Financial Dashboard): green under 25%, orange 25-34.9, red 35 and over, each in tones. */
.fd-gauge { display: block; margin: 0; flex: 0 1 190px; min-width: 120px; max-width: 190px; }
.fd-gauge svg { display: block; width: 100%; height: auto; }
.fd-gauge-seg { stroke: var(--surface); stroke-width: 1.2; }
.fd-gauge-needle { fill: var(--text); }
.fd-gauge-hub { fill: var(--text); stroke: var(--surface); stroke-width: 2; }
.fd-gauge-tick { fill: var(--text-muted); font-size: 9px; font-weight: 600; }
.fd-gauge-legend { display: block; font-size: 11px; line-height: 1.7; color: var(--text-muted); }
.fd-gauge-legend i + i { margin-left: 8px; }
.fd-gauge-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.fd-value.fd-zone-green { color: #2f8f4e; }
.fd-value.fd-zone-orange { color: #d9730d; }
.fd-value.fd-zone-red { color: #c0392b; }
@media (prefers-color-scheme: dark) {
  .fd-value.fd-zone-green { color: #62c487; }
  .fd-value.fd-zone-orange { color: #f2a04a; }
  .fd-value.fd-zone-red { color: #ee7d6e; }
}

/* Promo participation tile: the big figure on the left, the speedometer beside it. */
.fd-promo-row { display: flex; align-items: center; justify-content: flex-start; gap: 14px; flex-wrap: nowrap; }
.fd-promo-row .fd-value { flex: 0 0 auto; font-size: 40px; }
.fd-promo-row .fd-gauge { flex: 1 1 150px; min-width: 0; max-width: 170px; }
.fd-gauge-legend { font-size: 10px; line-height: 1.5; white-space: nowrap; }
.fd-gauge-legend i + i { margin-left: 6px; }

/* Growth badge in the top right corner of the Sales and Customers tiles (Financial Dashboard and the dashboard widgets): the same green / red as the growth %. */
.fd-tile { position: relative; }
.fd-arrow { position: absolute; top: 14px; right: 18px; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.fd-arrow svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fd-arrow-up { color: var(--status-active); background: var(--status-active-soft); }
.fd-arrow-down { color: var(--danger); background: var(--danger-soft); }
@media (max-width:700px){ .fd-arrow { width: 42px; height: 42px; top: 12px; right: 14px; } .fd-arrow svg { width: 24px; height: 24px; } }

/* Calendar Dashboard (dashboard_calendar.php, assets/dashboard_calendar.js): a compact month calendar per report */
.cd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.cd-card { margin-bottom: 0; }
.cd-total { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 20px; font-weight: 700; }
.cd-sub { margin: 0 0 10px; font-size: 12.5px; color: var(--text-muted); }
.cd-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cd-dow { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 2px 0; }
.cd-day { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 52px; padding: 4px 5px 6px; border-radius: 8px; text-decoration: none; color: inherit; overflow: hidden; }
.cd-none { background: var(--surface-2); color: var(--text-muted); opacity: .7; }
.cd-has { background: color-mix(in srgb, var(--brand) calc(var(--rc-shade) * 100%), var(--brand-soft)); border: 1px solid var(--border); }
.cd-has:hover, .cd-has:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.cd-today { box-shadow: inset 0 0 0 2px var(--brand); }
.cd-n { font-size: 10.5px; font-weight: 600; color: var(--text-muted); }
.cd-v { font-size: 12px; font-weight: 700; white-space: nowrap; letter-spacing: -.2px; }
.cd-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.cd-up { background: var(--status-active); }
.cd-down { background: var(--danger); }
@media (max-width: 900px) { .cd-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .cd-day { min-height: 46px; padding: 3px 3px 5px; } .cd-v { font-size: 11px; } .cd-card { padding: 12px 10px 14px; } }