:root {
    /* Brand Colors */
    --brand-gold: #F5A623;
    --brand-gold-dark: #C97F0E;
    --brand-navy: #0A1F44;
    --brand-navy-deep: #061530;
    --brand-blue: #2E7CF6;
    --brand-blue-light: #5B9BFF;

    /* Light Mode (default) */
    --navbar-bg: linear-gradient(180deg, #0F2452 0%, #0A1F44 100%);
    --navbar-border: rgba(46, 124, 246, 0.25);
    --navbar-text: #EAF1FF;
    --navbar-text-muted: #A9BEDD;

    --sidebar-bg: linear-gradient(180deg, #0A1F44 0%, #081A38 100%);
    --sidebar-active-bg: linear-gradient(90deg, rgba(245,166,35,0.15), rgba(46,124,246,0.15));
    --sidebar-active-border: var(--brand-gold);
    --sidebar-active-text: #FFFFFF;
    --sidebar-text: #B7C6E3;
    --sidebar-hover-bg: rgba(91,155,255,0.12);

    /* Dark Mode Variables */
    --navbar-bg-dark: linear-gradient(180deg, #050D20 0%, #030814 100%);
    --navbar-border-dark: rgba(91,155,255,0.15);
    --navbar-text-dark: #F2F6FF;
    --navbar-text-muted-dark: #8598C2;

    --sidebar-bg-dark: linear-gradient(180deg, #030814 0%, #01050D 100%);
    --sidebar-active-bg-dark: linear-gradient(90deg, rgba(245,166,35,0.18), rgba(46,124,246,0.18));
    --sidebar-active-border-dark: var(--brand-gold-dark);
    --sidebar-active-text-dark: #FFFFFF;
    --sidebar-text-dark: #7C8CB0;
    --sidebar-hover-bg-dark: rgba(91,155,255,0.12);

    --accent-icon: linear-gradient(135deg, var(--brand-gold), var(--brand-blue));

    --ig-bg-header: #f8f9fa;
    --ig-bg-sidebar: #f1f3f4;
    --bg-dark: #000000;
    --bg-light: #ffffff;
    --primary-color: #1c22e6;
}

.dark {
    --ig-bg-header: #1a1a1a;
    --ig-bg-sidebar: #2d2d2d;
    --bg-light: var(--bg-dark);
    --navbar-bg: var(--navbar-bg-dark);
    --navbar-border: var(--navbar-border-dark);
    --navbar-text: var(--navbar-text-dark);
    --navbar-text-muted: var(--navbar-text-muted-dark);
    --sidebar-bg: var(--sidebar-bg-dark);
    --sidebar-active-bg: var(--sidebar-active-bg-dark);
    --sidebar-active-border: var(--sidebar-active-border-dark);
    --sidebar-active-text: var(--sidebar-active-text-dark);
    --sidebar-text: var(--sidebar-text-dark);
    --sidebar-hover-bg: var(--sidebar-hover-bg-dark);
}

body {
    background: var(--bg-light);
}

/* ═══════════════════════════════════════════════════════════════
   TOP NAVBAR - Premium Gradient with Brand Colors
   ═══════════════════════════════════════════════════════════════ */
#navbarDefault,
.navbar-top {
    background: var(--navbar-bg) !important;
    background-image: var(--navbar-bg) !important;
    background-attachment: fixed !important;
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, rgba(245, 166, 35, 0.3), rgba(46, 124, 246, 0.3), rgba(245, 166, 35, 0.3)) 1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

#navbarDefault .navbar-brand,
#navbarDefault .navbar-brand p,
.navbar-top .navbar-brand,
.navbar-top .navbar-brand p {
    color: var(--navbar-text) !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}

#navbarDefault .nav-link,
.navbar-top .nav-link {
    color: var(--navbar-text-muted) !important;
    transition: all 150ms ease !important;
    position: relative;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
}

#navbarDefault .nav-link:hover,
.navbar-top .nav-link:hover {
    color: var(--navbar-text) !important;
    background-color: rgba(91, 155, 255, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR - Premium Gradient with Active State & Hover Effects
   ═══════════════════════════════════════════════════════════════ */
.navbar-vertical {
    background-attachment: fixed !important;
    border-right: 2px solid;
    border-image: linear-gradient(180deg, rgba(245, 166, 35, 0.3), rgba(46, 124, 246, 0.3), rgba(245, 166, 35, 0.3)) 1 !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15) !important;
}

.navbar-vertical-content {
    background: transparent !important;
}

/* Sidebar nav items - Base styling */
.navbar-vertical .nav-link {
    color: var(--sidebar-text) !important;
    transition: all 150ms ease !important;
    position: relative;
    border-left: 4px solid transparent !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
}

/* Hover effect on sidebar items */
.navbar-vertical .nav-link:hover {
    color: var(--sidebar-text) !important;
    background-color: var(--sidebar-hover-bg) !important;
}

/* Active sidebar item - Premium styling (only direct active, not parent) */
.navbar-vertical .nav-link.active {
    color: var(--sidebar-active-text) !important;
    background: var(--sidebar-active-bg) !important;
    border-left-color: var(--sidebar-active-border) !important;
    font-weight: 700 !important;
    box-shadow: inset 0 1px 3px rgba(245, 166, 35, 0.15) !important;
}

/* Parent items - subtle styling only */
.navbar-vertical .nav-link.active-parent {
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION BADGES
   ═══════════════════════════════════════════════════════════════ */
/* Expanded sidebar - badge sits inline next to the nav text.
   badge-phoenix-danger is a soft outline chip (pale pink bg, thin border,
   uppercase) meant for light card backgrounds - on the dark navy sidebar
   it reads as a washed-out, low-contrast smudge. Replace it with a solid,
   properly centered pill instead. */
.navbar-vertical .nav-link .badge {
    top: 0 !important;
    margin-left: 0.5rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: none !important;
    background-color: #FF4D5E !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 0.2rem 0.5rem !important;
    line-height: 1 !important;
    box-shadow: 0 0 0 2px rgba(255, 77, 94, 0.18);
}

/* Collapsed icon-rail - the badge's sibling .nav-link-text is hidden
   (display:none) but the badge itself isn't, so it floats out past the
   narrow rail into the page content. Pin it as a small corner indicator
   on the icon instead, out of the flex flow so it can't overflow. */
:root.navbar-vertical-collapsed .navbar-vertical .nav-item-wrapper > .nav-link.label-1 .badge {
    position: absolute !important;
    top: 0.4rem;
    right: 0.6rem;
    margin: 0 !important;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 !important;
    font-size: 0.6rem !important;
    line-height: 1.05rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
}

/* ═══════════════════════════════════════════════════════════════
   COLLAPSED SIDEBAR FLYOUT (light mode only)
   `.parent-wrapper` is used for TWO different contexts that share the
   same markup/classes:
     1. Expanded sidebar - an inline accordion on the dark navy background.
     2. Collapsed icon-rail - a floating popover with a WHITE background
        (theme variable --phoenix-navbar-vertical-collapsed-menu-bg flips
        to #fff in light mode).
   Only case 2 needs dark navy text; case 1 already has correct white
   text on navy and must be left untouched. The `.navbar-vertical-collapsed`
   class (added to <html> by theme.js when the rail is collapsed) is the
   only thing that tells the two apart, so every rule below requires it.

   NOTE: `.dark` is applied to <html> itself, which IS `:root` — so a
   bare `:root` selector is NOT "light mode only", it matches in both
   modes. Every light-mode-only rule here must use `:root:not(.dark)`.
   ═══════════════════════════════════════════════════════════════ */
:root.navbar-vertical-collapsed:not(.dark) .navbar-vertical .parent-wrapper {
    --sidebar-text: var(--brand-navy);
    --sidebar-hover-bg: rgba(46, 124, 246, 0.1);
}

:root.navbar-vertical-collapsed:not(.dark) .navbar-vertical .parent-wrapper .nav-link:hover {
    color: var(--brand-blue) !important;
}

/* Active item inside the flyout - dark navy text instead of white, per user request */
:root.navbar-vertical-collapsed:not(.dark) .navbar-vertical .parent-wrapper .nav-link.active {
    color: var(--brand-navy) !important;
}

:root.navbar-vertical-collapsed:not(.dark) .navbar-vertical .parent-wrapper .nav-link-icon {
    color: var(--brand-navy) !important;
}

:root.navbar-vertical-collapsed:not(.dark) .navbar-vertical .parent-wrapper .nav-link:hover .nav-link-icon {
    color: var(--brand-blue) !important;
}

:root.navbar-vertical-collapsed:not(.dark) .navbar-vertical .parent-wrapper .collapsed-nav-item-title {
    color: var(--brand-navy) !important;
    font-weight: 700 !important;
}

/* Rail icon hover (the collapsed sidebar's own icon buttons, not the flyout).
   Must use the direct-child combinator (>) - `.nav-item-wrapper:hover .nav-link`
   without it also matches every nav-link nested inside the flyout's
   `.parent-wrapper`, tinting the whole popover panel blue on hover. */
:root.navbar-vertical-collapsed:not(.dark) .navbar-vertical .nav-item-wrapper:hover > .nav-link.label-1:not(.active):not(.active-parent) {
    background-color: rgba(46, 124, 246, 0.08) !important;
    border-radius: 0.5rem !important;
}

:root.navbar-vertical-collapsed:not(.dark) .navbar-vertical .nav-item-wrapper:hover > .nav-link.label-1:not(.active):not(.active-parent) .nav-link-icon {
    color: var(--brand-blue) !important;
}

/* Sidebar section labels and dividers */
.navbar-vertical-label {
    color: var(--navbar-text-muted) !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    letter-spacing: 1px !important;
    padding: 0.5rem 1.5rem 0.3rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
}

.navbar-vertical-line {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    margin: 0.5rem 0 !important;
}

.dark .navbar-vertical-line {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════ */
.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
    height: auto !important;
    line-height: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   LOGO STYLING - Premium Brand Colors (Gold + Blue)
   ═══════════════════════════════════════════════════════════════ */
/* Navbar brand logo - "Ease" gold in both modes */
.navbar-logo .navbar-brand,
a.navbar-brand {
    color: var(--brand-gold) !important;
    font-weight: 800 !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 4px 12px rgba(245, 166, 35, 0.25) !important;
    filter: drop-shadow(0 2px 4px rgba(245, 166, 35, 0.2)) !important;
    display: flex;
    align-items: center;
}

/* Logo icon - Perfect size matching text + gold glow */
.navbar-brand-logo {
    height: 1.5rem !important;
    width: 1.5rem !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 12px rgba(245, 166, 35, 0.3)) !important;
    transition: all 200ms ease !important;
}

/* "HR" span - Bright blue in both light and dark modes */
.navbar-logo .navbar-brand span,
a.navbar-brand span,
.navbar-top .navbar-brand span {
    color: var(--brand-blue-light) !important;
    font-weight: 800 !important;
}

/* Logo text (fallback for other components) - "Ease" gold in both modes */
.logo-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    margin: 0;
    letter-spacing: 1px;
    color: var(--brand-gold) !important;
    font-weight: 800 !important;
}

/* "HR" - Dark navy in light mode, bright blue in dark mode */
.logo-text span {
    color: var(--brand-navy) !important;
    font-weight: 800 !important;
}

/* Dark mode - "HR" span becomes bright blue */
.dark .logo-text span {
    color: var(--brand-blue-light) !important;
}

/* Sidebar - Use CSS variables for both light and dark modes */
.navbar-vertical {
    background: var(--sidebar-bg) !important;
    background-image: var(--sidebar-bg) !important;
}

/* Light mode - All dropdowns visible text */
:root:not(.dark) .dropdown-menu {
    background-color: #ffffff !important;
}

:root:not(.dark) .dropdown-menu,
:root:not(.dark) .dropdown-menu * {
    color: var(--brand-navy) !important;
}

:root:not(.dark) .dropdown-menu .nav-link {
    color: var(--brand-navy) !important;
    transition: all 150ms ease !important;
}

:root:not(.dark) .dropdown-menu .nav-link:hover {
    background-color: rgba(46, 124, 246, 0.1) !important;
    color: var(--brand-blue) !important;
}

:root:not(.dark) .dropdown-menu .nav-link:hover span {
    color: var(--brand-blue) !important;
}

/* Light mode dropdown text elements */
:root:not(.dark) .dropdown-menu .text-500 {
    color: #6b7280 !important;
}

:root:not(.dark) .dropdown-menu .text-900 {
    color: var(--brand-navy) !important;
}

:root:not(.dark) .dropdown-menu .text-black {
    color: var(--brand-navy) !important;
}

:root:not(.dark) .dropdown-menu button {
    color: var(--brand-navy) !important;
}

:root:not(.dark) .dropdown-menu .fw-bold,
:root:not(.dark) .dropdown-menu .fw-semibold {
    color: var(--brand-navy) !important;
}

/* Dark mode dropdown - Keep original styling */
.dark .dropdown-menu {
    background-color: #1f2937 !important;
}

.dark .dropdown-menu .nav-link {
    color: inherit !important;
}

.dark .dropdown-menu .nav-link:hover {
    background-color: rgba(46, 124, 246, 0.2) !important;
}

.dark .dropdown-menu .text-500,
.dark .dropdown-menu .fs--2 {
    color: inherit !important;
}

.logo-mail {
    color: var(--navbar-text) !important;
    font-family: 'Bebas Neue', sans-serif;
}

.dark .logo-mail {
    color: var(--navbar-text) !important;
}

.logo-force {
    color: var(--brand-gold) !important;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 800;
}

.dark .logo-force {
    color: var(--brand-gold-dark) !important;
}

.logo-icon {
    background: linear-gradient(135deg, var(--brand-gold), var(--brand-blue));
    color: white;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   ICON TREATMENT - Brand colors on active state
   ═══════════════════════════════════════════════════════════════ */
.navbar-vertical .nav-link-icon {
    color: var(--sidebar-text) !important;
    transition: all 150ms ease !important;
}

.navbar-vertical .nav-link.active .nav-link-icon,
.navbar-vertical .nav-link.active-parent .nav-link-icon {
    color: var(--brand-gold) !important;
}

.navbar-vertical .nav-link:hover .nav-link-icon {
    color: var(--brand-blue-light) !important;
}

#navbarDefault .nav-link-icon,
.navbar-top .nav-link-icon {
    color: var(--navbar-text-muted) !important;
    transition: all 150ms ease !important;
}

#navbarDefault .nav-link:hover .nav-link-icon,
.navbar-top .nav-link:hover .nav-link-icon {
    color: var(--navbar-text) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS
   ═══════════════════════════════════════════════════════════════ */
/* The theme's `.search-box` (page toolbars, e.g. the Employees list search
   and the navbar-default top search) ships with a fixed `width: 20rem`
   (320px). On viewports narrower than that (older/small phones, or once
   page padding is subtracted on a 360-375px screen) it forces the toolbar
   row to overflow horizontally. Cap it so it shrinks to fit its container
   instead of pushing the page wider than the viewport. */
.search-box {
    max-width: 100%;
}