/* ============================================================
   Hectic — Global Site Styles
   ============================================================ */

/* Core Variables */
:root {
    --sidebar-bg: #2B2C40;
    --sidebar-hover-width: 260px;
    --sidebar-collapsed-width: 90px;
    /* This must match your main app body/background color for the cutout to look seamless */
    --app-body-bg: #EEF2F6;
    --text-inactive: #7B8296;
    --text-active: #3FA9F5;
    --icon-bg-active: #3FA9F5;
    --sidebar-collapsed-width: 90px;
    --sidebar-hover-width: 260px;
    --sb-bg: #1a1f3c;
    --sb-width: 15rem;
    --sb-collapsed-width: 4.5rem;
    --sb-topbar: 4rem;
    --sb-text: rgba(255, 255, 255, 0.48);
    --sb-text-hover: rgba(255, 255, 255, 0.85);
    --sb-divider: rgba(255, 255, 255, 0.07);
    --sb-hover-bg: rgba(255, 255, 255, 0.05);
    --accent: #4d7cfe;
    --accent-end: #00d4ff;
    --active-pill-bg: rgba(77, 124, 254, 0.15);
    --active-text: #ffffff;
    --body-bg: #f0f3fa;
    --topbar-bg: #ffffff;
    --topbar-border: #eaecf4;
    --topbar-height: 80px;
    --gray-400: #d1d3e2;
    --gray-600: #858796;
    --gray-800: #5a5c69;
    --hc-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}


/* Apply Poppins globally */
body, html {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f8f9fc;
    color: #858796;
    font-size: 0.875rem;
}



.sidebar {
    width: var(--sidebar-collapsed-width);
    height: 100vh;
    background-color: var(--sidebar-bg);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow-x: hidden;
    white-space: nowrap;
}

    /* Expand on Hover */
    .sidebar:hover {
        width: var(--sidebar-hover-width);
    }

.sidebar-header {
    height: 80px;
    display: flex;
    align-items: center;
    padding-left: 25px; /* Aligns with icons */
}

.logo {
    color: white;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 2px;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Base list item setup */
.nav-item {
    position: relative;
    padding-left: 20px; /* Space on the left so the cutout doesn't hit the screen edge */
}

/* The clickable link area */
.nav-link {
    display: flex;
    align-items: center;
    height: 55px;
    text-decoration: none;
    color: var(--text-inactive);
    border-radius: 30px 0 0 30px; /* Round left corners */
    cursor: pointer;
    transition: color 0.2s ease;
    padding-right: 15px;
}

    .nav-link:hover {
        color: white;
    }

.nav-icon-wrap {
    font-size: x-large;
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: 5px;
    margin-right: 15px;
    transition: background-color 0.2s ease;
}

.icon-container {
    font-size: x-large;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    margin-right: 15px;
    transition: background-color 0.2s ease;
}

/* Icon SVG defaults */
.nav-link svg {
    width: 22px;
    height: 22px;
}

.nav-text {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-inactive);
    opacity: 0;
    transition: opacity 0.2s ease;
    flex-grow: 1;
}

/* Show text and chevrons only when expanded */
.sidebar:hover .nav-text,
.sidebar:hover .chevron {
    opacity: 1;
    transition-delay: 0.1s; /* Slight delay for smooth fade in */
}

/* =========================================
   ACTIVE STATE & CUTOUT MAGIC 
   ========================================= */

.nav-item.active .nav-link {
    background-color: var(--app-body-bg);
}

.nav-item.active .nav-text {
    color: var(--text-active);
}

.nav-item.active .icon-container {
    color: var(--text-active);
}

    .nav-item.active .icon-container svg {
        stroke: white; /* Make the active icon white */
    }

/* The curved 'cutouts' above and below the active item */
.nav-item.active::before,
.nav-item.active::after {
    content: "";
    position: absolute;
    right: 0;
    width: 25px;
    height: 25px;
    background-color: transparent;
    pointer-events: none;
}

/* Top Cutout Curve */
.nav-item.active::before {
    top: -25px;
    border-bottom-right-radius: 25px;
    box-shadow: 10px 10px 0 10px var(--app-body-bg);
}

/* Bottom Cutout Curve */
.nav-item.active::after {
    bottom: -25px;
    border-top-right-radius: 25px;
    box-shadow: 10px -10px 0 10px var(--app-body-bg);
}



/* Card defaults */
.card {
    border-radius: 0.75rem;
}

.border-round {
    border-radius: 0.75rem;
}

/* Utility */
.text-14 {
    font-size: 14px;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

/* Syncfusion Grid font */
.e-grid,
.e-grid .e-gridcontent,
.e-grid .e-gridheader,
.e-grid .e-headercell,
.e-grid .e-rowcell {
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.82rem;
}

/* Syncfusion Chart font */
.e-chart {
    font-family: 'Poppins', sans-serif !important;
}

/* Blazor error UI */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Toast icon font (kept for Syncfusion toasts) */
@font-face {
    font-family: 'Toast_icons';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.toast-icons {
    font-family: 'Toast_icons' !important;
    speak: none;
    font-size: 55px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.toast-icons.e-success::before { content: "\e701"; }
.toast-icons.e-error::before   { content: "\e700"; }
.toast-icons.e-info::before    { content: "\e704"; }
.toast-icons.e-warning::before { content: "\e703"; }


/* ============================================================
   hectic-menu — AppNav global styles
   Selectors confirmed from live rendered HTML inspection.
   SfMenu renders as div.e-menu-container (not e-menu-wrapper).
   URL items: li.e-navigable > a.e-menu-url > div.e-anchor-wrap
   Non-URL items: li (plain text + span.e-caret as direct children)
   Popups are portalled to <body> — must be targeted globally.
   ============================================================ */

/* ── Bar container: transparent so AppBar bg shows through ──
   :not(.e-menu-popup) prevents this from also matching the popup
   (the popup div also has e-menu-container + hectic-menu)        ── */
.hectic-menu.e-menu-container:not(.e-menu-popup),
.hectic-menu.e-menu-container:not(.e-menu-popup) .e-menu,
.hectic-menu.e-menu-container:not(.e-menu-popup) .e-menu-parent {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.70) !important;
}

/* ── All top-level <li> items ── */
.hectic-menu .e-menu-item {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.70) !important;
    font-size: 13px !important;
    transition: background 0.15s, color 0.15s;
    display: inline-flex !important;
    align-items: center !important;
}

/* ── URL items: the <a> tag and its inner wrapper ── */
.hectic-menu .e-menu-item .e-menu-url,
.hectic-menu .e-menu-item .e-anchor-wrap {
    color: rgba(255, 255, 255, 0.70) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px;
}

/* ── Caret: inline, vertically centred, for both item types ── */
.hectic-menu .e-menu-item .e-caret,
.hectic-menu .e-anchor-wrap .e-caret {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 3px !important;
    font-size: 10px !important;
    vertical-align: middle !important;
}

/* ── Hover ── */
.hectic-menu .e-menu-item:hover,
.hectic-menu .e-menu-item:focus {
    background: rgba(255, 255, 255, 0.09) !important;
    color: #fff !important;
}

.hectic-menu .e-menu-item:hover .e-menu-url,
.hectic-menu .e-menu-item:hover .e-anchor-wrap,
.hectic-menu .e-menu-item:focus .e-menu-url {
    color: #fff !important;
}

/* ── Selected / active route ── */
.hectic-menu .e-menu-item.e-selected,
.hectic-menu .e-menu-item.e-selected .e-menu-url,
.hectic-menu .e-menu-item.e-selected .e-anchor-wrap {
    color: #7ecfff !important;
    border-bottom: 2px solid #7ecfff !important;
    background: transparent !important;
}

/* ── Submenu popup (portalled to <body>) ──
   Confirmed rendered HTML:
     div.e-contextmenu-container.e-sfcontextmenu.e-menu-container
        .e-menu-popup.e-lib.e-control.hectic-menu
       └─ ul.e-menu-parent.e-ul
           └─ li.e-menu-item.e-navigable
               └─ a.e-menu-text.e-menu-url
                   └─ div.e-anchor-wrap
   ── */

/* Outer popup div + its inner ul */
.hectic-menu.e-menu-popup,
.hectic-menu.e-menu-popup .e-menu-parent,
.hectic-menu.e-menu-popup ul {
    background: #16213e !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

/* Items */
.hectic-menu.e-menu-popup .e-menu-item {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 13px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* URL anchor + its text wrapper */
.hectic-menu.e-menu-popup .e-menu-item .e-menu-url,
.hectic-menu.e-menu-popup .e-menu-item .e-anchor-wrap {
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
}

/* Hover */
.hectic-menu.e-menu-popup .e-menu-item:hover,
.hectic-menu.e-menu-popup .e-menu-item:focus {
    background: rgba(63, 169, 245, 0.16) !important;
    color: #fff !important;
}

.hectic-menu.e-menu-popup .e-menu-item:hover .e-menu-url,
.hectic-menu.e-menu-popup .e-menu-item:hover .e-anchor-wrap {
    color: #fff !important;
}