/* ===================================================================
   master-clinicpro.css  -  externalized from ClinicProMaster.master <style> block.
   Loaded via a <link> in the master at the original style position so
   cascade order is preserved. Edit design here, never inline. */

        /*
         * Fluent 2 Design System — Microsoft
         * Exact token names match react.fluentui.dev
         */

        /* ── RESET ── */
        * { margin: 0; padding: 0; box-sizing: border-box; }

        /* ── BASE — Fluent 2 Body1 ── */
        html, body {
            font-family: 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
            font-size: 14px;
            line-height: 20px;
            color: var(--nf1);
            background: var(--nb2);
            overflow-x: hidden;
        }

        /* ══════════════════════════════
           SIDEBAR — Fluent 2 Nav Rail
        ══════════════════════════════ */
        .vertical-nav {
            position: fixed;
            top: 0; left: 0;
            width: var(--sidebar-w);
            height: 100vh;
            background: var(--surface-card);
            border-right: 1px solid var(--card-border, var(--ns2));
            box-shadow: 1px 0 0 var(--card-border, var(--ns2)), 4px 0 16px color-mix(in srgb, var(--scrim-soft) 70%, transparent);
            z-index: 1100;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: width 0.2s ease;
        }

        .vertical-nav.collapsed { width: var(--sidebar-collapsed); }

        /* ── Nav header (brand area) ── */
        .nav-logo {
            height: var(--topbar-h);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 12px;
            border-bottom: none;
            flex-shrink: 0;
            position: relative;
        }


        .nav-brand {
            display: flex;
            align-items: center;
            gap: 8px;
            overflow: hidden;
        }

        .nav-brand-icon {
            width: 28px; height: 28px;
            background: var(--brand-80);
            border-radius: var(--r-md);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .nav-brand-icon i { color: var(--nf-on-brand); font-size: 14px; }

        .nav-brand-logo {
            width: 110px;
            height: 32px;
            transition: width 0.15s ease, height 0.15s ease, clip-path 0.15s ease;
        }
        .vertical-nav.collapsed .nav-brand-logo {
            width: 28px;
            height: 22px;
            clip-path: inset(0 0 22% 0);
            -webkit-clip-path: inset(0 0 22% 0);
        }

        .nav-logo-text {
            font-size: 15px;
            font-weight: 700;
            color: var(--nf1);
            letter-spacing: 0.2px;
            white-space: nowrap;
            transition: opacity 0.15s, width 0.15s;
        }

        .vertical-nav.collapsed .nav-logo-text { opacity: 0; width: 0; overflow: hidden; }

        /* ── Collapse toggle — Fluent 2 Subtle Button ── */
        .nav-toggle {
            width: 28px; height: 28px;
            border-radius: var(--r-sm);
            background: transparent;
            border: 1px solid transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--nf3);
            flex-shrink: 0;
            transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
        }

        .nav-toggle:hover {
            background: var(--sel-bg);
            border-color: color-mix(in srgb, var(--brand-fg) 30%, transparent);
            color: var(--brand-fg);
        }
        .nav-toggle i { font-size: 11px; }

        /* CSS icon swap */
        .nav-toggle .icon-collapse { display: inline; }
        .nav-toggle .icon-expand   { display: none;   }
        .vertical-nav.collapsed .nav-toggle .icon-collapse { display: none;   }
        .vertical-nav.collapsed .nav-toggle .icon-expand   { display: inline; }

        /* ── Nav menu scroll area ── */
        .nav-menu {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 8px 0;
        }

        .nav-section-label {
            display: none;
        }

        .nav-menu::-webkit-scrollbar { width: 4px; }
        .nav-menu::-webkit-scrollbar-thumb { background: var(--ns2); border-radius: 2px; }

        /* Collapsed — hide text */
        .vertical-nav.collapsed .home-nav-link .nav-text    { opacity: 0; width: 0; overflow: hidden; }

        /* ── Telerik RadMenu → Fluent 2 Nav items ── */
        .vertical-radmenu,
        .vertical-radmenu ul,
        .vertical-radmenu li,
        .vertical-radmenu .rmGroup,
        .vertical-radmenu .rmRootGroup,
        .vertical-radmenu .rmItem,
        .vertical-radmenu .rmLink,
        .vertical-radmenu .rmRootLink {
            background: transparent !important;
            background-image: none !important;
            border: none !important;
            box-shadow: none !important;
            margin: 0 !important;
        }

        .vertical-radmenu {
            width: 100% !important;
            padding: 0 !important;
        }

        .vertical-radmenu .rmRootGroup {
            width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 0 !important;
            list-style: none !important;
            padding: 0 !important;
        }

        .vertical-radmenu .rmItem {
            width: 100% !important;
            padding: 0 !important;
        }

        /* Icon before each root item */
        .home-nav-link .nav-text,
        .logout-link .nav-text,
        .vertical-radmenu .rmRootLink .rmText {
            display: block !important;
            flex: 1 1 auto !important;
            min-width: 0 !important;
        }

        .vertical-radmenu .rmRootLink .rmText:before {
            content: none !important;
        }

        /* Sub-menu — static, indented, no padding/gap */
        .vertical-radmenu .rmSlide {
            position: static !important;
            background: transparent !important;
            padding: 0 !important;
            border: none !important;
            box-shadow: none !important;
        }

        /* Sub-item — flat full-width with left indent */
        .vertical-radmenu .rmSlide .rmLink {
            height: 34px !important;
            display: flex !important;
            align-items: center !important;
            padding: 0 18px 0 46px !important;
            font-size: 12px !important;
            font-weight: 400 !important;
            color: var(--nf2) !important;
            border-radius: 0 !important;
            transition: background 0.1s !important;
        }

        .vertical-radmenu .rmSlide .rmLink:hover {
            background: var(--nb1-hover) !important;
            color: var(--nf1) !important;
        }

        /* Collapsed — hide text + submenu */
        .vertical-nav.collapsed .vertical-radmenu .rmRootLink .rmText { opacity: 0; width: 0; overflow: hidden; }
        .vertical-nav.collapsed .vertical-radmenu .rmSlide { display: none !important; }

        /* ── Logout — bottom of sidebar ── */
        .nav-logout {
            padding: 10px 0 14px;
            border-top: none;
            flex-shrink: 0;
            position: relative;
        }

        .logout-link {
            color: var(--danger) !important;
        }
        .logout-link i {
            color: var(--danger) !important;
        }
        .logout-link:hover {
            color: var(--danger) !important;
            background: var(--danger-bg) !important;
        }
        .vertical-nav.collapsed .logout-link .nav-text { opacity: 0; width: 0; overflow: hidden; }

        .vertical-nav.collapsed .home-nav-link,
        .vertical-nav.collapsed .vertical-radmenu .rmRootLink,
        .vertical-nav.collapsed .logout-link {
            width: 36px !important;
            height: 36px !important;
            justify-content: center !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            gap: 0 !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

        .vertical-nav.collapsed .home-nav-link i,
        .vertical-nav.collapsed .vertical-radmenu .rmRootLink .menu-item-icon,
        .vertical-nav.collapsed .logout-link i {
            margin: 0 auto !important;
        }

        .vertical-nav.collapsed .home-nav-link .nav-text,
        .vertical-nav.collapsed .logout-link .nav-text,
        .vertical-nav.collapsed .vertical-radmenu .rmRootLink .rmText {
            display: none !important;
        }

        .home-nav-link,
        .vertical-radmenu .rmRootLink,
        .logout-link {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        /* Final unification layer — flat full-width rows, no individual rounded boxes */
        .sidebar-nav-item,
        .home-nav-link,
        .logout-link,
        .vertical-radmenu .rmRootLink {
            position: relative !important;
            display: flex !important;
            align-items: center !important;
            width: 100% !important;
            height: 38px !important;
            padding: 0 18px !important;
            margin: 0 !important;
            gap: 12px !important;
            border: none !important;
            border-radius: 0 !important;
            overflow: hidden !important;
            background: transparent !important;
            background-image: none !important;
            box-shadow: none !important;
            color: var(--nf2) !important;
            font-family: inherit !important;
            font-size: 13px !important;
            font-weight: 400 !important;
            line-height: 20px !important;
            text-decoration: none !important;
            white-space: nowrap !important;
            transition: background 0.1s ease, color 0.1s ease !important;
            cursor: pointer !important;
        }

        .sidebar-nav-item:hover,
        .sidebar-nav-item.is-hovered,
        .home-nav-link:hover,
        .vertical-radmenu .rmItem.rmHovered > .rmRootLink {
            background: color-mix(in srgb, var(--ns1) 40%, transparent) !important;
            color: var(--nf1) !important;
        }

        /* ACTIVE STATE — one look for EVERY rail tab (Home, Telerik menu
           items, and any future entries): brand-tinted tile, brand-colored
           icon AND visible label, plus the left accent bar. The selectors
           cover the raw classes too so a tab lights up even before the JS
           normalizer has added .sidebar-nav-item to it. */
        .sidebar-nav-item.is-active,
        .home-nav-link.is-active,
        .vertical-radmenu .rmRootLink.is-active,
        .vertical-radmenu .rmItem.rmSelected > .rmRootLink,
        .vertical-radmenu .rmRootLink.rmSelected,
        .vertical-radmenu .rmRootLink.rmFocused {
            background: var(--sel-bg) !important;
            color: var(--brand-fg) !important;
            font-weight: 600 !important;
            box-shadow: none !important;
        }

        .sidebar-nav-item.is-active > i,
        .sidebar-nav-item.is-active > .menu-item-icon,
        .sidebar-nav-item.is-active i.fa.menu-item-icon,
        .home-nav-link.is-active > i,
        .vertical-radmenu .rmRootLink.is-active > i,
        .vertical-radmenu .rmRootLink.is-active > .menu-item-icon,
        .vertical-radmenu .rmItem.rmSelected > .rmRootLink > .menu-item-icon,
        .vertical-radmenu .rmRootLink.rmSelected > .menu-item-icon {
            color: var(--brand-fg) !important;
        }

        /* Active label: always visible and in the brand color */
        .sidebar-nav-item.is-active > .nav-text,
        .sidebar-nav-item.is-active > .rmText,
        .sidebar-nav-item.is-active .sidebar-nav-text,
        .home-nav-link.is-active > .nav-text,
        .vertical-radmenu .rmRootLink.is-active > .rmText,
        .vertical-radmenu .rmItem.rmSelected > .rmRootLink > .rmText,
        .vertical-radmenu .rmRootLink.rmSelected > .rmText {
            color: var(--brand-fg) !important;
            font-weight: 600 !important;
        }

        .sidebar-nav-item.is-active::before,
        .home-nav-link.is-active::before,
        .vertical-radmenu .rmRootLink.is-active::before,
        .vertical-radmenu .rmItem.rmSelected > .rmRootLink::before,
        .vertical-radmenu .rmRootLink.rmSelected::before {
            content: '';
            position: absolute;
            left: 0;
            top: 6px;
            bottom: 6px;
            width: 3px;
            border-radius: 0 2px 2px 0;
            background: var(--brand-80);
        }

        .vertical-nav .sidebar-nav-item > i,
        .vertical-nav .sidebar-nav-item > .menu-item-icon,
        .vertical-nav .home-nav-link > i,
        .vertical-nav .logout-link > i,
        .vertical-nav .vertical-radmenu .rmRootLink > .menu-item-icon,
        .vertical-nav .vertical-radmenu .rmRootLink > i,
        .vertical-nav .vertical-radmenu .rmRootLink > i.fa,
        .vertical-nav i.fa.menu-item-icon,
        .vertical-nav .home-nav-link i.fa,
        .vertical-nav .logout-link i.fa {
            width: 20px !important;
            min-width: 20px !important;
            height: 20px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 16px !important;
            line-height: 1 !important;
            flex-shrink: 0 !important;
            color: var(--nf2) !important;
            margin: 0 !important;
            padding: 0 !important;
            text-align: center !important;
        }

        .sidebar-nav-item.is-active > i,
        .sidebar-nav-item.is-active > .menu-item-icon {
            color: var(--brand-fg) !important;
        }

        .vertical-radmenu .rmRootLink {
            border-radius: 0 !important;
        }

        .sidebar-nav-text,
        .sidebar-nav-item > .nav-text,
        .sidebar-nav-item > .rmText {
            display: block !important;
            flex: 1 1 auto !important;
            min-width: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            color: inherit !important;
            font: inherit !important;
            line-height: inherit !important;
            text-decoration: none !important;
        }

        .sidebar-nav-item.logout-link,
        .sidebar-nav-item.logout-link > i {
            color: var(--danger) !important;
        }

        .sidebar-nav-item.logout-link:hover,
        .sidebar-nav-item.logout-link.is-hovered {
            background: var(--danger-bg) !important;
            color: var(--danger) !important;
        }

        .sidebar-nav-item.logout-link.is-active {
            background: var(--danger-bg) !important;
            color: var(--danger) !important;
        }

        .vertical-nav.collapsed .sidebar-nav-item {
            width: 100% !important;
            height: 38px !important;
            justify-content: center !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            gap: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        .vertical-nav.collapsed .sidebar-nav-item > i,
        .vertical-nav.collapsed .sidebar-nav-item > .menu-item-icon {
            margin: 0 auto !important;
        }

        .vertical-nav.collapsed .sidebar-nav-text,
        .vertical-nav.collapsed .sidebar-nav-item > .nav-text,
        .vertical-nav.collapsed .sidebar-nav-item > .rmText {
            display: none !important;
        }

        /* ══════════════════════════════
           MAIN CONTENT
        ══════════════════════════════ */
        .main-content {
            margin-left: var(--sidebar-w);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            transition: margin-left 0.2s ease;
        }

        body.sidebar-collapsed .main-content { margin-left: var(--sidebar-collapsed); }

        /* ══════════════════════════════
           TOP BAR — Fluent 2 Toolbar
        ══════════════════════════════ */
        .app-header {
            position: fixed;
            top: 0;
            left: var(--sidebar-w);
            right: 0;
            height: var(--topbar-h);
            background: var(--surface-card);
            border-bottom: 1px solid var(--card-border, var(--ns2));
            box-shadow: 0 1px 0 var(--card-border, var(--ns2)), 0 4px 14px color-mix(in srgb, var(--scrim-soft) 60%, transparent);
            padding: 0 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 100;
            transition: left 0.2s ease;
        }

        body.sidebar-collapsed .app-header { left: var(--sidebar-collapsed); }

        .main-content { padding-top: var(--topbar-h); }

        .mobile-menu-btn { display: none; }

        /* Page title — Fluent 2 Subtitle2: 20px / 600 */
        .header-page-title {
            flex: 1;
            font-size: 16px;
            font-weight: 600;
            line-height: 22px;
            color: var(--nf1);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .header-action-link {
            height: 32px;
            min-width: 32px;
            padding: 0 12px;
            border-radius: var(--r-sm);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            text-decoration: none !important;
            color: var(--nf2) !important;
            background: transparent;
            border: 1px solid transparent;
            flex-shrink: 0;
            transition: background 180ms cubic-bezier(.33,0,.67,1),
                        color 180ms cubic-bezier(.33,0,.67,1),
                        border-color 180ms cubic-bezier(.33,0,.67,1),
                        transform 180ms cubic-bezier(.33,0,.67,1);
        }

        .header-action-link:hover {
            background: var(--sel-bg);
            border-color: color-mix(in srgb, var(--brand-fg) 30%, transparent);
            color: var(--brand-fg) !important;
        }

        .header-action-link:active { transform: scale(0.97); }

        .header-action-link i {
            width: 16px;
            text-align: center;
            font-size: 14px;
        }

        .header-action-label {
            font-size: 13px;
            font-weight: 600;
            line-height: 16px;
            letter-spacing: 0.1px;
            white-space: nowrap;
        }

        /* ── User persona — Fluent 2 PersonaButton style ── */
        .top-greeting {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 4px 10px 4px 4px;
            border-radius: 999px;
            flex-shrink: 0;
            cursor: default;
            border: 1px solid transparent;
            transition: background 180ms cubic-bezier(.33,0,.67,1),
                        border-color 180ms cubic-bezier(.33,0,.67,1);
        }

        .top-greeting:hover {
            background: var(--hover-bg);
            border-color: color-mix(in srgb, var(--brand-fg) 24%, transparent);
        }

        /* Fluent 2 Avatar — 32px */
        .top-avatar {
            width: 32px; height: 32px;
            background: var(--brand-80);
            border-radius: var(--r-circle);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--nf-on-brand);
            font-size: 13px;
            flex-shrink: 0;
        }

        .top-user-info { display: flex; flex-direction: column; }

        /* Fluent 2 Caption1Strong: 12px / 600 */
        .top-user {
            font-size: 12px;
            font-weight: 600;
            line-height: 16px;
            color: var(--nf1);
        }

        /* Fluent 2 Caption2: 10px / 400 */
        .top-lastlogin {
            font-size: 10px;
            font-weight: 400;
            line-height: 14px;
            color: var(--nf3);
        }

        /* ── Header divider between title and persona ── */
        .header-sep {
            width: 1px;
            height: 20px;
            background: var(--ns2);
            flex-shrink: 0;
        }

        /* ══════════════════════════════
           PAGE CONTENT
        ══════════════════════════════ */
        .page-content {
            flex: 1 1 auto;
            padding: 24px 28px 40px;
            position: relative;
        }


        /* Global smooth motion — every interactive element gets a soft ease
           unless it overrides explicitly. */
        a, button, input, select, textarea,
        .sidebar-nav-item, .header-action-link, .top-greeting,
        .cs-trigger, .cs-option,
        .ajax__calendar_day, .ajax__calendar_month, .ajax__calendar_year {
            transition-timing-function: cubic-bezier(.33, 0, .67, 1);
        }

        ::selection {
            background: var(--sel-bg);
            color: var(--nf1);
        }

        /* Soft, modern scrollbars */
        * {
            scrollbar-width: thin;
            scrollbar-color: var(--ns2) transparent;
        }
        ::-webkit-scrollbar { width: 10px; height: 10px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb {
            background: var(--ns2);
            border-radius: 999px;
            border: 2px solid transparent;
            background-clip: padding-box;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: color-mix(in srgb, var(--ns1) 70%, var(--brand-80) 30%);
            background-clip: padding-box;
            border: 2px solid transparent;
        }

        /* ── Fluent 2 Card — raised white panel on the gray canvas ── */
        .fluent-card {
            background: var(--surface-card);
            border-radius: var(--r-xl); /* 8px for cards */
            box-shadow: var(--card-shadow, var(--shadow8));
            border: 1px solid var(--card-border, var(--ns2));
            margin-bottom: 16px;
        }

        .fluent-card-body { padding: 20px 24px; }

        /* ── Global label-above-field alignment ──
           Ensures labels always stack above inputs site-wide.
           Exceptions: .inline-group or .label-inline opt out. */
        .page-content label:not(.label-inline),
        .page-content .control-label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; }
        .page-content .form-group,
        .page-content .field-wrap { display: flex; flex-direction: column; gap: 4px; }
        /* All page-content inputs fill their container */
        .page-content input[type="text"],
        .page-content input[type="number"],
        .page-content input[type="email"],
        .page-content input[type="tel"],
        .page-content select,
        .page-content textarea,
        .page-content .form-control { width: 100%; box-sizing: border-box; }
        /* All images in content scale fluidly */
        .page-content img { max-width: 100%; height: auto; }

        /* ── Fluent 2 DataGrid / GridView ── */
        .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

        .GridViewStyle, table.grid {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }

        /* Header row — neutralBackground2 */
        .GridViewStyle th, table.grid th {
            background: var(--nb2);
            padding: 0 12px;
            height: 44px;
            text-align: left;
            font-size: 12px;
            font-weight: 600;
            color: var(--nf2);
            border-bottom: 1px solid var(--ns1);
            white-space: nowrap;
        }

        /* Data rows — 44px height */
        .GridViewStyle td, table.grid td {
            padding: 0 12px;
            height: 44px;
            border-bottom: 1px solid var(--ns2);
            font-size: 14px;
            color: var(--nf1);
            vertical-align: middle;
        }

        .GridViewStyle tr:hover td { background: var(--nb1-hover); }

        /* Pager row */
        .GridViewStyle tr.pgr td,
        .GridViewStyle .rgPager td {
            background: var(--nb2);
            padding: 8px 12px;
            border-bottom: none;
            font-size: 12px;
            color: var(--nf3);
        }

        /* ── Fluent 2 Input ── */
        input[type="text"], input[type="password"], input[type="email"],
        input[type="number"], input[type="search"], input[type="tel"],
        select, textarea, .form-control {
            height: 32px;
            padding: 0 8px;
            background: var(--field-bg);
            border: 1px solid var(--field-border);
            border-radius: var(--r-sm);
            font-size: 14px;
            font-family: inherit;
            color: var(--nf1);
            outline: none;
            width: 100%;
            transition: border-color 0.1s;
            -webkit-appearance: none;
        }

        textarea { height: auto; padding: 8px; }

        /* Fluent 2 focus — 2px bottom accent, no glow */
        .f2-field {
            position: relative;
            display: block;
        }

        .f2-field::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 2px;
            background: var(--brand-80);
            border-radius: 0 0 var(--r-sm) var(--r-sm);
            transform: scaleX(0);
            transition: transform 0.15s;
            pointer-events: none;
        }

        .f2-field:focus-within::after { transform: scaleX(1); }

        /* Fallback focus for unwrapped inputs */
        input[type="text"]:focus, input[type="password"]:focus,
        input[type="email"]:focus, input[type="number"]:focus,
        select:focus, textarea:focus, .form-control:focus {
            border-color: var(--brand-fg);
            box-shadow: none;
        }

        /* ── Fluent 2 Button ── */
        .btn,
        button:not(.nav-toggle):not(.mobile-menu-btn),
        input[type="submit"],
        input[type="button"] {
            height: 32px;
            padding: 0 12px;
            border-radius: var(--r-sm);
            font-size: 14px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            border: 1px solid var(--ns1);
            background: var(--nb1);
            color: var(--nf1);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: background 0.1s, border-color 0.1s;
            white-space: nowrap;
        }

        .btn:hover,
        button:not(.nav-toggle):not(.mobile-menu-btn):hover {
            background: var(--nb1-hover);
        }

        /* Fluent 2 Primary button */
        .btn-primary,
        input[type="submit"] {
            background: var(--brand-80);
            border-color: var(--brand-fg);
            color: var(--nf-on-brand);
        }

        .btn-primary:hover, input[type="submit"]:hover { background: var(--brand-90); border-color: var(--brand-90); color: var(--nf-on-brand); }
        .btn-primary:active, input[type="submit"]:active { background: var(--brand-100); border-color: var(--brand-100); color: var(--nf-on-brand); }

        /* Fluent 2 Secondary button - explicit class (default buttons already
           render this way; the class lets classifyButtons demote extras) */
        .btn-secondary {
            background: var(--btn-secondary-bg);
            border: 1px solid var(--btn-secondary-border);
            color: var(--btn-secondary-fg);
        }
        .btn-secondary:hover { background: var(--btn-secondary-bg-hover); border-color: var(--btn-secondary-border); color: var(--btn-secondary-fg); }
        .btn-secondary:active { background: var(--btn-secondary-bg-pressed); }

        /* Fluent 2 Subtle button (outline-free) */
        .btn-subtle { border-color: transparent; background: transparent; }
        .btn-subtle:hover { background: var(--nb1-hover); border-color: transparent; }

        /* Fluent 2 Danger button */
        .btn-danger { background: var(--danger); border-color: var(--danger); color: var(--nf-on-brand); }
        .btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }

        /* ── Label ── Fluent 2: 12px / 400 */
        label {
            font-size: 12px;
            font-weight: 400;
            color: var(--nf2);
            display: block;
            margin-bottom: 4px;
        }

        /* ══════════════════════════════
           CUSTOM SELECT WIDGET (buildCustomSelects)
        ══════════════════════════════ */
        .cs-wrap {
            position: relative;
            display: block;
            width: 100%;
        }

        /* Hide the native select — keep it in DOM for form submission */
        .cs-hidden {
            position: absolute !important;
            top: 0 !important; left: 0 !important;
            width: 100% !important; height: 100% !important;
            opacity: 0 !important;
            pointer-events: none !important;
            z-index: -1 !important;
            border: none !important;
        }

        /* The clickable trigger button */
        .cs-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 32px;
            padding: 0 10px 0 8px;
            background: var(--nb1);
            border: 1px solid var(--ns1);
            border-radius: var(--r-sm);
            font-size: 14px;
            font-family: inherit;
            color: var(--nf1);
            cursor: pointer;
            user-select: none;
            box-sizing: border-box;
            gap: 6px;
            transition: border-color 0.1s, background 0.1s;
        }

        .cs-trigger:hover { background: var(--nb1-hover); }

        .cs-trigger:focus,
        .cs-trigger.open {
            border-color: var(--brand-fg);
            outline: none;
        }

        .cs-trigger.open {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .cs-trigger-text {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: left;
        }

        .cs-trigger-text.is-placeholder { color: var(--nf3); }

        .cs-trigger-arrow {
            font-size: 10px;
            color: var(--nf2);
            flex-shrink: 0;
            transition: transform 0.15s;
        }

        .cs-trigger.open .cs-trigger-arrow { transform: rotate(180deg); }

        /* Dropdown panel — JS appends it to <body> on open and uses
           position:fixed with viewport coordinates. This frees it from any
           clipping ancestor (overflow:hidden on a styled grid, transformed
           card, etc.). The CSS below provides defaults; openPanel() in JS
           overrides position/top/left/width inline. */
        .cs-panel {
            display: none;
            position: fixed;
            min-width: 100px;
            width: max-content;
            max-width: 360px;
            z-index: 99999;
            background: var(--nb1);
            border: 1px solid var(--brand-80);
            border-radius: var(--r-sm);
            max-height: 280px;
            overflow-y: auto;
            overflow-x: hidden;
            box-shadow: var(--shadow8, 0 8px 24px var(--scrim-medium));
        }

        .cs-panel.open { display: block; }

        /* Each option row — min-height (not fixed height) so rare long
           labels can wrap gracefully without clipping. white-space:nowrap
           covers the common case so the panel just grows wider. */
        .cs-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 10px;
            min-height: 34px;
            font-size: 14px;
            line-height: 20px;
            font-family: inherit;
            color: var(--nf1);
            cursor: pointer;
            transition: background 0.08s;
            user-select: none;
            white-space: nowrap;
        }

        .cs-option:hover { background: var(--nb1-hover); }

        .cs-option.selected {
            background: var(--sel-bg);
            color: var(--brand-fg);
            font-weight: 600;
        }

        .cs-option-check {
            font-size: 11px;
            color: var(--brand-fg);
            width: 14px;
            flex-shrink: 0;
            opacity: 0;
        }

        .cs-option.selected .cs-option-check { opacity: 1; }

        .support-fab {
            position: fixed;
            right: 20px;
            bottom: 80px;
            z-index: 1001;
            min-width: 48px;
            height: 48px;
            padding: 0 16px;
            border-radius: 999px;
            border: none;
            background: var(--brand-80);
            color: var(--nf-on-brand);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 18px;
            box-shadow: var(--shadow8);
            cursor: pointer;
            transition: background 0.1s ease, transform 0.1s ease;
        }

        .support-fab-label {
            font-size: 13px;
            font-weight: 600;
            line-height: 18px;
            white-space: nowrap;
        }

        .support-fab:hover {
            background: var(--brand-90);
            transform: translateY(-1px);
        }

        .support-fab:active {
            background: var(--danger-hover);
        }

        .support-modal-overlay {
            position: fixed; inset: 0;
            background: var(--scrim-strong);
            display: none; z-index: 1200;
            backdrop-filter: blur(2px);
        }
        .support-modal-overlay.active { display: block; }

        @keyframes supportSlideUp {
            from { opacity: 0; transform: translateY(16px) scale(0.97); }
            to   { opacity: 1; transform: translateY(0)  scale(1); }
        }
        .support-modal {
            position: fixed;
            right: 20px;
            bottom: 136px;
            width: min(340px, calc(100vw - 32px));
            background: var(--nb1);
            border: 1px solid var(--ns2);
            border-radius: 12px;
            box-shadow: 0 16px 48px var(--scrim-medium), 0 2px 8px var(--scrim-faint);
            z-index: 1201;
            display: none;
            overflow: hidden;
        }
        .support-modal.active {
            display: block;
            animation: supportSlideUp 0.2s ease;
        }

        /* Branded header */
        .support-modal-header {
            display: flex; align-items: center; justify-content: space-between; gap: 12px;
            padding: 18px 18px 16px;
            background: linear-gradient(135deg, var(--brand-80) 0%, var(--brand-90) 100%);
        }
        .support-modal-hdr-left { display: flex; align-items: center; gap: 10px; }
        .support-modal-hdr-icon {
            width: 36px; height: 36px; border-radius: 10px;
            background: var(--tint-soft);
            display: flex; align-items: center; justify-content: center;
            font-size: 16px; color: var(--nf-on-brand); flex-shrink: 0;
        }
        .support-modal-titles { display: flex; flex-direction: column; }
        .support-modal-title {
            font-size: 15px; font-weight: 700; color: var(--nf-on-brand); line-height: 1.2;
        }
        .support-modal-subtitle { font-size: 11px; color: var(--tint-strong); margin-top: 1px; }
        .support-close {
            width: 30px; height: 30px; border: none; border-radius: 6px;
            background: var(--tint-soft); color: var(--nf-on-brand);
            display: inline-flex; align-items: center; justify-content: center;
            cursor: pointer; font-size: 13px; flex-shrink: 0;
            transition: background 0.12s;
        }
        .support-close:hover { background: var(--tint-medium); }

        /* Contact items */
        .support-modal-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 8px; }

        .support-item {
            display: flex; align-items: center; gap: 12px;
            padding: 11px 13px; border-radius: 8px;
            background: var(--nb2); border: 1px solid var(--ns2);
            text-decoration: none !important; color: var(--nf1) !important;
            transition: background 0.1s, border-color 0.1s, transform 0.1s;
        }
        .support-item:hover {
            background: var(--hover-bg);
            border-color: color-mix(in srgb, var(--brand-fg) 30%, var(--ns2));
            transform: translateX(2px);
        }
        .support-item-icon {
            width: 36px; height: 36px; border-radius: 9px;
            display: flex; align-items: center; justify-content: center;
            font-size: 16px; flex-shrink: 0;
        }
        .si-email    { background: var(--brand-bg-tint); color: var(--brand-fg); }
        .si-whatsapp { background: var(--brand-bg-tint); color: var(--brand-fg); }

        /* small helper line under the email address in the support popup */
        .support-item-hint {
            display: block;
            margin-top: 2px;
            font-size: 11px;
            line-height: 14px;
            color: var(--nf3);
            white-space: normal;
        }
        .si-phone    { background: var(--warning-bg); color: var(--warning); }
        .si-hotline  { background: var(--sel-bg); color: var(--brand-fg); }

        .support-item-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
        .support-item-label {
            font-size: 11px; font-weight: 500; color: var(--nf3);
            text-transform: uppercase; letter-spacing: 0.4px; line-height: 1;
        }
        .support-item-value {
            font-size: 13px; font-weight: 600; color: var(--nf1);
            margin-top: 3px; word-break: break-all; line-height: 1.3;
        }
        .support-item-arrow { color: var(--nf3); font-size: 11px; flex-shrink: 0; }

        .support-modal-footer {
            padding: 10px 14px 14px;
            font-size: 11px; color: var(--nf3); text-align: center;
            border-top: 1px solid var(--ns2);
        }

        /* ── Mobile overlay ── */
        .mobile-menu-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: var(--scrim-heavy);
            z-index: 1050;
        }

        .mobile-menu-overlay.active { display: block; }

        /* ── Back to top — Fluent 2 circular button ── */
        #back-to-top {
            position: fixed;
            bottom: 24px; right: 20px;
            z-index: 999;
            width: 32px; height: 32px;
            border-radius: var(--r-circle);
            background: var(--brand-80);
            border: none;
            color: var(--nf-on-brand);
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            box-shadow: var(--shadow8);
            transition: background 0.1s;
            text-decoration: none;
        }

        #back-to-top:hover { background: var(--brand-90); }

        /* ── Responsive ── */
        @media (max-width: 768px) {
            .vertical-nav { transform: translateX(-100%); transition: transform 0.2s ease; }
            .vertical-nav.mobile-open { transform: translateX(0); }
            .main-content { margin-left: 0 !important; }
            .app-header { left: 0 !important; }
            .mobile-menu-btn { display: flex !important; }
            .header-page-title { display: none; }
            .header-sep { display: none; }
            .header-action-label { display: none; }
            .support-fab { right: 16px; bottom: 76px; }
            .support-fab-label { display: none; }
            .support-modal { right: 16px; bottom: 132px; width: calc(100vw - 32px); }
            #back-to-top { bottom: 20px; right: 16px; }
        }

        /* ── ASP.NET visibility fix ── */
        input, select, .form-control, .ajax__tab_xp { visibility: visible !important; }

        /* ════════════════════════════════════════════════════════════════
           FLUENT 2 SHELL v2 — "Microsoft 365 Style"
           Hero brand panel · pill-shaped active state · refined header.
           CSS-only, no markup changes, no server-control touches.

           Width tokens overridden locally so the rest of the original CSS
           that uses var(--sidebar-w) still works.
        ════════════════════════════════════════════════════════════════ */
        :root {
            --sidebar-w: 60px;
            --sidebar-collapsed: 60px;
            --topbar-h: 52px;
            --brand-panel-h: 56px;
            --rail-pad: 0px;
        }

        body { padding-top: 0 !important; }

        /* ── LEFT NAV RAIL — full-height, surface-tinted, 1px right edge ── */
        .vertical-nav {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: var(--sidebar-w) !important;
            height: 100vh !important;
            background: var(--nb1) !important;
            border-right: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
            padding: 0 !important;
            z-index: 1100 !important;
            transition: width 0.2s cubic-bezier(.33,0,.67,1) !important;
            transform: none !important;
        }
        .vertical-nav.collapsed { width: var(--sidebar-collapsed) !important; }

        /* ── BRAND PANEL — small centered logo only (Outlook-style) ── */
        .nav-logo {
            height: var(--brand-panel-h) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            border-right: none !important;
            border-bottom: none !important;
            background: transparent !important;
            flex-shrink: 0 !important;
            position: relative;
        }
        .nav-logo::after { display: none; }
        .nav-brand {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            min-width: 0;
            overflow: hidden;
        }
        .nav-brand-logo {
            width: 28px !important;
            height: 22px !important;
            clip-path: inset(0 0 22% 0) !important;
            -webkit-clip-path: inset(0 0 22% 0) !important;
        }
        .nav-logo-text { display: none !important; }

        /* Collapse toggle — hidden in icon-only Outlook-style rail */
        .nav-toggle { display: none !important; }

        /* ── SECTION LABELS — hidden in icon-only rail ── */
        .nav-section-label { display: none !important; }

        /* ── MENU SCROLL AREA — minimal padding for icon-only rail ── */
        .nav-menu {
            flex: 1 1 auto !important;
            display: block !important;
            padding: 4px 0 !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }
        .nav-menu::-webkit-scrollbar { width: 6px; }
        .nav-menu::-webkit-scrollbar-thumb { background: var(--ns2); border-radius: 999px; }
        .nav-menu::-webkit-scrollbar-thumb:hover { background: var(--ns1); }

        /* Telerik radmenu wrappers act as plain blocks */
        .vertical-radmenu,
        .home-radmenu-shim,
        .logout-radmenu-shim { display: block !important; }
        .vertical-radmenu .rmRootGroup {
            display: flex !important;
            flex-direction: column !important;
            gap: 2px !important;
            margin: 0 !important;
            padding: 0 !important;
            list-style: none;
        }
        .vertical-radmenu .rmItem,
        .home-radmenu-shim .rmItem,
        .logout-radmenu-shim .rmItem {
            width: 100% !important;
            display: block !important;
        }

        /* ── NAV ITEMS — Outlook-style icon-only square buttons ── */
        .sidebar-nav-item,
        .home-nav-link,
        .logout-link,
        .vertical-radmenu .rmRootLink {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 44px !important;
            height: 44px !important;
            margin: 2px auto !important;
            padding: 0 !important;
            gap: 0 !important;
            border-radius: 6px !important;
            border: none !important;
            background: transparent !important;
            color: var(--nf2) !important;
            text-decoration: none !important;
            white-space: nowrap !important;
            cursor: pointer !important;
            position: relative !important;
            transition: background 120ms cubic-bezier(.33,0,.67,1), color 120ms cubic-bezier(.33,0,.67,1) !important;
        }
        .sidebar-nav-item:hover,
        .home-nav-link:hover,
        .logout-link:hover,
        .vertical-radmenu .rmRootLink:hover,
        .vertical-radmenu .rmItem.rmHovered > .rmRootLink {
            background: var(--nb1-hover) !important;
            color: var(--nf1) !important;
        }

        /* ACTIVE STATE — colored icon + thin left accent bar (Outlook-style) */
        .sidebar-nav-item.is-active,
        .home-nav-link.is-active,
        .vertical-radmenu .rmRootLink.is-active {
            background: transparent !important;
            color: var(--brand-fg) !important;
            box-shadow: none !important;
        }
        .sidebar-nav-item.is-active::before,
        .home-nav-link.is-active::before,
        .vertical-radmenu .rmRootLink.is-active::before {
            content: '' !important;
            display: block !important;
            position: absolute !important;
            left: -8px !important;
            top: 8px !important;
            bottom: 8px !important;
            width: 3px !important;
            background: var(--brand-80) !important;
            border-radius: 0 2px 2px 0 !important;
        }

        /* Icons — Outlook style 20px glyph, centered */
        .vertical-nav .sidebar-nav-item > i,
        .vertical-nav .sidebar-nav-item > .menu-item-icon,
        .vertical-nav .home-nav-link > i,
        .vertical-nav .logout-link > i,
        .vertical-nav .vertical-radmenu .rmRootLink > .menu-item-icon,
        .vertical-nav .vertical-radmenu .rmRootLink > i {
            width: 20px !important;
            min-width: 20px !important;
            height: 20px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 18px !important;
            line-height: 1 !important;
            color: inherit !important;
            flex-shrink: 0 !important;
            margin: 0 !important;
        }
        .sidebar-nav-item.is-active > i,
        .sidebar-nav-item.is-active > .menu-item-icon,
        .home-nav-link.is-active > i,
        .vertical-radmenu .rmRootLink.is-active > .menu-item-icon {
            color: var(--brand-fg) !important;
        }

        /* Hide all text labels — icon-only rail */
        .vertical-nav .nav-text,
        .vertical-nav .sidebar-nav-text,
        .vertical-nav .rmText,
        .sidebar-nav-item > .nav-text,
        .sidebar-nav-item > .rmText,
        .home-nav-link > .nav-text,
        .logout-link > .nav-text,
        .vertical-radmenu .rmRootLink > .rmText {
            display: none !important;
            opacity: 0 !important;
            width: 0 !important;
            overflow: hidden !important;
        }

        /* Submenus — Fluent 2 floating panel sliding out to the right */
        .vertical-radmenu .rmSlide {
            position: absolute !important;
            top: 0 !important;
            left: calc(100% - 4px) !important;
            min-width: 220px !important;
            padding: 6px !important;
            margin-left: 8px !important;
            background: var(--nb1) !important;
            border: 1px solid var(--ns2) !important;
            border-radius: 8px !important;
            box-shadow: 0 8px 28px var(--scrim-medium), 0 0 0 1px color-mix(in srgb, var(--nf1) 4%, transparent) !important;
            z-index: 1200 !important;
        }
        .vertical-radmenu .rmRootLink { position: relative !important; }

        /* Collapsed rail: hide labels, center icons, no padding */
        .vertical-nav.collapsed .sidebar-nav-item,
        .vertical-nav.collapsed .home-nav-link,
        .vertical-nav.collapsed .logout-link,
        .vertical-nav.collapsed .vertical-radmenu .rmRootLink {
            justify-content: center !important;
            padding: 0 !important;
            gap: 0 !important;
        }
        .vertical-nav.collapsed .nav-text,
        .vertical-nav.collapsed .sidebar-nav-text,
        .vertical-nav.collapsed .rmText {
            opacity: 0;
            width: 0;
            overflow: hidden;
        }

        /* ── LOGOUT BLOCK — pinned bottom ── */
        .nav-logout {
            border-top: none !important;
            border-left: none !important;
            padding: 8px 0 12px !important;
            flex-shrink: 0 !important;
            display: block !important;
            height: auto !important;
        }
        .logout-link, .logout-link > i { color: var(--danger) !important; }
        .logout-link:hover {
            background: color-mix(in srgb, var(--danger) 10%, var(--nb1-hover)) !important;
            color: var(--danger) !important;
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 24%, transparent) !important;
        }

        /* ════════════════════════════════════════════════════════════════
           TOP HEADER — 52px, refined typography, glassy edge shadow
        ════════════════════════════════════════════════════════════════ */
        .app-header {
            position: fixed !important;
            top: 0 !important;
            left: var(--sidebar-w) !important;
            right: 0 !important;
            width: auto !important;
            height: var(--topbar-h) !important;
            padding: 0 24px !important;
            background: var(--nb1) !important;
            border: none !important;
            border-bottom: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            z-index: 100 !important;
            transition: left 0.2s cubic-bezier(.33,0,.67,1) !important;
        }
        body.sidebar-collapsed .app-header { left: var(--sidebar-collapsed) !important; }
        .app-header::after { display: none !important; }

        /* Page title — slightly larger 18px Subtitle */
        .header-page-title {
            flex: 1 1 auto !important;
            font-size: 18px !important;
            font-weight: 600 !important;
            line-height: 24px !important;
            color: var(--nf1) !important;
            letter-spacing: -0.1px !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            padding: 0 !important;
            border: none !important;
            margin: 0 !important;
            max-width: none !important;
        }

        .header-sep {
            display: block !important;
            width: 1px !important;
            height: 24px !important;
            background: var(--ns2) !important;
            flex-shrink: 0 !important;
            margin: 0 4px !important;
        }

        /* Theme button — icon-only square button */
        .header-action-link {
            width: 36px !important;
            height: 36px !important;
            min-width: 36px !important;
            padding: 0 !important;
            border-radius: 8px !important;
            border: 1px solid transparent !important;
        }
        .header-action-link .header-action-label { display: none !important; }
        .header-action-link i {
            font-size: 15px !important;
            width: auto !important;
        }
        .header-action-link:hover {
            background: var(--sel-bg) !important;
            border-color: color-mix(in srgb, var(--brand-fg) 22%, transparent) !important;
            color: var(--brand-fg) !important;
        }

        /* User persona — compact pill */
        .top-greeting {
            border-radius: 999px !important;
            padding: 4px 14px 4px 4px !important;
            border: 1px solid var(--ns2) !important;
            background: var(--nb1) !important;
            transition: background 120ms ease, border-color 120ms ease !important;
        }
        .top-greeting:hover {
            background: var(--hover-bg) !important;
            border-color: color-mix(in srgb, var(--brand-fg) 28%, transparent) !important;
        }
        .top-avatar {
            width: 30px !important;
            height: 30px !important;
            font-size: 13px !important;
        }
        .top-user-info { line-height: 1.2; }
        .top-user { font-size: 13px !important; font-weight: 600 !important; }
        .top-lastlogin { font-size: 11px !important; color: var(--nf3) !important; }

        /* ── MAIN CONTENT ── */
        .main-content {
            margin-left: var(--sidebar-w) !important;
            padding-top: var(--topbar-h) !important;
            min-height: 100vh !important;
            transition: margin-left 0.2s cubic-bezier(.33,0,.67,1) !important;
        }
        body.sidebar-collapsed .main-content { margin-left: var(--sidebar-collapsed) !important; }
        .page-content {
            padding: 24px 32px 40px !important;
            max-width: none !important;
            margin: 0 !important;
        }
        .app-footer { display: none !important; }

        /* ── MOBILE — rail becomes a drawer ── */
        @media (max-width: 768px) {
            .vertical-nav {
                transform: translateX(-100%) !important;
                transition: transform 0.22s cubic-bezier(.33,0,.67,1) !important;
                box-shadow: 8px 0 24px var(--scrim-medium) !important;
            }
            .vertical-nav.mobile-open { transform: translateX(0) !important; }
            .main-content { margin-left: 0 !important; }
            .app-header { left: 0 !important; padding: 0 16px !important; }
            .mobile-menu-btn { display: flex !important; }
            .header-page-title { font-size: 16px !important; }
            .top-user, .top-lastlogin { display: none; }
            .top-greeting { padding: 4px !important; }
        }

        /* ══════════════════════════════════════════════════════════════════
           FABRIC SHELL v2 — Microsoft Fabric / M365 style
           Full-width top bar · narrow icon+label rail · grouped actions
        ══════════════════════════════════════════════════════════════════ */
        :root {
            --fabric-rail-w: 84px;
            --fabric-top-h: 52px;
            --sidebar-w: 84px;
            --sidebar-collapsed: 84px;
            --topbar-h: 52px;
        }

        /* ══ HEADER ══ */
        .app-header {
            position: fixed !important;
            top: 0 !important; left: 0 !important; right: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            box-sizing: border-box !important;
            height: var(--fabric-top-h) !important;
            padding: 0 !important;
            display: flex !important;
            align-items: center !important;
            gap: 0 !important;
            background: var(--nb1) !important;
            border: none !important;
            border-bottom: none !important;
            box-shadow: none !important;
            z-index: 1200 !important;
        }
        body.sidebar-collapsed .app-header { left: 0 !important; }

        /* Brand tile — left-aligned with comfortable left padding */
        .fabric-brand {
            width: auto;
            min-width: var(--fabric-rail-w);
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-shrink: 0;
            padding: 0 16px 0 24px;
            box-sizing: border-box;
        }
        .fabric-brand-text {
            font-size: 14px;
            font-weight: 700;
            color: var(--brand-fg);
            white-space: nowrap;
            line-height: 1;
            letter-spacing: -0.3px;
        }
        .fabric-brand-sep { display: none !important; }

        /* Mobile button — hidden on desktop */
        .mobile-menu-btn {
            display: none !important;
            flex-shrink: 0 !important;
            margin: 0 8px !important;
        }

        /* Search wrapper — squarish, isolated from global input rules */
        .fabric-search-wrap {
            flex: 0 1 460px;
            min-width: 120px;
            margin: 0 16px 0 20px;
            height: 34px;
            background: var(--nb2);
            border: 1px solid var(--ns2);
            border-radius: 4px;
            display: flex;
            align-items: center;
            padding: 0 13px;
            gap: 8px;
            overflow: hidden;
            box-sizing: border-box;
            transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
        }
        .fabric-search-wrap:focus-within {
            background: var(--nb1);
            border-color: var(--brand-fg);
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-fg) 14%, transparent);
        }
        .fabric-search-wrap > .fa {
            font-size: 12px;
            color: var(--nf3);
            flex-shrink: 0;
            line-height: 1;
            pointer-events: none;
        }

        /* High-specificity override of ALL global input styles for the search field */
        .app-header .fabric-search-wrap input[type="text"].fabric-search-input,
        .fabric-search-wrap input.fabric-search-input {
            display: block !important;
            flex: 1 1 auto !important;
            min-width: 0 !important;
            width: 0 !important;
            height: 34px !important;
            line-height: 34px !important;
            padding: 0 !important;
            margin: 0 !important;
            border: none !important;
            border-radius: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            outline: none !important;
            font-size: 14px !important;
            font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif !important;
            color: var(--nf1) !important;
            -webkit-appearance: none !important;
        }
        .fabric-search-wrap input.fabric-search-input::placeholder { color: var(--nf3) !important; font-style: normal !important; }

        /* Spacer */
        .fabric-spacer { flex: 1 1 auto; }

        /* Right-side action group — single flex row, perfectly aligned */
        .fabric-actions {
            display: flex;
            align-items: center;
            gap: 2px;
            padding: 0 12px;
            height: 100%;
            flex-shrink: 0;
        }

        /* Icon buttons — explicit overrides beat the generic button rule */
        .fabric-icon-btn {
            position: relative !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 36px !important;
            height: 36px !important;
            min-width: 36px !important;
            padding: 0 !important;
            margin: 0 !important;
            border: none !important;
            border-radius: 6px !important;
            background: transparent !important;
            color: var(--nf2) !important;
            font-size: 16px !important;
            font-weight: 400 !important;
            line-height: 1 !important;
            cursor: pointer !important;
            text-decoration: none !important;
            flex-shrink: 0 !important;
            box-sizing: border-box !important;
            vertical-align: middle !important;
            transition: background 0.1s ease, color 0.1s ease !important;
        }
        .fabric-icon-btn:hover {
            background: var(--hover-bg) !important;
            color: var(--brand-fg) !important;
        }
        .fabric-icon-btn > i {
            font-size: 16px !important;
            line-height: 1 !important;
            width: auto !important;
            height: auto !important;
            display: block !important;
            flex: none !important;
        }

        /* User persona pill inside actions group */
        .top-greeting {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            height: 36px !important;
            margin: 0 0 0 6px !important;
            padding: 0 10px 0 4px !important;
            border-radius: 999px !important;
            border: 1px solid transparent !important;
            background: transparent !important;
            cursor: default !important;
            flex-shrink: 0 !important;
            transition: background 0.1s ease, border-color 0.1s ease !important;
        }
        .top-greeting:hover {
            background: var(--hover-bg) !important;
            border-color: color-mix(in srgb, var(--brand-fg) 22%, transparent) !important;
        }
        .top-avatar { width: 28px !important; height: 28px !important; font-size: 13px !important; flex-shrink: 0 !important; }
        .top-user-info { line-height: 1.25; }
        .top-user { font-size: 13px !important; font-weight: 600 !important; color: var(--nf1) !important; }
        .top-lastlogin { font-size: 11px !important; color: var(--nf3) !important; }

        /* Page title in top bar */
        .header-page-title {
            display: flex !important; align-items: center !important;
            font-size: 14px !important; font-weight: 600 !important;
            color: var(--nf1) !important; white-space: nowrap !important;
            overflow: hidden !important; text-overflow: ellipsis !important;
            max-width: 220px !important; padding: 0 4px 0 16px !important;
            flex-shrink: 1 !important; min-width: 0 !important;
        }
        /* Hide replaced header elements */
        .header-sep { display: none !important; }
        .header-action-link { display: none !important; }

        /* ══ SIDEBAR RAIL — Outlook-style icon-only ══ */
        .vertical-nav {
            position: fixed !important;
            top: var(--fabric-top-h) !important;
            left: 0 !important;
            width: var(--fabric-rail-w) !important;
            height: calc(100vh - var(--fabric-top-h)) !important;
            background: var(--nb1) !important;
            border: none !important;
            border-right: none !important;
            box-shadow: none !important;
            outline: none !important;
            z-index: 1100 !important;
            display: flex !important;
            flex-direction: column !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            transition: none !important;
        }
        .vertical-nav.collapsed { width: var(--fabric-rail-w) !important; }
        .nav-logo { display: none !important; }
        .nav-section-label { display: none !important; }
        .nav-menu { flex: 1 1 auto !important; padding: 10px 8px !important; overflow-y: auto !important; overflow-x: hidden !important; }

        /* ── NAV ITEMS — padded rounded buttons with icon + label ── */
        .sidebar-nav-item,
        .home-nav-link,
        .logout-link,
        .vertical-radmenu .rmRootLink {
            position: relative !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            min-width: 100% !important;
            max-width: 100% !important;
            min-height: 60px !important;
            height: auto !important;
            padding: 10px 4px !important;
            margin: 4px 0 !important;
            gap: 5px !important;
            border: none !important;
            border-radius: 8px !important;
            background: transparent !important;
            text-decoration: none !important;
            cursor: pointer !important;
            text-align: center !important;
            box-sizing: border-box !important;
            overflow: visible !important;
            transition: background 0.12s ease, color 0.12s ease !important;
        }
        .sidebar-nav-item:hover,
        .home-nav-link:hover,
        .vertical-radmenu .rmItem.rmHovered > .rmRootLink {
            background: color-mix(in srgb, var(--nf1) 6%, transparent) !important;
        }
        .sidebar-nav-item.is-active,
        .home-nav-link.is-active,
        .vertical-radmenu .rmRootLink.is-active,
        .vertical-radmenu .rmItem.rmSelected > .rmRootLink,
        .vertical-radmenu .rmRootLink.rmSelected {
            background: var(--sel-bg) !important;
            box-shadow: none !important;
        }
        .sidebar-nav-item.is-active::before,
        .home-nav-link.is-active::before,
        .vertical-radmenu .rmRootLink.is-active::before {
            content: '' !important; display: block !important; position: absolute !important;
            left: -8px !important; top: 12px !important; bottom: 12px !important;
            width: 3px !important; background: var(--brand-80) !important;
            border-radius: 0 2px 2px 0 !important;
        }

        /* Icons — 18px glyph, centered */
        .vertical-nav .sidebar-nav-item > i,
        .vertical-nav .sidebar-nav-item > .menu-item-icon,
        .vertical-nav .home-nav-link > i,
        .vertical-nav .logout-link > i,
        .vertical-nav .vertical-radmenu .rmRootLink > .menu-item-icon,
        .vertical-nav .vertical-radmenu .rmRootLink > i {
            display: inline-flex !important;
            align-items: center !important; justify-content: center !important;
            width: 20px !important; height: 20px !important; min-width: 20px !important;
            font-size: 18px !important; line-height: 1 !important;
            color: var(--nf2) !important; flex-shrink: 0 !important; margin: 0 !important;
            transition: color 0.12s ease !important;
        }
        .sidebar-nav-item:hover > i,
        .sidebar-nav-item:hover > .menu-item-icon,
        .home-nav-link:hover > i,
        .vertical-radmenu .rmItem.rmHovered > .rmRootLink > .menu-item-icon,
        .vertical-radmenu .rmItem.rmHovered > .rmRootLink > i { color: var(--nf1) !important; }
        .sidebar-nav-item.is-active > i,
        .sidebar-nav-item.is-active > .menu-item-icon,
        .home-nav-link.is-active > i,
        .vertical-radmenu .rmRootLink.is-active > .menu-item-icon,
        .vertical-radmenu .rmRootLink.is-active > i,
        .vertical-radmenu .rmItem.rmSelected > .rmRootLink > .menu-item-icon,
        .vertical-radmenu .rmItem.rmSelected > .rmRootLink > i { color: var(--brand-fg) !important; }
        /* Sign-out — danger color */
        .vertical-nav .logout-link > i,
        .vertical-nav .logout-link > .menu-item-icon { color: var(--danger) !important; }

        /* Labels — small text below icon, 2-line clamp */
        .vertical-nav .nav-text,
        .vertical-nav .sidebar-nav-text,
        .vertical-nav .rmText,
        .sidebar-nav-text,
        .sidebar-nav-item > .nav-text,
        .sidebar-nav-item > .rmText,
        .home-nav-link .nav-text,
        .logout-link .nav-text,
        .vertical-radmenu .rmRootLink .rmText {
            display: -webkit-box !important;
            -webkit-box-orient: vertical !important;
            -webkit-line-clamp: 2 !important;
            overflow: hidden !important;
            opacity: 1 !important;
            width: auto !important;
            max-width: 76px !important;
            max-height: 28px !important;
            flex: none !important;
            margin: 0 !important;
            padding: 0 !important;
            font-size: 10.5px !important;
            font-weight: 400 !important;
            line-height: 13px !important;
            letter-spacing: 0.1px !important;
            text-align: center !important;
            white-space: normal !important;
            color: var(--nf3) !important;
            transition: color 0.12s ease !important;
        }
        .sidebar-nav-item:hover > .nav-text,
        .sidebar-nav-item:hover .rmText,
        .home-nav-link:hover .nav-text,
        .vertical-radmenu .rmItem.rmHovered > .rmRootLink .rmText { color: var(--nf1) !important; }
        .sidebar-nav-item.is-active > .nav-text,
        .sidebar-nav-item.is-active .rmText,
        .home-nav-link.is-active .nav-text,
        .vertical-radmenu .rmRootLink.is-active .rmText,
        .vertical-radmenu .rmItem.rmSelected > .rmRootLink .rmText,
        .vertical-radmenu .rmRootLink.rmSelected .rmText { color: var(--brand-fg) !important; font-weight: 600 !important; }
        .vertical-nav .logout-link .nav-text,
        .vertical-nav .logout-link .rmText { color: var(--danger) !important; }

        /* Collapsed = same as expanded (rail is always icon+label) */
        .vertical-nav.collapsed .sidebar-nav-item,
        .vertical-nav.collapsed .home-nav-link,
        .vertical-nav.collapsed .logout-link,
        .vertical-nav.collapsed .vertical-radmenu .rmRootLink {
            flex-direction: column !important; justify-content: center !important;
            align-items: center !important; padding: 10px 4px !important;
            gap: 5px !important; margin: 4px 0 !important; width: 100% !important;
            min-height: 60px !important; height: auto !important;
            border-radius: 8px !important;
        }
        .vertical-nav.collapsed .nav-text,
        .vertical-nav.collapsed .sidebar-nav-text,
        .vertical-nav.collapsed .rmText {
            display: -webkit-box !important; opacity: 1 !important; width: auto !important;
        }

        /* Flyout submenus */
        .vertical-radmenu .rmSlide { position: absolute !important; top: 0 !important; left: 100% !important; margin-left: 4px !important; min-width: 200px !important; }
        .vertical-radmenu .rmRootLink { position: relative !important; }

        /* Logout */
        .nav-logout { padding: 6px 8px 14px !important; flex-shrink: 0 !important; border-top: none !important; }
        .logout-link, .logout-link > i { color: var(--danger) !important; }
        .logout-link .nav-text, .logout-link .rmText { color: var(--danger) !important; }
        .logout-link:hover { background: color-mix(in srgb, var(--danger) 8%, var(--nb1-hover)) !important; }

        /* ══ MAIN CONTENT ══ */
        .main-content { margin-left: var(--fabric-rail-w) !important; padding-top: var(--fabric-top-h) !important; min-height: 100vh !important; transition: none !important; }
        body.sidebar-collapsed .main-content { margin-left: var(--fabric-rail-w) !important; }
        .page-content { padding: 24px 28px 40px !important; }
        .app-footer { display: none !important; }

        /* ══ TELERIK DATE PICKER — modern Fabric overlay ══ */

        /* Wrapper row: flex so native input + icon btn sit side by side */
        .rdp-fabric-wrap {
            display: inline-flex !important; align-items: stretch !important;
            border: 1px solid var(--ns2) !important; border-radius: 4px !important;
            background: var(--nb1) !important; overflow: hidden !important;
            height: 34px !important;
            transition: border-color 0.15s, box-shadow 0.15s !important;
            vertical-align: middle !important;
        }
        .rdp-fabric-wrap:focus-within {
            border-color: var(--brand-fg) !important;
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-fg) 16%, transparent) !important;
        }
        /* Native date input inside the wrapper */
        .rdp-fabric-wrap input[type="date"].rdp-native {
            border: none !important; background: transparent !important;
            outline: none !important; box-shadow: none !important;
            padding: 0 10px !important; font-size: 13px !important;
            color: var(--nf1) !important; height: 34px !important;
            min-width: 140px !important; cursor: pointer !important;
            font-family: inherit !important;
            -webkit-appearance: none !important;
        }
        .rdp-fabric-wrap input[type="date"].rdp-native::-webkit-calendar-picker-indicator {
            opacity: 0 !important; position: absolute !important;
            width: 100% !important; height: 100% !important; cursor: pointer !important;
        }
        /* Calendar icon button */
        .rdp-fabric-btn {
            display: flex !important; align-items: center !important; justify-content: center !important;
            width: 32px !important; height: 34px !important; flex-shrink: 0 !important;
            border: none !important; border-left: 1px solid var(--ns2) !important;
            background: var(--nb2) !important; color: var(--nf2) !important;
            cursor: pointer !important; font-size: 13px !important;
            transition: background 0.12s !important;
        }
        .rdp-fabric-btn:hover { background: var(--nb3, var(--ns2)) !important; color: var(--nf1) !important; }

        /* Hide the original ugly Telerik chrome */
        .rdp-modernized .rdTable { display: none !important; }

        /* ══ GLOBAL SEARCH DROPDOWN ══ */
        .gs-dropdown {
            position: fixed; z-index: 9999;
            background: var(--nb1); border: 1px solid var(--ns2);
            border-radius: 4px; box-shadow: 0 8px 28px var(--scrim-medium);
            overflow: hidden; max-height: 380px; overflow-y: auto;
        }
        .gs-item {
            display: flex; align-items: center; gap: 10px;
            padding: 9px 14px; color: var(--nf1); text-decoration: none;
            font-size: 13px; border-bottom: 1px solid var(--ns2);
            transition: background 0.1s; cursor: pointer;
        }
        .gs-item:last-child { border-bottom: none; }
        .gs-item:hover, .gs-item:focus { background: var(--nb2); outline: none; }
        .gs-item-icon { width: 16px; text-align: center; color: var(--nf3); flex-shrink: 0; font-size: 13px; }
        .gs-item mark { background: none; color: var(--brand-fg); font-weight: 600; }
        .gs-item-path { font-size: 11px; color: var(--nf3); margin-left: auto; padding-left: 12px; white-space: nowrap; }
        .gs-no-results { padding: 12px 14px; color: var(--nf3); font-size: 13px; }
        .gs-section { padding: 6px 14px 2px; font-size: 10px; font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.6px; color: var(--nf3);
            border-bottom: 1px solid var(--ns2); background: var(--nb2); }
        .gs-item-label { flex: 1 1 auto; min-width: 0; }
        .gs-badge { flex-shrink: 0; font-size: 10px; font-weight: 600;
            color: var(--brand-fg); background: var(--sel-bg);
            border-radius: 3px; padding: 1px 5px; margin-left: 8px; white-space: nowrap; }
        /* Pulse animation when scrolling to an on-page element */
        @keyframes gs-pulse-anim {
            0%   { outline-color: var(--brand-fg); outline-offset: 2px; }
            50%  { outline-color: var(--brand-fg); outline-offset: 4px; }
            100% { outline-color: transparent;     outline-offset: 2px; }
        }
        .gs-pulse { outline: 2px solid var(--brand-80) !important;
            animation: gs-pulse-anim 0.6s ease 0s 3 !important; }

        /* ══ INTERACTIVE TUTORIAL ══ */

        /* Spotlight — transparent box with giant box-shadow acting as backdrop.
           Uses rgba() (universally supported) instead of color-mix() because
           any unparseable color in box-shadow drops the WHOLE declaration —
           which would kill both the dim and the ring. */
        #tutHighlight {
            position: fixed; pointer-events: none; display: none;
            z-index: 19000; border-radius: 8px;
            border: 2px solid var(--brand-80);
            box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.65),
                        0 0 0 5px rgba(0, 120, 212, 0.35);
            transition: top 0.28s cubic-bezier(.4,0,.2,1),
                        left 0.28s cubic-bezier(.4,0,.2,1),
                        width 0.28s cubic-bezier(.4,0,.2,1),
                        height 0.28s cubic-bezier(.4,0,.2,1);
        }
        @keyframes tutPulse {
            0%,100% { box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.65), 0 0 0 5px rgba(0, 120, 212, 0.35); }
            50%      { box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.65), 0 0 0 8px rgba(0, 120, 212, 0.20); }
        }
        #tutHighlight.tut-active { display: block; animation: tutPulse 2s ease infinite; }

        /* Tooltip card */
        @keyframes tutCardIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
        #tutCard {
            position: fixed; display: none; z-index: 19100;
            width: 300px; background: var(--nb1);
            border: 1px solid var(--ns2); border-radius: 12px;
            box-shadow: 0 12px 40px var(--scrim-medium), 0 2px 8px var(--scrim-faint);
            overflow: hidden;
        }
        #tutCard.tut-active { display: block; animation: tutCardIn 0.22s ease; }

        /* Card arrow pointer */
        #tutCard::before {
            content: ''; position: absolute; width: 12px; height: 12px;
            background: var(--nb1); border: 1px solid var(--ns2);
            transform: rotate(45deg);
        }
        #tutCard.tut-arrow-top::before    { top: -7px; left: 24px; border-bottom: none; border-right: none; }
        #tutCard.tut-arrow-bottom::before { bottom: -7px; left: 24px; border-top: none; border-left: none; }
        #tutCard.tut-arrow-left::before   { left: -7px; top: 24px; border-top: none; border-right: none; }
        #tutCard.tut-arrow-right::before  { right: -7px; top: 24px; border-bottom: none; border-left: none; }

        /* Card header (branded stripe) */
        .tut-card-stripe {
            height: 4px;
            background: linear-gradient(90deg, var(--brand-80), var(--info));
        }
        .tut-card-hdr {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 14px 0;
        }
        .tut-step-pill {
            font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
            color: var(--brand-fg);
            background: var(--sel-bg);
            border-radius: 20px; padding: 2px 8px;
        }
        .tut-skip-btn {
            font-size: 11px; color: var(--nf3); background: none; border: none;
            cursor: pointer; padding: 2px 4px; border-radius: 4px;
            transition: color 0.1s;
        }
        .tut-skip-btn:hover { color: var(--nf1); }
        .tut-card-body { padding: 10px 14px 0; }
        .tut-card-icon {
            width: 34px; height: 34px; border-radius: 9px; margin-bottom: 8px;
            background: var(--sel-bg);
            display: flex; align-items: center; justify-content: center;
            font-size: 15px; color: var(--brand-fg);
        }
        .tut-card-title { font-size: 15px; font-weight: 700; color: var(--nf1); margin: 0 0 6px; }
        .tut-card-desc  { font-size: 13px; color: var(--nf2); line-height: 1.55; margin: 0; }

        /* Dots + nav buttons */
        .tut-card-ftr {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 14px 14px;
        }
        .tut-dots { display: flex; gap: 5px; align-items: center; }
        .tut-dot {
            width: 6px; height: 6px; border-radius: 50%;
            background: var(--ns2); transition: all 0.2s;
        }
        .tut-dot.active { width: 18px; border-radius: 3px; background: var(--brand-80); }
        .tut-card-btns { display: flex; gap: 6px; }
        .tut-btn {
            height: 30px; padding: 0 12px; border-radius: 6px; font-size: 12px;
            font-weight: 600; cursor: pointer; border: none; transition: all 0.12s;
        }
        .tut-btn-ghost   { background: var(--nb2); color: var(--nf2); border: 1px solid var(--ns2); }
        .tut-btn-ghost:hover { background: var(--ns2); }
        .tut-btn-primary { background: var(--brand-80); color: var(--nf-on-brand); }
        .tut-btn-primary:hover { opacity: 0.88; }

        /* Welcome modal */
        .tut-welcome-overlay {
            position: fixed; inset: 0; background: var(--scrim-heavy);
            z-index: 19200; display: none; backdrop-filter: blur(3px);
        }
        .tut-welcome-overlay.show { display: block; }
        @keyframes tutWelcomeIn { from { opacity:0; transform:translateY(20px) scale(0.96); } to { opacity:1; transform:none; } }
        .tut-welcome {
            position: fixed; z-index: 19300; display: none;
            top: 50%; left: 50%; transform: translate(-50%,-50%);
            width: min(380px, calc(100vw - 32px));
            background: var(--nb1); border-radius: 16px;
            box-shadow: 0 24px 64px var(--scrim-strong);
            padding: 32px 28px 28px; text-align: center;
        }
        .tut-welcome.show { display: block; animation: tutWelcomeIn 0.28s ease; }
        .tut-welcome-icon {
            width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 16px;
            background: var(--sel-bg);
            display: flex; align-items: center; justify-content: center;
            font-size: 24px; color: var(--brand-fg);
        }
        .tut-welcome-title { font-size: 20px; font-weight: 700; color: var(--nf1); margin: 0 0 10px; }
        .tut-welcome-desc  { font-size: 14px; color: var(--nf3); margin: 0 0 24px; line-height: 1.6; }
        .tut-welcome-btns  { display: flex; gap: 10px; justify-content: center; }
        .tut-welcome-btns .tut-btn { height: 36px; padding: 0 20px; font-size: 13px; }

        /* Restart button wired to the ? icon — pulse hint for new users */
        @keyframes tutHintPulse {
            0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb,var(--brand-fg) 40%,transparent); }
            50%      { box-shadow: 0 0 0 6px transparent; }
        }
        .tut-hint-pulse { animation: tutHintPulse 1.8s ease 3; border-radius: 6px; }

        /* ══ MOBILE ══ */
        @media (max-width: 768px) {
            .vertical-nav { transform: translateX(-100%) !important; transition: transform 0.22s ease !important; }
            .vertical-nav.mobile-open { transform: translateX(0) !important; }
            .main-content { margin-left: 0 !important; }
            .mobile-menu-btn { display: flex !important; }
            .fabric-brand { border-right: none !important; padding: 0 !important; }
            .fabric-search-wrap { margin: 0 8px; flex: 1; min-width: 80px; }
            /* Touch-friendly: 44px minimum tap target for all inputs and buttons */
            .page-content input[type="text"],
            .page-content input[type="number"],
            .page-content input[type="email"],
            .page-content input[type="tel"],
            .page-content input[type="password"],
            .page-content select,
            .page-content .form-control { height: 44px !important; min-height: 44px !important; font-size: 16px !important; }
            .page-content .btn,
            .page-content input[type="submit"],
            .page-content input[type="button"] { height: 44px !important; min-height: 44px !important; }
            /* Prevent horizontal overflow at page level */
            .page-content { overflow-x: hidden; }
            .page-content .Grid,
            .page-content .GridViewStyle,
            .page-content .responsive-grid { max-width: 100%; }
        }
        @media (max-width: 575px) {
            .page-content { padding: 8px !important; }
        }

        /* ════════════════════════════════════════════════════════════════
           GLOBAL BUTTON TAXONOMY — six semantic variants applied everywhere.
           Used by:
             - Direct markup buttons (HTML <button class="sr-btn-...">)
             - Proxy buttons that wrap <asp:ImageButton> elements
             - JS-replaced image/submit inputs (cpReplaceImageButtons / Submit)
           Every variant pulls colors from theme tokens — no hardcoded hex.
           ════════════════════════════════════════════════════════════════ */
        .sr-btn-primary, .sr-btn-secondary, .sr-btn-subtle,
        .sr-btn-success, .sr-btn-warning, .sr-btn-danger,
        .sr-img-btn {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 6px !important;
            min-height: 32px !important;
            height: 32px !important;
            padding: 0 12px !important;
            border-radius: var(--r-sm) !important;
            font-family: 'Segoe UI Variable', 'Segoe UI', -apple-system, sans-serif !important;
            font-size: 14px !important;
            font-weight: 600 !important;
            line-height: 20px !important;
            text-decoration: none !important;
            text-transform: none !important;
            letter-spacing: 0 !important;
            cursor: pointer !important;
            box-shadow: none !important;
            transition: background 120ms ease, border-color 120ms ease, color 120ms ease, filter 120ms ease;
        }

        /* PRIMARY — single CTA per row/section (Save, Submit, Search, Pay, Confirm) */
        button.sr-btn-primary, .sr-btn-primary {
            background: var(--brand-80) !important;
            border: 1px solid var(--brand-80) !important;
            color: var(--nf-on-brand) !important;
        }
        .sr-btn-primary:hover { background: var(--brand-90) !important; border-color: var(--brand-90) !important; }
        .sr-btn-primary:active { background: var(--brand-100) !important; border-color: var(--brand-100) !important; }

        /* SECONDARY — important but secondary (New / Add / Register / Edit) */
        button.sr-btn-secondary, .sr-btn-secondary {
            background: var(--nb1) !important;
            border: 1px solid var(--brand-80) !important;
            color: var(--brand-fg) !important;
        }
        .sr-btn-secondary:hover {
            background: color-mix(in srgb, var(--nb1) 82%, var(--brand-80) 18%) !important;
            border-color: var(--brand-fg) !important;
        }

        /* SUBTLE — neutral utility (Refresh, Print, Cancel non-destructive, Waiting, Calendar, Attachments…) */
        button.sr-btn-subtle, .sr-btn-subtle {
            background: var(--nb1) !important;
            border: 1px solid var(--ns1) !important;
            color: var(--nf1) !important;
        }
        .sr-btn-subtle:hover {
            background: var(--nb1-hover, var(--nb2)) !important;
            border-color: var(--ns1) !important;
            color: var(--nf1) !important;
        }

        /* SUCCESS — confirmation/positive (Finish, Approve, Authorize, Mark Paid) */
        button.sr-btn-success, .sr-btn-success {
            background: var(--success, #2f8d46) !important;
            border: 1px solid var(--success, #2f8d46) !important;
            color: var(--nf-on-brand, #fff) !important;
        }
        .sr-btn-success:hover { filter: brightness(0.92); }

        /* WARNING — caution but reversible (Hold, Pre-Procedure, Vaccine, Cancel PAP) */
        button.sr-btn-warning, .sr-btn-warning {
            background: var(--warning) !important;
            border: 1px solid var(--warning) !important;
            color: var(--nf1) !important;
        }
        .sr-btn-warning:hover { filter: brightness(0.95); }

        /* DANGER — destructive (Delete, Remove, terminal Cancel) */
        button.sr-btn-danger, .sr-btn-danger {
            background: var(--danger) !important;
            border: 1px solid var(--danger) !important;
            color: var(--nf-on-brand) !important;
        }
        .sr-btn-danger:hover { background: var(--danger-hover, var(--danger)) !important; border-color: var(--danger-hover, var(--danger)) !important; }

        /* SIZE: small variant for in-row grid actions */
        .sr-btn-sm {
            min-height: 26px !important;
            height: 26px !important;
            padding: 0 9px !important;
            font-size: 12px !important;
        }

        /* sr-img-btn alias = same shape, semantic variant adds the color */
        .sr-img-btn {
            background: var(--nb1) !important;
            border: 1px solid var(--ns1) !important;
            color: var(--nf1) !important;
        }
        .sr-img-btn > i { font-size: 13px; line-height: 1; }
        .sr-img-btn > span { line-height: 1; }

        /* Hide every <input type="image"> once the JS scanner marks it replaced.
           Also defensively hide the original image buttons by their src patterns
           so the page doesn't flash the icon before the JS replacement runs. */
        input[type="image"].sr-replaced,
        input[type="submit"].sr-replaced,
        input[type="button"].sr-replaced {
            display: none !important;
        }

        /* ════════════════════════════════════════════════════════════════
           CANONICAL LABEL-ABOVE-FIELD RULE
           Per the project rule (clinicpro_labels_above_fields):
           every form label stacks above its input with 4px gap, never inline.
           Applied site-wide so any control that didn't define its own pattern
           still renders correctly.
           ════════════════════════════════════════════════════════════════ */
        .page-content .control-label,
        .page-content label.control-label,
        .page-content .pf-label,
        .page-content .Info,
        .page-content .Info1 {
            display: block;
            margin: 0 0 4px;
            color: var(--nf2);
            font-size: 12px;
            font-weight: 500;
            line-height: 16px;
            text-transform: none;
            letter-spacing: 0;
        }
        /* Bootstrap col cells that host a label-only marker (.control-label / .Info)
           shouldn't pretend to be a column — let the label+field wrap together
           in the same horizontal slot. The col with .control-label inside gets
           merged visually with the next-sibling col holding the input. */
        .page-content .row > [class*="col-"] > .control-label,
        .page-content .row-striped > [class*="col-"] > .control-label,
        .page-content .row > [class*="col-"] > .pf-label,
        .page-content .row-striped > [class*="col-"] > .pf-label {
            display: block;
            margin-bottom: 4px;
        }
        /* Form-row spacing: any input-like field directly inside a Bootstrap col
           should fill its container width (so labels above stack cleanly with
           full-width inputs below). */
        .page-content .row > [class*="col-"] > input[type="text"],
        .page-content .row > [class*="col-"] > input[type="number"],
        .page-content .row > [class*="col-"] > input[type="email"],
        .page-content .row > [class*="col-"] > input[type="tel"],
        .page-content .row > [class*="col-"] > input[type="date"],
        .page-content .row > [class*="col-"] > select,
        .page-content .row > [class*="col-"] > textarea,
        .page-content .row > [class*="col-"] > .form-control,
        .page-content .row-striped > [class*="col-"] > input[type="text"],
        .page-content .row-striped > [class*="col-"] > input[type="number"],
        .page-content .row-striped > [class*="col-"] > select,
        .page-content .row-striped > [class*="col-"] > textarea,
        .page-content .row-striped > [class*="col-"] > .form-control {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        /* Don't apply to inline-grouped inputs (e.g. the DOB row that has the
           Age/Calc tail in .pf-inline-row) — those keep their flex-row layout. */
        .page-content .pf-inline-row > input,
        .page-content .pf-inline-row > select,
        .page-content .pf-inline-row > .form-control {
            width: auto;
        }

        /* ════════════════════════════════════════════════════════════════
           LEGACY TABLE-FORM NORMALIZER
           Fixes 2017-only pages that use <table> with labels in one <td>
           and inputs in the next <td>. Converts to Fluent label-above-input
           without touching any server controls or page markup.
           ════════════════════════════════════════════════════════════════ */
        .page-content table:not(.GridViewStyle):not(.rgMasterTable):not(.dataTable):not([class*="Grid"]):not(.table) td {
            padding: 6px 8px;
            vertical-align: middle;
        }
        /* Label cells: right-aligned static text acting as a field label */
        .page-content table:not(.GridViewStyle):not(.rgMasterTable):not(.dataTable):not([class*="Grid"]):not(.table) td[style*="text-align: right"],
        .page-content table:not(.GridViewStyle):not(.rgMasterTable):not(.dataTable):not([class*="Grid"]):not(.table) td[style*="text-align:right"] {
            color: var(--nf2);
            font-size: 12px;
            font-weight: 400;
            white-space: nowrap;
            padding-right: 8px;
            width: 1%;
        }
        /* Make form tables display as a centered card */
        .page-content > table:not(.GridViewStyle):not(.rgMasterTable):not(.dataTable):not([class*="Grid"]):not(.table),
        .page-content > div > table:not(.GridViewStyle):not(.rgMasterTable):not(.dataTable):not([class*="Grid"]):not(.table) {
            background: var(--nb1);
            border: 1px solid var(--ns2);
            border-radius: var(--r-xl);
            box-shadow: var(--shadow4);
            padding: 24px 32px;
            margin: 24px auto;
            border-collapse: separate;
            border-spacing: 0;
            width: auto !important;
            max-width: 600px;
        }

        /* ══════════════════════════════════════════════════════════════
           SYNCFUSION DropDownCalendarControl (From Date / To Date)
           Restyles ONLY the closed field row to match the Fluent inputs.
           Everything is scoped with direct-child selectors so the POPUP
           CALENDAR (which renders inside the same wrapper) keeps its own
           layout and is never clipped or flattened.
           ══════════════════════════════════════════════════════════════ */

        /* outer wrapper: the visible "field" box */
        .syncfusion-field {
            position: relative !important;
            display: inline-block !important;
            width: 100% !important;
            min-height: 32px !important;
            background: var(--field-bg) !important;
            border: 1px solid var(--field-border) !important;
            border-radius: var(--r-sm) !important;
            box-shadow: none !important;
            transition: border-color 0.1s !important;
            /* NO overflow:hidden here — the drop-down calendar pops out of this box */
        }

        /* if the control itself renders as a table, same field look */
        table.syncfusion-field {
            border-collapse: separate !important;
            border-spacing: 0 !important;
        }

        /* the FIRST inner table = the closed row (textbox + calendar button).
           Direct-child selectors so the popup's calendar tables are untouched. */
        .syncfusion-field > table {
            width: 100% !important;
            height: 30px !important;
            border: none !important;
            border-collapse: separate !important;
            border-spacing: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            margin: 0 !important;
        }

        .syncfusion-field > table > tbody > tr > td {
            border: none !important;
            background: transparent !important;
            background-image: none !important;
            padding: 0 !important;
            vertical-align: middle !important;
        }

        /* the text box in the closed row */
        .syncfusion-field > table input[type="text"],
        .syncfusion-field > input[type="text"] {
            width: 100% !important;
            height: 30px !important;
            border: none !important;
            outline: none !important;
            background: transparent !important;
            box-shadow: none !important;
            margin: 0 !important;
            padding: 0 10px !important;
            font-family: inherit !important;
            font-size: 14px !important;
            color: var(--nf1) !important;
        }

        /* the calendar drop button in the closed row */
        .syncfusion-field > table img,
        .syncfusion-field > table input[type="image"],
        .syncfusion-field > img {
            display: inline-block !important;
            margin: 0 8px 0 4px !important;
            padding: 0 !important;
            border: none !important;
            background: transparent !important;
            cursor: pointer !important;
            vertical-align: middle !important;
        }

        /* interaction states — same language as the other Fluent fields */
        .syncfusion-field:hover {
            border-color: color-mix(in srgb, var(--field-border) 40%, var(--nf2)) !important;
        }
        .syncfusion-field:focus-within {
            border-color: var(--brand-fg) !important;
        }

        /* the drop button: Syncfusion renders an <a id="..._down"><img btndown.gif></a>.
           Hide the stock gif and draw a theme chevron instead, so the button is
           always visible in light AND dark mode. */
        .syncfusion-field a[id$="_down"] {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 26px !important;
            height: 28px !important;
            margin: 0 2px !important;
            border: none !important;
            border-radius: var(--r-sm) !important;
            background: transparent !important;
            text-decoration: none !important;
            cursor: pointer !important;
            float: none !important;
            position: relative !important;
        }
        .syncfusion-field a[id$="_down"]:hover {
            background: color-mix(in srgb, var(--nf1) 8%, transparent) !important;
        }
        .syncfusion-field a[id$="_down"] img {
            opacity: 0 !important;          /* keep the click target, hide the old gif */
            width: 16px !important;
            height: 16px !important;
        }
        .syncfusion-field a[id$="_down"]::after {
            content: '\f073';               /* fa-calendar */
            font-family: FontAwesome !important;
            font-size: 13px !important;
            color: var(--nf2) !important;
            position: absolute !important;
            left: 50% !important;
            top: 50% !important;
            transform: translate(-50%, -50%) !important;
            pointer-events: none !important;
        }
        .syncfusion-field:focus-within a[id$="_down"]::after { color: var(--brand-fg) !important; }

        /* ── POPUP CALENDAR ──
           Rendered as a SIBLING <div id="..._Popup" style="position:absolute;
           background:white;..."> right after the control. Give it the theme's
           floating-panel look; the calendar inside gets a light normalization
           that works in both light and dark themes. */
        div[id$="_Popup"] {
            z-index: 1300 !important;
            background: var(--nb1) !important;
            border: 1px solid var(--ns2) !important;
            border-radius: 8px !important;
            box-shadow: 0 8px 28px var(--scrim-medium) !important;
            padding: 4px !important;
            overflow: hidden !important;
        }
        div[id$="_Popup"] table {
            background: transparent !important;
            border: none !important;
            font-family: inherit !important;
            font-size: 12.5px !important;
        }
        div[id$="_Popup"] td {
            border: none !important;
            color: var(--nf1) !important;
        }
        div[id$="_Popup"] a {
            color: var(--nf1) !important;
            text-decoration: none !important;
        }


        /* ══════════════════════════════════════════════════════════════
           EMPTY STATES — tagged by applyEmptyStates(). An empty result is
           an application state, not table content: centered, muted, iconed,
           and clearly not a data row, in every appearance mode.
           ══════════════════════════════════════════════════════════════ */
        .cp-empty-state {
            display: table-cell;
            text-align: center !important;
            padding: 28px 16px !important;
            font-size: 13px !important;
            color: var(--nf3) !important;
            background: transparent !important;
            border: none !important;
        }
        div.cp-empty-state, span.cp-empty-state, p.cp-empty-state {
            display: block;
            padding: 24px 16px !important;
        }
        .cp-empty-state::before {
            content: '\f016';               /* fa-file-o */
            font-family: FontAwesome;
            display: block;
            font-size: 22px;
            margin-bottom: 8px;
            color: var(--nf-disabled);
        }

        /* message strips holding nothing must show nothing */
        .message-bar.cp-msg-empty { display: none !important; }

        /* ══════════════════════════════════════════════════════════════
           FOCUS — one visible, mode-aware focus treatment everywhere
           ══════════════════════════════════════════════════════════════ */
        a:focus-visible,
        button:focus-visible,
        input:focus-visible,
        select:focus-visible,
        [tabindex]:focus-visible {
            outline: 2px solid var(--brand-fg) !important;
            outline-offset: 1px !important;
        }

        /* ══════════════════════════════════════════════════════════════
           HIGH CONTRAST ENFORCEMENT
           HC must not inherit decorative theming. This layer runs last:
           no shadows or tint washes anywhere, hierarchy carried by solid
           borders and the single fixed HC accent, selection as inverse
           blocks, focus as a thick yellow outline.
           ══════════════════════════════════════════════════════════════ */
        html[data-high-contrast] * {
            box-shadow: none !important;
            text-shadow: none !important;
            backdrop-filter: none !important;
        }
        html[data-high-contrast] .fp-card,
        html[data-high-contrast] .fp-banner,
        html[data-high-contrast] .content-section,
        html[data-high-contrast] .criteria-panel,
        html[data-high-contrast] .status-panel,
        html[data-high-contrast] .support-modal,
        html[data-high-contrast] .cs-panel {
            background: #000000 !important;
            border: 1px solid #ffffff !important;
        }
        html[data-high-contrast] .sidebar-nav-item.is-active,
        html[data-high-contrast] .home-nav-link.is-active,
        html[data-high-contrast] .vertical-radmenu .rmRootLink.is-active,
        html[data-high-contrast] .vertical-radmenu .rmItem.rmSelected > .rmRootLink {
            background: var(--sel-bg) !important;
            color: var(--sel-fg) !important;
        }
        html[data-high-contrast] .sidebar-nav-item.is-active > i,
        html[data-high-contrast] .sidebar-nav-item.is-active > .menu-item-icon,
        html[data-high-contrast] .sidebar-nav-item.is-active .nav-text,
        html[data-high-contrast] .sidebar-nav-item.is-active .rmText,
        html[data-high-contrast] .home-nav-link.is-active > i,
        html[data-high-contrast] .home-nav-link.is-active .nav-text,
        html[data-high-contrast] .vertical-radmenu .rmRootLink.is-active > .menu-item-icon,
        html[data-high-contrast] .vertical-radmenu .rmRootLink.is-active .rmText {
            color: var(--sel-fg) !important;
        }
        html[data-high-contrast] .sidebar-nav-item:hover,
        html[data-high-contrast] .home-nav-link:hover,
        html[data-high-contrast] .vertical-radmenu .rmRootLink:hover {
            background: var(--hover-bg) !important;
            outline: 1px solid #ffffff !important;
        }
        html[data-high-contrast] .page-content a:not(.btn):not(.btn-primary):not(.btn-danger) {
            text-decoration: underline !important;
        }
        html[data-high-contrast] a:focus-visible,
        html[data-high-contrast] button:focus-visible,
        html[data-high-contrast] input:focus-visible,
        html[data-high-contrast] select:focus-visible,
        html[data-high-contrast] [tabindex]:focus-visible {
            outline: 3px solid #ffff00 !important;
            outline-offset: 2px !important;
        }


        /* ══════════════════════════════════════════════════════════════
           SMART SEARCH — patient-context prompt
           Shown when a search result needs patient data (Invoice Detail,
           Visit Log, ...): asks for the Patient Code (ESIS No), resolves
           it via Services/GlobalSearch.ashx, then opens the page.
           ══════════════════════════════════════════════════════════════ */
        .gs-ctx-overlay {
            position: fixed; inset: 0; z-index: 2000;
            background: var(--scrim-heavy);
            display: flex; align-items: flex-start; justify-content: center;
            padding-top: 14vh;
        }
        .gs-ctx-modal {
            width: 420px; max-width: calc(100vw - 32px);
            background: var(--nb1);
            border: 1px solid var(--ns2);
            border-radius: var(--r-xl);
            box-shadow: var(--shadow16);
            padding: 18px 20px 16px;
        }
        .gs-ctx-title {
            font-size: 15px; font-weight: 600; color: var(--nf1);
            display: flex; align-items: center; gap: 8px;
            margin-bottom: 4px;
        }
        .gs-ctx-title i { color: var(--brand-fg); }
        .gs-ctx-hint { font-size: 12px; color: var(--nf2); line-height: 16px; margin-bottom: 12px; }
        .gs-ctx-input {
            width: 100%; height: 34px; padding: 0 10px;
            background: var(--field-bg); color: var(--nf1);
            border: 1px solid var(--field-border);
            border-radius: var(--r-sm);
            font-size: 14px; font-family: inherit;
            outline: none; box-sizing: border-box;
        }
        .gs-ctx-input:focus { border-color: var(--field-border-focus); }
        .gs-ctx-suggest { margin-top: 4px; }
        .gs-ctx-sug-item {
            display: flex; align-items: center; gap: 10px;
            padding: 6px 8px; border-radius: var(--r-sm);
            cursor: pointer; font-size: 13px; color: var(--nf1);
        }
        .gs-ctx-sug-item:hover { background: var(--hover-bg); }
        .gs-ctx-sug-code { font-weight: 600; color: var(--brand-fg); min-width: 70px; }
        .gs-ctx-sug-name { color: var(--nf2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .gs-ctx-status { min-height: 18px; font-size: 12px; color: var(--nf2); margin: 8px 0 4px; }
        .gs-ctx-status.is-err { color: var(--danger); }
        .gs-ctx-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
        .gs-ctx-actions button {
            height: 32px; padding: 0 16px;
            border-radius: var(--r-sm); font-size: 13px; font-weight: 600;
            font-family: inherit; cursor: pointer;
        }
        .gs-ctx-cancel {
            background: var(--btn-secondary-bg); color: var(--btn-secondary-fg);
            border: 1px solid var(--btn-secondary-border);
        }
        .gs-ctx-cancel:hover { background: var(--btn-secondary-bg-hover); }
        .gs-ctx-go {
            background: var(--btn-primary-bg); color: var(--btn-primary-fg);
            border: 1px solid var(--btn-primary-border);
        }
        .gs-ctx-go:hover { background: var(--btn-primary-bg-hover); }
        html[data-high-contrast] .gs-ctx-modal { background: #000; border: 1px solid #fff; }
        /* Native-picker upgrade (upgradeSyncfusionDates): legacy drop button
           and popup are fully retired for these fields */
        .syncfusion-field a[id$="_down"] { display: none !important; }
        .sf-cal-btn {
            position: absolute !important;
            top: 50% !important; right: 3px !important;
            transform: translateY(-50%) !important;
            width: 26px !important; height: 26px !important;
            display: inline-flex !important; align-items: center !important; justify-content: center !important;
            background: transparent !important;
            border: none !important; border-radius: var(--r-sm) !important;
            color: var(--nf2) !important; cursor: pointer !important;
            padding: 0 !important; font-size: 13px !important;
        }
        .sf-cal-btn:hover { background: var(--hover-bg) !important; color: var(--brand-fg) !important; }
        .sf-cal-native {
            position: absolute !important;
            right: 3px !important; top: 50% !important;
            width: 26px !important; height: 26px !important;
            transform: translateY(-50%) !important;
            opacity: 0 !important;
            border: 0 !important; padding: 0 !important;
            pointer-events: none !important;   /* the button drives it */
        }
        /* leave room for the button inside the field */
        .syncfusion-field > table input[type="text"] { padding-right: 32px !important; }