/**
 * Gambit - UK Energy Trading Platform
 * Semi-Dark Theme based on Soyuz template
 * Powered by Clouds on Mars
 */

/* ==========================================================================
   CSS Variables - Energy Trading Theme (Semi-Dark)
   ========================================================================== */
:root {
    /* Primary brand color (teal) */
    --et-primary: #005763;
    --et-primary-light: #007a8a;
    --et-primary-dark: #003d47;
    --et-primary-rgba: rgba(0, 87, 99, 0.1);

    /* Soyuz standard colors */
    --et-success: #43d187;
    --et-danger: #f9616d;
    --et-warning: #f7bb4d;
    --et-info: #3d9bfb;
    --et-secondary: #96a3b6;

    /* Text colors */
    --et-text-dark: #141d46;
    --et-text-muted: #8A98AC;
    --et-text-body: #8A98AC;
    --et-text-light: #f2f3f7;

    /* Backgrounds */
    --et-bg-body: #f2f3f7;
    --et-bg-light: #f2f3f7;
    --et-card-bg: #ffffff;

    /* Semi-Dark Sidebar Colors - Charcoal */
    --et-sidebar-bg: #0f1923;
    --et-sidebar-bg-dark: #0a1119;
    --et-sidebar-text: #f2f3f7;
    --et-sidebar-text-muted: rgba(255, 255, 255, 0.6);
    --et-sidebar-border: rgba(255, 255, 255, 0.08);
    --et-sidebar-hover-bg: rgba(255, 255, 255, 0.05);
    --et-sidebar-active-bg: rgba(0, 87, 99, 0.3);

    /* Gradients (Soyuz pattern: 58deg) */
    --et-gradient-primary: linear-gradient(58deg, #005763 0%, #00919e 100%);
    --et-gradient-success: linear-gradient(58deg, #43d187 0%, #45e396 100%);
    --et-gradient-danger: linear-gradient(58deg, #f9616d 0%, #ff8181 100%);
    --et-gradient-warning: linear-gradient(58deg, #f7bb4d 0%, #fef07f 100%);
    --et-gradient-info: linear-gradient(58deg, #3d9bfb 0%, #a7daf5 100%);
    --et-gradient-dark: linear-gradient(58deg, #2d2d2d 0%, #3d3d3d 100%);

    /* Shadows */
    --et-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
    --et-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --et-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
    --et-shadow-hover: 0 8px 25px rgba(0, 87, 99, 0.15);
    --et-shadow-dark: 0 5px 20px rgba(0, 0, 0, 0.3);

    /* Agent colors */
    --et-forecast-color: #005763;
    --et-trading-color: #43d187;
    --et-risk-color: #f9616d;
    --et-consensus-color: #f7bb4d;

    /* Borders */
    --et-border-color: rgba(0, 0, 0, 0.03);
    --et-border-light: rgba(0, 0, 0, 0.05);

    /* Transitions */
    --et-transition: all 0.3s ease;
    --et-transition-fast: all 0.15s ease;

    /* Z-index layering */
    --et-zindex-sidebar: 100;
    --et-zindex-topbar: 99;
    --et-zindex-dropdown: 1000;
    --et-zindex-modal: 1050;
    --et-zindex-fab: 1060;
    --et-zindex-toast: 1070;
    --et-zindex-overlay: 1080;
    --et-zindex-tour: 1090;
    --et-zindex-loading: 1100;
}

/* ==========================================================================
   Global Reset & Base Styles
   ========================================================================== */
* {
    outline: none !important;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: "Mukta Vaani", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: var(--et-text-body);
    background: var(--et-bg-body);
    line-height: 1.5;
    overflow-x: hidden;
}

/* ==========================================================================
   Gambit Brand Logo
   ========================================================================== */
.gambit-logo-small {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gambit-icon {
    width: 36px;
    height: 36px;
    background: var(--et-gradient-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    font-family: "Mukta Vaani", -apple-system, BlinkMacSystemFont, sans-serif;
    box-shadow: 0 4px 15px rgba(0, 87, 99, 0.3);
}

.gambit-logo {
    display: flex;
    align-items: center;
    text-decoration: none !important;
}

.gambit-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gambit-brand-icon {
    width: 42px;
    height: 42px;
    background: var(--et-gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    font-family: "Mukta Vaani", -apple-system, BlinkMacSystemFont, sans-serif;
    box-shadow: 0 4px 15px rgba(0, 87, 99, 0.3);
}

.gambit-brand-text {
    font-size: 28px;
    font-weight: 700;
    color: var(--et-sidebar-text);
    letter-spacing: -0.5px;
    font-family: "Mukta Vaani", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Footer brand styling */
/* Footer brand logo removed — replaced by text identity in footer grid */

/* User Avatar styling */
.profilebar .user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--et-primary);
    box-shadow: 0 2px 8px rgba(0, 87, 99, 0.2);
}

.profilebar .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profilebar .profilename small {
    display: block;
    margin-top: 2px;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 500;
    color: var(--et-text-dark);
    margin-bottom: 0.5rem;
}

h1, .h1 { font-size: 38px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 26px; }
h4, .h4 { font-size: 22px; }
h5, .h5 { font-size: 18px; }
h6, .h6 { font-size: 16px; }

p {
    line-height: 1.6;
    margin-bottom: 10px;
}

a {
    color: var(--et-primary);
    transition: var(--et-transition-fast);
}

a:hover,
a:focus {
    color: var(--et-primary-light);
    text-decoration: none;
}

strong, b {
    font-weight: 600;
}

/* ==========================================================================
   Layout - Full Width
   ========================================================================== */
.container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
}

#containerbar {
    width: 100%;
    max-width: 100%;
}

.rightbar {
    width: calc(100% - 250px);
    margin-left: 250px;
    background-color: var(--et-bg-light);
    min-height: 100vh;
    transition: var(--et-transition);
}

.toggle-menu .leftbar {
    width: 60px;
}

.toggle-menu .rightbar {
    width: calc(100% - 60px);
    margin-left: 60px;
}

.contentbar {
    padding: 25px 30px;
}

.tab-content,
.tab-pane {
    width: 100%;
}

/* ==========================================================================
   SEMI-DARK SIDEBAR - Key Feature
   ========================================================================== */
.leftbar {
    background: var(--et-sidebar-bg);
    box-shadow: var(--et-shadow-dark);
    width: 250px;
    height: 100%;
    position: fixed;
    z-index: 99;
    transition: var(--et-transition);
}

.sidebar {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Navigationbar container */
.navigationbar {
    display: flex;
    height: 100%;
}

.vertical-menu-icon {
    width: 60px;
    background: var(--et-sidebar-bg-dark);
    display: none;
    flex-direction: column;
    border-right: 1px solid var(--et-sidebar-border);
}

.vertical-menu-icon .nav-link {
    padding: 15px;
    text-align: center;
    color: var(--et-sidebar-text-muted);
    transition: var(--et-transition);
}

.vertical-menu-icon .nav-link:hover,
.vertical-menu-icon .nav-link.active {
    color: var(--et-primary-light);
    background: var(--et-sidebar-hover-bg);
}

.vertical-menu-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.toggle-menu .vertical-menu-icon {
    display: flex;
}

.toggle-menu .vertical-menu-detail {
    display: none;
}

/* Hover expand collapsed sidebar */
.toggle-menu .leftbar:hover {
    width: 250px;
}

.toggle-menu .leftbar:hover .vertical-menu-icon {
    display: none;
}

.toggle-menu .leftbar:hover .vertical-menu-detail {
    display: flex;
}

/* Scrollbar styling for sidebar */
.vertical-menu-detail .tab-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
}

.vertical-menu-detail .tab-content::-webkit-scrollbar {
    width: 6px;
}

.vertical-menu-detail .tab-content::-webkit-scrollbar-track {
    background: transparent;
}

.vertical-menu-detail .tab-content::-webkit-scrollbar-thumb {
    background: var(--et-sidebar-border);
    border-radius: 3px;
}

.vertical-menu-detail .tab-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Sidebar Logo - Same as sidebar */
.logobar {
    padding: 15px 10px;
    text-align: center;
    background: var(--et-sidebar-bg);
    border-bottom: 1px solid var(--et-sidebar-border);
    position: relative;
}

.logobar .logo {
    display: inline-block;
}

.logobar .logo img {
    max-height: 120px;
    width: auto;
    transition: var(--et-transition);
}

.logobar .logo:hover img {
    transform: scale(1.02);
}

/* Collapsed sidebar small logo */
.vertical-menu-icon .logobar {
    padding: 15px 10px;
    background: var(--et-sidebar-bg);
}

.vertical-menu-icon .logobar .logo img {
    max-height: 36px;
    width: auto;
}

.vertical-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vertical-menu li {
    position: relative;
    margin: 0;
    padding: 0;
}

/* Menu Section Headers */
.vertical-menu .menu-title,
.vertical-menu li.vertical-header {
    padding: 20px 25px 8px 25px;
    color: var(--et-sidebar-text-muted);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    border-bottom: 1px solid var(--et-sidebar-border);
    margin-bottom: 5px;
}

.vertical-menu li:first-child.vertical-header {
    padding-top: 10px;
}

/* Menu Section - styled divider */
.vertical-menu .menu-section {
    margin-top: 20px;
    margin-bottom: 8px;
}

.vertical-menu .menu-section-title {
    display: block;
    padding: 8px 20px;
    color: var(--et-primary-light);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    border-left: 3px solid var(--et-primary);
    background: rgba(0, 87, 99, 0.1);
}

.vertical-menu .menu-title {
    display: block;
    padding: 15px 20px 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    border-bottom: none;
    margin-bottom: 10px;
}

/* Menu Links */
.vertical-menu li a,
.vertical-menu li a.tab-link {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: var(--et-sidebar-text);
    font-size: 15px;
    font-weight: 400;
    transition: var(--et-transition);
    text-decoration: none;
    border-left: 3px solid transparent;
    margin: 2px 0;
}

.vertical-menu li a i,
.vertical-menu li a.tab-link i {
    margin-right: 12px;
    font-size: 18px;
    width: 24px;
    text-align: center;
    color: var(--et-sidebar-text-muted);
    transition: var(--et-transition-fast);
}

.vertical-menu li a img {
    width: 20px;
    margin-right: 12px;
    opacity: 0.7;
    filter: brightness(0) invert(1);
}

/* Hover State */
.vertical-menu li a:hover,
.vertical-menu li a.tab-link:hover {
    background: var(--et-sidebar-hover-bg);
    color: #fff;
    border-left-color: var(--et-primary);
}

.vertical-menu li a:hover i,
.vertical-menu li a.tab-link:hover i {
    color: var(--et-primary-light);
}

.vertical-menu li a:hover img {
    opacity: 1;
}

/* Active State */
.vertical-menu li a.active,
.vertical-menu li a.tab-link.active,
.vertical-menu li.active > a {
    background: var(--et-sidebar-active-bg);
    color: #fff;
    border-left-color: var(--et-primary);
}

.vertical-menu li a.active i,
.vertical-menu li a.tab-link.active i,
.vertical-menu li.active > a i {
    color: var(--et-primary-light);
}

.vertical-menu li a.active img,
.vertical-menu li.active > a img {
    opacity: 1;
    filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(150deg);
}

/* Submenu */
.vertical-menu .vertical-submenu {
    display: none;
    list-style: none;
    padding: 5px 0 5px 20px;
    margin: 0;
    background: rgba(0, 0, 0, 0.15);
}

.vertical-menu li.active > .vertical-submenu {
    display: block;
}

.vertical-menu .vertical-submenu li a {
    padding: 8px 15px 8px 25px;
    font-size: 14px;
    color: var(--et-sidebar-text-muted);
    border-left: none;
}

.vertical-menu .vertical-submenu li a:before {
    content: "\e897";
    font-family: "feather" !important;
    font-size: 10px;
    margin-right: 8px;
    opacity: 0.5;
}

.vertical-menu .vertical-submenu li a:hover,
.vertical-menu .vertical-submenu li a.active {
    color: var(--et-primary-light);
    background: transparent;
}

/* ==========================================================================
   TOPBAR - Clean White Header
   ========================================================================== */
/* ==========================================================================
   Topbar — redesigned: single flex row, unified visual grammar
   ========================================================================== */
.topbar {
    background: #0f1923;
    padding: 0 20px;
    height: 48px;
    position: sticky;
    top: 0;
    z-index: 98;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* --- Soyuz style.css overrides ---
   style.css uses .topbar-qualified selectors (specificity 0-2-1+).
   We must match or exceed that specificity to win the cascade.
   Without these, Soyuz forces inline-block, float, white backgrounds,
   blue icons, and 215px search width over our dark flex layout. */
.topbar .togglebar {
    display: none !important;  /* old Soyuz togglebar replaced by .tb-left */
}
.topbar .infobar {
    display: none !important;  /* old Soyuz infobar replaced by .tb-right */
}
.topbar .searchbar {
    width: auto !important;    /* kill Soyuz 215px cap */
}
.topbar .togglebar .menu-hamburger {
    background-color: transparent !important;
    border-radius: 6px !important;
}
.topbar .infobar .infobar-icon {
    display: none !important;  /* old Soyuz icon buttons replaced by .tb-icon */
    width: auto !important;
    height: auto !important;
    background-color: transparent !important;
}

.topbar .tb-row {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 16px;
}

/* --- Left zone: hamburger + search --- */
.topbar .tb-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.topbar .menu-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.15s;
}
.topbar .menu-hamburger:hover { background: rgba(255, 255, 255, 0.12); }
.topbar .menu-hamburger img { width: 16px; filter: brightness(0) invert(1); opacity: 0.7; }
.topbar .menu-hamburger img.menu-hamburger-close { display: none; }

.topbar .tb-search { position: relative; }
.topbar .tb-search .input-group { margin: 0; }
.topbar .tb-search input[type=search] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    height: 32px;
    width: 300px;
    padding-left: 36px;
    padding-right: 44px;
    text-overflow: ellipsis;
}
.topbar .tb-search input::placeholder { color: rgba(255, 255, 255, 0.3); }
.topbar .tb-search input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(0, 87, 99, 0.5);
    outline: none;
    box-shadow: none;
}
.topbar .tb-search .input-group-append { position: absolute; left: 0; top: 0; z-index: 2; }
.topbar .tb-search .btn {
    background: transparent;
    border: none;
    padding: 4px 8px;
    height: 32px;
}
.topbar .tb-search .btn img { width: 14px; filter: brightness(0) invert(1); opacity: 0.4; }
.topbar .tb-kbd {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    padding: 1px 5px;
    pointer-events: none;
}

/* --- Center zone: status cluster — single visual grammar --- */
.topbar .tb-status-cluster {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 auto;
    flex-shrink: 0;
}

.topbar .tb-status-group {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: default;
}

.topbar .tb-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}
.topbar .tb-dot--live {
    background: #43d187;
    box-shadow: 0 0 6px rgba(67, 209, 135, 0.5);
    animation: tbPulse 2s ease-in-out infinite;
}
.topbar .tb-dot--warn { background: #f7bb4d; box-shadow: 0 0 6px rgba(247, 187, 77, 0.4); }
.topbar .tb-dot--off  { background: #f9616d; box-shadow: none; animation: none; }

@keyframes tbPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.topbar .tb-status-label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.topbar .tb-status-label--mono {
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #43d187;
}

.topbar .tb-status-sep {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.1);
}

/* --- Right zone: AI bar, icons, profile --- */
.topbar .tb-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
}

/* AI Confidence — progress bar, not a pill */
.topbar .tb-ai {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 5px;
    padding: 4px 10px;
    cursor: default;
}
.topbar .tb-ai-label {
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.5px;
}
.topbar .tb-ai-track {
    width: 48px;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}
.topbar .tb-ai-fill {
    height: 100%;
    background: #43d187;
    border-radius: 2px;
    transition: width 0.6s ease;
}
.topbar .tb-ai.medium .tb-ai-fill { background: #f7bb4d; }
.topbar .tb-ai.low .tb-ai-fill { background: #f9616d; }
.topbar .tb-ai-val {
    font-family: "SF Mono", "Monaco", "Consolas", monospace;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    min-width: 26px;
    text-align: right;
}

/* Icon buttons — kill all focus/active rings from Bootstrap and Soyuz */
.topbar .tb-icon,
.topbar .tb-icon:focus,
.topbar .tb-icon:active,
.topbar .dropdown-toggle.tb-icon,
.topbar .dropdown-toggle.tb-icon:focus,
.topbar .dropdown-toggle.tb-icon:active {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 16px;
    transition: background 0.15s, color 0.15s;
    position: relative;
    text-decoration: none;
    outline: none !important;
    box-shadow: none !important;
    border: none;
    background: transparent;
}
.topbar .tb-icon:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}
/* Override global focus-visible outline for topbar icons */
.topbar .tb-icon:focus-visible,
.topbar .dropdown-toggle.tb-icon:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.08);
}
/* Notification badge — hidden by default, only shown via JS when count > 0 */
.topbar .tb-notify-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #f9616d;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: none;  /* JS shows it via .show()/.css('display','flex') when needed */
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Controls button — labeled icon, not orphaned */
.topbar .tb-controls-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    outline: none !important;
    box-shadow: none !important;
}
.topbar .tb-controls-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}
.topbar .tb-controls-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
}
@media (max-width: 992px) {
    .topbar .tb-controls-label { display: none; }
}

/* Profile — stacked name/role, no dash separator */
.topbar .tb-profile > a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
    margin-left: 4px;
    transition: background 0.15s;
}
.topbar .tb-profile > a:hover { background: rgba(255, 255, 255, 0.06); }
.topbar .tb-profile .dropdown-toggle::after { display: none; }

.topbar .tb-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
}
.topbar .tb-profile-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.topbar .tb-profile-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}
.topbar .tb-profile-role {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
}
.topbar .tb-profile-chevron {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.25);
}

/* Responsive: collapse search + profile text on small screens */
@media (max-width: 992px) {
    .topbar .tb-search { display: none; }
    .topbar .tb-profile-text { display: none; }
    .topbar .tb-status-cluster { margin: 0; }
}
@media (max-width: 768px) {
    .topbar .tb-ai { display: none; }
    .topbar .tb-status-sep:last-of-type { display: none; }
}

/* Toggle bar - left side */
.togglebar {
    float: left;
}

.togglebar .list-inline-item:not(:last-child) {
    margin-right: 15px;
}

.menubar a.menu-hamburger {
    display: inline-block;
    padding: 8px;
    border-radius: 5px;
    transition: var(--et-transition);
}

.menubar a.menu-hamburger:hover {
    background: var(--et-bg-light);
}

.menubar .menu-hamburger img {
    width: 24px;
    height: 24px;
}

.menubar .menu-hamburger-close {
    display: none;
}

/* Search bar */
.searchbar .input-group {
    background: var(--et-bg-light);
    border-radius: 8px;
    overflow: hidden;
    min-width: 280px;
}

.searchbar .input-group .btn {
    background: transparent;
    border: none;
    padding: 10px 15px;
}

.searchbar .input-group .btn img {
    width: 18px;
    height: 18px;
    opacity: 0.6;
}

.searchbar .form-control {
    border: none;
    background: transparent;
    padding: 10px 15px 10px 0;
    font-size: 14px;
    color: var(--et-text-dark);
}

.searchbar .form-control:focus {
    box-shadow: none;
}

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

/* Info bar - right side */
.infobar {
    float: right;
}

.infobar .list-inline-item:not(:last-child) {
    margin-right: 20px;
}

.infobar-icon {
    display: inline-block;
    padding: 8px;
    border-radius: 5px;
    transition: var(--et-transition);
}

.infobar-icon:hover {
    background: var(--et-bg-light);
}

.infobar-icon img {
    width: 22px;
    height: 22px;
    opacity: 0.7;
}

.infobar-icon:hover img {
    opacity: 1;
}

/* Market Status Badge */
.market-status .badge {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 20px;
}

.badge-success-inverse {
    background: rgba(67, 209, 135, 0.12);
    color: var(--et-success);
}

/* Notifications */
.notifybar .live-icon {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    background: var(--et-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notifybar .dropdown-toggle::after {
    display: none;
}

.notification-dropdown-title {
    padding: 15px 20px;
    border-bottom: 1px solid var(--et-border-color);
}

.notification-dropdown-title h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

/* Profile dropdown */
.profilebar .dropdown-toggle {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 8px;
    text-decoration: none;
    transition: var(--et-transition);
}

.profilebar .dropdown-toggle:hover {
    background: var(--et-bg-light);
}

.profilebar .dropdown-toggle::after {
    display: none;
}

.profilebar .dropdown-toggle img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 10px;
}

.profilebar .dropdown-toggle .live-icon {
    color: var(--et-text-dark);
    font-size: 14px;
    font-weight: 500;
}

.profilebar .dropdown-toggle .feather {
    margin-left: 8px;
    color: var(--et-text-muted);
}

/* Dropdown menus */
.dropdown-menu {
    border: none;
    box-shadow: var(--et-shadow-lg);
    border-radius: 8px;
    padding: 10px 0;
    min-width: 220px;
}

.dropdown-item {
    padding: 10px 20px;
    font-size: 14px;
    color: var(--et-text-dark);
    transition: var(--et-transition-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--et-bg-light);
    color: var(--et-primary);
}

.profilename {
    padding: 10px 0;
    border-bottom: 1px solid var(--et-border-color);
}

.profilename h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.userbox .list-unstyled {
    padding: 10px 0;
}

.userbox .profile-icon {
    display: flex;
    align-items: center;
    color: var(--et-text-dark);
    text-decoration: none;
}

.userbox .profile-icon:hover {
    color: var(--et-primary);
}

/* ==========================================================================
   MOBILE TOPBAR
   ========================================================================== */
.topbar-mobile {
    display: none;
    background: #ffffff;
    padding: 12px 20px;
    box-shadow: var(--et-shadow-sm);
}

.mobile-logobar {
    float: left;
}

.mobile-logobar .mobile-logo img {
    max-height: 36px;
}

.mobile-togglebar {
    float: right;
}

.mobile-togglebar .list-inline-item {
    margin-left: 10px;
}

.topbar-toggle-icon a,
.mobile-togglebar .menubar a {
    display: inline-block;
    padding: 8px;
    border-radius: 5px;
    transition: var(--et-transition);
}

.topbar-toggle-icon a:hover,
.mobile-togglebar .menubar a:hover {
    background: var(--et-bg-light);
}

.topbar-toggle-icon img,
.mobile-togglebar .menubar img {
    width: 24px;
    height: 24px;
}

@media (max-width: 992px) {
    .topbar-mobile {
        display: block;
    }

    .topbar {
        display: none;
    }
}

/* ==========================================================================
   BREADCRUMB BAR
   ========================================================================== */
.breadcrumbbar {
    background: #ffffff;
    padding: 20px 30px;
    border-bottom: 1px solid var(--et-border-light);
}

.page-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--et-text-dark);
    margin-bottom: 5px;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "\e844";
    font-family: "feather";
    font-size: 12px;
    color: var(--et-text-muted);
}

.breadcrumb-item a {
    color: var(--et-text-muted);
}

.breadcrumb-item a:hover {
    color: var(--et-primary);
}

.breadcrumb-item.active {
    color: var(--et-primary);
}

.widgetbar {
    text-align: right;
}

.widgetbar .badge {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
}

/* Sidebar Control Button */
.sidebar-control-item {
    padding: 15px 20px;
}

.sidebar-control-item .btn {
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-control-item .btn-primary {
    background: var(--et-gradient-primary) !important;
    box-shadow: 0 4px 15px rgba(0, 87, 99, 0.35);
}

.sidebar-control-item .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 87, 99, 0.45);
}

/* ==========================================================================
   Cards - Enhanced with Shadows & Hover Effects
   ========================================================================== */
.card {
    border: none;
    border-radius: 5px;
    background: var(--et-card-bg);
    box-shadow: var(--et-shadow-sm);
    transition: var(--et-transition);
    margin-bottom: 30px;
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--et-shadow);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--et-border-color);
    padding: 18px 20px;
}

.card-header:first-child {
    border-radius: 5px 5px 0 0;
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--et-text-dark);
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.card-title i {
    margin-right: 10px;
    color: var(--et-primary);
}

.card-subtitle {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--et-text-muted);
    margin-bottom: 15px;
}

.card-body {
    padding: 20px;
}

.card-footer {
    background: transparent;
    border-top: 1px solid var(--et-border-color);
    padding: 15px 20px;
}

/* Card with colored header */
.card-header.bg-primary {
    background: var(--et-gradient-primary) !important;
    border-bottom: none;
}

.card-header.bg-primary .card-title,
.card-header.bg-primary small {
    color: #fff;
}

/* Card with border accent */
.card.border-primary { border: 1px solid var(--et-primary) !important; }
.card.border-success { border: 1px solid var(--et-success) !important; }
.card.border-danger { border: 1px solid var(--et-danger) !important; }
.card.border-warning { border: 1px solid var(--et-warning) !important; }
.card.border-info { border: 1px solid var(--et-info) !important; }

/* ==========================================================================
   Metric Cards / Stat Widgets
   ========================================================================== */
.card.m-b-30 {
    margin-bottom: 30px;
}

.stat-card,
.metric-card {
    transition: var(--et-transition);
    border-left: 4px solid transparent;
}

.stat-card:hover,
.metric-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--et-shadow-hover);
}

.stat-card .card-body,
.metric-card .card-body {
    padding: 20px;
}

.stat-card h4,
.metric-card h4 {
    font-size: 28px;
    font-weight: 600;
    color: var(--et-text-dark);
    margin-bottom: 5px;
    line-height: 1.2;
}

.stat-card p,
.metric-card p {
    color: var(--et-text-muted);
    margin-bottom: 0;
    font-size: 14px;
}

/* Icon badges in metric cards */
.stat-card .badge,
.metric-card .badge {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 22px;
}

/* Widget icon backgrounds */
.widget-icon-bg {
    height: 60px;
    width: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 50%;
    margin: 0 auto;
}

.action-icon {
    width: 50px;
    height: 50px;
    line-height: 42px;
    font-weight: 600;
    border-radius: 10px;
    font-size: 20px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Buttons - Enhanced with Gradients & Shadows
   ========================================================================== */
.btn {
    padding: 8px 20px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 5px;
    transition: var(--et-transition);
    border: none;
    cursor: pointer;
}

.btn:focus {
    box-shadow: none !important;
}

.btn-sm {
    padding: 5px 15px;
    font-size: 14px;
}

.btn-lg {
    padding: 12px 30px;
    font-size: 16px;
}

/* Primary Button - Gradient */
.btn-primary {
    background: var(--et-gradient-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(0, 87, 99, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 87, 99, 0.4);
    color: #fff !important;
}

.btn-primary:active {
    transform: translateY(0);
}

/* Success Button - Gradient */
.btn-success {
    background: var(--et-gradient-success) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(67, 209, 135, 0.3);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(67, 209, 135, 0.4);
    color: #fff !important;
}

/* Danger Button */
.btn-danger {
    background: var(--et-gradient-danger) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(249, 97, 109, 0.3);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249, 97, 109, 0.4);
    color: #fff !important;
}

/* Warning Button */
.btn-warning {
    background: var(--et-gradient-warning) !important;
    color: var(--et-text-dark) !important;
    box-shadow: 0 4px 15px rgba(247, 187, 77, 0.3);
}

/* Info Button */
.btn-info {
    background: var(--et-gradient-info) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(61, 155, 251, 0.3);
}

/* Outline Buttons */
.btn-outline-primary {
    color: var(--et-primary) !important;
    border: 2px solid var(--et-primary) !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: var(--et-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(0, 87, 99, 0.3);
}

.btn-outline-secondary {
    color: var(--et-secondary) !important;
    border: 2px solid var(--et-secondary) !important;
    background: transparent !important;
}

.btn-outline-secondary:hover {
    background: var(--et-secondary) !important;
    color: #fff !important;
}

.btn-outline-danger {
    color: var(--et-danger) !important;
    border: 2px solid var(--et-danger) !important;
    background: transparent !important;
}

.btn-outline-danger:hover {
    background: var(--et-danger) !important;
    color: #fff !important;
}

/* RGBA Soft Buttons */
.btn-primary-rgba {
    background: var(--et-primary-rgba) !important;
    color: var(--et-primary) !important;
}

.btn-primary-rgba:hover {
    background: rgba(0, 87, 99, 0.2) !important;
}

.btn-success-rgba {
    background: rgba(67, 209, 135, 0.1) !important;
    color: var(--et-success) !important;
}

.btn-danger-rgba {
    background: rgba(249, 97, 109, 0.1) !important;
    color: var(--et-danger) !important;
}

/* ==========================================================================
   Badges - Enhanced
   ========================================================================== */
.badge {
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 13px;
    letter-spacing: 0.3px;
}

.badge-primary {
    background: var(--et-gradient-primary);
    color: #fff;
}

.badge-success {
    background: var(--et-gradient-success);
    color: #fff;
}

.badge-danger {
    background: var(--et-gradient-danger);
    color: #fff;
}

.badge-warning {
    background: var(--et-gradient-warning);
    color: var(--et-text-dark);
}

.badge-info {
    background: var(--et-gradient-info);
    color: #fff;
}

.badge-secondary {
    background: var(--et-secondary);
    color: #fff;
}

/* Inverse/Soft Badges */
.badge-primary-inverse {
    background: var(--et-primary-rgba);
    color: var(--et-primary);
}

.badge-success-inverse {
    background: rgba(67, 209, 135, 0.15);
    color: var(--et-success);
}

.badge-danger-inverse {
    background: rgba(249, 97, 109, 0.15);
    color: var(--et-danger);
}

.badge-warning-inverse {
    background: rgba(247, 187, 77, 0.15);
    color: #856404;
}

.badge-info-inverse {
    background: rgba(61, 155, 251, 0.15);
    color: var(--et-info);
}

/* Large Icon Badges - Metric Cards */
.badge.font-35 {
    width: 60px;
    height: 60px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    border-radius: 12px;
    padding: 0 !important;
}

.badge.font-35 svg {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
}

.badge.font-40 {
    width: 70px;
    height: 70px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    border-radius: 14px;
    padding: 0 !important;
}

.badge.font-40 svg {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
}

.badge.font-50 {
    width: 80px;
    height: 80px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    border-radius: 16px;
    padding: 0 !important;
}

.badge.font-50 svg {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
}

/* ==========================================================================
   RGBA Background Colors
   ========================================================================== */
.bg-primary-rgba { background: var(--et-primary-rgba) !important; }
.bg-success-rgba { background: rgba(67, 209, 135, 0.1) !important; }
.bg-danger-rgba { background: rgba(249, 97, 109, 0.1) !important; }
.bg-warning-rgba { background: rgba(247, 187, 77, 0.1) !important; }
.bg-info-rgba { background: rgba(61, 155, 251, 0.1) !important; }

/* Solid Background Colors */
.bg-primary { background: var(--et-primary) !important; }
.bg-success { background: var(--et-success) !important; }
.bg-danger { background: var(--et-danger) !important; }
.bg-warning { background: var(--et-warning) !important; }
.bg-info { background: var(--et-info) !important; }

/* ==========================================================================
   Progress Bars
   ========================================================================== */
.progress {
    height: 8px;
    border-radius: 10px;
    background-color: #e9ecef;
    overflow: hidden;
}

.progress-bar {
    border-radius: 10px;
    transition: width 0.6s ease;
}

.progress-bar.bg-primary {
    background: var(--et-gradient-primary) !important;
}

.progress-bar.bg-success {
    background: var(--et-gradient-success) !important;
}

.progress-bar.bg-danger {
    background: var(--et-gradient-danger) !important;
}

/* ==========================================================================
   Tables - Enhanced
   ========================================================================== */
.table {
    margin-bottom: 0;
}

.table thead th {
    font-weight: 600;
    font-size: 13px;
    color: var(--et-text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: none;
    border-bottom: 2px solid var(--et-border-color);
    padding: 15px 12px;
    background: var(--et-bg-light);
}

.table td {
    vertical-align: middle;
    color: var(--et-text-muted);
    padding: 15px 12px;
    border-color: var(--et-border-light);
    transition: var(--et-transition-fast);
}

.table-hover tbody tr:hover {
    background-color: var(--et-primary-rgba);
}

.table-hover tbody tr:hover td {
    color: var(--et-text-dark);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.table-responsive {
    border-radius: 5px;
    box-shadow: var(--et-shadow-sm);
}

/* DataTables Styling */
.dataTables_wrapper {
    padding: 0;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 15px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 5px 12px;
    border-radius: 5px;
    margin: 0 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--et-gradient-primary) !important;
    border-color: var(--et-primary) !important;
    color: #fff !important;
}

/* ==========================================================================
   Forms - Enhanced
   ========================================================================== */
.form-control {
    border-radius: 5px;
    border: 1px solid #e6e8f0;
    font-size: 15px;
    padding: 10px 15px;
    transition: var(--et-transition);
    background: #fff;
}

.form-control:focus {
    border-color: var(--et-primary);
    box-shadow: 0 0 0 3px var(--et-primary-rgba);
}

.form-control-sm {
    padding: 6px 12px;
    font-size: 14px;
}

.form-group label {
    font-weight: 500;
    color: var(--et-text-dark);
    margin-bottom: 8px;
}

/* Custom Checkboxes/Radios */
.custom-control-input:checked ~ .custom-control-label::before {
    background: var(--et-gradient-primary);
    border-color: var(--et-primary);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px var(--et-primary-rgba);
}

.custom-control-label {
    cursor: pointer;
}

/* Range Sliders */
.custom-range {
    height: 8px;
}

.custom-range::-webkit-slider-thumb {
    background: var(--et-primary);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 87, 99, 0.3);
}

.custom-range::-webkit-slider-runnable-track {
    background: #e9ecef;
}

/* Select Dropdowns */
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23666' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 8px 10px;
    padding-right: 30px;
}

/* ==========================================================================
   Alerts - Enhanced
   ========================================================================== */
.alert {
    border-radius: 5px;
    border: none;
    padding: 15px 20px;
    display: flex;
    align-items: center;
}

.alert i {
    font-size: 20px;
    margin-right: 12px;
}

.alert-primary {
    background: var(--et-primary-rgba);
    color: var(--et-primary);
    border-left: 4px solid var(--et-primary);
}

.alert-success {
    background: rgba(67, 209, 135, 0.1);
    color: var(--et-success);
    border-left: 4px solid var(--et-success);
}

.alert-danger {
    background: rgba(249, 97, 109, 0.1);
    color: var(--et-danger);
    border-left: 4px solid var(--et-danger);
}

.alert-warning {
    background: rgba(247, 187, 77, 0.1);
    color: var(--et-warning);
    border-left: 4px solid var(--et-warning);
}

.alert-info {
    background: rgba(61, 155, 251, 0.1);
    color: var(--et-info);
    border-left: 4px solid var(--et-info);
}

/* ==========================================================================
   Tabs - Enhanced
   ========================================================================== */
.nav-tabs {
    border-bottom: 2px solid var(--et-border-color);
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--et-text-muted);
    font-weight: 500;
    padding: 12px 20px;
    transition: var(--et-transition);
    margin-bottom: -2px;
}

.nav-tabs .nav-link:hover {
    color: var(--et-primary);
    border-color: transparent;
    background: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--et-primary);
    border-bottom-color: var(--et-primary);
    background: transparent;
}

.nav-pills .nav-link {
    border-radius: 5px;
    color: var(--et-text-muted);
    font-weight: 500;
    padding: 10px 20px;
    transition: var(--et-transition);
}

.nav-pills .nav-link.active {
    background: var(--et-gradient-primary);
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 87, 99, 0.3);
}

/* ==========================================================================
   Current Section Header
   ========================================================================== */
.current-section-header {
    padding: 20px 25px;
    background: linear-gradient(135deg, #fff 0%, #f8f9fc 100%);
    border-radius: 8px;
    box-shadow: var(--et-shadow-sm);
    margin-bottom: 25px;
}

.current-section-header .badge {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 24px;
}

.current-section-header h5 {
    font-weight: 600;
    color: var(--et-text-dark);
    margin-bottom: 3px;
}

.current-section-header small {
    color: var(--et-text-muted);
    font-size: 13px;
}

/* ==========================================================================
   Settings Sidebar (Right Panel)
   ========================================================================== */
.infobar-settings-sidebar {
    background: #fff;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
}

.infobar-settings-sidebar-head {
    background: var(--et-gradient-dark);
    color: #fff;
    padding: 20px;
}

.infobar-settings-sidebar-head h4 {
    color: #fff;
    margin: 0;
    font-weight: 600;
}

.infobar-settings-sidebar h6 {
    font-size: 14px;
    font-weight: 600;
    color: var(--et-text-dark);
    margin-bottom: 15px;
}

.infobar-settings-sidebar .text-primary {
    color: var(--et-primary) !important;
}

.infobar-settings-sidebar .form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--et-text-muted);
    margin-bottom: 8px;
}

.infobar-settings-sidebar hr {
    border-color: var(--et-border-light);
}

/* Trading Mode Selector */
.trading-mode-selector .custom-control {
    padding: 12px 15px 12px 40px;
    background: var(--et-bg-light);
    border-radius: 5px;
    margin-bottom: 10px;
    transition: var(--et-transition);
}

.trading-mode-selector .custom-control:hover {
    background: var(--et-primary-rgba);
}

.trading-mode-selector .custom-control-input:checked ~ .custom-control-label {
    color: var(--et-primary);
}

.trading-mode-selector .custom-control-label {
    font-size: 14px;
    cursor: pointer;
}

.trading-mode-selector .custom-control-label strong {
    display: block;
    color: var(--et-text-dark);
    margin-bottom: 2px;
}

.trading-mode-selector .custom-control-label small {
    font-size: 12px;
    color: var(--et-text-muted);
}

/* UK Market Status */
.uk-market-status {
    background: linear-gradient(135deg, var(--et-bg-light) 0%, #fff 100%);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--et-border-light);
}

.uk-market-status span {
    font-size: 13px;
}

/* ==========================================================================
   Timeline / Agent Debate
   ========================================================================== */
.timeline-item {
    position: relative;
    padding-left: 65px;
    margin-bottom: 25px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 50px;
    bottom: -25px;
    width: 2px;
    background: linear-gradient(to bottom, #e9ecef, transparent);
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-badge {
    position: absolute;
    left: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.timeline-badge.bg-forecast { background: var(--et-gradient-primary); }
.timeline-badge.bg-trading { background: var(--et-gradient-success); }
.timeline-badge.bg-risk { background: var(--et-gradient-danger); }
.timeline-badge.bg-consensus { background: var(--et-gradient-warning); }

.timeline-content {
    background: #fff;
    padding: 18px 20px;
    border-radius: 8px;
    box-shadow: var(--et-shadow-sm);
    transition: var(--et-transition);
}

.timeline-content:hover {
    box-shadow: var(--et-shadow);
    transform: translateX(5px);
}

/* ==========================================================================
   Chat Interface
   ========================================================================== */
.chat-container {
    background: linear-gradient(180deg, var(--et-bg-light) 0%, #fff 100%);
    border-radius: 5px;
}

.chat-message {
    animation: fadeInUp 0.3s ease;
}

.chat-message.user-message .message-content {
    background: var(--et-gradient-primary);
    color: #fff;
    border-radius: 18px 18px 4px 18px;
    padding: 15px 20px;
    max-width: 80%;
    box-shadow: 0 4px 15px rgba(0, 87, 99, 0.2);
}

.chat-message.ai-message .message-content {
    background: #fff;
    color: var(--et-text-dark);
    border-radius: 18px 18px 18px 4px;
    padding: 15px 20px;
    max-width: 80%;
    box-shadow: var(--et-shadow-sm);
    border: 1px solid var(--et-border-light);
}

.chat-message .message-time {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 8px;
    display: block;
}

/* Suggested Questions */
.suggested-question {
    text-align: left;
    padding: 12px 15px;
    margin-bottom: 10px;
    border: 1px solid var(--et-border-light);
    background: #fff;
    transition: var(--et-transition);
}

.suggested-question:hover {
    border-color: var(--et-primary);
    background: var(--et-primary-rgba);
    transform: translateX(5px);
}

/* ==========================================================================
   Charts
   ========================================================================== */
.apexcharts-canvas {
    margin: 0 auto;
}

.apexcharts-tooltip {
    border-radius: 8px !important;
    box-shadow: var(--et-shadow) !important;
    border: none !important;
}

.apexcharts-tooltip-title {
    background: var(--et-bg-light) !important;
    border-bottom: 1px solid var(--et-border-light) !important;
    font-weight: 600 !important;
}

.apexcharts-legend-text {
    font-family: inherit !important;
    color: var(--et-text-muted) !important;
    font-size: 13px !important;
}

.apexcharts-xaxis-label,
.apexcharts-yaxis-label {
    fill: var(--et-text-muted);
}

/* Chart Container */
[id^="chart-"] {
    min-height: 300px;
}

/* ==========================================================================
   Border Left Accent Cards
   ========================================================================== */
.border-left-primary { border-left: 4px solid var(--et-primary) !important; }
.border-left-success { border-left: 4px solid var(--et-success) !important; }
.border-left-danger { border-left: 4px solid var(--et-danger) !important; }
.border-left-warning { border-left: 4px solid var(--et-warning) !important; }
.border-left-info { border-left: 4px solid var(--et-info) !important; }

/* ==========================================================================
   UK Market Specific Styles
   ========================================================================== */
/* Interconnector Flow Display */
.interconnector-flow {
    padding: 18px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--et-bg-light) 0%, #fff 100%);
    transition: var(--et-transition);
    border: 1px solid var(--et-border-light);
}

.interconnector-flow:hover {
    background: var(--et-primary-rgba);
    border-color: var(--et-primary);
    transform: translateY(-3px);
    box-shadow: var(--et-shadow-sm);
}

.interconnector-flow strong {
    color: var(--et-primary);
    font-size: 14px;
}

.interconnector-flow p {
    color: var(--et-text-dark);
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 0;
}

.interconnector-flow.importing p {
    color: var(--et-success);
}

.interconnector-flow.exporting p {
    color: var(--et-danger);
}

/* Settlement Period Badge */
.badge[id*="settlement-period"] {
    font-family: "Monaco", "Consolas", monospace;
    font-size: 12px;
    letter-spacing: 1px;
}

/* Price Display */
.price-gbp {
    font-family: "Monaco", "Consolas", monospace;
    font-weight: 600;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
/* Text Colors */
.text-primary { color: var(--et-primary) !important; }
.text-success { color: var(--et-success) !important; }
.text-danger { color: var(--et-danger) !important; }
.text-warning { color: var(--et-warning) !important; }
.text-info { color: var(--et-info) !important; }
.text-muted { color: var(--et-text-muted) !important; }
.text-dark { color: var(--et-text-dark) !important; }
.text-white { color: #fff !important; }

/* Font Sizes */
.font-12 { font-size: 12px; }
.font-14 { font-size: 14px; }
.font-16 { font-size: 16px; }
.font-18 { font-size: 18px; }
.font-20 { font-size: 20px; }
.font-24 { font-size: 24px; }
.font-28 { font-size: 28px; }
.font-35 { font-size: 35px; }
.font-50 { font-size: 50px; }

/* Font Weights */
.font-weight-medium { font-weight: 500; }
.font-weight-semibold { font-weight: 600; }

/* Spacing */
.m-b-5 { margin-bottom: 5px; }
.m-b-10 { margin-bottom: 10px; }
.m-b-15 { margin-bottom: 15px; }
.m-b-20 { margin-bottom: 20px; }
.m-b-30 { margin-bottom: 30px; }

.m-t-5 { margin-top: 5px; }
.m-t-10 { margin-top: 10px; }
.m-t-15 { margin-top: 15px; }
.m-t-20 { margin-top: 20px; }
.m-t-30 { margin-top: 30px; }

.p-t-10 { padding-top: 10px; }
.p-t-15 { padding-top: 15px; }
.p-t-20 { padding-top: 20px; }

.p-b-10 { padding-bottom: 10px; }
.p-b-15 { padding-bottom: 15px; }
.p-b-20 { padding-bottom: 20px; }

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.spin { animation: spin 1s linear infinite; }
.pulse { animation: pulse 2s ease-in-out infinite; }
.fade-in { animation: fadeIn 0.3s ease; }
.fade-in-up { animation: fadeInUp 0.3s ease; }

/* Loading State */
.loading {
    position: relative;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid var(--et-border-light);
    border-top-color: var(--et-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ==========================================================================
   Scrollbar Styling
   ========================================================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--et-secondary);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--et-primary);
}

/* Dark sidebar scrollbar */
.navigationbar::-webkit-scrollbar {
    width: 4px;
}

.navigationbar::-webkit-scrollbar-track {
    background: transparent;
}

.navigationbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.navigationbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   Tooltip & Popover Styling
   ========================================================================== */
.tooltip-inner {
    background: var(--et-text-dark);
    border-radius: 5px;
    padding: 8px 12px;
    font-size: 13px;
}

.popover {
    border: none;
    box-shadow: var(--et-shadow);
    border-radius: 8px;
}

.popover-header {
    background: var(--et-bg-light);
    border-bottom: 1px solid var(--et-border-light);
    font-weight: 600;
}

/* ==========================================================================
   Dropdown Menus
   ========================================================================== */
.dropdown-menu {
    border: none;
    box-shadow: var(--et-shadow);
    border-radius: 8px;
    padding: 10px 0;
    animation: fadeInUp 0.2s ease;
}

.dropdown-item {
    padding: 10px 20px;
    font-size: 14px;
    color: var(--et-text-muted);
    transition: var(--et-transition-fast);
}

.dropdown-item:hover {
    background: var(--et-primary-rgba);
    color: var(--et-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--et-primary);
    color: #fff;
}

/* ==========================================================================
   Modal Styling
   ========================================================================== */
.modal-content {
    border: none;
    border-radius: 10px;
    box-shadow: var(--et-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--et-border-light);
    padding: 20px 25px;
}

.modal-title {
    font-weight: 600;
    color: var(--et-text-dark);
}

.modal-body {
    padding: 25px;
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

.modal-footer {
    border-top: 1px solid var(--et-border-light);
    padding: 15px 25px;
}

/* ==========================================================================
   List Groups
   ========================================================================== */
.list-group-item {
    border: none;
    border-bottom: 1px solid var(--et-border-light);
    padding: 15px 20px;
    transition: var(--et-transition-fast);
}

.list-group-item:last-child {
    border-bottom: none;
}

.list-group-item:hover {
    background: var(--et-bg-light);
}

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

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 1200px) {
    .contentbar {
        padding: 20px;
    }
}

@media (max-width: 992px) {
    .rightbar {
        width: 100%;
        margin-left: 0;
    }

    .leftbar {
        transform: translateX(-100%);
    }

    .leftbar.show {
        transform: translateX(0);
    }

    .current-section-header {
        padding: 15px 20px;
    }
}

@media (max-width: 768px) {
    .contentbar {
        padding: 15px;
    }

    .current-section-header {
        padding: 12px 15px;
    }

    .current-section-header .badge {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .card-body {
        padding: 15px;
    }

    .stat-card h4,
    .metric-card h4 {
        font-size: 24px;
    }

    .badge.font-35 {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    /* Stack interconnector flows */
    .interconnector-flow {
        margin-bottom: 10px;
    }

    /* Mobile-friendly buttons */
    .btn {
        padding: 10px 18px;
    }

    /* Adjust timeline */
    .timeline-item {
        padding-left: 55px;
    }

    .timeline-badge {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    h1, .h1 { font-size: 28px; }
    h2, .h2 { font-size: 24px; }
    h3, .h3 { font-size: 20px; }
    h4, .h4 { font-size: 18px; }

    .card-header {
        padding: 12px 15px;
    }

    .table th,
    .table td {
        padding: 10px 8px;
        font-size: 13px;
    }

    .btn-block {
        margin-bottom: 10px;
    }

    .chat-message .message-content {
        max-width: 90%;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    .leftbar,
    .topbar,
    .infobar-settings-sidebar,
    .btn,
    .no-print {
        display: none !important;
    }

    .rightbar {
        width: 100%;
        margin-left: 0;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    body {
        background: #fff;
    }
}

/* ==========================================================================
   Loading Overlay
   ========================================================================== */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#loading-overlay .loading-content {
    text-align: center;
    padding: 40px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Toast Notifications
   ========================================================================== */
#toast-container {
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
}

.toast-notification {
    min-width: 300px;
    max-width: 450px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    margin-bottom: 10px;
    animation: slideInRight 0.3s ease;
    overflow: hidden;
}

.toast-notification.toast-success {
    border-left: 4px solid var(--et-success);
}

.toast-notification.toast-error {
    border-left: 4px solid var(--et-danger);
}

.toast-notification.toast-warning {
    border-left: 4px solid var(--et-warning);
}

.toast-notification.toast-info {
    border-left: 4px solid var(--et-info);
}

.toast-notification .toast-header {
    padding: 12px 15px;
    background: transparent;
    border-bottom: 1px solid var(--et-border-light);
}

.toast-notification .toast-body {
    padding: 12px 15px;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ==========================================================================
   Skeleton Loading Placeholders
   ========================================================================== */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-text.large {
    height: 24px;
}

.skeleton-chart {
    height: 300px;
}

.skeleton-card {
    height: 120px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   Empty States
   ========================================================================== */
.empty-state {
    padding: 60px 20px;
    text-align: center;
    color: var(--et-text-muted);
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-state h5 {
    margin-bottom: 10px;
    color: var(--et-text-body);
}

.empty-state p {
    max-width: 300px;
    margin: 0 auto;
}

/* ==========================================================================
   Toast Container Position
   ========================================================================== */
#toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 99998;
    max-width: 450px;
}

/* ==========================================================================
   Data Refresh Indicators
   ========================================================================== */
.refresh-indicator {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: var(--et-text-muted);
    margin-left: 10px;
}

.refresh-indicator .refresh-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--et-success);
    margin-right: 6px;
    animation: pulse 2s infinite;
}

.refresh-indicator.stale .refresh-dot {
    background: var(--et-warning);
}

.refresh-indicator.error .refresh-dot {
    background: var(--et-danger);
    animation: none;
}

/* Refresh button in card headers */
.btn-refresh {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    background: transparent;
    color: var(--et-text-muted);
    border: 1px solid var(--et-border-light);
    transition: var(--et-transition);
}

.btn-refresh:hover {
    background: var(--et-primary-rgba);
    color: var(--et-primary);
    border-color: var(--et-primary);
}

.btn-refresh.refreshing {
    pointer-events: none;
}

.btn-refresh.refreshing i {
    animation: spin 1s linear infinite;
}

/* ==========================================================================
   Keyboard Help Styling
   ========================================================================== */
.keyboard-help {
    text-align: left;
}

.keyboard-help table {
    width: 100%;
}

.keyboard-help td {
    padding: 8px 0;
    border-bottom: 1px solid var(--et-border-light);
}

.keyboard-help tr:last-child td {
    border-bottom: none;
}

.keyboard-help kbd {
    background: var(--et-bg-light);
    border: 1px solid var(--et-border-color);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    color: var(--et-text-dark);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* ==========================================================================
   Card Header Actions
   ========================================================================== */
.card-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-header .card-header-actions {
    margin-left: auto;
}

/* ==========================================================================
   Live Data Indicator
   ========================================================================== */
.live-indicator {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(67, 209, 135, 0.1);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--et-success);
}

.live-indicator::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--et-success);
    margin-right: 6px;
    animation: pulse 1.5s infinite;
}

.live-indicator.paused {
    background: rgba(150, 163, 182, 0.1);
    color: var(--et-secondary);
}

.live-indicator.paused::before {
    background: var(--et-secondary);
    animation: none;
}

/* ==========================================================================
   Time Ago Display
   ========================================================================== */
.time-ago {
    font-size: 12px;
    color: var(--et-text-muted);
}

.time-ago.recent {
    color: var(--et-success);
}

.time-ago.stale {
    color: var(--et-warning);
}

.time-ago.very-stale {
    color: var(--et-danger);
}

/* ==========================================================================
   Connection Status Enhanced
   ========================================================================== */
#connection-badge {
    transition: var(--et-transition);
}

#connection-badge.badge-danger-inverse {
    background: rgba(249, 97, 109, 0.15);
    color: var(--et-danger);
}

#connection-badge.badge-warning-inverse {
    background: rgba(247, 187, 77, 0.15);
    color: #856404;
}

/* ==========================================================================
   Footer Enhancements
   ========================================================================== */
.footerbar .footer {
    padding: 0 25px;
    height: 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 100%;
    gap: 16px;
}

.footer-zone {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-zone-left {
    justify-self: start;
}

.footer-zone-center {
    justify-self: center;
}

.footer-zone-right {
    justify-self: end;
}

.footer-app-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--et-primary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.footer-status {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--et-success);
    font-size: 12px;
}

.footer-separator {
    color: var(--et-border-light);
    font-size: 12px;
}

.footer-time {
    font-size: 12px;
    font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
    color: var(--et-text-muted);
    letter-spacing: 0.3px;
}

.btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--et-text-muted);
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 4px;
    transition: var(--et-transition);
}

.btn-ghost:hover {
    background: rgba(0, 87, 99, 0.06);
    color: var(--et-primary);
    border-color: transparent;
}

.footer-btn {
    font-size: 12px;
    padding: 3px 10px;
    line-height: 1.4;
}

.footer-kbd {
    display: inline-block;
    padding: 1px 5px;
    font-size: 10px;
    font-family: 'SF Mono', 'Consolas', monospace;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

.footerbar a {
    color: var(--et-text-muted);
    transition: var(--et-transition);
}

.footerbar a:hover {
    color: var(--et-primary);
}

@media (max-width: 768px) {
    .footer-zone-left .badge,
    .footer-kbd {
        display: none !important;
    }
}

/* ==========================================================================
   Tooltip Enhancements for Metrics
   ========================================================================== */
.card[data-toggle="tooltip"] {
    cursor: help;
}

.tooltip.show {
    opacity: 1;
}

.tooltip .tooltip-inner {
    max-width: 280px;
    text-align: left;
    padding: 10px 14px;
    line-height: 1.5;
}

/* ==========================================================================
   Card Entrance Animations
   ========================================================================== */
.card.animate-in {
    animation: cardSlideIn 0.5s ease forwards;
    opacity: 0;
}

.card.animate-in:nth-child(1) { animation-delay: 0.05s; }
.card.animate-in:nth-child(2) { animation-delay: 0.1s; }
.card.animate-in:nth-child(3) { animation-delay: 0.15s; }
.card.animate-in:nth-child(4) { animation-delay: 0.2s; }
.card.animate-in:nth-child(5) { animation-delay: 0.25s; }
.card.animate-in:nth-child(6) { animation-delay: 0.3s; }

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

/* Row stagger animations */
.row.animate-row .col-md-3:nth-child(1) .card,
.row.animate-row .col-lg-3:nth-child(1) .card { animation-delay: 0.05s; }
.row.animate-row .col-md-3:nth-child(2) .card,
.row.animate-row .col-lg-3:nth-child(2) .card { animation-delay: 0.1s; }
.row.animate-row .col-md-3:nth-child(3) .card,
.row.animate-row .col-lg-3:nth-child(3) .card { animation-delay: 0.15s; }
.row.animate-row .col-md-3:nth-child(4) .card,
.row.animate-row .col-lg-3:nth-child(4) .card { animation-delay: 0.2s; }

/* ==========================================================================
   Animated Number Counters
   ========================================================================== */
.counter-value {
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
}

.counter-value.counting {
    color: var(--et-primary);
}

.counter-change {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.counter-change.positive {
    background: rgba(67, 209, 135, 0.15);
    color: var(--et-success);
}

.counter-change.negative {
    background: rgba(249, 97, 109, 0.15);
    color: var(--et-danger);
}

.counter-change i {
    font-size: 12px;
    margin-right: 4px;
}

/* FAB removed — replaced by inline footer actions */

/* ==========================================================================
   Gradient Backgrounds
   ========================================================================== */
.bg-gradient-primary {
    background: var(--et-gradient-primary) !important;
}

.bg-gradient-success {
    background: var(--et-gradient-success) !important;
}

.bg-gradient-danger {
    background: var(--et-gradient-danger) !important;
}

.bg-gradient-warning {
    background: var(--et-gradient-warning) !important;
}

.bg-gradient-info {
    background: var(--et-gradient-info) !important;
}

/* Agent Debate Trigger Button */
#btn-trigger-debate-main {
    font-weight: 600;
    padding: 12px 28px;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

#btn-trigger-debate-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

#btn-trigger-debate-main:disabled {
    opacity: 0.8;
    transform: none;
}

/* ==========================================================================
   Market Clock Widget - Multi-Timezone
   ========================================================================== */
/* Minimal market clock strip */
.market-clock {
    display: flex;
    align-items: center;
    gap: 0;
    background: #1a1a2e;
    border-radius: 6px;
    padding: 6px 14px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 12px;
    font-size: 12px;
    font-family: "Monaco", "Consolas", "Courier New", monospace;
    line-height: 1;
    overflow-x: auto;
    white-space: nowrap;
}

.market-clock .mc-item { display: inline-flex; align-items: center; gap: 4px; }
.market-clock .mc-val { font-weight: 600; color: #fff; }
.market-clock .mc-lbl { font-size: 10px; text-transform: uppercase; opacity: 0.5; letter-spacing: 0.5px; }
.market-clock .mc-sep { margin: 0 8px; opacity: 0.2; font-weight: 300; }
.market-clock .mc-uk .mc-val { font-size: 14px; letter-spacing: 1px; }
.market-clock .mc-sp { background: rgba(0, 87, 99, 0.5); padding: 2px 6px; border-radius: 3px; font-size: 11px; }
.market-clock .mc-right { margin-left: auto; }
.market-clock .mc-date { font-size: 11px; opacity: 0.4; }
.market-clock .mc-val.urgent { color: #f9616d; animation: pulse 1s infinite; }
.market-clock .mc-val.warning { color: #f7bb4d; }

@media (max-width: 768px) {
    .market-clock { font-size: 11px; padding: 5px 10px; }
    .market-clock .mc-sep { margin: 0 5px; }
    .market-clock .mc-uk .mc-val { font-size: 12px; }
}

/* ==========================================================================
   Sparkline Mini Charts
   ========================================================================== */
.sparkline-container {
    height: 40px;
    width: 100%;
    margin-top: 10px;
}

.metric-card .sparkline-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    opacity: 0.3;
}

.metric-card:hover .sparkline-container {
    opacity: 0.5;
}

/* ==========================================================================
   Fullscreen Mode
   ========================================================================== */
.fullscreen-mode .leftbar,
.fullscreen-mode .topbar,
.fullscreen-mode .topbar-mobile,
.fullscreen-mode .footerbar {
    display: none !important;
}

.fullscreen-mode .rightbar {
    width: 100% !important;
    margin-left: 0 !important;
}

.fullscreen-mode .contentbar {
    padding: 15px;
}

.fullscreen-exit-btn {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 99999;
    background: var(--et-gradient-dark);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    display: none;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.fullscreen-mode .fullscreen-exit-btn {
    display: flex;
}

/* ==========================================================================
   Demo Tour Overlay
   ========================================================================== */
.tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99990;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.tour-overlay.active {
    opacity: 1;
    visibility: visible;
}

.tour-highlight {
    position: absolute;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    z-index: 99991;
    transition: all 0.3s ease;
}

.tour-tooltip {
    position: fixed;
    background: #fff;
    border-radius: 12px;
    padding: 20px 25px;
    max-width: 400px;
    min-width: 340px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 99992;
    animation: tooltipBounce 0.4s ease;
}

@keyframes tooltipBounce {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}

.tour-tooltip h5 {
    margin-bottom: 10px;
    color: var(--et-text-dark);
    font-weight: 600;
}

.tour-tooltip p {
    color: var(--et-text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

.tour-tooltip .tour-progress {
    display: flex;
    gap: 6px;
    margin-bottom: 15px;
}

.tour-tooltip .tour-progress .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e0e0e0;
}

.tour-tooltip .tour-progress .dot.active {
    background: var(--et-primary);
}

.tour-tooltip .tour-progress .dot.completed {
    background: var(--et-success);
}

.tour-tooltip .tour-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.tour-tooltip .btn-tour-skip {
    background: transparent;
    border: none;
    color: var(--et-text-muted);
    cursor: pointer;
    padding: 8px 16px;
}

.tour-tooltip .btn-tour-next {
    background: var(--et-gradient-primary);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tour-tooltip .btn-tour-next:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 87, 99, 0.3);
}

.tour-tooltip .btn-tour-prev {
    background: var(--et-bg-light);
    color: var(--et-text-muted);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.tour-tooltip .btn-tour-prev:hover {
    background: var(--et-primary-rgba);
    color: var(--et-primary);
}

.tour-tooltip .tour-nav {
    display: flex;
    align-items: center;
}

/* ==========================================================================
   Quick Stats Banner
   ========================================================================== */
.quick-stats-banner {
    background: linear-gradient(135deg, var(--et-primary) 0%, var(--et-primary-light) 100%);
    border-radius: 12px;
    padding: 20px 25px;
    margin-bottom: 25px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    box-shadow: 0 4px 20px rgba(0, 87, 99, 0.3);
}

.quick-stats-banner .stat-item {
    text-align: center;
    min-width: 120px;
}

.quick-stats-banner .stat-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.quick-stats-banner .stat-label {
    font-size: 12px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
}

.quick-stats-banner .stat-change {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: #fff;
}

.quick-stats-banner .stat-change.up { background: rgba(67, 209, 135, 0.3); }
.quick-stats-banner .stat-change.down { background: rgba(249, 97, 109, 0.3); }

/* ==========================================================================
   Notification Bell with Alerts
   ========================================================================== */
.notification-panel {
    position: fixed;
    top: 70px;
    right: -400px;
    width: 380px;
    height: calc(100vh - 90px);
    background: #fff;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
    z-index: 9980;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    border-radius: 12px 0 0 12px;
}

.notification-panel.open {
    right: 0;
}

.notification-panel-header {
    padding: 20px;
    border-bottom: 1px solid var(--et-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-panel-header h5 {
    margin: 0;
    font-weight: 600;
}

.notification-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.notification-item {
    display: flex;
    gap: 12px;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: var(--et-bg-light);
    transition: all 0.2s ease;
    cursor: pointer;
}

.notification-item:hover {
    background: var(--et-primary-rgba);
}

.notification-item.unread {
    background: #fff;
    border-left: 3px solid var(--et-primary);
}

.notification-item .icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
}

.notification-item .icon.price { background: var(--et-gradient-primary); }
.notification-item .icon.alert { background: var(--et-gradient-danger); }
.notification-item .icon.success { background: var(--et-gradient-success); }
.notification-item .icon.warning { background: var(--et-gradient-warning); }
.notification-item .icon.info { background: var(--et-gradient-info); }

.notification-item .content {
    flex: 1;
    min-width: 0;
}

.notification-item .title {
    font-weight: 500;
    color: var(--et-text-dark);
    margin-bottom: 4px;
}

.notification-item .message {
    font-size: 13px;
    color: var(--et-text-muted);
    line-height: 1.4;
}

.notification-item .time {
    font-size: 11px;
    color: var(--et-text-muted);
    margin-top: 6px;
}

/* Pulsing notification badge */
@keyframes notificationPulse {
    0% { box-shadow: 0 0 0 0 rgba(249, 97, 109, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(249, 97, 109, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 97, 109, 0); }
}

.notification-badge-pulse {
    animation: notificationPulse 2s infinite;
}

/* ==========================================================================
   Glassmorphism Effects
   ========================================================================== */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   Gradient Text
   ========================================================================== */
.gradient-text {
    background: var(--et-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================================================
   Hover Lift Effect
   ========================================================================== */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Floating Action Button (FAB)
   ========================================================================== */
.fab-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: var(--et-zindex-fab);
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 8px;
}

.fab-main {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--et-primary, #005763);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fab-main:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
.fab-main.open { transform: rotate(45deg); }

.fab-actions {
    display: none;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.fab-container.open .fab-actions { display: flex; }

.fab-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 24px;
    background: #fff;
    color: var(--et-primary, #005763);
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    transition: background 0.15s;
}

.fab-action:hover { background: #f0f0f0; }
.fab-action i { font-size: 16px; }

/* ==========================================================================
   Print Styles Enhancement
   ========================================================================== */
@media print {
    .fab-container,
    .tour-overlay,
    .notification-panel,
    .fullscreen-exit-btn {
        display: none !important;
    }

    .quick-stats-banner {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ==========================================================================
   AI Confidence Indicator
   ========================================================================== */
.ai-confidence-indicator {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(0, 87, 99, 0.1) 0%, rgba(67, 209, 135, 0.1) 100%);
    padding: 8px 16px;
    border-radius: 25px;
    margin-left: 15px;
}

.ai-confidence-indicator .ai-pulse {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--et-success);
    margin-right: 10px;
    position: relative;
}

.ai-confidence-indicator .ai-pulse::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    background: var(--et-success);
    opacity: 0.4;
    animation: aiPulse 2s ease-out infinite;
}

@keyframes aiPulse {
    0% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}

.ai-confidence-indicator .confidence-value {
    font-weight: 600;
    color: var(--et-text-dark);
    margin-right: 5px;
}

.ai-confidence-indicator .confidence-label {
    font-size: 12px;
    color: var(--et-text-muted);
}

.ai-confidence-indicator.high .ai-pulse { background: var(--et-success); }
.ai-confidence-indicator.high .ai-pulse::before { background: var(--et-success); }
.ai-confidence-indicator.medium .ai-pulse { background: var(--et-warning); }
.ai-confidence-indicator.medium .ai-pulse::before { background: var(--et-warning); }
.ai-confidence-indicator.low .ai-pulse { background: var(--et-danger); }
.ai-confidence-indicator.low .ai-pulse::before { background: var(--et-danger); }

/* ==========================================================================
   Trend Arrows with Animation
   ========================================================================== */
.trend-indicator {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 500;
}

.trend-indicator.up {
    background: rgba(67, 209, 135, 0.15);
    color: var(--et-success);
}

.trend-indicator.down {
    background: rgba(249, 97, 109, 0.15);
    color: var(--et-danger);
}

.trend-indicator i {
    margin-right: 5px;
    animation: trendBounce 1s ease infinite;
}

.trend-indicator.up i {
    animation-name: trendBounceUp;
}

.trend-indicator.down i {
    animation-name: trendBounceDown;
}

@keyframes trendBounceUp {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes trendBounceDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

/* ==========================================================================
   Status Pill Enhancement
   ========================================================================== */
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.status-pill .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
}

.status-pill.active .status-dot {
    background: var(--et-success);
    animation: statusPulse 1.5s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ==========================================================================
   Data Quality Indicators
   ========================================================================== */
.data-quality-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-quality-badge.live {
    background: rgba(67, 209, 135, 0.15);
    color: var(--et-success);
}

.data-quality-badge.live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    background: var(--et-success);
    animation: pulse 2s infinite;
}

/* ==========================================================================
   Glowing Border Effect
   ========================================================================== */
.glow-primary {
    box-shadow: 0 0 20px rgba(0, 87, 99, 0.3);
}

.glow-success {
    box-shadow: 0 0 20px rgba(67, 209, 135, 0.3);
}

.glow-animated {
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 87, 99, 0.2); }
    50% { box-shadow: 0 0 25px rgba(0, 87, 99, 0.4); }
}

/* ==========================================================================
   Demo Banner
   ========================================================================== */
.demo-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 15px 25px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.demo-banner .banner-content {
    display: flex;
    align-items: center;
}

.demo-banner .banner-icon {
    margin-right: 15px;
    opacity: 0.9;
}

.demo-banner .gambit-icon.banner-icon {
    width: 44px;
    height: 44px;
    font-size: 26px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

.demo-banner h5 {
    margin: 0 0 3px 0;
    font-weight: 600;
    color: #fff;
}

.demo-banner p {
    margin: 0;
    font-size: 13px;
    opacity: 0.85;
    color: #fff;
}

.demo-banner .btn-start-tour {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.demo-banner .btn-start-tour:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* ==========================================================================
   Shimmer Loading Effect (uses skeleton-loading animation)
   ========================================================================== */
.shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

/* ==========================================================================
   Metric Card Enhancements
   ========================================================================== */
.metric-card-enhanced {
    position: relative;
    overflow: hidden;
}

.metric-card-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, var(--et-primary-rgba) 0%, transparent 70%);
    opacity: 0.5;
    pointer-events: none;
}

.metric-card-enhanced:hover::before {
    opacity: 0.8;
}

/* ==========================================================================
   Onboarding Welcome Modal
   ========================================================================== */
.onboarding-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99995;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.onboarding-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.onboarding-modal {
    background: #fff;
    border-radius: 20px;
    max-width: 520px;
    width: 90%;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.onboarding-modal-overlay.active .onboarding-modal {
    transform: scale(1) translateY(0);
}

.onboarding-modal-header {
    background: linear-gradient(135deg, var(--et-primary) 0%, var(--et-primary-light) 100%);
    padding: 40px 35px 35px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.onboarding-modal-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.onboarding-logo {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 36px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: logoPulse 2s ease-in-out infinite;
    color: #fff;
}

.onboarding-logo .gambit-icon {
    width: 60px;
    height: 60px;
    font-size: 36px;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: none;
    border-radius: 14px;
}

@keyframes logoPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
    50% { transform: scale(1.05); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); }
}

.onboarding-modal-header h3 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
}

.onboarding-modal-header .subtitle {
    margin: 0;
    opacity: 0.85;
    font-size: 14px;
    color: #fff;
}

.onboarding-modal-body {
    padding: 30px 35px;
}

.onboarding-modal-body > p {
    color: var(--et-text-muted);
    line-height: 1.7;
    margin-bottom: 25px;
    font-size: 15px;
}

.onboarding-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 25px;
}

.onboarding-feature {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    background: var(--et-bg-light);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.onboarding-feature:hover {
    background: var(--et-primary-rgba);
    transform: translateX(5px);
}

.onboarding-feature i {
    width: 36px;
    height: 36px;
    background: var(--et-gradient-primary);
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 16px;
}

.onboarding-feature span {
    font-size: 13px;
    font-weight: 500;
    color: var(--et-text-dark);
}

.tour-question {
    text-align: center;
    color: var(--et-text-dark);
    font-weight: 500;
    font-size: 16px;
    margin: 0;
    padding-top: 15px;
    border-top: 1px solid var(--et-border-light);
}

.onboarding-modal-footer {
    padding: 20px 35px 30px;
    display: flex;
    gap: 15px;
    justify-content: center;
}

.btn-onboarding-skip {
    background: transparent;
    border: 2px solid var(--et-border-color);
    color: var(--et-text-muted);
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 15px;
}

.btn-onboarding-skip:hover {
    border-color: var(--et-secondary);
    color: var(--et-text-dark);
}

.btn-onboarding-start {
    background: var(--et-gradient-primary);
    color: #fff;
    border: none;
    padding: 14px 32px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 87, 99, 0.3);
    display: flex;
    align-items: center;
    font-size: 15px;
}

.btn-onboarding-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 87, 99, 0.4);
}

.btn-onboarding-start i {
    margin-right: 8px;
}

/* Responsive Onboarding Modal */
@media (max-width: 576px) {
    .onboarding-modal {
        max-width: 95%;
        margin: 10px;
    }

    .onboarding-modal-header {
        padding: 30px 20px 25px;
    }

    .onboarding-modal-header h3 {
        font-size: 20px;
    }

    .onboarding-logo {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    .onboarding-modal-body {
        padding: 20px;
    }

    .onboarding-features {
        grid-template-columns: 1fr;
    }

    .onboarding-modal-footer {
        padding: 15px 20px 25px;
        flex-direction: column;
    }

    .btn-onboarding-skip,
    .btn-onboarding-start {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Enhanced Tour Step Educational Content
   ========================================================================== */
.tour-tooltip-enhanced {
    max-width: 420px;
}

.tour-tooltip .tour-icon {
    width: 50px;
    height: 50px;
    background: var(--et-gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    color: #fff;
    font-size: 24px;
}

.tour-tooltip .tour-tip {
    background: rgba(67, 209, 135, 0.1);
    border-left: 3px solid var(--et-success);
    padding: 10px 15px;
    margin: 15px 0;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    color: var(--et-text-body);
}

.tour-tooltip .tour-tip strong {
    color: var(--et-success);
}

.tour-tooltip .tour-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 12px;
    background: var(--et-bg-light);
    border-radius: 6px;
    font-size: 12px;
}

.tour-tooltip .tour-shortcut kbd {
    background: #fff;
    border: 1px solid var(--et-border-color);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   SIMULATOR TOUR - Comprehensive Educational Tour Styles
   ========================================================================== */

/* Simulator Welcome Modal - Specific styles */
.simulator-modal {
    max-width: 560px;
}

.simulator-tour-note {
    background: linear-gradient(135deg, rgba(0, 87, 99, 0.08) 0%, rgba(0, 195, 188, 0.08) 100%);
    border: 1px solid rgba(0, 87, 99, 0.2);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.5;
}

.simulator-tour-note i {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Simulator Tour Overlay */
.simulator-tour-overlay {
    background: rgba(0, 0, 0, 0.1);
}

/* Simulator Tooltip - Enhanced for education */
.simulator-tooltip {
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 25px 28px;
}

.simulator-tooltip::-webkit-scrollbar {
    width: 6px;
}

.simulator-tooltip::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.simulator-tooltip::-webkit-scrollbar-thumb {
    background: var(--et-primary);
    border-radius: 3px;
}

/* Step Counter */
.tour-step-counter {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--et-bg-light);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    color: var(--et-text-muted);
    font-weight: 500;
}

/* Glossary Section */
.tour-glossary {
    background: linear-gradient(135deg, rgba(0, 87, 99, 0.06) 0%, rgba(0, 195, 188, 0.06) 100%);
    border: 1px solid rgba(0, 87, 99, 0.15);
    border-radius: 10px;
    padding: 15px;
    margin: 15px 0;
}

.glossary-header {
    font-weight: 600;
    color: var(--et-primary);
    margin-bottom: 12px;
    font-size: 13px;
    display: flex;
    align-items: center;
}

.glossary-content {
    font-size: 13px;
    line-height: 1.6;
}

.glossary-term {
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 87, 99, 0.1);
}

.glossary-term:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.glossary-term strong {
    color: var(--et-primary-dark);
    font-weight: 600;
}

/* Example Section */
.tour-example {
    background: linear-gradient(135deg, rgba(30, 136, 229, 0.08) 0%, rgba(100, 181, 246, 0.08) 100%);
    border: 1px solid rgba(30, 136, 229, 0.2);
    border-left: 4px solid #1e88e5;
    border-radius: 0 10px 10px 0;
    padding: 15px;
    margin: 15px 0;
}

.example-header {
    font-weight: 600;
    color: #1565c0;
    margin-bottom: 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
}

.example-content {
    font-size: 13px;
    line-height: 1.6;
    color: #1a237e;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

/* Consequence Section */
.tour-consequence {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.08) 0%, rgba(255, 193, 7, 0.08) 100%);
    border: 1px solid rgba(255, 152, 0, 0.25);
    border-left: 4px solid #ff9800;
    border-radius: 0 10px 10px 0;
    padding: 15px;
    margin: 15px 0;
}

.consequence-header {
    font-weight: 600;
    color: #e65100;
    margin-bottom: 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
}

.consequence-content {
    font-size: 13px;
    line-height: 1.6;
    color: #bf360c;
}

/* Key Takeaways Section */
.tour-takeaways {
    background: linear-gradient(135deg, rgba(67, 209, 135, 0.1) 0%, rgba(126, 232, 175, 0.1) 100%);
    border: 1px solid rgba(67, 209, 135, 0.25);
    border-radius: 12px;
    padding: 18px;
    margin: 18px 0;
}

.takeaways-header {
    font-weight: 600;
    color: #2e7d32;
    margin-bottom: 12px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.tour-takeaways ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.tour-takeaways li {
    position: relative;
    padding: 6px 0 6px 24px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--et-text-body);
}

.tour-takeaways li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #43d187;
    font-weight: bold;
}

/* Simulator Tooltip Enhanced Tip */
.simulator-tooltip .tour-tip {
    background: rgba(67, 209, 135, 0.12);
    border-left: 4px solid var(--et-success);
    padding: 12px 16px;
    margin: 15px 0;
    border-radius: 0 10px 10px 0;
    font-size: 13px;
}

.simulator-tooltip .tour-tip i {
    color: var(--et-success);
}

/* Progress dots for simulator tour */
.simulator-tour-overlay .tour-progress {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    max-width: 100%;
}

.simulator-tour-overlay .tour-progress .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 87, 99, 0.2);
    transition: all 0.3s ease;
}

.simulator-tour-overlay .tour-progress .dot.active {
    width: 24px;
    border-radius: 4px;
    background: var(--et-primary);
}

.simulator-tour-overlay .tour-progress .dot.completed {
    background: var(--et-success);
}

/* Navigation buttons for simulator tour */
.simulator-tooltip .tour-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--et-border-color);
}

.simulator-tooltip .tour-nav {
    display: flex;
    gap: 10px;
}

.simulator-tooltip .btn-tour-prev,
.simulator-tooltip .btn-tour-next {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.simulator-tooltip .btn-tour-prev {
    background: var(--et-bg-light);
    border: 1px solid var(--et-border-color);
    color: var(--et-text-body);
}

.simulator-tooltip .btn-tour-prev:hover {
    background: #e9ecef;
}

.simulator-tooltip .btn-tour-next {
    background: var(--et-gradient-primary);
    border: none;
    color: #fff;
}

.simulator-tooltip .btn-tour-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 87, 99, 0.3);
}

.simulator-tooltip .btn-tour-skip {
    background: transparent;
    border: none;
    color: var(--et-text-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 8px 12px;
}

.simulator-tooltip .btn-tour-skip:hover {
    color: var(--et-text-body);
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .simulator-tooltip {
        max-width: calc(100vw - 40px);
        margin: 20px;
        max-height: 70vh;
    }

    .tour-glossary,
    .tour-example,
    .tour-consequence,
    .tour-takeaways {
        padding: 12px;
    }

    .simulator-tooltip .tour-actions {
        flex-direction: column;
        gap: 12px;
    }

    .simulator-tooltip .tour-nav {
        width: 100%;
        justify-content: space-between;
    }

    .simulator-tooltip .btn-tour-skip {
        order: 1;
    }
}

/* Animation for highlight on simulator tour */
.simulator-tour-overlay .tour-highlight {
    border: 3px solid var(--et-primary);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.1),
                0 0 30px rgba(0, 195, 188, 0.5),
                inset 0 0 20px rgba(0, 195, 188, 0.2);
    animation: highlightPulse 2s ease-in-out infinite;
}

@keyframes highlightPulse {
    0%, 100% {
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.1),
                    0 0 30px rgba(0, 195, 188, 0.5),
                    inset 0 0 20px rgba(0, 195, 188, 0.2);
    }
    50% {
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.1),
                    0 0 50px rgba(0, 195, 188, 0.7),
                    inset 0 0 30px rgba(0, 195, 188, 0.3);
    }
}

/* Simulator Tour Button */
#btn-sim-tour {
    position: relative;
    border-width: 2px;
    font-weight: 500;
}

#btn-sim-tour:hover {
    background-color: var(--et-info);
    color: #fff;
}

/* Pulse animation for first-time visitors */
#btn-sim-tour.highlight-tour {
    animation: tourButtonPulse 2s ease-in-out infinite;
}

@keyframes tourButtonPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(61, 155, 251, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(61, 155, 251, 0);
    }
}

/* ==========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

/* Skip Links */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--et-primary);
    color: #fff;
    padding: 8px 16px;
    z-index: 10000;
    transition: top 0.3s;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
    color: #fff;
    text-decoration: none;
}

/* Focus Styles - Visible Focus Ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--et-primary);
    outline-offset: 2px;
}

/* Remove default outline when using mouse */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
}

/* Sidebar Focus Styles */
.vertical-menu li a:focus-visible {
    outline: 2px solid var(--et-primary-light);
    outline-offset: -2px;
    background: var(--et-sidebar-hover-bg);
}

/* Button Focus Styles */
.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 87, 99, 0.3);
}

/* Form Control Focus */
.form-control:focus {
    border-color: var(--et-primary);
    box-shadow: 0 0 0 3px rgba(0, 87, 99, 0.1);
}

/* Card Focus */
.card:focus-within {
    box-shadow: var(--et-shadow-hover);
}

/* ==========================================================================
   REDUCED MOTION - Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .spin,
    .spinner-border,
    .spinner-grow {
        animation: none !important;
    }

    /* Disable parallax effects */
    .parallax {
        background-attachment: scroll !important;
    }
}

/* ==========================================================================
   HIGH CONTRAST MODE
   ========================================================================== */
@media (prefers-contrast: high) {
    :root {
        --et-border-color: rgba(0, 0, 0, 0.3);
        --et-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
    }

    .card {
        border: 2px solid var(--et-text-dark);
    }

    .btn {
        border-width: 2px;
    }

    .badge {
        border: 1px solid currentColor;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
    /* Hide non-essential elements */
    .leftbar,
    .topbar,
    .breadcrumbbar,
    .footerbar,
    #loading-overlay,
    #toast-container,
    .btn,
    .infobar-settings-sidebar,
    .infobar-settings-sidebar-overlay {
        display: none !important;
    }

    /* Full width content */
    .rightbar {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .contentbar {
        padding: 0 !important;
    }

    /* White background */
    body,
    .card,
    .contentbar {
        background: #fff !important;
    }

    /* Black text */
    body,
    h1, h2, h3, h4, h5, h6,
    p, span, div {
        color: #000 !important;
    }

    /* Show links */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Charts */
    .apexcharts-canvas {
        max-width: 100% !important;
    }

    /* Page breaks */
    .card {
        page-break-inside: avoid;
    }

    h2, h3 {
        page-break-after: avoid;
    }
}

/* ==========================================================================
   DARK MODE SUPPORT (Future)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    /* Reserved for future dark mode implementation */
    /* The app currently uses semi-dark sidebar with light content */
}

/* ==========================================================================
   CONSISTENCY FIXES
   ========================================================================== */

/* Consistent icon sizing in cards */
.card-header .feather,
.card-body .feather {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

/* Consistent badge styling */
.badge {
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Consistent card header */
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--et-border-light);
    padding: 15px 20px;
}

.card-header .card-title {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 600;
}

/* Consistent table styling */
.table th {
    font-weight: 600;
    color: var(--et-text-dark);
    border-top: none;
}

.table td {
    vertical-align: middle;
}

/* Consistent metric card styling */
.metric-value {
    font-size: 28px;
    font-weight: 600;
    color: var(--et-text-dark);
    line-height: 1.2;
}

.metric-label {
    font-size: 13px;
    color: var(--et-text-muted);
    margin-top: 5px;
}

/* Consistent loading state */
.loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--et-text-muted);
}

.loading-state .spinner-border {
    width: 2rem;
    height: 2rem;
    margin-right: 10px;
}

/* ==========================================================================
   Multi-Agent Debate System - Enhanced UX Styles
   ========================================================================== */

/* Debate Progress Container */
.debate-progress-container {
    padding: 30px 20px;
}

.debate-spinner {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.debate-status-text {
    color: var(--et-primary);
    font-weight: 600;
}

/* Debate Phases Progress */
.debate-phases {
    padding: 20px 10px;
}

.debate-phase {
    transition: all 0.3s ease;
    opacity: 0.5;
}

.debate-phase.active {
    opacity: 1;
    transform: scale(1.1);
}

.debate-phase.active .phase-icon .badge {
    animation: glow 1.5s ease-in-out infinite;
}

.debate-phase.completed {
    opacity: 1;
}

.debate-phase.completed .phase-icon .badge {
    background: #28a745 !important;
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(78, 115, 223, 0.5); }
    50% { box-shadow: 0 0 20px rgba(78, 115, 223, 0.8); }
}

/* Agent Indicators */
.agent-indicator {
    transition: all 0.3s ease;
    padding: 10px;
    border-radius: 10px;
}

.agent-indicator.thinking {
    background: rgba(78, 115, 223, 0.1);
}

.agent-indicator .agent-avatar .badge {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* Enhanced Timeline Styles */
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--et-primary), var(--et-success));
}

.timeline-item {
    position: relative;
    padding-bottom: 20px;
    animation: fadeInUp 0.4s ease;
}

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

.timeline-badge {
    position: absolute;
    left: -30px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    z-index: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.timeline-badge.badge-primary { background: var(--et-gradient-primary); }
.timeline-badge.badge-info { background: var(--et-gradient-info); }
.timeline-badge.badge-warning { background: var(--et-gradient-warning); }
.timeline-badge.badge-success { background: var(--et-gradient-success); }

.timeline-content {
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-content:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.timeline-item.timeline-complete .timeline-badge {
    animation: completePulse 0.6s ease;
}

@keyframes completePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Agent Messages in Timeline */
.agent-message {
    transition: all 0.3s ease;
    border-radius: 8px !important;
}

.agent-message:hover {
    transform: translateX(3px);
}

.confidence-meter {
    display: flex;
    align-items: center;
}

.confidence-meter .progress {
    border-radius: 10px;
    overflow: hidden;
}

/* Proposals Section */
.proposals-section .proposal-box {
    transition: all 0.3s ease;
}

.proposals-section .proposal-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Consensus Meter */
.consensus-meter {
    border: 1px solid #e9ecef;
}

.consensus-meter .progress-bar-striped {
    animation: progress-bar-stripes 1s linear infinite;
}

/* Final Decision Card */
.final-decision-card {
    padding: 10px;
}

.final-decision-card .action-badge {
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.final-decision-card .action-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Circular Confidence Chart */
.circular-chart {
    display: block;
    width: 100%;
    height: 100%;
}

.circular-chart .circle-bg {
    stroke: #eee;
}

.circular-chart .circle {
    stroke-dashoffset: 0;
    transition: stroke-dasharray 1s ease-in-out;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.circular-chart .percentage {
    fill: #333;
    font-weight: 600;
}

/* Reasoning Section */
.reasoning-section {
    margin-top: 15px;
}

/* Constraints Tags */
.constraints-section .badge {
    font-size: 11px;
    font-weight: 500;
    padding: 5px 10px;
}

/* Badge Variants for Phases */
.badge-primary-rgba {
    background-color: rgba(78, 115, 223, 0.15);
    color: var(--et-primary);
}

.badge-info-rgba {
    background-color: rgba(23, 162, 184, 0.15);
    color: #17a2b8;
}

.badge-warning-rgba {
    background-color: rgba(255, 193, 7, 0.15);
    color: #d39e00;
}

.badge-success-rgba {
    background-color: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

.badge-danger-rgba {
    background-color: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

/* Spinner Animation */
.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive adjustments for debate section */
@media (max-width: 768px) {
    .debate-phases {
        flex-wrap: wrap;
    }

    .debate-phase {
        width: 25%;
        margin-bottom: 10px;
    }

    .phase-connector {
        display: none;
    }

    .timeline {
        padding-left: 25px;
    }

    .timeline-badge {
        left: -25px;
        width: 22px;
        height: 22px;
        font-size: 10px;
    }
}

/* ==========================================================================
   Viewport Scaling - Compact Layout at 100% Zoom

   This fixes the issue where the app looks too large/cramped at 100% zoom
   but looks good at 80% zoom. We scale everything proportionally.
   ========================================================================== */

/* Scale factor for standard viewports - applied globally */
:root {
    --scale-factor: 0.9;
    --scale-factor-text: 0.92;
}

/* Apply scaled font size to body */
body {
    font-size: 14.5px;
}

/* Scale headings */
h1, .h1 { font-size: 32px; }
h2, .h2 { font-size: 26px; }
h3, .h3 { font-size: 22px; }
h4, .h4 { font-size: 19px; }
h5, .h5 { font-size: 16px; }
h6, .h6 { font-size: 14px; }

/* Compact contentbar padding */
.contentbar {
    padding: 20px 25px;
}

/* Compact card styling */
.card-body {
    padding: 16px;
}

.card-header {
    padding: 12px 16px;
}

/* Compact metric/stat cards */
.stat-card h4,
.metric-card h4 {
    font-size: 24px;
}

.stat-card .card-body,
.metric-card .card-body {
    padding: 16px;
}

.stat-card p,
.metric-card p {
    font-size: 13px;
}

/* Compact icon badges */
.stat-card .badge,
.metric-card .badge {
    width: 44px;
    height: 44px;
}

.badge.font-35 {
    width: 52px;
    height: 52px;
    font-size: 24px;
}

/* Compact buttons */
.btn {
    padding: 8px 16px;
    font-size: 14px;
}

.btn-lg {
    padding: 10px 20px;
    font-size: 15px;
}

.btn-sm {
    padding: 5px 12px;
    font-size: 12px;
}

/* Compact tables */
.table th,
.table td {
    padding: 10px 12px;
    font-size: 13px;
}

/* Compact form elements */
.form-control {
    padding: 8px 12px;
    font-size: 14px;
}

/* Compact breadcrumb bar */
.breadcrumbbar {
    padding: 12px 25px;
}

.page-title {
    font-size: 20px;
}

/* Compact alert boxes */
.alert {
    padding: 10px 14px;
    font-size: 13px;
}

/* Compact timeline badges */
.timeline-badge {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

/* Compact modal sizing */
.modal-body {
    padding: 18px;
}

.modal-header,
.modal-footer {
    padding: 12px 18px;
}

/* Compact sidebar navigation */
.vertical-menu-detail .menu-item > a {
    padding: 10px 16px;
    font-size: 14px;
}

/* Compact topbar */
.topbar {
    padding: 8px 20px;
}

/* Large screens get even more compact layout */
@media (min-width: 1400px) {
    body {
        font-size: 14px;
    }

    .contentbar {
        padding: 18px 24px;
    }

    .stat-card h4,
    .metric-card h4 {
        font-size: 22px;
    }

    h1, .h1 { font-size: 30px; }
    h2, .h2 { font-size: 24px; }
    h3, .h3 { font-size: 20px; }
    h4, .h4 { font-size: 18px; }
}

/* Extra large screens (2K+) maintain compact proportions */
@media (min-width: 1920px) {
    body {
        font-size: 14.5px;
    }

    .contentbar {
        padding: 22px 28px;
    }

    .stat-card h4,
    .metric-card h4 {
        font-size: 24px;
    }

    .card-body {
        padding: 18px;
    }
}

/* Compact card spacing - override m-b-30 to use less margin */
.card {
    margin-bottom: 20px;
}

.card.m-b-30 {
    margin-bottom: 22px;
}

/* Compact row spacing */
.row {
    margin-left: -10px;
    margin-right: -10px;
}

.row > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

/* Compact chart containers */
.apexcharts-canvas {
    max-width: 100%;
}

/* Ensure icons scale properly */
.feather {
    width: 16px;
    height: 16px;
}

.font-35 .feather,
.font-40 .feather,
.font-50 .feather {
    width: 24px;
    height: 24px;
}

/* Compact action bars */
.bg-gradient-primary .card-body {
    padding: 14px 20px;
}

.bg-gradient-primary h5 {
    font-size: 16px;
    margin-bottom: 4px;
}

.bg-gradient-primary p {
    font-size: 13px;
}

/* Agent debate specific compact styles */
#debate-timeline-container {
    max-height: 500px;
    overflow-y: auto;
}

#final-decision-container {
    max-height: 400px;
}

/* Compact legend and info sections */
.card-body.font-13 {
    font-size: 12.5px;
    line-height: 1.5;
}

/* Compact list items */
.card-body ul li,
.card-body ol li {
    margin-bottom: 4px;
}

/* Ensure consistent spacing after scaling */
.mb-3 {
    margin-bottom: 0.85rem !important;
}

.mb-4 {
    margin-bottom: 1.2rem !important;
}

.py-3 {
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
}

.py-4 {
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
}

.py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}