/* Sales Intellect - THEMES (2026-08-26). Ocean, Forest and Midnight plus the
 * dark-header option. Loaded after core.css, before interface.css, only where
 * a non-default theme can apply (signed-in pages; a public booking page whose
 * host picked one). The Intellect default lives in core.css. */
/* ---- Theme fixes for dark mode (M16) ------------------------------ */
.theme-midnight .field-sort-item {
    background-color: var(--bs-tertiary-bg);
    border-color: #334155;
}
.theme-midnight .field-sort-item:hover {
    border-color: #818cf8;
}
.theme-midnight .tag-filter-item:hover {
    background-color: rgba(129, 140, 248, .08);
}

/* ---- Theme: Ocean (cool blue) ------------------------------------ */
.theme-ocean {
    /* Goal-pill status — see :root for why these are pill-only. */
    --goal-done-bg: #d1fae5;  --goal-done-fg: #065f46;
    --goal-notdone-bg: #fee2e2;  --goal-notdone-fg: #b91c1c;
    --goal-todo-bg: #fef3c7;  --goal-todo-fg: #92400e;
    --goal-overdue-bg: #fbe6e1;  --goal-overdue-fg: #7f1d1d;

    --bs-body-bg:        #f0f4f8;
    --bs-body-color:     #0f172a;
    --bs-emphasis-color: #0c4a6e;
    --bs-secondary-color: #475569;
    --bs-tertiary-color:  #94a3b8;
    --bs-tertiary-bg:     #e2e8f0;

    --bs-border-color:             #cbd5e1;
    --bs-border-color-translucent: rgba(15, 23, 42, .08);

    --bs-primary:     #0f766e;
    --bs-primary-rgb: 15, 118, 110;
    /* Switches and tick boxes (core.css IN-04): change these to give them a
       colour of their own; they follow the primary colour by default. */
    --is-switch-on:     #0f766e;
    --is-switch-on-rgb: 15, 118, 110;
    --bs-link-color:        #0f766e;
    --bs-link-color-rgb:    15, 118, 110;
    --bs-link-hover-color:  #0369a1;   /* the theme's own deep-ocean blue family */
    --bs-link-hover-color-rgb: 3, 105, 161;

    --bs-secondary:     #64748b;
    --bs-secondary-rgb: 100, 116, 139;

    --is-accent: #0f766e;
    --is-accent-soft: rgba(15, 118, 110, .08);
    --is-warm-bg: #f0f4f8;
    --is-header-dark: #0c4a6e;   /* deep ocean blue — the theme's emphasis tone */
    --is-chart-1: #0f766e;   --is-chart-2: #c2410c;   /* chart blocks' Auto colours (bars, goals) - interface.css .fnl-card */
}
.theme-ocean .btn-primary {
    --bs-btn-bg:         #0f766e;
    --bs-btn-border-color: #0f766e;
    --bs-btn-hover-bg:   #115e59;
    --bs-btn-hover-border-color: #115e59;
    --bs-btn-active-bg:  #134e4a;
    --bs-btn-active-border-color: #134e4a;
    --bs-btn-color:      #f0fdfa;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-disabled-bg:           #cbd5e1;
    --bs-btn-disabled-border-color: #94a3b8;
    --bs-btn-disabled-color:        #64748b;
}
.theme-ocean .btn-outline-primary {
    --bs-btn-color:        #0f766e;
    --bs-btn-border-color: #cbd5e1;
    --bs-btn-hover-bg:     #e2e8f0;
    --bs-btn-hover-border-color: #0f766e;
    --bs-btn-hover-color:  #0f766e;
    --bs-btn-active-bg:    #0f766e;
    --bs-btn-active-border-color: #0f766e;
    --bs-btn-active-color: #ffffff;
}
.theme-ocean .btn-outline-secondary {
    --bs-btn-color:        #475569;
    --bs-btn-border-color: #cbd5e1;
    --bs-btn-hover-bg:     #e2e8f0;
    --bs-btn-hover-color:  #0f172a;
    --bs-btn-hover-border-color: #94a3b8;
}
.theme-ocean .app-navbar {
    background-color: rgba(240, 244, 248, .85);
}
.theme-ocean .table {
    --bs-table-hover-bg:   rgba(15, 23, 42, .035);
    --bs-table-striped-bg: rgba(15, 23, 42, .02);
}
.theme-ocean .table-light,
.theme-ocean .table-light > th,
.theme-ocean .table-light > td {
    --bs-table-bg:    #e2e8f0;
    --bs-table-color: #475569;
}
.theme-ocean .table > thead th {
    color: #475569;
}
.theme-ocean .nav-tabs .badge {
    background-color: #cbd5e1 !important;
    color: #475569 !important;
}

/* ---- Theme: Forest (natural green) -------------------------------- */
.theme-forest {
    /* Goal-pill status — see :root for why these are pill-only. */
    --goal-done-bg: #d1fae5;  --goal-done-fg: #065f46;
    --goal-notdone-bg: #fee2e2;  --goal-notdone-fg: #b91c1c;
    --goal-todo-bg: #fef3c7;  --goal-todo-fg: #92400e;
    --goal-overdue-bg: #fbe6e1;  --goal-overdue-fg: #7f1d1d;

    --bs-body-bg:        #f4f7f2;
    --bs-body-color:     #1a2e1a;
    --bs-emphasis-color: #14532d;
    --bs-secondary-color: #4a7c59;
    --bs-tertiary-color:  #8ba888;
    --bs-tertiary-bg:     #e6ede3;

    --bs-border-color:             #cfe0cf;
    --bs-border-color-translucent: rgba(26, 46, 26, .08);

    --bs-primary:     #2d6a4f;
    --bs-primary-rgb: 45, 106, 79;
    /* Switches and tick boxes (core.css IN-04): change these to give them a
       colour of their own; they follow the primary colour by default. */
    --is-switch-on:     #2d6a4f;
    --is-switch-on-rgb: 45, 106, 79;
    --bs-link-color:        #2d6a4f;
    --bs-link-color-rgb:    45, 106, 79;
    --bs-link-hover-color:  #4d7c0f;   /* moss olive */
    --bs-link-hover-color-rgb: 77, 124, 15;

    --bs-secondary:     #5a8f6a;
    --bs-secondary-rgb: 90, 143, 106;

    --is-accent: #2d6a4f;
    --is-accent-soft: rgba(45, 106, 79, .08);
    --is-warm-bg: #f4f7f2;
    --is-header-dark: #14532d;   /* deep forest green — the theme's emphasis tone */
    --is-chart-1: #2d6a4f;   --is-chart-2: #b87d12;   /* chart blocks' Auto colours (bars, goals) - interface.css .fnl-card */
}
.theme-forest .btn-primary {
    --bs-btn-bg:         #2d6a4f;
    --bs-btn-border-color: #2d6a4f;
    --bs-btn-hover-bg:   #1b4332;
    --bs-btn-hover-border-color: #1b4332;
    --bs-btn-active-bg:  #143a26;
    --bs-btn-active-border-color: #143a26;
    --bs-btn-color:      #f0fdf4;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-disabled-bg:           #cfe0cf;
    --bs-btn-disabled-border-color: #8ba888;
    --bs-btn-disabled-color:        #5a8f6a;
}
.theme-forest .btn-outline-primary {
    --bs-btn-color:        #2d6a4f;
    --bs-btn-border-color: #cfe0cf;
    --bs-btn-hover-bg:     #e6ede3;
    --bs-btn-hover-border-color: #2d6a4f;
    --bs-btn-hover-color:  #2d6a4f;
    --bs-btn-active-bg:    #2d6a4f;
    --bs-btn-active-border-color: #2d6a4f;
    --bs-btn-active-color: #ffffff;
}
.theme-forest .btn-outline-secondary {
    --bs-btn-color:        #4a7c59;
    --bs-btn-border-color: #cfe0cf;
    --bs-btn-hover-bg:     #e6ede3;
    --bs-btn-hover-color:  #1a2e1a;
    --bs-btn-hover-border-color: #8ba888;
}
.theme-forest .app-navbar {
    background-color: rgba(244, 247, 242, .85);
}
.theme-forest .table {
    --bs-table-hover-bg:   rgba(26, 46, 26, .035);
    --bs-table-striped-bg: rgba(26, 46, 26, .02);
}
.theme-forest .table-light,
.theme-forest .table-light > th,
.theme-forest .table-light > td {
    --bs-table-bg:    #e6ede3;
    --bs-table-color: #4a7c59;
}
.theme-forest .table > thead th {
    color: #4a7c59;
}
.theme-forest .nav-tabs .badge {
    background-color: #cfe0cf !important;
    color: #4a7c59 !important;
}

/* ---- Theme: Midnight (dark mode) ---------------------------------- */
.theme-midnight {
    /* Goal-pill status — see :root for why these are pill-only. */
    --goal-done-bg: #064e3b;  --goal-done-fg: #6ee7b7;
    --goal-notdone-bg: #450a0a;  --goal-notdone-fg: #fca5a5;
    --goal-todo-bg: #451a03;  --goal-todo-fg: #fcd34d;
    --goal-overdue-bg: #5b1113;  --goal-overdue-fg: #fca5a5;

    --bs-body-bg:        #0f1117;
    --bs-card-bg:        #1a1d27;   /* = .theme-midnight .card */
    --bs-body-color:     #e2e8f0;
    --bs-emphasis-color: #f1f5f9;
    --bs-secondary-color: #94a3b8;
    --bs-tertiary-color:  #64748b;
    --bs-tertiary-bg:     #1e293b;

    --bs-border-color:             #334155;
    --bs-border-color-translucent: rgba(226, 232, 240, .08);

    --bs-primary:     #818cf8;
    --bs-primary-rgb: 129, 140, 248;
    /* Switches and tick boxes (core.css IN-04): change these to give them a
       colour of their own; they follow the primary colour by default. */
    --is-switch-on:     #818cf8;
    --is-switch-on-rgb: 129, 140, 248;
    --bs-link-color:        #818cf8;
    --bs-link-color-rgb:    129, 140, 248;
    --bs-link-hover-color:  #a5b4fc;
    --bs-link-hover-color-rgb: 165, 180, 252;

    --bs-secondary:     #64748b;
    --bs-secondary-rgb: 100, 116, 139;

    --is-accent: #818cf8;
    --is-accent-soft: rgba(129, 140, 248, .1);
    /* The theme's own ground, which reads 6.33:1 against the light accent. */
    --is-accent-contrast: #0f1117;
    --is-warm-bg: #0f1117;
    /* Midnight's navbar is already this colour, so the dark-header flag is a
       no-op here rather than a visual change. Defined anyway so the variable is
       never missing on any theme. */
    --is-header-dark: #0f1117;
    --is-chart-1: #818cf8;   --is-chart-2: #2aa87c;   /* chart blocks' Auto colours (bars, goals) - interface.css .fnl-card */

    color-scheme: dark;
}
.theme-midnight .form-control,
.theme-midnight .form-select {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
.theme-midnight .form-control:focus,
.theme-midnight .form-select:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 .2rem rgba(129, 140, 248, .15);
}
.theme-midnight .card {
    background-color: #1a1d27;
    border-color: #334155;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}
.theme-midnight .card-header,
.theme-midnight .card-footer {
    background-color: #1a1d27 !important;
    border-color: #334155;
}
.theme-midnight .btn-primary {
    --bs-btn-bg:         #6366f1;
    --bs-btn-border-color: #6366f1;
    --bs-btn-hover-bg:   #4f46e5;
    --bs-btn-hover-border-color: #4f46e5;
    --bs-btn-active-bg:  #4338ca;
    --bs-btn-active-border-color: #4338ca;
    --bs-btn-color:      #ffffff;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-disabled-bg:           #334155;
    --bs-btn-disabled-border-color: #475569;
    --bs-btn-disabled-color:        #94a3b8;
}
.theme-midnight .btn-outline-primary {
    --bs-btn-color:        #818cf8;
    --bs-btn-border-color: #475569;
    --bs-btn-hover-bg:     rgba(129, 140, 248, .08);
    --bs-btn-hover-border-color: #818cf8;
    --bs-btn-hover-color:  #818cf8;
    --bs-btn-active-bg:    #6366f1;
    --bs-btn-active-border-color: #6366f1;
    --bs-btn-active-color: #ffffff;
}
.theme-midnight .btn-outline-secondary {
    --bs-btn-color:        #94a3b8;
    --bs-btn-border-color: #475569;
    --bs-btn-hover-bg:     rgba(148, 163, 184, .08);
    --bs-btn-hover-color:  #e2e8f0;
    --bs-btn-hover-border-color: #94a3b8;
}
.theme-midnight .app-navbar {
    background-color: rgba(15, 17, 23, .85);
    border-bottom-color: #334155;
}
.theme-midnight .app-navbar .nav-link {
    color: #94a3b8;
}
.theme-midnight .app-navbar .nav-link:hover,
.theme-midnight .app-navbar .nav-link.active {
    color: #f1f5f9;
    background-color: rgba(129, 140, 248, .1);
}
.theme-midnight .table {
    --bs-table-bg: transparent;
    --bs-table-color: #e2e8f0;
    --bs-table-border-color: #334155;
    --bs-table-hover-bg: rgba(129, 140, 248, .04);
    --bs-table-striped-bg: rgba(129, 140, 248, .025);
}
.theme-midnight .table-light,
.theme-midnight .table-light > th,
.theme-midnight .table-light > td {
    --bs-table-bg: #1e293b;
    --bs-table-color: #94a3b8;
}
.theme-midnight .table > thead th {
    color: #94a3b8;
}
.theme-midnight .nav-tabs {
    border-bottom-color: #334155;
}
.theme-midnight .nav-tabs .nav-link {
    color: #94a3b8;
}
.theme-midnight .nav-tabs .nav-link:hover {
    color: #f1f5f9;
    border-color: transparent transparent #64748b;
}
.theme-midnight .nav-tabs .nav-link.active {
    color: #f1f5f9;
    border-color: transparent transparent #818cf8;
}
.theme-midnight .nav-tabs .badge {
    background-color: #334155 !important;
    color: #94a3b8 !important;
}
.theme-midnight .modal-content,
.theme-midnight .offcanvas {
    background-color: #1a1d27;
    border-color: #334155;
}
.theme-midnight .modal-header,
.theme-midnight .offcanvas-header {
    border-bottom-color: #334155;
}
.theme-midnight .modal-footer {
    border-top-color: #334155;
}
.theme-midnight .goal-future   { background-color: transparent; color: #64748b; }
.theme-midnight .goal-waiting  { background-color: transparent; color: #64748b; }
.theme-midnight .goal-sidebar .goal-item .goal-bullet {
    background-color: #334155;
    color: #94a3b8;
}
.theme-midnight .goal-sidebar .goal-item.state-done     .goal-bullet { background: #064e3b; color: #6ee7b7; }
.theme-midnight .goal-sidebar .goal-item.state-not_done .goal-bullet { background: #450a0a; color: #fca5a5; }
.theme-midnight .goal-sidebar .goal-item.state-todo     .goal-bullet { background: #451a03; color: #fcd34d; }
.theme-midnight .goal-sidebar .goal-item.state-overdue  .goal-bullet { background: #450a0a; color: #fca5a5; }
.theme-midnight .goal-sidebar .goal-item.state-anytime  .goal-bullet { background: #334155; color: #94a3b8; }
/* No .auth-* overrides here: auth screens always render Theme::DEFAULT, so the
   midnight theme never reaches them. */
.theme-midnight .history-block-header {
    background-color: #1e293b;
}
.theme-midnight .history-event {
    border-bottom-color: #1e293b;
}
.theme-midnight .field-target {
    background-color: #1e293b;
    box-shadow: inset 3px 0 0 #818cf8;
}
.theme-midnight .status-tile {
    background-color: #1a1d27;
    border-color: #334155;
    color: #94a3b8;
}
.theme-midnight .status-tile:hover {
    border-color: #818cf8;
    background-color: #1e293b;
    color: #f1f5f9;
}
.theme-midnight .status-tile.is-active {
    border-color: #818cf8;
    background-color: rgba(129, 140, 248, .08);
    box-shadow: inset 0 0 0 1px #818cf8;
    color: #f1f5f9;
}
/* The per-tone active tiles that used to be here are gone with data-tone —
 * the tiles are coloured by data-status now, from the specified palette (see
 * "Sales status palette"), which is one list of fixed inks rather than a
 * per-theme derivation. The three rules above stay as the fallback for a tile
 * rendered without a status.
 *
 * Worth keeping the reason they existed, because it is a live trap in this
 * file: an attribute selector counts in the same column as a class, so
 * `.theme-midnight .status-tile` and `.status-tile[data-status]` are BOTH
 * (0,2,0) and the later one simply wins. Nothing about a `.theme-midnight`
 * prefix makes a rule beat an unprefixed one on its own. */

/* Calendar: a dark-green lock glyph and a dark-green "Saved" both vanished
   against Midnight's ground. These genuinely were invisible. */
.theme-midnight .cal-day-chip.is-locked::before { color: #6ee7b7; }
.theme-midnight #cal-entry-save-status.is-saved { color: #6ee7b7; }
.theme-midnight #cal-entry-save-status.is-error { color: #fca5a5; }
.theme-midnight #gaInstructions {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
.theme-midnight .history-event-notes {
    background-color: #1e293b;
    border-left-color: #818cf8;
    color: #cbd5e1;
}
.theme-midnight .alert {
    border-color: #334155;
}
.theme-midnight .alert-success { background-color: #064e3b; color: #6ee7b7; }
.theme-midnight .alert-danger  { background-color: #450a0a; color: #fca5a5; }
.theme-midnight .alert-warning { background-color: #451a03; color: #fcd34d; }
.theme-midnight .alert-info    { background-color: #1e293b; color: #93c5fd; }
/* Slightly darker dropdown border across light themes (default/ocean/forest). */
.dropdown-menu {
    border-color: #aaa;
}
#processMenu {
    z-index: 1100;
}
.theme-midnight .dropdown-menu {
    background-color: #1a1d27;
    border-color: #858e9b;
}
.theme-midnight .dropdown-item {
    color: #e2e8f0;
}
.theme-midnight .dropdown-item:hover {
    background-color: rgba(129, 140, 248, .1);
    color: #f1f5f9;
}
.theme-midnight .dropdown-divider {
    border-color: #334155;
}
.theme-midnight .dropdown-item-text.text-muted {
    color: #64748b !important;
}
.theme-midnight .text-muted {
    color: var(--bs-secondary-color) !important;
}

/* ---- Dark header ("Always use dark header", per user) -------------
 * Applied as .header-dark on <html> when users.dark_header is set. Paints the
 * navbar with the active theme's --is-header-dark and inverts everything
 * sitting on it. Works with every theme; on Midnight it is a no-op because that
 * navbar is already the same colour.
 *
 * The navbar is the only dark surface here — the page body stays as the theme
 * defines it, and data-bs-theme is untouched, so dropdowns opened FROM the
 * navbar remain light panels on light themes. That is intentional.
 *
 * The long logo is switched to the on-dark file in views/partials/navbar.php —
 * CSS cannot swap it, so the two must stay in step.
 */
.header-dark .app-navbar {
    background-color: var(--is-header-dark);
    border-bottom-color: rgba(255, 255, 255, .12);
}
.header-dark .app-navbar .navbar-brand { color: #ffffff; }
.header-dark .app-navbar .nav-link { color: rgba(255, 255, 255, .75); }
.header-dark .app-navbar .nav-link:hover,
.header-dark .app-navbar .nav-link.active {
    color: #ffffff;
    background-color: rgba(255, 255, 255, .14);
}
.header-dark .app-navbar .sales-mode-split:hover > .dropdown-toggle-split,
.header-dark .app-navbar .sales-mode-split > .dropdown-toggle-split[aria-expanded="true"] {
    border-left-color: rgba(255, 255, 255, .25);
}
/* Muted text (tenant name / user email) would drop to ~2:1 on a dark bar. */
.header-dark .app-navbar .navbar-text,
.header-dark .app-navbar .text-muted {
    color: rgba(255, 255, 255, .6) !important;
}
/* The organisation name centred in the mobile bar is not muted text — it is the
   one place the organisation is named on a phone, so it is lifted further than
   the .6 above. It carries neither .navbar-text nor .text-muted, so without this
   it keeps --bs-secondary-color: a mid grey/slate/green that every light theme
   defines for a PAPER background and that lands at ~2:1 on its own dark bar. */
.header-dark .app-navbar .navbar-org-center,
.header-dark .app-navbar .navbar-org-name {
    color: rgba(255, 255, 255, .85);
}
/* ...but only text sitting ON the bar. A dropdown opened from the navbar is
   still a panel in the theme's own colours (see the note above), so muted text
   inside one keeps the theme's muted tone — without this the account email and
   "No processes assigned" render white-on-white in every light theme. */
.header-dark .app-navbar .dropdown-menu .navbar-text,
.header-dark .app-navbar .dropdown-menu .text-muted {
    color: var(--bs-secondary-color) !important;
}
/* Bootstrap's toggler icon is a dark SVG chosen by data-bs-theme, which stays
   "light" here — without this it is a dark glyph on a dark bar, i.e. invisible. */
.header-dark .app-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, .25);
}
.header-dark .app-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .18);
}
.header-dark .app-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}