/*
 * ============================================================================
 * THEME TOKENS - Single source of truth for CloudHUB UI colors & typography
 * ============================================================================
 *
 * This file is the ONLY place we should edit when changing:
 *   - Brand colors (primary, success, info, warning, danger)
 *   - Sidebar / page background colors (light mode & dark mode)
 *   - Font family, base font size, line-height
 *   - Button colors (primary / success / CTA)
 *
 * HOW IT WORKS
 * ------------
 * Section 1 ("TOKENS") holds the actual values - edit these.
 * Section 2 ("WIRING") maps those tokens onto the theme's existing hooks
 * (Hyper's --ct-* variables, Bootstrap classes, sidebar/menu variables, etc.)
 * so a single token change cascades everywhere it needs to. You should not
 * need to touch Section 2 for normal color/font changes.
 *
 * This file is loaded LAST in base.html (after app-saas.min.css and
 * theme-customizer.css) so its rules win the cascade without needing
 * `!important` hacks for new rules we add here.
 *
 * The values below currently match the live site exactly - this file is a
 * refactor of "where the values live", not a visual change.
 * ============================================================================
 */

/* ============================================================================
 * 1. TOKENS - edit these values to change the look of the whole app
 * ============================================================================
 */
:root {
    /* --- Typography --- */
    --brand-font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --brand-font-size-base: 1.05rem;
    --brand-line-height-base: 1.5;
    --brand-font-size-small: 0.95rem;
    --brand-font-size-label: 0.9rem;
    --brand-font-size-h1: 1.6rem;
    --brand-font-size-h2: 1.35rem;
    --brand-font-size-h3: 1.2rem;
    --brand-font-size-h4: 1.1rem;

    /* --- Brand / semantic colors (light mode) --- */
    --brand-primary: #023c58;
    --brand-primary-hover: #012f46;
    --brand-primary-active: #01253a;
    --brand-action-primary: #023c58;
    --brand-action-primary-hover: #012f46;
    --brand-action-primary-text: #ffffff;
    --brand-success: #2bc700;
    --brand-success-green: #2bc700;
    --brand-success-green-hover: #00910d;
    --brand-info: #00a9e2;
    --brand-warning: #ffbc00;
    --brand-danger: #fa5c7c;
    --brand-link-color: #023c58;

    /* --- Shared light-mode component surfaces --- */
    --brand-text-heading: #1a2b3c;
    --brand-text-body: #334b5c;
    --brand-text-muted: #506371;
    --brand-text-subtle: #7b8c99;
    --brand-surface: #ffffff;
    --brand-surface-muted: #f8fafc;
    --brand-surface-tint: #e6f7fc;
    --brand-border: #eef2f7;
    --brand-border-strong: #d9e2e8;
    --brand-form-border: rgba(2, 60, 88, 0.55);
    --brand-focus-ring: rgba(2, 60, 88, 0.14);
    --brand-icon-color: #0CA8E1;
    --brand-icon-tile: transparent;
    --brand-radius-sm: 0.5rem;
    --brand-radius-md: 0.75rem;
    --brand-radius-lg: 0.9rem;
    --brand-shadow-card: 0 0 30px rgba(154, 161, 171, 0.1);

    /* Bootstrap semantic utilities inherit the same palette. */
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 2, 60, 88;
    --bs-success: var(--brand-success-green);
    --bs-success-rgb: 43, 199, 0;
    --bs-danger: var(--brand-danger);
    --bs-danger-rgb: 250, 92, 124;
    --bs-body-color: var(--brand-text-body);
    --bs-body-bg: var(--brand-body-bg-light);

    /* --- Page background --- */
    --brand-body-bg-light: #EBF5FD;
    --brand-body-bg-dark: #062132;

    /* --- Sidebar (menu) background, split by site light/dark mode --- */
    --brand-menu-bg-light: #072038;
    --brand-menu-bg-dark: #062232;
    --brand-menu-border: #2B708A;
    --brand-menu-divider: #1A5871;
    --brand-menu-item-color: #ffffff;
    --brand-menu-item-hover-color: #ffffff;
    --brand-menu-item-active-color: #ffffff;

    /* --- Topbar (top navbar with notifications/theme toggle/profile), split by site light/dark mode --- */
    --brand-topbar-bg-light: #ffffff;
    --brand-topbar-bg-dark: #0B2B3B;
    --brand-topbar-item-color-light: #6c757d;
    --brand-topbar-item-hover-color-light: var(--brand-primary);
    --brand-topbar-item-color-dark: #ffffff;
    --brand-topbar-item-hover-color-dark: #bccee4;
}

/* ============================================================================
 * 2. WIRING - maps tokens above onto the theme's existing variables/classes
 * ============================================================================
 */

/* --- Typography --- */
body,
html {
    font-family: var(--brand-font-family);
    overflow-x: clip;
}

:root {
    --ct-body-font-family: var(--brand-font-family);
    --ct-body-font-size: var(--brand-font-size-base);
    --ct-body-line-height: var(--brand-line-height-base);
    --ct-link-color: var(--brand-link-color);
    --ct-leftbar-width: 280px;

    /* Hyper theme brand colors */
    --ct-primary: var(--brand-primary);
    --ct-success: var(--brand-success);
    --ct-info: var(--brand-info);
    --ct-warning: var(--brand-warning);
    --ct-danger: var(--brand-danger);

    /* Page background (light mode) */
    --ct-body-bg: var(--brand-body-bg-light);
}

/* --- Page background (dark mode) --- */
[data-bs-theme="dark"] {
    --ct-body-bg: var(--brand-body-bg-dark);
    --brand-text-heading: #ffffff;
    --brand-text-body: #e2e8ed;
    --brand-text-muted: #c1cbd3;
    --brand-text-subtle: #9ba8b2;
    --brand-menu-item-color: #ffffff;
    --brand-menu-item-hover-color: #ffffff;
    --brand-surface: #0B364B;
    --brand-surface-muted: #104257;
    --brand-surface-tint: rgba(12, 168, 225, 0.10);
    --brand-border: #1A5871;
    --brand-border-strong: #2B708A;
    --brand-form-border: #2B708A;
    --brand-focus-ring: rgba(12, 168, 225, 0.22);
    --brand-icon-color: #0CA8E1;
    --brand-icon-tile: transparent;
    --brand-shadow-card: none;
    --brand-link-color: #ffffff;
    --ct-link-color: var(--brand-link-color);
    --brand-action-primary: #2bc700;
    --brand-action-primary-hover: #00910d;
    --brand-action-primary-text: #023c58;
    --bs-primary: var(--brand-success-green);
    --bs-primary-rgb: 43, 199, 0;
    --bs-success: var(--brand-success-green);
    --bs-success-rgb: 43, 199, 0;
    --bs-danger: var(--brand-danger);
    --bs-danger-rgb: 250, 92, 124;
    --bs-body-color: var(--brand-text-body);
    --bs-body-bg: var(--brand-body-bg-dark);
}

/* --- Sidebar background & menu item colors (site light mode) --- */
html[data-menu-color="dark"] {
    --ct-menu-bg: var(--brand-menu-bg-light);
    --ct-menu-item-color: var(--brand-menu-item-color);
    --ct-menu-item-hover-color: var(--brand-menu-item-hover-color);
    --ct-menu-item-active-color: var(--brand-menu-item-active-color);
}

/* --- Sidebar background & menu item colors (site dark mode) --- */
html[data-bs-theme="dark"][data-menu-color="light"],
html[data-bs-theme="dark"][data-menu-color="dark"] {
    --ct-menu-bg: var(--brand-menu-bg-dark);
    --ct-menu-item-color: var(--brand-menu-item-color);
    --ct-menu-item-hover-color: var(--brand-menu-item-hover-color);
    --ct-menu-item-active-color: var(--brand-menu-item-active-color);
}

.leftside-menu {
    border-right: 1px solid var(--brand-menu-divider) !important;
}

/* --- Topbar background & item colors (site light mode) --- */
html[data-topbar-color="light"] {
    --ct-topbar-bg: var(--brand-topbar-bg-light);
    --ct-topbar-item-color: var(--brand-topbar-item-color-light);
    --ct-topbar-item-hover-color: var(--brand-topbar-item-hover-color-light);
}

/* --- Topbar background & item colors (site dark mode) ---
 * The topbar follows the page theme. These selectors deliberately cover
 * persisted legacy `light` values during normalisation as well as `dark`. */
html[data-bs-theme="dark"][data-topbar-color="light"] .navbar-custom,
html[data-bs-theme="dark"][data-topbar-color="dark"] .navbar-custom {
    background-color: var(--brand-topbar-bg-dark) !important;
}

html[data-bs-theme="dark"][data-topbar-color="light"] .navbar-custom .topbar-menu .nav-link,
html[data-bs-theme="dark"][data-topbar-color="light"] .navbar-custom .topbar-menu .nav-link span,
html[data-bs-theme="dark"][data-topbar-color="light"] .navbar-custom .topbar-menu .nav-link i,
html[data-bs-theme="dark"][data-topbar-color="dark"] .navbar-custom .topbar-menu .nav-link,
html[data-bs-theme="dark"][data-topbar-color="dark"] .navbar-custom .topbar-menu .nav-link span,
html[data-bs-theme="dark"][data-topbar-color="dark"] .navbar-custom .topbar-menu .nav-link i {
    color: var(--brand-topbar-item-color-dark) !important;
}

html[data-bs-theme="dark"][data-topbar-color="light"] .navbar-custom .topbar-menu .nav-link:hover,
html[data-bs-theme="dark"][data-topbar-color="light"] .navbar-custom .topbar-menu .nav-link:hover span,
html[data-bs-theme="dark"][data-topbar-color="light"] .navbar-custom .topbar-menu .nav-link:hover i,
html[data-bs-theme="dark"][data-topbar-color="light"] .navbar-custom .topbar-menu .nav-link.show,
html[data-bs-theme="dark"][data-topbar-color="light"] .navbar-custom .topbar-menu .nav-link.show span,
html[data-bs-theme="dark"][data-topbar-color="light"] .navbar-custom .topbar-menu .nav-link.show i,
html[data-bs-theme="dark"][data-topbar-color="dark"] .navbar-custom .topbar-menu .nav-link:hover,
html[data-bs-theme="dark"][data-topbar-color="dark"] .navbar-custom .topbar-menu .nav-link:hover span,
html[data-bs-theme="dark"][data-topbar-color="dark"] .navbar-custom .topbar-menu .nav-link:hover i,
html[data-bs-theme="dark"][data-topbar-color="dark"] .navbar-custom .topbar-menu .nav-link.show,
html[data-bs-theme="dark"][data-topbar-color="dark"] .navbar-custom .topbar-menu .nav-link.show span,
html[data-bs-theme="dark"][data-topbar-color="dark"] .navbar-custom .topbar-menu .nav-link.show i {
    color: var(--brand-topbar-item-hover-color-dark) !important;
}

/* --- Topbar dropdown menus (profile, language) text/icons in dark mode ---
 * profile-dropdown/language-dropdown items have hardcoded light-mode text
 * colors in modern-dropdown.css; make them follow the topbar dark token so
 * they stay readable against the dark dropdown background. */
[data-bs-theme="dark"] .profile-dropdown .dropdown-item,
[data-bs-theme="dark"] .profile-dropdown .dropdown-item span,
[data-bs-theme="dark"] .profile-dropdown .dropdown-item i,
[data-bs-theme="dark"] .language-dropdown .dropdown-item,
[data-bs-theme="dark"] .language-dropdown .dropdown-item span,
[data-bs-theme="dark"] .language-dropdown .dropdown-item .align-middle {
    color: var(--brand-topbar-item-color-dark) !important;
}

/* --- Buttons: primary --- */
.btn-primary {
    --bs-btn-bg: var(--brand-action-primary);
    --bs-btn-border-color: var(--brand-action-primary);
    --bs-btn-hover-bg: var(--brand-action-primary-hover);
    --bs-btn-hover-border-color: var(--brand-action-primary-hover);
    --bs-btn-active-bg: var(--brand-action-primary-hover);
    --bs-btn-active-border-color: var(--brand-action-primary-hover);
    --bs-btn-color: var(--brand-action-primary-text);
    --ct-btn-bg: var(--brand-action-primary);
    --ct-btn-border-color: var(--brand-action-primary);
    --ct-btn-hover-bg: var(--brand-action-primary-hover);
    --ct-btn-hover-border-color: var(--brand-action-primary-hover);
}

/* --- Buttons: success remains semantic green in both themes. --- */
.btn-success {
    --bs-btn-bg: var(--brand-success-green);
    --bs-btn-border-color: var(--brand-success-green);
    --bs-btn-hover-bg: var(--brand-success-green-hover);
    --bs-btn-hover-border-color: var(--brand-success-green-hover);
    --bs-btn-active-bg: var(--brand-success-green-hover);
    --bs-btn-active-border-color: var(--brand-success-green-hover);
    --bs-btn-color: var(--brand-primary);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active {
    color: var(--brand-primary);
}

.btn-primary.bg-standard-green {
    background-color: var(--brand-action-primary) !important;
    border-color: var(--brand-action-primary) !important;
    color: var(--brand-action-primary-text) !important;
}

.btn-primary.bg-standard-green:hover,
.btn-primary.bg-standard-green:focus,
.btn-primary.bg-standard-green:active {
    background-color: var(--brand-action-primary-hover) !important;
    border-color: var(--brand-action-primary-hover) !important;
}

/* --- Backgrounds using the brand primary --- */
.bg-primary,
.bg-custom-primary {
    background-color: var(--brand-primary) !important;
}

/* --- Disable hover "lift" (transform) and "glow" (box-shadow) effects on
 * cards/boxes in the body content area, on every page, in both light and
 * dark mode. Many page-specific CSS files (customer_list.css, profile.css,
 * customer_detail.css, cndb_status.css, call_forwarding.css,
 * porting_list.css, cdrs.css, admin/portings_changelist.css, etc.) give
 * these containers a `transform: translateY(...)` lift and/or a stronger
 * box-shadow glow on `:hover`. We neutralize both here in one place instead
 * of editing every page file individually.
 *
 * The `body` prefix on every selector below adds specificity beyond a
 * plain `.stats-card:hover` (even with !important), so this override always
 * wins regardless of which CSS file loads last. */
body .card:hover,
body .stats-card:hover,
body .stat-card:hover,
body .dashboard-stat-card:hover,
body .settings-card:hover,
body .detail-card:hover,
body .table-elevated:hover {
    transform: none !important;
    box-shadow: var(--ct-box-shadow) !important;
}

/* Cards still show their normal resting shadow in light mode (the rule
 * above restores that same value on hover, cancelling the "extra" glow).
 * In dark mode, cancel the glow entirely, at rest AND on hover, since
 * several files never scoped the glow color to dark mode at all - it
 * would otherwise stay a light gray glow against the dark card. This is
 * more specific than the `body .card:hover` rule above, so it always wins
 * in dark mode regardless of load order. */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card:hover,
[data-bs-theme="dark"] .stats-card,
[data-bs-theme="dark"] .stats-card:hover,
[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .stat-card:hover,
[data-bs-theme="dark"] .dashboard-stat-card,
[data-bs-theme="dark"] .dashboard-stat-card:hover,
[data-bs-theme="dark"] .settings-card,
[data-bs-theme="dark"] .settings-card:hover,
[data-bs-theme="dark"] .detail-card,
[data-bs-theme="dark"] .detail-card:hover,
[data-bs-theme="dark"] .table-elevated,
[data-bs-theme="dark"] .table-elevated:hover {
    box-shadow: none !important;
}

/* The sidebar is already visually distinct in dark mode; remove Hyper's
 * light-colored edge shadow so it does not create a vertical glow between
 * the navigation and the content area. */
[data-bs-theme="dark"] .leftside-menu {
    border-right: 1px solid var(--brand-menu-divider) !important;
    box-shadow: none !important;
}

/* Checked checkboxes always retain the brand-success treatment in dark mode,
 * even when an app-level stylesheet declares a Bootstrap primary colour. */
html[data-bs-theme="dark"] body :is(input[type="checkbox"], .form-check-input[type="checkbox"]):checked {
    accent-color: var(--brand-success-green);
    background-color: var(--brand-success-green) !important;
    border-color: var(--brand-success-green) !important;
}

/* Some legacy forms place their explanatory label after a select. Treat that
 * label as supporting copy rather than a second full-sized field label. */
.form-check > :is(select, .form-select) + .form-check-label {
    display: block;
    margin-top: 0.3rem;
    color: var(--brand-text-muted);
    font-size: var(--brand-font-size-label);
    font-weight: 500;
    line-height: 1.35;
}

/* Privacy listing controls are selects, not checkbox controls. Keep their
 * compact labels and fields aligned with every other form field. */
.privacy-setting {
    padding-left: 0;
}

.privacy-setting-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--brand-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.privacy-setting .form-select {
    width: 100%;
}

/* Compact the shared page-header pattern across feature pages. */
.content-page .content .ch-eyebrow {
    display: none !important;
}

.content-page .content .ch-eyebrow + h1 {
    margin: 0 0 0.25rem !important;
    font-size: 1.2rem !important;
}

.content-page .content .ch-eyebrow + h1 + p {
    display: none;
}

.ch-title-metric {
    color: var(--brand-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.ch-title-metric strong {
    color: var(--brand-icon-color);
    font-weight: 800;
}