/* =====================================================================
   POSFIELD design system (Phase 7 visual pass). Loaded last.
   One set of tokens drives every customer-facing surface: the app shell and
   screens (styles.css), the flagged UI (ui-*.css), Support / Team /
   Subscription sheets, onboarding, welcome and plan screens. Visual only:
   no markup, logic or business behaviour depends on this file.
   ===================================================================== */
:root {
  /* POSFIELD brand, straight from the logo — identical values to site/site.css */
  --pf-navy: #083060; --pf-navy-deep: #051c3f; --pf-navy-soft: #0b3d78;
  --pf-blue: #1888f0; --pf-blue-strong: #0f76d8; --pf-blue-bright: #34a1ff; --pf-sky: #7cc4ff; --pf-sky-soft: #d8ecff;
  --pf-gradient: linear-gradient(135deg, var(--pf-navy) 0%, var(--pf-blue-strong) 55%, var(--pf-blue-bright) 100%);
  /* the action colour is the marketing blue; navy carries structure (headers, headings, the logo) */
  --pf-primary: #0f76d8; --pf-primary-600: #0b3d78; --pf-primary-50: #eaf3ff; --pf-primary-100: #d8ecff;
  --pf-ink: #081a38; --pf-muted: #566880; --pf-bg: #f6f9fd; --pf-surface: #ffffff; --pf-surface-2: #e8eef7; --pf-line: #d6dfea; --pf-line-strong: #b9c7da;
  --pf-success: #0e9f6e; --pf-success-50: #e7f7f0; --pf-warning: #b86e05; --pf-warning-50: #fff4e0; --pf-danger: #d63a3a; --pf-danger-50: #fdecec;
  --pf-radius-sm: 10px; --pf-radius: 14px; --pf-radius-lg: 20px; --pf-pill: 999px;
  --pf-shadow-sm: 0 1px 2px rgba(8, 26, 56, .06), 0 2px 8px rgba(8, 26, 56, .05);
  --pf-shadow: 0 2px 6px rgba(8, 26, 56, .06), 0 18px 40px rgba(8, 48, 96, .10);
  --pf-shadow-lg: 0 30px 80px rgba(6, 33, 74, .22);
  --pf-focus: 0 0 0 3px rgba(24, 136, 240, .35);
  --pf-font: 'Cairo', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* the original app tokens follow POSFIELD */
  --bg: var(--pf-bg); --bg-2: var(--pf-surface); --bg-3: var(--pf-surface-2); --border: var(--pf-line);
  --text: var(--pf-ink); --text-dim: var(--pf-muted); --primary: var(--pf-primary); --primary-dark: var(--pf-primary-600);
  --success: var(--pf-success); --warning: var(--pf-warning); --danger: var(--pf-danger); --accent: #0e7490;
}
body.dark-mode {
  /* the same identity after dark: navy deepens into the background, the blue brightens to stay legible on it */
  --pf-navy: #0b3d78; --pf-navy-deep: #03101f; --pf-navy-soft: #12518f;
  --pf-primary: #4aa8ff; --pf-primary-600: #7cc4ff; --pf-primary-50: #0d2440; --pf-primary-100: #123458;
  --pf-ink: #e9f1fb; --pf-muted: #9fb0c6; --pf-bg: #061225; --pf-surface: #0d1d33; --pf-surface-2: #142744; --pf-line: #1e3453; --pf-line-strong: #2c4a70;
  --pf-success: #34d399; --pf-success-50: #0f2a22; --pf-warning: #fbbf24; --pf-warning-50: #2c220c; --pf-danger: #f87171; --pf-danger-50: #2e1416;
  --pf-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --pf-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .35);
  --bg: var(--pf-bg); --bg-2: var(--pf-surface); --bg-3: var(--pf-surface-2); --border: var(--pf-line);
  --text: var(--pf-ink); --text-dim: var(--pf-muted); --primary: var(--pf-primary); --primary-dark: var(--pf-primary-600);
  --success: var(--pf-success); --warning: var(--pf-warning); --danger: var(--pf-danger);
  background: var(--pf-bg) !important;
}

/* ---------- base ---------- */
html, body { font-family: var(--pf-font); }
body { background: var(--pf-bg); color: var(--pf-ink); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid rgba(24, 136, 240, .55); outline-offset: 2px; }
/* Headings focused by script (dialog titles) show no ring; keyboard focus on controls still does */
[tabindex="-1"]:focus { outline: none; }
::placeholder { color: var(--pf-muted); opacity: .75; }
::selection { background: var(--pf-primary-100); }

/* ---------- app header & trial banner ---------- */
.app-header { background: var(--pf-surface) !important; border-bottom: 1px solid var(--pf-line); box-shadow: var(--pf-shadow-sm); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.dark-mode .app-header { background: var(--pf-surface) !important; }
.app-logo, .ds-logo-text, .welcome-title, .license-title { font-weight: 900 !important; letter-spacing: .06em; color: var(--pf-navy) !important; }
body.dark-mode :is(.app-logo, .ds-logo-text, .welcome-title, .license-title) { color: var(--pf-ink) !important; }
.app-logo span:first-child { letter-spacing: .06em; }
#trialBanner { background: var(--pf-ink) !important; color: #fff !important; font-weight: 700 !important; letter-spacing: .01em; }
body.dark-mode #trialBanner { background: var(--pf-primary-50) !important; color: var(--pf-ink) !important; }

/* ---------- screens, typography ---------- */
.screen { animation: pfFade .18s ease; }
@keyframes pfFade { from { opacity: 0; } to { opacity: 1; } }
.screen h2, .screen h3, .modal-title, .section-title, .page-title { color: var(--pf-ink); letter-spacing: -.005em; }
.section-header { align-items: center; margin-bottom: 12px; }
.section-title { font-size: 16px; font-weight: 800; }
.section-count { color: var(--pf-muted); font-weight: 700; }
.text-dim { color: var(--pf-muted) !important; }

/* ---------- cards & stats ---------- */
.card { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); box-shadow: var(--pf-shadow-sm); }
.card:active { transform: none; }
.stat-card { background: var(--pf-surface) !important; border: 1px solid var(--pf-line) !important; border-top: 3px solid var(--pf-primary) !important; box-shadow: var(--pf-shadow-sm); }
.stat-label { color: var(--pf-muted); font-weight: 700; font-size: 12.5px; }
.stat-value { font-weight: 900; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stats-grid { gap: 12px; }

/* ---------- buttons ---------- */
.btn { border-radius: 12px; min-height: 44px; font-weight: 800; letter-spacing: .005em; box-shadow: none; transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--pf-primary) !important; color: #fff !important; box-shadow: var(--pf-shadow-sm) !important; }
.btn-primary:hover { background: var(--pf-primary-600) !important; }
.btn-success { background: var(--pf-success) !important; color: #fff !important; box-shadow: var(--pf-shadow-sm) !important; }
.btn-danger { background: var(--pf-danger) !important; color: #fff !important; }
.btn-outline { background: var(--pf-surface); color: var(--pf-ink); border: 1px solid var(--pf-line-strong); }
.btn-outline:hover { border-color: var(--pf-primary); color: var(--pf-primary); }
.btn-sm { min-height: 36px; border-radius: 10px; }
.btn-icon { border-radius: 10px; min-width: 40px; min-height: 40px; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none !important; }

/* ---------- forms ---------- */
.form-label { color: var(--pf-ink); font-weight: 700; font-size: 13px; }
.input, .select, .textarea, select.input, textarea.input, .form-input { background: var(--pf-surface); border: 1px solid var(--pf-line-strong); border-radius: var(--pf-radius-sm); color: var(--pf-ink); min-height: 44px; transition: border-color .15s, box-shadow .15s; }
.input:hover, .select:hover, .textarea:hover { border-color: #b7c0d0; }
.input:focus, .select:focus, .textarea:focus, .form-input:focus { border-color: var(--pf-primary); box-shadow: var(--pf-focus); outline: none; }
body.dark-mode .input, body.dark-mode .select, body.dark-mode .textarea { background: var(--pf-surface-2) !important; border-color: var(--pf-line-strong) !important; color: var(--pf-ink) !important; }
.search-bar .input { border-radius: var(--pf-pill); background: var(--pf-surface); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--pf-primary); }

/* ---------- lists, badges, tables ---------- */
.list-item { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); box-shadow: var(--pf-shadow-sm); transition: border-color .15s, box-shadow .15s; }
.list-item:active { transform: none; background: var(--pf-surface-2); }
@media (hover: hover) { .list-item:hover { border-color: var(--pf-primary-100); box-shadow: var(--pf-shadow); } }
.list-item.danger { border-color: rgba(214, 58, 58, .35); background: var(--pf-danger-50); }
.list-item-title { font-weight: 800; }
.list-item-value { font-variant-numeric: tabular-nums; }
.badge { border-radius: var(--pf-pill); font-weight: 800; padding: 3px 10px; }
.badge-success { background: var(--pf-success-50); color: var(--pf-success); }
.badge-danger { background: var(--pf-danger-50); color: var(--pf-danger); }
.badge-warning { background: var(--pf-warning-50); color: var(--pf-warning); }
.badge-primary { background: var(--pf-primary-50); color: var(--pf-primary); }
.screen table { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); overflow: hidden; }
.screen table th { background: var(--pf-surface-2); color: var(--pf-muted); font-size: 12.5px; font-weight: 800; text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--pf-line); }
.screen table td { padding: 10px 12px; border-bottom: 1px solid var(--pf-line); font-variant-numeric: tabular-nums; }
.screen table tr:last-child td { border-bottom: 0; }

/* ---------- empty, loading, notifications ---------- */
.empty-state { padding: 44px 20px; color: var(--pf-muted); }
.empty-state .icon { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: var(--pf-surface-2); font-size: 40px; opacity: 1; margin-bottom: 14px; }
.empty-state p { font-size: 14.5px; font-weight: 600; max-width: 36ch; margin-inline: auto; line-height: 1.6; }
.notif-panel { border-radius: var(--pf-radius); box-shadow: var(--pf-shadow-lg); border-color: var(--pf-line); }
.notif-item { background: var(--pf-surface-2); }

/* ---------- tabs & filter chips ---------- */
.tabs { background: var(--pf-surface-2); border: 1px solid var(--pf-line); border-radius: 12px; padding: 4px; gap: 4px; }
.tab-btn { border-radius: 9px; color: var(--pf-muted); font-weight: 800; min-height: 40px; }
.tab-btn.active { background: var(--pf-surface) !important; color: var(--pf-primary) !important; box-shadow: var(--pf-shadow-sm); }
.chip { border-radius: var(--pf-pill); background: var(--pf-surface); border-color: var(--pf-line-strong); color: var(--pf-ink); font-weight: 700; min-height: 36px; }
.chip.active { background: var(--pf-primary); border-color: var(--pf-primary); color: #fff; }

/* ---------- dialogs, confirmations, toasts ---------- */
.modal-overlay { background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal { background: var(--pf-surface); border-radius: var(--pf-radius-lg) var(--pf-radius-lg) 0 0; box-shadow: var(--pf-shadow-lg); border-top: 0; }
.modal-handle { background: var(--pf-line-strong); }
.modal-header { padding-bottom: 12px; border-bottom: 1px solid var(--pf-line); margin-bottom: 16px; }
.modal-title { font-size: 18px; font-weight: 900; }
.modal-close { width: 44px; height: 44px; border-radius: 12px; background: var(--pf-surface-2); color: var(--pf-ink); }
.modal-close:hover { background: var(--pf-primary-50); color: var(--pf-primary); }
@media (min-width: 768px) {
  .modal-overlay { align-items: center; padding: 24px; }
  .modal { border-radius: var(--pf-radius-lg); border: 1px solid var(--pf-line); }
  .modal-handle { display: none; }
}
.toast { background: var(--pf-ink); color: #fff; border: 0; border-radius: 12px; box-shadow: var(--pf-shadow-lg); font-weight: 700; }
.toast.success { background: #0b5f44; color: #fff; }
.toast.danger { background: #8f1f1f; color: #fff; }
.toast.warning { background: #7a4a05; color: #fff; }
body.dark-mode .toast { background: var(--pf-surface-2); color: var(--pf-ink); border: 1px solid var(--pf-line); }

/* ---------- navigation: mobile bottom bar, more menu, desktop sidebar ---------- */
.bottom-nav { background: var(--pf-surface) !important; border-top: 1px solid var(--pf-line); box-shadow: 0 -4px 16px rgba(15, 23, 42, .05); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-btn { color: var(--pf-muted); font-size: 11px; font-weight: 700; min-height: 48px; }
.nav-btn.active { color: var(--pf-primary); }
.nav-btn.active .nav-icon { filter: none; }
.more-menu-overlay { background: rgba(15, 23, 42, .35); }
.more-menu { border-radius: var(--pf-radius-lg); box-shadow: var(--pf-shadow-lg); border-color: var(--pf-line); padding: 8px; }
.more-menu-item { border-radius: 12px; min-height: 48px; font-weight: 700; }
.more-menu-item.active { background: var(--pf-primary-50); color: var(--pf-primary); }
@media (min-width: 1024px) {
  .desktop-sidebar { background: var(--pf-surface); border-color: var(--pf-line); box-shadow: var(--pf-shadow-sm); }
  .desktop-sidebar .ds-logo { border-color: var(--pf-line); }
  .ds-nav-item { border-radius: 10px; color: var(--pf-ink); font-weight: 700; min-height: 44px; }
  .ds-nav-item:hover { background: var(--pf-surface-2); }
  .ds-nav-item.active { background: var(--pf-primary-50) !important; color: var(--pf-primary) !important; box-shadow: inset -3px 0 0 var(--pf-primary); }
  html[dir="ltr"] .ds-nav-item.active { box-shadow: inset 3px 0 0 var(--pf-primary); }
  .ds-profile-btn { background: var(--pf-surface-2); border-color: var(--pf-line); border-radius: 12px; }
  .ds-profile-btn:hover { background: var(--pf-primary-50); color: var(--pf-primary); }
}

/* ---------- POS ---------- */
.pos-product-card { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); box-shadow: var(--pf-shadow-sm); transition: border-color .15s, box-shadow .15s; }
@media (hover: hover) { .pos-product-card:hover { border-color: var(--pf-primary); box-shadow: var(--pf-shadow); } }
.pos-product-card-name { font-weight: 800; }
.pos-product-card-price { color: var(--pf-primary); font-weight: 900; font-variant-numeric: tabular-nums; }
.cart-item { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); }
.qty-btn { border-radius: 10px; min-width: 40px; min-height: 40px; }
.cart-summary { border-radius: var(--pf-radius); background: var(--pf-surface-2); }

/* ---------- welcome (home) and plan screens ---------- */
.welcome-overlay { background: var(--pf-bg) !important; }
.welcome-feature, .welcome-usp, .welcome-why, .welcome-pricing, .welcome-currency-box { background: var(--pf-surface) !important; border: 1px solid var(--pf-line) !important; border-radius: var(--pf-radius-lg) !important; box-shadow: var(--pf-shadow-sm) !important; }
.welcome-h2 { color: var(--pf-ink); font-weight: 900; letter-spacing: -.01em; }
.welcome-tagline { color: var(--pf-ink); font-weight: 900; }
.welcome-sub, .welcome-feature-desc, .welcome-usp-desc, .welcome-why-desc { color: var(--pf-muted); }
.welcome-btn, .license-btn { border-radius: 12px !important; min-height: 48px; font-weight: 800 !important; }
.welcome-btn-buy, .welcome-btn-primary, .license-btn-primary { background: var(--pf-primary) !important; color: #fff !important; box-shadow: var(--pf-shadow-sm) !important; }
.welcome-lang-pill, .lang-pill { border-radius: var(--pf-pill) !important; min-height: 40px; }
.welcome-lang-pill.active, .lang-pill.active { background: var(--pf-primary) !important; border-color: var(--pf-primary) !important; color: #fff !important; }
.license-overlay { background: var(--pf-bg) !important; }
.license-container { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); box-shadow: var(--pf-shadow); }
.license-input { border-radius: var(--pf-radius-sm) !important; border: 1px solid var(--pf-line-strong) !important; min-height: 48px; }
.license-btn-secondary, .license-btn-outline { background: var(--pf-surface) !important; color: var(--pf-ink) !important; border: 1px solid var(--pf-line-strong) !important; }

/* ---------- Support / Team / Subscription sheets and onboarding ---------- */
.support-overlay { background: rgba(15, 23, 42, .55); }
.support-sheet { background: var(--pf-bg); color: var(--pf-ink); }
.support-header { background: var(--pf-surface); border-bottom: 1px solid var(--pf-line); min-height: 64px; }
.support-header h2 { font-size: 17px; font-weight: 900; letter-spacing: -.005em; }
.support-icon-btn { border-radius: 12px; background: var(--pf-surface-2); color: var(--pf-ink); }
.support-icon-btn:hover { background: var(--pf-primary-50); color: var(--pf-primary); }
.support-body { gap: 14px; padding: 16px; }
.support-card, .team-device, .sub-current, .team-fieldset, .team-advanced, .sub-module { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); box-shadow: var(--pf-shadow-sm); }
.sub-current { border-top: 3px solid var(--pf-primary); }
.support-card:hover { background: var(--pf-surface); border-color: var(--pf-primary-100); }
.support-section { font-size: 14px; font-weight: 900; color: var(--pf-ink); text-transform: none; }
.support-status { border-radius: var(--pf-pill); font-weight: 800; }
.support-sheet .btn { border-radius: 12px; }
.support-sheet .input { background: var(--pf-surface); }
.support-empty, .support-closed { background: var(--pf-surface); border: 1px dashed var(--pf-line-strong); color: var(--pf-muted); text-align: center; }
.support-notice { background: var(--pf-success-50); color: var(--pf-success); border: 1px solid rgba(14, 159, 110, .25); }
.support-problem { background: var(--pf-danger-50); color: var(--pf-danger); border: 1px solid rgba(214, 58, 58, .25); }
.sub-readonly { background: var(--pf-warning-50); color: var(--pf-warning); border: 1px solid rgba(184, 110, 5, .25); }
.sub-plan { background: var(--pf-surface); }
.sub-plan--current { border-color: var(--pf-primary) !important; box-shadow: 0 0 0 1px var(--pf-primary) inset, var(--pf-shadow-sm) !important; }
.sub-total { padding: 12px 14px; border-radius: var(--pf-radius); background: var(--pf-primary-50); }
.team-chip--role { background: var(--pf-primary-50); color: var(--pf-primary); }
@media (min-width: 768px) { .support-sheet { border-radius: var(--pf-radius-lg); box-shadow: var(--pf-shadow-lg); } }
.onboarding-card { background: var(--pf-surface); border: 1px solid var(--pf-line); border-inline-start: 4px solid var(--pf-primary); box-shadow: var(--pf-shadow); }
.onboarding-head h2 { font-weight: 900; }
.onboarding-step { padding: 6px 10px; border-radius: 12px; background: var(--pf-surface-2); }
.onboarding-step.is-done { background: transparent; }

/* ---------- flagged UI (ui-*.css) shares the same tokens ---------- */
.ui-phase1 { --ui-ink: #081a38; --ui-muted: #566880; --ui-primary: #0f76d8; --ui-tint: #eaf3ff; --ui-line: #d6dfea; --ui-paper: #fff; --ui-bg: #f6f9fd; --ui-danger: #d63a3a; --ui-radius: 14px; }
.ui-phase1.dark-mode { --ui-ink: #e9f1fb; --ui-muted: #9fb0c6; --ui-primary: #4aa8ff; --ui-tint: #0d2440; --ui-line: #1e3453; --ui-paper: #0d1d33; --ui-bg: #061225; --ui-danger: #f87171; }
.ui-phase1 .ui-button { border-radius: 12px; }
.ui-phase1 .ui-card { border-radius: var(--ui-radius); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.ui-phase1 :is(button, a, input, select, textarea, summary):focus-visible { outline-color: rgba(36, 81, 230, .6) !important; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) { .screen, .modal, .modal-overlay { animation: none !important; } .btn, .card, .list-item { transition: none !important; } }

/* ---------- dark mode contrast for filled buttons ---------- */
body.dark-mode .btn-primary, body.dark-mode .welcome-btn-buy, body.dark-mode .license-btn-primary, body.dark-mode .chip.active { background: var(--pf-blue-strong) !important; border-color: var(--pf-blue-strong) !important; color: #fff !important; }
body.dark-mode .btn-primary:hover { background: #2f55e8 !important; }
body.dark-mode .btn-danger { background: #c93434 !important; color: #fff !important; }
body.dark-mode .btn-success { background: #0b8a5f !important; color: #fff !important; }
body.dark-mode .support-sheet .btn-primary { background: var(--pf-blue-strong) !important; border-color: var(--pf-blue-strong) !important; color: #fff !important; }

/* ---------- LTR languages: the desktop sidebar sits on the reading-start side ---------- */
@media (min-width: 1024px) {
  html[dir="ltr"] .desktop-sidebar { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--pf-line); }
  html[dir="ltr"] body { margin-right: 0 !important; margin-left: 280px !important; }
  html[dir="ltr"] .ds-nav-item, html[dir="ltr"] .ds-profile-btn { text-align: left; }
}
@media (min-width: 1024px) { html[dir="ltr"] #quickFab { left: auto !important; right: 24px !important; } }
#quickFab { background: var(--pf-primary) !important; box-shadow: var(--pf-shadow-lg) !important; }
body.dark-mode #quickFab { background: var(--pf-blue-strong) !important; }

/* ---------- Gate A.1: Delivery & COD not in the plan — history visible, actions locked ---------- */
.pf-module-lock { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--pf-radius);
  background: var(--pf-primary-50); border: 1px solid var(--pf-primary-100); color: var(--pf-ink); }
.pf-module-lock p { margin: 0; flex: 1 1 220px; font-weight: 700; font-size: 13.5px; line-height: 1.5; }
body.pf-delivery-locked #screen-deliveries :is(button, input, select, textarea, label, [onclick]):not(.pf-lock-allow):not(.tab-btn):not(.chip):not([data-tab]) {
  pointer-events: none; opacity: .55; }

/* ---------- the POSFIELD lockup ---------- */
/* One brand file for both surfaces: the app wears exactly what the marketing site wears. */
.pf-brand-img { height: 28px; width: auto; display: block; max-width: 100%; object-fit: contain; }
.pf-brand-sidebar { height: 30px; }
/* the name stays in the document for assistive technology, without being drawn twice */
.pf-brand-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.app-logo, .ds-logo { display: flex; align-items: center; gap: 8px; }
@media (max-width: 480px) { .pf-brand-img { height: 24px; } }

/* ---------- the lockup inside the flagged shell ---------- */
.ui-phase1 .ui-brand { display: flex; align-items: center; gap: 0; min-height: 34px; }
.pf-brand-mark { height: 30px; width: auto; display: block; }
.pf-brand-full { height: 30px; width: auto; display: block; max-width: 100%; object-fit: contain; }
/* Narrow rail (700–1099px): the label is hidden by ui-system.css, so the mark alone carries the brand.
   Expanded (>=1100px) and on phones the full lockup shows, and the standalone mark would duplicate it. */
@media (min-width: 1100px) { .ui-phase1 .ui-sidebar .pf-brand-mark { display: none; } }
@media (max-width: 699px) { .ui-phase1 .ui-sidebar .pf-brand-mark { display: none; } }

/* The light/dark variant switch is declared last so it always wins over the size rules above. */
.pf-brand-on-dark { display: none !important; }
body.dark-mode .pf-brand-on-light { display: none !important; }
body.dark-mode .pf-brand-on-dark { display: block !important; }

/* The phone top bar carries the mark; from 700px up the sidebar already shows the brand. */
.pf-brand-top { height: 26px; width: auto; display: block; flex: none; align-self: center; }
@media (min-width: 700px) { .ui-phase1 .pf-brand-top { display: none; } }

/* The avatar's menu: my profile, the public site, and leaving. Same card language as every other surface. */
.pf-account-menu {
  position: fixed; z-index: 1200; min-width: 210px; padding: 8px;
  background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius);
  box-shadow: var(--pf-shadow-lg); display: flex; flex-direction: column; gap: 2px;
}
.pf-account-menu[hidden] { display: none; }
.pf-account-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px;
  background: transparent; border: 0; border-radius: 10px; color: var(--pf-ink);
  font: inherit; font-weight: 700; text-align: start; cursor: pointer;
}
.pf-account-item:hover, .pf-account-item:focus-visible { background: var(--pf-primary-50); color: var(--pf-primary); }
.pf-account-item svg { width: 20px; height: 20px; flex: 0 0 20px; }
.pf-account-item[data-account-action=signout] { color: var(--pf-danger, #dc2626); }

/* A workspace coming back: one quiet line at the top, never a wall. */
.pf-restore-banner {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 40px; padding: 8px 16px;
  background: var(--pf-primary-50); color: var(--pf-primary);
  font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--pf-line);
}
.pf-restore-banner.is-problem { background: #fef3c7; color: #92400e; border-bottom-color: #fcd34d; }
.pf-restore-spinner {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 14px;
  border: 2px solid currentColor; border-top-color: transparent; animation: pfRestoreSpin .9s linear infinite;
}
@keyframes pfRestoreSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pf-restore-spinner { animation: none; } }
.pf-restore-retry {
  min-height: 32px; padding: 4px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-weight: 700;
}

/* Team access: the employee's way in, in the same card language as every other surface. */
.pf-team-entry { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.pf-team-entry-note, .pf-owner-note { display: block; font-size: 11px; font-weight: 600; opacity: .72; }
/* What a member may not use is REMOVED, not merely marked (js/permissions.js decide, js/navigation.js): the hidden
   attribute alone is the weakest rule there is, and the sidebar's own display:flex drew those entries anyway. */
/* a new build is waiting while this window is busy (js/analytics.js): informative only */
.pf-update-notice { position: fixed; inset-inline: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 9000; max-width: 460px; margin-inline: auto; padding: 10px 14px; border-radius: 10px; background: #0b2447; color: #fff; font-size: 13px; line-height: 1.5; box-shadow: 0 6px 18px rgba(0,0,0,.18); pointer-events: none; }
.pf-update-notice[hidden] { display: none; }
.pf-perm-hidden { display: none !important; }
/* Team Access fails closed (js/team-access.js, js/permissions.js): a Team session shows no navigation and no screen
   until its own permissions are applied and the screen on show is one it may open. */
html.pf-team-session:not(.pf-team-ready) #desktopSidebar .ds-nav,
html.pf-team-session:not(.pf-team-ready) .bottom-nav,
html.pf-team-session:not(.pf-team-ready) .screen { visibility: hidden !important; }
/* Signed out on /app/team: the employee's code card alone — the owner's Google sign-in is not offered behind it. */
html.pf-team-entry #welcomeOverlay .welcome-cta,
html.pf-team-entry #googleSignInBtn { display: none !important; }
/* An employee's first load of the shop (js/team-access.js watchFirstLoad): a quiet line, never a wall. */
.pf-team-loading { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 999px; background: var(--surface, #fff); color: var(--text, #111); box-shadow: 0 6px 24px rgba(0,0,0,.14);
  font-size: 14px; max-width: calc(100vw - 32px); }
.pf-team-loading-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: pf-team-spin .8s linear infinite; flex: none; }
@keyframes pf-team-spin { to { transform: rotate(360deg); } }
.pf-team-overlay {
  position: fixed; inset: 0; z-index: 10050;   /* above the welcome gate it opens from */ display: grid; place-items: center;
  padding: 16px; background: #04162c8c; backdrop-filter: blur(3px);
}
.pf-team-sheet {
  width: min(460px, 100%); max-height: 92vh; overflow: auto; padding: 22px;
  background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg);
  box-shadow: var(--pf-shadow-lg); color: var(--pf-ink);
}
.pf-team-form { display: flex; flex-direction: column; gap: 14px; }
.pf-team-form h2 { margin: 0; font-size: 20px; }
.pf-team-field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 13px; }
/* A class with its own display beats the browser's [hidden]: say it here, or the name field an invitation needs
   is shown to everyone coming back with their own code. */
.pf-team-field[hidden], .pf-team-issued[hidden], .pf-team-entry[hidden] { display: none; }
.pf-team-field .input { width: 100%; }
.pf-team-hint { margin: -6px 0 0; font-size: 12px; color: var(--pf-muted); }
.pf-team-remember { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.pf-team-problem:empty { display: none; }
.pf-team-problem { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fee2e2; color: #991b1b; font-size: 13px; font-weight: 600; }
.pf-team-issued { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--pf-primary-50); }
.pf-team-code { display: block; padding: 10px; border-radius: 8px; background: var(--pf-surface); font-family: ui-monospace, monospace; font-size: 12px; overflow-wrap: anywhere; }
.pf-team-actions { display: flex; gap: 10px; }
.pf-team-actions .btn { flex: 1; }
@media (min-width: 1024px) { .pf-team-sheet { width: min(520px, 100%); padding: 26px; } .pf-team-form h2 { font-size: 22px; } }

/* Who did what: the same list language as every other POSFIELD list. */
.pf-activity-entry { width: 100%; margin-top: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pf-activity-overlay { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: end center; background: #04162c8c; }
.pf-activity-sheet {
  width: min(680px, 100%); max-height: 88vh; overflow: auto; padding: 18px;
  background: var(--pf-surface); border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-lg) var(--pf-radius-lg) 0 0; box-shadow: var(--pf-shadow-lg); color: var(--pf-ink);
}
.pf-activity-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pf-activity-head h2 { margin: 0; font-size: 19px; }
.pf-activity-list { display: flex; flex-direction: column; gap: 8px; }
.pf-activity-item, .pf-activity-row { border: 1px solid var(--pf-line); border-radius: 12px; background: var(--pf-surface-2); }
.pf-activity-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.pf-activity-item > .pf-activity-row { border: 0; border-radius: 12px 12px 0 0; }
.pf-activity-main { min-width: 0; }
.pf-activity-summary { color: var(--pf-ink); }
.pf-activity-time { flex: 0 0 auto; font-size: 12px; color: var(--pf-muted); }
.pf-activity-details { padding: 0 14px 12px; }
.pf-activity-details summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--pf-primary); }
.pf-activity-detail-list { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 0; font-size: 13px; }
.pf-activity-detail-list dt { color: var(--pf-muted); }
.pf-activity-detail-list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pf-activity-empty { color: var(--pf-muted); text-align: center; padding: 24px 0; }
@media (min-width: 1024px) {
  .pf-activity-overlay { place-items: center; }
  .pf-activity-sheet { width: min(860px, 100%); border-radius: var(--pf-radius-lg); padding: 24px; }
  .pf-activity-head h2 { font-size: 22px; }
  .pf-activity-row { font-size: 15px; }
}

/* The square brand mark fills its square.
   The symbol is a little taller than it is wide (172×181), so `contain` left a white margin on both sides and the
   mark read as undersized inside its rounded tile — on the welcome screen, in the app header and beside the Team
   entry. `cover` fills the tile in both themes; the symbol's own margin keeps nothing important at the edges. */
:is(.app-logo, .ui-brand, .welcome-logo, .license-logo, .pf-team-entry) :is(.pf-brand-compact, img) {
  object-fit: cover;
}
.welcome-logo img, .license-logo img { border-radius: 16px; }

/* ==========================================================================
   Light mode, read at arm's length
   ==========================================================================
   The pale palette read as washed out on a bright counter: grey text on near-white cards, borders that were
   barely there, and figures that carried no weight. These are the same colours, a step firmer — ink darker,
   secondary text out of light grey, lines visible, cards lifted off the page, and every number given its weight.
   Dark mode keeps its own values (below and in posfield-experience.css); nothing here applies to it. */
/* Set on the root, as the original palette is; body.dark-mode redefines every one of these for the night. */
:root {
  --bg: #f4f7fb;
  --bg-2: #ffffff;
  --bg-3: #eaf0f8;
  --border: #cbd7e6;
  --text: #0b1b33;
  --text-dim: #4a5a72;
  --primary: #1258d6;
  --primary-dark: #0e46ab;
  --success: #047857;
  --warning: #b45309;
  --danger: #c02626;
}
body:not(.dark-mode) {
  color: var(--text);
}
body:not(.dark-mode) .card,
body:not(.dark-mode) .list-item,
body:not(.dark-mode) .modal-content,
body:not(.dark-mode) .stat-card {
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(11, 27, 51, .05), 0 10px 26px rgba(11, 27, 51, .07);
}
/* the figures the owner is actually reading */
body:not(.dark-mode) :is(.stat-value, .list-item-title, .cart-total, #cartTotal, .price, .amount) { color: var(--text); }
body:not(.dark-mode) .text-dim, body:not(.dark-mode) .stat-label, body:not(.dark-mode) .list-item-subtitle { color: var(--text-dim); }
/* inputs and what is selected */
body:not(.dark-mode) :is(.input, input, select, textarea) { border: 1px solid var(--border); background: #fff; color: var(--text); }
body:not(.dark-mode) :is(.input:focus, input:focus, select:focus, textarea:focus) {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(18, 88, 214, .18); outline: none;
}
body:not(.dark-mode) .btn-outline { border-color: var(--border); color: var(--text); background: #fff; }
body:not(.dark-mode) .btn-outline:hover { border-color: var(--primary); color: var(--primary); }
body:not(.dark-mode) :is(.chip, .tab-btn).active,
body:not(.dark-mode) :is(.chip, .tab-btn)[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
body:not(.dark-mode) .badge-primary { background: #dce8fb; color: #0e46ab; }

/* THE NOTIFICATION QUEUE (v57 follow-up; js/core.js toast): a stack at the top — oldest first, newer underneath — each
   message its own box with a close button; never wider than the screen, never more than 3 (2 on a phone). */
.toast-stack { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px;
  width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 28px); overflow: hidden; pointer-events: none; }
.toast-stack:empty { display: none; }
.toast-stack .toast { position: relative; top: auto; left: auto; width: 100%; max-width: none; box-sizing: border-box; display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; text-align: start; opacity: 0; transform: translateY(-8px); pointer-events: auto; transition: opacity .2s ease, transform .2s ease; }
.toast-stack .toast.show { opacity: 1; transform: none; }
.toast-stack .toast.leaving { opacity: 0; transform: translateY(-6px); }
.toast-stack .toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
.toast-stack .toast-close { flex: none; background: transparent; border: 0; color: inherit; font: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: .85; }
.toast-stack .toast-close:hover { opacity: 1; }
.toast-stack .toast-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
@media (max-width: 599px) { .toast-stack { top: 8px; gap: 6px; width: calc(100vw - 16px); } .toast-stack .toast { padding: 10px 12px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .toast-stack .toast { transition: none; } }