/* ==========================================================================
   ETS THRESHOLD DESIGN TOOL - SYSTEM PALETTE REFERENCE (FIGMA TOKENS)
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    /* --- 1. PRIMARY SYSTEM BRANDING --- */
    --bs-primary: #2B6B7C;
    /* Primary 500 */
    --bs-primary-rgb: 43, 107, 124;

    --ets-primary-700: #103D4B;
    /* Deep Brand Corporate Blue */
    --ets-primary-600: #1D5463;
    --ets-primary-500: #2B6B7C;
    --ets-primary-400: #70A3B1;
    --ets-primary-300: #9EC4CF;
    --ets-primary-200: #CDE6ED;
    --ets-primary-100: #F0F7F9;

    /* --- 2. SECONDARY HIGHLIGHT BLOCKS --- */
    --bs-secondary: #6F669B;
    /* Secondary 500 */
    --bs-secondary-rgb: 111, 102, 155;

    --ets-secondary-700: #26213D;
    --ets-secondary-600: #4B4376;
    --ets-secondary-500: #6F669B;
    --ets-secondary-400: #847DAB;
    --ets-secondary-300: #9B95BD;
    --ets-secondary-200: #DEDBEB;
    --ets-secondary-100: #F2F1F8;

    /* --- 3. NEUTRAL INTERACTIVE GREYSCALE --- */
    --bs-body-color: #161D20;
    /* Grayscale 900 */
    --bs-heading-color: #0B1214;
    /* Grayscale Black */
    --bs-body-bg: #FCFEFF;
    /* Grayscale 10 */
    --bs-border-color: #D4DFE3;
    /* Grayscale 200 */

    --ets-gray-black: #0B1214;
    --ets-gray-900: #161D20;
    --ets-gray-800: #2B3539;
    --ets-gray-700: #424E53;
    --ets-gray-600: #5C6B71;
    --ets-gray-500: #788A92;
    --ets-gray-400: #98A7AD;
    --ets-gray-300: #BAC7CC;
    --ets-gray-200: #D4DFE3;
    --ets-gray-100: #EAF2F5;
    --ets-gray-50: #F4F9FB;
    --ets-gray-10: #FCFEFF;
    --ets-gray-white: #FFFFFF;
}

/* ==========================================================================
   APPLICATION CANVAS FOUNDATION
   ========================================================================== */

body {
    background-color: var(--ets-gray-10) !important;
    color: var(--ets-gray-900);
}

.cursor-pointer {
    cursor: pointer !important;
}

/* ==========================================================================
   SIDEBAR & NAVIGATION CORE SYSTEM OVERRIDES (FIGMA COMPLIANT)
   ========================================================================== */

/* Main Expanded Left Rail Panel Layout Container */
.sidebar,
#sidebar {
    background-color: var(--ets-primary-700) !important;
    border-right: 1px solid var(--ets-gray-800);
}

/* Collapsed Mini Left Rail Panel Layout Container */
#mini-sidebar {
    background-color: var(--ets-primary-700) !important;
    border-right: 1px solid var(--ets-gray-800);
}

/* 
   FORCE-OVERWRITE BOOTSTRAP INLINE TRANS-WHITE UTILITIES (.text-white-50)
   Overrules native Bootstrap priority styling engines for deep nesting elements
*/
#sidebar .nav-link.text-white-50,
#sidebar .nav-link.text-white-50 i,
#sidebar .nav-link.text-white-50 span,
#sidebar .nav-link.text-white-50 small,
.sidebar .nav-link,
#sidebar .nav-link {
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.2s ease-in-out;
}

/* Sidebar Interaction Hover States */
#sidebar .nav-link.text-white-50:hover,
#sidebar .nav-link.text-white-50:hover i,
#sidebar .nav-link.text-white-50:hover span,
#sidebar .nav-link.text-white-50:hover small,
.sidebar .nav-link:hover,
#sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--ets-gray-white) !important;
}

/* 
   SIDEBAR PRESENTATION MANAGEMENT (FIGMA CAPSULE SELECTION ACTIVE LAYER)
   Wipes out background opacity filters and applies smooth pill-shaped capsules
*/
#sidebar .nav-link.bg-dark,
#sidebar .nav-link.bg-dark i,
#sidebar .nav-link.bg-dark span,
#sidebar .nav-link.bg-dark small,
#sidebar .nav-link.active-view-highlight,
#sidebar .nav-link.active-view-highlight i,
#sidebar .nav-link.active-view-highlight span,
#sidebar .nav-link.active-view-highlight small,
.sidebar .nav-link.bg-dark,
.sidebar .nav-link.active-view-highlight {
    color: var(--ets-gray-white) !important;
    font-weight: 600 !important;
}

/* Force state backgrounds for active fallback utility overrides */
#sidebar .bg-dark {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-radius: 999px !important;
}

/* Ensure active nested icon vectors light up fully opaque white */
#sidebar .nav-link.bg-dark i,
#sidebar .nav-link.active-view-highlight i {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ==========================================================================
   INTERACTIVE RESTRUCTURING CONTROLS & SIDEBAR TOGGLE BUTTONS
   ========================================================================== */

/* Structural Layout Controls inside Expanded Main Panel Sidebar */
#sidebar .sidebar-btn,
#sidebar .sidebar-btn i {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: color 0.15s ease-in-out;
}

#sidebar .sidebar-btn:hover,
#sidebar .sidebar-btn:hover i {
    color: var(--ets-gray-white) !important;
}

/* Structural Layout Controls inside Collapsed Mini-Sidebar */
#mini-sidebar .sidebar-btn,
#mini-sidebar .sidebar-btn i {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: color 0.15s ease-in-out;
}

#mini-sidebar .sidebar-btn:hover,
#mini-sidebar .sidebar-btn:hover i {
    color: var(--ets-gray-white) !important;
}

/* ==========================================================================
   FIGMA ACCOUNT SELECTOR SEGMENT CARDS (SIGN-UP WORKFLOW)
   ========================================================================== */

/* Passive Default State for the unselected card buttons */
.figma-radio-label {
    border-color: #D4DFE3 !important;
    /* Grayscale 200 Border */
    color: #424E53 !important;
    /* Grayscale 700 Text */
    background-color: #FFFFFF !important;
    transition: all 0.15s ease-in-out;
}

/* Hover Action Feedback state */
.figma-radio-label:hover {
    background-color: #F4F9FB !important;
    /* Grayscale 50 Tint */
    border-color: #BAC7CC !important;
    /* Grayscale 300 Focus */
}

/* Active Highlight State: Triggers when the hidden radio button is checked */
.figma-radio-input:checked+.figma-radio-label {
    border-color: var(--ets-primary-600) !important;
    /* Primary 600 Highlight Border */
    background-color: #F0F7F9 !important;
    /* Primary 100 Soft Accent Fill */
    color: var(--ets-primary-700) !important;
    /* Deep Primary Text */
    box-shadow: 0 0 0 3px rgba(29, 84, 99, 0.15);
    /* Smooth Focus Ring Accent */
}

/* ==========================================================================
   GLOBAL UTILITY COMPONENTS & USER INTERFACE ELEMENTS
   ========================================================================== */

/* Form Action Buttons Primary Submissions Control Wrapper */
.btn-primary {
    background-color: var(--ets-primary-600) !important;
    border-color: var(--ets-primary-600) !important;
    color: var(--ets-gray-white) !important;
    transition: background-color 0.15s ease-in-out;
}

.btn-primary:hover {
    background-color: var(--ets-primary-700) !important;
    border-color: var(--ets-primary-700) !important;
}

/* Content Presentational Data Table Headers */
.table thread th,
.table-dark-custom,
.table th {
    background-color: var(--ets-primary-700) !important;
    color: var(--ets-gray-white) !important;
}

.sector-badge-toggle:checked+.btn {
    background-color: #4A5568 !important;
    /* Elegant slate background */
    border-color: #4A5568 !important;
    color: #FFFFFF !important;
}

.sector-badge-toggle:checked+.btn .sector-fullname {
    color: #E2E8F0 !important;
    /* Soft light gray for the sub-text when selected */
}

/* Unselected styling cleanup */
.sector-badge-toggle+.btn .sector-fullname {
    color: #718096;
    /* Clean visible gray when unselected */
}

.nav-pills {
    overflow-y: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}