/* =============================================================================
   HEADER MODERN REDESIGN
   Modern, glass morphism design for the top navigation bar
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CSS Variables - Header Theme Colors
   Now references global theme variables from global-theme.css
   ----------------------------------------------------------------------------- */
:root {
    /* Header-specific aliases to global theme variables */
    --header-bg: var(--theme-bg-dropdown, rgba(22, 27, 34, 0.95));
    --header-bg-glass: var(--theme-bg-glass, rgba(26, 32, 40, 0.85));
    --header-border: var(--theme-border-color, rgba(48, 54, 61, 0.6));
    --header-text-primary: var(--theme-text-primary, #e6edf3);
    --header-text-secondary: var(--theme-text-secondary, #8b949e);
    --header-accent: var(--theme-accent-blue, #367fd3);
    --header-accent-light: var(--theme-accent-cyan, #58a6ff);
    --header-danger: var(--theme-danger, #f85149);
    --header-success: var(--theme-success, #3fb950);
}

/* -----------------------------------------------------------------------------
   Main Header Container
   ----------------------------------------------------------------------------- */
.page-header.navbar.page-navbar {
    background: var(--header-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--header-border) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    min-height: 70px !important;
    padding: 0 20px !important;
}

/* -----------------------------------------------------------------------------
   Header Left Section - Logo + Company Context grouped together
   ----------------------------------------------------------------------------- */
.page-navbar>.header-left-section {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    /* Override index.css flex: 1 */
    text-align: left !important;
    /* Override index.css text-align: center */
    gap: 0;
}

.page-navbar .header-left-section>.tr-logo {
    flex: 0 0 auto;
}

/* Logo styles - replicate index.css for nested structure */
.page-navbar .header-left-section>.tr-logo>a {
    background-image: url(../img/responder.png);
    height: 50px;
    width: 350px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    transition: opacity 0.25s ease;
}

.page-navbar .header-left-section>.tr-logo>a:hover {
    opacity: 0.85;
}

/* -----------------------------------------------------------------------------
   Global Company Selector - Header Placement
   Positioned after the logo, shows only for group users
   ----------------------------------------------------------------------------- */
.page-navbar .header-left-section>.global-company-context {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-left: 24px;
    z-index: 10;
    max-width: 280px;
}

/* Ensure ng-hide still works */
.page-navbar .header-left-section>.global-company-context.ng-hide {
    display: none !important;
}

.page-navbar .global-company-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--header-text-secondary);
    padding-left: 2px;
}

.page-navbar .global-company-selector {
    flex-shrink: 0;
}

/* Ensure the directive container stays in place */
.page-navbar .global-company-selector .company-selector-directive {
    position: relative;
}

/* Adjust the toggle button for header context */
.page-navbar .global-company-selector .company-selector-toggle {
    background: var(--header-bg-glass) !important;
    border-color: var(--header-border) !important;
    padding: 8px 16px !important;
}

.page-navbar .global-company-selector .company-selector-toggle:hover {
    background: rgba(54, 127, 211, 0.15) !important;
    border-color: var(--header-accent-light) !important;
}

.page-navbar .global-company-selector .company-selector-toggle .fa-building {
    color: var(--header-accent-light) !important;
}

.page-navbar .global-company-selector .company-selector-name {
    color: var(--header-text-primary) !important;
    max-width: 180px;
}

.page-navbar .global-company-selector .company-selector-name.muted {
    color: var(--header-text-secondary) !important;
}

.page-navbar .global-company-selector .company-selector-caret {
    color: var(--header-text-secondary) !important;
}

/* Dropdown panel positioning in header */
.page-navbar .global-company-selector .company-selector-panel {
    top: calc(100% + 8px);
    z-index: 1200;
}

/* Responsive - hide on smaller screens */
@media (max-width: 1100px) {
    .page-navbar .global-company-selector .company-selector-name {
        max-width: 120px;
    }
}

@media (max-width: 992px) {
    .page-navbar .global-company-label {
        display: none;
    }

    .page-navbar .global-company-selector .company-selector-name {
        display: none !important;
    }

    .page-navbar .global-company-selector .company-selector-toggle {
        padding: 8px 12px !important;
    }

    .page-navbar .global-company-context {
        margin-left: 16px;
    }
}

/* -----------------------------------------------------------------------------
   Ask Curiosity Button - Modern Pill Style
   ----------------------------------------------------------------------------- */
.page-navbar .curiosity {
    max-width: none !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

.page-navbar .curiosity #start,
.page-navbar .curiosity #recording {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 10px 20px !important;
    background: linear-gradient(145deg, rgba(54, 127, 211, 0.15) 0%, rgba(54, 127, 211, 0.08) 100%) !important;
    border: 1px solid rgba(54, 127, 211, 0.3) !important;
    border-radius: 25px !important;
    transition: all 0.25s ease !important;
    font-size: 15px !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
}

.page-navbar .curiosity #start:hover {
    background: linear-gradient(145deg, rgba(54, 127, 211, 0.25) 0%, rgba(54, 127, 211, 0.15) 100%) !important;
    border-color: rgba(88, 166, 255, 0.5) !important;
    box-shadow: 0 0 20px rgba(54, 127, 211, 0.2) !important;
    transform: translateY(-1px);
}

.page-navbar .curiosity #start .fa-microphone {
    font-size: 18px !important;
    color: var(--header-danger) !important;
}

.page-navbar .curiosity #start span {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--header-text-primary) !important;
}

/* Recording state */
.page-navbar .curiosity #recording {
    background: linear-gradient(145deg, rgba(248, 81, 73, 0.2) 0%, rgba(248, 81, 73, 0.1) 100%) !important;
    border-color: rgba(248, 81, 73, 0.4) !important;
}

/* -----------------------------------------------------------------------------
   Top Menu Container (Notifications, User, Sign Out)
   ----------------------------------------------------------------------------- */
.page-navbar .top-menu.user {
    gap: 16px !important;
}

/* -----------------------------------------------------------------------------
   Notifications - Modern Redesign
   ----------------------------------------------------------------------------- */

/* Bell Icon Button */
.page-header.navbar .top-menu .dropdown-notification>a.dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    background: rgba(48, 54, 61, 0.4) !important;
    border: 1px solid rgba(62, 68, 75, 0.5) !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

.page-header.navbar .top-menu .dropdown-notification>a.dropdown-toggle:hover {
    background: rgba(54, 127, 211, 0.2) !important;
    border-color: rgba(88, 166, 255, 0.4) !important;
}

.page-header.navbar .top-menu .dropdown-notification>a.dropdown-toggle .fa-bell {
    font-size: 18px !important;
    color: #8b949e !important;
    transition: color 0.2s ease !important;
}

.page-header.navbar .top-menu .dropdown-notification>a.dropdown-toggle:hover .fa-bell,
.page-header.navbar .top-menu .dropdown-notification>a.dropdown-toggle .fa-bell.bell {
    color: #58a6ff !important;
}

/* Badge */
.page-header.navbar .top-menu .dropdown-notification>a.dropdown-toggle .badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    text-align: center !important;
    background: var(--theme-danger, #f85149) !important;
    color: #fff !important;
    border-radius: 9px !important;
    border: 2px solid var(--theme-bg-primary, #11161d) !important;
}

/* Dropdown Panel */
.page-header.navbar .top-menu .dropdown-notification>ul.dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: 440px !important;
    min-width: 440px !important;
    max-width: 440px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #1c2128 !important;
    border: 1px solid #30363d !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
}

/* Remove dropdown arrows */
.page-header.navbar .top-menu .dropdown-notification>ul.dropdown-menu::before,
.page-header.navbar .top-menu .dropdown-notification>ul.dropdown-menu::after {
    display: none !important;
    content: none !important;
}

/* Header row */
.page-header.navbar .top-menu .dropdown-notification>ul.dropdown-menu>li.external {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    background: #252c35 !important;
    border-bottom: 1px solid #30363d !important;
}

.page-header.navbar .top-menu .dropdown-notification>ul.dropdown-menu>li.external h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #c9d1d9 !important;
}

.page-header.navbar .top-menu .dropdown-notification>ul.dropdown-menu>li.external h3 .bold {
    color: #58a6ff !important;
    font-weight: 600 !important;
}

.page-header.navbar .top-menu .dropdown-notification>ul.dropdown-menu>li.external>span>a {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    color: #58a6ff !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

.page-header.navbar .top-menu .dropdown-notification>ul.dropdown-menu>li.external>span>a:hover {
    text-decoration: underline !important;
    background: none !important;
}

/* Content area - hide slimScroll completely */
.page-header.navbar .top-menu .dropdown-notification>ul.dropdown-menu>li:nth-child(2) {
    padding: 0 !important;
    margin: 0 !important;
}

.page-header.navbar .top-menu .dropdown-notification .slimScrollDiv {
    width: 100% !important;
}

/* Native scrolling for notifications - no slimScroll */
.notification-scroll-container {
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
}

.notification-list-modern {
    margin: 0;
    padding: 4px 0;
    list-style: none;
}

/* Modern native scrollbar */
.notification-scroll-container::-webkit-scrollbar {
    width: 6px;
}

.notification-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

.notification-scroll-container::-webkit-scrollbar-thumb {
    background: #58a6ff;
    border-radius: 3px;
    opacity: 0.7;
}

.notification-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #79b8ff;
}

/* Notification list */
.page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list {
    margin: 0 !important;
    padding: 4px 0 !important;
    list-style: none !important;
    background: #1c2128 !important;
    width: 100% !important;
}

/* Individual notification item */
.page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list>li {
    margin: 0 !important;
    padding: 0 !important;
}

.page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list>li>a:not(.ng-hide),
.notification-list-modern>li>a:not(.ng-hide) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #30363d !important;
    border-radius: 0 !important;
    color: #c9d1d9 !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure ng-hide elements stay hidden */
.page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list>li>a.ng-hide,
.notification-list-modern>li>a.ng-hide {
    display: none !important;
}

.page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list>li>a:hover {
    background: rgba(54, 127, 211, 0.1) !important;
}

.page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list>li:last-child>a {
    border-bottom: none !important;
}

/* Time stamp - MUST be visible */
.page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list>li>a>.time,
.notification-list-modern>li>a>.time,
ul.dropdown-menu-list .time,
.notification-list-modern .time {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 2 !important;
    flex: 0 0 auto !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #8b949e !important;
    white-space: nowrap !important;
    margin-left: auto !important;
    background: rgba(88, 166, 255, 0.15) !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
}

/* Details - contains icon and text */
.page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list .details,
.notification-list-modern .details {
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #c9d1d9 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list .details strong,
.notification-list-modern .details strong {
    color: #ffffff !important;
    font-weight: 600 !important;
}

[data-theme="light"] .page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list .details strong,
html[data-theme="light"] .page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list .details strong,
[data-theme="light"] .notification-list-modern .details strong,
html[data-theme="light"] .notification-list-modern .details strong {
    color: var(--header-text-primary, #333) !important;
}

/* Icon labels */
.page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list .label,
.notification-list-modern .label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
}

.page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list .label-success,
.notification-list-modern .label-success {
    background: rgba(63, 185, 80, 0.15) !important;
    color: #3fb950 !important;
}

.page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list .label-danger,
.notification-list-modern .label-danger {
    background: rgba(248, 81, 73, 0.15) !important;
    color: #f85149 !important;
}

.page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list .label-warning,
.page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list .label-icon:not(.label-success):not(.label-danger),
.notification-list-modern .label-warning,
.notification-list-modern .label-icon:not(.label-success):not(.label-danger) {
    background: rgba(210, 153, 34, 0.15) !important;
    color: #d29922 !important;
}

/* Custom scrollbar */
.page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list::-webkit-scrollbar {
    width: 8px;
}

.page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list::-webkit-scrollbar-track {
    background: transparent;
    margin: 8px 0;
}

.page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 4px;
    border: 2px solid #1c2128;
}

.page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list::-webkit-scrollbar-thumb:hover {
    background: #484f58;
}

/* -----------------------------------------------------------------------------
   User Dropdown - Responsive Layout
   ----------------------------------------------------------------------------- */
.page-navbar .dropdown-user>a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 12px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    position: relative !important;
    max-width: 320px !important;
    cursor: default !important;
}

.page-navbar .dropdown-user>a:hover {
    background: transparent !important;
}

.page-navbar .dropdown-user .fa-user {
    font-size: 20px !important;
    color: #58a6ff !important;
    transition: color 0.25s ease !important;
    flex-shrink: 0 !important;
}

.page-navbar .dropdown-user>a:hover .fa-user {
    color: #79b8ff !important;
}

/* User info container - left-aligned layout */
.page-navbar .dropdown-user .username {
    display: block !important;
    max-width: 280px !important;
    overflow: hidden !important;
    text-align: left !important;
}

.page-navbar .dropdown-user .user-info-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    line-height: 1.3 !important;
}

/* User name row */
.page-navbar .dropdown-user .user-name {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #e6edf3 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
}

.page-navbar .dropdown-user .user-name .col-2 {
    color: #8b949e !important;
    font-weight: 400 !important;
}

/* Company name row */
.page-navbar .dropdown-user .user-company {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #58a6ff !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
}

/* Tooltip showing full info on hover - instant, dark theme */
.user-info-wrapper {
    position: relative !important;
}

.user-info-wrapper::after {
    content: attr(data-user-tooltip);
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    padding: 8px 12px;
    background: #21262d;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #c9d1d9;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.user-info-wrapper:hover::after {
    opacity: 1;
    visibility: visible;
}

/* -------------------------------------------------------------------------
   Unified User + Sign Out
   ------------------------------------------------------------------------- */
.page-navbar .unified-user-logout {
    display: flex;
    align-items: stretch;
    background: var(--header-bg-glass);
    border: 1px solid var(--header-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-navbar .unified-user-logout:hover {
    border-color: var(--header-accent-light);
}

.page-navbar .unified-user-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-right: 1px solid var(--header-border);
    min-width: 0;
}

.page-navbar .unified-user-section .user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--header-accent), var(--header-accent-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    flex-shrink: 0;
}

.page-navbar .unified-user-section .user-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 280px;
}

.page-navbar .unified-user-section .user-email {
    display: block;
    font-size: 12px;
    color: var(--header-text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.page-navbar .unified-user-section .user-company {
    font-size: 10px;
    color: var(--header-text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.page-navbar .unified-user-section .user-company .on-text {
    flex: 0 0 auto;
    opacity: 0.7;
}

.page-navbar .unified-user-section .user-company .company-name {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.page-navbar .unified-logout-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background: transparent;
    border: none;
    color: var(--header-text-secondary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    font-family: inherit;
}

.page-navbar .unified-logout-btn:hover {
    background: var(--theme-danger-bg, rgba(248, 81, 73, 0.15));
    color: var(--header-danger);
}

.page-navbar .unified-logout-btn i {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.page-navbar .unified-logout-btn:hover i {
    transform: translateX(2px);
}

.page-navbar .unified-logout-btn span {
    white-space: nowrap;
}

/* Responsive: adjust widths on smaller screens */
@media (max-width: 1400px) {
    .page-navbar .dropdown-user .username {
        max-width: 220px !important;
    }

    .page-navbar .unified-user-section .user-email {
        max-width: 220px;
    }

    .page-navbar .unified-user-section .user-company {
        max-width: 220px;
    }

    .page-navbar .unified-user-section .user-company .company-name {
        max-width: 220px;
    }
}

@media (max-width: 1200px) {
    .page-navbar .dropdown-user .username {
        max-width: 180px !important;
    }

    .page-navbar .dropdown-user .user-name .col-2 {
        display: none !important;
    }

    .page-navbar .unified-user-section .user-email {
        max-width: 180px;
    }

    .page-navbar .unified-user-section .user-company {
        max-width: 180px;
    }

    .page-navbar .unified-user-section .user-company .company-name {
        max-width: 180px;
    }
}

/* -----------------------------------------------------------------------------
   Sign Out Button
   ----------------------------------------------------------------------------- */
.page-navbar .btn-signout {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(248, 81, 73, 0.1) !important;
    border: 1px solid rgba(248, 81, 73, 0.3) !important;
    border-radius: 12px !important;
    color: var(--header-danger) !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.page-navbar .btn-signout:hover {
    background: rgba(248, 81, 73, 0.2) !important;
    border-color: rgba(248, 81, 73, 0.5) !important;
    transform: translateY(-1px);
}

.page-navbar .btn-signout .fa-sign-out {
    font-size: 18px !important;
}

/* -----------------------------------------------------------------------------
   Company Logo
   ----------------------------------------------------------------------------- */
.page-navbar .top-menu.user>img {
    border-radius: 8px !important;
    border: 1px solid var(--header-border) !important;
    padding: 4px !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* -----------------------------------------------------------------------------
   License Warning Messages
   ----------------------------------------------------------------------------- */
.page-navbar .yellow {
    padding: 8px 16px !important;
    background: rgba(210, 153, 34, 0.15) !important;
    border: 1px solid rgba(210, 153, 34, 0.3) !important;
    border-radius: 8px !important;
    color: #d29922 !important;
    font-size: 13px !important;
}

.page-navbar .red {
    padding: 8px 16px !important;
    background: rgba(248, 81, 73, 0.15) !important;
    border: 1px solid rgba(248, 81, 73, 0.3) !important;
    border-radius: 8px !important;
    color: var(--header-danger) !important;
    font-size: 13px !important;
}

/* -----------------------------------------------------------------------------
   Curiosity Overlap Prevention
   Shift left on medium screens to avoid overlapping with theme toggle button
   On 1920x1080 with 125% scaling, logical width is 1536px.
   ----------------------------------------------------------------------------- */
@media (max-width: 1550px) and (min-width: 1351px) {
    .page-navbar .curiosity {
        left: 45% !important;
    }
}

@media (max-width: 1350px) and (min-width: 1151px) {
    .page-navbar .curiosity {
        left: 42% !important;
    }
}

@media (max-width: 1150px) and (min-width: 993px) {
    .page-navbar .curiosity {
        left: 35% !important;
    }
}

/* -----------------------------------------------------------------------------
   Responsive Adjustments
   ----------------------------------------------------------------------------- */
@media (max-width: 1400px) {

    .page-navbar .dropdown-user .user-name,
    .page-navbar .dropdown-user .user-company {
        max-width: 200px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: block !important;
    }
}

@media (max-width: 1200px) {

    .page-navbar .dropdown-user .user-name,
    .page-navbar .dropdown-user .user-company {
        max-width: 150px !important;
    }
}

@media (max-width: 992px) {
    .page-navbar .dropdown-user .username-hide-on-mobile {
        display: none !important;
    }

    .page-navbar .curiosity #start span {
        display: none !important;
    }

    .page-navbar .curiosity #start {
        padding: 10px 14px !important;
        border-radius: 50% !important;
    }
}

/* -----------------------------------------------------------------------------
   License Warning Banners
   ----------------------------------------------------------------------------- */
/* Prevent flash of uncompiled content */
.license-warning-banner[ng-cloak],
.license-expired-banner[ng-cloak],
[ng-cloak].license-warning-banner,
[ng-cloak].license-expired-banner {
    display: none !important;
}

.license-warning-banner,
.license-expired-banner {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 100% !important;
    margin-top: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 16px !important;
    border-radius: 0 0 8px 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    z-index: 1000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.license-warning-banner {
    background: linear-gradient(135deg, rgba(210, 153, 34, 0.95), rgba(180, 130, 20, 0.95)) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 200, 50, 0.3) !important;
    border-top: none !important;
}

.license-warning-banner i {
    color: #fff !important;
    font-size: 14px !important;
}

.license-expired-banner {
    background: linear-gradient(135deg, rgba(248, 81, 73, 0.95), rgba(200, 60, 55, 0.95)) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 100, 100, 0.3) !important;
    border-top: none !important;
}

.license-expired-banner i {
    color: #fff !important;
    font-size: 16px !important;
}

/* Responsive - hide text on small screens */
@media (max-width: 768px) {

    .license-warning-banner span,
    .license-expired-banner span {
        display: none !important;
    }

    .license-warning-banner,
    .license-expired-banner {
        padding: 8px 12px !important;
        border-radius: 0 0 6px 6px !important;
    }
}

/* -----------------------------------------------------------------------------
   LIGHT THEME OVERRIDES
   ----------------------------------------------------------------------------- */
/* TEST: Gray accent top bar for light theme */
[data-theme="light"] .page-header.navbar.page-navbar {
    background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%) !important;
    border-bottom: 1px solid #94a3b8 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

/* Light gray header - keep text/icons dark */
[data-theme="light"] .page-navbar .dropdown-user .fa-user {
    color: #3b82f6 !important;
}

[data-theme="light"] .page-navbar .dropdown-user .user-name {
    color: #1e293b !important;
}

[data-theme="light"] .page-navbar .dropdown-user .user-name .col-2 {
    color: #64748b !important;
}

[data-theme="light"] .page-navbar .dropdown-user .user-company {
    color: #3b82f6 !important;
}

[data-theme="light"] .page-navbar .global-company-label {
    color: #64748b !important;
}

[data-theme="light"] .page-navbar .global-company-selector .company-selector-toggle {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: #94a3b8 !important;
}

[data-theme="light"] .page-navbar .global-company-selector .company-selector-toggle:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #3b82f6 !important;
}

[data-theme="light"] .page-navbar .global-company-selector .company-selector-toggle .fa-building,
[data-theme="light"] .page-navbar .global-company-selector .company-selector-toggle .fa-caret-down {
    color: #3b82f6 !important;
}

[data-theme="light"] .page-navbar .global-company-selector .company-selector-toggle .company-name {
    color: #1e293b !important;
}

[data-theme="light"] .page-header.navbar .top-menu .dropdown-notification>a.dropdown-toggle {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: #94a3b8 !important;
}

[data-theme="light"] .page-header.navbar .top-menu .dropdown-notification>a.dropdown-toggle .fa-bell {
    color: #64748b !important;
}

[data-theme="light"] .page-header.navbar .top-menu .dropdown-notification>a.dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="light"] .page-navbar .curiosity #start,
[data-theme="light"] .page-navbar .curiosity #recording {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: #94a3b8 !important;
}

[data-theme="light"] .page-navbar .curiosity #start span {
    color: #1e293b !important;
}

[data-theme="light"] .page-navbar .curiosity #start .fa-microphone {
    color: #dc2626 !important;
}

[data-theme="light"] .page-navbar .curiosity #start:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #3b82f6 !important;
}

/* Theme toggle button */
[data-theme="light"] .page-navbar .theme-toggle-btn,
[data-theme="light"] .page-navbar [ng-click*="toggleTheme"],
[data-theme="light"] .page-navbar .fa-moon,
[data-theme="light"] .page-navbar .fa-sun {
    color: #64748b !important;
}

[data-theme="light"] .page-navbar .theme-toggle-btn:hover,
[data-theme="light"] .page-navbar [ng-click*="toggleTheme"]:hover {
    color: #3b82f6 !important;
}

/* Unified user + logout wrapper */
[data-theme="light"] .page-navbar .unified-user-logout {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: #94a3b8 !important;
}

[data-theme="light"] .page-navbar .unified-user-logout:hover {
    border-color: #3b82f6 !important;
}

/* User section */
[data-theme="light"] .page-navbar .unified-user-section .fa-user {
    color: #3b82f6 !important;
}

[data-theme="light"] .page-navbar .unified-user-section .user-avatar {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3) !important;
}

[data-theme="light"] .page-navbar .unified-user-section .user-name-text {
    color: #1e293b !important;
}

[data-theme="light"] .page-navbar .unified-user-section .user-company-text {
    color: #3b82f6 !important;
}

/* Sign out button */
[data-theme="light"] .page-navbar .unified-logout-section,
[data-theme="light"] .page-navbar .sign-out-btn,
[data-theme="light"] .page-navbar [data-test-id="signOutButton"] {
    background: rgba(255, 255, 255, 0.5) !important;
    border-left: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .page-navbar .unified-logout-section:hover,
[data-theme="light"] .page-navbar .sign-out-btn:hover,
[data-theme="light"] .page-navbar [data-test-id="signOutButton"]:hover {
    background: rgba(239, 68, 68, 0.1) !important;
}

[data-theme="light"] .page-navbar .unified-logout-section .fa-sign-out,
[data-theme="light"] .page-navbar .sign-out-btn .fa-sign-out,
[data-theme="light"] .page-navbar [data-test-id="signOutButton"] .fa-sign-out {
    color: #64748b !important;
}

[data-theme="light"] .page-navbar .unified-logout-section:hover .fa-sign-out,
[data-theme="light"] .page-navbar .sign-out-btn:hover .fa-sign-out,
[data-theme="light"] .page-navbar [data-test-id="signOutButton"]:hover .fa-sign-out {
    color: #dc2626 !important;
}

/* Any other header icons */
[data-theme="light"] .page-navbar .top-menu>li>a>i,
[data-theme="light"] .page-navbar .hor-menu .navbar-nav>li>a {
    color: #475569 !important;
}

[data-theme="light"] .page-navbar .top-menu>li>a:hover>i,
[data-theme="light"] .page-navbar .hor-menu .navbar-nav>li>a:hover {
    color: #3b82f6 !important;
}

/* END GRAY HEADER TEST */

[data-theme="light"] .page-header.navbar .top-menu .dropdown-notification>a.dropdown-toggle:hover .fa-bell {
    color: #93c5fd !important;
}

[data-theme="light"] .page-header.navbar .top-menu .dropdown-notification>ul.dropdown-menu {
    background: var(--theme-modal-bg) !important;
    border-color: var(--theme-modal-border) !important;
    box-shadow: var(--theme-shadow-xl) !important;
}

[data-theme="light"] .page-header.navbar .top-menu .dropdown-notification>ul.dropdown-menu>li.external {
    background: var(--theme-modal-header-bg) !important;
    border-bottom-color: var(--theme-border-color) !important;
}

[data-theme="light"] .page-header.navbar .top-menu .dropdown-notification>ul.dropdown-menu>li.external h3 {
    color: var(--theme-text-primary) !important;
}

[data-theme="light"] .page-header.navbar .top-menu .dropdown-notification>ul.dropdown-menu>li.external h3 .bold {
    color: var(--theme-accent-blue) !important;
}

[data-theme="light"] .page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list {
    background: var(--theme-modal-bg) !important;
}

[data-theme="light"] .page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list>li>a,
[data-theme="light"] .notification-list-modern>li>a {
    border-bottom-color: var(--theme-border-color) !important;
    color: var(--theme-text-primary) !important;
}

[data-theme="light"] .page-header.navbar .top-menu .dropdown-notification ul.dropdown-menu-list .details,
[data-theme="light"] .notification-list-modern .details {
    color: var(--theme-text-primary) !important;
}

/* User dropdown styles kept for dropdown menu - not header bar */
[data-theme="light"] .user-info-wrapper::after {
    background: var(--theme-modal-bg);
    border-color: var(--theme-modal-border);
    color: var(--theme-text-primary);
}

[data-theme="light"] .page-navbar .global-company-selector .company-selector-name.muted {
    color: var(--theme-text-secondary) !important;
}

[data-theme="light"] .page-navbar .global-company-selector .company-selector-caret {
    color: var(--theme-text-secondary) !important;
}

[data-theme="light"] .page-navbar .btn-signout {
    background: var(--theme-danger-bg) !important;
    border-color: var(--theme-danger-glow) !important;
    color: var(--theme-danger) !important;
}

[data-theme="light"] .page-navbar .top-menu.user>img {
    border-color: var(--theme-border-color) !important;
    background: var(--theme-bg-subtle) !important;
}