/* ============================================================
   ELEVITA THEMES — AUTHORITATIVE THEME CONTRACT
   ============================================================

   PURPOSE
   -------
   This file defines ALL color values that originate from the
   Lib_Theme database table and binds those values to semantic
   UI roles (primary, surface, sidebar, navbar, muted text, etc).

   This file MAY:
   - Define CSS variables whose values come from Lib_Theme
   - Apply those variables to visual properties such as:
       • background-color
       • color
       • border-color
       • fill / stroke (icons, SVGs)
   - Bind theme-controlled colors to application components
     when the intent is for that component’s COLOR to be
     theme-driven (including chrome such as headers or sidebars)

   This file MUST NOT:
   - Define layout, sizing, spacing, positioning, or z-index
   - Define behavior (hover logic, transitions, animations)
   - Change structural or stacking rules of the application shell
   - Introduce hard-coded colors not sourced from Lib_Theme

   SEPARATION OF RESPONSIBILITIES
   ------------------------------
   themes.css controls WHAT colors are used.
   site.css controls HOW components are structured.

   If a visual change should occur when a different Lib_Theme
   row is selected, it belongs in this file.
   If a change affects layout or structure regardless of theme,
   it belongs in site.css.

   DESIGN AUTHORITY
   ----------------
   Lib_Theme values are curated and controlled by the application.
   Arbitrary or unsafe values (e.g., transparent chrome surfaces)
   are not permitted. As a result, it is valid for this file to
   apply theme-driven colors to top-level chrome components
   (such as headers, navbars, and sidebars).

   This contract is intentional and enforced.

   ============================================================ */

/* ============================================================
   DEFAULT THEME FALLBACK
   ThemeKey : slate
   ThemeMode: light
   Source   : Lib_Theme (Id = 11)
   PURPOSE  :
   - Enables static rendering (ChatGPT, previews, forms)
   - Acts as safe fallback before DB injection
   ============================================================ */

:root {
    /* ---------------------------------------------------------
       Page & Surface
       --------------------------------------------------------- */
    --elevita-bg-page: #dee0e1;
    --elevita-bg-card: #f7f7f7;
    --elevita-bg-card-small: #dee0e1;
    --elevita-surface-bg: #f7f7f7;
    --elevita-surface-muted: #dee0e1;
    --elevita-border: #d9e2ec;
    /* ---------------------------------------------------------
       Text
       --------------------------------------------------------- */
    --elevita-text-primary: #2d2d30;
    --elevita-text-secondary: #414141;
    --elevita-text-muted: #57576b;
    --elevita-text-helper: #57576b;
    /* ---------------------------------------------------------
       Navigation
       --------------------------------------------------------- */
    --elevita-nav-bg: #f7f7f7;
    --elevita-nav-selected-bg: #d3d6e0;
    --elevita-nav-selected-text: #414141;
    --elevita-nav-dot-selected: #2d2d30;
    --elevita-nav-hover-bg: #d3d6e0;
    --elevita-sidebar-bg: #f7f7f7;
    /* ---------------------------------------------------------
       Brand
       --------------------------------------------------------- */
    --elevita-brand-primary: #2a7a78;
    --elevita-brand-primary-hover: #174342;
    --elevita-brand-primary-soft: #eef2ff;
    --elevita-brand-primary-border: #7986b0;
    --elevita-brand-ui-text: #ffffff;
    /* ---------------------------------------------------------
       Badges
       --------------------------------------------------------- */
    --elevita-badge-primary: #7986b0;
    --elevita-badge-primary-border: #dee0e1;
    --elevita-badge-primary-text: #ffffff;
    /* ---------------------------------------------------------
       Status Dots
       --------------------------------------------------------- */
    --elevita-dot-blue: #487cf7;
    --elevita-dot-green: #0c885f;
    --elevita-dot-orange: #a46a07;
    --elevita-dot-purple: #4d488d;
    --elevita-dot-red: #a42a3f;
    /* ---------------------------------------------------------
       Buttons — Primary
       --------------------------------------------------------- */
    --elevita-btn-primary-bg: #4c4c4c;
    --elevita-btn-primary-border: #4c4c4c;
    --elevita-btn-primary-text: #ffffff;
    --elevita-btn-primary-hover: #3f3f3f;
    /* ---------------------------------------------------------
       Buttons — Cancel
       --------------------------------------------------------- */
    --elevita-btn-cancel-bg: #ffffff;
    --elevita-btn-cancel-border: #e3e8ef;
    --elevita-btn-cancel-text: #000000;
    --elevita-btn-cancel-hover-bg: #a6a8ab;
    --elevita-btn-cancel-hover-border: #e3e8ef;
    --elevita-btn-cancel-hover-text: #000000;
    --elevita-btn-cancel-shadow: none;
    /* ---------------------------------------------------------
       Buttons — Toggle / Pills
       --------------------------------------------------------- */
    --elevita-btn-toggle-bg: #ffffff;
    --elevita-btn-toggle-border: #d1d5db;
    --elevita-btn-toggle-text: #2d2d30;
    --elevita-btn-toggle-hover-bg: #f3f4f6;
    /* ---------------------------------------------------------
       Buttons — Disabled
       --------------------------------------------------------- */
    --elevita-btn-disabled-bg: #E5E7EB;
    --elevita-btn-disabled-border: #C7CCD4;
    --elevita-btn-disabled-text: #9AA1AC;
    /* ---------------------------------------------------------
       Tables
       --------------------------------------------------------- */
    --elevita-table-bg: #ffffff;
    --elevita-table-border: #dee0e1;
    --elevita-table-hover: color-mix(in srgb, var(--elevita-brand-primary) 14%, var(--elevita-table-bg));
    /* ---------------------------------------------------------
       Alerts — Success
       --------------------------------------------------------- */
    --elevita-alert-success-bg: #4d5c55;
    --elevita-alert-success-border: #199566;
    --elevita-alert-success-text: #6ebca2;
    /* ---------------------------------------------------------
       Alerts — Warning
       --------------------------------------------------------- */
    --elevita-alert-warning-bg: #8c8361;
    --elevita-alert-warning-border: #cab76a;
    --elevita-alert-warning-text: #7a2400;
    /* ---------------------------------------------------------
       Alerts — Danger
       --------------------------------------------------------- */
    --elevita-alert-danger-bg: #8a6b6e;
    --elevita-alert-danger-border: #9b0004;
    --elevita-alert-danger-text: #5e0015;
}

/* =========================================================
   ALERT
   ========================================================= */

.alert {
    background-color: var(--elevita-surface-bg);
    border-color: var(--elevita-surface-border);
}

.alert-success {
    background-color: var(--elevita-alert-success-bg);
    border-color: var(--elevita-alert-success-border);
    color: var(--elevita-alert-success-text);
}

/* =========================================================
   App Header — Theme-Controlled Chrome
   ========================================================= */
.app-header {
    background-color: var(--elevita-sidebar-bg);
    border-bottom: 1px solid var(--elevita-surface-border);
}

/* =========================================================
   BODY / PAGE CANVAS
   ========================================================= */

body {
    background-color: var(--elevita-bg-page);
    color: var(--elevita-text-primary);
}

/* =========================================================
   BOOTSTRAP BODY BACKGROUND — THEME CONTROL
   ========================================================= */
:root {
    --bs-body-bg: var(--elevita-bg-page);
}

/* =========================================================
   PAGE BACKGROUND 
   ========================================================= */
html,
body {
    background-color: var(--elevita-bg-page);
}

/* =========================================================
   BACKGROUND CARDS
   ========================================================= */
.elevita-card {
    background: var(--elevita-surface-bg);
    /*border: 1px solid var(--elevita-surface-border);*/
}

.card-body {
    background: var(--elevita-surface-bg);
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn-outline-primary {
    color: var(--elevita-brand-primary);
    border-color: var(--elevita-brand-primary-border);
}

.btn-outline-primary:hover {
    background-color: var(--elevita-brand-primary-soft);
}

/* =========================================================
   PRIMARY BUTTON
   ========================================================= */
.btn-primary {
    background-color: var(--elevita-btn-primary-bg);
    border-color: var(--elevita-btn-primary-border);
    color: var(--elevita-btn-primary-text);
}

    /* Hover / focus */
    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--elevita-btn-primary-hover);
        border-color: var(--elevita-btn-primary-hover);
    }

/* Bootstrap variable bridge (optional, but safe) */
.btn-primary {
    --bs-btn-bg: var(--elevita-btn-primary-bg);
    --bs-btn-border-color: var(--elevita-btn-primary-border);
    --bs-btn-color: var(--elevita-btn-primary-text);
}

/* ===============================
   CANCEL BUTTON 
   =============================== */
.btn-cancel {
    --bs-btn-color: var(--elevita-btn-cancel-text);
    --bs-btn-border-color: var(--elevita-btn-cancel-border);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--elevita-btn-cancel-hover-text);
    --bs-btn-hover-bg: var(--elevita-btn-cancel-hover-bg);
    --bs-btn-hover-border-color: var(--elevita-btn-cancel-hover-border);
    --bs-btn-active-color: var(--elevita-btn-cancel-hover-text);
    --bs-btn-active-bg: var(--elevita-btn-cancel-hover-bg);
    --bs-btn-active-border-color: var(--elevita-btn-cancel-hover-border);
    background-color: var(--elevita-btn-cancel-bg);
    color: var(--elevita-btn-cancel-text);
    border: 1px solid var(--elevita-btn-cancel-border);
    box-shadow: var(--elevita-btn-cancel-shadow);
}

/* =========================================================
   CARD
   ========================================================= */

/* =========================================================
   ELEVITA CARD — DEFAULT
   ========================================================= */

.card {
    background-color: var(--elevita-bg-card);
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: var(--bs-box-shadow-sm);
    border: 1px solid var(--elevita-table-border);
}

/* =========================================================
   DROPDOWN MENU
   ========================================================= */

.dropdown-menu {
    background-color: var(--elevita-surface-bg);
    border-color: var(--elevita-surface-border);
}

/* =========================================================
   FORMS
   ========================================================= */

.form-control,
.form-select {
    background-color: var(--elevita-input-bg);
    color: var(--elevita-input-text);
    border-color: var(--elevita-input-border);
}

.form-control::placeholder {
    color: var(--elevita-text-muted);
}

/* =========================================================
   LEFT NAV — ACTIVE ITEM (THEME DRIVEN)
   ========================================================= */

.left-nav-inner .item.active {
    background-color: var(--elevita-nav-selected-bg);
    color: var(--elevita-nav-selected-text);
    font-weight: 700;
}

.left-nav-inner .item.active .nav-label {
    color: var(--elevita-nav-selected-text);
}

/*.left-nav-inner .item.active .dot {
    background-color: var(--elevita-nav-dot-selected);
}
*/

/* Base nav item */
.left-nav .sidenav .item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    color: var(--elevita-text-secondary);
    text-decoration: none;
}

/* ACTIVE item */
.left-nav .sidenav .item.active {
    background-color: var(--elevita-nav-selected-bg);
    color: var(--elevita-nav-selected-text);
    font-weight: 600;
}

/* ACTIVE dot */
.left-nav .sidenav .item.active .dot {
    background-color: var(--elevita-nav-dot-selected);
}

/* Hover (non-active) */
.left-nav .sidenav .item:not(.active):hover {
    background-color: var(--elevita-nav-hover-bg);
}

/* =========================================================
   LIST GROUP
   ========================================================= */

.list-group {
    background-color: var(--elevita-surface-bg);
    border-color: var(--elevita-surface-border);
}

.list-group-item.active {
    background-color: var(--elevita-brand-primary-soft);
    color: var(--elevita-brand-primary);
    border-color: var(--elevita-brand-primary-border);
}

.list-soft .templateRow.active {
    background-color: var(--elevita-brand-primary-soft);
    border-left: 3px solid var(--elevita-brand-primary);
}

/* =========================================================
   NAV / NAVBAR
   ========================================================= */

.navbar {
    background-color: var(--elevita-navbar-bg);
}

.nav-item.active {
    background-color: var(--elevita-brand-primary-soft);
    color: var(--elevita-brand-primary);
    border-color: var(--elevita-brand-primary-border);
}

.nav-link.active {
    background-color: var(--elevita-brand-primary);
}

.nav-pills {
    background-color: var(--elevita-brand-primary);
}

/* Page-level header (breadcrumb + title ribbon) */
.page-header {
    background-color: var(--elevita-bg-card);
    border-bottom: 1px solid var(--elevita-surface-border);
}

/* =========================================================
   SURFACE (GENERIC)
   ========================================================= */

.surface {
    background-color: var(--elevita-surface-bg);
    border-color: var(--elevita-surface-border);
}

/* =========================================================
   TEXT
   ========================================================= */

.text-muted,
.text-muted-600,
.text-muted-700 {
    color: var(--elevita-text-muted) !important;
}

/* Muted inner surfaces */
.surface-muted {
    background-color: var(--elevita-surface-muted);
}

.surface-muted-hover:hover {
    background-color: color-mix( in srgb, var(--elevita-surface-muted) 90%, black 10% );
}

/* Helper text */
.text-helper {
    color: var(--elevita-text-helper);
}

/* Navigation */
.app-header,
.left-nav {
    background-color: var(--elevita-nav-bg);
}

/* Badges */
.badge-primary {
    background-color: var(--elevita-badge-primary);
    border-color: var(--elevita-badge-primary-border);
    color: var(--elevita-badge-primary-text);
}

.table > :not(caption) > * > * {
    background-color: var(--elevita-table-bg) !important;
}

.table th,
.table td {
    border-color: var(--elevita-table-border);
}

.data-label {
    color: var(--elevita-badge-primary);
}
/* =========================================================
   WORK QUEUE / CASELOAD TOGGLE PILLS
   ========================================================= */

.workqueue-filter {
    background-color: var(--elevita-btn-toggle-bg);
    border: 1px solid var(--elevita-btn-toggle-border);
    color: var(--elevita-btn-toggle-text);
    border-radius: 999px;
    font-weight: 500;
}

.workqueue-filter:hover {
    background-color: var(--elevita-btn-toggle-hover-bg);
}

/* ACTIVE = PRIMARY TOGGLE (blue-ish, not action button) */
.workqueue-filter.active {
    background-color: var(--elevita-badge-primary);
    border-color: var(--elevita-badge-primary);
    color: #ffffff;
}


/* =========================================================
   WORK QUEUE COUNT BADGES
   ========================================================= */

.work-queue-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    background-color: var(--elevita-badge-primary);
    color: #ffffff;
}

/* =========================================================
   WORK QUEUE DOTS (theme-driven)
   ========================================================= */

.dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

.dot-blue {
    background-color: var(--elevita-dot-blue);
}
.dot-green {
    background-color: var(--elevita-dot-green);
}

.dot-orange {
    background-color: var(--elevita-dot-orange);
}

.dot-purple {
    background-color: var(--elevita-dot-purple);
}

.dot-red {
    background-color: var(--elevita-dot-red);
}

.dot-muted {
    background-color: var(--elevita-text-muted);
}

/* =========================================================
   WORK QUEUE TITLE TEXT
   ========================================================= */

.work-queue-title {
    color: var(--elevita-text-primary);
}

.left-nav-inner .item.active .dot {
    background-color: var(--elevita-nav-dot-selected) !important;
}

/* =========================================================
   NAV PILLS (TABS, FILTERS)
   ========================================================= */

.nav-pill {
    background-color: var(--elevita-btn-toggle-bg);
    border: 1px solid var(--elevita-btn-toggle-border);
    color: var(--elevita-btn-toggle-text);
    border-radius: 999px;
    font-weight: 600;
}

.nav-pill.active {
    background-color: var(--elevita-badge-primary);
    border-color: var(--elevita-badge-primary);
    color: #ffffff;
}

.nav-pill:hover {
    background-color: var(--elevita-btn-toggle-hover-bg);
}

.elevita-nav-pill {
    background-color: var(--elevita-btn-toggle-bg);
    border: 1px solid var(--elevita-btn-toggle-border);
    color: var(--elevita-btn-toggle-text);
    border-radius: 999px;
    font-weight: 600;
}

.elevita-nav-pill.active {
    background-color: var(--elevita-badge-primary);
    border-color: var(--elevita-badge-primary);
    color: #ffffff;
}

.elevita-nav-pill:hover {
    background-color: var(--elevita-btn-toggle-hover-bg);
}

.elevita-tab-pill {
    background-color: var(--elevita-btn-toggle-bg);
    border: 1px solid var(--elevita-btn-toggle-border);
    color: var(--elevita-btn-toggle-text);
    border-radius: 999px;
    font-weight: 600;
}

.elevita-tab-pill.active {
    background-color: var(--elevita-badge-primary);
    border-color: var(--elevita-badge-primary);
    color: #ffffff;
}

.elevita-tab-pill:hover {
    background-color: var(--elevita-btn-toggle-hover-bg);
}

.elevita-tab-background {
    background-color: var(--elevita-btn-toggle-bg);
    color: var(--elevita-btn-toggle-text);
    border-radius: 999px;
    font-weight: 500;
}

/* =========================================================
   DISABLED BUTTONS — ELEVITA THEME
   ========================================================= */

.btn:disabled,
.btn.disabled {
    background-color: var(--elevita-btn-disabled-bg) !important;
    border-color: var(--elevita-btn-disabled-border) !important;
    color: var(--elevita-btn-disabled-text) !important;
    opacity: 1; /* prevent Bootstrap fade */
    cursor: not-allowed;
    box-shadow: none;
}

/* =========================================================
   FORM PICKER — THEME BINDINGS
   ========================================================= */

.elevita-form-row {
    background-color: var(--elevita-bg-card);
    border-color: var(--elevita-border-subtle);
}

    .elevita-form-row:hover {
        background-color: var(--elevita-nav-hover-bg);
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
    }

    .elevita-form-row:has(.form-select-item:checked) {
        background-color: var(--elevita-nav-selected-bg);
        border-color: var(--elevita-nav-selected-bg);
    }

.elevita-form-name {
    color: var(--elevita-text-primary);
}

.elevita-form-title {
    color: var(--elevita-text-secondary);
}

.elevita-form-separator,
.elevita-form-description {
    color: var(--elevita-text-muted);
}