/* ==========================================================================
   WHALE OS V3 — APPLE VISIONOS GLASSMORPHISM THEME — V7 PREMIUM
   Soft floating glass cards, warm-to-cool ambient gradient background,
   pill-shaped inputs/buttons, large rounded corners, layered depth.
   Inspired by: Apple VisionOS · Linear · Arc Browser · Framer
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — VisionOS Glass Layer
   NOTE: Semantic tokens (--text-primary, --bg-primary, etc.)
   are defined by the Design System (design-system/theme.css).
   This file only defines glass-specific tokens and component overrides.
═══════════════════════════════════════════════════════════ */
:root {
    /* — Background gradient (warm peach → cool lavender/blue) — */
    --bg-ambient: linear-gradient(
        145deg,
        #fef6f0 0%,
        #fdf0f8 20%,
        #f3efff 45%,
        #eaf2ff 70%,
        #e8f0ff 100%
    );

    /* — Glass surface tokens — */
    --glass-white:        rgba(255, 255, 255, 0.72);
    --glass-white-hover:  rgba(255, 255, 255, 0.86);
    --glass-white-strong: rgba(255, 255, 255, 0.90);
    --glass-blur:         blur(40px) saturate(180%);
    --glass-blur-sm:      blur(20px) saturate(160%);

    /* — Glass borders — */
    --glass-border:       rgba(255, 255, 255, 0.80);
    --glass-border-outer: rgba(200, 210, 240, 0.35);

    /* — Ambient floating shadows — */
    --shadow-float:
        0  2px  8px  rgba(37, 99, 235, 0.04),
        0  8px  24px rgba(59, 130, 246, 0.08),
        0 24px  64px rgba(59, 130, 246, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);
    --shadow-float-hover:
        0  4px  12px rgba(37, 99, 235, 0.06),
        0 16px  40px rgba(59, 130, 246, 0.12),
        0 40px  80px rgba(59, 130, 246, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    --shadow-blue:
        0 4px 16px rgba(37, 99, 235, 0.22),
        0 8px 32px rgba(37, 99, 235, 0.14),
        inset 0 1px 0 rgba(255,255,255,0.30);
    --shadow-green:
        0 4px 16px rgba(34, 197, 94, 0.20),
        0 8px 24px rgba(34, 197, 94, 0.12);

    /* — Glass-specific component radii — */
    --radius-card: 28px;
    --radius-inner: 20px;
    --radius-sm: 14px;
    --radius-pill: 999px;

    /* — Glass-specific brand colors (non-semantic) — */
    --blue-primary:   #2563EB;
    --blue-light:     #3B82F6;
    --blue-bg:        rgba(37, 99, 235, 0.08);
    --blue-border:    rgba(37, 99, 235, 0.20);
    --green-primary:  #16A34A;
    --green-light:    #22C55E;
    --green-bg:       rgba(22, 197, 94, 0.10);
    --orange-primary: #EA580C;
    --orange-bg:      rgba(234, 88, 12, 0.10);
    --orange-border:  rgba(234, 88, 12, 0.20);
    --text-on-color:  var(--gray-0);

    --card-inner-bg:     rgba(0, 0, 0, 0.03);
    --card-inner-border: rgba(0, 0, 0, 0.05);

    /* Legacy bridge — glass layer overrides */
    --card-bg:        var(--glass-white);
    --card-hover-bg:  var(--glass-white-hover);
    --border-color:   var(--glass-border-outer);
    --whale-accent:   #2563EB;
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL RESET
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Cairo', 'Inter', sans-serif !important;
    background: var(--bg-ambient) !important;
    background-attachment: fixed !important;
    color: var(--text-primary) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════
   TRANSPARENT WRAPPERS — let ambient gradient show through
═══════════════════════════════════════════════════════════ */
.cc-layout-container, .cc-main-content, .em-layout,
.main-viewport, .view-section,
.categories-sidebar-panel, .toolkit-main-content-panel,
.product-profile-wrapper,
#view-command-center, #view-home, #view-my-projects,
#view-workspace, #view-project, #view-workflow-canvas,
#view-employee-master, #view-employee-profile,
#view-payroll-systems, #view-payroll-register,
#view-payrun-detail, #view-payroll-settings,
.app-layout, .content-wrapper, .tab-content-panel {
    background: transparent !important;
    background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════
   UNIVERSAL GLASS CARD MIXIN
   Applied to EVERY box/panel/card in the system
═══════════════════════════════════════════════════════════ */
.glass-panel,
/* — Command Center — */
.cc-pillar-card, .cc-workflow-card, .cc-insight-card,
.cc-stat-mini-card, [data-variant="inset"],
/* — Employee — */
.em-stat-card, .em-controls, .em-table-wrap,
/* — Modal — */
.modal-container, .modal-content,
/* — Calc — */
.calc-card, .calc-outcome-panel, .calc-simulator-card,
.calc-output-card, .sidebar-sticky-card,
/* — Generic cards — */
.stats-card, .u-stat-card, .tool-grid-card, .list-item-card,
.category-card, .tool-card, .toc-sidebar-card,
.onboarding-card, .module-launcher-card,
.recent-workspace-card, .update-timeline-card,
.os-interactive-card, .cl-card-body, .cl-progress-wrap,
.fact-item-card, .params-table-wrapper,
.builder-formula-card, .prompt-builder-card,
.prompt-preview-box, .search-results-container,
.gateway-card, .path-card, .settings-card,
.detail-card, .compare-card, .timeline-card,
.workspace-snapshot-container, .snapshot-metric-card,
.continue-learning-card, .hv2-hero-card, .hv2-module-card,
.workspace-template-card {
    background: var(--glass-white) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    /* Outer ring for extra depth */
    outline: 1px solid var(--glass-border-outer) !important;
    outline-offset: 0px !important;
    box-shadow: var(--shadow-float) !important;
    border-radius: var(--radius-card) !important;
    transition:
        transform   0.30s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow  0.30s ease,
        background  0.30s ease !important;
    color: var(--text-primary) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Hover: lift + stronger ambient glow */
.cc-pillar-card:hover, .cc-workflow-card:hover, .cc-insight-card:hover,
.glass-panel:hover, .tool-grid-card:hover, .list-item-card:hover,
.category-card:hover, .tool-card:hover, .em-stat-card:hover,
.calc-card:hover, .stats-card:hover, .u-stat-card:hover,
.os-interactive-card:hover, .module-launcher-card:hover,
.recent-workspace-card:hover, .hv2-module-card:hover,
.workspace-template-card:hover {
    transform: translateY(-6px) scale(1.005) !important;
    background: var(--glass-white-hover) !important;
    box-shadow: var(--shadow-float-hover) !important;
    border-color: rgba(255, 255, 255, 0.95) !important;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR — Floating glass panel, dark-tinted left side
═══════════════════════════════════════════════════════════ */
.cc-sidebar, .sidebar {
    background: var(--glass-white-strong) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    outline: 1px solid var(--glass-border-outer) !important;
    outline-offset: 0 !important;
    box-shadow: var(--shadow-float) !important;
    border-radius: var(--radius-card) !important;
    color: var(--text-primary) !important;
}
.cc-sidebar {
    margin: 16px 0 16px 16px !important;
    height: calc(100vh - 32px) !important;
    flex-shrink: 0;
}

.cc-sidebar *, .sidebar * { color: var(--text-primary) !important; }

.cc-logo-text {
    color: var(--text-primary) !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
}
.cc-status-text { color: var(--text-muted) !important; font-size: 0.76rem !important; }

/* Nav items — pill-shaped */
.cc-nav-item {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-pill) !important;
    color: var(--text-secondary) !important;
    transition: all 0.20s ease !important;
    padding: 8px 14px !important;
}
.cc-nav-item:hover {
    background: rgba(37, 99, 235, 0.07) !important;
    color: var(--blue-primary) !important;
    border-color: var(--blue-border) !important;
}
.cc-nav-item.active {
    background: var(--blue-primary) !important;
    color: var(--gray-0) !important;
    border-color: transparent !important;
    box-shadow: var(--shadow-blue) !important;
    font-weight: 700 !important;
}
.cc-nav-item.active * { color: var(--gray-0) !important; }

.cc-status-indicator {
    background: var(--green-light) !important;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.25), 0 0 10px rgba(34,197,94,0.35) !important;
}

/* Right rail widget */
.hvr-widget {
    background: var(--glass-white) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    outline: 1px solid var(--glass-border-outer) !important;
    outline-offset: 0 !important;
    box-shadow: var(--shadow-float) !important;
    border-radius: var(--radius-card) !important;
    color: var(--text-primary) !important;
}
.hvr-widget * { color: var(--text-primary) !important; }
.hvr-widget-title, .hvr-cl-title, .hvr-cl-action,
.hvr-te-text strong, .hvr-fav-name {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
}
.hvr-cl-label, .hvr-te-time, .hvr-fav-type,
.hvr-day-group-label, .hvr-see-all, .hvr-see-all-inline {
    color: var(--text-muted) !important;
    font-size: 0.80rem !important;
}

/* Rail inner items — glass inner cards */
.hvr-cl-item, .hvr-fav-item {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: var(--radius-inner) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.20s ease !important;
}
.hvr-cl-item:hover, .hvr-fav-item:hover {
    background: rgba(255, 255, 255, 0.80) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-float) !important;
}
.hvr-timeline-entry {
    border-bottom: 1px solid rgba(200, 210, 240, 0.30) !important;
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.cc-pillar-title, .cc-wf-title, .cc-insight-title,
.em-header-info h1, .em-stat-label, .calc-label,
.prompt-title, .uc-title, .sidebar-title, .sidebar-cat-title,
.toc-sidebar-title, .toc-sidebar-item {
    color: var(--text-primary) !important;
    letter-spacing: -0.02em !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
}
p, label, th, td {
    color: var(--text-primary) !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
}
.calc-desc, .prompt-desc, .uc-desc, .hv2-section-title,
.cc-pillar-desc, .cc-wf-desc {
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
    font-size: 0.88rem !important;
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS — pill-shaped, glowing
═══════════════════════════════════════════════════════════ */
.btn-primary, .bg-primary, .em-add-btn, .em-btn-secondary,
.cc-insight-btn, .hv2-header-action,
.btn-secondary, .btn-upgrade, .btn-danger, .btn-upgrade.btn-secondary, .btn-upgrade.btn-primary, .btn-upgrade.btn-danger {
    border-radius: var(--radius-pill) !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    transition: all 0.20s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    letter-spacing: 0 !important;
}

/* Primary — vibrant blue pill */
.btn-primary, .bg-primary, .em-add-btn, .hv2-header-action, .btn-upgrade.btn-primary {
    color: var(--gray-0) !important;
    background: var(--blue-primary) !important;
    border: none !important;
    box-shadow: var(--shadow-blue) !important;
    padding: 10px 22px !important;
}
.btn-primary:hover, .em-add-btn:hover, .hv2-header-action:hover, .btn-upgrade.btn-primary:hover {
    background: #1D4ED8 !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 24px rgba(37,99,235,0.30), 0 12px 40px rgba(37,99,235,0.18) !important;
}

/* Secondary — glass pill */
.em-btn-secondary, .btn-secondary, .btn-upgrade.btn-secondary {
    background: rgba(255, 255, 255, 0.70) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-primary) !important;
    padding: 10px 22px !important;
}
.em-btn-secondary:hover, .btn-secondary:hover, .btn-upgrade.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.90) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-float) !important;
}

/* Danger — soft warm pill */
.em-btn-danger, .btn-danger, .btn-upgrade.btn-danger {
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.18) !important;
    color: #DC2626 !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
}
.em-btn-danger:hover, .btn-danger:hover, .btn-upgrade.btn-danger:hover {
    background: rgba(239, 68, 68, 0.14) !important;
    box-shadow: 0 4px 16px rgba(239,68,68,0.14) !important;
}

/* ═══════════════════════════════════════════════════════════
   BADGES / STATUS CHIPS — pill-shaped, glowing
═══════════════════════════════════════════════════════════ */
.tag-blue, .cc-pillar-tag.tag-blue {
    background: var(--blue-bg) !important;
    color: var(--blue-primary) !important;
    border: 1px solid var(--blue-border) !important;
    font-weight: 600 !important;
    border-radius: var(--radius-pill) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
.tag-purple, .cc-pillar-tag.tag-purple {
    background: rgba(124, 58, 237, 0.08) !important;
    color: #5B21B6 !important;
    border: 1px solid rgba(124, 58, 237, 0.20) !important;
    font-weight: 600 !important;
    border-radius: var(--radius-pill) !important;
}
.cc-tag-warning, .badge-warning {
    background: var(--orange-bg) !important;
    border: 1px solid var(--orange-border) !important;
    color: var(--orange-primary) !important;
    font-weight: 600 !important;
    border-radius: var(--radius-pill) !important;
}
.cc-tag-success, .badge-success {
    background: var(--green-bg) !important;
    border: 1px solid rgba(22, 197, 94, 0.25) !important;
    color: var(--green-primary) !important;
    font-weight: 600 !important;
    border-radius: var(--radius-pill) !important;
}

/* ═══════════════════════════════════════════════════════════
   INPUTS — pill-shaped, floating glass appearance
═══════════════════════════════════════════════════════════ */
input:not([type="checkbox"]):not([type="radio"]),
textarea, select {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-pill) !important;
    padding: 10px 18px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    transition: all 0.20s ease !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus, select:focus {
    outline: none !important;
    border-color: rgba(37, 99, 235, 0.40) !important;
    box-shadow:
        var(--shadow-sm),
        0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    background: rgba(255, 255, 255, 0.92) !important;
}
textarea { border-radius: var(--radius-inner) !important; }

/* ═══════════════════════════════════════════════════════════
   SCROLLBARS — minimal, pill-shaped
═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(100, 130, 200, 0.18);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(37, 99, 235, 0.30);
}

/* ═══════════════════════════════════════════════════════════
   HEADER — floating glass bar
═══════════════════════════════════════════════════════════ */
.header-desktop {
    background: rgba(255, 255, 255, 0.80) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.70) !important;
    box-shadow:
        0 1px 0 rgba(200, 210, 240, 0.35),
        0 4px 24px rgba(0, 0, 0, 0.05) !important;
}
.header-desktop * { color: var(--text-primary) !important; }
.header-desktop .brand-title {
    color: var(--text-primary) !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
}

/* ═══════════════════════════════════════════════════════════
   ZERO-EXIT MODAL OVERLAY
═══════════════════════════════════════════════════════════ */
.zero-exit-overlay, .modal-backdrop, #modal-overlay {
    background: rgba(180, 195, 230, 0.30) !important;
    backdrop-filter: blur(28px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(150%) !important;
}

body.dark-theme .zero-exit-overlay,
body.dark-theme .modal-backdrop,
body.dark-theme #modal-overlay {
    background: rgba(4, 6, 15, 0.60) !important;
}

/* Modal panel itself — premium glass */
.modal-container, .modal-content {
    background: var(--glass-white) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    outline: 1px solid var(--glass-border-outer) !important;
    outline-offset: 0 !important;
    box-shadow:
        0 8px 32px rgba(37, 99, 235, 0.08),
        0 32px 80px rgba(59, 130, 246, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.95) !important;
    border-radius: var(--radius-card) !important;
}

/* ═══════════════════════════════════════════════════════════
   TABLE — clean glass rows
═══════════════════════════════════════════════════════════ */
.em-table-wrap table thead th {
    background: rgba(37, 99, 235, 0.06) !important;
    color: var(--blue-primary) !important;
    border-bottom: 1px solid rgba(37, 99, 235, 0.15) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}
.em-table-wrap table tbody tr {
    border-bottom: 1px solid rgba(200, 210, 240, 0.25) !important;
    transition: background 0.15s ease !important;
}
.em-table-wrap table tbody tr:hover {
    background: rgba(37, 99, 235, 0.04) !important;
}

/* ═══════════════════════════════════════════════════════════
   STAT VALUES — colored, slightly glowing
═══════════════════════════════════════════════════════════ */
.cc-stat-value, .em-stat-value, .u-stat-value, .em-stat-val, .u-stat-val {
    color: var(--blue-primary) !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
}
.em-stat-card.stat-active .em-stat-val {
    color: var(--green-primary) !important;
}
.em-stat-card.stat-probation .em-stat-val {
    color: var(--orange-primary) !important;
}
.em-stat-card.stat-notice .em-stat-val {
    color: #EF4444 !important;
}

/* ═══════════════════════════════════════════════════════════
   SEARCH OVERLAY
═══════════════════════════════════════════════════════════ */
.search-overlay {
    background: rgba(180, 195, 230, 0.25) !important;
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important;
}
.search-container {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    outline: 1px solid var(--glass-border-outer) !important;
    outline-offset: 0 !important;
    box-shadow: var(--shadow-float-hover) !important;
    border-radius: var(--radius-card) !important;
}

/* ═══════════════════════════════════════════════════════════
   PROGRESS / STEPPER — VisionOS pill stepper (like reference image)
═══════════════════════════════════════════════════════════ */
.em-import-progress-track, .stepper-track, .progress-bar-track {
    background: rgba(200, 210, 240, 0.30) !important;
    border-radius: var(--radius-pill) !important;
    height: 8px !important;
    overflow: visible !important;
}
.em-import-progress-fill, .stepper-fill, .progress-bar-fill {
    background: linear-gradient(90deg, var(--green-light), #16A34A) !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: var(--shadow-green) !important;
}

/* Step indicators — round glowing circles */
.stepper-step.completed, .step-dot.done {
    background: linear-gradient(135deg, var(--green-light), #16A34A) !important;
    box-shadow: var(--shadow-green) !important;
    border: 2px solid rgba(255,255,255,0.80) !important;
    color: var(--gray-0) !important;
}
.stepper-step.active, .step-dot.active {
    background: var(--blue-primary) !important;
    box-shadow: var(--shadow-blue) !important;
    border: 2px solid rgba(255,255,255,0.80) !important;
    color: var(--gray-0) !important;
}

/* ═══════════════════════════════════════════════════════════
   LIVE / ONLINE BADGES
═══════════════════════════════════════════════════════════ */
.cc-pillar-live-badge, .badge-live, .live-indicator {
    background: var(--green-bg) !important;
    color: var(--green-primary) !important;
    border: 1px solid rgba(22, 197, 94, 0.25) !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.04em !important;
    padding: 2px 8px !important;
}

/* ═══════════════════════════════════════════════════════════
   SECTION HEADINGS decoration
═══════════════════════════════════════════════════════════ */
.cc-section-label, .section-title-pill {
    background: rgba(255,255,255,0.70) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.85) !important;
    border-radius: var(--radius-pill) !important;
    padding: 4px 14px !important;
    box-shadow: var(--shadow-sm) !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM TITLE BANNERS & DROPDOWNS OVERRIDES (V7+ NEW STYLE)
   ═══════════════════════════════════════════════════════════ */

/* Style page headers/title sections as beautiful glass cards */
.toolkit-main-header, .view-header-flex {
    background: var(--glass-white) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    outline: 1px solid var(--glass-border-outer) !important;
    outline-offset: 0px !important;
    box-shadow: var(--shadow-float) !important;
    border-radius: var(--radius-card) !important;
    padding: 32px 40px !important;
    margin-bottom: 32px !important;
    margin-top: 24px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

.view-header-flex {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    text-align: right !important;
}

@media (max-width: 768px) {
    .view-header-flex {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
}

/* Reset any text background-gradient solid box bugs on titles */
.toolkit-main-header .view-title-centered,
.view-header-flex .view-title {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    color: var(--text-primary) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    margin-bottom: 8px !important;
    margin-top: 0 !important;
}

.toolkit-main-header .view-desc-centered,
.view-header-flex .view-desc {
    font-size: 0.95rem !important;
    color: var(--text-secondary) !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
}

.toolkit-main-header .breadcrumb-trail,
.view-header-flex .breadcrumb-trail {
    font-size: 0.8rem !important;
    color: var(--text-secondary) !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
}

.toolkit-main-header .breadcrumb-trail .active-step,
.view-header-flex .breadcrumb-trail .active-step {
    color: var(--blue-primary) !important;
    font-weight: 700 !important;
}

/* Select options light styling for V7 glassmorphism dropdown list */
select option, .em-import-select option, .calc-number-input option, .em-form-select option, .em-filter-select option, .calc-field option {
    background-color: var(--gray-0) !important;
    color: #0F172A !important;
}

.mobile-toc-dropdown {
    background: var(--glass-white) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    outline: 1px solid var(--glass-border-outer) !important;
    box-shadow: var(--shadow-float) !important;
    border-radius: var(--radius-inner) !important;
}

.mobile-toc-item {
    color: var(--text-secondary) !important;
}

.mobile-toc-item:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    color: var(--blue-primary) !important;
}

/* Custom Select Dropdowns Styling (Glassmorphic) */
.custom-select-trigger {
    background: var(--glass-white) !important;
    border: 1px solid var(--glass-border) !important;
    outline: 1px solid var(--glass-border-outer) !important;
    outline-offset: 0px !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 700 !important;
}

.custom-select-options {
    background: var(--glass-white-strong) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    outline: 1px solid var(--glass-border-outer) !important;
    box-shadow: var(--shadow-float) !important;
    border-radius: var(--radius-inner) !important;
    z-index: 1000 !important;
}

.custom-select-option {
    color: var(--text-secondary) !important;
    background: transparent !important;
    font-weight: 600 !important;
    padding: 12px 18px !important;
    border-bottom: 1px solid rgba(200, 210, 240, 0.20) !important;
}

.custom-select-option:last-child {
    border-bottom: none !important;
}

.custom-select-option:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    color: var(--blue-primary) !important;
    padding-right: 22px !important;
}

.custom-select-option.selected {
    background: rgba(37, 99, 235, 0.15) !important;
    color: var(--blue-primary) !important;
    font-weight: 800 !important;
}

.custom-select-arrow {
    color: var(--blue-primary) !important;
}

/* Glassmorphic Data Table wrapper & table headers premium style */
.em-table-wrap, .em-table-wrapper {
    background: var(--glass-white) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    outline: 1px solid var(--glass-border-outer) !important;
    outline-offset: 0px !important;
    box-shadow: var(--shadow-float) !important;
    border-radius: var(--radius-card) !important;
    overflow: hidden !important;
}

.em-table thead th, .em-table-wrapper table thead th, .em-table-wrap table thead th {
    background: rgba(37, 99, 235, 0.06) !important;
    color: var(--blue-primary) !important;
    border-bottom: 1px solid rgba(37, 99, 235, 0.15) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    padding: 16px 20px !important;
}

/* Bold numbers throughout the application for enhanced readability */
.em-stat-val, .u-stat-val, .cc-stat-value, .u-stat-value, .em-stat-value,
.snapshot-metric-val, .snapshot-metric-card span,
.stepper-step, .step-dot,
.calc-val, .calc-output-val, .calc-outcome-panel, .calc-outcome-panel span,
.payslip-val, .payslip-col span,
.em-table td, .compare-table td, .params-table td {
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM DARK THEME PERSISTENT PERSISTENCE OVERRIDES (V7)
   ═══════════════════════════════════════════════════════════ */
body.dark-theme {
    /* — Background gradient (dark deep blue → dark indigo/black) — */
    --bg-ambient: linear-gradient(
        145deg,
        #04060f 0%,
        #070a1a 40%,
        #0b1130 100%
    ) !important;

    /* — Glass surface — */
    --glass-white:        rgba(13, 20, 47, 0.65) !important;
    --glass-white-hover:  rgba(18, 26, 61, 0.78) !important;
    --glass-white-strong: rgba(22, 32, 75, 0.90) !important;

    /* — Borders — */
    --glass-border:       var(--border) !important;
    --glass-border-outer: rgba(37, 99, 235, 0.15) !important;

    /* — Shadows (glowing dark blue/cyan) — */
    --shadow-float:
        0  4px  12px rgba(0, 0, 0, 0.50),
        0 16px  48px rgba(0, 0, 0, 0.65),
        0  0   24px rgba(37, 99, 235, 0.12),
        inset 0 1px 0 var(--surface-hover) !important;
    --shadow-float-hover:
        0  8px  24px rgba(0, 0, 0, 0.60),
        0 24px  72px rgba(0, 0, 0, 0.80),
        0  0   36px rgba(37, 99, 235, 0.20),
        inset 0 1px 0 var(--border-strong) !important;
    --shadow-sm:
        0 2px  6px  rgba(0, 0, 0, 0.40),
        0 8px  24px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 var(--surface-hover) !important;

    /* — Colors — */
    --text-primary:   #F8FAFC !important;
    --text-secondary: #94A3B8 !important;
    --text-muted:     #64748B !important;
    --text-on-color: var(--gray-0) !important;
    
    --card-inner-bg:      var(--surface) !important;
    --card-inner-border:  var(--surface-hover) !important;

    --blue-bg:        rgba(37, 99, 235, 0.18) !important;
    --blue-border:    rgba(37, 99, 235, 0.35) !important;
}

/* Modal Close, Cancel, and Secondary Buttons contrast fixes in dark mode */
body.dark-theme .modal-close-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}
body.dark-theme .modal-close-btn:hover {
    background: rgba(255, 50, 50, 0.15) !important;
    border-color: rgba(255, 50, 50, 0.3) !important;
    color: #FF5E5E !important;
}
body.dark-theme .em-btn-cancel,
body.dark-theme .em-btn-secondary,
body.dark-theme .btn-secondary,
body.dark-theme .btn-upgrade.btn-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
body.dark-theme .em-btn-cancel:hover,
body.dark-theme .em-btn-secondary:hover,
body.dark-theme .btn-secondary:hover,
body.dark-theme .btn-upgrade.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #00E5FF !important;
    border-color: rgba(0, 229, 255, 0.4) !important;
}

/* Force primary button texts to be white always */
.em-add-btn, .btn-primary, .btn-upgrade.btn-primary, .ze-btn-primary {
    color: #ffffff !important;
}

/* Style select options under dark theme */
body.dark-theme select option, 
body.dark-theme .em-import-select option, 
body.dark-theme .calc-number-input option, 
body.dark-theme .em-form-select option, 
body.dark-theme .em-filter-select option, 
body.dark-theme .calc-field option {
    background-color: #0c112b !important;
    color: #F8FAFC !important;
}

body.dark-theme .custom-select-option {
    border-bottom: 1px solid var(--border) !important;
}

/* Theme Toggle Button Style */
#theme-toggle-btn {
    background: transparent !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-sm) !important;
    border-radius: var(--radius-pill) !important;
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    margin-left: 8px !important;
    outline: none !important;
}

#theme-toggle-btn:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    border-color: var(--blue-border) !important;
    transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════════════
   PROJECT WORKFLOW ACTIVITIES & CONTRAST UPGRADES (V7+)
   ═══════════════════════════════════════════════════════════ */
.activity-item {
    background: var(--glass-white) !important;
    border: 1px solid var(--glass-border) !important;
    outline: 1px solid var(--glass-border-outer) !important;
    box-shadow: var(--shadow-sm) !important;
    border-radius: var(--radius-inner) !important;
    transition: all 0.25s ease !important;
}

.activity-item:hover {
    background: var(--glass-white-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-float) !important;
    border-color: rgba(37, 99, 235, 0.35) !important;
}

.activity-item.completed {
    background: rgba(34, 197, 94, 0.06) !important;
    border-color: rgba(34, 197, 94, 0.25) !important;
    opacity: 0.85 !important;
}

.activity-title {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    font-family: 'Cairo', sans-serif !important;
}

.activity-desc {
    color: var(--text-secondary) !important;
    font-family: 'Cairo', sans-serif !important;
}

.activity-time {
    color: var(--text-secondary) !important;
    font-family: 'Inter', sans-serif !important;
}

.activity-outcome {
    color: var(--green-primary) !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700 !important;
}

.activity-checkbox {
    border: 2px solid var(--text-muted) !important;
    background: transparent !important;
}

.activity-item.completed .activity-checkbox {
    background: var(--green-primary) !important;
    border-color: var(--green-primary) !important;
}

.activity-action-btn {
    background: var(--blue-bg) !important;
    border: 1px solid var(--blue-border) !important;
    color: var(--blue-primary) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 700 !important;
    font-family: 'Cairo', sans-serif !important;
    transition: all 0.2s ease !important;
}

.activity-action-btn:hover {
    background: var(--blue-primary) !important;
    color: var(--gray-0) !important;
    border-color: transparent !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Related assets buttons contrast enhancements */
.pstep-asset-btn {
    border-radius: var(--radius-sm) !important;
    font-weight: 700 !important;
    font-family: 'Cairo', sans-serif !important;
    transition: all 0.2s ease !important;
}

.btn-uc {
    background: rgba(37, 99, 235, 0.08) !important;
    border: 1px solid rgba(37, 99, 235, 0.20) !important;
    color: var(--blue-primary) !important;
}

.btn-uc:hover {
    background: var(--blue-primary) !important;
    color: var(--gray-0) !important;
    border-color: transparent !important;
}

.btn-pr {
    background: rgba(234, 88, 12, 0.08) !important;
    border: 1px solid rgba(234, 88, 12, 0.20) !important;
    color: var(--orange-primary) !important;
}

.btn-pr:hover {
    background: var(--orange-primary) !important;
    color: var(--gray-0) !important;
    border-color: transparent !important;
}

.btn-calc {
    background: rgba(22, 163, 74, 0.08) !important;
    border: 1px solid rgba(22, 163, 74, 0.20) !important;
    color: var(--green-primary) !important;
}

.btn-calc:hover {
    background: var(--green-primary) !important;
    color: var(--gray-0) !important;
    border-color: transparent !important;
}

.btn-tool {
    background: rgba(37, 99, 235, 0.08) !important;
    border: 1px solid rgba(37, 99, 235, 0.20) !important;
    color: var(--blue-primary) !important;
}

.btn-tool:hover {
    background: var(--blue-primary) !important;
    color: var(--gray-0) !important;
    border-color: transparent !important;
}

/* Project Dashboard Sidebar Card Styling */
.proj-sidebar-card {
    background: var(--glass-white) !important;
    border: 1px solid var(--glass-border) !important;
    outline: 1px solid var(--glass-border-outer) !important;
    box-shadow: var(--shadow-sm) !important;
    border-radius: var(--radius-card) !important;
}

.proj-sidebar-card h3 {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

.proj-var-field-row label {
    color: var(--text-secondary) !important;
}

.pstep-desc {
    color: var(--text-secondary) !important;
}

/* Floating Back to Top Button */
#back-to-top-btn {
    position: fixed !important;
    bottom: 32px !important;
    right: 32px !important;
    width: 48px !important;
    height: 48px !important;
    background: var(--glass-white-strong) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    outline: 1px solid var(--glass-border-outer) !important;
    box-shadow: var(--shadow-float) !important;
    border-radius: 50% !important;
    color: var(--blue-primary) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 99999 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    opacity: 0;
    padding: 0 !important;
}

#back-to-top-btn:hover {
    transform: translateY(-4px) scale(1.05) !important;
    background: var(--glass-white-hover) !important;
    box-shadow: var(--shadow-float-hover) !important;
    color: #1D4ED8 !important;
}

body.dark-theme #back-to-top-btn {
    color: #F8FAFC !important;
}

/* Glow Horizon Line transition visual signature */
.glow-horizon-line {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--blue-primary), var(--blue-light), transparent);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.8), 0 0 20px rgba(59, 130, 246, 0.4);
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
}
.glow-horizon-line.animate {
    animation: horizonGlow 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
@keyframes horizonGlow {
    0% {
        width: 0%;
        opacity: 0;
        left: 0%;
    }
    15% {
        opacity: 1;
        width: 30%;
    }
    85% {
        opacity: 1;
        width: 35%;
    }
    100% {
        width: 100%;
        left: 0%;
        opacity: 0;
    }
}

/* Unified Activity Ledger styles */
.ledger-timeline {
    position: relative;
    padding-right: 20px;
}
.hvr-timeline-entry:hover {
    transform: translateX(-4px);
    box-shadow: var(--shadow-float) !important;
    background: var(--glass-white-hover) !important;
}

/* Badge achievements styling */
.badge-item.locked {
    opacity: 0.6;
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.04) !important;
}
.badge-item:not(.locked):hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Search bar styling wrapper */
.ledger-filter-pills .hv2-tab {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(0,0,0,0.05);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.ledger-filter-pills .hv2-tab.active {
    background: var(--blue-primary) !important;
    color: var(--gray-0) !important;
    border-color: var(--blue-primary) !important;
    box-shadow: var(--shadow-blue) !important;
}

/* AI Use Cases Upgrade Styles */
.uc-variables-card {
    background: var(--glass-card-bg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: blur(12px);
}
.uc-variable-input {
    transition: all 0.2s ease;
}
.uc-variable-input:focus {
    border-color: var(--blue-primary) !important;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
    outline: none;
}
.uc-sim-workspace {
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.45) !important;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
.sim-pulse-dot {
    animation: simPulse 1s infinite alternate;
}
@keyframes simPulse {
    0% { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(1.2); opacity: 1; }
}
.uc-planner-row {
    transition: background 0.2s ease;
}
.uc-planner-row:hover {
    background: var(--surface) !important;
}
.chk-status-badge {
    transition: all 0.2s ease;
}
.chk-status-badge:hover {
    background: var(--border-strong) !important;
}
.chk-status-badge.badge-planned {
    color: #aaa !important;
}
.chk-status-badge.badge-in_progress {
    color: #ffb300 !important;
    border-color: rgba(255, 179, 0, 0.3) !important;
    background: rgba(255, 179, 0, 0.05) !important;
}
.chk-status-badge.badge-completed {
    color: #00e676 !important;
    border-color: rgba(0, 230, 118, 0.3) !important;
    background: rgba(0, 230, 118, 0.05) !important;
}
.run-sim-btn {
    transition: all 0.2s ease;
}
.run-sim-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Dark theme input styling to solve color contrast */
body.dark-theme input:not([type="checkbox"]):not([type="radio"]),
body.dark-theme textarea,
body.dark-theme select {
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-primary) !important;
}

body.dark-theme input:not([type="checkbox"]):not([type="radio"]):focus,
body.dark-theme textarea:focus,
body.dark-theme select:focus {
    background: rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(37, 99, 235, 0.6) !important;
}

/* Use Cases Inner Panels */
.uc-inner-card {
    background: var(--card-inner-bg) !important;
    border: 1px solid var(--card-inner-border) !important;
    color: var(--text-primary) !important;
    border-radius: 12px;
}

/* Planner Action Checklist custom row highlight */
.usecase-checklist-item-text.checked {
    text-decoration: line-through;
    color: var(--text-muted) !important;
    opacity: 0.65;
}
.uc-planner-row.completed-row {
    background: rgba(22, 163, 74, 0.04) !important;
    border-bottom: 1px solid rgba(22, 163, 74, 0.15) !important;
}
.uc-planner-row.completed-row .usecase-checklist-item-text {
    color: var(--text-muted) !important;
}
.chk-priority-badge {
    cursor: pointer;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: bold;
    background: var(--surface-hover);
    border: 1px solid var(--border-strong);
    width: 100%;
    text-align: center;
    transition: all 0.2s ease;
}
.chk-priority-badge:hover {
    background: var(--border-strong) !important;
}

/* Home Page Hero Action Buttons (Mobile-first entry) */
.hv2-hero-actions-small {
    display: flex;
    gap: 8px;
    align-items: center;
}

.hv2-hero-action-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 0;
}

.hv2-hero-action-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.08);
}

/* ==========================================================================
   WORKSPACE UI UPGRADE (Performance & L&D Enterprise Dashboards)
   ========================================================================== */

.workspace-dashboard-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    margin-top: 16px;
}

@media (max-width: 1024px) {
    .workspace-dashboard-layout {
        grid-template-columns: 1fr;
    }
}

/* Premium Header Card */
.ws-header-premium {
    padding: 32px;
    border-radius: 20px !important;
    color: #fff !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    margin-bottom: 24px;
}

.ws-header-premium::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}

.ws-header-premium.theme-performance {
    background: linear-gradient(135deg, #FF5E36 0%, #FF8D70 100%) !important;
    border: 1px solid rgba(255, 94, 54, 0.3) !important;
}

.ws-header-premium.theme-ld {
    background: linear-gradient(135deg, #00B4DB 0%, #0083B0 100%) !important;
    border: 1px solid rgba(0, 180, 219, 0.3) !important;
}

.ws-header-badge {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    backdrop-filter: blur(5px);
}

.ws-header-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    margin: 0 0 8px 0 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
    color: #ffffff !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ws-header-desc {
    font-size: 14px;
    opacity: 0.9;
    margin: 0 !important;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9) !important;
    max-width: 650px;
}

/* Analytics Stats Widget */
.ws-analytics-widget {
    background: var(--glass-white) !important;
    backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-float) !important;
}

.ws-analytics-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
    align-items: center;
}

@media (max-width: 768px) {
    .ws-analytics-grid {
        grid-template-columns: 1fr;
    }
}

.ws-circular-progress-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ws-progress-circle-svg {
    transform: rotate(-90deg);
}

.ws-progress-circle-bg {
    fill: none;
    stroke: var(--border-soft);
    stroke-width: 8;
}

.ws-progress-circle-fill {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s ease-in-out;
}

.theme-performance .ws-progress-circle-fill {
    stroke: url(#perf-gradient);
}

.theme-ld .ws-progress-circle-fill {
    stroke: url(#ld-gradient);
}

.ws-progress-circle-text {
    font-size: 16px;
    font-weight: 800;
    fill: var(--text-primary);
    text-anchor: middle;
    dominant-baseline: middle;
}

.ws-stats-subgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ws-stat-card-premium {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ws-stat-card-premium:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-3px);
    border-color: var(--border-strong);
}

.ws-stat-val {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.theme-performance .ws-stat-val {
    color: #FF5E36;
}

.theme-ld .ws-stat-val {
    color: #00B4DB;
}

.ws-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

/* Sidebar Widgets */
.ws-sidebar-section {
    background: var(--glass-white) !important;
    backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-float) !important;
}

.ws-sidebar-section h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.ws-toolkit-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ws-toolkit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.25s ease;
    cursor: pointer;
}

.ws-toolkit-item:hover {
    background: var(--border-soft);
    transform: translateX(-4px);
    border-color: var(--border-strong);
}

.ws-toolkit-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.theme-performance .ws-toolkit-icon {
    background: rgba(255, 94, 54, 0.1);
    color: #FF5E36;
}

.theme-ld .ws-toolkit-icon {
    background: rgba(0, 180, 219, 0.1);
    color: #00B4DB;
}

.ws-toolkit-name {
    font-size: 13px;
    font-weight: 600;
}

.ws-toolkit-type {
    font-size: 10px;
    color: var(--text-muted);
    margin-right: auto;
    background: var(--border-soft);
    padding: 2px 6px;
    border-radius: 4px;
}

/* AI Prompts Widget */
.ws-prompts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ws-prompt-pill {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.ws-prompt-pill::before {
    content: '⚡';
    font-size: 10px;
    opacity: 0.7;
}

.ws-prompt-pill:hover {
    background: var(--border-soft);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

/* Custom glow states for workspace buttons and cards */
.theme-performance .wpr-progress-fill {
    background: linear-gradient(90deg, #FF5E36, #FF8D70) !important;
    box-shadow: 0 0 8px rgba(255, 94, 54, 0.4);
}

.theme-ld .wpr-progress-fill {
    background: linear-gradient(90deg, #00B4DB, #0083B0) !important;
    box-shadow: 0 0 8px rgba(0, 180, 219, 0.4);
}

.theme-performance .wpr-progress-val {
    color: #FF5E36 !important;
}

.theme-ld .wpr-progress-val {
    color: #00B4DB !important;
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM NOTIFICATIONS DRAWER — Glassmorphic slide-out
   ═══════════════════════════════════════════════════════════ */
.notifications-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100vh;
    background: rgba(2, 11, 46, 0.85);
    backdrop-filter: blur(25px) saturate(200%);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.7);
    z-index: 100000;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', sans-serif;
}

.notifications-drawer.active {
    transform: translateX(0);
}

.nd-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.nd-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.nd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nd-header h3 {
    margin: 0;
    font-size: 18px;
    color: #00E5FF;
}

.nd-close-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFF;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.nd-close-btn:hover {
    background: rgba(255, 50, 50, 0.2);
    border-color: rgba(255, 50, 50, 0.4);
    color: #FF5E5E;
}

.nd-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nd-empty-state {
    color: var(--text-muted);
    text-align: center;
    margin-top: 40px;
    font-size: 14px;
}

.nd-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px;
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    animation: slideInNotify 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideInNotify {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.nd-item-icon {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nd-item-content {
    flex: 1;
}

.nd-item-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
    color: #FFF;
}

.nd-item-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.nd-item-time {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 8px;
    display: block;
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM FLOATING AI COPILOT — Glassmorphic widget
   ═══════════════════════════════════════════════════════════ */
.ai-copilot-widget {
    position: fixed;
    bottom: 24px;
    left: 24px; /* Placed at left side for symmetry with other controls */
    z-index: 99999;
}

.copilot-toggle-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #005DFF, #00E5FF);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFF;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 93, 255, 0.4), 0 0 15px rgba(0, 229, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.copilot-toggle-btn:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 40px rgba(0, 93, 255, 0.5), 0 0 25px rgba(0, 229, 255, 0.4);
}

.copilot-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(0, 229, 255, 0.3);
    animation: copilotPulseAnim 2s infinite;
    z-index: -1;
}

@keyframes copilotPulseAnim {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

.copilot-chat-panel {
    position: absolute;
    bottom: 76px;
    left: 0;
    width: 380px;
    height: 500px;
    background: rgba(2, 11, 46, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    direction: rtl;
    text-align: right;
}

.ai-copilot-widget.active .copilot-chat-panel {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.copilot-panel-header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 12px;
}

.copilot-avatar-icon {
    font-size: 24px;
    background: rgba(0, 93, 255, 0.2);
    border: 1px solid rgba(0, 93, 255, 0.4);
    border-radius: 12px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copilot-header-info {
    flex: 1;
}

.copilot-header-info h4 {
    margin: 0;
    font-size: 14px;
    color: #FFF;
    font-weight: 600;
}

.copilot-status-lbl {
    font-size: 10px;
    color: #00E5FF;
}

.copilot-close-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.copilot-close-btn:hover {
    color: #FFF;
}

.copilot-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.copilot-msg {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.5;
    animation: slideInNotify 0.2s ease forwards;
}

.copilot-msg.bot {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #E2E8F0;
    align-self: flex-start;
    border-top-right-radius: 4px;
}

.copilot-msg.user {
    background: linear-gradient(135deg, #005DFF, #0083B0);
    color: #FFF;
    align-self: flex-end;
    border-top-left-radius: 4px;
}

.copilot-chat-input-area {
    padding: 14px;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    gap: 8px;
}

#copilot-chat-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #FFF;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}

#copilot-chat-input:focus {
    border-color: #00E5FF;
}

.copilot-send-btn {
    background: #005DFF;
    border: none;
    color: #FFF;
    border-radius: 10px;
    width: 38px;
    height: 38px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.copilot-send-btn:hover {
    background: #00E5FF;
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM DRAG & DROP PIPELINE — Kanban active hover states
   ═══════════════════════════════════════════════════════════ */
.kanban-col {
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.kanban-col.drag-over {
    background-color: rgba(0, 93, 255, 0.06) !important;
    border: 1px dashed rgba(0, 229, 255, 0.4) !important;
    box-shadow: inset 0 0 15px rgba(0, 229, 255, 0.05);
}

.kanban-card {
    cursor: grab;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.kanban-card:active {
    cursor: grabbing;
}

.kanban-card.dragged {
    opacity: 0.4;
    transform: scale(0.95) rotate(-2deg);
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM SVG ANALYTICS CHARTS — Animated paths & gradients
   ═══════════════════════════════════════════════════════════ */
.svg-chart-container {
    width: 100%;
    margin-top: 15px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 16px;
}

.svg-chart-trend-line {
    fill: none;
    stroke: url(#chart-gradient-blue);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: drawChartLine 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes drawChartLine {
    to { stroke-dashoffset: 0; }
}

.svg-chart-grid-line {
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 1;
    stroke-dasharray: 4, 4;
}

.svg-chart-axis {
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 1;
}

.svg-chart-text {
    fill: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    font-family: inherit;
}

.svg-chart-point {
    fill: #00E5FF;
    stroke: rgba(2, 11, 46, 0.9);
    stroke-width: 2;
    transition: r 0.2s ease;
    cursor: pointer;
}

.svg-chart-point:hover {
    r: 6;
}

.svg-chart-bar {
    fill: url(#chart-gradient-orange);
    transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1), y 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    cursor: pointer;
}

.svg-chart-bar:hover {
    opacity: 0.85;
}