/* Theme tokens: the one stylesheet that holds colours (paniware-docs 08 section 3, D-182).
   Every other stylesheet, view, helper and script uses these names only; a spec fails on a
   colour code anywhere else (spec/assets/theme_colours_spec.rb). A theme is a set of values
   for the same names: light and dark now, accent colours later (Appearance, D-190).
   The meaning colours (money in, owed, check this) keep their meaning in every theme.
   Paniware: blue, chosen by the owner over the teal placeholder (D-33). */

/* ---- Brand ------------------------------------------------------------------ */

:root {
  --app-primary: #2563eb;
  --app-primary-dark: #1d4ed8;
  --app-primary-light: #dbeafe;
  --app-primary-rgb: 37, 99, 235;
}

[data-theme="dark"] {
  --app-primary: #60a5fa;
  --app-primary-dark: #3b82f6;
  --app-primary-light: #1e3a5f;
  --app-primary-rgb: 96, 165, 250;
}

/* ---- Foundation palette (surfaces, text, badges, forms) ----------------------- */

:root {
  /* Brand palette (light) — neutral blue; success semantics use a standard green */
  --app-sidebar-bg: #ffffff;
  --app-sidebar-border: #e9edef;
  --app-sidebar-border-width: 2px;
  --app-sidebar-outer-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
  --app-sidebar-header-bg: var(--app-primary);
  --app-sidebar-header-brand-fg: #ffffff;
  --app-sidebar-header-toggle-fg: rgba(255, 255, 255, 0.8);
  --app-sidebar-header-toggle-hover-fg: #ffffff;
  --app-sidebar-header-toggle-hover-bg: rgba(255, 255, 255, 0.1);
  --app-nav-link-active-bg: var(--app-primary-light);
  --app-nav-link-active-fg: var(--app-primary);
  --app-nav-badge-bg: #d32f2f;
  --app-nav-badge-fg: #ffffff;
  --app-nav-badge-size: 18px;
  --app-nav-badge-font-size: 10px;
  --app-nav-signout-hover-fg: #d32f2f;
  --app-sidebar-width-expanded: 248px;
  --app-sidebar-width-collapsed: 72px;
  --app-sidebar-width: var(--app-sidebar-width-expanded);
  --app-payment-badge-approved-bg: #d1fae5;
  --app-payment-badge-approved-fg: #166534;
  --app-payment-badge-pending-bg: #fff3cd;
  --app-payment-badge-pending-fg: #856404;
  --app-payment-badge-rejected-bg: #ffe0e0;
  --app-payment-badge-rejected-fg: #d32f2f;
  --app-header-bg: #ffffff; /* the top bar is white, as the mockup (G-1) */
  --app-content-bg: #f0f2f5;
  --app-card-bg: #ffffff;
  --app-text-primary: #111b21;
  --app-text-secondary: #667781;
  --app-text-muted: #8696a0;
  --app-border: #e9edef;
  --app-table-border: var(--app-border);
  --app-card-border: var(--app-border);
  --app-hover: #f5f6f6;
  --app-active: #f0f2f5;
  --app-icon: #54656f;
  --app-icon-active: var(--app-primary);
  --app-badge-bg: var(--app-primary);
  --app-badge-text: #ffffff;

  /* Stat card icon accents (Part 6 + dark overrides below) */
  --app-stat-messages-icon-bg: #e3f2fd;
  --app-stat-messages-icon-color: #1565c0;

  /* Semantic badges (Part 4) */
  --app-badge-connected-bg: #d1fae5;
  --app-badge-connected-fg: #166534;
  --app-badge-connecting-bg: #fff3cd;
  --app-badge-connecting-fg: #856404;
  --app-badge-disconnected-bg: #ffe0e0;
  --app-badge-disconnected-fg: #d32f2f;
  --app-badge-outbound-bg: #e3f2fd;
  --app-badge-outbound-fg: #1565c0;
  --app-badge-inbound-bg: #e8f5e9;
  --app-badge-inbound-fg: #2e7d32;
  --app-badge-sent-bg: #f5f5f5;
  --app-badge-sent-fg: #616161;
  --app-badge-delivered-bg: #e8f5e9;
  --app-badge-delivered-fg: #2e7d32;
  --app-badge-read-bg: #e3f2fd;
  --app-badge-read-fg: #1565c0;
  --app-badge-failed-bg: #ffe0e0;
  --app-badge-failed-fg: #d32f2f;
  --app-badge-neutral-bg: #f0f2f5;
  --app-badge-neutral-fg: #54656f;
  --app-badge-current-bg: var(--app-primary-light);
  --app-badge-current-fg: var(--app-primary-dark);

  /* UI chrome */
  --app-avatar-fg: #ffffff;
  --app-dropdown-bg: var(--app-card-bg);
  --app-dropdown-border: var(--app-border);
  --app-link: var(--app-primary-dark);
  --app-btn-primary-hover: var(--app-primary-dark);
  --app-stat-card-hover-bg: var(--app-hover);
  --app-on-primary: #ffffff;
  --app-progress-warning: #ffc107;
  --app-progress-danger: #d32f2f;

  /* Form fields (Part 2) */
  --app-input-bg: #ffffff;
  --app-input-border: #d1d7db;
  --app-input-fg: #111b21;
  --app-input-placeholder: #8696a0;
  --app-input-focus-border: #2563eb;
  --app-input-focus-ring: rgba(37, 99, 235, 0.2);
  --app-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667781' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  /* Part 5 — polish */
  --app-user-avatar-size: 36px;
  --app-user-avatar-fg: #ffffff;
  --app-stat-hover-lift: -2px;
  --app-stat-hover-shadow: 0 4px 12px color-mix(in srgb, var(--app-text-primary) 12%, transparent);
  --app-scrollbar-size: 6px;
  --app-scrollbar-radius: 3px;
  --app-scrollbar-thumb: var(--app-border);
  --app-scrollbar-thumb-hover: var(--app-text-muted);
  --app-flash-success-bg: #d1fae5;
  --app-flash-success-accent: #16a34a;
  --app-flash-success-fg: #166534;
  --app-flash-danger-bg: #ffe0e0;
  --app-flash-danger-accent: #d32f2f;
  --app-flash-danger-fg: #d32f2f;
  --app-flash-info-bg: color-mix(in srgb, var(--app-primary) 8%, var(--app-card-bg));
  --app-flash-info-accent: var(--app-primary);
  --app-flash-info-fg: var(--app-primary-dark);
  --app-flash-dismiss-duration: 5s;
  --app-theme-tooltip-bg: var(--app-card-bg);
  --app-theme-tooltip-fg: var(--app-text-primary);
  --app-theme-tooltip-border: var(--app-border);
  --app-theme-tooltip-shadow: 0 2px 10px color-mix(in srgb, var(--app-text-primary) 10%, transparent);
}

[data-theme="dark"] {
  --app-sidebar-bg: #111b21;
  --app-sidebar-border: #222e35;
  --app-sidebar-outer-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
  --app-sidebar-header-bg: #1a2530;
  --app-nav-link-active-bg: #1e3a5f;
  --app-nav-link-active-fg: #93c5fd;
  --app-nav-signout-hover-fg: var(--app-badge-disconnected-fg);
  --app-header-bg: #202c33;
  --app-content-bg: #0b141a;
  --app-card-bg: #202c33;
  --app-text-primary: #e9edef;
  --app-text-secondary: #8696a0;
  --app-text-muted: #667781;
  --app-border: #222e35;
  --app-hover: #2a3942;
  --app-active: #2a3942;
  --app-icon: #aebac1;
  --app-badge-bg: #60a5fa;
  --app-badge-text: #111b21;

  --app-stat-messages-icon-bg: #1a3a52;
  --app-stat-messages-icon-color: #90caf9;

  /* Part 4 — badge contrast (dark) */
  --app-badge-connected-bg: #14532d;
  --app-badge-connected-fg: #4ade80;
  --app-badge-connecting-bg: #3a2e00;
  --app-badge-connecting-fg: #fcd34d;
  --app-badge-disconnected-bg: #3a1a1a;
  --app-badge-disconnected-fg: #f87171;
  --app-badge-outbound-bg: #1a2a3a;
  --app-badge-outbound-fg: #60a5fa;
  --app-badge-inbound-bg: #14532d;
  --app-badge-inbound-fg: #4ade80;
  --app-badge-sent-bg: #2a3942;
  --app-badge-sent-fg: #aebac1;
  --app-badge-delivered-bg: #1f3528;
  --app-badge-delivered-fg: #81c784;
  --app-badge-read-bg: #1a3040;
  --app-badge-read-fg: #90caf9;
  --app-badge-failed-bg: #3d2222;
  --app-badge-failed-fg: #ff8a80;
  --app-badge-neutral-bg: #2a3942;
  --app-badge-neutral-fg: #aebac1;
  --app-badge-current-bg: #1e3a5f;
  --app-badge-current-fg: #93c5fd;

  --app-link: #93c5fd;
  --app-btn-primary-hover: #93c5fd;
  --app-stat-card-hover-bg: var(--app-hover);
  --app-on-primary: #111b21;

  --app-avatar-fg: #111b21;
  --app-dropdown-bg: var(--app-card-bg);
  --app-dropdown-border: var(--app-border);
  --app-progress-warning: #ffc107;
  --app-progress-danger: #ff8a80;

  --app-input-bg: #2a3942;
  --app-input-border: #3b4a54;
  /* Table + card/list borders on surfaces: visible on --app-card-bg (unlike #222e35) */
  --app-table-border: var(--app-input-border);
  --app-card-border: var(--app-table-border);
  --app-input-fg: #e9edef;
  --app-input-placeholder: #667781;
  --app-input-focus-border: #60a5fa;
  --app-input-focus-ring: rgba(96, 165, 250, 0.25);
  --app-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238696A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  --app-stat-hover-shadow: 0 4px 16px color-mix(in srgb, var(--app-text-primary) 32%, transparent);
  --app-scrollbar-thumb: var(--app-border);
  --app-scrollbar-thumb-hover: var(--app-text-secondary);
  --app-flash-success-bg: color-mix(in srgb, var(--app-primary) 14%, var(--app-card-bg));
  --app-flash-success-accent: var(--app-primary);
  --app-flash-success-fg: var(--app-badge-connected-fg);
  --app-flash-danger-bg: color-mix(in srgb, var(--app-badge-disconnected-fg) 12%, var(--app-card-bg));
  --app-flash-danger-accent: var(--app-badge-disconnected-fg);
  --app-flash-danger-fg: var(--app-badge-disconnected-fg);
  --app-flash-info-bg: color-mix(in srgb, var(--app-primary) 12%, var(--app-card-bg));
  --app-flash-info-accent: var(--app-primary);
  --app-flash-info-fg: var(--app-text-primary);
  --app-theme-tooltip-bg: var(--app-card-bg);
  --app-theme-tooltip-fg: var(--app-text-primary);
  --app-theme-tooltip-border: var(--app-border);
  --app-theme-tooltip-shadow: 0 2px 12px color-mix(in srgb, var(--app-text-primary) 28%, transparent);
}

/* ---- Paniware colours and shapes (UI refresh, D-181) --------------------------- */

:root {
  /* Tints for icon badges, avatars and charts; each has a soft background (-lt). */
  --app-green: #16a34a;   --app-green-rgb: 22, 163, 74;    --app-green-lt: #e9f9ef;
  --app-red: #dc2626;     --app-red-rgb: 220, 38, 38;      --app-red-lt: #fdeeee;
  --app-amber: #d97706;   --app-amber-rgb: 217, 119, 6;    --app-amber-lt: #fff5e6;
  --app-cyan: #0891b2;    --app-cyan-rgb: 8, 145, 178;     --app-cyan-lt: #e3f7fb;
  --app-violet: #7c3aed;  --app-violet-rgb: 124, 58, 237;  --app-violet-lt: #f2ecff;
  --app-pink: #db2777;    --app-pink-rgb: 219, 39, 119;    --app-pink-lt: #fdecf4;
  --app-gray: #64748b;    --app-gray-lt: #eef1f5;
  --app-pill-idle: #334155; --app-pill-idle-bg: #e2e8f0;  /* Draft and other waiting pills, readable at a glance */
  --app-blue: var(--app-primary); --app-blue-lt: var(--app-primary-light);

  /* Meaning colours: the same meaning in every theme. */
  --app-money-in: var(--app-green);  --app-money-in-lt: var(--app-green-lt);
  --app-owed: var(--app-red);        --app-owed-lt: var(--app-red-lt);
  --app-check: var(--app-amber);     --app-check-lt: var(--app-amber-lt);

  --app-surface-2: #f8fafc;
  --app-ink: #0f172a;                 /* dark bars on a light page (the phone cart bar) */
  --app-on-ink: #ffffff;
  --app-on-color: #ffffff;            /* text and icons on a coloured button or badge */
  --app-hero: linear-gradient(135deg, var(--app-primary-dark) 0%, var(--app-primary) 45%, var(--app-cyan) 100%);
  --app-on-hero: #ffffff;            /* text and icons on the --app-hero gradient, in every theme */
  --app-on-hero-soft: rgba(255, 255, 255, .18); /* a tile or track on the --app-hero gradient (U-10) */
  --app-whatsapp: #1fa855;
  --app-whatsapp-hover: #178f47;

  /* Charts (D-183) */
  --app-chart-bar: var(--app-primary);
  --app-chart-bar-opacity: 0.35;
  --app-chart-ghost: #d5dbe5;
  --app-chart-grid: #edf0f5;

  /* List tables (D-186): a clear head, lines you can see, a hover you notice. */
  --app-list-head-bg: #dde3ec;
  --app-list-head-fg: #1e293b;
  --app-list-line: #e2e8f0;
  --app-list-date-bg: #f5f7fa;
  --app-list-hover: rgba(var(--app-primary-rgb), 0.06);

  /* Shapes and shadows */
  --app-radius-card: 16px;
  --app-radius-control: 10px;
  --app-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06);
  --app-shadow-panel: 0 1px 3px rgba(0, 0, 0, 0.08);
  --app-shadow-raised: 0 8px 20px rgba(var(--app-primary-rgb), 0.4);
  --app-shadow-tabbar: 0 -2px 12px rgba(0, 0, 0, 0.06);
  --app-shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.14);
  --app-shadow-cartbar: 0 12px 30px rgba(15, 23, 42, 0.35); /* the till's cart bar (D-187) */
  --app-avatar-me: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%); /* the user's own avatar in the top bar (G-1) */
  --app-shadow-drawer: 4px 0 18px rgba(0, 0, 0, 0.18);
  --app-shadow-drawer-rtl: -4px 0 18px rgba(0, 0, 0, 0.18);
  --app-backdrop: rgba(0, 0, 0, 0.45);
  --app-usage-progress-success: var(--app-green);
  --app-brand-highlight: #ffffff;    /* the shine on the droplet mark */
}

[data-theme="dark"] {
  --app-green: #4ade80;   --app-green-rgb: 74, 222, 128;   --app-green-lt: #12301f;
  --app-red: #f87171;     --app-red-rgb: 248, 113, 113;    --app-red-lt: #3a1717;
  --app-amber: #fbbf24;   --app-amber-rgb: 251, 191, 36;   --app-amber-lt: #36290f;
  --app-cyan: #22d3ee;    --app-cyan-rgb: 34, 211, 238;    --app-cyan-lt: #0d2e36;
  --app-violet: #a78bfa;  --app-violet-rgb: 167, 139, 250; --app-violet-lt: #251c40;
  --app-pink: #f472b6;    --app-pink-rgb: 244, 114, 182;   --app-pink-lt: #3a1630;
  --app-gray: #aebac1;    --app-gray-lt: #2a3942;
  --app-pill-idle: #e9edef; --app-pill-idle-bg: #3b4a54;

  --app-surface-2: #2a3942;
  --app-ink: #2a3942;
  --app-on-ink: #e9edef;
  --app-on-color: #111b21;
  --app-hero: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 50%, #0e7490 100%);

  --app-chart-bar-opacity: 0.6;
  --app-chart-ghost: #3a404c;
  --app-chart-grid: #2a3942;

  --app-list-head-bg: #0e171e;
  --app-list-head-fg: #e9edef;
  --app-list-line: #2f3e48;
  --app-list-date-bg: #16212a;
  --app-list-hover: rgba(var(--app-primary-rgb), 0.1);

  --app-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* ---- Tabler follows the tokens ------------------------------------------------- */

.app-dashboard {
  --tblr-primary: var(--app-primary);
  --tblr-primary-rgb: var(--app-primary-rgb);
  --tblr-green: var(--app-green);
  --tblr-green-rgb: var(--app-green-rgb);
  --tblr-success: var(--app-green);
  --tblr-success-rgb: var(--app-green-rgb);
  --tblr-red: var(--app-red);
  --tblr-red-rgb: var(--app-red-rgb);
  --tblr-danger: var(--app-red);
  --tblr-danger-rgb: var(--app-red-rgb);
  --app-input-focus-border: var(--app-primary);
  --app-input-focus-ring: rgba(var(--app-primary-rgb), 0.2);
}

/* Dark: the surface, text and border Tabler gives a plain button (and its other parts)
   follow the tokens too; a plain .btn was white on the dark page (U-6). */
[data-theme="dark"] .app-dashboard {
  --tblr-bg-surface: var(--app-surface-2);
  --tblr-body-color: var(--app-text-primary);
  --tblr-border-color: var(--app-list-line);
  --tblr-border-active-color: var(--app-text-secondary);
}