/* ============================================================================
   MREP Portal — Enterprise Theme
   Professional, enterprise-grade polish layered on top of the existing theme.
   Palette teal; font is Inter across the whole app (incl. the login page).
   Loaded globally after theme-bundle.css so it wins.
   ========================================================================== */
/* Inter — SELF-HOSTED (no CDN). Font files live in /theme/fonts (this file is in
   /theme/css/, so ../fonts resolves). Weights mirror the old Google Fonts import
   (300–700). DM Sans was also imported but is unused anywhere, so it's dropped. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/Inter_18pt-Light.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Inter_18pt-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Inter_18pt-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Inter_18pt-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Inter_18pt-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/Inter_18pt-Italic.ttf') format('truetype'); }

/* ----------------------------------------------------------------------------
   Feather icon font — re-declared with a WORKING path.
   The bundled copy (vendors.min.css) is relocated by WebOptimizer into
   /theme/css/theme-bundle.css, which breaks its url(../fonts/…) (points to the
   non-existent /theme/fonts). This file lives in /theme/css/, so ../vendors/fonts
   resolves correctly and the menu / arrow icons render. Loads after the bundle,
   so it wins for the "feather" family.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "feather";
    src: url("../vendors/fonts/feather.woff") format("woff"),
         url("../vendors/fonts/feather.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

:root {
    /* Brand (Martin Dow blue) */
    --mrep-brand: #2AABA0;
    --mrep-brand-600: #1D8C82;
    --mrep-brand-700: #1D8C82;
    --mrep-brand-800: #16766D;
    --mrep-brand-050: #E8F8F7;    /* tint */
    --mrep-brand-100: #D0F0EE;    /* pale */
    --mrep-teal-light: #B2E8E4;   /* blue link (name kept for compatibility) */
    --mrep-brand-rgb: 42, 171, 160;

    /* Neutral scale (light enterprise) */
    --mrep-ink: #1A2332;
    --mrep-ink-soft: #2D3748;
    --mrep-muted: #8896A8;
    --mrep-line: #DDE3EC;
    --mrep-line-soft: #EEF1F6;
    --mrep-surface: #ffffff;
    --mrep-canvas: #F7F9FC;
    --mrep-canvas-2: #EEF1F6;

    /* Sidebar (light) */
    --mrep-sidebar-bg: #141B2D;

    /* Status */
    --mrep-success: #3A9E40;
    --mrep-danger: #C83438;
    --mrep-warning: #E07820;
    --mrep-info: #2070C8;

    /* Elevation */
    --mrep-shadow-sm: 0 1px 3px rgba(42, 171, 160, .07), 0 1px 2px rgba(42, 171, 160, .04);
    --mrep-shadow-md: 0 4px 16px rgba(42, 171, 160, .09), 0 2px 6px rgba(42, 171, 160, .05);
    --mrep-shadow-lg: 0 12px 40px rgba(42, 171, 160, .12), 0 4px 12px rgba(42, 171, 160, .06);

    --mrep-radius: 10px;
    --mrep-radius-sm: 7px;
    --mrep-font: 'Inter', "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Base typography & canvas -------------------------------------------- */
/* font-family forced project-wide so the whole app matches the login page. */
body,
body .nxl-container,
body .nxl-content,
.nxl-navigation,
.nxl-header,
.btn,
.form-control,
.form-select,
table {
    font-family: var(--mrep-font) !important;
}

body {
    color: var(--mrep-ink);
    background: var(--mrep-canvas) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.nxl-content,
.nxl-container {
    background: var(--mrep-canvas);
}

/* Page title band */
.page-title #bodyTitle,
#bodyTitle {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: var(--mrep-ink);
}

.page-title .fa-info-circle {
    color: var(--mrep-muted);
    font-size: .85rem;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
    border-radius: var(--mrep-radius-sm);
    font-weight: 600;
    letter-spacing: .01em;
    transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary,
.btn-success {
    background-color: var(--mrep-brand);
    border-color: var(--mrep-brand);
    color: #fff;
}

.btn-primary:hover,
.btn-success:hover,
.btn-primary:focus,
.btn-success:focus {
    background-color: var(--mrep-brand-600);
    border-color: var(--mrep-brand-600);
    box-shadow: 0 0 0 3px rgba(42, 171, 160, .22);
    color: #fff;
}

.btn-outline-primary {
    color: var(--mrep-brand-600);
    border-color: var(--mrep-brand);
}
.btn-outline-primary:hover {
    background-color: var(--mrep-brand);
    border-color: var(--mrep-brand);
    color: #fff;
}

/* ---- Location Status heat bar ---------------------------------------------
   Calls Dashboard > Qualitative Performance: one stacked bar per team, split
   On / Near / Off / Undefined, with the four counts printed across the middle
   the way the V3 dashboard showed them ("27:5:48:20").

   Only the segment WIDTHS are set from JS - everything else lives here, so the
   bar can be restyled without touching the dashboard script. New class names,
   used by that one column.

   The cell itself is widened and centred by mrepui's own .mrep-cell-html opt-in,
   which the script adds - see the note there before changing display here.       */
.mrep-locbar {
    position: relative;
    display: flex;
    width: 100%;
    height: 20px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--mrep-line-soft);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
}

.mrep-locbar-seg { height: 100%; min-width: 0; }

/* Semantic fills, each a light→rich→deep sweep so the bar reads as a heat bar
   rather than four flat blocks. Same hues as the legend dots above the grid. */
.mrep-locbar-seg.is-on { background: linear-gradient(135deg, #6FC46F 0%, #449946 55%, #2E7D33 100%); }
.mrep-locbar-seg.is-near { background: linear-gradient(135deg, #FFE783 0%, #FFD23E 55%, #E9B21C 100%); }
.mrep-locbar-seg.is-off { background: linear-gradient(135deg, #FF7373 0%, #FE3333 55%, #D41B1B 100%); }
.mrep-locbar-seg.is-undefined { background: linear-gradient(135deg, #EDEDED 0%, #D9D9D9 55%, #BDBDBD 100%); }

/* One label across the whole bar, not one per segment: a 5% slice has no room
   for its own text, and the four numbers together are what the reader wants. */
.mrep-locbar-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
    pointer-events: none;     /* the bar keeps its own tooltip */
    white-space: nowrap;
}

/* A team with no location data at all — an em dash, so the row does not look
   like a rendering failure. */
.mrep-locbar-empty {
    color: var(--mrep-muted);
    font-size: 12px;
}

/* ---- Page action bar ------------------------------------------------------
   The strip of page-level buttons above the content (Save, Apply, Export).

   Flex rather than `text-align: right` on a column: alignment then comes from the
   container, so it holds however the button itself is styled — text-align cannot
   right-align a button that any rule has made display:block, which is why the
   earlier `col-md-12 text-end` markup left it stranded on the left.

       <div class="page-actions">
           <button class="mrep-btn primary">Save Changed</button>
       </div>

   Layout only — the button keeps whatever look its own class gives it (.mrep-btn,
   .btn-primary …), so nothing here has to be restated when the brand changes.
   A new class: only Employee > Manage Menu (Designation Wise) uses it today.       */
.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

/* Left-align, or split (first button left, the rest right), for pages that want it. */
.page-actions.is-start { justify-content: flex-start; }
.page-actions.is-between { justify-content: space-between; }

/* Full width once the buttons no longer fit side by side — a half-width button
   stranded on a phone is harder to hit than one that spans the row. */
@media (max-width: 575.98px) {
    .page-actions { justify-content: stretch; }
    .page-actions > * { flex: 1 1 100%; }
}

/* ============================================================================
   Sidebar navigation — dark ink-navy (exact match to sidebar-menu.html)
   Demo tokens: bg #141B2D  soft #1B2438  border #232E47  text #B9C2D6
                dim #6E7A93  bright #F2F5FA  accent #2FBF9B
   ========================================================================== */
.nxl-navigation .navbar-wrapper {
    background: #141B2D;
    border-right: 1px solid #232E47;
    display: flex; flex-direction: column; height: 100%;
    color: #B9C2D6;
    font-family: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
}
.nxl-navigation .navbar-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.nxl-navigation .m-header { padding: 16px 18px 12px; border-bottom: 1px solid #232E47; }
.nxl-navigation hr.hr1, .nxl-navigation hr.hr2 { border: none; border-top: 1px solid #232E47; margin: 6px 16px; }

/* profile / logged-user card */
.nxl-navigation .Desi {
    display: flex; align-items: center; gap: 10px;
    margin: 10px 12px; padding: 10px 12px;
    background: #1B2438; border: 1px solid #232E47; border-radius: 10px;
}
.nxl-navigation .Profile_l, .nxl-navigation .Pr { flex: 0 0 auto; line-height: 0; }
.nxl-navigation .profile_New { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #33405E; }
.nxl-navigation .Profile_R { min-width: 0; }
.nxl-navigation .Designation { color: #F2F5FA; font-weight: 600; font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* search — demo .sb-search-box */
.nxl-navigation .Search_bar { margin: 14px 16px 6px; }
.Search-field {
    width: 100%; border-radius: 8px !important;
    border: 1px solid #232E47 !important;
    background: #1B2438 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7A93' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 11px center !important;
    background-size: 14px !important;
    color: #F2F5FA !important; padding: 8px 11px 8px 34px !important; font-size: 13.5px !important;
}
.Search-field::placeholder { color: #6E7A93 !important; }
.Search-field:focus { border-color: #2FBF9B !important; outline: none; box-shadow: none !important; }

/* nav scroll — demo .sb-nav padding: 10px 12px 16px */
#sidebar-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 10px 12px 16px; }
#sidebar-nav::-webkit-scrollbar { width: 5px; }
#sidebar-nav::-webkit-scrollbar-thumb { background: #232E47; border-radius: 3px; }

/* ---- Header (top bar) refinements ---------------------------------------- */
.nxl-header .header-wrapper { padding: 0 22px; min-height: 60px; }
.nxl-header .user-avtar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--mrep-line); }
.nxl-header .nxl-head-link {
    color: var(--mrep-ink-soft); border-radius: 9px; padding: 8px 12px;
    transition: background-color .15s ease;
}
.nxl-header .nxl-head-link:hover { background: var(--mrep-brand-050); color: var(--mrep-brand-700); }
.nxl-header .nxl-h-badge { border: 2px solid #fff; }
.nxl-navigation-toggle a { color: var(--mrep-ink-soft); }
.nxl-navigation-toggle a:hover { color: var(--mrep-brand); }

/* ---- Top header ---------------------------------------------------------- */
.nxl-header .header-wrapper {
    background: var(--mrep-surface);
    border-bottom: 1px solid var(--mrep-line);
    box-shadow: var(--mrep-shadow-sm);
}

.nxl-h-item .nxl-head-link {
    border-radius: 8px;
}

/* ---- Cards / content panels --------------------------------------------- */
.dashboard_graph,
.card,
.report-card {
    background: var(--mrep-surface);
    border: 1px solid var(--mrep-line);
    border-radius: var(--mrep-radius);
    box-shadow: var(--mrep-shadow-sm);
    padding: 16px;
}

/* ---- Form controls ------------------------------------------------------- */
.form-control,
.form-select,
input.reportrange-picker-field {
    border-radius: var(--mrep-radius-sm);
    border: 1px solid var(--mrep-line);
    color: var(--mrep-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mrep-brand);
    box-shadow: 0 0 0 3px rgba(42, 171, 160, .18);
}

/* ---- Bootstrap modals (used for report info etc.) ------------------------ */
.modal-content {
    border: none;
    border-radius: var(--mrep-radius);
    box-shadow: var(--mrep-shadow-lg);
    overflow: hidden;
}
.modal-header {
    background: var(--mrep-brand-050);
    border-bottom: 1px solid var(--mrep-line);
}
.modal-title { color: var(--mrep-brand-800); font-weight: 700; }

/* ---- Scrollbars ---------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: #c3ccd8 transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: #c3ccd8;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #a7b3c2; background-clip: content-box; }

/* ---- Footer -------------------------------------------------------------- */
.footer {
    background: var(--mrep-surface);
    border-top: 1px solid var(--mrep-line);
    color: var(--mrep-muted);
}
.footer .version strong { color: var(--mrep-brand) !important; }

/* ============================================================================
   Sidebar overrides — must beat ThemeOverRide.css   (exact sidebar-menu.html)
   ========================================================================== */
/* force the demo font on the sidebar TEXT (beats the global Inter).
   NOTE: must NOT target <i>/icon elements — they need font-family:feather,
   so we list text-bearing elements explicitly instead of using a `*` selector. */
.nxl-navigation .navbar-wrapper,
.nxl-navigation .navbar-wrapper .nxl-link,
.nxl-navigation .navbar-wrapper .m-link-label,
.nxl-navigation .navbar-wrapper .nxl-mtext,
.nxl-navigation .navbar-wrapper .nxl-caption,
.nxl-navigation .navbar-wrapper .Designation,
.nxl-navigation .navbar-wrapper .Search-field,
.nxl-navigation .navbar-wrapper .badge {
    font-family: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif !important;
}

/* ---- resizable + wider sidebar --------------------------------------------
   Default width 296px (roomier than the old 280px). The drag handle writes
   --sb-w on <html>, and every layout offset that used a hard 280px follows it.
   Scoped to :not(.minimenu) so the collapsed (icon) mode keeps its own width.
   IMPORTANT: only on DESKTOP (>=1025px). Below that the theme's own responsive
   layout takes over — the sidebar goes off-canvas (`left:-280px`, toggled by the
   mobile hamburger) and content is full-width (`margin-left:0`); these !important
   offsets must NOT fight that or the content gets pushed off-screen. */
:root { --sb-w: 296px; }
@media (min-width: 1025px) {
    html:not(.minimenu) .nxl-navigation { width: var(--sb-w) !important; }
    html:not(.minimenu) .nxl-container   { margin-left: var(--sb-w) !important; }
    html:not(.minimenu) .nxl-header      { left: var(--sb-w) !important; }
    html:not(.minimenu) .page-header     { left: var(--sb-w) !important; }
    html:not(.minimenu) .footer_Side     { width: var(--sb-w) !important; }
}
/* mobile: hide the desktop drag-resizer */
@media (max-width: 1024px) { .nxl-navigation .sb-resizer { display: none !important; } }

/* drag-to-resize handle on the sidebar's right edge */
.nxl-navigation .sb-resizer {
    position: absolute; top: 0; right: 0; width: 5px; height: 100%;
    cursor: col-resize; z-index: 1030; background: transparent;
    transition: background .15s ease;
}
.nxl-navigation .sb-resizer:hover,
body.sb-resizing .nxl-navigation .sb-resizer { background: rgba(47,191,155,.45); }
body.sb-resizing { cursor: col-resize !important; user-select: none !important; }
html.minimenu .nxl-navigation .sb-resizer { display: none; }

/* kill ThemeOverRide's connector dots / lines — demo uses a clean guide line */
.nxl-navigation .navbar-content .nxl-submenu > .nxl-item::before,
.nxl-navigation .navbar-content .nxl-submenu > .nxl-item::after,
.nxl-navigation .navbar-content .nav.child_menu > li::before,
.nxl-navigation .navbar-content .nav.child_menu > li::after { content: none !important; }

/* item spacing — roomy rows (not compact) */
.nxl-navigation .navbar-content ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.nxl-navigation .navbar-content li.nxl-item { margin: 2px 0 !important; }

/* ---- top-parent = uppercase section caption (scrolls with the list) ---- */
.nxl-navigation .navbar-content li.nxl-item.nxl-caption {
    position: static !important;
    margin: 0 !important; padding: 13px 12px 6px !important;
    background: transparent !important;
    color: #6E7A93 !important;
    font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 1.2px !important;
    text-transform: uppercase !important; white-space: nowrap;
}
.nxl-navigation .navbar-content li.nxl-item.nxl-caption label {
    display: block !important; margin: 0 !important; color: inherit !important;
    font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important;
    text-transform: inherit !important; cursor: default;
}
.nxl-navigation .navbar-content li.nxl-item.nxl-caption::before,
.nxl-navigation .navbar-content li.nxl-item.nxl-caption::after { content: none !important; }
/* collapsed (icon) mode: hide the caption text */
html.minimenu .nxl-navigation .navbar-content li.nxl-item.nxl-caption { display: none !important ; }

/* ---- parent link (demo .sb-link, scaled up a touch) ---- */
.nxl-navigation .navbar-content .nxl-link {
    display: flex !important; align-items: center !important; gap: 12px !important;
    padding: 11px 14px !important; margin: 1px 0 !important;
    border-radius: 8px !important; position: relative !important;
    font-size: 14px !important; font-weight: 500 !important; line-height: 1.35 !important;
    color: #B9C2D6 !important; text-decoration: none !important;
}
.nxl-navigation .navbar-content .nxl-link .nxl-micon { display: flex !important; align-items: center !important; gap: 12px; flex: 1 1 auto; min-width: 0; color: inherit; margin: 0 !important; }
.nxl-navigation .navbar-content .nxl-link .nxl-micon > i,
.nxl-navigation .navbar-content .nxl-link .nxl-micon > svg { font-size: 18px !important; width: 20px; text-align: center; flex: 0 0 auto; line-height: 1; }

/* icon color must follow the menu text — base / hover / active.
   (theme.min.css forces .nxl-micon i to #001327 on hover+active → black icons) */
.nxl-navigation .navbar-content .nxl-link .nxl-micon i { color: #B9C2D6 !important; }
.nxl-navigation .navbar-content .nxl-link:hover .nxl-micon i,
.nxl-navigation .navbar-content .nxl-item:hover > .nxl-link .nxl-micon i { color: #F2F5FA !important; }
.nxl-navigation .navbar-content .nxl-item.active > .nxl-link .nxl-micon i,
.nxl-navigation .navbar-content .nxl-link.active .nxl-micon i { color: #2FBF9B !important; }
.nxl-navigation .navbar-content .nxl-link .m-link-label { padding-left: 0 !important; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxl-navigation .navbar-content .nxl-link .nxl-mtext { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- chevron: vertically centered (demo .chev) ---- */
.nxl-navigation .navbar-content .nxl-link .nxl-arrow {
    position: static !important; top: auto !important; right: auto !important;
    margin-left: auto !important; align-self: center !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    flex: 0 0 auto; color: #6E7A93 !important; transition: transform .2s ease !important;
}
.nxl-navigation .navbar-content .nxl-link .nxl-arrow i {
    font-size: 12px !important; line-height: 1 !important; display: block !important; font-weight: 400 !important; margin: 0 !important;
}
.nxl-navigation .navbar-content .nxl-hasmenu.active > .nxl-link .nxl-arrow,
.nxl-navigation .navbar-content .nxl-hasmenu.open > .nxl-link .nxl-arrow,
.nxl-navigation .navbar-content .nxl-hasmenu.nxl-trigger > .nxl-link .nxl-arrow { transform: rotate(90deg) !important; }

/* ---- hover (demo .sb-link:hover) ---- */
.nxl-navigation .navbar-content .nxl-link:hover { background: rgba(255,255,255,.05) !important; color: #F2F5FA !important; }
.nxl-navigation .navbar-content .nxl-link:hover .nxl-micon,
.nxl-navigation .navbar-content .nxl-link:hover .m-link-label,
.nxl-navigation .navbar-content .nxl-link:hover .nxl-mtext { color: #F2F5FA !important; }

/* ---- active state + STRAIGHT left rail (demo .sb-link.active::before) ---- */
.nxl-navigation .navbar-content .nxl-item.active > .nxl-link,
.nxl-navigation .navbar-content .nxl-link.active {
    background: rgba(47,191,155,.14) !important; color: #2FBF9B !important; font-weight: 600 !important;
    box-shadow: none !important;
}
.nxl-navigation .navbar-content .nxl-item.active > .nxl-link .nxl-micon,
.nxl-navigation .navbar-content .nxl-link.active .nxl-micon { color: #2FBF9B !important; }
.nxl-navigation .navbar-content .nxl-item.active > .nxl-link::before,
.nxl-navigation .navbar-content .nxl-link.active::before {
    content: "" !important; position: absolute !important;
    left: -12px !important; top: 20% !important; bottom: 20% !important;
    width: 3px !important; height: auto !important; margin: 0 !important;
    background: #2FBF9B !important; border-radius: 0 3px 3px 0 !important; opacity: 1 !important;
}

/* ---- submenu: flush with parent + thin guide line (demo .sb-children) ---- */
.nxl-navigation .navbar-content .nxl-submenu {
    list-style: none !important; margin: 1px 0 3px !important; padding: 0 !important; position: relative !important;
}
.nxl-navigation .navbar-content .nxl-submenu::before {
    content: "" !important; display: block !important; position: absolute !important;
    left: 24px; top: 2px; bottom: 6px; width: 1px; background: #232E47 !important;
}
.nxl-navigation .navbar-content .nxl-submenu .nxl-link {
    padding: 9px 12px 9px 46px !important; margin: 1px 0 !important;
    font-size: 13.5px !important; font-weight: 400 !important; color: #6E7A93 !important; line-height: 1.35 !important;
}
.nxl-navigation .navbar-content .nxl-submenu .nxl-link:hover { color: #F2F5FA !important; background: rgba(255,255,255,.05) !important; }
/* submenu active — rail sits on the guide line (demo .sb-children .sb-link.active::before) */
.nxl-navigation .navbar-content .nxl-submenu .nxl-item.active > .nxl-link,
.nxl-navigation .navbar-content .nxl-submenu .nxl-link.active {
    background: transparent !important; color: #2FBF9B !important; font-weight: 500 !important; box-shadow: none !important;
}
.nxl-navigation .navbar-content .nxl-submenu .nxl-item.active > .nxl-link::before,
.nxl-navigation .navbar-content .nxl-submenu .nxl-link.active::before {
    content: "" !important; position: absolute !important;
    left: 24px !important; top: 25% !important; bottom: 25% !important;
    width: 1.5px !important; height: auto !important; margin: 0 !important;
    background: #2FBF9B !important; border-radius: 2px !important; opacity: 1 !important;
}
/* nested (level 3, .child_menu): one step deeper, own guide line */
.nxl-navigation .navbar-content .nxl-submenu .nxl-submenu .nxl-link,
.nxl-navigation .navbar-content .nav.child_menu .nxl-link { padding-left: 64px !important; }
.nxl-navigation .navbar-content .nxl-submenu .nxl-submenu::before,
.nxl-navigation .navbar-content .nav.child_menu::before { left: 42px !important; }

/* ---- badges: inline (demo .badge), not absolute ---- */
.nxl-navigation .navbar-content a.nxl-link .badge,
.nxl-navigation .navbar-content .nxl-link .badge {
    position: static !important; margin-left: 6px !important; flex: 0 0 auto;
    font-size: 10px !important; font-weight: 600 !important; padding: 2px 7px !important; border-radius: 20px !important;
}

/* ---- footer icon bar ---- */
.footer_Side { background: #141B2D !important; padding: 10px 14px 14px !important; border-top: 1px solid #232E47 !important; }
.Footer_sidebar { background: transparent !important; border: none !important; gap: 4px !important; padding: 2px 0 !important; justify-content: space-around !important; }
.Footer_sidebar a { text-decoration: none; line-height: 0; }
.nxl-miconFooter { display: inline-flex !important; align-items: center; justify-content: center; width: 32px !important; height: 32px !important; border-radius: 8px !important; color: #6E7A93 !important; font-size: 14px !important; gap: 0 !important; cursor: pointer; transition: all .15s ease; }
.nxl-miconFooter:hover { background: rgba(255,255,255,.05) !important; color: #F2F5FA !important; }
.Footer_sidebar a:last-child .nxl-miconFooter:hover { background: rgba(227,104,104,.15) !important; color: #E36868 !important; }

/* ---- collapsed (mini) sidebar: ICONS ONLY (center icon, hide every label) ----
   theme.min.css only hides `.nxl-mtext` (submenu text); our depth-0 items put
   their text in `.m-link-label` (inside `.nxl-micon`) so it leaked as truncated
   text at the 100px rail. Hide all labels + badges and center the icon. */
html.minimenu .nxl-navigation .navbar-content .m-link-label,
html.minimenu .nxl-navigation .navbar-content .nxl-mtext,
html.minimenu .nxl-navigation .navbar-content .nxl-link .badge,
html.minimenu .nxl-navigation .navbar-content .nxl-link .nxl-arrow { display: none !important; }
html.minimenu .nxl-navigation .navbar-content .nxl-link { justify-content: center !important; padding: 11px 0 !important; }
html.minimenu .nxl-navigation .navbar-content .nxl-link .nxl-micon { flex: 0 0 auto !important; gap: 0 !important; justify-content: center; }
html.minimenu .nxl-navigation .navbar-content .nxl-link .nxl-micon > i,
html.minimenu .nxl-navigation .navbar-content .nxl-link .nxl-micon > svg { font-size: 19px !important; }
html.minimenu .nxl-navigation .Footer_sidebar { flex-direction: column; gap: 6px; }

/* hover-to-peek in mini mode: restore labels + keep the sidebar DARK navy
   (theme.min forces a white flyout panel that clashes with our dark nav). */
html.minimenu .nxl-navigation:hover .navbar-content { background-color: #141B2D !important; width: var(--sb-w, 296px) !important; border-right: 1px solid #232E47 !important; }
html.minimenu .nxl-navigation:hover .navbar-content .m-link-label,
html.minimenu .nxl-navigation:hover .navbar-content .nxl-mtext { display: inline-block !important; }
html.minimenu .nxl-navigation:hover .navbar-content .nxl-link .nxl-arrow { display: inline-flex !important; }
html.minimenu .nxl-navigation:hover .navbar-content .nxl-link { justify-content: flex-start !important; padding: 11px 14px !important; }
html.minimenu .nxl-navigation:hover .navbar-content .nxl-link .nxl-micon { gap: 12px !important; flex: 1 1 auto !important; }
html.minimenu .nxl-navigation:hover .navbar-content li.nxl-item.nxl-caption { display: none !important; }

/* ---- Collapsed (minimenu) rail — remaining fixes ---------------------------
   Footer action icons: line 472 stacks them in a column (fits the 100px rail),
   but on hover-expand there is no override so they stay VERTICAL in the wide
   flyout. Make them a centered ROW when the rail is hover-expanded. */
html.minimenu .nxl-navigation:hover .Footer_sidebar { flex-direction: row !important; flex-wrap: nowrap !important; gap: 20px !important; justify-content: center; }
html.minimenu .nxl-navigation:hover .footer_Side { width: var(--sb-w, 296px) !important; }
/* Profile name card is redundant in the collapsed rail (the avatar sits in the top
   navbar) and renders as a cramped "…- CEO" box in the flyout — hide it + its rule
   while collapsed. The full (non-mini) sidebar is unaffected. */
/*html.minimenu .nxl-navigation .Desi,
html.minimenu .nxl-navigation .hr2 {
    display: none !important;
}*/

/* ---- Collapsed rail: hover-to-peek flyout, correct position ----------------
   theme.min.css expands the rail by switching .navbar-content to
   `position:absolute`. That was fine while .navbar-wrapper was a plain block —
   but this file makes the wrapper a FLEX column, and an absolutely positioned
   flex child takes its static position from the flex container's content-box
   corner, NOT from where it sat in flow. So the flyout jumped to the top of the
   wrapper: the search box landed on the brand row beside the logo, and the same
   upward shift pushed the nav list past the bottom (stray scrollbar strip above
   the footer bar).
   Fix the cause instead of shimming it: keep .navbar-content in normal flow and
   widen the whole wrapper on hover. The <nav> itself stays 100px, so page
   content never shifts; the wrapper simply overflows the rail and paints over
   the page (the nav is position:fixed, z-index 1026). */
html.minimenu .nxl-navigation:hover .navbar-wrapper {
    width: var(--sb-w, 296px) !important;
    box-shadow: 6px 0 24px rgba(0, 0, 0, .35);
    transition: width .16s ease;
}
html.minimenu .nxl-navigation:hover .navbar-content {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important;
    width: 100% !important;
    height: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
/* brand header follows the flyout width so the logo stays centred over it, and
   keeps the rail's height so hovering never nudges the rest of the sidebar. */
html.minimenu .nxl-navigation .m-header.main_h { align-items: center; min-height: 66px; box-sizing: border-box; }
html.minimenu .nxl-navigation:hover .m-header.main_h { width: 100% !important; }
/* …and swaps the rail's icon mark back to the full wordmark, like the expanded
   sidebar. theme.min only un-hides .nxl-mtext on hover, never .logo-lg, so the
   header was left showing the tiny "M" icon in a full-width bar.
   The wordmark is capped here rather than relying on ThemeOverRide's
   `.max-logo { width:155px }` (bundled, so it can lag behind a rebuild) — the
   cap is relative, so a dragged-narrow sidebar can never let it fill the bar. */
html.minimenu .nxl-navigation:hover .m-header .logo-lg {
    display: block !important;
    width: auto !important; height: auto !important;
    max-width: 62% !important; max-height: 34px !important;
    margin: 0 auto !important;
}
html.minimenu .nxl-navigation:hover .m-header .logo-sm { display: none !important; }
html.minimenu .nxl-navigation:hover .m-header .b-brand { display: block; width: 100%; text-align: center; }
/* the action bar is position:fixed over the list — reserve its height so the
   last menu item can still scroll clear of it (ThemeOverRide zeroes this). */
html.minimenu .nxl-navigation .navbar-content { padding-bottom: 58px !important; }
/* Perf: theme.min animates `transition: all .3s` across the nav; during the width
   animation the dashboard's responsive charts/grids re-layout every frame, so the
   collapse/hover feels laggy. Scope motion to width/transform; snap text/icons in. */
.nxl-navigation {
    transition: width .16s ease, transform .2s ease !important;
}
.nxl-navigation .navbar-content { transition: width .16s ease !important; }
.nxl-navigation .nxl-mtext, .nxl-navigation .m-link-label, .nxl-navigation .logo-lg,
.nxl-navigation .logo-sm, .nxl-navigation .nxl-arrow, .nxl-navigation .nxl-micon,
.nxl-navigation .nxl-link, .nxl-navigation .m-header { transition: none !important; }

/* ============================================================================
   Report filter bars (`.row.margin-bo`) — responsive, no overlap.
   Was col-lg-1 (~90px, too narrow for a date box) → controls overlapped. Now a
   wrapping flex row where each control gets a sensible min width and grows to
   share the space; the trailing action (Filter button) sizes to content.
   ========================================================================== */
.row.margin-bo {
    display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center;
    margin-left: 0; margin-right: 0; margin-bottom: 15px !important;
}
.row.margin-bo > [class*="col-"] {
    flex: 1 1 170px; min-width: 160px; max-width: 340px; width: auto;
    padding-left: 0; padding-right: 0;
}
.row.margin-bo > [class*="col-"]:last-child { flex: 0 0 auto; min-width: auto; max-width: none; }
.row.margin-bo > [class*="col-"] > div { width: 100%; }
@media (max-width: 575.98px) {
    .row.margin-bo > [class*="col-"] { flex-basis: 100%; max-width: none; }
    .row.margin-bo > [class*="col-"]:last-child { width: 100%; }
}

/* leaf-level responsiveness: content never forces a page-wide horizontal
   scrollbar; wide tables/grids scroll inside their own card instead. */
.nxl-content .container-fluid { max-width: 100%; }
.nxl-content .dashboard_graph, .nxl-content .card, .nxl-content .report-card { max-width: 100%; }
@media (max-width: 767.98px) {
    .nxl-content .container-fluid { padding-left: 10px; padding-right: 10px; }
    .page-title { padding: 10px 12px !important; }
}

/* ---------------------------------------------------------------------------------------------
   Master-detail notice.

   An expanded detail row that produces nothing is a bare strip the height of its own padding,
   and that looks identical whether the level has no rows or the build threw. This is what a
   detail level says instead of showing nothing. Generic on purpose: any grid with a
   masterDetail template can drop one of these in.
   --------------------------------------------------------------------------------------------- */
.mrep-detail-msg {
    padding: 6px 2px;
    font-size: .85rem;
    color: var(--mrep-muted);
}

.mrep-detail-msg.is-loading {
    color: var(--mrep-muted);
    font-style: italic;
}

.mrep-detail-msg.is-error {
    color: var(--mrep-danger);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------------------------
   Grid notice.

   A quiet line ABOVE a grid, for something the reader must know about the rows they are looking
   at but which is not worth a modal or a toast - "these figures are partial", "showing a capped
   set". A toast is the wrong shape for this: it covers the page, demands dismissal, and is gone
   by the time anyone reads the numbers it was warning about. This sits with the data, for as
   long as the data does.

   Generic on purpose: any report can drop one in and set its text.
   --------------------------------------------------------------------------------------------- */
.mrep-grid-notice {
    display: none;                    /* shown by the page when it has something to say */
    padding: 7px 12px;
    margin-bottom: 8px;
    border-radius: 6px;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--mrep-muted);
    background: var(--mrep-canvas-2);
    border-left: 3px solid var(--mrep-line);
}

.mrep-grid-notice.is-shown { display: block; }

/* Partial / degraded data. Amber, not red: the grid below it is usable, and colouring it like a
   failure trains people to ignore it. */
.mrep-grid-notice.is-warning {
    color: #8a6100;
    background: #fff8e6;
    border-left-color: #e9b21c;
}

html.theme-dark .mrep-grid-notice.is-warning {
    color: #f0c66b;
    background: #2c2917;
    border-left-color: #e9b21c;
}