/* -------------------------------------------------------------
   LUMAX PM MASTER STYLESHEET
   This file combines all global variables, layout, base resets, 
   and components into a single file to simplify deployment.
   ------------------------------------------------------------- */

/* ==========================================
   1. THEME VARIABLES (Foundation)
   ========================================== */
:root {
    /* 1. Global Identity & Typography */
    --theme-bg: #f4f7f9;
    --theme-text: #1e293b;
    --theme-text-muted: #94a3b8;
    --theme-heading: #1e293b;
    --theme-link: #004799d3;
    --theme-link-hover: #003a7dbe;
    --theme-primary: #004799d3;
    --theme-border: #e2e8f0;

    /* 2. Navigation (Main Menu & Sidebar) */
    --sidebar-width: 260px;
    --sidebar-bg: #f1f5f9;
    --sidebar-border: #e2e8f0;
    --sidebar-brand-bg: #f1f5f9;
    --sidebar-brand-text: #004799d3;
    --sidebar-header-bg: #f1f5f9;
    --sidebar-header-text: #004799;
    --sidebar-header-active-bg: transparent;
    --sidebar-header-active-text: #0d6efd;
    --sidebar-header-hover-bg: #e9ecef;
    --sidebar-link-text: #495057;
    --sidebar-link-hover-bg: #e9ecef;
    --sidebar-link-hover-text: #0d6efd;
    --sidebar-link-active-bg: #ffffff;
    --sidebar-link-active-text: #0d6efd;
    --sidebar-link-active-border: #0d6efd;
    --sidebar-icon: #495057;

    /* 3. Header & Top Navigation */
    --topbar-bg: #ffffff;
    --topbar-border: #000000;
    --topbar-link: #1e293b;
    --topbar-link-hover: #004799d3;
    --dropdown-bg: #ffffff;
    --dropdown-text: #1e293b;
    --dropdown-hover-bg: #f8f9fa;
    --dropdown-divider: #e9ecef;
    --project-banner-bg: rgba(255, 255, 255, 0.95);
    --project-banner-text: #038be6;

    /* 4. Card & Container Layouts */
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --card-header-bg: #ffffff;
    --card-header-border: #edf2f7;
    --card-shadow: rgba(0, 0, 0, 0.05);

    /* 5. Tables & Data Grids */
    --table-header-bg: #f8fafc;
    --table-header-text: #64748b;
    --table-row-bg: #ffffff;
    --table-row-alt-bg: #f8fafc;
    --table-row-hover: rgba(14, 165, 233, 0.05);
    --table-border: #e2e8f0;
    --table-sticky-bg: #f8fafc;
    --table-stripe-border: #cbd5e1;

    /* 6. Forms & Inputs */
    --input-bg: #f8fafc;
    --input-border: #e2e8f0;
    --input-text: #1e293b;
    --input-focus-bg: #ffffff;
    --input-focus-border: #0ea5e9;
    --input-focus-shadow: rgba(14, 165, 233, 0.1);
    --input-placeholder: #94a3b8;
    --label-text: #64748b;

    /* 7. Buttons & Action Elements */
    --btn-primary-bg: #004799d3;
    --btn-primary-hover: #003a7dbe;
    --btn-success-bg: #10b981;
    --btn-success-hover: #059669;
    --btn-danger-bg: #ef4444;
    --btn-danger-hover: #dc2626;
    --btn-warning-bg: #f59e0b;
    --btn-warning-hover: #d97706;
    --btn-info-bg: #06b6d4;
    --btn-info-hover: #0891b2;
    --btn-dark-bg: #1e293b;
    --btn-dark-hover: #0f172a;

    /* 8. Status & Data Indicators (Universal Palette) */
    --data-baseline: #000000;
    --data-revised: #004799;
    --data-actual: #04a7dd;
    --data-pos-variance: #28a745;
    --data-neg-variance: #dc3545;
    --data-projected: #ffa500;
    --data-predicted: #8b0000;
    --data-blue: #1cb7ff;
    --progress-bar-bg: #e2e8f0;
    --progress-bar-fill: #0ea5e9;

    /* 9. Modals & Overlays */
    --modal-bg: #ffffff;
    --modal-header-bg: #ffffff;
    --modal-footer-bg: #ffffff;
    --modal-backdrop: rgba(0, 0, 0, 0.5);
    --modal-border: rgba(226, 232, 240, 0.8);

    /* 10. Feedback & Notifications (Toasts/Alerts) */
    --toast-success: rgba(16, 185, 129, 0.6);
    --toast-danger: rgba(239, 68, 68, 0.6);
    --toast-warning: rgba(245, 158, 11, 0.6);
    --toast-primary: rgba(37, 99, 235, 0.6);
    --alert-bg-light: #f8f9fa;

    /* 11. Dashboard Metrics */
    --metric-pill-bg: #ffffff;
    --metric-pill-border: #e2e8f0;
    --metric-label: #94a3b8;
    --metric-value: #1e293b;
    --metric-revised-border: #004799;
    --metric-actual-border: #0180aa;
    --metric-variance-border: #198754;
    --metric-progress-border: #004799;

    /* 12. Form Identity */
    --form-header-bg: #0f172a;
    --form-header-text: #ffffff;
}

[data-theme="dark"] {
    /* 1. Global Identity & Typography */
    --theme-bg: #0f172a;
    --theme-text: #f1f5f9;
    --theme-text-muted: #94a3b8;
    --theme-heading: #f8fafc;
    --project-banner-bg: rgba(15, 23, 42, 0.9);
    --theme-link: #38bdf8;
    --theme-link-hover: #7dd3fc;
    --theme-primary: #38bdf8;
    --theme-border: #1e293b;

    /* 2. Navigation (Main Menu & Sidebar) */
    --sidebar-bg: #1e293b;
    --sidebar-border: #334155;
    --sidebar-brand-bg: #1e293b;
    --sidebar-brand-text: #38bdf8;
    --sidebar-header-bg: #1e293b;
    --sidebar-header-text: #38bdf8;
    --sidebar-header-active-text: #38bdf8;
    --sidebar-header-hover-bg: #334155;
    --sidebar-link-text: #94a3b8;
    --sidebar-link-hover-bg: #334155;
    --sidebar-link-hover-text: #38bdf8;
    --sidebar-link-active-bg: #0f172a;
    --sidebar-link-active-text: #38bdf8;
    --sidebar-link-active-border: #38bdf8;
    --sidebar-icon: #94a3b8;

    /* 3. Header & Top Navigation */
    --topbar-bg: #1e293b;
    --topbar-border: #334155;
    --topbar-link: #f1f5f9;
    --topbar-link-hover: #38bdf8;
    --dropdown-bg: #1e293b;
    --dropdown-text: #f1f5f9;
    --dropdown-hover-bg: #334155;
    --dropdown-divider: #334155;
    --project-banner-bg: rgba(30, 41, 59, 0.95);
    --project-banner-text: #38bdf8;

    /* 4. Card & Container Layouts */
    --card-bg: #1e293b;
    --card-border: #334155;
    --card-header-bg: #1e293b;
    --card-header-border: #334155;
    --card-shadow: rgba(0, 0, 0, 0.2);

    /* 5. Tables & Data Grids */
    --table-header-bg: #334155;
    --table-header-text: #cbd5e1;
    --table-row-bg: #1e293b;
    --table-row-alt-bg: #1e293b;
    --table-row-hover: rgba(56, 189, 248, 0.05);
    --table-border: #334155;
    --table-sticky-bg: #334155;

    /* 6. Forms & Inputs */
    --input-bg: #0f172a;
    --input-border: #334155;
    --input-text: #f1f5f9;
    --input-focus-bg: #0f172a;
    --input-focus-border: #38bdf8;
    --input-placeholder: #64748b;
    --label-text: #94a3b8;

    /* 7. Buttons & Action Elements */
    --btn-primary-bg: #38bdf8;
    --btn-primary-hover: #0ea5e9;
    --btn-dark-bg: #334155;
    --btn-dark-hover: #475569;

    /* 8. Status & Data Indicators */
    --data-baseline: #ffffff;
    --progress-bar-bg: #334155;
    --progress-bar-fill: #38bdf8;

    /* 9. Modals & Overlays */
    --modal-bg: #1e293b;
    --modal-header-bg: #1e293b;
    --modal-footer-bg: #1e293b;
    --modal-backdrop: rgba(0, 0, 0, 0.8);
    --modal-border: rgba(51, 65, 85, 0.8);

    /* 10. Feedback */
    --alert-bg-light: #1e293b;

    /* 11. Dashboard Metrics */
    --metric-pill-bg: #1e293b;
    --metric-pill-border: #334155;
    --metric-label: #94a3b8;
    --metric-value: #f1f5f9;
}

/* Bootstrap Utility Overrides for Dark Mode */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-light-subtle {
    background-color: var(--table-header-bg) !important;
    color: var(--theme-text) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--card-bg) !important;
    color: var(--theme-text) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--theme-text) !important;
}

[data-theme="dark"] .card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

[data-theme="dark"] .modal-content {
    background-color: var(--modal-bg);
    color: var(--theme-text);
}

[data-theme="dark"] .list-group-item {
    background-color: var(--card-bg);
    color: var(--theme-text);
    border-color: var(--theme-border);
}

[data-theme="dark"] .border {
    border-color: var(--theme-border) !important;
}

[data-theme="dark"] .nav-tabs .nav-link:not(.active) {
    background-color: var(--sidebar-bg);
    color: var(--theme-text-muted);
    border-color: var(--theme-border);
}

[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--theme-border);
}

/* ==========================================
   2. BASE STYLES & RESETS
   ========================================== */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--theme-bg);
    font-size: 0.75rem; /* Scaled down 15% */
    padding-bottom: 0;
    line-height: 1.4;
    overflow-x: hidden;
    color: var(--theme-text);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--theme-heading);
}

.breadcrumb-item {
    color: var(--theme-text-muted) !important;
}

.breadcrumb-item.active {
    color: var(--theme-heading) !important;
    opacity: 1;
    font-weight: 600;
}

/* Global Compact UI Overrides - Users "85% zoom" request */
.table td, .table th {
    padding: 0.35rem 0.5rem !important;
}
.card-body, .modal-body {
    padding: 0.6rem !important;
}
.card-header, .modal-header, .modal-footer {
    padding: 0.35rem 0.6rem !important;
}

/* Base Identity Styling */
.modal-header, .form-identity-header {
    background-color: var(--form-header-bg) !important;
    color: var(--form-header-text) !important;
    border-bottom: 2px solid rgba(0,0,0,0.1) !important;
}

.modal-header .modal-title, .form-identity-header .card-title {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: inherit !important; /* Ensure it uses var(--form-header-text) */
}

.modal-header .text-muted {
    color: var(--form-header-text) !important;
    opacity: 0.8;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 1;
}

.modal-footer {
    background-color: var(--modal-footer-bg) !important;
    border-top: 1px solid var(--theme-border) !important;
}

/* Compact Forms & Inputs */
.form-group, .mb-3, .mb-4 {
    margin-bottom: 0.5rem !important;
}
.form-control, .form-select, .input-group-text {
    padding: 0.3rem 0.65rem !important;
    font-size: 0.75rem !important;
    min-height: auto !important;
}
label, .form-label {
    margin-bottom: 0.15rem !important;
    font-size: 0.65rem !important;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--theme-text-muted);
}

/* Specific styling for Project Dropdown Selector */
.mgmt-header {
    padding-top: 1rem;
    border-bottom: none;
}

.mgmt-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--theme-heading);
    margin-bottom: 0;
}

#projectSelect {
    font-size: 1.12rem !important;
    color: var(--theme-primary) !important;
    font-weight: 700 !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
    padding-right: 2.5rem !important;
    border-radius: 12px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23004799' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1.1rem !important;
    border: 1px solid var(--theme-border) !important;
    cursor: pointer;
    background-color: var(--card-bg) !important;
}

#projectSelect:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 71, 153, 0.1) !important;
    outline: none !important;
}
textarea.form-control {
    padding: 0.5rem !important;
}

/* Global Theme Overrides - Targeted and Gentle */
.text-primary { color: var(--theme-primary); }
.bg-primary { background-color: var(--theme-primary); }
.border-primary { border-color: var(--theme-primary); }
.text-muted { color: var(--theme-text-muted); }

/* Centralized Theme Utility Classes */
.text-baseline { color: var(--data-baseline); }
.bg-baseline { background-color: var(--data-baseline); }
.text-revised { color: var(--data-revised); }
.bg-revised { background-color: var(--data-revised); }
.text-actual { color: var(--data-actual); }
.bg-actual { background-color: var(--data-actual); }
.text-pos-variance { color: var(--data-pos-variance); }
.text-neg-variance { color: var(--data-neg-variance); }
.bg-pos-variance { background-color: var(--data-pos-variance); }
.bg-neg-variance { background-color: var(--data-neg-variance); }
.text-projected { color: var(--data-projected); }
.bg-projected { background-color: var(--data-projected); }

/* ==========================================
   3. LAYOUT & GRID
   ========================================== */
#app-wrapper {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#main-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    background-color: var(--theme-bg);
    padding-left: 0.75rem;
}

/* Sidebar Wrapper & States */
#sidebar-wrapper {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1030;
    display: flex;
    flex-direction: column;
}

#sidebar-wrapper.collapsed,
html[data-sidebar-collapsed="true"] #sidebar-wrapper {
    width: 0;
    border-right: none;
    overflow: hidden;
}

#sidebar-wrapper > * {
    transition: opacity 0.2s ease;
    min-width: var(--sidebar-width);
}

#sidebar-wrapper.collapsed *,
html[data-sidebar-collapsed="true"] #sidebar-wrapper * {
    opacity: 0;
    pointer-events: none;
}

/* Sidebar Links & Headers */
.sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    color: var(--sidebar-link-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.sidebar-link:hover {
    background-color: var(--sidebar-link-hover-bg);
    color: var(--sidebar-link-hover-text);
}

.sidebar-link.active {
    background-color: var(--sidebar-link-active-bg);
    color: var(--sidebar-link-active-text);
    border-left-color: var(--sidebar-link-active-border);
    font-weight: 600;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.sidebar-link i {
    margin-right: 12px;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.sidebar-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: var(--sidebar-header-text);
    background-color: var(--sidebar-header-bg);
    padding: 0.6rem 0.75rem 0.2rem 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    font-weight: 700;
    opacity: 0.85;
    border-bottom: 1px solid var(--sidebar-border);
    margin-bottom: 0.25rem;
}

.sidebar-header[aria-expanded="true"] {
    color: var(--sidebar-header-active-text);
    background-color: var(--sidebar-header-active-bg);
}

/* Top Navbar */
.navbar {
    z-index: 1050;
    background-color: var(--topbar-bg) !important;
    border-bottom: 2px solid var(--topbar-border) !important;
    padding: 0.15rem 0.75rem !important;
    box-shadow: 0 2px 4px var(--card-shadow);
    font-size: 0.85rem;
    transition: padding 0.2s ease-in-out, font-size 0.2s ease-in-out;
}

.navbar-shrunk {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
    font-size: 0.75rem !important;
}

.navbar .nav-link, 
.navbar .navbar-brand,
.navbar .dropdown-toggle,
#sidebarToggle {
    color: var(--topbar-link) !important;
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}

.navbar .navbar-brand {
    font-size: 1rem !important;
}

.navbar .nav-link:hover, 
.navbar .dropdown-toggle:hover {
    color: var(--topbar-link-hover) !important;
}

.dropdown-item {
    font-size: 0.8rem !important;
    padding: 0.2rem 1rem !important;
}

.dropdown-divider {
    margin: 0.2rem 0 !important;
}

/* Project Selection Banner */
.project-banner {
    z-index: 1040;
    position: sticky;
    top: 56px;
    background-color: var(--project-banner-bg) !important;
    backdrop-filter: blur(10px);
}

.project-banner-title {
    color: var(--project-banner-text);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    transition: color 0.2s ease;
}

/* ==========================================
   4. COMPONENTS (Consolidated)
   ========================================== */

/* Modern Action Buttons - Premium 3D Pill Style */
.btn-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 50rem !important; /* Pill shape */
    transition: all 0.15s ease-in-out;
    border: none !important;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    user-select: none;
}

/* 3D Depth Effect */
.btn-modern-success, .btn-modern-primary, .btn-modern-dark, .btn-modern-info {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1), inset 0 -3px 0 rgba(0,0,0,0.15);
}

.btn-modern:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15), inset 0 -3px 0 rgba(0,0,0,0.15);
    filter: brightness(1.05);
}

.btn-modern:active {
    transform: translateY(2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.1);
}

/* Solid Variants with Gradients for 3D appearance */
.btn-modern-success {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
    background-color: var(--btn-success-bg) !important;
    color: white !important;
}

.btn-modern-primary {
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
    background-color: var(--btn-primary-bg) !important;
    color: white !important;
}

.btn-modern-dark {
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
    background-color: var(--btn-dark-bg) !important;
    color: white !important;
}

.btn-modern-info {
    background: linear-gradient(180deg, #06b6d4 0%, #0891b2 100%) !important;
    background-color: var(--btn-info-bg) !important;
    color: white !important;
}

/* Soft/Subtle Variants with 3D Border Effects */
.btn-modern-outline-success {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #10b981 !important;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.1), inset 0 -2px 0 rgba(16, 185, 129, 0.1);
}

.btn-modern-outline-danger {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #ef4444 !important;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1), inset 0 -2px 0 rgba(239, 68, 68, 0.1);
}

.btn-modern-outline-dark {
    background: #f8fafc !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05), inset 0 -2px 0 rgba(0,0,0,0.05);
}

.btn-modern-outline-warning {
    background: #fff7ed !important;
    color: #ea580c !important;
    border: 1px solid #f97316 !important;
    box-shadow: 0 2px 4px rgba(249, 115, 22, 0.1), inset 0 -2px 0 rgba(249, 115, 22, 0.1);
}

.btn-modern-sm { padding: 0.3rem 0.9rem !important; font-size: 0.75rem !important; }
.btn.rounded-pill { border-radius: 50rem !important; }

/* Card Containers */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 2px 4px var(--card-shadow);
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
}

.card-header {
    background-color: var(--card-header-bg);
    border-bottom: 1px solid var(--card-header-border);
    font-weight: 600;
    padding: 1.25rem 1.5rem;
}

.card-body.p-0 { padding: 0 !important; }

/* Global Form Elements */
label, .form-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--label-text);
    margin-bottom: 0.5rem;
}

.form-control, .form-select, .input-premium {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    transition: all 0.2s;
}

.form-control:focus, .input-premium:focus {
    outline: none;
    border-color: var(--input-focus-border);
    background: var(--input-focus-bg);
    box-shadow: 0 0 0 4px var(--input-focus-shadow);
}

::placeholder { color: var(--input-placeholder); }

/* Tabs Navigation */
.nav-tabs .nav-link {
    color: var(--theme-text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 1rem 1.5rem;
    font-weight: 500;
}

.nav-tabs .nav-link.active {
    color: var(--theme-primary);
    border-bottom: 2px solid var(--theme-primary);
    background: none;
}

/* Dashboard Metric Pills */
.metrics-container { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }

.metric-pill {
    background: var(--metric-pill-bg);
    border: 1px solid var(--metric-pill-border);
    border-radius: 50px;
    padding: 0.4rem 1.25rem;
    text-align: center;
    min-width: 130px;
    box-shadow: 0 2px 4px var(--card-shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.metric-pill:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); }

.metric-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--metric-label);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 0px;
}

.metric-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--metric-value);
    line-height: 1.2;
}

.metric-pill.metric-revised { border-color: var(--data-revised); }
.metric-pill.metric-revised .metric-value { color: var(--data-revised); }
.metric-pill.metric-actual { border-color: var(--data-actual); }
.metric-pill.metric-actual .metric-value { color: var(--data-actual); }
.metric-pill.metric-variance { border-color: var(--data-pos-variance); }
.metric-pill.metric-variance .metric-value { color: var(--data-pos-variance); }
.metric-pill.metric-progress { border-color: var(--data-revised); }
.metric-pill.metric-progress .metric-value { color: var(--data-revised); }

/* Premium Toast Notifications */
.toast-container { z-index: 2000; }

.toast-premium {
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    color: white;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
}

.toast-premium.bg-success { background-color: var(--toast-success) !important; }
.toast-premium.bg-danger { background-color: var(--toast-danger) !important; }
.toast-premium.bg-warning { background-color: var(--toast-warning) !important; color: #fff; }
.toast-premium.bg-primary { background-color: var(--toast-primary) !important; }

.alert { border-radius: 0.75rem; border: none; background-color: var(--alert-bg-light); }

/* Global Table Styles */
.table th {
    font-weight: 600;
    color: var(--table-header-text);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    background-color: var(--table-header-bg);
    padding: 0.5rem;
}

.table td { padding: 0.5rem; vertical-align: middle; }

.table-hover tbody tr { border-bottom: 2px solid var(--table-stripe-border) !important; transition: background 0.15s; }

.table-hover tbody tr:hover { background-color: var(--table-row-hover); }

.table-responsive { border: 1px solid var(--table-border); border-radius: 0.5rem; background-color: var(--table-row-bg); }

.table-registry { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }

.sticky-col {
    position: sticky;
    left: 0;
    background-color: var(--table-sticky-bg) !important;
    z-index: 15;
    border-right: 2px solid var(--table-border) !important;
}

.table-ultra-sm td, .table-ultra-sm th { padding: 0px 4px !important; font-size: 0.75rem; line-height: 1; }

/* ==========================================
   5. CUSTOM OVERRIDES & FINAL POLISH
   ========================================== */
.project-detail-tabs .nav-link {
    background-color: var(--table-header-bg);
    color: var(--theme-text-muted);
    margin-right: 2px;
    border: 1px solid var(--theme-border);
    border-bottom: none;
}

.project-detail-tabs .nav-link.active {
    background-color: var(--card-bg) !important;
    color: var(--theme-primary);
    border-color: var(--theme-border) var(--theme-border) var(--card-bg);
    font-weight: 600;
}

#timesheetGrid .hour-input {
    border: none;
    background: transparent;
    width: 100%;
    height: 100%;
    padding: 0.4rem 0.1rem;
    font-size: 0.85rem;
    font-weight: 500;
}

#timesheetGrid .hour-input:focus {
    background: #ededed;
    box-shadow: inset 0 0 0 2px var(--sidebar-link-active-color);
    outline: none;
}