/* ROOT.CSS */

:root {
  --header-h: 82px;

  /* Brand system: edit these first to reskin the app. */
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --border: #E2E8F0;
  --text: #0F172A;
  --text-muted: #475569;
  /* Accent ramp. This was a neon green (#00FF7E); it is now the brand orange.
     Only this ramp changed — the semantic greens (--state-palette-green,
     --color-success-*) are deliberately left alone, since they mean "success"
     rather than "brand". */
  --primary: #FF8A00;
  --primary-hover: #E07600;
  --primary-soft: #FFEBD1;
  --primary-bright: #FFA733;
  --primary-bright-hover: #FFBF66;
  --primary-bright-soft: rgba(255, 138, 0, 0.16);
  --pf-deep-bg: #020617;
  --pf-deep-surface: #0F172A;
  --pf-deep-surface-2: #1E293B;
  --pf-deep-border: #334155;
  --pf-deep-text: #F8FAFC;
  --pf-deep-text-muted: #CBD5E1;
  --pf-primary: var(--primary);
  --pf-primary-hover: var(--primary-hover);
  --pf-primary-soft: var(--primary-soft);
  --pf-primary-bright: var(--primary-bright);
  --pf-primary-bright-hover: var(--primary-bright-hover);
  --pf-primary-bright-soft: var(--primary-bright-soft);
  --pf-brand-950: var(--pf-deep-bg);
  --pf-brand-900: var(--pf-deep-surface);
  --pf-brand-800: var(--pf-deep-surface-2);
  --pf-brand-700: var(--pf-deep-border);
  --pf-brand-600: var(--pf-primary);
  --pf-brand-500: var(--pf-primary-bright);
  --pf-brand-300: var(--pf-primary-bright-hover);
  --pf-brand-100: var(--pf-primary-soft);
  --pf-brand-050: var(--bg);
  --pf-surface: var(--surface);
  --pf-surface-soft: var(--surface-2);
  --pf-surface-muted: var(--surface-2);
  --pf-border: var(--border);
  --pf-border-strong: #CBD5E1;
  --pf-text: var(--text);
  --pf-text-muted: var(--text-muted);
  --pf-success: #ff8a00;   /* app-wide "success"/green accent is now orange (off-card) */
  --pf-warning: #d99a16;
  --pf-danger: #c9293d;
  --pf-info: var(--pf-primary);
  --state-palette-green: #16834A;
  --state-palette-yellow: #D99A16;
  --state-palette-red: #C9293D;
  --state-palette-blue: #2563EB;
  --state-palette-sky: #3B82F6;
  --state-palette-indigo: #4F46E5;
  --state-palette-slate: #334155;
  --state-palette-pink: #DB2777;

  /* Typography */
  --theme-font-body: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --theme-font-heading: 'Sora', var(--theme-font-body);
  --theme-font-display: 'Sora', var(--theme-font-body);
  --theme-font-script: 'Merienda', cursive;
  --theme-font-hand: 'Kalam', cursive;
  --font-body: var(--theme-font-body);
  --font-heading: var(--theme-font-heading);
  --font-display: var(--theme-font-display);
  --font-script: var(--theme-font-script);
  --font-hand: var(--theme-font-hand);

  /* Theme tokens */
  --theme-brand-ink: var(--pf-brand-950);
  --theme-brand-primary: var(--pf-primary);
  --theme-brand-secondary: var(--pf-primary-bright);
  --theme-brand-bg: var(--pf-brand-050);
  --theme-brand-surface: var(--pf-surface);
  --theme-brand-accent: var(--pf-brand-600);
  --theme-brand-accent-soft: var(--pf-primary-soft);
  --theme-text: var(--pf-text);
  --theme-text-muted: var(--pf-text-muted);
  --theme-border: var(--pf-border);

  /* Neutral and brand color aliases */
  --color-transparent: transparent;
  --color-black: #000000;
  --color-black-soft: #101828;
  --color-white: var(--pf-surface);
  --color-off-white: var(--pf-brand-050);
  --color-ghost: var(--pf-surface-soft);
  --color-navy-950: var(--pf-brand-950);
  --color-navy-900: var(--pf-brand-950);
  --color-navy-800: var(--pf-brand-900);
  --color-slate-800: var(--pf-brand-700);
  --color-slate-700: var(--pf-brand-600);
  --color-blue-600: var(--pf-brand-600);
  --color-blue-400: var(--pf-brand-500);
  --color-blue-100: var(--pf-brand-100);
  --color-blue-050: var(--pf-brand-050);
  --color-cream-050: var(--pf-brand-050);
  --color-cream-100: var(--pf-surface-soft);
  --color-page-frost-050: var(--pf-brand-050);
  --color-page-frost-100: var(--pf-surface-soft);
  --color-page-frost-200: var(--pf-border);
  --color-page-frost-300: var(--pf-primary-soft);
  --color-page-frost-400: var(--pf-brand-050);
  --color-page-frost-500: var(--pf-surface-soft);
  --color-page-frost-600: var(--pf-surface-soft);
  --color-page-frost-700: var(--pf-border);
  --color-page-frost-800: var(--pf-border-strong);
  --color-panel-light: var(--pf-surface);
  --color-peach-050: var(--pf-brand-050);
  --color-peach-075: var(--pf-surface-soft);
  --color-peach-100: var(--pf-brand-100);
  --color-peach-150: var(--pf-border);
  --color-peach-200: var(--pf-border-strong);
  --color-peach-300: var(--pf-primary-bright-hover);
  --color-peach-350: #93C5FD;
  --color-peach-400: var(--pf-border);
  --color-warm-panel: var(--pf-brand-050);
  --color-gray-050: var(--pf-brand-050);
  --color-gray-060: var(--pf-surface-soft);
  --color-gray-070: var(--pf-border);
  --color-gray-080: var(--pf-brand-050);
  --color-gray-090: var(--pf-border);
  --color-gray-100: var(--pf-surface-soft);
  --color-gray-110: var(--pf-surface-soft);
  --color-gray-120: var(--pf-border);
  --color-gray-145: var(--pf-border-strong);
  --color-gray-150: var(--pf-border);
  --color-gray-155: var(--pf-border-strong);
  --color-gray-160: var(--pf-border);
  --color-gray-170: var(--pf-border);
  --color-gray-180: var(--pf-border);
  --color-gray-200: var(--pf-border);
  --color-gray-300: var(--pf-border-strong);
  --color-gray-350: #94A3B8;
  --color-gray-500: #64748B;
  --color-gray-550: #64748B;
  --color-gray-600: var(--pf-text-muted);
  --color-gray-650: var(--pf-text-muted);
  --color-gray-700: var(--pf-deep-border);
  --color-gray-800: var(--pf-deep-surface-2);
  --color-gray-900: var(--pf-deep-surface);
  --color-dark-panel: var(--pf-deep-surface);
  --color-dark-panel-2: var(--pf-deep-surface-2);
  --color-dark-panel-3: var(--pf-deep-surface);
  --color-dark-panel-4: var(--pf-deep-bg);
  --color-dark-panel-5: var(--pf-deep-surface-2);
  --color-dark-panel-6: var(--pf-deep-bg);
  --color-dark-border: var(--pf-deep-border);
  --color-dark-border-2: var(--pf-deep-border);
  --color-dark-border-3: var(--pf-deep-border);
  --color-dark-border-4: var(--pf-deep-surface-2);
  --color-dark-border-5: var(--pf-deep-border);
  --color-border-muted: var(--pf-border-strong);
  --color-switch-track: var(--pf-border);
  --color-scrollbar-track: var(--pf-deep-surface);
  --color-scrollbar-thumb: #64748B;
  --color-scrollbar-thumb-hover: var(--pf-deep-text-muted);
  --color-text-dark: var(--pf-text);
  --color-text-dark-2: #263244;
  --color-text-muted-dark: var(--pf-text-muted);
  --color-text-warm: var(--pf-surface);
  --color-page-bg: var(--pf-brand-050);
  --color-surface: var(--pf-surface);
  --color-surface-soft: var(--pf-surface-soft);
  --color-surface-muted: var(--pf-surface-muted);
  --color-surface-dark: var(--color-gray-900);
  --color-text: var(--pf-text);
  --color-text-inverse: var(--pf-surface);
  --color-text-muted: var(--pf-text-muted);
  --color-link: var(--pf-surface);
  --color-border: var(--pf-border);
  --color-border-soft: var(--pf-border);
  --color-overlay: rgba(2, 6, 23, 0.48);
  --color-input-bg: var(--pf-surface);
  --color-input-text: var(--pf-text);
  --color-placeholder: #64748B;

  /* Status colors */
  --color-success: var(--pf-success);
  --color-success-dark: #126c3f;
  --color-success-text: #11623a;
  --color-success-switch: var(--pf-success);
  --color-success-tint: #e8f6ee;
  --color-success-soft: #edf8f2;
  --color-success-chip: #d8f0e2;
  --color-success-check: var(--pf-success);
  --color-success-check-border: #84c49e;
  --color-success-checkbox: #157a46;
  --color-success-checkbox-ring: #e8f6ee;
  --color-success-paid: #20b15f;
  --color-success-bright: #20b15f;
  --color-success-light-text: #a9f0c9;
  --color-danger: var(--pf-danger);
  --color-danger-alt: #b91f32;
  --color-danger-hover: #de3b4f;
  --color-danger-dark: #9f1d2e;
  --color-danger-hot: #e23b50;
  --color-danger-deep: #7f1624;
  --color-danger-tint: #fff1f3;
  --color-danger-soft: #fdecef;
  --color-danger-row: #d43b4c;
  --color-danger-row-hover: #c21f3f;
  --color-danger-amount: #b8273b;
  --color-danger-modal: #b8273b;
  --color-danger-task: #d84b5d;
  --color-danger-blob: #d84b5d;
  --color-warning: #f2b84b;
  --color-warning-dark: #c98a11;
  --color-warning-tint: #fff6df;
  --color-warning-paid: #ffe28a;
  --color-warning-undo: #f4bf45;
  --color-warning-undo-hover: #dca52c;
  --color-warning-border: #e3bd69;
  --color-warning-border-2: #ebcc80;
  --color-warning-text: #7a4d00;
  --color-warning-date: #d99213;
  --color-warning-blob: #f2b84b;
  --color-warning-hot: #f0c04d;
  --color-warning-hot-border: #b98713;
  --color-brand-input: #142238;
  --color-social-facebook: #1877f2;
  --color-social-youtube: #ff0000;
  --color-social-instagram-1: #f58529;
  --color-social-instagram-2: #dd2a7b;
  --color-social-instagram-3: #8134af;
  --color-social-instagram-4: #515bd4;
  --color-subscribe-plus-1: var(--pf-brand-950);
  --color-subscribe-plus-2: var(--pf-brand-900);
  --color-subscribe-plus-3: var(--pf-brand-800);
  --color-subscribe-plus-4: var(--pf-primary-hover);

  /* Alpha tokens */
  --alpha-black-08: rgba(2, 6, 23, 0.08);
  --alpha-black-10: rgba(2, 6, 23, 0.10);
  --alpha-black-15: rgba(2, 6, 23, 0.15);
  --alpha-black-18: rgba(2, 6, 23, 0.18);
  --alpha-black-20: rgba(2, 6, 23, 0.20);
  --alpha-black-22: rgba(2, 6, 23, 0.22);
  --alpha-black-24: rgba(2, 6, 23, 0.24);
  --alpha-black-25: rgba(2, 6, 23, 0.25);
  --alpha-black-28: rgba(2, 6, 23, 0.28);
  --alpha-black-30: rgba(2, 6, 23, 0.30);
  --alpha-black-35: rgba(2, 6, 23, 0.35);
  --alpha-black-45: rgba(2, 6, 23, 0.45);
  --alpha-black-48: rgba(2, 6, 23, 0.48);
  --alpha-black-50: rgba(2, 6, 23, 0.50);
  --alpha-black-63: rgba(2, 6, 23, 0.63);
  --alpha-black-80: rgba(2, 6, 23, 0.80);
  --alpha-white-02: rgba(255, 255, 255, 0.02);
  --alpha-white-03: rgba(255, 255, 255, 0.03);
  --alpha-white-05: rgba(255, 255, 255, 0.05);
  --alpha-white-06: rgba(255, 255, 255, 0.06);
  --alpha-white-08: rgba(255, 255, 255, 0.08);
  --alpha-white-10: rgba(255, 255, 255, 0.10);
  --alpha-white-12: rgba(255, 255, 255, 0.12);
  --alpha-white-13: rgba(255, 255, 255, 0.13);
  --alpha-white-14: rgba(255, 255, 255, 0.14);
  --alpha-white-15: rgba(255, 255, 255, 0.15);
  --alpha-white-18: rgba(255, 255, 255, 0.18);
  --alpha-white-25: rgba(255, 255, 255, 0.25);
  --alpha-white-35: rgba(255, 255, 255, 0.35);
  --alpha-white-38: rgba(255, 255, 255, 0.38);
  --alpha-white-55: rgba(255, 255, 255, 0.55);
  --alpha-white-70: rgba(255, 255, 255, 0.70);
  --alpha-white-72: rgba(255, 255, 255, 0.72);
  --alpha-white-82: rgba(255, 255, 255, 0.82);
  --alpha-white-88: rgba(255, 255, 255, 0.88);
  --alpha-white-90: rgba(255, 255, 255, 0.90);
  --alpha-white-92: rgba(255, 255, 255, 0.92);
  --alpha-white-96: rgba(255, 255, 255, 0.96);
  --alpha-white-100: rgba(255, 255, 255, 1);
  --alpha-brand-10: rgba(2, 6, 23, 0.10);
  --alpha-brand-28: rgba(2, 6, 23, 0.28);
  --alpha-accent-08: rgba(37, 99, 235, 0.08);
  --alpha-accent-10: rgba(37, 99, 235, 0.10);
  --alpha-accent-12: rgba(37, 99, 235, 0.12);
  --alpha-accent-14: rgba(37, 99, 235, 0.14);
  --alpha-accent-18: rgba(37, 99, 235, 0.18);
  --alpha-accent-20: rgba(37, 99, 235, 0.20);
  --alpha-accent-22: rgba(37, 99, 235, 0.22);
  --alpha-accent-25: rgba(37, 99, 235, 0.25);
  --alpha-accent-28: rgba(37, 99, 235, 0.28);
  --alpha-accent-30: rgba(37, 99, 235, 0.30);
  --alpha-accent-34: rgba(37, 99, 235, 0.34);
  --alpha-accent-35: rgba(37, 99, 235, 0.35);
  --alpha-accent-55: rgba(37, 99, 235, 0.55);
  --alpha-accent2-10: rgba(59, 130, 246, 0.10);
  --alpha-accent2-12: rgba(59, 130, 246, 0.12);
  --alpha-accent2-14: rgba(59, 130, 246, 0.14);
  --alpha-accent2-15: rgba(59, 130, 246, 0.15);
  --alpha-accent2-16: var(--pf-primary-bright-soft);
  --alpha-accent2-22: rgba(59, 130, 246, 0.22);
  --alpha-accent2-30: rgba(59, 130, 246, 0.30);
  --alpha-accent2-42: rgba(59, 130, 246, 0.42);
  --alpha-danger-12b: rgba(201, 41, 61, 0.12);
  --alpha-danger-28: rgba(201, 41, 61, 0.28);
  --alpha-danger-28b: rgba(201, 41, 61, 0.28);
  --alpha-danger-45: rgba(201, 41, 61, 0.45);
  --alpha-success-18: rgba(22, 131, 74, 0.18);
  --alpha-success-35: rgba(22, 131, 74, 0.35);
  --alpha-success-92: rgba(22, 131, 74, 0.92);
  --alpha-card-deep-84: rgba(2, 6, 23, 0.84);
  --alpha-card-deep-96: rgba(2, 6, 23, 0.96);
  --alpha-completed-deep-blue-96: rgba(15, 23, 42, 0.96);
  --alpha-subscribe-card-bg: rgba(2, 6, 23, 0.78);
  --alpha-subscribe-card-border: rgba(203, 213, 225, 0.22);
  --alpha-subscribe-free-bg: rgba(2, 6, 23, 0.72);
  --alpha-subscribe-free-border: rgba(203, 213, 225, 0.22);
  --alpha-subscribe-free-glass: rgba(37, 99, 235, 0.10);
  --alpha-subscribe-free-glass-border: rgba(203, 213, 225, 0.16);
  --alpha-subscribe-free-glow-a: rgba(37, 99, 235, 0.26);
  --alpha-subscribe-free-glow-b: rgba(59, 130, 246, 0.16);
  --alpha-subscribe-free-glow-c: rgba(37, 99, 235, 0.12);
  --alpha-subscribe-free-glow-d: rgba(37, 99, 235, 0.10);
  --alpha-subscribe-plus-border: rgba(203, 213, 225, 0.16);
  --alpha-subscribe-plus-glass: rgba(37, 99, 235, 0.08);
  --alpha-subscribe-plus-glass-border: rgba(203, 213, 225, 0.10);
  --alpha-warning-glow-14: rgba(242, 184, 75, 0.14);
  --alpha-warning-glow-58: rgba(242, 184, 75, 0.58);
  --alpha-success-light-16: rgba(169, 240, 201, 0.16);
  --alpha-warm-glow-56: rgba(219, 234, 254, 0.56);
  --alpha-warning-gold-18: rgba(242, 184, 75, 0.18);
  --alpha-transparent-black: rgba(2, 6, 23, 0);
  --alpha-transparent-white: rgba(255, 255, 255, 0);
  --alpha-transparent-orange: rgba(255, 140, 32, 0);
  --alpha-orange-045: rgba(255, 140, 32, 0.045);
  --alpha-orange-08: rgba(255, 140, 32, 0.08);
  --alpha-orange-10: rgba(255, 140, 32, 0.10);
  --alpha-orange-11: rgba(255, 140, 32, 0.11);
  --alpha-orange-14: rgba(255, 140, 32, 0.14);
  --alpha-orange-18: rgba(255, 140, 32, 0.18);
  --alpha-orange-20: rgba(255, 140, 32, 0.20);
  --alpha-orange-22: rgba(255, 140, 32, 0.22);
  --alpha-orange-38: rgba(255, 140, 32, 0.38);
  --alpha-orange-40: rgba(255, 140, 32, 0.40);
  --alpha-slate-10: rgba(2, 6, 23, 0.10);
  --alpha-blue-vivid-035: rgba(37, 99, 235, 0.035);
  --alpha-cyan-08: rgba(59, 130, 246, 0.08);
  --alpha-cyan-10: rgba(59, 130, 246, 0.10);
  --alpha-warm-14: rgba(219, 234, 254, 0.14);
  --alpha-light-panel-32: rgba(248, 250, 252, 0.32);
  --alpha-light-panel-16: rgba(203, 213, 225, 0.16);
  --alpha-indigo-12: rgba(37, 99, 235, 0.12);
  --alpha-sky-10: rgba(59, 130, 246, 0.10);

  /* App tokens read by CSS, Blade inline styles, and JS-generated UI. */
  --app-theme-color: var(--pf-deep-bg);
  --app-category-default-color: var(--pf-brand-600);
  --app-category-input-default: var(--pf-deep-surface);
  --app-inline-muted: var(--pf-text-muted);
  --app-inline-subtle: #94A3B8;
  --app-inline-danger: var(--pf-danger);
  --app-inline-due: #d99213;
  --app-suggestion-bg: var(--pf-surface);
  --app-suggestion-border: var(--pf-border);
  --app-suggestion-shadow: 0 12px 28px var(--alpha-black-15);
  --app-stock-ok: var(--pf-success);
  --app-stock-empty: #98a2b3;
  --app-stock-low: var(--pf-danger);
  --app-chart-accent: #ff8c20;
  --app-chart-accent-soft: var(--alpha-orange-22);
  --app-chart-grid: var(--alpha-white-08);
  --app-chart-text: var(--pf-surface);
  --app-chart-muted: #9faabf;
  --app-chart-tooltip-bg: rgba(2, 4, 10, 0.84);
  --app-chart-tooltip-bg-strong: rgba(1, 2, 8, 0.92);
  --app-chart-tooltip-border: var(--alpha-orange-20);
  --app-chart-shadow: var(--alpha-black-28);
  --app-chart-shadow-strong: rgba(0, 0, 0, 0.88);
  --app-chart-sheen-light: var(--alpha-white-18);
  --app-chart-sheen-mid: rgba(255, 255, 255, 0.04);
  --app-chart-sheen-dark: rgba(0, 0, 0, 0.16);
  --app-chart-stroke-soft: var(--alpha-white-06);
  --app-chart-disabled-text: var(--alpha-white-35);
  --app-chart-series-saturation: 83%;
  --app-chart-series-lightness: 45%;
  /* Status (chip/stripe) colours per state. Card BACKGROUND tints are --status1/2/3. */
  --state-not-started-bg: var(--pf-danger);   /* #c9293d red — state 1 */
  --state-ready-print-bg: #e0a800;            /* yellow/amber — state 2 (always yellow) */
  --state-ready-ship-bg: #00a600;             /* green — state 3 */
  --state-custom-default-bg: #121abb;   /* first custom state colour */

  /* Legacy aliases kept for existing screens. */
  --dark1: var(--pf-brand-950);
  --logo-black: var(--color-black);
  --logo-navy: var(--pf-brand-950);
  --logo-deep-navy: var(--pf-brand-950);
  --logo-slate: var(--pf-brand-700);
  --logo-slate-2: var(--pf-brand-600);
  --logo-teal: var(--pf-brand-600);
  --logo-magenta: var(--pf-brand-600);
  --logo-cyan: var(--pf-brand-500);
  --logo-lime: var(--color-warning);
  --logo-white: var(--pf-surface);
  --brand0: var(--logo-black);
  --brand1: var(--pf-brand-950);
  --brand2: var(--pf-brand-950);
  --brand3: var(--pf-brand-700);
  --brand4: var(--pf-brand-600);
  --brand5: var(--pf-brand-300);
  --brand7: var(--pf-brand-950);
  --brand8: var(--pf-brand-900);
  --accent: var(--pf-primary);
  --accent2: var(--pf-primary-bright);
  --accent3: var(--pf-brand-950);
  --zebra1: var(--pf-brand-950);
  --zebra2: var(--pf-brand-900);
  --lightzebra1: var(--pf-brand-050);
  --tablehead: var(--pf-deep-border);
  --status1: var(--color-danger-tint);
  --status2: var(--color-warning-tint);
  --status3: var(--color-success-tint);
  --gray1: var(--pf-border);
  --gray: var(--pf-border);
  --gray2: var(--pf-text-muted);
  --gray3: var(--pf-surface-muted);
  --gray4: #7d8b9b;
  --blue1: var(--pf-brand-950);
  --blue2: var(--pf-primary);
  --pane-light-bg: var(--pf-brand-050);
  --pane-light-edge: var(--alpha-brand-10);
  --pane-light-accent: var(--alpha-accent-10);
  /* One step lighter than --tablehead (#334155), for sub-rows that sit inside a
     table-head-coloured block — e.g. the month-mode week rows in Transactions. */
  --tablehead-soft: #475569;
  --tablehead-light: var(--pf-primary-soft);
  --tablehead-light-text: var(--pf-deep-border);
  --tablehead-light-border: var(--pf-border-strong);
  --light-row-zebra: var(--pf-surface-soft);
  /* --green must actually be green. It previously aliased --pf-success, which
     was deliberately reskinned to orange, so success toasts (e.g. "Status
     updated") rendered orange. --pf-success stays orange for the places that
     want the brand tone; anything asking for --green gets green. */
  --green: #20b15f;
  --green2: #126c3f;
  --card-green: #16834a;   /* kept green on the order cards (done button etc.) */
  --red: var(--pf-danger);
  --red1: var(--pf-danger);
  --red2: #9f1d2e;
  --red3: #e23b50;
  --darkred: #7f1624;
  --yellow: var(--color-warning);
  --yellow1: var(--color-warning);
  --yellow2: var(--color-warning-dark);
  --white1: var(--pf-brand-050);
  --bg: #F8FAFC;
  --pane: var(--pf-primary-soft);
  --panel: var(--pf-deep-surface);
  --muted: var(--pf-text-muted);
  --txt: var(--pf-deep-text);
  --acc: var(--color-warning);
  --line: rgba(2, 6, 23, 0.80);
  --line2: var(--pf-deep-border);
  --line3: var(--alpha-white-25);
  --chip: var(--pf-brand-300);
  --stripe-color: var(--color-border-muted);

  /* Buttons */
  --button-font-family: var(--font-body);
  --button-font-size: .9em;
  --button-font-weight: 600;
  --button-height: 2.8em;
  --button-padding: 0.6em 1.2em;
  --button-radius: 4px;
  --button-border: var(--pf-primary);
  --button-bg: var(--pf-primary);
  --button-text: var(--dark1);
  --button-hover-bg: var(--pf-primary-hover);
  --button-hover-text: var(--dark1);
  --button-primary-bg: var(--pf-brand-950);
  --button-primary-hover-bg: var(--pf-primary);
  --button-secondary-bg: var(--color-transparent);
  --button-secondary-text: var(--pf-text);
  --button-secondary-border: var(--pf-border);
  --button-secondary-hover-bg: var(--pf-brand-050);
  --button-danger-bg: var(--pf-danger);
  --button-danger-hover-bg: var(--color-danger-hot);
  --button-success-bg: var(--pf-success);
  --button-warning-bg: var(--color-warning);
  --button-warning-text: var(--color-black);
  --button-accent-bg: var(--pf-primary);
  --button-accent-text: var(--dark1);
  --button-input-border: var(--pf-border);
  --button-input-focus: var(--pf-primary);

  /* Gradients */
  --gradient: linear-gradient(135deg, var(--pf-primary), var(--pf-brand-950));
  --gradient2: linear-gradient(180deg, var(--pf-brand-950) 0%, var(--pf-brand-900) 100%);
  --gradient-dashboard-bg:
    radial-gradient(circle at 20% 0%, var(--alpha-accent-12), transparent 40%),
    radial-gradient(circle at 90% 10%, var(--alpha-accent2-10), transparent 38%),
    linear-gradient(180deg, var(--pf-brand-050) 0%, var(--pf-surface-soft) 58%, var(--pf-border) 100%);
  --gradient-auth-bg: linear-gradient(135deg, var(--pf-brand-050) 0%, var(--pf-surface-soft) 54%, var(--pf-surface) 100%);
  --gradient-pane-light:
    radial-gradient(circle at top left, var(--alpha-accent-10), transparent 52%),
    radial-gradient(circle at bottom right, var(--alpha-brand-10), transparent 52%),
    var(--pf-brand-050);
  /* Flat accent rather than a gradient: the card glows are blue, so the orange
     accent ramp read as a clashing wash across the subscribe cards. */
  --gradient-subscribe-button: var(--pf-primary);
  --gradient-subscribe-card-bg:
    radial-gradient(circle at 12% 12%, var(--glow-a) 0%, transparent 28%),
    radial-gradient(circle at 88% 12%, var(--glow-b) 0%, transparent 26%),
    radial-gradient(circle at 84% 86%, var(--glow-c) 0%, transparent 28%),
    radial-gradient(circle at 22% 78%, var(--glow-d) 0%, transparent 30%),
    var(--card-bg);
  --gradient-subscribe-card-highlight: linear-gradient(180deg, var(--alpha-white-06) 0%, var(--alpha-white-02) 24%, transparent 62%, var(--alpha-white-03) 100%);
  --gradient-light-button: linear-gradient(180deg, var(--pf-surface) 0%, var(--pf-surface-soft) 100%);
  --gradient-table-tile: linear-gradient(160deg, var(--pf-surface) 0%, var(--pf-surface-soft) 100%);
  --gradient-table-tile-hover: linear-gradient(160deg, var(--pf-brand-050) 0%, var(--pf-primary-soft) 100%);
  --gradient-social-instagram: linear-gradient(135deg, var(--color-social-instagram-1), var(--color-social-instagram-2), var(--color-social-instagram-3), var(--color-social-instagram-4));
  --gradient-divider-fade: linear-gradient(to right, rgba(2, 6, 23, 0), rgba(2, 6, 23, 0.55), rgba(2, 6, 23, 0));
  --gradient-accent-line: linear-gradient(90deg, transparent, var(--alpha-accent-20), transparent);
  --gradient-accent-button: linear-gradient(135deg, var(--pf-primary), var(--pf-primary-bright));
  --gradient-analytics-divider: linear-gradient(90deg, var(--alpha-transparent-orange), var(--alpha-orange-22), var(--alpha-transparent-orange));
  --gradient-analytics-card-glow:
    radial-gradient(circle at top left, var(--alpha-orange-08), transparent 34%),
    radial-gradient(circle at bottom right, var(--alpha-orange-045), transparent 26%);
  --gradient-analytics-summary-glow:
    radial-gradient(circle at top left, var(--alpha-orange-18), transparent 34%),
    radial-gradient(circle at bottom right, var(--alpha-orange-11), transparent 28%),
    radial-gradient(circle at 48% 88%, var(--alpha-orange-08), transparent 24%);
  --gradient-completed-dark: linear-gradient(180deg, var(--alpha-card-deep-96) 0%, var(--alpha-completed-deep-blue-96) 100%);
  --gradient-free-analytics-active: linear-gradient(135deg, var(--alpha-orange-18) 0%, var(--alpha-card-deep-96) 58%, var(--alpha-orange-10) 100%);
  /* Final stop was --pf-primary-hover, which became orange with the accent
     reskin and left an orange wash across the Plus card. The card is meant to be
     a blue gradient, so it now continues the 950 -> 900 -> 800 -> 700 ramp. */
  --gradient-subscribe-plus-card: linear-gradient(155deg, var(--pf-brand-950) 0%, var(--pf-brand-900) 38%, var(--pf-brand-800) 72%, var(--pf-brand-700) 100%);
  --gradient-subscribe-plus-glass: linear-gradient(145deg, var(--alpha-subscribe-plus-glass) 0%, var(--alpha-white-02) 100%);
  --gradient-subscribe-pro-card-bg:
    radial-gradient(circle at 16% 14%, var(--alpha-accent-18) 0%, transparent 24%),
    radial-gradient(circle at 84% 16%, var(--alpha-accent2-12) 0%, transparent 22%),
    radial-gradient(circle at 78% 84%, var(--alpha-cyan-08) 0%, transparent 28%),
    radial-gradient(circle at 20% 78%, var(--alpha-accent-12) 0%, transparent 30%),
    var(--card-bg);

  /* Shadows */
  --shadow1: 0 1px 2px var(--alpha-black-10), 0 1px 3px var(--alpha-black-08);
  --shadow2: 0 8px 24px var(--alpha-black-18);
  --shadow3: 0 18px 42px var(--alpha-black-24);
  --shadow-popup: 0 24px 64px var(--alpha-black-35), 0 2px 8px var(--alpha-black-18);
  --shadow-card: 0 8px 22px var(--alpha-black-10);
  --shadow-hover: 0 18px 42px var(--alpha-black-22), inset 0 1px 0 var(--alpha-white-08);
}

/* === General Body & Header === */

a {
  text-decoration: none;
  color: var(--color-link);

}

html,
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  height: 100%;
  overflow: hidden;
}








input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ===== UNIFIED UNDERLINE INPUT SYSTEM ===== */

/* ===== SLIGHTLY CURVED UNDERLINE ===== */


/* GENERAL COMMON STYLES  */

select {
  color: var(--color-input-text);
}

select option[value=""] {
  color: var(--color-placeholder);
}

button:not(.add-btn, .sort-btn, .hamburger, .header-icon-btn, .report-card, #addItemBtn,
  .qty-plus, .qty-minus, #closePopupBtn, .field-icon.items, .row-remove, .acct-btn,
  #clearFormBtn, .invoice-btn, .delete-btn, .done-btn, .source-open-btn,
  .card-source-btn, .device-icon-btn, .edit-btn, .sort-button, #logoutAll, .mobile-pane-fab,
  .identify-btn, .auth-linkbtn, .pf-submit, .pf-textbtn, .pf-eye) {
  padding: var(--button-padding);
  border: 1px solid var(--button-border);
  background: var(--button-bg);
  color: var(--button-text);
  cursor: pointer;
  border-radius: var(--button-radius);
  transition: background-color .25s ease, color .25s ease, filter .25s ease,
    border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  height: var(--button-height);
  font-family: var(--button-font-family);
  font-weight: var(--button-font-weight);

}

button:hover:not(.field-icon.items, .qty-plus, .qty-minus, .invoice-btn, .sort-button,
  .stock-plus, .stock-minus, .hamburger, .header-icon-btn, .report-card, .green-btn, .logout-btn, #logoutAll,
  #addItemBtn, .submit-btn, .done-btn, .edit-btn, .delete-btn, .source-open-btn, .card-source-btn,
  .device-icon-btn, .identify-btn, .auth-linkbtn, .pf-submit, .pf-textbtn, .pf-eye) {
  background: var(--button-hover-bg);
  color: var(--button-hover-text);
}

button {
  font-weight: 500;
}

/* ===== Reusable accent CTA button =====
   Used for primary attention CTAs like "See plans".
   Hover keeps an accent-tinted border (no harsh white) and a soft glow. */
.accentbtn {
  background: var(--button-accent-bg) !important;
  color: var(--button-accent-text) !important;
  border: 1px solid var(--alpha-accent-55) !important;
  transition:
    background-color .28s ease,
    color .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    transform .28s ease !important;
}

/* No lift: buttons must not move on hover (see CLAUDE.md UI Rules). */
.accentbtn:hover {
  color: var(--button-accent-text) !important;
  background: var(--button-accent-bg) !important;
  border-color: var(--accent2) !important;
  box-shadow:
    0 0 0 1px var(--alpha-accent-35),
    0 6px 18px var(--alpha-accent-30),
    0 0 36px var(--alpha-accent2-22);
}

.accentbtn:active {
  transform: translateY(0);
  box-shadow: 0 0 0 1px var(--alpha-accent-35);
}

/* my standard popup  */

.ui-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--color-overlay);
  backdrop-filter: blur(0.5px);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  animation: popupFade 0.15s ease;
}

@keyframes popupFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.ui-popup.hidden {
  display: none;
}

.ui-popup-card {
  position: relative;
  background: var(--color-white);
  border-radius: 14px;
  padding: 22px 24px 72px 26px;
  /* bottom space for buttons */
  min-width: 22em;
  max-width: min(92vw, 30em);
  min-height: 9em;
  box-shadow:
    0 24px 56px var(--alpha-black-48),
    0 2px 6px var(--alpha-black-20);
  color: var(--color-text-dark);
  line-height: 1.5;
  overflow: hidden;
}

/* shared title/body inside popup body markup */
.ui-popup-card .ui-popup-title {
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: .55em;
}

.ui-popup-card .ui-popup-title i {
  font-size: 1.1em;
  margin: 0;
}

.ui-popup.confirm .ui-popup-card .ui-popup-title i { color: var(--yellow); }
.ui-popup.error   .ui-popup-card .ui-popup-title i { color: var(--red); }
.ui-popup.info    .ui-popup-card .ui-popup-title i { color: var(--brand4); }
.ui-popup.success .ui-popup-card .ui-popup-title i { color: var(--green); }

.ui-popup-card .ui-popup-body {
  font-size: .92rem;
  color: var(--color-text-muted-dark);
}

.ui-popup-actions {
  position: absolute;
  bottom: 14px;
  right: 18px;
  display: flex;
  gap: 10px;
}

.ui-popup-actions.staff-auth-actions {
  left: 16px;
  right: 16px;
}

.ui-popup-actions.staff-auth-actions .staff-auth-logout-btn {
  margin-right: auto;
}


/* discount popup (Add Discount) */
.discount-popup__title {
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: .55em;
  color: var(--text);
}

.discount-popup__title i {
  color: var(--primary);
}

.discount-popup__row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.discount-popup__input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-size: 1.1rem;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  outline: none;
}

.discount-popup__input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.discount-popup__input::-webkit-outer-spin-button,
.discount-popup__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.discount-popup__modes {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
}

/* Segmented ₹ / % switch. Scoped under the container so it beats the global
   accent button styling: the inactive side stays gray, the active side lights
   up in the accent color with brand-dark text. */
.discount-popup__modes .discount-mode-btn {
  border: none;
  background: var(--surface-2) !important;
  padding: 0 14px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-muted) !important;
  cursor: pointer;
  min-width: 46px;
  transition: background .12s ease, color .12s ease;
}

.discount-popup__modes .discount-mode-btn:hover {
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
}

.discount-mode-btn + .discount-mode-btn {
  border-left: 1px solid var(--border);
}

.discount-popup__modes .discount-mode-btn.is-active,
.discount-popup__modes .discount-mode-btn.is-active:hover {
  background: var(--accent) !important;
  color: var(--dark1) !important;
}

.discount-popup__hint {
  margin-top: 10px;
  font-size: .85rem;
  color: var(--text-muted);
  min-height: 1.1em;
}


/* standard pop-up */

.ui-popup.success:not(.toast-top):not(.toast-bottom) .ui-popup-card {
  border-left: .85em solid var(--green2);
}

.ui-popup.toast-top.success .ui-popup-card {
  background: var(--green);
  border-left: none;
}

.ui-popup.error .ui-popup-card {
  border-left: .85em solid var(--red);
}

.ui-popup.info .ui-popup-card {
  border-left: .85em solid var(--brand4);
}

.ui-popup.confirm .ui-popup-card {
  border-left: .85em solid var(--yellow);
}

.ui-popup.toast-top.error .ui-popup-card {
  background: var(--red2);
}

/* ===== Modernized popup buttons ===== */

.ui-popup-actions button {
  padding: 9px 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-dark-2);
  cursor: pointer;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .08s ease,
    box-shadow .18s ease;
}

.ui-popup-actions button:active {
  transform: translateY(1px);
}

/* Secondary button: transparent, subtle border */
.popup-secondarybtn {
  background: transparent !important;
  color: var(--color-text-dark) !important;
  border: 1px solid var(--color-gray-150) !important;
}

.popup-secondarybtn:hover {
  background: var(--color-gray-050) !important;
  border-color: var(--color-gray-155) !important;
}

/* Primary button: filled, brand navy */
.popup-primarybtn {
  background: var(--brand1) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--brand1) !important;
}

.popup-primarybtn:hover {
  background: var(--brand4) !important;
  border-color: var(--brand4) !important;
  box-shadow: 0 6px 18px var(--alpha-brand-28);
}

/* Danger variant of primary */
.popup-primarybtn.danger {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: var(--color-white) !important;
}

.popup-primarybtn.danger:hover {
  background: var(--red3) !important;
  border-color: var(--red3) !important;
  box-shadow: 0 6px 18px var(--alpha-danger-28);
}




/* ================= TOAST NOTIFICATIONS ================= */

/* Bottom toast */


.ui-popup.toast-top,
.ui-popup.toast-bottom {
  position: fixed;
  inset: 0;
  display: block;
  pointer-events: none;
}

.ui-popup.toast-bottom .ui-popup-card {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  color: var(--color-white);
  width: 100vw;
  max-width: 100vw;
  min-width: 0;
  min-height: 4.7rem;
  padding: 10px 16px;
  margin: 0;
  border-radius: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  line-height: 1;
  box-shadow: none;
  opacity: 0;
  animation: toastSlideUp 1.9s ease-in-out forwards;
  background: var(--green);
}

.ui-popup.toast-bottom.success .ui-popup-card {
  background: var(--green);
}

.ui-popup.toast-bottom.error .ui-popup-card {
  background: var(--red2);
}

.ui-popup.toast-bottom.info .ui-popup-card {
  background: var(--yellow);
  color: var(--color-black);
  border-left: none;
}

.ui-popup.toast-bottom.confirm .ui-popup-card {
  background: var(--accent);
  color: var(--color-white);
}


/* Top toast */

.ui-popup.toast-top .ui-popup-card {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100vw;
  max-width: 100vw;
  min-width: 0;
  height: var(--header-h) !important;
  min-height: var(--header-h) !important;
  max-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand1);
  color: var(--color-white);
  padding: 0 1em;
  box-sizing: border-box;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  animation: toastSlideDown 5s linear forwards;
}

/* Hide buttons for toast */
.ui-popup.toast-top .ui-popup-actions,
.ui-popup.toast-bottom .ui-popup-actions {
  display: none;
}

.ui-popup.toast-top,
.ui-popup.toast-bottom {
  will-change: transform, opacity;
  background: transparent;
  backdrop-filter: none;
}

/* Animations */

@keyframes toastSlideUp {

  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  20% {
    transform: translateY(0);
    opacity: 1;
  }

  80% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(100%);
    opacity: 0;
  }

}

@keyframes toastSlideDown {

  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  15% {
    transform: translateY(0);
    opacity: 1;
  }

  85% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-100%);
    opacity: 0;
  }

}


/*  GLOBAL SCROLLBAR  */



::-webkit-scrollbar {
  width: 12px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: 6px;
  border: 2px solid var(--color-scrollbar-track);
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-thumb-hover);
}

/* DEFAULT TABLES */

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid var(--brand2);
  overflow: hidden;
}

th,
td {
  padding: 10px 12px;
  text-align: left;
}

td {
  border-bottom: 1px solid var(--brand2);
}

thead th,
th {
  background: var(--tablehead);
  color: var(--color-white);
}

tbody tr:nth-child(odd) {
  background: var(--color-white);

}

tbody tr:nth-child(even) {
  background: var(--color-ghost);
}



.green-btn {
  width: 100%;
  font-weight: 600 !important;
  font-size: 1rem;
}

.green-btn:hover {
  background-color: var(--green) !important;
}

.red-btn:hover {
  background-color: var(--red) !important;
  color: var(--color-white) !important;  
}

.delete-button:hover {
  background: var(--red3) !important;
  color: var(--color-white);
  border-color: var(--darkred) !important;
}




#logoutAll {
  background-color: var(--red3);
  transition: transform 0.3s ease, background-color 0.3s ease;
  padding: 0.6em 1.2em;
  border: 1px solid var(--line);
  color: var(--color-white);
  cursor: pointer;
  border-radius: 4px;
  height: 2.8em;
}


.logout-btn:hover,
#logoutAll:hover {
  background-color: var(--red) !important;

}



/* ================= SWITCHES ================= */




.switch-box {
  position: relative;
  border: 1.5px solid var(--color-switch-track);
  border-radius: 5px;
  background: var(--color-white);
  padding: 8px 12px;
  min-height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.switch-box.on {
  box-shadow: inset 0 0 0 2px var(--green);
}

.switch-box.off {
  box-shadow: inset 0 0 0 1.5px var(--alpha-danger-45);
}

.switch-box .switch-text {
  font-weight: 800;
  min-width: 40px;
}

.switch-box.on .switch-text {
  color: var(--color-success-text);
}

.switch-box.off .switch-text {
  color: var(--color-border-muted);
}


/* knob */
.slider::before {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--color-white);
  border-radius: 50%;
  transition: transform .2s ease;
}

/* checked */
.switch input:checked+.slider {
  background: var(--color-success-switch);
}

.switch input:checked+.slider::before {
  transform: translateX(24px);
}



.switch {
  position: relative;
  width: 48px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  inset: 0;
  background: var(--color-switch-track);
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 2px;
  transition: background .2s ease;
}


/* help function style */

.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--alpha-black-63);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin: 0px 0px 6px 6px;
}

.help-icon:hover {
  background-color: var(--gray2);
}

.help-tooltip {
  position: absolute;
  background: var(--color-black-soft);
  color: var(--color-white);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  max-width: 220px;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 6px 20px var(--alpha-black-25);
}




/* MY FONTS Manrope , WorkSans , Sora , Merienda , Kalam  */

@font-face {
  font-family: 'Manrope';
  src: url('../asset/fonts/Manrope-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}




@font-face {
  font-family: 'Sora';
  src: url('../asset/fonts/Sora-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Merienda';
  src: url('../asset/fonts/Merienda-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}




/* Apple style toast loader */

.toast-loader {
  width: 16rem;
  height: 4px;
  margin-top: 4px;
  background: var(--alpha-white-15);
  border-radius: 999px;
  overflow: hidden;
}



.toast-loader-bar {
  height: 100%;
  width: 0%;
  background: var(--color-white);
  border-radius: 999px;
  transition: width 0.05s linear;
}

.toast-loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.toast-loading-text {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;

}

.ui-popup.toast-top.success .toast-loader-bar {
  background: var(--color-white);
}

.pf-auth-shell {
  min-height: 100vh;
  background: var(--gradient-auth-bg);
}

.pf-auth-card {
  background: var(--color-ghost);
  border: 1px solid var(--color-gray-200);
  border-radius: 1rem;
  box-shadow: var(--shadow2);
}

.pf-btn,
.pf-btn-primary,
.pf-btn-secondary,
.pf-btn-muted,
.pf-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--button-radius);
  font-family: var(--button-font-family);
  font-weight: var(--button-font-weight);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.pf-btn-primary {
  background: var(--accent) !important;
  color: var(--color-white) !important;
  border-color: var(--accent) !important;
}

.pf-btn-primary:hover,
.pf-btn-primary:focus {
  background: var(--accent2) !important;
  color: var(--dark1) !important;
  border-color: var(--accent2) !important;
}

.pf-btn-primary:active {
  background: var(--dark1) !important;
  color: var(--color-white) !important;
}

.pf-btn-secondary {
  background: var(--color-gray-700) !important;
  color: var(--color-white) !important;
  border-color: var(--color-gray-700) !important;
}

.pf-btn-secondary:hover,
.pf-btn-secondary:focus,
.pf-btn-secondary:active {
  background: var(--color-gray-900) !important;
  color: var(--color-white) !important;
  border-color: var(--color-gray-900) !important;
}

.pf-btn-muted {
  background: var(--color-gray-100) !important;
  color: var(--color-gray-800) !important;
  border-color: var(--color-gray-100) !important;
}

.pf-btn-muted:hover {
  background: var(--color-gray-200) !important;
}

.pf-btn-danger {
  background: var(--button-danger-bg) !important;
  color: var(--color-white) !important;
  border-color: var(--button-danger-bg) !important;
}

.pf-btn-danger:hover,
.pf-btn-danger:focus {
  background: var(--button-danger-hover-bg) !important;
  color: var(--color-white) !important;
  border-color: var(--button-danger-hover-bg) !important;
}

.side-logo {
  margin-bottom: 16px;
  text-align: center;
}




i[class*="fa-"] {
  margin: 0 5px;
}


.fa-solid.fa-trash {
  margin: unset;
  margin: 0 !important;
}




/* responsive root font size init */


@media (max-width: 1440px) {
  html {
    font-size: 14px;
  }

}

/* medium: 18-25 inch */
@media (min-width: 1441px) and (max-width: 2560px) {
  html {
    font-size: 16px;
  }

  i {
    margin-right: .5em;
    margin-left: .5em;
  }
}

/* large: 25-35 inch */
@media (min-width: 2561px) {
  html {
    font-size: 18px;
  }


}


/* ===== Polish: unified keyboard focus ring =====
   Additive and geometry-safe (outline does not reflow layout). Only shows for
   keyboard navigation (:focus-visible), not mouse clicks. The order form keeps
   its own bespoke focus treatment, so it is opted out below. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#orderPopup a:focus-visible,
#orderPopup button:focus-visible,
#orderPopup select:focus-visible,
#orderPopup input:focus-visible,
#orderPopup textarea:focus-visible {
  outline: none;
}

/* Edge and Chrome on Windows draw their own password reveal/clear buttons, which
   sat next to our own eye toggle and looked like two eyes. Ours stays, theirs
   goes — otherwise the field has two controls doing the same job. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-credentials-auto-fill-button {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}

/* =============== IDENTIFY OVERLAY ===============
   Pressing Identify in Active Sessions broadcasts to the whole account and each
   signed-in screen flashes its OWN codename, wherever it happens to be — so
   this lives here, in the stylesheet every page loads, not in style_settings. */
.identify-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}

.identify-overlay.show {
  opacity: 1;
  visibility: visible;
}

.identify-square {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: min(46vw, 260px);
  height: min(46vw, 260px);
  border-radius: 18px;
  background: color-mix(in srgb, var(--dark1) 92%, transparent);
  color: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

.identify-square-label {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
}

.identify-square-code {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 8vw, 3.4rem);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}

/* Secondary action on the auth screens: reads as a link, not a second primary
   button. Excluded from the global button rule above so it keeps a transparent
   background. */
.auth-linkbtn {
  background: transparent;
  border: none;
  padding: 0;
  height: auto;
  font: inherit;
  cursor: pointer;
}