@import '_content/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.84wtju4z0n.bundle.scp.css';

/* /Components/App.razor.rz.scp.css */
/* App.razor.css — Migrated inline styles */

.lay-splash-center[b-cdplrfnh5s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.lay-splash-logo[b-cdplrfnh5s] {
    width: 100px;
    margin-bottom: 1rem;
}

.lay-splash-text[b-cdplrfnh5s] {
    font-size: 1.2rem;
}
/* /Components/Layout/MainLayoutLanding.razor.rz.scp.css */
/* ========================================
   BEC MAIN LAYOUT LANDING STYLES
   Thin shell: header + body wrapper only.
   All login modal styles live in MainLayoutLandingPage.
   ======================================== */

html[b-w93n5p3wiu],
body[b-w93n5p3wiu] {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

.bec-landing-header[b-w93n5p3wiu] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bec-landing-container[b-w93n5p3wiu] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bec-landing-logo img[b-w93n5p3wiu] {
    height: 60px;
    width: auto;
}

/* ========================================
   BODY WRAPPER
   ======================================== */

.bec-landing-body[b-w93n5p3wiu] {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media (max-width: 768px) {
    .bec-landing-container[b-w93n5p3wiu] {
        padding: 0 20px;
    }

    .bec-landing-logo img[b-w93n5p3wiu] {
        height: 50px;
    }
}

@media (max-width: 480px) {
    .bec-landing-logo img[b-w93n5p3wiu] {
        height: 40px;
    }
}
/* /Components/Layout/MainLayoutMS.razor.rz.scp.css */
/* MainLayoutMS.razor.css */
/* All design tokens defined in wwwroot/css/BEC_Theme.css (--BEC- prefix) */

/* ================= HEADER ================= */
/* ::deep — header markup now renders from the child BecHeader component
   (Components/Shared/Bec/Shell); ::deep keeps these rules reaching across
   that component boundary without moving the CSS out of this file yet. */
/* Navy header — unifies with the already-navy .ms-sidebar into one top+left
   chrome bar, matching the mockup's single-navy .topbar+.sidebar shell
   (decided 2026-09-06, confirmed explicitly given the app-wide blast radius —
   every authenticated page renders through this header). Text/icon colors
   below use translucent white (rgba(255,255,255,X)) rather than new tokens,
   same convention already used throughout .ms-sidebar for its own on-navy
   content. */
[b-16wmqvnqmc] .ms-header {
    height: var(--BEC-layoutHeaderHeight);
    background: var(--bec-navy-900, #1F2566);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-resting, 0 1px 4px rgba(0, 0, 0, 0.06));
    display: flex;
    align-items: center;
    padding: 0 var(--space-4, 16px);
    justify-content: space-between;
    z-index: 1000;
    flex-shrink: 0;
    position: relative; /* For flyout positioning */
}

/* Any open Syncfusion side panel (BecDetailPanel/BecListPanel/BecFormPanel,
   or any other page's own SfSidebar-based wizard) left the header fully
   bright and clickable — the waffle button could still open the nav
   drawer while a panel sat on top of it, unlike everything else behind the
   panel which the backdrop correctly dims. .e-sidebar.e-open is the class
   Syncfusion itself adds while a sidebar is open (see the existing
   `.e-sidebar.e-open ~ .header-bar` rule in wwwroot/css/foundations/
   _layout-global.css for precedent); :has() lets the header react to that
   state even though it's owned deep inside whichever page is rendering,
   with no state plumbing needed between the page and this shared layout. */
.layout-container:has(.e-sidebar.e-open)[b-16wmqvnqmc]  .ms-header {
    filter: brightness(0.94) saturate(0.85);
    pointer-events: none;
}

/* .layout-container's position:fixed (line ~430, needed to prevent a
   double-scrollbar bug) unconditionally creates its own stacking context —
   an isolated numbering scope containing the ENTIRE app (background AND any
   open SfSidebar panel together). Syncfusion appends the sidebar backdrop
   (.e-sidebar-overlay) directly to <body>, outside that stacking context,
   with z-index:999. Because .layout-container itself has no explicit
   z-index, its whole contents (including an open .e-sidebar's own
   z-index:1000) are compared against that backdrop as a single unit at
   ~z-index:0 — so the backdrop always wins there, visually dimming and
   pointer-blocking the open panel along with the background instead of just
   the background as intended. No z-index inside the panel's own CSS can
   fix this; it's capped by this ancestor. Lifting .layout-container's own
   stacking order above the backdrop only while a sidebar is open (same
   :has() trigger as the header rule above) restores the panel above it;
   pointer-events:none on the backdrop is a second, redundant safety net so
   it can never swallow a click regardless of any future stacking change. */
.layout-container:has(.e-sidebar.e-open)[b-16wmqvnqmc] {
    z-index: 1000;
}

body:has(.e-sidebar.e-open) .e-sidebar-overlay[b-16wmqvnqmc] {
    pointer-events: none;
}

/* Keep Fluent toasts clear of sticky header and above layout chrome. */
.layout-container[b-16wmqvnqmc]  .fluent-toast-provider,
.layout-container[b-16wmqvnqmc]  .fluent-toast-container,
.layout-container[b-16wmqvnqmc]  fluent-toast-provider,
.layout-container[b-16wmqvnqmc]  fluent-toast-container {
    top: calc(var(--BEC-layoutHeaderHeight) + var(--BEC-spacingHorizontalS, 8px)) !important;
    z-index: var(--BEC-zIndex-Toast, 1100001) !important;
}

.layout-container[b-16wmqvnqmc]  .fluent-toast,
.layout-container[b-16wmqvnqmc]  fluent-toast {
    z-index: var(--BEC-zIndex-Toast, 1100001) !important;
}

[b-16wmqvnqmc] .header-left {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    min-width: 0;
}

/* "Welcome, {first name}" beside the waffle. Translucent white like every other
   on-navy label in this header, with the name itself at full opacity so the
   greeting recedes and the person's name reads first. Hidden below 768px: the
   action cluster and profile chip need that width more than a greeting does. */
[b-16wmqvnqmc] .header-welcome {
    font-size: var(--type-body-size, 13px);
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

[b-16wmqvnqmc] .header-welcome b {
    font-weight: 600;
    color: #ffffff;
}

@media (max-width: 767px) {
    [b-16wmqvnqmc] .header-welcome { display: none; }
}

[b-16wmqvnqmc] .waffle-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    cursor: pointer;
    padding: var(--space-2, 8px);
    border-radius: var(--radius-sm, 4px);
    flex-shrink: 0;
    min-width: var(--hit-target-min, 32px);
    min-height: var(--hit-target-min, 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

[b-16wmqvnqmc] .waffle-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

[b-16wmqvnqmc] .search-box {
    background: var(--bec-bg-alt, var(--BEC-layoutGray100));
    border-radius: var(--radius-sm, 4px);
    display: flex;
    align-items: center;
    padding: 0 var(--space-2, 8px);
    height: 32px;
    transition: all var(--duration-hover, 0.2s) var(--ease-standard, ease-out);
    position: relative;
    /* Added for Flyout positioning */
}

[b-16wmqvnqmc] .search-box:focus-within {
    background: var(--bec-surface, var(--BEC-colorNeutralBackground1, white));
    box-shadow: 0 0 0 1px var(--bec-navy-700, var(--BEC-layoutBluePrimary));
}

[b-16wmqvnqmc] .search-box input {
    border: none;
    background: transparent;
    flex: 1;
    margin-left: var(--space-2, 8px);
    outline: none;
    font-size: var(--type-body-size, 14px);
    font-family: var(--font-family-base, inherit);
}

/* HEADER RIGHT - Action Icons */
[b-16wmqvnqmc] .header-right {
    display: flex;
    align-items: center;
    gap: 2px;
    /* Always flush to the right edge, whatever else the row holds. Without this the
       cluster only lands there by way of the header's space-between, which stops
       being true the moment anything else is added to the left half. */
    margin-left: auto;
}

/* Brand mark — mobile only, shown by the <=1024px block where the rail is a drawer. */
[b-16wmqvnqmc] .header-brand {
    display: none;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    border-radius: var(--radius-sm, 6px);
}

[b-16wmqvnqmc] .header-brand img {
    height: 20px;
    width: auto;
    display: block;
}

[b-16wmqvnqmc] .header-brand:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
}

/* HEADER ACTION BUTTONS — icon stacked above label */
/* Icon-only now (was icon + visible text label, which clipped on the
   longer labels like "Notifications" at the new token font stack). The
   label still exists as the button's native `title` attribute, so hovering
   shows it as a browser tooltip — icons get the button's full space
   instead of sharing it with text underneath. */
[b-16wmqvnqmc] .header-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm, 6px);
    color: rgba(255, 255, 255, 0.82);
    transition: background var(--duration-hover, 150ms) var(--ease-standard, ease-out),
                color var(--duration-hover, 150ms) var(--ease-standard, ease-out);
    flex: 0 0 44px;
    width: 44px;
    max-width: 44px;
    min-height: var(--hit-target-min, 44px);
}

[b-16wmqvnqmc] .header-action-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

[b-16wmqvnqmc] .header-action-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

[b-16wmqvnqmc] .badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--bec-danger, var(--BEC-layoutDangerRed));
    color: var(--BEC-colorNeutralForegroundOnBrand, white);
    font-size: var(--type-caption-size, 10px);
    height: 14px;
    min-width: 14px;
    border-radius: var(--radius-full, 7px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    pointer-events: none;
}

/* AVATAR */
[b-16wmqvnqmc] .avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full, 50%);
    background: var(--bec-tint-100, var(--BEC-colorBrandBackground1, #eff6fc));
    color: var(--bec-navy-700, var(--BEC-layoutBlueDark));
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--type-meta-size, 12px);
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
}

[b-16wmqvnqmc] .avatar-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* HEADER USER BLOCK (avatar + name + chevron) */
[b-16wmqvnqmc] .header-user-block {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    cursor: pointer;
    padding: 4px var(--space-2, 8px);
    border-radius: var(--radius-sm, 6px);
    margin-left: var(--space-1, 4px);
    min-height: var(--hit-target-min, 44px);
    transition: background var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

[b-16wmqvnqmc] .header-user-block:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* BecAvatar's own default palette (--bec-tint-100 bg / --bec-navy-700 text)
   is tuned for its many other placements on light surfaces app-wide — don't
   touch the shared component, override only where it sits on this now-navy
   header, matching the mockup's .tb-av (translucent white bg, white text). */
[b-16wmqvnqmc] .header-user-block .bec-avatar {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

[b-16wmqvnqmc] .header-user-meta {
    display: flex;
    align-items: center;
    gap: 3px;
    color: rgba(255, 255, 255, 0.9);
}

/* Same outline check-circle as the home page's profile card (the mirror's
   #check-c), but NOT its --blue-300: this one sits on navy in the header chip,
   where indigo-on-navy is barely legible. Translucent white matches every other
   on-navy glyph in this header. The flyout below is on white and overrides it. */
[b-16wmqvnqmc] .verified-badge {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
    margin-inline-start: 2px;
    color: rgba(255, 255, 255, 0.82);
}

[b-16wmqvnqmc] .me-info .verified-badge {
    color: var(--bec-indigo-400, #6F7FAF);
}

[b-16wmqvnqmc] .header-user-name {
    font: var(--type-body-weight, 500) var(--type-body-size, 13px)/1.2 var(--font-family-base, inherit);
    color: #ffffff;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================= NAVIGATION TRANSITION INDICATOR ================= */
/* Slim indeterminate progress strip shown between a sidebar nav click and the
   destination page's first paint (see _isNavigating, MainLayoutMS.razor.cs).
   Sits in normal flow between the header and .content-area — no
   position:fixed/absolute needed, so no logical-property left/right math and
   no risk of the .layout-container stacking-context trap documented above. */
.nav-progress-bar[b-16wmqvnqmc] {
    height: 3px;
    width: 100%;
    overflow: hidden;
    background: transparent;
    flex-shrink: 0;
}

.nav-progress-bar__fill[b-16wmqvnqmc] {
    height: 100%;
    width: 40%;
    background: var(--bec-navy-700, var(--BEC-colorBrandBackground, #0f6cbd));
    animation: nav-progress-slide-b-16wmqvnqmc 1.1s ease-in-out infinite;
}

@keyframes nav-progress-slide-b-16wmqvnqmc {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(150%); }
    100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
    .nav-progress-bar__fill[b-16wmqvnqmc] {
        animation: none;
        width: 100%;
        opacity: 0.6;
    }}

/* ================= LAYOUT ================= */
.layout-container[b-16wmqvnqmc] {
    display: flex;
    flex-direction: column;
    /* FIX: Stack Header on top of Main Stack */
    flex: 1;
    overflow: hidden;
    overflow-x: hidden;
    /* position:fixed + inset:0 (not height:100vh/100dvh) — height:100vh sizes
       the box but still leaves it in normal document flow, so body stays
       auto-height/overflow:visible (its default — nothing in this app's
       global reset constrains it, and it can't be constrained globally
       without breaking EmptyLayout/VendorLayout/MainLayoutLanding, which
       have no scroll box of their own and rely on the document scrolling).
       Any sub-pixel mismatch between this box and the true viewport (dvh
       rounding, a stray border/margin anywhere in the tree) then makes body
       itself scroll independently of .erp-page-container's internal
       scroll — a second, real scrollbar: fully scrolling the inner one
       doesn't reveal the rest, because the outer one is dragging the whole
       layout box, not the same content. Taking this out of flow entirely
       removes that possibility — body can never grow past the viewport
       because of this element, regardless of rounding. */
    position: fixed;
    inset: 0;
}

.main-stack[b-16wmqvnqmc] {
    /* !important required: FluentUI <FluentStack> sets inline styles that must be overridden */
    display: flex !important;
    flex-direction: row !important;
    flex: 1;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

/* RIGHT PANEL: header + content, fills remaining width to the right of the sidebar */
.right-panel[b-16wmqvnqmc] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ================= SIDEBAR ================= */
/* ::deep — sidebar markup now renders from the child BecSidebar/BecNavTree
   components; ::deep keeps these rules reaching across that component
   boundary without moving the CSS out of this file yet. */
[b-16wmqvnqmc] .ms-sidebar {
    width: var(--BEC-layoutSidebarWidth);
    min-width: var(--BEC-layoutSidebarWidth);
    max-width: var(--BEC-layoutSidebarWidth);

    /* Layout: Full-height, flush edges */
    margin: 0;
    border-radius: 0;

    /* Theme: BEC Navy (tokens.css --bec-navy-900) */
    background: var(--bec-navy-900, #0f2d6e);
    border: none;
    box-shadow: var(--shadow-hover, 2px 0 8px rgba(0, 0, 0, 0.18));

    display: flex;
    flex-direction: column;
    overflow-y: auto;

    /* The nav is taller than the viewport, so this scroll container always has a
       scrollbar — and Windows paints its default LIGHT track inside the sidebar's
       260px. That is the pale vertical strip that looked like a gap between the
       sidebar and the header: not a layout gap at all, just the scrollbar gutter
       sitting on navy.

       The ::-webkit-scrollbar rules further down were meant to handle this and do
       not take effect here. These are the standard properties, which Edge and
       Chromium honour: `thin` keeps the rail narrow, and the SECOND value of
       scrollbar-color is the track — transparent lets the sidebar's own navy show
       through instead of a light gutter. The thumb stays faint until hover, same
       intent the ::-webkit- rules had. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;

    transition: width var(--BEC-durationNormal, 0.2s), min-width var(--BEC-durationNormal, 0.2s), max-width var(--BEC-durationNormal, 0.2s);
    flex-shrink: 0;
    height: 100%;
}

[b-16wmqvnqmc] .ms-sidebar:hover {
    scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

/* SIDEBAR LOGO */
[b-16wmqvnqmc] .sidebar-logo-wrap {
    padding: var(--space-3, 12px) var(--space-4, 14px) var(--space-2, 10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

/* The wordmark is a link to home (see BecSidebar.razor). Kept visually identical
   to the plain <img> it replaced — no underline, no colour shift — so the only
   difference is that it responds to hover, focus and click. */
[b-16wmqvnqmc] .sidebar-logo-link {
    display: flex;
    align-items: center;
    min-width: 0;
    text-decoration: none;
    border-radius: var(--radius-sm, 6px);
    transition: opacity var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

[b-16wmqvnqmc] .sidebar-logo-link:hover {
    opacity: 0.85;
}

/* Visible focus is required at AA, and the navy rail swallows the browser
   default ring — so this draws its own in white. */
[b-16wmqvnqmc] .sidebar-logo-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
}

/* BEC Connect wordmark (assets/logo-bec-connect.png, ~6:1). Wide, so it takes the
   ~60% of the rail beside the 32px home button; height follows (~24px). */
[b-16wmqvnqmc] .sidebar-logo {
    max-width: 149px;
    height: auto;
    display: block;
}

/* HOME ICON BUTTON — beside the logo, replaces the old standalone "Home" nav item */
[b-16wmqvnqmc] .sidebar-home-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full, 50%);
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
    transition: background var(--duration-hover, 120ms) var(--ease-standard, ease-out),
                color var(--duration-hover, 120ms) var(--ease-standard, ease-out);
}

[b-16wmqvnqmc] .sidebar-home-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

[b-16wmqvnqmc] .sidebar-home-btn.active {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

/* SECTION: QUICK ACCESS */
[b-16wmqvnqmc] .nav-section {
    padding: 8px 0 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[b-16wmqvnqmc] .nav-section-title {
    padding: 0 var(--space-4, 16px) var(--space-2, 8px);
    font: var(--type-eyebrow-weight, 700) var(--type-eyebrow-size, 11px)/var(--type-eyebrow-lh, 1.2) var(--font-family-base, inherit);
    letter-spacing: var(--type-eyebrow-ls, 0);
    color: var(--BEC-layoutGray600);
    text-transform: uppercase;
}

[b-16wmqvnqmc] .nav-section-group {
    margin-bottom: var(--space-1, 4px);
}

[b-16wmqvnqmc] .nav-section-label {
    padding: var(--space-4, 16px) var(--space-4, 14px) var(--space-1, 4px);
    font: var(--type-caption-weight, 700) var(--type-caption-size, 10px)/1.2 var(--font-family-base, inherit);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    -webkit-user-select: none;
    user-select: none;
}

.nav-item[b-16wmqvnqmc] {
    display: flex;
    align-items: center;
    padding: var(--space-3, 12px) var(--space-6, 24px);
    /* Increased padding per prototype */
    text-decoration: none;
    color: var(--BEC-layoutGray600);
    font-size: var(--type-body-size, 14px);
    font-family: var(--font-family-base, inherit);
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all var(--BEC-durationNormal, 0.2s) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    margin: 2px var(--space-3, 12px);
    border-radius: var(--radius-md, 8px);
    min-height: var(--hit-target-min, 44px);
    position: relative;
}

.nav-item span[b-16wmqvnqmc] {
    display: inline-block;
    transition: transform var(--BEC-durationNormal, 0.2s) cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-item:hover[b-16wmqvnqmc] {
    color: var(--BEC-Text-Primary, #323130);
    background: var(--BEC-colorNeutralBackground2, #fbfbfb);
}

/* HOME LINK — same visual weight as accordion headers */
[b-16wmqvnqmc] .home-link {
    display: flex;
    align-items: center;
    padding: 7px var(--space-3, 12px);
    margin: var(--space-1, 4px) var(--space-2, 6px) 2px;
    font: var(--type-h3-weight, 600) var(--type-body-size, 13px)/1.2 var(--font-family-base, inherit);
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    border-radius: var(--radius-sm, 6px);
    text-decoration: none;
    min-height: var(--hit-target-min, 32px);
    transition: background var(--duration-hover, 120ms) var(--ease-standard, ease-out),
                color var(--duration-hover, 120ms) var(--ease-standard, ease-out);
    position: relative;
}

[b-16wmqvnqmc] .home-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

[b-16wmqvnqmc] .home-link.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    font-weight: 700;
}

[b-16wmqvnqmc] .home-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0 2px 2px 0;
}

/* FINAL SELECTION: 2px left accent bar */
.nav-item.active[b-16wmqvnqmc] {
    background: transparent;
    color: var(--bec-indigo-400, var(--BEC-layoutBluePrimary));
    font-weight: 600;
    border-left: none;
}

.nav-item.active[b-16wmqvnqmc]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--bec-indigo-400, var(--BEC-layoutBluePrimary));
    border-radius: 1px;
}

.nav-item:hover .nav-icon[b-16wmqvnqmc] {
    color: var(--BEC-Text-Primary, #323130);
}

.nav-item.active .nav-icon[b-16wmqvnqmc] {
    color: var(--BEC-layoutBluePrimary);
}

/* SECTION: SYSTEMS (Accordion) */
[b-16wmqvnqmc] .accordion-header {
    display: flex;
    align-items: center;
    padding: 7px var(--space-3, 12px);
    cursor: pointer;
    font: var(--type-body-weight, 500) var(--type-body-size, 13px)/1.2 var(--font-family-base, inherit);
    min-height: var(--hit-target-min, 32px);
    color: rgba(255, 255, 255, 0.88);
}

/* Long system names would otherwise wrap under the chevron instead of
   truncating — the sidebar has a fixed width at every breakpoint, so this
   is a real overflow risk regardless of screen size, not just mobile. */
[b-16wmqvnqmc] .accordion-header > span:first-child {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-16wmqvnqmc] .sub-nav-item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-16wmqvnqmc] .accordion-header:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

[b-16wmqvnqmc] .accordion-icon {
    margin-left: auto;
    font-size: 10px;
    transition: transform var(--BEC-durationNormal, 0.2s);
}

[b-16wmqvnqmc] .accordion-item.expanded .accordion-icon {
    transform: rotate(180deg);
}

[b-16wmqvnqmc] .accordion-content {
    display: none;
    background: transparent;
    padding-bottom: 8px;
}

[b-16wmqvnqmc] .accordion-item.expanded .accordion-content {
    display: block;
}

[b-16wmqvnqmc] .sub-nav-item {
    display: flex;
    align-items: center;
    padding: 5px var(--space-3, 12px) 5px 34px;
    /* Indented */
    font: var(--type-meta-size, 12px)/1.2 var(--font-family-base, inherit);
    min-height: 32px;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    transition: background-color var(--BEC-durationNormal, 0.2s) ease, color var(--BEC-durationNormal, 0.2s) ease;
}

[b-16wmqvnqmc] .sub-nav-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* ── Module groups inside a system (Reporting → BEC Concrete Solutions / GMA / ePROMIS) ──
   A third tier between the system accordion and its report links. Indented and sized
   between the two so the hierarchy reads at a glance: system 12px → group 24px →
   report 46px. Only renders where a module carries a GroupL, so every other system
   is visually untouched. */
[b-16wmqvnqmc] .nav-group-header {
    display: flex;
    align-items: center;
    padding: 6px var(--space-3, 12px) 6px 24px;
    cursor: pointer;
    font: 500 var(--type-meta-size, 12px)/1.2 var(--font-family-base, inherit);
    min-height: var(--hit-target-min, 32px);
    color: rgba(255, 255, 255, 0.80);
    transition: background-color var(--BEC-durationNormal, 0.2s) ease, color var(--BEC-durationNormal, 0.2s) ease;
}

[b-16wmqvnqmc] .nav-group-header > span:first-child {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-16wmqvnqmc] .nav-group-header:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

[b-16wmqvnqmc] .nav-group-icon {
    margin-left: auto;
    font-size: 10px;
    display: inline-flex;
    transition: transform var(--BEC-durationNormal, 0.2s);
}

[b-16wmqvnqmc] .nav-group.expanded .nav-group-icon {
    transform: rotate(180deg);
}

[b-16wmqvnqmc] .nav-group-content {
    display: block;
    padding-bottom: 2px;
}

/* One step deeper than a normal sub-nav item, so a grouped report is clearly a child
   of its company rather than a sibling of it. */
[b-16wmqvnqmc] .sub-nav-item--nested {
    padding-left: 46px;
}

/* Under-development modules: shown in the menu but not navigable yet (no 404) */
[b-16wmqvnqmc] .sub-nav-item--soon {
    cursor: default;
    opacity: 0.55;
    justify-content: space-between;
}

[b-16wmqvnqmc] .sub-nav-item--soon:hover {
    background: transparent;
    color: var(--BEC-layoutGray600);
}

[b-16wmqvnqmc] .sub-nav-soon {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    margin-left: 8px;
    border-radius: 8px;
    background: var(--BEC-layoutGray200);
    color: var(--BEC-layoutGray600);
}

[b-16wmqvnqmc] .sub-nav-item.active {
    color: #ffffff;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.15);
    position: relative;
}

[b-16wmqvnqmc] .sub-nav-item.active::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0 2px 2px 0;
}

/* ================= CONTENT ================= */
.main-content[b-16wmqvnqmc] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Content wrapper fills area; scrolls only when inner page is taller (full-height pages fill and use their own 2 scrolls) */
.main-content > .erp-page-container[b-16wmqvnqmc] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

[b-16wmqvnqmc] .ms-sidebar.collapsed {
    width: 0;
    min-width: 0;
    max-width: 0;
    overflow: hidden;
    border-right: none;
    margin: 0;
    padding: 0;
}

/* Helper for Blazor integration - pages that need to fill and control their own scroll */
.erp-page-container[b-16wmqvnqmc],
[b-16wmqvnqmc] .erp-page-container {
    padding: 0;
    min-height: 0;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Custom Scrollbar for Sidebar */
[b-16wmqvnqmc] .ms-sidebar::-webkit-scrollbar {
    width: 4px;
    background: transparent;
}

[b-16wmqvnqmc] .ms-sidebar::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 2px;
}

[b-16wmqvnqmc] .ms-sidebar:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
}

[b-16wmqvnqmc] .ms-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
}

[b-16wmqvnqmc] .erp-page-container.full-height {
    padding: 0;
    flex: 1;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* CONTENT AREA — wraps main-content */
.content-area[b-16wmqvnqmc] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}



/* Flyouts */
[b-16wmqvnqmc] .me-control-flyout {
    position: absolute;
    top: 50px;
    background: var(--BEC-colorNeutralBackground1, white);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    display: none;
    z-index: 2000;
    overflow: hidden;
    border: 1px solid var(--BEC-layoutGray200);
    right: 10px;
    width: 320px;
}

[b-16wmqvnqmc] .me-control-flyout.visible {
    display: block;
}

[b-16wmqvnqmc] .me-header {
    background: var(--BEC-layoutGray100);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

[b-16wmqvnqmc] .me-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground1, #eff6fc);
    color: var(--BEC-layoutBlueDark);
    font-size: 28px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

[b-16wmqvnqmc] .me-avatar-large--photo {
    background: transparent;
}

[b-16wmqvnqmc] .me-info h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

[b-16wmqvnqmc] .me-info p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--BEC-layoutGray600);
}

[b-16wmqvnqmc] .me-link {
    font-size: 12px;
    color: var(--BEC-layoutBluePrimary);
    text-decoration: none;
    margin-top: 4px;
    display: inline-block;
}

[b-16wmqvnqmc] .me-action-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    font-size: 14px;
    color: var(--BEC-layoutGray900);
    border-top: 1px solid var(--BEC-layoutGray200);
    cursor: pointer;
    text-decoration: none;
}

[b-16wmqvnqmc] .me-action-item:hover {
    background: var(--BEC-layoutGray100);
}

[b-16wmqvnqmc] .me-action-icon {
    width: 24px;
    color: var(--BEC-layoutGray600);
    text-align: center;
    margin-right: 12px;
}

[b-16wmqvnqmc] .sign-out {
    color: var(--BEC-layoutDangerRed);
}

/* LOADING SPINNER */
.loading-container[b-16wmqvnqmc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    color: var(--BEC-layoutBluePrimary);
    font-size: 14px;
    font-weight: 500;
}

/* ================= INLINE STYLE REFACTORING ================= */
/* Utility: force-transparent background override for FluentUI component slots */
.bg-transparent[b-16wmqvnqmc] {
    background: transparent !important;
}

/* Specificity increased to override FluentUI badge styles without !important */
.layout-container[b-16wmqvnqmc]  .badge-warning {
    background: var(--BEC-Warning-Main, #ffb900);
    color: var(--BEC-colorNeutralForeground1, black);
}


/* ================= BIRTHDATE DIALOG ================= */
.birthdate-dialog[b-16wmqvnqmc] {
    max-width: 500px;
}

.birthdate-form[b-16wmqvnqmc],
.birthdate-confirm[b-16wmqvnqmc] {
    padding: 8px 0;
}

.birthdate-warning[b-16wmqvnqmc] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--BEC-Warning-Subtle, #fff3cd) 0%, #ffeaa7 100%);
    border: 2px solid var(--BEC-Warning-Main, #ffc107);
    border-radius: 8px;
    margin-bottom: 20px;
    color: var(--BEC-warningText, #856404);
    font-size: 13px;
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
}

.birthdate-warning svg[b-16wmqvnqmc] {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--BEC-Warning-Main, #ff9800);
}

.birthdate-warning strong[b-16wmqvnqmc] {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    color: var(--BEC-warningText, #856404);
}

.birthdate-description[b-16wmqvnqmc] {
    margin: 0 0 20px 0;
    color: var(--BEC-layoutGray600);
    font-size: 14px;
    line-height: 1.5;
}

.birthdate-input-wrapper[b-16wmqvnqmc] {
    margin-bottom: 24px;
}

.birthdate-label[b-16wmqvnqmc] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-layoutGray900);
    margin-bottom: 8px;
}

.birthdate-input[b-16wmqvnqmc] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--BEC-layoutGray300);
    border-radius: 4px;
    font-size: 14px;
    font-family: var(--BEC-fontFamilyBase);
    color: var(--BEC-layoutGray900);
    background: var(--BEC-colorNeutralBackground1);
    transition: border-color var(--BEC-durationNormal, 0.2s), box-shadow var(--BEC-durationNormal, 0.2s);
}

.birthdate-input:focus[b-16wmqvnqmc] {
    outline: none;
    border-color: var(--BEC-layoutBluePrimary);
    box-shadow: 0 0 0 1px var(--BEC-layoutBluePrimary);
}

.birthdate-input:hover:not(:disabled)[b-16wmqvnqmc] {
    border-color: var(--BEC-layoutGray600);
}

.birthdate-display[b-16wmqvnqmc] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-layoutGray100);
    border-radius: 8px;
    margin-bottom: 24px;
}

.birthdate-value[b-16wmqvnqmc] {
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-layoutGray900);
}

.birthdate-actions[b-16wmqvnqmc] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.birthdate-error[b-16wmqvnqmc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--BEC-layoutGray100);
    border: 1px solid var(--BEC-layoutDangerRed);
    border-radius: 4px;
    color: var(--BEC-layoutDangerRed);
    font-size: 13px;
    margin-bottom: 16px;
}

.birthdate-error svg[b-16wmqvnqmc] {
    flex-shrink: 0;
    stroke: var(--BEC-layoutDangerRed);
}

/* ================= MIGRATED INLINE STYLES ================= */

.lay-submit-text[b-16wmqvnqmc] {
    margin-left: 8px;
}

/* ================= ERROR BOUNDARY FALLBACK ================= */

.error-boundary-fallback[b-16wmqvnqmc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    min-height: 50vh;
    color: var(--BEC-text-primary, #333);
}

.error-boundary-fallback h3[b-16wmqvnqmc] {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    color: var(--BEC-danger, #d32f2f);
}

.error-boundary-fallback p[b-16wmqvnqmc] {
    margin-bottom: 1rem;
    color: var(--BEC-text-secondary, #666);
}

/* ================= RESPONSIVE BREAKPOINTS ================= */

/* Sidebar overlay backdrop */
[b-16wmqvnqmc] .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    -webkit-tap-highlight-color: transparent;
}

/* ── Tablet ≤ 1024px ── */
@media (max-width: 1024px) {
    /* The drawer used to start at top:0 with the same z-index as .ms-header. The
       header is later in the DOM, so it painted over the drawer's first 60px —
       exactly the logo + Home row — which was therefore invisible and untappable.
       Starting the drawer under the header fixes that and keeps the hamburger
       (the way to close it) reachable the whole time. */
    [b-16wmqvnqmc] .ms-sidebar {
        position: fixed;
        top: var(--BEC-layoutHeaderHeight);
        left: 0;
        bottom: 0;
        z-index: 1001;
        width: 0;
        min-width: 0;
        max-width: 0;
        overflow: hidden;
        transform: translateX(-100%);
        transition: transform 0.2s ease, width 0s linear 0.2s;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* WHY THE DRAWER WOULD NOT SCROLL ON A PHONE.

       The base rule sets `height: 100%`. Once this is position:fixed, that 100%
       resolves against the viewport — and on iOS Safari the viewport for `vh`
       units is the LARGE viewport, measured with the address bar and the bottom
       toolbar hidden. The drawer's box was therefore ~110px taller than the
       area actually on screen: its last nav items sat behind the browser
       toolbar, while the element itself was not overflowing at all
       (scrollHeight === clientHeight). Nothing to scroll, nothing scrolled, and
       the cut-off items were unreachable.

       100dvh is the dynamic viewport height — it tracks the visible area as the
       browser chrome shows and hides, so the drawer ends where the screen does
       and any content past that becomes real, scrollable overflow. The plain
       100vh line above it is the fallback for engines without dvh.

       overscroll-behavior:contain stops a flick that reaches the end of the nav
       from chaining into the page underneath the drawer. The safe-area padding
       keeps the last item clear of the iOS home indicator. */
    [b-16wmqvnqmc] .ms-sidebar:not(.collapsed) {
        width: var(--BEC-layoutSidebarWidth);
        min-width: var(--BEC-layoutSidebarWidth);
        max-width: var(--BEC-layoutSidebarWidth);
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
        transition: transform 0.2s ease, width 0s linear 0s;
        height: calc(100vh - var(--BEC-layoutHeaderHeight));
        height: calc(100dvh - var(--BEC-layoutHeaderHeight));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    [b-16wmqvnqmc] .ms-sidebar:not(.collapsed) ~ .sidebar-overlay {
        display: block;
        top: var(--BEC-layoutHeaderHeight);
    }

    /* The rail's logo is now inside a drawer that is usually closed — show the
       header mark instead so the product is identified without opening it. */
    [b-16wmqvnqmc] .header-brand {
        display: flex;
    }

    .content-area[b-16wmqvnqmc] {
        width: 100%;
        margin-left: 0;
    }}

/* ── Mobile ≤ 768px ── */
@media (max-width: 768px) {
    [b-16wmqvnqmc] .ms-header {
        padding: 0 8px;
        gap: 4px;
    }

    /* min-width:0 (not the "auto" this used to say — that's already the flex
       default and doesn't allow shrinking) is what actually lets this block
       shrink below its content's natural width instead of forcing the header
       to overflow. */
    [b-16wmqvnqmc] .header-left {
        min-width: 0;
        gap: 8px;
        flex-shrink: 1;
        overflow: visible;
    }

    /* flex-shrink:1 + min-width:0 + overflow-x:auto (not flex-shrink:0) — this
       cluster used to refuse to shrink at all, so when it didn't fit the row it
       stole space from .header-left instead (squeezing the waffle button/brand
       down toward 0 width and letting these icons visually overlap them).
       Letting this row shrink and scroll internally keeps the waffle button
       and identity text always visible; same pattern already used below at
       the 480px bracket, just applied here where the lock was introduced. */
    /* The greeting's own rule says it is "hidden below 768px" — but nothing
       ever hid it. It stayed in the flex row with overflow:hidden and
       text-overflow:ellipsis, so instead of disappearing it was squeezed to a
       few pixels of clipped text, taking width from the action row beside it
       and leaving the whole header looking crushed against the right edge.
       Hiding it for real is what pays for the spacing below. */
    [b-16wmqvnqmc] .header-welcome {
        display: none;
    }

    /* 4px, not 2px. Five icon buttons at 2px apart read as one undifferentiated
       block; the measured row only needs 295px of the 375px on the narrowest
       phone we support, so the breathing room is affordable. */
    /* 5 icons at 40px + the profile chip ≈ 260px, plus a 44px waffle and a 110px
       brand mark, fits a 375px screen with the greeting hidden — so the row no
       longer needs to scroll inside itself, which was what made it read as a
       floating strip with dead space beside it. */
    [b-16wmqvnqmc] .header-right {
        gap: 4px;
        flex-shrink: 0;
        min-width: 0;
        margin-left: auto;
    }

    [b-16wmqvnqmc] .header-right::-webkit-scrollbar {
        display: none;
    }

    [b-16wmqvnqmc] .waffle-btn {
        width: 44px;
        height: 44px;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 8px;
        color: #ffffff;
        flex-shrink: 0;
    }

    [b-16wmqvnqmc] .waffle-btn:hover,
    [b-16wmqvnqmc] .waffle-btn:active {
        background: rgba(255, 255, 255, 0.24);
    }

    [b-16wmqvnqmc] .avatar {
        width: 38px;
        height: 38px;
    }

    [b-16wmqvnqmc] .header-user-name {
        display: none;
    }

    /* Sidebar nav touch targets */
    [b-16wmqvnqmc] .home-link {
        padding: 12px;
        min-height: 44px;
    }

    [b-16wmqvnqmc] .accordion-header {
        padding: 12px 16px;
        min-height: 44px;
    }

    [b-16wmqvnqmc] .sub-nav-item {
        padding: 10px 16px 10px 48px;
        min-height: 44px;
    }

    [b-16wmqvnqmc] .nav-item {
        padding: 12px 24px;
        min-height: 44px;
    }

    [b-16wmqvnqmc] .ms-sidebar:not(.collapsed) {
        width: min(var(--BEC-layoutSidebarWidth), calc(100vw - 56px));
        min-width: min(var(--BEC-layoutSidebarWidth), calc(100vw - 56px));
        max-width: min(var(--BEC-layoutSidebarWidth), calc(100vw - 56px));
    }

    /* Flyouts — responsive on mobile */
    [b-16wmqvnqmc] .me-control-flyout {
        position: fixed;
        top: var(--BEC-layoutHeaderHeight);
        left: 8px;
        right: 8px;
        width: auto;
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - var(--BEC-layoutHeaderHeight) - 16px);
        overflow-y: auto;
    }

    [b-16wmqvnqmc] .me-avatar-large {
        width: 60px;
        height: 60px;
        font-size: 22px;
    }

    .birthdate-dialog[b-16wmqvnqmc] {
        max-width: calc(100vw - 32px);
        width: calc(100vw - 32px);
    }

    /* No overflow-y here — .main-content > .erp-page-container already owns
       vertical scrolling (overflow-y:auto, see line ~768). Re-adding it here
       made both the outer .main-content AND the inner .erp-page-container
       independently scrollable at mobile widths, showing two scrollbars. */
    .main-content[b-16wmqvnqmc] {
        margin-left: 0;
        width: 100%;
    }}

/* ── Small phone ≤ 480px ── */
@media (max-width: 480px) {
    /* 8px, not 4px. At 4px the profile chevron sat 4px from the physical edge
       of the screen — measured, not estimated — which is what read as "not
       well placed": nothing was overflowing, the row simply had no margin to
       sit in. With the greeting hidden above, the action row needs 295px of a
       375px screen, so 8px each side is free. */
    [b-16wmqvnqmc] .ms-header {
        padding: 0 8px;
    }

    /* Real fix for the header action row: 5 buttons at the desktop 54px width
       (270px) plus the user avatar simply do not fit next to the identity
       block on a ~360-414px phone — they were overflowing past the header's
       right edge and getting clipped invisible by .layout-container's
       overflow-x:hidden (unreachable, not just visually cramped). Icon-only
       at 40px brings 5 buttons down to 200px; overflow-x:auto is a safety net
       so nothing is ever unreachable even if a future 6th action is added. */
    [b-16wmqvnqmc] .header-right {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    [b-16wmqvnqmc] .header-right::-webkit-scrollbar {
        display: none;
    }

    [b-16wmqvnqmc] .header-action-btn {
        flex: 0 0 40px;
        width: 40px;
        max-width: 40px;
    }

    [b-16wmqvnqmc] .header-action-icon-wrap {
        width: 20px;
        height: 20px;
    }

    /* Separated from the icon run by more than the gap between the icons
       themselves — it is a different kind of control (identity, not an action),
       and at an equal gap it read as a sixth button. */
    [b-16wmqvnqmc] .header-user-block {
        margin-left: 6px;
        padding: 4px 2px 4px 4px;
        flex-shrink: 0;
    }

    [b-16wmqvnqmc] .me-control-flyout {
        left: 4px;
        right: 4px;
    }

    /* Smallest phones: shave the mark so the waffle + brand + actions still fit. */
    [b-16wmqvnqmc] .header-brand img {
        height: 17px;
    }}

/* ================= PRINT STYLES ================= */
@media print {
    /* Remove ALL height constraints and overflow clipping from layout containers */
    .layout-container[b-16wmqvnqmc] {
        position: static !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .main-stack[b-16wmqvnqmc] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
    }

    .content-area[b-16wmqvnqmc] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .main-content[b-16wmqvnqmc] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Remove height constraint on erp-page-container within main-content */
    .main-content > .erp-page-container[b-16wmqvnqmc],
    [b-16wmqvnqmc] .erp-page-container {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Hide navigation sidebar for print */
    [b-16wmqvnqmc] .ms-sidebar {
        display: none !important;
    }

    /* Hide top header bar for print */
    [b-16wmqvnqmc] .ms-header {
        display: none !important;
    }

    /* Hide flyouts and overlays */
    [b-16wmqvnqmc] .me-control-flyout {
        display: none !important;
    }}
/* /Components/Pages/EmailApproval/ApprovalAction.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   Email Approval Action Page - Styles
   Design: Matches EmailTemplateBuilder corporate style
   Colors: Corporate palette from email templates
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Color Variables - Matches EmailTemplateBuilder
   Moved from :root to component scope, aliased from _email-approval.css */

/* Page Layout */
.approval-page[b-ojw1wynvpj] {
    --primary-blue: var(--BEC-Approval-PrimaryBlue);
    --success-green: var(--BEC-Approval-SuccessGreen);
    --warning-orange: var(--BEC-Approval-WarningOrange);
    --danger-red: var(--BEC-Approval-DangerRed);
    --info-blue: var(--BEC-Approval-InfoBlue);
    --text-dark: var(--BEC-Approval-TextDark);
    --text-muted: var(--BEC-Approval-TextMuted);
    --text-light: var(--BEC-Approval-TextLight);
    --border-color: var(--BEC-Approval-Border);
    --background-light: var(--BEC-Approval-BgLight);
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.approval-container[b-ojw1wynvpj] {
    width: 100%;
    max-width: 520px;
}

/* Logo Header */
.approval-logo[b-ojw1wynvpj] {
    text-align: center;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.approval-logo img[b-ojw1wynvpj] {
    height: 40px;
    width: auto;
}

.approval-logo .logo-text[b-ojw1wynvpj] {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-blue);
    letter-spacing: -0.5px;
}

/* Card Styles */
.approval-card[b-ojw1wynvpj] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.card-header[b-ojw1wynvpj] {
    padding: 32px 24px;
    text-align: center;
    color: #ffffff;
}

.card-header.processing[b-ojw1wynvpj] {
    background: linear-gradient(135deg, var(--info-blue), #2980b9);
}

.card-header.success[b-ojw1wynvpj] {
    background: linear-gradient(135deg, var(--success-green), #1e8449);
}

.card-header.error[b-ojw1wynvpj] {
    background: linear-gradient(135deg, var(--danger-red), #922b21);
}

.card-header.warning[b-ojw1wynvpj] {
    background: linear-gradient(135deg, var(--warning-orange), #d35400);
}

.card-header.info[b-ojw1wynvpj] {
    background: linear-gradient(135deg, var(--info-blue), #2980b9);
}

.header-icon[b-ojw1wynvpj] {
    margin-bottom: 16px;
}

.header-icon svg[b-ojw1wynvpj] {
    width: 48px;
    height: 48px;
}

.card-header h1[b-ojw1wynvpj] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

/* Spinner Animation */
.spinner[b-ojw1wynvpj] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-ojw1wynvpj 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin-b-ojw1wynvpj {
    to { transform: rotate(360deg); }
}

/* Card Body */
.card-body[b-ojw1wynvpj] {
    padding: 28px 24px;
}

.status-message[b-ojw1wynvpj] {
    font-size: 16px;
    color: var(--text-dark);
    text-align: center;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.status-hint[b-ojw1wynvpj] {
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
    margin: 0;
}

/* Details Box */
.details-box[b-ojw1wynvpj] {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
}

.detail-row[b-ojw1wynvpj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.detail-row:not(:last-child)[b-ojw1wynvpj] {
    border-bottom: 1px solid var(--border-color);
}

.detail-label[b-ojw1wynvpj] {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.detail-value[b-ojw1wynvpj] {
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 600;
}

.status-badge[b-ojw1wynvpj] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.approved[b-ojw1wynvpj] {
    background: rgba(39, 174, 96, 0.1);
    color: var(--success-green);
}

.status-badge.rejected[b-ojw1wynvpj] {
    background: rgba(192, 57, 43, 0.1);
    color: var(--danger-red);
}

.status-badge.pending[b-ojw1wynvpj] {
    background: rgba(230, 126, 34, 0.1);
    color: var(--warning-orange);
}

/* Info Box */
.info-box[b-ojw1wynvpj] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    margin-top: 20px;
}

.info-box svg[b-ojw1wynvpj] {
    flex-shrink: 0;
    margin-top: 2px;
}

.info-box span[b-ojw1wynvpj] {
    font-size: 14px;
    line-height: 1.5;
}

.info-box.success[b-ojw1wynvpj] {
    background: rgba(39, 174, 96, 0.08);
    border: 1px solid rgba(39, 174, 96, 0.2);
}

.info-box.success svg[b-ojw1wynvpj] {
    color: var(--success-green);
}

.info-box.success span[b-ojw1wynvpj] {
    color: #1e8449;
}

.info-box.error[b-ojw1wynvpj] {
    background: rgba(192, 57, 43, 0.08);
    border: 1px solid rgba(192, 57, 43, 0.2);
}

.info-box.error svg[b-ojw1wynvpj] {
    color: var(--danger-red);
}

.info-box.error span[b-ojw1wynvpj] {
    color: #922b21;
}

.info-box.warning[b-ojw1wynvpj] {
    background: rgba(230, 126, 34, 0.08);
    border: 1px solid rgba(230, 126, 34, 0.2);
}

.info-box.warning svg[b-ojw1wynvpj] {
    color: var(--warning-orange);
}

.info-box.warning span[b-ojw1wynvpj] {
    color: #a04000;
}

.info-box.info[b-ojw1wynvpj] {
    background: rgba(52, 152, 219, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.info-box.info svg[b-ojw1wynvpj] {
    color: var(--info-blue);
}

.info-box.info span[b-ojw1wynvpj] {
    color: #21618c;
}

/* Card Footer */
.card-footer[b-ojw1wynvpj] {
    padding: 20px 24px;
    background: var(--background-light);
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.footer-text[b-ojw1wynvpj] {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 16px 0;
}

/* Buttons */
.btn-primary[b-ojw1wynvpj],
.btn-secondary[b-ojw1wynvpj] {
    display: inline-block;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-primary[b-ojw1wynvpj] {
    background: var(--primary-blue);
    color: #ffffff;
}

.btn-primary:hover[b-ojw1wynvpj] {
    background: #154360;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 82, 118, 0.3);
}

.btn-secondary[b-ojw1wynvpj] {
    background: #ffffff;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}

.btn-secondary:hover[b-ojw1wynvpj] {
    background: var(--primary-blue);
    color: #ffffff;
}

/* Page Footer */
.page-footer[b-ojw1wynvpj] {
    text-align: center;
    margin-top: 24px;
}

.page-footer p[b-ojw1wynvpj] {
    font-size: 12px;
    color: var(--text-light);
    margin: 0;
}

/* Responsive */
@media (max-width: 480px) {
    .approval-page[b-ojw1wynvpj] {
        padding: 16px;
    }
    
    .card-header[b-ojw1wynvpj] {
        padding: 24px 20px;
    }
    
    .card-header h1[b-ojw1wynvpj] {
        font-size: 20px;
    }
    
    .card-body[b-ojw1wynvpj] {
        padding: 24px 20px;
    }
    
    .btn-primary[b-ojw1wynvpj],
    .btn-secondary[b-ojw1wynvpj] {
        width: 100%;
        text-align: center;
    }
}
/* /Components/Pages/EmailApproval/ApprovalReject.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   Email Approval Reject Page - Styles
   Design: Matches EmailTemplateBuilder corporate style
   Extends base approval styles with form-specific styling
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Color Variables - Matches EmailTemplateBuilder
   Moved from :root to component scope, aliased from _email-approval.css */

/* Page Layout */
.approval-page[b-xg6d2wzy55] {
    --primary-blue: var(--BEC-Approval-PrimaryBlue);
    --success-green: var(--BEC-Approval-SuccessGreen);
    --warning-orange: var(--BEC-Approval-WarningOrange);
    --danger-red: var(--BEC-Approval-DangerRed);
    --info-blue: var(--BEC-Approval-InfoBlue);
    --text-dark: var(--BEC-Approval-TextDark);
    --text-muted: var(--BEC-Approval-TextMuted);
    --text-light: var(--BEC-Approval-TextLight);
    --border-color: var(--BEC-Approval-Border);
    --background-light: var(--BEC-Approval-BgLight);
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.approval-container[b-xg6d2wzy55] {
    width: 100%;
    max-width: 560px;
}

/* Logo Header */
.approval-logo[b-xg6d2wzy55] {
    text-align: center;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.approval-logo img[b-xg6d2wzy55] {
    height: 40px;
    width: auto;
}

.approval-logo .logo-text[b-xg6d2wzy55] {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-blue);
    letter-spacing: -0.5px;
}

/* Card Styles */
.approval-card[b-xg6d2wzy55] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.card-header[b-xg6d2wzy55] {
    padding: 32px 24px;
    text-align: center;
    color: #ffffff;
}

.card-header.processing[b-xg6d2wzy55] {
    background: linear-gradient(135deg, var(--info-blue), #2980b9);
}

.card-header.success[b-xg6d2wzy55] {
    background: linear-gradient(135deg, var(--success-green), #1e8449);
}

.card-header.error[b-xg6d2wzy55] {
    background: linear-gradient(135deg, var(--danger-red), #922b21);
}

.card-header.warning[b-xg6d2wzy55] {
    background: linear-gradient(135deg, var(--warning-orange), #d35400);
}

.card-header.info[b-xg6d2wzy55] {
    background: linear-gradient(135deg, var(--info-blue), #2980b9);
}

.card-header.reject[b-xg6d2wzy55] {
    background: linear-gradient(135deg, var(--danger-red), #a93226);
}

.header-icon[b-xg6d2wzy55] {
    margin-bottom: 16px;
}

.header-icon svg[b-xg6d2wzy55] {
    width: 48px;
    height: 48px;
}

.card-header h1[b-xg6d2wzy55] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

/* Spinner Animation */
.spinner[b-xg6d2wzy55] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-xg6d2wzy55 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin-b-xg6d2wzy55 {
    to { transform: rotate(360deg); }
}

/* Card Body */
.card-body[b-xg6d2wzy55] {
    padding: 28px 24px;
}

.status-message[b-xg6d2wzy55] {
    font-size: 16px;
    color: var(--text-dark);
    text-align: center;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

/* Request Summary */
.request-summary[b-xg6d2wzy55] {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}

.request-summary h3[b-xg6d2wzy55] {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-grid[b-xg6d2wzy55] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.summary-item[b-xg6d2wzy55] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-item.full-width[b-xg6d2wzy55] {
    grid-column: 1 / -1;
}

.summary-label[b-xg6d2wzy55] {
    font-size: 12px;
    color: var(--text-light);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.summary-value[b-xg6d2wzy55] {
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 600;
}

/* Rejection Form */
.rejection-form[b-xg6d2wzy55] {
    margin-top: 8px;
}

.form-label[b-xg6d2wzy55] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.label-text[b-xg6d2wzy55] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.required-badge[b-xg6d2wzy55] {
    font-size: 11px;
    font-weight: 600;
    color: var(--danger-red);
    background: rgba(192, 57, 43, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-textarea[b-xg6d2wzy55] {
    width: 100%;
    min-height: 140px;
    padding: 14px 16px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-dark);
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.form-textarea:focus[b-xg6d2wzy55] {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.1);
}

.form-textarea.invalid[b-xg6d2wzy55] {
    border-color: var(--danger-red);
}

.form-textarea.invalid:focus[b-xg6d2wzy55] {
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}

.form-textarea[b-xg6d2wzy55]::placeholder {
    color: var(--text-light);
}

.textarea-footer[b-xg6d2wzy55] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    min-height: 24px;
}

.char-count[b-xg6d2wzy55] {
    font-size: 12px;
    color: var(--text-light);
}

.char-count.warning[b-xg6d2wzy55] {
    color: var(--warning-orange);
    font-weight: 500;
}

.validation-error[b-xg6d2wzy55] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--danger-red);
    font-weight: 500;
}

.validation-error svg[b-xg6d2wzy55] {
    flex-shrink: 0;
}

/* Details Box */
.details-box[b-xg6d2wzy55] {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
}

.detail-row[b-xg6d2wzy55] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.detail-row:not(:last-child)[b-xg6d2wzy55] {
    border-bottom: 1px solid var(--border-color);
}

.detail-label[b-xg6d2wzy55] {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.detail-value[b-xg6d2wzy55] {
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 600;
}

.status-badge[b-xg6d2wzy55] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.approved[b-xg6d2wzy55] {
    background: rgba(39, 174, 96, 0.1);
    color: var(--success-green);
}

.status-badge.rejected[b-xg6d2wzy55] {
    background: rgba(192, 57, 43, 0.1);
    color: var(--danger-red);
}

/* Info Box */
.info-box[b-xg6d2wzy55] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    margin-top: 20px;
}

.info-box svg[b-xg6d2wzy55] {
    flex-shrink: 0;
    margin-top: 2px;
}

.info-box span[b-xg6d2wzy55] {
    font-size: 14px;
    line-height: 1.5;
}

.info-box.success[b-xg6d2wzy55] {
    background: rgba(39, 174, 96, 0.08);
    border: 1px solid rgba(39, 174, 96, 0.2);
}

.info-box.success svg[b-xg6d2wzy55] {
    color: var(--success-green);
}

.info-box.success span[b-xg6d2wzy55] {
    color: #1e8449;
}

.info-box.error[b-xg6d2wzy55] {
    background: rgba(192, 57, 43, 0.08);
    border: 1px solid rgba(192, 57, 43, 0.2);
}

.info-box.error svg[b-xg6d2wzy55] {
    color: var(--danger-red);
}

.info-box.error span[b-xg6d2wzy55] {
    color: #922b21;
}

.info-box.warning[b-xg6d2wzy55] {
    background: rgba(230, 126, 34, 0.08);
    border: 1px solid rgba(230, 126, 34, 0.2);
}

.info-box.warning svg[b-xg6d2wzy55] {
    color: var(--warning-orange);
}

.info-box.warning span[b-xg6d2wzy55] {
    color: #a04000;
}

.info-box.info[b-xg6d2wzy55] {
    background: rgba(52, 152, 219, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.info-box.info svg[b-xg6d2wzy55] {
    color: var(--info-blue);
}

.info-box.info span[b-xg6d2wzy55] {
    color: #21618c;
}

/* Card Footer */
.card-footer[b-xg6d2wzy55] {
    padding: 20px 24px;
    background: var(--background-light);
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.card-footer.form-footer[b-xg6d2wzy55] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.footer-text[b-xg6d2wzy55] {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 16px 0;
}

/* Buttons */
.btn-primary[b-xg6d2wzy55],
.btn-secondary[b-xg6d2wzy55],
.btn-cancel[b-xg6d2wzy55],
.btn-reject[b-xg6d2wzy55] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary[b-xg6d2wzy55] {
    background: var(--primary-blue);
    color: #ffffff;
}

.btn-primary:hover[b-xg6d2wzy55] {
    background: #154360;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 82, 118, 0.3);
}

.btn-secondary[b-xg6d2wzy55] {
    background: #ffffff;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}

.btn-secondary:hover[b-xg6d2wzy55] {
    background: var(--primary-blue);
    color: #ffffff;
}

.btn-cancel[b-xg6d2wzy55] {
    background: #ffffff;
    color: var(--text-muted);
    border: 2px solid var(--border-color);
}

.btn-cancel:hover[b-xg6d2wzy55] {
    background: var(--background-light);
    border-color: var(--text-muted);
    color: var(--text-dark);
}

.btn-reject[b-xg6d2wzy55] {
    background: var(--danger-red);
    color: #ffffff;
    min-width: 160px;
}

.btn-reject:hover:not(:disabled)[b-xg6d2wzy55] {
    background: #a93226;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(192, 57, 43, 0.3);
}

.btn-reject:disabled[b-xg6d2wzy55] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-spinner[b-xg6d2wzy55] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-xg6d2wzy55 0.8s linear infinite;
}

/* Page Footer */
.page-footer[b-xg6d2wzy55] {
    text-align: center;
    margin-top: 24px;
}

.page-footer p[b-xg6d2wzy55] {
    font-size: 12px;
    color: var(--text-light);
    margin: 0;
}

/* Responsive */
@media (max-width: 480px) {
    .approval-page[b-xg6d2wzy55] {
        padding: 16px;
        align-items: flex-start;
        padding-top: 40px;
    }
    
    .card-header[b-xg6d2wzy55] {
        padding: 24px 20px;
    }
    
    .card-header h1[b-xg6d2wzy55] {
        font-size: 20px;
    }
    
    .card-body[b-xg6d2wzy55] {
        padding: 24px 20px;
    }
    
    .summary-grid[b-xg6d2wzy55] {
        grid-template-columns: 1fr;
    }
    
    .card-footer.form-footer[b-xg6d2wzy55] {
        flex-direction: column;
    }
    
    .btn-cancel[b-xg6d2wzy55],
    .btn-reject[b-xg6d2wzy55] {
        width: 100%;
    }
}
/* /Components/Pages/MainLayout/Account/Account.razor.rz.scp.css */
/* Account Page - Modern Compact Design */

/* Page Container */
.account-page[b-wlc9nftlru] {
    padding: 2rem;
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
    min-height: 100vh;
}

@media (max-width: 768px) {
    .account-page[b-wlc9nftlru] {
        padding: 1rem;
    }
}

/* Loading State */
.account-loading[b-wlc9nftlru] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
}

.loading-text[b-wlc9nftlru] {
    font-size: 1.125rem;
    color: #6c757d;
    font-weight: 500;
}

/* Error State */
.account-error[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
    border-left: 4px solid #dc3545;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.1);
}

.account-error i[b-wlc9nftlru] {
    font-size: 2rem;
    color: #dc3545;
}

.account-error h3[b-wlc9nftlru] {
    margin: 0 0 0.25rem 0;
    font-size: 1.125rem;
    color: #dc3545;
}

.account-error p[b-wlc9nftlru] {
    margin: 0;
    color: #721c24;
}

/* Profile Header */
.profile-header[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 1.25rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.25);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.profile-header[b-wlc9nftlru]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    z-index: 0;
}

.profile-header > *[b-wlc9nftlru] {
    position: relative;
    z-index: 1;
}

.profile-avatar[b-wlc9nftlru] {
    position: relative;
    flex-shrink: 0;
}

.avatar-circle[b-wlc9nftlru] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 4px solid rgba(255, 255, 255, 0.3);
}

.avatar-circle i[b-wlc9nftlru] {
    font-size: 2.5rem;
    color: #667eea;
}

.avatar-status[b-wlc9nftlru] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.avatar-status.active[b-wlc9nftlru] {
    background: #28a745;
}

.profile-info[b-wlc9nftlru] {
    flex: 1;
    color: white;
}

.profile-name[b-wlc9nftlru] {
    margin: 0 0 0.25rem 0;
    font-size: 2rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-username[b-wlc9nftlru] {
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.profile-meta[b-wlc9nftlru] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.875rem;
}

.meta-item[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.95);
    padding: 0.375rem 0.75rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2rem;
    backdrop-filter: blur(10px);
}

.meta-item i[b-wlc9nftlru] {
    font-size: 1rem;
}

.meta-item .verified[b-wlc9nftlru] {
    color: #28a745;
    background: white;
    border-radius: 50%;
    padding: 2px;
    margin-left: 0.25rem;
}

.profile-actions[b-wlc9nftlru] {
    display: flex;
    gap: 0.75rem;
}

.btn-icon[b-wlc9nftlru] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.btn-icon:hover:not(:disabled)[b-wlc9nftlru] {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(180deg);
}

.btn-icon:disabled[b-wlc9nftlru] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Main Content Grid */
.account-grid[b-wlc9nftlru] {
    display: grid;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

@media (max-width: 1024px) {
    .account-grid[b-wlc9nftlru] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Full-width cards */
.info-card:first-of-type[b-wlc9nftlru] {
    grid-column: 1 / -1;
}

.split-card[b-wlc9nftlru] {
    grid-column: 1 / -1;
}

/* Info Card */
.info-card[b-wlc9nftlru] {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    border: 1px solid rgba(102, 126, 234, 0.1);
    position: relative;
}

.info-card[b-wlc9nftlru]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, #667eea, #764ba2);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.info-card:hover[b-wlc9nftlru] {
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
    transform: translateY(-4px);
    border-color: rgba(102, 126, 234, 0.3);
}

.info-card:hover[b-wlc9nftlru]::before {
    opacity: 1;
}

/* Card Header */
.card-header[b-wlc9nftlru] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 2px solid #f0f2f5;
    background: linear-gradient(to right, #f8f9fa, #ffffff);
    position: relative;
}

.card-header[b-wlc9nftlru]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, #667eea, transparent);
    opacity: 0.3;
}

.card-title[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #2c3e50;
}

.card-title i[b-wlc9nftlru] {
    font-size: 1.25rem;
    color: #667eea;
}

.btn-edit[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 2px solid #667eea;
    color: #667eea;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-edit:hover[b-wlc9nftlru] {
    background: #667eea;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
}

/* Card Body */
.card-body[b-wlc9nftlru] {
    padding: 1.75rem;
}

@media (max-width: 768px) {
    .card-body[b-wlc9nftlru] {
        padding: 1.25rem;
    }
}

/* Info Grid - Display Mode */
.info-grid[b-wlc9nftlru] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

@media (max-width: 768px) {
    .info-grid[b-wlc9nftlru] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.info-item[b-wlc9nftlru] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.info-label[b-wlc9nftlru] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.info-label i[b-wlc9nftlru] {
    font-size: 0.875rem;
    color: #667eea;
}

.info-value[b-wlc9nftlru] {
    font-size: 0.9375rem;
    color: #2c3e50;
    padding: 0.625rem 0.875rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    border-left: 3px solid #667eea;
    font-weight: 500;
    min-height: 38px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.info-value-empty[b-wlc9nftlru] {
    color: #6c757d;
    font-style: italic;
}

/* Birthday Field Styling */
.birthday-item[b-wlc9nftlru] {
    grid-column: 1 / -1;
}

.birthday-value[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.birthday-display[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #2c3e50;
    font-weight: 500;
}

.birthday-display i[b-wlc9nftlru] {
    color: #667eea;
    font-size: 1rem;
}

.birthday-badge[b-wlc9nftlru] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
    color: white;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(198, 69, 105, 0.3);
    animation: birthdayPulse-b-wlc9nftlru 2s ease-in-out infinite;
}

.birthday-badge i[b-wlc9nftlru] {
    font-size: 0.875rem;
    animation: birthdayRotate-b-wlc9nftlru 3s linear infinite;
}

@keyframes birthdayPulse-b-wlc9nftlru {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(198, 69, 105, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(198, 69, 105, 0.5);
    }
}

@keyframes birthdayRotate-b-wlc9nftlru {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Form Grid - Edit Mode */
.form-grid[b-wlc9nftlru] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.form-field[b-wlc9nftlru] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-field label[b-wlc9nftlru] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #495057;
}

.required[b-wlc9nftlru] {
    color: #dc3545;
    margin-left: 0.125rem;
}

.input[b-wlc9nftlru] {
    padding: 0.75rem 1rem;
    border: 2px solid #e9ecef;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    color: #2c3e50;
    transition: all 0.3s ease;
    background: white;
}

.input:focus[b-wlc9nftlru] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.input.error[b-wlc9nftlru] {
    border-color: #dc3545;
}

.input.error:focus[b-wlc9nftlru] {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.field-error[b-wlc9nftlru] {
    font-size: 0.75rem;
    color: #dc3545;
    font-weight: 500;
    margin-top: -0.25rem;
}

/* Readonly Section */
.readonly-section[b-wlc9nftlru] {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 0.75rem;
    border: 1px solid #dee2e6;
    border-left: 4px solid #667eea;
    position: relative;
    overflow: hidden;
}

.readonly-section[b-wlc9nftlru]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, #667eea, transparent);
    opacity: 0.5;
}

.readonly-section h4[b-wlc9nftlru] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
}

.info-row[b-wlc9nftlru] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
    border-bottom: 1px solid #dee2e6;
}

.info-row:last-child[b-wlc9nftlru] {
    border-bottom: none;
}

.info-row .info-label[b-wlc9nftlru] {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 600;
}

.info-row .info-value[b-wlc9nftlru] {
    font-size: 0.875rem;
    color: #2c3e50;
    font-weight: 500;
    background: transparent;
    padding: 0;
    border: none;
    min-height: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.info-row .info-value .birthday-display[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-row .info-value .birthday-badge[b-wlc9nftlru] {
    margin-left: 0.5rem;
}

/* Form Actions */
.form-actions[b-wlc9nftlru] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #f0f2f5;
}

.btn-save[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-save:hover:not(:disabled)[b-wlc9nftlru] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-save:disabled[b-wlc9nftlru] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Badges */
.badge[b-wlc9nftlru] {
    padding: 0.375rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.badge.primary[b-wlc9nftlru] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.badge.success[b-wlc9nftlru] {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.badge.default[b-wlc9nftlru] {
    background: #e9ecef;
    color: #495057;
    border: 1px solid #dee2e6;
}

.badge.count[b-wlc9nftlru] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

/* Split Card */
.split-card .split-body[b-wlc9nftlru] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    padding: 1.5rem;
}

.split-section[b-wlc9nftlru] {
    min-width: 0;
}

.section-title[b-wlc9nftlru] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f0f2f5;
}

.section-title i[b-wlc9nftlru] {
    color: #667eea;
}

.split-divider[b-wlc9nftlru] {
    width: 2px;
    background: linear-gradient(to bottom, transparent, #e9ecef, transparent);
}

/* Compact Card */
.compact-card .compact-grid[b-wlc9nftlru] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.compact-item[b-wlc9nftlru] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.75rem;
    border-left: 3px solid #667eea;
    transition: all 0.3s ease;
}

.compact-item:hover[b-wlc9nftlru] {
    background: #e9ecef;
    transform: translateX(4px);
}

.compact-item > i[b-wlc9nftlru] {
    font-size: 1.25rem;
    color: #667eea;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.compact-item > div[b-wlc9nftlru] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.compact-label[b-wlc9nftlru] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
}

.compact-value[b-wlc9nftlru] {
    font-size: 0.9375rem;
    color: #2c3e50;
    font-weight: 500;
}

/* List Card */
.list-items[b-wlc9nftlru] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.list-item[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #f8f9fa;
    border-radius: 0.75rem;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.list-item:hover[b-wlc9nftlru] {
    background: white;
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
    transform: translateX(4px);
}

.list-item.is-default[b-wlc9nftlru] {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-color: #4caf50;
}

.list-icon[b-wlc9nftlru] {
    width: 44px;
    height: 44px;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.list-content[b-wlc9nftlru] {
    flex: 1;
    min-width: 0;
}

.list-title[b-wlc9nftlru] {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.375rem;
}

.list-meta[b-wlc9nftlru] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8125rem;
    color: #6c757d;
}

.list-meta span[b-wlc9nftlru] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.list-meta i[b-wlc9nftlru] {
    color: #667eea;
}

.list-badges[b-wlc9nftlru] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Toast Messages */
.toast[b-wlc9nftlru] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-width: 400px;
    z-index: 1000;
    animation: slideUp-b-wlc9nftlru 0.3s ease;
    backdrop-filter: blur(10px);
}

@keyframes slideUp-b-wlc9nftlru {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.toast-success[b-wlc9nftlru] {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-left: 4px solid #28a745;
}

.toast-success i[b-wlc9nftlru] {
    font-size: 1.5rem;
    color: #28a745;
}

.toast-error[b-wlc9nftlru] {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border-left: 4px solid #dc3545;
}

.toast-error i[b-wlc9nftlru] {
    font-size: 1.5rem;
    color: #dc3545;
}

.toast-content[b-wlc9nftlru] {
    flex: 1;
}

.toast-title[b-wlc9nftlru] {
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.toast-success .toast-title[b-wlc9nftlru] {
    color: #155724;
}

.toast-error .toast-title[b-wlc9nftlru] {
    color: #721c24;
}

.toast-message[b-wlc9nftlru] {
    font-size: 0.875rem;
}

.toast-success .toast-message[b-wlc9nftlru] {
    color: #155724;
}

.toast-error .toast-message[b-wlc9nftlru] {
    color: #721c24;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .split-card .split-body[b-wlc9nftlru] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .split-divider[b-wlc9nftlru] {
        display: none;
    }

    .info-grid[b-wlc9nftlru] {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    .account-page[b-wlc9nftlru] {
        padding: 1rem;
    }

    .profile-header[b-wlc9nftlru] {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .profile-name[b-wlc9nftlru] {
        font-size: 1.5rem;
    }

    .profile-meta[b-wlc9nftlru] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .profile-actions[b-wlc9nftlru] {
        width: 100%;
        justify-content: center;
    }

    .form-grid[b-wlc9nftlru] {
        grid-template-columns: 1fr;
    }

    .info-grid[b-wlc9nftlru] {
        grid-template-columns: 1fr;
    }

    .list-item[b-wlc9nftlru] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .list-badges[b-wlc9nftlru] {
        align-self: flex-start;
    }

    .toast[b-wlc9nftlru] {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: none;
    }

    .form-actions[b-wlc9nftlru] {
        flex-direction: column;
    }

    .btn-save[b-wlc9nftlru] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .avatar-circle[b-wlc9nftlru] {
        width: 80px;
        height: 80px;
    }

    .avatar-circle i[b-wlc9nftlru] {
        font-size: 2rem;
    }

    .profile-name[b-wlc9nftlru] {
        font-size: 1.25rem;
    }

    .profile-username[b-wlc9nftlru] {
        font-size: 1rem;
    }

    .card-header[b-wlc9nftlru] {
        padding: 1rem;
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .card-body[b-wlc9nftlru] {
        padding: 1rem;
    }

    .list-meta[b-wlc9nftlru] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .compact-grid[b-wlc9nftlru] {
        gap: 0.75rem;
    }
}
/* /Components/Pages/MainLayout/AconexMcp/AconexMcpDocs.razor.rz.scp.css */
/* Aconex MCP Documentation Styles */

/* Divider */
.docs-divider[b-1duyuoh6ge] {
    border: none;
    border-top: 1px solid #e1e1e1;
    margin: 32px 0;
}

/* Code Blocks with Copy Button */
.code-block[b-1duyuoh6ge] {
    position: relative;
    margin: 16px 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e1e1e1;
}

.code-header[b-1duyuoh6ge] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: #f5f5f5;
    border-bottom: 1px solid #e1e1e1;
    font-size: 12px;
    color: #505050;
}

.code-header span[b-1duyuoh6ge] {
    font-weight: 500;
}

.copy-btn[b-1duyuoh6ge] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #ffffff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #505050;
    transition: all 0.15s ease;
}

.copy-btn:hover[b-1duyuoh6ge] {
    background: #f0f0f0;
    border-color: #0078d4;
    color: #0078d4;
}

.copy-btn:active[b-1duyuoh6ge] {
    background: #e0e0e0;
}

.copy-btn svg[b-1duyuoh6ge] {
    flex-shrink: 0;
}

.code-block pre[b-1duyuoh6ge] {
    margin: 0;
    padding: 16px;
    background: #ffffff;
    overflow-x: auto;
}

.code-block pre code[b-1duyuoh6ge] {
    background: none;
    padding: 0;
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    color: #171717;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Tables */
.docs-table[b-1duyuoh6ge] {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14px;
}

.docs-table th[b-1duyuoh6ge],
.docs-table td[b-1duyuoh6ge] {
    padding: 12px 16px;
    text-align: left;
    border: 1px solid #e1e1e1;
}

.docs-table th[b-1duyuoh6ge] {
    background: #f5f5f5;
    font-weight: 600;
    color: #171717;
}

.docs-table tr:hover[b-1duyuoh6ge] {
    background: #fafafa;
}

.docs-table code[b-1duyuoh6ge] {
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Cascadia Code', Consolas, monospace;
    font-size: 13px;
    white-space: nowrap;
}

.docs-table a[b-1duyuoh6ge] {
    color: #0078d4;
    text-decoration: none;
}

.docs-table a:hover[b-1duyuoh6ge] {
    text-decoration: underline;
}
/* /Components/Pages/MainLayout/Administration/Administration/AuditLog/AuditLogAdministration.razor.rz.scp.css */
/* ========================================
   AUDIT LOG ADMINISTRATION
   GOLD STANDARD CSS - Role Model for All Pages
   
   FEATURES:
   ✅ Sticky Page Header (stays at top)
   ✅ Sticky Action Toolbar (stays below header)
   ✅ Sticky Grid Headers (stays below toolbar)
   ✅ Minimal CSS - Structure Only
   ✅ Syncfusion handles component styling
   ✅ Smooth scroll behavior
   ✅ Professional shadows & elevation
   
   STICKY POSITIONING STRATEGY:
   📌 Page Header:    top: 0px,    z-index: 100
   📌 Action Toolbar: top: 58px,   z-index: 90
   📌 Grid Headers:   top: 120px,  z-index: 80
   
   This creates a layered sticky effect where each
   element sticks below the previous one while scrolling.
   
   IMPORTANT: Container must NOT have overflow-y,
   let the browser's default scroll work for sticky!
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-7eozfx1fl5] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   Let browser handle scrolling for sticky to work
   ======================================== */
.erp-page-container[b-7eozfx1fl5] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - 100% IDENTICAL TO SYSTEM MODULES
   ======================================== */
.erp-page-header[b-7eozfx1fl5] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-7eozfx1fl5] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-7eozfx1fl5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-7eozfx1fl5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-7eozfx1fl5] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-7eozfx1fl5] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-7eozfx1fl5] {
    transform: scale(0.98);
}

.page-subtitle[b-7eozfx1fl5] {
    display: none;
}

.header-right[b-7eozfx1fl5] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-7eozfx1fl5] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-7eozfx1fl5] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-7eozfx1fl5] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-7eozfx1fl5] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider[b-7eozfx1fl5] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-7eozfx1fl5] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-7eozfx1fl5] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-7eozfx1fl5] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-7eozfx1fl5] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-7eozfx1fl5] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-7eozfx1fl5] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-7eozfx1fl5] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-7eozfx1fl5] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-7eozfx1fl5] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-7eozfx1fl5] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-7eozfx1fl5] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-7eozfx1fl5] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-7eozfx1fl5] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-7eozfx1fl5] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-7eozfx1fl5] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-7eozfx1fl5] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-7eozfx1fl5] .e-toolbar .e-textbox.e-input-group,
[b-7eozfx1fl5] .e-toolbar .e-input-group.e-control-wrapper,
[b-7eozfx1fl5] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-7eozfx1fl5] .e-toolbar .e-textbox.e-input-group .e-input,
[b-7eozfx1fl5] .e-toolbar .e-input-group .e-input,
[b-7eozfx1fl5] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-7eozfx1fl5] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-7eozfx1fl5] .e-toolbar .e-input-group:focus-within,
[b-7eozfx1fl5] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-7eozfx1fl5] .e-toolbar .e-textbox .e-input-group-icon,
[b-7eozfx1fl5] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-7eozfx1fl5] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-7eozfx1fl5] .e-toolbar .e-input-group .e-input::placeholder,
[b-7eozfx1fl5] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   PAGE CONTENT
   No overflow here - let page scroll naturally
   ======================================== */
.erp-page-content[b-7eozfx1fl5] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Loading Overlay */
.loading-overlay[b-7eozfx1fl5] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
    font-size: 16px;
    color: #0078d4;
    font-weight: 600;
}

/* Error Dialog Content */
.error-dialog-content[b-7eozfx1fl5] {
    display: flex;
    gap: 20px;
    padding: 20px;
    align-items: flex-start;
}

.error-icon[b-7eozfx1fl5] {
    flex-shrink: 0;
}

.error-icon i[b-7eozfx1fl5] {
    font-size: 48px;
    color: #d13438;
}

.error-message h4[b-7eozfx1fl5] {
    margin: 0 0 12px 0;
    font-size: 18px;
    color: #242424;
}

.error-message p[b-7eozfx1fl5] {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #605e5c;
}

.error-hint[b-7eozfx1fl5] {
    font-size: 13px;
    color: #8a8886;
    font-style: italic;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   (100% IDENTICAL TO SYSTEM MODULES)
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-7eozfx1fl5] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-7eozfx1fl5] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-7eozfx1fl5] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-7eozfx1fl5] .e-grid .e-row.e-selectionbackground,
[b-7eozfx1fl5] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-7eozfx1fl5] .e-grid .e-row.e-selectionbackground:hover,
[b-7eozfx1fl5] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-7eozfx1fl5] .e-grid .e-row.e-selectionbackground td:first-child,
[b-7eozfx1fl5] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - Compact (32px) */
[b-7eozfx1fl5] .e-grid .e-row {
    height: 32px !important;
}

[b-7eozfx1fl5] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - Compact (32px) */
[b-7eozfx1fl5] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Row Hover Effect */
[b-7eozfx1fl5] .e-grid .e-row:hover:not(.e-selectionbackground):not([aria-selected="true"]) {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* ⚠️ PAGER STYLING: Managed by BEC_Theme.css (Global Ultra-Compact Single-Row Pager) */
/* DO NOT add pager CSS here - it will override the global styles */

/* Action Badges in Grid */
:global(.action-badge)[b-7eozfx1fl5] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

:global(.action-create)[b-7eozfx1fl5] {
    background: #d4edda;
    color: #155724;
}

:global(.action-update)[b-7eozfx1fl5] {
    background: #cce5ff;
    color: #004085;
}

:global(.action-delete)[b-7eozfx1fl5] {
    background: #f8d7da;
    color: #721c24;
}

:global(.action-read)[b-7eozfx1fl5] {
    background: #e2e3e5;
    color: #383d41;
}

/* Truncate Long Text */
.truncate-text[b-7eozfx1fl5] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================
   DIALOG STYLING
   ======================================== */
.dialog-content[b-7eozfx1fl5] {
    padding: 20px;
}

.detail-section[b-7eozfx1fl5] {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.detail-section:last-child[b-7eozfx1fl5] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.detail-section h3[b-7eozfx1fl5] {
    font-size: 16px;
    font-weight: 600;
    color: #0078d4;
    margin: 0 0 16px 0;
}

.detail-table[b-7eozfx1fl5] {
    width: 100%;
    border-collapse: collapse;
}

.detail-table tr[b-7eozfx1fl5] {
    border-bottom: 1px solid #f0f0f0;
}

.detail-table tr:last-child[b-7eozfx1fl5] {
    border-bottom: none;
}

.detail-table td[b-7eozfx1fl5] {
    padding: 10px 12px;
    vertical-align: top;
}

.detail-table td.label[b-7eozfx1fl5] {
    font-weight: 600;
    color: #666;
    width: 180px;
}

.detail-table td.value-cell[b-7eozfx1fl5] {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    word-break: break-word;
}

.additional-info[b-7eozfx1fl5] {
    padding: 12px;
    background: #f5f5f5;
    border-radius: 4px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    color: #333;
}

/* ========================================
   RESPONSIVE DESIGN (Syncfusion Adaptive UI)
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {

    /* Sticky headers with adjusted positions */
    .erp-page-header[b-7eozfx1fl5] {
        padding: 8px 16px;
    }

    [b-7eozfx1fl5] .e-toolbar.e-control {
        top: 50px !important;
        padding: 4px 16px !important;
    }

    :global(.e-grid .e-gridheader)[b-7eozfx1fl5] {
        top: 100px !important;
    }
}

/* Mobile (< 768px) - Syncfusion Adaptive UI kicks in */
@media (max-width: 768px) {

    /* Page Header - Compact Mobile Layout */
    .erp-page-header[b-7eozfx1fl5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 8px 12px;
    }

    .stats-container[b-7eozfx1fl5] {
        width: 100%;
        justify-content: space-around;
        padding: 4px 8px;
        gap: 8px;
    }

    .stat-card[b-7eozfx1fl5] {
        min-width: 60px;
    }

    .page-title[b-7eozfx1fl5] {
        font-size: 18px;
    }

    .page-title i[b-7eozfx1fl5] {
        font-size: 20px;
    }

    .page-subtitle[b-7eozfx1fl5] {
        font-size: 11px;
    }

    /* Toolbar - Mobile Optimization */
    [b-7eozfx1fl5] .e-toolbar.e-control {
        top: 90px !important;
        /* Adjusted for taller mobile header */
        padding: 4px 12px !important;
        margin: 4px 8px !important;
    }

    [b-7eozfx1fl5] .e-toolbar .e-toolbar-item .e-tbar-btn {
        padding: 4px 6px !important;
        font-size: 11px !important;
    }

    [b-7eozfx1fl5] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
        font-size: 12px !important;
    }

    /* Grid Headers - Adjusted for Mobile */
    :global(.e-grid .e-gridheader)[b-7eozfx1fl5] {
        top: 140px !important;
    }

    /* Grid Content - Mobile Padding */
    .erp-page-content[b-7eozfx1fl5] {
        padding: 8px;
    }

    /* Adaptive Grid Features (Syncfusion Handles) */
    :global(.e-grid.e-responsive-mode)[b-7eozfx1fl5] {
        font-size: 13px !important;
    }

    /* Dialog - Full Screen on Mobile */
    .detail-table td.label[b-7eozfx1fl5] {
        width: 100px;
        font-size: 12px;
    }

    .detail-table td[b-7eozfx1fl5] {
        padding: 8px;
        font-size: 13px;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {
    .page-title[b-7eozfx1fl5] {
        font-size: 16px;
    }

    .stat-value[b-7eozfx1fl5] {
        font-size: 14px;
    }

    .stat-label[b-7eozfx1fl5] {
        font-size: 9px;
    }

    [b-7eozfx1fl5] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
        /* Show icons only on very small screens */
    }
}

/* ========================================
   HELP WIZARD SIDEBAR STYLING
   ======================================== */
[b-7eozfx1fl5] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-7eozfx1fl5] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-7eozfx1fl5] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-7eozfx1fl5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-7eozfx1fl5] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-7eozfx1fl5] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-7eozfx1fl5] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-7eozfx1fl5] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-7eozfx1fl5] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-7eozfx1fl5] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-7eozfx1fl5] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-7eozfx1fl5] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-7eozfx1fl5] {
    margin-bottom: 24px;
    animation: fadeInUp-b-7eozfx1fl5 0.6s ease;
}

.step-icon i[b-7eozfx1fl5] {
    font-size: 48px;
}

.step-title[b-7eozfx1fl5] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-7eozfx1fl5] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-7eozfx1fl5] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-7eozfx1fl5] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-7eozfx1fl5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-7eozfx1fl5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-7eozfx1fl5] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-7eozfx1fl5] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-7eozfx1fl5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-7eozfx1fl5] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-7eozfx1fl5] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-7eozfx1fl5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-7eozfx1fl5] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-7eozfx1fl5] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-7eozfx1fl5] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-7eozfx1fl5] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-7eozfx1fl5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-7eozfx1fl5] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-7eozfx1fl5] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-7eozfx1fl5] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-7eozfx1fl5] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-7eozfx1fl5] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-7eozfx1fl5] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-7eozfx1fl5] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-7eozfx1fl5] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-7eozfx1fl5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-7eozfx1fl5] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-7eozfx1fl5] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-7eozfx1fl5] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.wizard-actions[b-7eozfx1fl5] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-7eozfx1fl5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-7eozfx1fl5] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-7eozfx1fl5] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-7eozfx1fl5] {
    background: #e1dfdd;
}

.btn-next[b-7eozfx1fl5] {
    background: var(--BEC-colorBrandForeground1);
    color: white;
}

.btn-next:hover:not(:disabled)[b-7eozfx1fl5] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-7eozfx1fl5] {
    background: #10b981;
    color: white;
}

.btn-success:hover:not(:disabled)[b-7eozfx1fl5] {
    background: #059669;
}

/* Animations */
@keyframes fadeInUp-b-7eozfx1fl5 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   WIZARD FORM STYLING (View Wizard)
   ======================================== */
.form-group[b-7eozfx1fl5] {
    margin-bottom: 20px;
}

.form-label[b-7eozfx1fl5] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-value[b-7eozfx1fl5] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-7eozfx1fl5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* Assignment Wizard Sidebar (View Wizard) */
[b-7eozfx1fl5] .assignment-wizard-sidebar {
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

/* Responsive: Stack form rows on mobile */
@media (max-width: 768px) {
    .form-row[b-7eozfx1fl5] {
        grid-template-columns: 1fr;
    }

    [b-7eozfx1fl5] .assignment-wizard-sidebar {
        width: 90% !important;
    }
}

/* ========================================
   COLUMN CHOOSER STYLING
   ======================================== */
.column-chooser-actions[b-7eozfx1fl5] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-7eozfx1fl5] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-7eozfx1fl5] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-7eozfx1fl5] {
    font-size: 12px;
}

.column-chooser-list[b-7eozfx1fl5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-7eozfx1fl5] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-7eozfx1fl5] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-7eozfx1fl5]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-7eozfx1fl5]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-7eozfx1fl5] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-7eozfx1fl5] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-7eozfx1fl5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-7eozfx1fl5] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-7eozfx1fl5] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-7eozfx1fl5] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-7eozfx1fl5] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-7eozfx1fl5] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-7eozfx1fl5] {
    animation: fadeInUp-b-7eozfx1fl5 0.3s ease-out;
}

.step-title[b-7eozfx1fl5] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-7eozfx1fl5] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-7eozfx1fl5] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-7eozfx1fl5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-7eozfx1fl5]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-7eozfx1fl5]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-7eozfx1fl5]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-7eozfx1fl5]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-7eozfx1fl5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-7eozfx1fl5] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-7eozfx1fl5] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-7eozfx1fl5] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-7eozfx1fl5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-7eozfx1fl5] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-7eozfx1fl5] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-7eozfx1fl5] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-7eozfx1fl5] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-7eozfx1fl5] {
    background: #f3f2f1;
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-wizard-step-mt[b-7eozfx1fl5] {
    margin-top: 24px;
}

.adm-text-separator[b-7eozfx1fl5] {
    color: #e0e0e0;
}

.adm-text-brand[b-7eozfx1fl5] {
    color: var(--BEC-colorBrandForeground1);
}
/* /Components/Pages/MainLayout/Administration/Administration/Branch/BranchAdministration.razor.rz.scp.css */
/* ========================================
   BRANCH ADMINISTRATION
   Following CompanyAdministration CSS pattern 100%
   
   FEATURES:
   ✅ Sticky Page Header (stays at top)
   ✅ Sticky Action Toolbar (stays below header with 8px gap)
   ✅ Sticky Grid Headers (stays below toolbar)
   ✅ Minimal CSS - Structure Only
   ✅ Syncfusion handles component styling
   ✅ Smooth scroll behavior
   ✅ Professional shadows & elevation
   ✅ Compact 20% smaller design
   ✅ Clear visual distinction: Active buttons (bright) vs Disabled (dimmed gray)
   
   STICKY POSITIONING STRATEGY:
   📌 Page Header:    top: 0px,    z-index: 100
   📌 Action Toolbar: top: 58px,   z-index: 90  (with 8px margin-top for spacing)
   📌 Grid Headers:   top: 110px,  z-index: 80  (adjusted for compact toolbar)
   
   This creates a layered sticky effect where each
   element sticks below the previous one while scrolling.
   
   IMPORTANT: Container must NOT have overflow-y,
   let the browser's default scroll work for sticky!
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-i648zwq69t] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   Let browser handle scrolling for sticky to work
   NO height constraints - allow natural flow
   ======================================== */
.erp-page-container[b-i648zwq69t] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-i648zwq69t] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-i648zwq69t] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-i648zwq69t] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-i648zwq69t] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-i648zwq69t] {
    display: none;
}

/* Help Icon Button */
.help-icon-btn[b-i648zwq69t] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-i648zwq69t] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-i648zwq69t] {
    transform: scale(0.98);
}

.header-right[b-i648zwq69t] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-i648zwq69t] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-i648zwq69t] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-i648zwq69t] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-i648zwq69t] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-i648zwq69t] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR - MICROSOFT STYLE (MATCHING ORGANIZATION ADMINISTRATION)
   ======================================== */
[b-i648zwq69t] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-i648zwq69t] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-i648zwq69t] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-i648zwq69t] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-i648zwq69t] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-i648zwq69t] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-i648zwq69t] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-i648zwq69t] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-i648zwq69t] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-i648zwq69t] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE */
/* Maximum specificity to override all Syncfusion defaults */

/* Container - Force exact 22px height with all possible selectors */
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-control-wrapper.e-textbox,
[b-i648zwq69t] .e-toolbar .e-textbox.e-input-group,
[b-i648zwq69t] .e-toolbar .e-input-group.e-control-wrapper {
    min-height: 22px !important;
    max-height: 22px !important;
    height: 22px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

/* Input field - Exact 20px height with vertical centering */
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox .e-input,
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group .e-input,
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group .e-input,
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input,
[b-i648zwq69t] .e-toolbar .e-textbox.e-input-group .e-input,
[b-i648zwq69t] .e-toolbar .e-textbox.e-input-group input.e-input,
[b-i648zwq69t] .e-toolbar .e-input-group input {
    font-size: 11px !important;
    padding: 0 8px !important;
    line-height: 20px !important;
    height: 20px !important;
    box-sizing: border-box !important;
    border: none !important;
    margin: 0 !important;
    background: transparent !important;
    outline: none !important;
}

/* Placeholder - Perfect vertical centering */
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input::placeholder,
[b-i648zwq69t] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-i648zwq69t] .e-toolbar .e-input-group input::placeholder {
    line-height: 20px !important;
    font-size: 11px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
}

/* Clear button icon - Aligned with container */
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox .e-input-group-icon,
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group .e-input-group-icon,
[b-i648zwq69t] .e-toolbar .e-textbox.e-input-group .e-input-group-icon {
    height: 22px !important;
    line-height: 22px !important;
    border: none !important;
    padding: 0 6px !important;
    min-height: 22px !important;
    max-height: 22px !important;
}

/* Focus state */
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox:focus-within,
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group:focus-within,
[b-i648zwq69t] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any extra padding/margin from wrapper elements */
[b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group-icon.e-clear-icon {
    height: 22px !important;
}

/* ========================================
   PAGE CONTENT
   No overflow here - let page scroll naturally
   Grid auto-sizes based on content
   ======================================== */
.erp-page-content[b-i648zwq69t] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   UNIFIED LOADING SPINNER - Tailwind3 Style
   Used across entire page (grid loading + modal loading)
   100% Syncfusion SfSpinner component
   ======================================== */
[b-i648zwq69t] .e-spinner-pane.e-spin-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.97) !important;
    z-index: 50 !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
}

/* Spinner Label */
[b-i648zwq69t] .e-spinner-pane .e-spin-label {
    font-size: 18px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    margin-top: 20px !important;
}

/* Tailwind3 Spinner Customization */
[b-i648zwq69t] .e-spinner-pane .e-spinner-inner {
    border-color: rgba(0, 120, 212, 0.1) !important;
    border-top-color: var(--BEC-colorBrandBackground) !important;
}

/* Loading Overlay (Legacy - kept for backwards compatibility) */
.loading-overlay[b-i648zwq69t] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* Error Dialog Content */
.error-dialog-content[b-i648zwq69t] {
    display: flex;
    gap: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalXL);
    align-items: flex-start;
}

.error-icon[b-i648zwq69t] {
    flex-shrink: 0;
}

.error-icon i[b-i648zwq69t] {
    font-size: 48px;
    color: #d13438;
}

.error-message h4[b-i648zwq69t] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground1);
}

.error-message p[b-i648zwq69t] {
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.error-hint[b-i648zwq69t] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   GRID CUSTOMIZATION
   STICKY HEADERS: Column headers stay below toolbar
   Natural page scrolling with paging enabled
   ======================================== */

/* Sticky Grid Headers - Now handled by EnableStickyHeader="true" in grid */
/* Removed duplicate styles - using System Modules pattern instead */

/* ========================================
   GRID STYLING - 100% IDENTICAL TO SYSTEM MODULES
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-i648zwq69t] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-i648zwq69t] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-i648zwq69t] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-i648zwq69t] .e-grid .e-row.e-selectionbackground,
[b-i648zwq69t] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-i648zwq69t] .e-grid .e-row.e-selectionbackground:hover,
[b-i648zwq69t] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-i648zwq69t] .e-grid .e-row.e-selectionbackground td:first-child,
[b-i648zwq69t] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-i648zwq69t] .e-grid .e-row {
    height: 32px !important;
}

[b-i648zwq69t] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-i648zwq69t] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid Row Hover */
[b-i648zwq69t] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Ensure grid table is fully visible */
:global(.e-grid .e-table)[b-i648zwq69t] {
    width: 100% !important;
}

/* Code Badge in Grid */
:global(.code-badge)[b-i648zwq69t] {
    display: inline-flex;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    background: #e8f4fd;
    color: var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    border: 1px solid #c7e0f4;
}

/* Type Badges in Grid (Branch-Specific) */
:global(.type-badge)[b-i648zwq69t] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

:global(.type-branch)[b-i648zwq69t] {
    background: #e8f4fd;
    color: var(--BEC-colorBrandBackground);
    border: 1px solid #c7e0f4;
}

:global(.type-project)[b-i648zwq69t] {
    background: #f4e8fd;
    color: #7b2cbf;
    border: 1px solid #d4c0f4;
}

/* Status Badges in Grid */
:global(.status-badge)[b-i648zwq69t] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

:global(.status-active)[b-i648zwq69t] {
    background: #d4edda;
    color: #155724;
}

:global(.status-inactive)[b-i648zwq69t] {
    background: #f8d7da;
    color: #721c24;
}

/* RTL Text Support */
:global(.rtl-text)[b-i648zwq69t] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

:global(.rtl-input)[b-i648zwq69t] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

/* ========================================
   MODAL DIALOGS
   ======================================== */

/* Modal Overlay */
.modal-overlay[b-i648zwq69t] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-i648zwq69t 0.2s ease-out;
}

@keyframes fadeIn-b-i648zwq69t {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Modal Container */
.modal-container[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-i648zwq69t 0.3s ease-out;
}

.modal-container.modal-sm[b-i648zwq69t] {
    max-width: 500px;
}

@keyframes slideUp-b-i648zwq69t {
    from {
        opacity: 0;
        transform: translateY(var(--BEC-spacingHorizontalXL));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal Header */
.modal-header[b-i648zwq69t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXL) 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: linear-gradient(to bottom, var(--BEC-colorNeutralBackground1) 0%, #f9fafb 100%);
    border-radius: var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge) 0 0;
}

.modal-title[b-i648zwq69t] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
}

.modal-title i[b-i648zwq69t] {
    color: var(--BEC-colorBrandBackground);
    font-size: var(--BEC-fontSizeBase500);
}

.modal-close[b-i648zwq69t] {
    background: transparent;
    border: none;
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.modal-close:hover[b-i648zwq69t] {
    background: #f0f0f0;
    color: var(--BEC-colorNeutralForeground1);
}

/* Modal Content */
.modal-content[b-i648zwq69t] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Modal Footer */
.modal-footer[b-i648zwq69t] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL) 24px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: #f9fafb;
    border-radius: 0 0 var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge);
}

/* Buttons */
.btn[b-i648zwq69t] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    transition: all 0.2s ease;
}

.btn:disabled[b-i648zwq69t] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-i648zwq69t] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-primary:hover:not(:disabled)[b-i648zwq69t] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-secondary[b-i648zwq69t] {
    background: var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-i648zwq69t] {
    background: #d1d1d1;
}

.btn-danger[b-i648zwq69t] {
    background: #dc2626;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-danger:hover:not(:disabled)[b-i648zwq69t] {
    background: #b91c1c;
}

.btn-warning[b-i648zwq69t] {
    background: #ff8c00;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-warning:hover:not(:disabled)[b-i648zwq69t] {
    background: #e67e00;
}

.btn-success[b-i648zwq69t] {
    background: #10b981;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-success:hover:not(:disabled)[b-i648zwq69t] {
    background: #059669;
}

/* Info Grid (View Dialog) */
.info-grid[b-i648zwq69t] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.info-section[b-i648zwq69t] {
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.section-title[b-i648zwq69t] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.section-title i[b-i648zwq69t] {
    font-size: var(--BEC-fontSizeBase400);
}

.info-row[b-i648zwq69t] {
    display: flex;
    padding: var(--BEC-spacingHorizontalS) 0;
    border-bottom: 1px solid #e5e7eb;
}

.info-row:last-child[b-i648zwq69t] {
    border-bottom: none;
}

.info-label[b-i648zwq69t] {
    flex: 0 0 180px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase300);
}

.info-value[b-i648zwq69t] {
    flex: 1;
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase300);
}

/* Form Grid (Edit Dialog) */
.form-grid[b-i648zwq69t] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.form-section[b-i648zwq69t] {
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

/* Form Group */
.form-group[b-i648zwq69t] {
    margin-bottom: 20px;
}

.form-label[b-i648zwq69t] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-i648zwq69t]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

.form-value[b-i648zwq69t] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-i648zwq69t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rtl-text[b-i648zwq69t] {
    direction: rtl;
    text-align: right;
}

.form-input[b-i648zwq69t] {
    width: 100%;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border: 1px solid #d1d1d1;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-family: 'Segoe UI', sans-serif;
    transition: border-color 0.2s ease;
}

.form-input:focus[b-i648zwq69t] {
    outline: none;
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: var(--BEC-shadow4);
}

.form-input:disabled[b-i648zwq69t] {
    background: #f0f0f0;
    color: var(--BEC-colorNeutralForeground3);
    cursor: not-allowed;
}

.checkbox-label[b-i648zwq69t] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-i648zwq69t] {
    width: var(--BEC-spacingHorizontalL);
    height: var(--BEC-spacingHorizontalL);
    cursor: pointer;
}

/* Warning Messages in Confirmation Dialogs */
.warning-message[b-i648zwq69t] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
}

.warning-message strong[b-i648zwq69t] {
    color: #d83b01;
}

.warning-note[b-i648zwq69t] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, #fff4e6 0%, #ffe4cc 100%);
    border-left: 3px solid #d83b01;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.warning-note i[b-i648zwq69t] {
    color: #d83b01;
    margin-top: var(--BEC-spacingHorizontalXXS);
    font-size: var(--BEC-fontSizeBase300);
    flex-shrink: 0;
}

.warning-note-info[b-i648zwq69t] {
    background: linear-gradient(135deg, #e8f4fd 0%, #c7e0f4 100%);
    border-left-color: var(--BEC-colorBrandForeground1);
}

.warning-note-info i[b-i648zwq69t] {
    color: var(--BEC-colorBrandForeground1);
}

.warning-note-success[b-i648zwq69t] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left-color: #10b981;
}

.warning-note-success i[b-i648zwq69t] {
    color: #10b981;
}

/* ========================================
   GRID PAGER STYLES
   ⚠️ Pager styles now in BEC_Theme.css (Global)
   ⚠️ DO NOT duplicate Syncfusion overrides here
   ======================================== */

/* ========================================
   PAGE-SPECIFIC RESPONSIVE LAYOUT
   Syncfusion component styles handled by BEC_Theme.css
   Only page layout positioning here
   ======================================== */

/* Tablet (768px - 1024px) - Layout Positioning Only */
@media (max-width: 1024px) {

    /* Sticky Toolbar Positioning */
    [b-i648zwq69t] .e-toolbar.e-control {
        top: 50px !important;
        /* Below compact header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-i648zwq69t] {
        top: 100px !important;
        /* Below header + toolbar */
    }
}

/* Mobile (< 768px) - Layout Adjustments */
@media (max-width: 768px) {

    /* Page Header - Stack Vertically */
    .erp-page-header[b-i648zwq69t] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    /* Stats - Full Width */
    .stats-container[b-i648zwq69t] {
        width: 100%;
        justify-content: space-around;
    }

    /* Sticky Toolbar Positioning - Adjusted for taller header */
    [b-i648zwq69t] .e-toolbar.e-control {
        top: 90px !important;
        /* Below taller mobile header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-i648zwq69t] {
        top: 140px !important;
        /* Below header + toolbar */
    }
}

/* Small Mobile (< 480px) - Icon-Only Toolbar */
@media (max-width: 480px) {

    /* Hide button text, show icons only to save space */
    [b-i648zwq69t] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }

    /* Column Chooser - Responsive on Mobile */
    [b-i648zwq69t] .e-grid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-i648zwq69t] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-i648zwq69t] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   ======================================== */
[b-i648zwq69t] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Column Chooser Dialog Header */
[b-i648zwq69t] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Content */
[b-i648zwq69t] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
}

/* ========================================
   HELP WIZARD STYLING
   ======================================== */

/* Hide sidebar overlay for help wizard */
[b-i648zwq69t] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-i648zwq69t] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-i648zwq69t] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* Wizard Sidebar Styling */
.sidebar-header[b-i648zwq69t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-i648zwq69t] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-i648zwq69t] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-i648zwq69t] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-i648zwq69t] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-i648zwq69t] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-i648zwq69t] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-i648zwq69t] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-i648zwq69t] {
    max-width: 100%;
    text-align: left;
    padding: 20px;
}

.step-icon[b-i648zwq69t] {
    margin-bottom: 24px;
    animation: fadeInUp-b-i648zwq69t 0.6s ease;
    text-align: center;
}

.step-title[b-i648zwq69t] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-i648zwq69t] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-i648zwq69t] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
    line-height: 1.6;
}

/* Info Box */
.info-box[b-i648zwq69t] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-i648zwq69t] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-i648zwq69t] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-i648zwq69t] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-i648zwq69t] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-i648zwq69t] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-i648zwq69t] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-i648zwq69t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-i648zwq69t] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-i648zwq69t] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-i648zwq69t] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-i648zwq69t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-i648zwq69t] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-i648zwq69t] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-i648zwq69t] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-i648zwq69t] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-i648zwq69t] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-i648zwq69t] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-i648zwq69t] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-i648zwq69t] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-i648zwq69t] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-i648zwq69t] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-i648zwq69t] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-i648zwq69t] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-i648zwq69t] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-i648zwq69t] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-i648zwq69t] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-i648zwq69t] {
    background: #f3f3f3;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-i648zwq69t] {
    background: #e0e0e0;
}

.btn-next[b-i648zwq69t] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-i648zwq69t] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-i648zwq69t] {
    background: #10b981;
    color: white;
}

.btn-success:hover:not(:disabled)[b-i648zwq69t] {
    background: #059669;
}

.btn i[b-i648zwq69t] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-i648zwq69t {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   BADGE STYLES (for View Wizard)
   ======================================== */
.badge[b-i648zwq69t] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-i648zwq69t] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-i648zwq69t] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-i648zwq69t] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* Column Chooser Dialog Footer (OK button) */
[b-i648zwq69t] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-i648zwq69t] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-i648zwq69t] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandForeground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-i648zwq69t] {
    font-size: 12px;
}

.column-chooser-list[b-i648zwq69t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-i648zwq69t] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-i648zwq69t]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-i648zwq69t]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-i648zwq69t] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-i648zwq69t] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-i648zwq69t] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-i648zwq69t] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-i648zwq69t] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-i648zwq69t] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-i648zwq69t] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-i648zwq69t] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-i648zwq69t] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-i648zwq69t] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-i648zwq69t] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-i648zwq69t] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* Dialog Content Styling */
[b-i648zwq69t] .notification-success .e-dlg-content,
[b-i648zwq69t] .notification-error .e-dlg-content,
[b-i648zwq69t] .notification-warning .e-dlg-content,
[b-i648zwq69t] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: #323130;
}

/* Close Icon Color */
[b-i648zwq69t] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-i648zwq69t] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-i648zwq69t] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-i648zwq69t] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: white;
}

/* ========================================
   PAGE-SPECIFIC RESPONSIVE LAYOUT
   Syncfusion component styles handled by BEC_Theme.css
   Only page layout positioning here
   ======================================== */

/* Tablet (768px - 1024px) - Layout Positioning Only */
@media (max-width: 1024px) {

    /* Sticky Toolbar Positioning */
    [b-i648zwq69t] .e-toolbar.e-control {
        top: 50px !important;
        /* Below compact header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-i648zwq69t] {
        top: 100px !important;
        /* Below header + toolbar */
    }
}

/* Mobile (< 768px) - Layout Adjustments */
@media (max-width: 768px) {

    /* Page Header - Stack Vertically */
    .erp-page-header[b-i648zwq69t] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    /* Stats - Full Width */
    .stats-container[b-i648zwq69t] {
        width: 100%;
        justify-content: space-around;
    }

    /* Sticky Toolbar Positioning - Adjusted for taller header */
    [b-i648zwq69t] .e-toolbar.e-control {
        top: 90px !important;
        /* Below taller mobile header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-i648zwq69t] {
        top: 140px !important;
        /* Below header + toolbar */
    }
}

/* Small Mobile (< 480px) - Icon-Only Toolbar */
@media (max-width: 480px) {

    /* Hide button text, show icons only to save space */
    [b-i648zwq69t] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }

    /* Column Chooser - Responsive on Mobile */
    [b-i648zwq69t] .e-grid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-i648zwq69t] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-i648zwq69t] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   BADGE STYLES (for View Wizard)
   ======================================== */
.badge[b-i648zwq69t] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-i648zwq69t] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-i648zwq69t] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-i648zwq69t] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* Column Chooser Dialog Footer (OK button) */
[b-i648zwq69t] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-i648zwq69t] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-i648zwq69t] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandForeground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-i648zwq69t] {
    font-size: 12px;
}

.column-chooser-list[b-i648zwq69t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-i648zwq69t] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-i648zwq69t]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-i648zwq69t]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-i648zwq69t] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-i648zwq69t] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-i648zwq69t] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-i648zwq69t] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-i648zwq69t] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-i648zwq69t] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-i648zwq69t] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-i648zwq69t] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-i648zwq69t] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-i648zwq69t] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-i648zwq69t] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-i648zwq69t] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* Dialog Content Styling */
[b-i648zwq69t] .notification-success .e-dlg-content,
[b-i648zwq69t] .notification-error .e-dlg-content,
[b-i648zwq69t] .notification-warning .e-dlg-content,
[b-i648zwq69t] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: #323130;
}

/* Close Icon Color */
[b-i648zwq69t] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-i648zwq69t] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-i648zwq69t] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-i648zwq69t] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: white;
}

/* ========================================
   PAGE-SPECIFIC RESPONSIVE LAYOUT
   Syncfusion component styles handled by BEC_Theme.css
   Only page layout positioning here
   ======================================== */

/* Tablet (768px - 1024px) - Layout Positioning Only */
@media (max-width: 1024px) {

    /* Sticky Toolbar Positioning */
    [b-i648zwq69t] .e-toolbar.e-control {
        top: 50px !important;
        /* Below compact header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-i648zwq69t] {
        top: 100px !important;
        /* Below header + toolbar */
    }
}

/* Mobile (< 768px) - Layout Adjustments */
@media (max-width: 768px) {

    /* Page Header - Stack Vertically */
    .erp-page-header[b-i648zwq69t] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    /* Stats - Full Width */
    .stats-container[b-i648zwq69t] {
        width: 100%;
        justify-content: space-around;
    }

    /* Sticky Toolbar Positioning - Adjusted for taller header */
    [b-i648zwq69t] .e-toolbar.e-control {
        top: 90px !important;
        /* Below taller mobile header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-i648zwq69t] {
        top: 140px !important;
        /* Below header + toolbar */
    }
}

/* Small Mobile (< 480px) - Icon-Only Toolbar */
@media (max-width: 480px) {

    /* Hide button text, show icons only to save space */
    [b-i648zwq69t] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }

    /* Search Bar - Responsive Width for Mobile */
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }

    /* Column Chooser - Responsive on Mobile */
    [b-i648zwq69t] .e-grid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* Medium Mobile (481px - 767px) - Adjust Search Bar */
@media (min-width: 481px) and (max-width: 767px) {

    /* Search Bar - Medium Width for Medium Mobile */
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }
}

/* Tablet (768px - 1024px) - Adjust Search Bar */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Search Bar - Tablet Width */
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-i648zwq69t] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-i648zwq69t] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-i648zwq69t] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-i648zwq69t] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   ======================================== */
[b-i648zwq69t] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Column Chooser Dialog Header */
[b-i648zwq69t] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Content */
[b-i648zwq69t] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Footer (OK button) */
[b-i648zwq69t] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES (GOLD STANDARD)
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-i648zwq69t] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column List */
.column-list[b-i648zwq69t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-i648zwq69t] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-i648zwq69t] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-i648zwq69t] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-i648zwq69t] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
    text-align: left;
}

/* Select All/Deselect All Actions */
.column-actions[b-i648zwq69t] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.action-link[b-i648zwq69t] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-link:hover[b-i648zwq69t] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-i648zwq69t]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-i648zwq69t]::-webkit-scrollbar-track {
    background: transparent;
}

.column-list[b-i648zwq69t]::-webkit-scrollbar-thumb {
    background-color: var(--BEC-colorNeutralStroke1);
    border-radius: 3px;
}

.column-list[b-i648zwq69t]::-webkit-scrollbar-thumb:hover {
    background-color: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   MIGRATED INLINE STYLES → CSS CLASSES
   ======================================== */
.adm-status-active-text[b-i648zwq69t] {
    color: green;
    font-weight: 600;
}

.adm-status-inactive-text[b-i648zwq69t] {
    color: red;
    font-weight: 600;
}

.adm-checkbox-group[b-i648zwq69t] {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 4px;
}

.adm-text-danger[b-i648zwq69t] {
    color: #d13438;
}

.adm-help-icon-lg[b-i648zwq69t] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-i648zwq69t] {
    color: #e0e0e0;
}

.adm-dialog-header-flex[b-i648zwq69t] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-notification-icon[b-i648zwq69t] {
    font-size: 20px;
}

.adm-preline-text[b-i648zwq69t] {
    white-space: pre-line;
}
/* /Components/Pages/MainLayout/Administration/Administration/Company/CompanyAdministration.razor.rz.scp.css */
/* ========================================
   COMPANY ADMINISTRATION
   Following OrganizationAdministration CSS pattern 100%
   
   FEATURES:
   ✅ Sticky Page Header (stays at top)
   ✅ Sticky Action Toolbar (stays below header with 8px gap)
   ✅ Sticky Grid Headers (stays below toolbar)
   ✅ Minimal CSS - Structure Only
   ✅ Syncfusion handles component styling
   ✅ Smooth scroll behavior
   ✅ Professional shadows & elevation
   ✅ Compact 20% smaller design
   ✅ Clear visual distinction: Active buttons (bright) vs Disabled (dimmed gray)
   
   STICKY POSITIONING STRATEGY:
   📌 Page Header:    top: 0px,    z-index: 100
   📌 Action Toolbar: top: 58px,   z-index: 90  (with 8px margin-top for spacing)
   📌 Grid Headers:   top: 110px,  z-index: 80  (adjusted for compact toolbar)
   
   This creates a layered sticky effect where each
   element sticks below the previous one while scrolling.
   
   IMPORTANT: Container must NOT have overflow-y,
   let the browser's default scroll work for sticky!
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-xh255910p3] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   Let browser handle scrolling for sticky to work
   NO height constraints - allow natural flow
   ======================================== */
.erp-page-container[b-xh255910p3] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER (50% Height Reduction)
   STICKY: Stays at top while scrolling
   ======================================== */
.erp-page-header[b-xh255910p3] {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalXL);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    box-shadow: var(--BEC-shadow4);
    transition: box-shadow 0.2s ease, background 0.2s ease;
}

.header-left[b-xh255910p3] {
    flex: 1;
}

.page-title[b-xh255910p3] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0 0 var(--BEC-spacingHorizontalXS) 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    color: var(--BEC-colorNeutralForeground1);
}

.page-title i[b-xh255910p3] {
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorBrandBackground);
}

.page-subtitle[b-xh255910p3] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

.header-right[b-xh255910p3] {
    flex-shrink: 0;
}

.stats-container[b-xh255910p3] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalSNudge) var(--BEC-spacingHorizontalM);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground2);
}

.stat-card[b-xh255910p3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXXS);
}

.stat-value[b-xh255910p3] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandBackground);
    line-height: 1;
}

.stat-label[b-xh255910p3] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    font-weight: var(--BEC-fontWeightSemibold);
    letter-spacing: 0.3px;
}

.stat-divider[b-xh255910p3] {
    width: 1px;
    height: var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralStroke1);
}

/* ========================================
   ACTION TOOLBAR - CLEAN UNDERLINE DESIGN
   STICKY: Stays below header while scrolling
   DESIGN: Simple underline hover with visible rounded edges
   ======================================== */

/* Toolbar Container - Rounded Corners with Visible Edges */
[b-xh255910p3] .e-toolbar.e-control {
    position: sticky !important;
    top: 58px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalXL) !important;
    min-height: 36px !important;
    margin: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalL) !important;
}

/* Toolbar Items - Reduced Spacing */
[b-xh255910p3] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

/* Right-aligned items (Search) - Add spacing from right edge */
[b-xh255910p3] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: var(--BEC-spacingHorizontalS) !important;
}

/* Toolbar button base styling - Clean & Uniform - 20% Smaller */
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: var(--BEC-fontSizeBase200) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: var(--BEC-spacingHorizontalXS) !important;
    min-height: 26px !important;
    box-shadow: none !important;
}

/* Button Icons - Uniform (Active buttons are bright) */
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 13px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
}

/* Button Text - Uniform (Active buttons are bright) */
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
}

/* ======= SIMPLE COLOR HOVER EFFECT - ALL BUTTONS ======= */
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* ======= ACTIVE/PRESSED STATE ======= */
/* OPTION 5: Opacity Only (Simplest & Lightest) - ACTIVE */
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) {
    opacity: 0.7 !important;
    transition: opacity 0.1s ease !important;
}

[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-icons,
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackgroundPressed) !important;
}

/* ======= DANGER BUTTON (Delete) - Red Color Hover ======= */
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-icons,
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-tbar-btn-text {
    color: #dc2626 !important;
}

[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-icons,
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-tbar-btn-text {
    color: #b91c1c !important;
}

/* ======= DISABLED BUTTON STATE - Simple and Clean ======= */
[b-xh255910p3] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
}

[b-xh255910p3] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
    cursor: not-allowed;
    background: var(--BEC-colorNeutralBackground3);
}

[b-xh255910p3] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn * {
    color: #aaaaaa;
}

/* ======= TOOLBAR SEPARATOR - Blue Accent (20% Smaller) ======= */
[b-xh255910p3] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: var(--BEC-spacingHorizontalL) !important;
    margin: 0 var(--BEC-spacingHorizontalXS) !important;
    border-radius: 0.5px !important;
    opacity: 0.6 !important;
}

/* ======= BUTTON FOCUS STATE - NO BORDER (User Preference) ======= */
[b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   PAGE CONTENT
   No overflow here - let page scroll naturally
   Grid auto-sizes based on content
   ======================================== */
.erp-page-content[b-xh255910p3] {
    flex: 1;
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalXL) var(--BEC-spacingHorizontalXL) var(--BEC-spacingHorizontalXL);
    position: relative;
}

/* Loading Overlay */
.loading-overlay[b-xh255910p3] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* Error Dialog Content */
.error-dialog-content[b-xh255910p3] {
    display: flex;
    gap: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalXL);
    align-items: flex-start;
}

.error-icon[b-xh255910p3] {
    flex-shrink: 0;
}

.error-icon i[b-xh255910p3] {
    font-size: 48px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-message h4[b-xh255910p3] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground1);
}

.error-message p[b-xh255910p3] {
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.error-hint[b-xh255910p3] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   GRID CUSTOMIZATION
   STICKY HEADERS: Column headers stay below toolbar
   Natural page scrolling with paging enabled
   ======================================== */

/* Sticky Grid Headers - Adjusted for smaller toolbar */
:global(.e-grid .e-gridheader)[b-xh255910p3] {
    position: sticky !important;
    top: 110px !important;
    z-index: 80 !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    box-shadow: var(--BEC-shadow4) !important;
}

:global(.e-grid .e-headercell)[b-xh255910p3] {
    background: var(--BEC-colorNeutralBackground2) !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid with natural paging - expands to fill available space */
/* Grid with Fixed Height - Syncfusion Recommended Approach */
:global(.e-grid)[b-xh255910p3] {
    overflow-x: auto !important;
    /* Horizontal scroll for wide tables */
}

:global(.e-grid .e-gridcontent)[b-xh255910p3] {
    overflow-x: auto !important;
    /* Horizontal scroll */
    overflow-y: auto !important;
    /* Vertical scroll for grid content */
}

/* Ensure grid table is fully visible */
:global(.e-grid .e-table)[b-xh255910p3] {
    width: 100% !important;
}

/* ⚠️ PAGER STYLING: Managed by BEC_Theme.css (Global Ultra-Compact Single-Row Pager) */
/* DO NOT add pager CSS here - it will override the global styles */

/* Code Badge in Grid */
:global(.code-badge)[b-xh255910p3] {
    display: inline-flex;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    border: 1px solid var(--BEC-colorBrandStroke1);
}

/* Count Badge in Grid */
:global(.count-badge)[b-xh255910p3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

/* Status Badges in Grid */
:global(.status-badge)[b-xh255910p3] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

:global(.status-active)[b-xh255910p3] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground1);
}

:global(.status-inactive)[b-xh255910p3] {
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground1);
}

/* RTL Text Support */
:global(.rtl-text)[b-xh255910p3] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

:global(.rtl-input)[b-xh255910p3] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

/* ========================================
   DIALOG STYLING
   ======================================== */
.dialog-content[b-xh255910p3] {
    padding: var(--BEC-spacingHorizontalXL);
}

.detail-section[b-xh255910p3] {
    margin-bottom: var(--BEC-spacingHorizontalXXL);
    padding-bottom: var(--BEC-spacingHorizontalXL);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.detail-section:last-child[b-xh255910p3] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.detail-section h3[b-xh255910p3] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandBackground);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
}

.section-title[b-xh255910p3] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandBackground);
    margin: var(--BEC-spacingHorizontalXXL) 0 var(--BEC-spacingHorizontalM) 0;
    padding-top: var(--BEC-spacingHorizontalL);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

.section-title:first-of-type[b-xh255910p3] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.detail-table[b-xh255910p3] {
    width: 100%;
    border-collapse: collapse;
}

.detail-table tr[b-xh255910p3] {
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.detail-table tr:last-child[b-xh255910p3] {
    border-bottom: none;
}

.detail-table td[b-xh255910p3] {
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalM);
    vertical-align: top;
}

.detail-table td.label[b-xh255910p3] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    width: 180px;
}

/* Form Groups in Dialogs */
.form-group[b-xh255910p3] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-label[b-xh255910p3] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalSNudge);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   INLINE VALIDATION ERROR (Phase 9)
   Displayed directly under each field
   ======================================== */
.field-error[b-xh255910p3] {
    margin-top: var(--BEC-spacingHorizontalSNudge);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background-color: var(--BEC-colorPaletteRedBackground2);
    border-left: 3px solid var(--BEC-colorPaletteRedForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorPaletteRedForeground1);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    animation: slideDown-b-xh255910p3 0.2s ease-out;
}

.field-error i[b-xh255910p3] {
    font-size: var(--BEC-fontSizeBase300);
}

@keyframes slideDown-b-xh255910p3 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Confirmation Dialogs */
.confirmation-content[b-xh255910p3] {
    display: flex;
    gap: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalXL);
    align-items: flex-start;
}

.confirmation-icon[b-xh255910p3] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.confirmation-icon-danger[b-xh255910p3] {
    background: linear-gradient(135deg, #fff4e6 0%, #ffe4cc 100%);
    color: var(--BEC-colorPaletteRedForeground1);
}

.confirmation-icon-warning[b-xh255910p3] {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    color: var(--BEC-colorPaletteDarkOrangeForeground1);
}

.confirmation-icon-success[b-xh255910p3] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.confirmation-message[b-xh255910p3] {
    flex: 1;
}

.confirmation-message p[b-xh255910p3] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
}

.confirmation-message p:last-child[b-xh255910p3] {
    margin-bottom: 0;
}

.confirmation-warning[b-xh255910p3] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, #fff4e6 0%, #ffe4cc 100%);
    border-left: 3px solid var(--BEC-colorPaletteRedForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
    margin: var(--BEC-spacingHorizontalM) 0 0 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.confirmation-warning i[b-xh255910p3] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-top: var(--BEC-spacingHorizontalXXS);
    font-size: var(--BEC-fontSizeBase300);
}

.confirmation-info[b-xh255910p3] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left: 3px solid var(--BEC-colorPaletteGreenForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-colorPaletteGreenForeground2);
    margin: var(--BEC-spacingHorizontalM) 0 0 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.confirmation-info i[b-xh255910p3] {
    color: var(--BEC-colorPaletteGreenForeground1);
    margin-top: var(--BEC-spacingHorizontalXXS);
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   GRID PAGER STYLES
   ⚠️ Pager styles now in BEC_Theme.css (Global)
   ⚠️ DO NOT duplicate Syncfusion overrides here
   ======================================== */

/* ========================================
   PAGE-SPECIFIC RESPONSIVE LAYOUT
   Syncfusion component styles handled by BEC_Theme.css
   Only page layout positioning here
   ======================================== */

/* Tablet (768px - 1024px) - Layout Positioning Only */
@media (max-width: 1024px) {

    /* Sticky Toolbar Positioning */
    [b-xh255910p3] .e-toolbar.e-control {
        top: 50px !important;
        /* Below compact header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-xh255910p3] {
        top: 100px !important;
        /* Below header + toolbar */
    }
}

/* Mobile (< 768px) - Layout Adjustments */
@media (max-width: 768px) {

    /* Page Header - Stack Vertically */
    .erp-page-header[b-xh255910p3] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    /* Stats - Full Width */
    .stats-container[b-xh255910p3] {
        width: 100%;
        justify-content: space-around;
    }

    /* Sticky Toolbar Positioning - Adjusted for taller header */
    [b-xh255910p3] .e-toolbar.e-control {
        top: 90px !important;
        /* Below taller mobile header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-xh255910p3] {
        top: 140px !important;
        /* Below header + toolbar */
    }
}

/* Small Mobile (< 480px) - Icon-Only Toolbar */
@media (max-width: 480px) {

    /* Hide button text, show icons only to save space */
    [b-xh255910p3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }

    /* Column Chooser - Responsive on Mobile */
    [b-xh255910p3] .e-grid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-xh255910p3] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-xh255910p3] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   ======================================== */
[b-xh255910p3] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Column Chooser Dialog Header */
[b-xh255910p3] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Content */
[b-xh255910p3] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Footer (OK button) */
[b-xh255910p3] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}
/* /Components/Pages/MainLayout/Administration/Administration/Company/CompanyCreateModal.razor.rz.scp.css */
/* ========================================
   Company Create Modal - Syncfusion Components
   Used on: CompanyAdministration.razor
   
   ✅ COMPLIANT WITH rules.mdc:
   - Uses var(--BEC-*) variables ONLY
   - NO hardcoded colors
   - NO duplicate Syncfusion overrides
   - Professional multi-step wizard design
   - Syncfusion Dialog + Stepper + Toast
   ======================================== */

/* ========================================
   SYNCFUSION DIALOG CUSTOMIZATION
   ======================================== */

/* Dialog Container */
:global(.company-create-dialog)[b-tgg3ztwf7h] {
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 1200px;
}

/* Dialog Header */
:global(.company-create-dialog .e-dlg-header)[b-tgg3ztwf7h] {
    background: linear-gradient(to bottom, var(--BEC-colorNeutralBackground1) 0%, var(--BEC-colorNeutralBackground2) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    padding: var(--BEC-spacingHorizontalXL) var(--BEC-spacingHorizontalXXL);
}

.dialog-header-content[b-tgg3ztwf7h] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.dialog-title[b-tgg3ztwf7h] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase600);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.dialog-title i[b-tgg3ztwf7h] {
    color: var(--BEC-colorBrandBackground);
    font-size: var(--BEC-fontSizeBase500);
}

.dialog-subtitle[b-tgg3ztwf7h] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Dialog Content */
:global(.company-create-dialog .e-dlg-content)[b-tgg3ztwf7h] {
    padding: 0;
    overflow: hidden;
}

/* Dialog Footer */
:global(.company-create-dialog .e-footer-content)[b-tgg3ztwf7h] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   SYNCFUSION STEPPER CUSTOMIZATION (LABEL ONLY)
   ✅ No icon styling needed - Label Only mode
   ✅ Clean, professional text-only display
   ======================================== */

:global(.company-stepper)[b-tgg3ztwf7h] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
}

/* Stepper Labels (Text Only) */
:global(.company-stepper .e-step .e-step-label-container)[b-tgg3ztwf7h] {
    padding: var(--BEC-spacingHorizontalM);
}

:global(.company-stepper .e-step .e-step-text-content)[b-tgg3ztwf7h] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    transition: all 0.3s ease;
}

/* Active Step Label */
:global(.company-stepper .e-step.e-step-selected .e-step-text-content)[b-tgg3ztwf7h] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase400);
}

/* Completed Step Label */
:global(.company-stepper .e-step.e-step-completed .e-step-text-content)[b-tgg3ztwf7h] {
    color: var(--BEC-colorNeutralForeground2);
}

/* Stepper Connector Lines */
:global(.company-stepper .e-stepper-progressbar)[b-tgg3ztwf7h] {
    background: var(--BEC-colorNeutralStroke2);
    height: 3px;
    transition: all 0.3s ease;
}

:global(.company-stepper .e-step.e-step-completed .e-stepper-progressbar)[b-tgg3ztwf7h],
:global(.company-stepper .e-step.e-step-selected .e-stepper-progressbar)[b-tgg3ztwf7h] {
    background: var(--BEC-colorBrandBackground);
    height: 4px;
}

/* ========================================
   FORM CONTENT AREA
   ======================================== */

.dialog-form-content[b-tgg3ztwf7h] {
    padding: var(--BEC-spacingHorizontalXXL);
    min-height: 400px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom scrollbar */
.dialog-form-content[b-tgg3ztwf7h]::-webkit-scrollbar {
    width: 8px;
}

.dialog-form-content[b-tgg3ztwf7h]::-webkit-scrollbar-track {
    background: transparent;
}

.dialog-form-content[b-tgg3ztwf7h]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusLarge);
}

.dialog-form-content[b-tgg3ztwf7h]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralStroke3);
}

/* Form Step Container */
.form-step[b-tgg3ztwf7h] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
}

/* Form Row (2-column grid) */
.form-row[b-tgg3ztwf7h] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

/* Form Row (3-column grid) - Compact horizontal layout */
.form-row-triple[b-tgg3ztwf7h] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--BEC-spacingHorizontalM);
}

/* Form Row (4-column grid) - Ultra-compact for small fields */
.form-row-quad[b-tgg3ztwf7h] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--BEC-spacingHorizontalM);
}

/* Form Group */
.form-group[b-tgg3ztwf7h] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.form-group.full-width[b-tgg3ztwf7h] {
    grid-column: span 2;
}

/* Form Label */
.form-label[b-tgg3ztwf7h] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.form-label .required[b-tgg3ztwf7h] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-left: var(--BEC-spacingHorizontalXXS);
}

/* Read-only Company/Organization Display */
.input-readonly[b-tgg3ztwf7h] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border: 1px solid var(--BEC-colorBrandStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background-color: var(--BEC-colorNeutralBackground3);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
    font-family: inherit;
}

.input-readonly i[b-tgg3ztwf7h] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

/* Loading Company/Organization Display */
.input-loading[b-tgg3ztwf7h] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    background-color: var(--BEC-colorNeutralBackground2);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
    font-family: inherit;
}

.input-loading i[b-tgg3ztwf7h] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

/* Field Hint */
.field-hint[b-tgg3ztwf7h] {
    display: block;
    margin-top: calc(var(--BEC-spacingHorizontalXS) * -1);
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   INLINE VALIDATION ERROR
   Displayed directly under each field
   ======================================== */
.error-message[b-tgg3ztwf7h] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: var(--BEC-fontWeightMedium);
    animation: slideDown-b-tgg3ztwf7h 0.2s ease;
}

@keyframes slideDown-b-tgg3ztwf7h {
    from {
        opacity: 0;
        transform: translateY(calc(var(--BEC-spacingHorizontalXS) * -1));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   SECTION TITLE
   ======================================== */
.section-title[b-tgg3ztwf7h] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: var(--BEC-spacingHorizontalM) 0 var(--BEC-spacingHorizontalS) 0;
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   INFO BOX
   ======================================== */
.info-box[b-tgg3ztwf7h] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorBrandBackground2);
    border-left: 4px solid var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: var(--BEC-spacingHorizontalS);
}

.info-box i[b-tgg3ztwf7h] {
    font-size: var(--BEC-fontSizeBase400);
    flex-shrink: 0;
}

/* ========================================
   TOGGLE SWITCH (Syncfusion SfSwitch)
   ======================================== */
.toggle-wrapper[b-tgg3ztwf7h] {
    display: flex;
    align-items: center;
    padding-top: var(--BEC-spacingHorizontalS);
}

/* ========================================
   SYNCFUSION SWITCH SIZING
   Make toggle wider to fit Active/Inactive text
   ======================================== */
.toggle-wrapper :global(.e-switch-wrapper)[b-tgg3ztwf7h] {
    width: 100px !important;
    min-width: 100px !important;
}

.toggle-wrapper :global(.e-switch-inner)[b-tgg3ztwf7h] {
    width: 100px !important;
}

.toggle-wrapper :global(.e-switch-on)[b-tgg3ztwf7h],
.toggle-wrapper :global(.e-switch-off)[b-tgg3ztwf7h] {
    font-size: var(--BEC-fontSizeBase300) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
}

/* ========================================
   DIALOG FOOTER (SYNCFUSION BUTTONS)
   ✅ NO custom button classes
   ✅ Uses Syncfusion e-btn classes
   ======================================== */
.dialog-footer-wrapper[b-tgg3ztwf7h] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    width: 100%;
}

.footer-spacer[b-tgg3ztwf7h] {
    flex: 1;
}

/* Syncfusion Button Customization */
:global(.company-create-dialog .e-footer-content .e-btn)[b-tgg3ztwf7h] {
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalXL);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    min-width: 100px;
}

/* Primary Button Styling */
:global(.company-create-dialog .e-footer-content .e-btn.e-primary)[b-tgg3ztwf7h] {
    background: var(--BEC-colorBrandBackground);
    border-color: var(--BEC-colorBrandBackground);
}

:global(.company-create-dialog .e-footer-content .e-btn.e-primary:hover:not(:disabled))[b-tgg3ztwf7h] {
    background: var(--BEC-colorBrandBackgroundHover);
    border-color: var(--BEC-colorBrandBackgroundHover);
}

/* Success Button Styling */
:global(.company-create-dialog .e-footer-content .e-btn.e-success)[b-tgg3ztwf7h] {
    background: var(--BEC-colorPaletteGreenBackground1);
    border-color: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorNeutralBackground1);
}

:global(.company-create-dialog .e-footer-content .e-btn.e-success:hover:not(:disabled))[b-tgg3ztwf7h] {
    background: var(--BEC-colorPaletteGreenBackground2);
    border-color: var(--BEC-colorPaletteGreenBackground2);
}

/* Flat Button Styling */
:global(.company-create-dialog .e-footer-content .e-btn.e-flat)[b-tgg3ztwf7h] {
    background: transparent;
    border-color: transparent;
    color: var(--BEC-colorNeutralForeground2);
}

:global(.company-create-dialog .e-footer-content .e-btn.e-flat:hover:not(:disabled))[b-tgg3ztwf7h] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
}

/* Button Icons */
:global(.company-create-dialog .e-footer-content .e-btn .e-btn-icon)[b-tgg3ztwf7h] {
    font-size: var(--BEC-fontSizeBase300);
}

/* Disabled Button State */
:global(.company-create-dialog .e-footer-content .e-btn:disabled)[b-tgg3ztwf7h] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    :global(.company-create-dialog)[b-tgg3ztwf7h] {
        max-width: 700px;
    }
    
    .dialog-form-content[b-tgg3ztwf7h] {
        padding: var(--BEC-spacingHorizontalL);
        min-height: 350px;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    :global(.company-create-dialog)[b-tgg3ztwf7h] {
        width: 95%;
        max-width: 100%;
        margin: var(--BEC-spacingHorizontalMNudge);
    }
    
    :global(.company-create-dialog .e-dlg-header)[b-tgg3ztwf7h] {
        padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    }
    
    .dialog-title[b-tgg3ztwf7h] {
        font-size: var(--BEC-fontSizeBase500);
    }
    
    :global(.company-stepper)[b-tgg3ztwf7h] {
        padding: var(--BEC-spacingHorizontalL);
    }
    
    :global(.company-stepper .e-step .e-step-text-content)[b-tgg3ztwf7h] {
        font-size: var(--BEC-fontSizeBase200);
    }
    
    .dialog-form-content[b-tgg3ztwf7h] {
        padding: var(--BEC-spacingHorizontalXL);
        min-height: 380px;
    }
    
    .form-row[b-tgg3ztwf7h] {
        grid-template-columns: 1fr;
    }
    
    .form-group.full-width[b-tgg3ztwf7h] {
        grid-column: span 1;
    }
    
    .dialog-footer-wrapper[b-tgg3ztwf7h] {
        flex-wrap: wrap;
    }
    
    .footer-spacer[b-tgg3ztwf7h] {
        display: none;
    }
    
    :global(.company-create-dialog .e-footer-content .e-btn)[b-tgg3ztwf7h] {
        flex: 1;
        min-width: 120px;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {
    :global(.company-create-dialog)[b-tgg3ztwf7h] {
        border-radius: 0;
        max-height: 100vh;
    }

    .dialog-title[b-tgg3ztwf7h] {
        font-size: var(--BEC-fontSizeBase400);
    }
    
    :global(.company-stepper .e-step .e-step-text-content)[b-tgg3ztwf7h] {
        display: none; /* Hide labels to save space */
    }
}
/* /Components/Pages/MainLayout/Administration/Administration/Department/DepartmentAdministration.razor.rz.scp.css */
/* ========================================
   DEPARTMENT ADMINISTRATION
   Following OrganizationAdministration CSS pattern 100%
   
   FEATURES:
   ✅ Sticky Page Header (stays at top)
   ✅ Sticky Action Toolbar (stays below header with 8px gap)
   ✅ Sticky Grid Headers (stays below toolbar)
   ✅ Minimal CSS - Structure Only
   ✅ Syncfusion handles component styling
   ✅ Smooth scroll behavior
   ✅ Professional shadows & elevation
   ✅ Compact 20% smaller design
   ✅ Clear visual distinction: Active buttons (bright) vs Disabled (dimmed gray)
   
   STICKY POSITIONING STRATEGY:
   📌 Page Header:    top: 0px,    z-index: 100
   📌 Action Toolbar: top: 58px,   z-index: 90  (with 8px margin-top for spacing)
   📌 Grid Headers:   top: 110px,  z-index: 80  (adjusted for compact toolbar)
   
   This creates a layered sticky effect where each
   element sticks below the previous one while scrolling.
   
   IMPORTANT: Container must NOT have overflow-y,
   let the browser's default scroll work for sticky!
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-jfo7ithga7] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   Let browser handle scrolling for sticky to work
   ======================================== */
.erp-page-container[b-jfo7ithga7] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-jfo7ithga7] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-jfo7ithga7] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-jfo7ithga7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-jfo7ithga7] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-jfo7ithga7] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-jfo7ithga7] {
    transform: scale(0.98);
}

.page-subtitle[b-jfo7ithga7] {
    display: none;
}

.header-right[b-jfo7ithga7] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-jfo7ithga7] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-jfo7ithga7] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-jfo7ithga7] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-jfo7ithga7] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR - MICROSOFT STYLE (MATCHING ORGANIZATION ADMINISTRATION)
   ======================================== */
[b-jfo7ithga7] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-jfo7ithga7] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-jfo7ithga7] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-jfo7ithga7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-jfo7ithga7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-jfo7ithga7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-jfo7ithga7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-jfo7ithga7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-jfo7ithga7] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-jfo7ithga7] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE */
/* Maximum specificity to override all Syncfusion defaults */

/* Container - Force exact 22px height with all possible selectors */
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-control-wrapper.e-textbox,
[b-jfo7ithga7] .e-toolbar .e-textbox.e-input-group,
[b-jfo7ithga7] .e-toolbar .e-input-group.e-control-wrapper {
    min-height: 22px !important;
    max-height: 22px !important;
    height: 22px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

/* Input field - Exact 20px height with vertical centering */
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox .e-input,
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group .e-input,
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group .e-input,
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input,
[b-jfo7ithga7] .e-toolbar .e-textbox.e-input-group .e-input,
[b-jfo7ithga7] .e-toolbar .e-textbox.e-input-group input.e-input,
[b-jfo7ithga7] .e-toolbar .e-input-group input {
    font-size: 11px !important;
    padding: 0 8px !important;
    line-height: 20px !important;
    height: 20px !important;
    box-sizing: border-box !important;
    border: none !important;
    margin: 0 !important;
    background: transparent !important;
    outline: none !important;
}

/* Placeholder - Perfect vertical centering */
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input::placeholder,
[b-jfo7ithga7] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-jfo7ithga7] .e-toolbar .e-input-group input::placeholder {
    line-height: 20px !important;
    font-size: 11px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
}

/* Clear button icon - Aligned with container */
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox .e-input-group-icon,
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group .e-input-group-icon,
[b-jfo7ithga7] .e-toolbar .e-textbox.e-input-group .e-input-group-icon {
    height: 22px !important;
    line-height: 22px !important;
    border: none !important;
    padding: 0 6px !important;
    min-height: 22px !important;
    max-height: 22px !important;
}

/* Focus state */
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox:focus-within,
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group:focus-within,
[b-jfo7ithga7] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any extra padding/margin from wrapper elements */
[b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group-icon.e-clear-icon {
    height: 22px !important;
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-jfo7ithga7] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   UNIFIED LOADING SPINNER - Tailwind3 Style
   Used across entire page (grid loading + modal loading)
   100% Syncfusion SfSpinner component
   ======================================== */
[b-jfo7ithga7] .e-spinner-pane.e-spin-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.97) !important;
    z-index: 50 !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
}

/* Spinner Label */
[b-jfo7ithga7] .e-spinner-pane .e-spin-label {
    font-size: 18px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    margin-top: 20px !important;
}

/* Tailwind3 Spinner Customization */
[b-jfo7ithga7] .e-spinner-pane .e-spinner-inner {
    border-color: rgba(0, 120, 212, 0.1) !important;
    border-top-color: var(--BEC-colorBrandBackground) !important;
}

/* Loading Overlay (Legacy - kept for backwards compatibility) */
.loading-overlay[b-jfo7ithga7] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
    color: var(--BEC-colorNeutralForeground2);
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   MODAL DIALOGS
   ======================================== */

/* Modal Overlay */
.modal-overlay[b-jfo7ithga7] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-jfo7ithga7 0.2s ease-out;
}

@keyframes fadeIn-b-jfo7ithga7 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Modal Container */
.modal-container[b-jfo7ithga7] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-jfo7ithga7 0.3s ease-out;
}

.modal-container.modal-sm[b-jfo7ithga7] {
    max-width: 500px;
}

@keyframes slideUp-b-jfo7ithga7 {
    from {
        opacity: 0;
        transform: translateY(var(--BEC-spacingHorizontalXL));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal Header */
.modal-header[b-jfo7ithga7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXL) 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: linear-gradient(to bottom, var(--BEC-colorNeutralBackground1) 0%, #f9fafb 100%);
    border-radius: var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge) 0 0;
}

.modal-title[b-jfo7ithga7] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
}

.modal-title i[b-jfo7ithga7] {
    color: var(--BEC-colorBrandBackground);
    font-size: var(--BEC-fontSizeBase500);
}

.modal-close[b-jfo7ithga7] {
    background: transparent;
    border: none;
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.modal-close:hover[b-jfo7ithga7] {
    background: #f0f0f0;
    color: var(--BEC-colorNeutralForeground1);
}

/* Modal Content */
.modal-content[b-jfo7ithga7] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Modal Footer */
.modal-footer[b-jfo7ithga7] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL) 24px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: #f9fafb;
    border-radius: 0 0 var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge);
}

/* Buttons */
.btn[b-jfo7ithga7] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-jfo7ithga7] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-jfo7ithga7] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-primary:hover:not(:disabled)[b-jfo7ithga7] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-secondary[b-jfo7ithga7] {
    background: var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-jfo7ithga7] {
    background: #d1d1d1;
}

.btn-danger[b-jfo7ithga7] {
    background: #dc2626;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-danger:hover:not(:disabled)[b-jfo7ithga7] {
    background: #b91c1c;
}

.btn-warning[b-jfo7ithga7] {
    background: #ff8c00;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-warning:hover:not(:disabled)[b-jfo7ithga7] {
    background: #e67e00;
}

.btn-success[b-jfo7ithga7] {
    background: #10b981;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-success:hover:not(:disabled)[b-jfo7ithga7] {
    background: #059669;
}

/* Warning Messages in Confirmation Dialogs */
.warning-message[b-jfo7ithga7] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
}

.warning-message strong[b-jfo7ithga7] {
    color: #d83b01;
}

.warning-note[b-jfo7ithga7] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, #fff4e6 0%, #ffe4cc 100%);
    border-left: 3px solid #d83b01;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.warning-note i[b-jfo7ithga7] {
    color: #d83b01;
    margin-top: var(--BEC-spacingHorizontalXXS);
    font-size: var(--BEC-fontSizeBase300);
    flex-shrink: 0;
}

.warning-note-info[b-jfo7ithga7] {
    background: linear-gradient(135deg, #e8f4fd 0%, #c7e0f4 100%);
    border-left-color: var(--BEC-colorBrandForeground);
}

.warning-note-info i[b-jfo7ithga7] {
    color: var(--BEC-colorBrandForeground);
}

.warning-note-success[b-jfo7ithga7] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left-color: #10b981;
}

.warning-note-success i[b-jfo7ithga7] {
    color: #10b981;
}

/* ========================================
   PAGE HEADER - DIALOG STYLES
   ======================================== */
.dialog-page-header[b-jfo7ithga7] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: var(--BEC-spacingHorizontalL) 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 48px;
}

.dialog-header-title[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.dialog-header-title i[b-jfo7ithga7] {
    color: var(--BEC-colorBrandForeground);
    font-size: 18px;
}

.dialog-header-close[b-jfo7ithga7] {
    background: transparent;
    border: none;
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.dialog-header-close:hover[b-jfo7ithga7] {
    background: #f0f0f0;
    color: var(--BEC-colorNeutralForeground1);
}

/* Dialog Content Padding (Override) */
.dialog-content[b-jfo7ithga7] {
    padding: 0;
}

/* Dialog Footer - Compact */
.dialog-footer[b-jfo7ithga7] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: #f9fafb;
    border-radius: 0 0 var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge);
}

/* ========================================
   RESPONSIVE DESIGN (Tablet & Mobile)
   ======================================== */
@media (max-width: 1024px) {
    .erp-page-header[b-jfo7ithga7] {
        padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    }

    [b-jfo7ithga7] .e-toolbar.e-control {
        top: 50px !important;
        padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalL) !important;
    }

    :global(.e-grid .e-gridheader)[b-jfo7ithga7] {
        top: 100px !important;
    }
}

@media (max-width: 768px) {

    /* Page Header - Compact */
    .erp-page-header[b-jfo7ithga7] {
        flex-direction: column;
        padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
        gap: var(--BEC-spacingHorizontalM);
    }

    /* Stats - Full Width */
    .stats-container[b-jfo7ithga7] {
        width: 100%;
        justify-content: space-around;
    }

    /* Toolbar - Mobile Optimized */
    [b-jfo7ithga7] .e-toolbar.e-control {
        top: 90px !important;
        padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalM) !important;
    }

    /* Grid Headers - Adjusted */
    :global(.e-grid .e-gridheader)[b-jfo7ithga7] {
        top: 140px !important;
    }

    /* Adaptive Grid */
    :global(.e-grid.e-responsive-mode)[b-jfo7ithga7] {
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .page-title[b-jfo7ithga7] {
        font-size: 16px;
    }

    .stat-value[b-jfo7ithga7] {
        font-size: 14px;
    }

    /* Icons Only - Save Space */
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }

    /* Column Chooser - Responsive on Mobile */
    [b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-jfo7ithga7] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-jfo7ithga7] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   ======================================== */
[b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Column Chooser Dialog Header */
[b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Content */
[b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Footer (OK button) */
[b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ========================================
   HELP WIZARD SIDEBAR STYLING
   ======================================== */
[b-jfo7ithga7] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-jfo7ithga7] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-jfo7ithga7] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-jfo7ithga7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-jfo7ithga7] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-jfo7ithga7] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-jfo7ithga7] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-jfo7ithga7] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-jfo7ithga7] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-jfo7ithga7] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-jfo7ithga7] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-jfo7ithga7] {
    margin-bottom: 24px;
    animation: fadeInUp-b-jfo7ithga7 0.6s ease;
}

.step-title[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-jfo7ithga7] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-jfo7ithga7] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-jfo7ithga7] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-jfo7ithga7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-jfo7ithga7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-jfo7ithga7] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-jfo7ithga7] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-jfo7ithga7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-jfo7ithga7] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-jfo7ithga7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-jfo7ithga7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-jfo7ithga7] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-jfo7ithga7] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-jfo7ithga7] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-jfo7ithga7] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-jfo7ithga7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-jfo7ithga7] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-jfo7ithga7] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-jfo7ithga7] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-jfo7ithga7] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-jfo7ithga7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-jfo7ithga7] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-jfo7ithga7] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-jfo7ithga7] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-jfo7ithga7] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-jfo7ithga7] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-jfo7ithga7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.wizard-actions[b-jfo7ithga7] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-jfo7ithga7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-jfo7ithga7] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-jfo7ithga7] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-jfo7ithga7] {
    background: #e1dfdd;
}

.btn-next[b-jfo7ithga7] {
    background: var(--BEC-colorBrandBackground);
    color: #ffffff;
}

.btn-next:hover:not(:disabled)[b-jfo7ithga7] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-jfo7ithga7] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-jfo7ithga7] {
    background: #0b5c0b;
}

.btn i[b-jfo7ithga7] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-jfo7ithga7 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   WIZARD FORM STYLES
   ======================================== */
.form-group[b-jfo7ithga7] {
    margin-bottom: 20px;
}

.form-label[b-jfo7ithga7] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-jfo7ithga7]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

.form-input[b-jfo7ithga7] {
    width: 100%;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border: 1px solid #d1d1d1;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-family: 'Segoe UI', sans-serif;
    transition: border-color 0.2s ease;
}

.form-input:focus[b-jfo7ithga7] {
    outline: none;
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: var(--BEC-shadow4);
}

.form-row[b-jfo7ithga7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* Field Error and Hint */
.field-error[b-jfo7ithga7] {
    display: block;
    color: #d13438;
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.4;
}

.field-hint[b-jfo7ithga7] {
    display: block;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.4;
    font-style: italic;
}

/* Auto-Generation Info Banner */
.auto-gen-info[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border: 1px solid #90caf9;
    border-radius: 8px;
    font-size: 14px;
    color: #1565c0;
    margin-bottom: 8px;
}

.auto-gen-info i[b-jfo7ithga7] {
    font-size: 18px;
    color: #7b1fa2;
    animation: sparkle-b-jfo7ithga7 2s ease-in-out infinite;
}

@keyframes sparkle-b-jfo7ithga7 {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.auto-gen-info strong[b-jfo7ithga7] {
    color: #1565c0;
    font-weight: 600;
}

/* Error Message */
.error-message[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    color: #dc2626;
    font-size: 14px;
    margin: 16px 0;
}

.error-message i[b-jfo7ithga7] {
    font-size: 16px;
}

/* ========================================
   FORM VALUE (Read-only display)
   ======================================== */
.form-value[b-jfo7ithga7] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   Matching System Modules Page Design
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-jfo7ithga7] .e-treegrid,
[b-jfo7ithga7] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-jfo7ithga7] .e-treegrid .e-gridheader,
[b-jfo7ithga7] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-jfo7ithga7] .e-treegrid .e-gridcontent,
[b-jfo7ithga7] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Header Cells */
[b-jfo7ithga7] .e-treegrid .e-headercell,
[b-jfo7ithga7] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Row Height - Compact (32px like System Modules) */
[b-jfo7ithga7] .e-treegrid .e-row,
[b-jfo7ithga7] .e-grid .e-row {
    height: 32px !important;
}

[b-jfo7ithga7] .e-treegrid .e-row td,
[b-jfo7ithga7] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Row Hover Effect */
[b-jfo7ithga7] .e-treegrid .e-row:hover,
[b-jfo7ithga7] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-jfo7ithga7] .e-treegrid .e-row.e-selectionbackground,
[b-jfo7ithga7] .e-treegrid .e-row[aria-selected="true"],
[b-jfo7ithga7] .e-grid .e-row.e-selectionbackground,
[b-jfo7ithga7] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-jfo7ithga7] .e-treegrid .e-row.e-selectionbackground:hover,
[b-jfo7ithga7] .e-treegrid .e-row[aria-selected="true"]:hover,
[b-jfo7ithga7] .e-grid .e-row.e-selectionbackground:hover,
[b-jfo7ithga7] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-jfo7ithga7] .e-treegrid .e-row.e-selectionbackground td:first-child,
[b-jfo7ithga7] .e-treegrid .e-row[aria-selected="true"] td:first-child,
[b-jfo7ithga7] .e-grid .e-row.e-selectionbackground td:first-child,
[b-jfo7ithga7] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

.badge-warning[b-jfo7ithga7] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-jfo7ithga7] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-jfo7ithga7] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-jfo7ithga7] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-jfo7ithga7] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-jfo7ithga7] {
    font-size: 12px;
}

.column-chooser-list[b-jfo7ithga7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    color: #dc2626;
    font-size: 14px;
    margin: 16px 0;
}

.error-message i[b-jfo7ithga7] {
    font-size: 16px;
}

/* ========================================
   FORM VALUE (Read-only display)
   ======================================== */
.form-value[b-jfo7ithga7] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   Matching System Modules Page Design
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-jfo7ithga7] .e-treegrid,
[b-jfo7ithga7] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-jfo7ithga7] .e-treegrid .e-gridheader,
[b-jfo7ithga7] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-jfo7ithga7] .e-treegrid .e-gridcontent,
[b-jfo7ithga7] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Header Cells */
[b-jfo7ithga7] .e-treegrid .e-headercell,
[b-jfo7ithga7] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Row Height - Compact (32px like System Modules) */
[b-jfo7ithga7] .e-treegrid .e-row,
[b-jfo7ithga7] .e-grid .e-row {
    height: 32px !important;
}

[b-jfo7ithga7] .e-treegrid .e-row td,
[b-jfo7ithga7] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Row Hover Effect */
[b-jfo7ithga7] .e-treegrid .e-row:hover,
[b-jfo7ithga7] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-jfo7ithga7] .e-treegrid .e-row.e-selectionbackground,
[b-jfo7ithga7] .e-treegrid .e-row[aria-selected="true"],
[b-jfo7ithga7] .e-grid .e-row.e-selectionbackground,
[b-jfo7ithga7] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-jfo7ithga7] .e-treegrid .e-row.e-selectionbackground:hover,
[b-jfo7ithga7] .e-treegrid .e-row[aria-selected="true"]:hover,
[b-jfo7ithga7] .e-grid .e-row.e-selectionbackground:hover,
[b-jfo7ithga7] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-jfo7ithga7] .e-treegrid .e-row.e-selectionbackground td:first-child,
[b-jfo7ithga7] .e-treegrid .e-row[aria-selected="true"] td:first-child,
[b-jfo7ithga7] .e-grid .e-row.e-selectionbackground td:first-child,
[b-jfo7ithga7] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

.badge-warning[b-jfo7ithga7] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-jfo7ithga7] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-jfo7ithga7] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-jfo7ithga7] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-jfo7ithga7] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-jfo7ithga7] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-jfo7ithga7] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-jfo7ithga7] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-jfo7ithga7] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-jfo7ithga7] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-jfo7ithga7] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-jfo7ithga7] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* Dialog Content Styling */
[b-jfo7ithga7] .notification-success .e-dlg-content,
[b-jfo7ithga7] .notification-error .e-dlg-content,
[b-jfo7ithga7] .notification-warning .e-dlg-content,
[b-jfo7ithga7] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: #323130;
}

/* Close Icon Color */
[b-jfo7ithga7] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-jfo7ithga7] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-jfo7ithga7] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-jfo7ithga7] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: white;
}

/* ========================================
   STATUS BADGE STYLES - Text Only (No Background)
   ======================================== */
.badge[b-jfo7ithga7] {
    display: inline-block;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-success[b-jfo7ithga7] {
    color: #10b981;
}

.badge-inactive[b-jfo7ithga7] {
    color: #dc2626;
}

/* ========================================
   RESPONSIVE DESIGN - COMPREHENSIVE MEDIA QUERIES
   ======================================== */

/* Tablet (768px - 1024px) - Layout Positioning Only */
@media (max-width: 1024px) {

    /* Sticky Toolbar Positioning */
    [b-jfo7ithga7] .e-toolbar.e-control {
        top: 50px !important;
        /* Below compact header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-treegrid .e-gridheader)[b-jfo7ithga7],
    :global(.e-grid .e-gridheader)[b-jfo7ithga7] {
        top: 100px !important;
        /* Below header + toolbar */
    }

    /* Search Bar - Tablet Width */
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
    }
}

/* Mobile (< 768px) - Layout Adjustments */
@media (max-width: 768px) {

    /* Page Header - Stack Vertically */
    .erp-page-header[b-jfo7ithga7] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    /* Stats - Full Width */
    .stats-container[b-jfo7ithga7] {
        width: 100%;
        justify-content: space-around;
    }

    /* Sticky Toolbar Positioning - Adjusted for taller header */
    [b-jfo7ithga7] .e-toolbar.e-control {
        top: 90px !important;
        /* Below taller mobile header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-treegrid .e-gridheader)[b-jfo7ithga7],
    :global(.e-grid .e-gridheader)[b-jfo7ithga7] {
        top: 140px !important;
        /* Below header + toolbar */
    }

    /* Sidebar Width - Full Width on Mobile */
    [b-jfo7ithga7] .assignment-wizard-sidebar {
        width: 90% !important;
    }

    .sidebar-header[b-jfo7ithga7],
    .sidebar-footer[b-jfo7ithga7] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-jfo7ithga7] {
        padding: 16px 20px;
    }

    .form-row[b-jfo7ithga7] {
        grid-template-columns: 1fr;
    }
}

/* Medium Mobile (481px - 767px) - Adjust Search Bar */
@media (min-width: 481px) and (max-width: 767px) {

    /* Search Bar - Medium Width for Medium Mobile */
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }
}

/* Small Mobile (< 480px) - Icon-Only Toolbar */
@media (max-width: 480px) {

    /* Hide button text, show icons only to save space */
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }

    /* Search Bar - Responsive Width for Mobile */
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-jfo7ithga7] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }

    /* Column Chooser - Responsive on Mobile */
    [b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg,
    [b-jfo7ithga7] .e-treegrid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-jfo7ithga7] .e-treegrid .e-excelfilter.e-popup.e-popup-open,
[b-jfo7ithga7] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-jfo7ithga7] .e-treegrid .e-excelfilter .e-checkboxlist,
[b-jfo7ithga7] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   ======================================== */
[b-jfo7ithga7] .e-treegrid .e-dialog.e-ccdlg,
[b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Column Chooser Dialog Header */
[b-jfo7ithga7] .e-treegrid .e-dialog.e-ccdlg .e-dlg-header,
[b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Content */
[b-jfo7ithga7] .e-treegrid .e-dialog.e-ccdlg .e-dlg-content,
[b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Footer (OK button) */
[b-jfo7ithga7] .e-treegrid .e-dialog.e-ccdlg .e-footer-content,
[b-jfo7ithga7] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES (GOLD STANDARD)
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-jfo7ithga7] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column List */
.column-list[b-jfo7ithga7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-jfo7ithga7] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-jfo7ithga7] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-jfo7ithga7] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
    text-align: left;
}

/* Select All/Deselect All Actions */
.column-actions[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.action-link[b-jfo7ithga7] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-link:hover[b-jfo7ithga7] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-jfo7ithga7]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-jfo7ithga7]::-webkit-scrollbar-track {
    background: transparent;
}

.column-list[b-jfo7ithga7]::-webkit-scrollbar-thumb {
    background-color: var(--BEC-colorNeutralStroke1);
    border-radius: 3px;
}

.column-list[b-jfo7ithga7]::-webkit-scrollbar-thumb:hover {
    background-color: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-dialog-header-flex[b-jfo7ithga7] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-notification-icon[b-jfo7ithga7] {
    font-size: 20px;
}

.adm-preline-text[b-jfo7ithga7] {
    white-space: pre-line;
}

.adm-help-icon-lg[b-jfo7ithga7] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-jfo7ithga7] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/GDPR/ConsentAuditAdministration.razor.rz.scp.css */
/* ========================================
   CONSENT AUDIT ADMINISTRATION
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-hcup63o0wt] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-hcup63o0wt] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - 100% IDENTICAL TO SYSTEM MODULES
   ======================================== */
.erp-page-header[b-hcup63o0wt] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-hcup63o0wt] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-hcup63o0wt] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-hcup63o0wt] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-hcup63o0wt] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-hcup63o0wt] {
    transform: scale(0.98);
}

.page-subtitle[b-hcup63o0wt] {
    display: none;
}

.header-right[b-hcup63o0wt] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-hcup63o0wt] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-hcup63o0wt] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-hcup63o0wt] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider[b-hcup63o0wt] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-hcup63o0wt] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-hcup63o0wt] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-hcup63o0wt] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-hcup63o0wt] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-hcup63o0wt] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-hcup63o0wt] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-hcup63o0wt] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-hcup63o0wt] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-hcup63o0wt] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-hcup63o0wt] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-hcup63o0wt] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-hcup63o0wt] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-hcup63o0wt] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-hcup63o0wt] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-hcup63o0wt] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-hcup63o0wt] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-hcup63o0wt] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-hcup63o0wt] .e-toolbar .e-textbox.e-input-group,
[b-hcup63o0wt] .e-toolbar .e-input-group.e-control-wrapper,
[b-hcup63o0wt] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-hcup63o0wt] .e-toolbar .e-textbox.e-input-group .e-input,
[b-hcup63o0wt] .e-toolbar .e-input-group .e-input,
[b-hcup63o0wt] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-hcup63o0wt] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-hcup63o0wt] .e-toolbar .e-input-group:focus-within,
[b-hcup63o0wt] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-hcup63o0wt] .e-toolbar .e-textbox .e-input-group-icon,
[b-hcup63o0wt] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-hcup63o0wt] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-hcup63o0wt] .e-toolbar .e-input-group .e-input::placeholder,
[b-hcup63o0wt] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   CONTENT PLACEHOLDER
   ======================================== */
.content-placeholder[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 400px;
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
    text-align: center;
    padding: 40px;
}

.placeholder-icon[b-hcup63o0wt] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.placeholder-title[b-hcup63o0wt] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.placeholder-message[b-hcup63o0wt] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-hcup63o0wt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-hcup63o0wt] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-hcup63o0wt 1s linear infinite;
}

@keyframes spin-b-hcup63o0wt {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-hcup63o0wt] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-hcup63o0wt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-hcup63o0wt] {
    font-size: 48px;
}

.error-container p[b-hcup63o0wt] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   100% IDENTICAL TO SYSTEM MODULES
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-hcup63o0wt] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-hcup63o0wt] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-hcup63o0wt] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-hcup63o0wt] .e-grid .e-row.e-selectionbackground,
[b-hcup63o0wt] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-hcup63o0wt] .e-grid .e-row.e-selectionbackground:hover,
[b-hcup63o0wt] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-hcup63o0wt] .e-grid .e-row.e-selectionbackground td:first-child,
[b-hcup63o0wt] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-hcup63o0wt] .e-grid .e-row {
    height: 32px !important;
}

[b-hcup63o0wt] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-hcup63o0wt] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
[b-hcup63o0wt] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-hcup63o0wt] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-hcup63o0wt] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-hcup63o0wt] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-hcup63o0wt] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
    line-height: 1.2;
}

.badge-success[b-hcup63o0wt] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-hcup63o0wt] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-hcup63o0wt] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-hcup63o0wt] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   VIEW WIZARD & COLUMN CHOOSER SIDEBAR
   ======================================== */
[b-hcup63o0wt] .assignment-wizard-sidebar {
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

[b-hcup63o0wt] .assignment-wizard-sidebar .e-sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Column Chooser Specific Styles */
.column-chooser-actions[b-hcup63o0wt] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-hcup63o0wt] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-hcup63o0wt] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-hcup63o0wt] {
    font-size: 12px;
}

.column-chooser-list[b-hcup63o0wt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-hcup63o0wt] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-hcup63o0wt]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-hcup63o0wt]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   WIZARD FORM STYLES
   ======================================== */
.form-group[b-hcup63o0wt] {
    margin-bottom: 20px;
}

.form-label[b-hcup63o0wt] {
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
    display: block;
}

.form-value[b-hcup63o0wt] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    min-height: 34px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
}

.form-row[b-hcup63o0wt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ========================================
   NOTIFICATION DIALOG
   ======================================== */
[b-hcup63o0wt] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-hcup63o0wt] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-hcup63o0wt] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-hcup63o0wt] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-hcup63o0wt] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-hcup63o0wt] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-hcup63o0wt] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-hcup63o0wt] .notification-info .e-dlg-header-content i {
    color: white;
}

/* ========================================
   HELP WIZARD SIDEBAR STYLING
   ======================================== */
[b-hcup63o0wt] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-hcup63o0wt] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-hcup63o0wt] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-hcup63o0wt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-hcup63o0wt] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-hcup63o0wt] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-hcup63o0wt] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-hcup63o0wt] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-hcup63o0wt] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-hcup63o0wt] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-hcup63o0wt] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-hcup63o0wt] {
    margin-bottom: 24px;
    animation: fadeInUp-b-hcup63o0wt 0.6s ease;
}

.step-icon i[b-hcup63o0wt] {
    font-size: 48px;
}

.step-title[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-hcup63o0wt] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-hcup63o0wt] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-hcup63o0wt] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-hcup63o0wt] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-hcup63o0wt] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-hcup63o0wt] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-hcup63o0wt] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-hcup63o0wt] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-hcup63o0wt] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-hcup63o0wt] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-hcup63o0wt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-hcup63o0wt] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-hcup63o0wt] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-hcup63o0wt] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-hcup63o0wt] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-hcup63o0wt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-hcup63o0wt] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-hcup63o0wt] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-hcup63o0wt] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-hcup63o0wt] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-hcup63o0wt] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-hcup63o0wt] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-hcup63o0wt] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-hcup63o0wt] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-hcup63o0wt] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-hcup63o0wt] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-hcup63o0wt] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.wizard-actions[b-hcup63o0wt] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-hcup63o0wt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-hcup63o0wt] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-hcup63o0wt] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-hcup63o0wt] {
    background: #e1dfdd;
}

.btn-next[b-hcup63o0wt] {
    background: var(--BEC-colorBrandForeground1);
    color: white;
}

.btn-next:hover:not(:disabled)[b-hcup63o0wt] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-hcup63o0wt] {
    background: #10b981;
    color: white;
}

.btn-success:hover:not(:disabled)[b-hcup63o0wt] {
    background: #059669;
}

/* Animations */
@keyframes fadeInUp-b-hcup63o0wt {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-hcup63o0wt] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-hcup63o0wt] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-hcup63o0wt] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-hcup63o0wt] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-hcup63o0wt] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-hcup63o0wt] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-hcup63o0wt] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-hcup63o0wt] {
    animation: fadeInUp-b-hcup63o0wt 0.3s ease-out;
}

.step-title[b-hcup63o0wt] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-hcup63o0wt] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-hcup63o0wt] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-hcup63o0wt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-hcup63o0wt]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-hcup63o0wt]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-hcup63o0wt]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-hcup63o0wt]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-hcup63o0wt] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-hcup63o0wt] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-hcup63o0wt] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-hcup63o0wt] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-hcup63o0wt] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-hcup63o0wt] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-hcup63o0wt] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-hcup63o0wt] {
    background: #f3f2f1;
}

/* ========================================
   GDPR INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.gdpr-brand-icon[b-hcup63o0wt] {
    color: var(--BEC-colorBrandForeground1);
}

.gdpr-separator-text[b-hcup63o0wt] {
    color: #e0e0e0;
}

.gdpr-dialog-header-sm[b-hcup63o0wt] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gdpr-icon-md[b-hcup63o0wt] {
    font-size: 20px;
}

.gdpr-pre-line[b-hcup63o0wt] {
    white-space: pre-line;
}
/* /Components/Pages/MainLayout/Administration/Administration/GDPR/ConsentVersionAdministration.razor.rz.scp.css */
/* ========================================
   CONSENT VERSION ADMINISTRATION PAGE
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-qdnz19q1qa] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-qdnz19q1qa] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-qdnz19q1qa] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-qdnz19q1qa] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-qdnz19q1qa] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-qdnz19q1qa] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-qdnz19q1qa] {
    transform: scale(0.98);
}

.page-subtitle[b-qdnz19q1qa] {
    display: none;
}

.header-right[b-qdnz19q1qa] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-qdnz19q1qa] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-qdnz19q1qa] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-qdnz19q1qa] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: none;
    letter-spacing: 0;
}

.stat-divider[b-qdnz19q1qa] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke1);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-qdnz19q1qa] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 100px);
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-qdnz19q1qa] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-qdnz19q1qa] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-qdnz19q1qa] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-qdnz19q1qa] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-qdnz19q1qa] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-qdnz19q1qa] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-qdnz19q1qa] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-qdnz19q1qa] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-qdnz19q1qa] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-qdnz19q1qa] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-qdnz19q1qa] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-qdnz19q1qa] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-qdnz19q1qa] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-qdnz19q1qa] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-qdnz19q1qa] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-qdnz19q1qa] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-qdnz19q1qa] .e-toolbar .e-textbox.e-input-group,
[b-qdnz19q1qa] .e-toolbar .e-input-group.e-control-wrapper,
[b-qdnz19q1qa] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-qdnz19q1qa] .e-toolbar .e-textbox.e-input-group .e-input,
[b-qdnz19q1qa] .e-toolbar .e-input-group .e-input,
[b-qdnz19q1qa] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-qdnz19q1qa] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-qdnz19q1qa] .e-toolbar .e-input-group:focus-within,
[b-qdnz19q1qa] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-qdnz19q1qa] .e-toolbar .e-textbox .e-input-group-icon,
[b-qdnz19q1qa] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-qdnz19q1qa] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-qdnz19q1qa] .e-toolbar .e-input-group .e-input::placeholder,
[b-qdnz19q1qa] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   CONTENT PLACEHOLDER
   ======================================== */
.content-placeholder[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 400px;
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
    text-align: center;
    padding: 40px;
}

.placeholder-icon[b-qdnz19q1qa] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.placeholder-title[b-qdnz19q1qa] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.placeholder-message[b-qdnz19q1qa] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-qdnz19q1qa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-qdnz19q1qa] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-qdnz19q1qa 1s linear infinite;
}

@keyframes spin-b-qdnz19q1qa {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-qdnz19q1qa] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-qdnz19q1qa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-qdnz19q1qa] {
    font-size: 48px;
}

.error-container p[b-qdnz19q1qa] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-qdnz19q1qa] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.badge-success[b-qdnz19q1qa] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-qdnz19q1qa] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-qdnz19q1qa] {
    background: var(--BEC-colorPaletteYellowBackground2);
    color: var(--BEC-colorPaletteYellowForeground2);
}

.badge-primary[b-qdnz19q1qa] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   100% Identical to System Modules
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-qdnz19q1qa] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-qdnz19q1qa] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-qdnz19q1qa] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-qdnz19q1qa] .e-grid .e-row.e-selectionbackground,
[b-qdnz19q1qa] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-qdnz19q1qa] .e-grid .e-row.e-selectionbackground:hover,
[b-qdnz19q1qa] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-qdnz19q1qa] .e-grid .e-row.e-selectionbackground td:first-child,
[b-qdnz19q1qa] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-qdnz19q1qa] .e-grid .e-row {
    height: 32px !important;
}

[b-qdnz19q1qa] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-qdnz19q1qa] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid Header Styling */
[b-qdnz19q1qa] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
}

[b-qdnz19q1qa] .e-grid .e-headercell {
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Row Hover Effect */
[b-qdnz19q1qa] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-qdnz19q1qa] .e-grid .e-selectionbackground {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

/* ========================================
   WIZARD FORM STYLES
   ======================================== */
.form-group[b-qdnz19q1qa] {
    margin-bottom: 20px;
}

.form-label[b-qdnz19q1qa] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-value[b-qdnz19q1qa] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-qdnz19q1qa] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-qdnz19q1qa] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-qdnz19q1qa] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-qdnz19q1qa] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-qdnz19q1qa] {
    font-size: 12px;
}

.column-chooser-list[b-qdnz19q1qa] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-qdnz19q1qa] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-qdnz19q1qa]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-qdnz19q1qa]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   ======================================== */
[b-qdnz19q1qa] .notification-success .e-dlg-header-content {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: white;
}

[b-qdnz19q1qa] .notification-error .e-dlg-header-content {
    background: var(--BEC-colorPaletteRedBackground2);
    color: white;
}

[b-qdnz19q1qa] .notification-warning .e-dlg-header-content {
    background: var(--BEC-colorPaletteYellowBackground2);
    color: white;
}

[b-qdnz19q1qa] .notification-info .e-dlg-header-content {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

[b-qdnz19q1qa] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-qdnz19q1qa] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-qdnz19q1qa] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-qdnz19q1qa] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: white;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Sidebar Base Styles */
.sidebar-header[b-qdnz19q1qa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-qdnz19q1qa] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-qdnz19q1qa] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-qdnz19q1qa] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-qdnz19q1qa] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-qdnz19q1qa] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-qdnz19q1qa] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.sidebar-footer[b-qdnz19q1qa] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Help Wizard Sidebar */
[b-qdnz19q1qa] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-qdnz19q1qa] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-qdnz19q1qa] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* Assignment Wizard Sidebar (View, Column Chooser) */
[b-qdnz19q1qa] .assignment-wizard-sidebar {
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

[b-qdnz19q1qa] .assignment-wizard-sidebar .e-sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Wizard Step Content - Help Wizard (Centered) */
.wizard-step[b-qdnz19q1qa] {
    text-align: center;
    padding: 20px;
}

/* Wizard Step Content - Form Wizards (Left-aligned) */
.sidebar-step-content .wizard-step[b-qdnz19q1qa] {
    max-width: 100%;
    text-align: left;
    padding: 0;
}

.step-icon[b-qdnz19q1qa] {
    margin-bottom: 24px;
    animation: fadeInUp-b-qdnz19q1qa 0.6s ease;
}

/* Step Title - Help Wizard (Large, Centered) */
.wizard-step .step-title[b-qdnz19q1qa] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
    text-align: center;
}

/* Step Title - Form Wizards (Smaller, Left-aligned) */
.sidebar-step-content .step-title[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.sidebar-step-content .step-title i[b-qdnz19q1qa] {
    color: #0078d4;
    font-size: 20px;
}

/* Step Description - Help Wizard */
.wizard-step .step-description[b-qdnz19q1qa] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Step Description - Form Wizards */
.sidebar-step-content .step-description[b-qdnz19q1qa] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-qdnz19q1qa] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-qdnz19q1qa] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-qdnz19q1qa] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-qdnz19q1qa] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-qdnz19q1qa] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-qdnz19q1qa] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-qdnz19q1qa] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-qdnz19q1qa] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-qdnz19q1qa] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-qdnz19q1qa] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-qdnz19q1qa] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-qdnz19q1qa] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-qdnz19q1qa] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-qdnz19q1qa] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-qdnz19q1qa] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-qdnz19q1qa] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-qdnz19q1qa] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-qdnz19q1qa] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-qdnz19q1qa] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-qdnz19q1qa] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-qdnz19q1qa] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-qdnz19q1qa] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-qdnz19q1qa] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-qdnz19q1qa] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-qdnz19q1qa] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-qdnz19q1qa] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-qdnz19q1qa] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-qdnz19q1qa] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-qdnz19q1qa] {
    background: #e1dfdd;
}

.btn-success[b-qdnz19q1qa] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-qdnz19q1qa] {
    background: #0b5c0b;
}

.btn-next[b-qdnz19q1qa] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-qdnz19q1qa] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-cancel[b-qdnz19q1qa] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-qdnz19q1qa] {
    background: #e1dfdd;
}

.btn i[b-qdnz19q1qa] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-qdnz19q1qa {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-qdnz19q1qa] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-qdnz19q1qa] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-qdnz19q1qa] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-qdnz19q1qa] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-qdnz19q1qa] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-qdnz19q1qa] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-qdnz19q1qa] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-qdnz19q1qa] {
    animation: fadeInUp-b-qdnz19q1qa 0.3s ease-out;
}

.step-title[b-qdnz19q1qa] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-qdnz19q1qa] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-qdnz19q1qa] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-qdnz19q1qa] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-qdnz19q1qa]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-qdnz19q1qa]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-qdnz19q1qa]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-qdnz19q1qa]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-qdnz19q1qa] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-qdnz19q1qa] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-qdnz19q1qa] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-qdnz19q1qa] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-qdnz19q1qa] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-qdnz19q1qa] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-qdnz19q1qa] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-qdnz19q1qa] {
    background: #f3f2f1;
}

/* ========================================
   GDPR INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.gdpr-step-icon-brand[b-qdnz19q1qa] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.gdpr-separator-text[b-qdnz19q1qa] {
    color: #e0e0e0;
}

.gdpr-scrollable-text[b-qdnz19q1qa] {
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.gdpr-dialog-header-sm[b-qdnz19q1qa] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gdpr-icon-md[b-qdnz19q1qa] {
    font-size: 20px;
}

.gdpr-content-pad[b-qdnz19q1qa] {
    padding: 10px 0;
}

.gdpr-pre-line-text[b-qdnz19q1qa] {
    margin: 0;
    white-space: pre-line;
}
/* /Components/Pages/MainLayout/Administration/Administration/GDPR/DataRetentionPolicyAdministration.razor.rz.scp.css */
/* ========================================
   DATA RETENTION POLICY ADMINISTRATION
   100% Identical to System Modules
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-4x9m1zm0ek] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-4x9m1zm0ek] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-4x9m1zm0ek] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-4x9m1zm0ek] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-4x9m1zm0ek] {
    display: none;
}

/* Help Icon Button */
.help-icon-btn[b-4x9m1zm0ek] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-4x9m1zm0ek] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-4x9m1zm0ek] {
    transform: scale(0.98);
}

.header-right[b-4x9m1zm0ek] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-4x9m1zm0ek] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-4x9m1zm0ek] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-4x9m1zm0ek] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-4x9m1zm0ek] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-4x9m1zm0ek] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-4x9m1zm0ek] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-4x9m1zm0ek] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-4x9m1zm0ek] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-4x9m1zm0ek] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-4x9m1zm0ek] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-4x9m1zm0ek] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-4x9m1zm0ek] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-4x9m1zm0ek] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-4x9m1zm0ek] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-4x9m1zm0ek] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-4x9m1zm0ek] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-4x9m1zm0ek] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-4x9m1zm0ek] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-4x9m1zm0ek] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-4x9m1zm0ek] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-4x9m1zm0ek] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-4x9m1zm0ek] .e-toolbar .e-textbox.e-input-group,
[b-4x9m1zm0ek] .e-toolbar .e-input-group.e-control-wrapper,
[b-4x9m1zm0ek] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-4x9m1zm0ek] .e-toolbar .e-textbox.e-input-group .e-input,
[b-4x9m1zm0ek] .e-toolbar .e-input-group .e-input,
[b-4x9m1zm0ek] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-4x9m1zm0ek] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-4x9m1zm0ek] .e-toolbar .e-input-group:focus-within,
[b-4x9m1zm0ek] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-4x9m1zm0ek] .e-toolbar .e-textbox .e-input-group-icon,
[b-4x9m1zm0ek] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-4x9m1zm0ek] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-4x9m1zm0ek] .e-toolbar .e-input-group .e-input::placeholder,
[b-4x9m1zm0ek] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   CONTENT PLACEHOLDER
   ======================================== */
.content-placeholder[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 400px;
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
    text-align: center;
    padding: 40px;
}

.placeholder-icon[b-4x9m1zm0ek] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.placeholder-title[b-4x9m1zm0ek] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.placeholder-message[b-4x9m1zm0ek] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-4x9m1zm0ek] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-4x9m1zm0ek] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-4x9m1zm0ek 1s linear infinite;
}

@keyframes spin-b-4x9m1zm0ek {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-4x9m1zm0ek] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-4x9m1zm0ek] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-4x9m1zm0ek] {
    font-size: 48px;
}

.error-container p[b-4x9m1zm0ek] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-4x9m1zm0ek] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-4x9m1zm0ek] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-4x9m1zm0ek] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-4x9m1zm0ek] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-4x9m1zm0ek] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   100% Identical to System Modules
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-4x9m1zm0ek] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-4x9m1zm0ek] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-4x9m1zm0ek] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-4x9m1zm0ek] .e-grid .e-row.e-selectionbackground,
[b-4x9m1zm0ek] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-4x9m1zm0ek] .e-grid .e-row.e-selectionbackground:hover,
[b-4x9m1zm0ek] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-4x9m1zm0ek] .e-grid .e-row.e-selectionbackground td:first-child,
[b-4x9m1zm0ek] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-4x9m1zm0ek] .e-grid .e-row {
    height: 32px !important;
}

[b-4x9m1zm0ek] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-4x9m1zm0ek] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-4x9m1zm0ek] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-4x9m1zm0ek] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-4x9m1zm0ek] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-4x9m1zm0ek] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-4x9m1zm0ek] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-4x9m1zm0ek] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-4x9m1zm0ek] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-4x9m1zm0ek] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--BEC-colorNeutralForeground3);
}

.sidebar-close-btn:hover[b-4x9m1zm0ek] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-4x9m1zm0ek] {
    font-size: 18px;
}

.sidebar-content[b-4x9m1zm0ek] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-4x9m1zm0ek] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-4x9m1zm0ek] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-4x9m1zm0ek] {
    margin-bottom: 24px;
    animation: fadeInUp-b-4x9m1zm0ek 0.6s ease;
}

.wizard-step .step-title[b-4x9m1zm0ek] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.wizard-step .step-description[b-4x9m1zm0ek] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-4x9m1zm0ek] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-4x9m1zm0ek] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-4x9m1zm0ek] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-4x9m1zm0ek] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-4x9m1zm0ek] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-4x9m1zm0ek] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-4x9m1zm0ek] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-4x9m1zm0ek] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-4x9m1zm0ek] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-4x9m1zm0ek] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-4x9m1zm0ek] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-4x9m1zm0ek] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-4x9m1zm0ek] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-4x9m1zm0ek] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-4x9m1zm0ek] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-4x9m1zm0ek] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-4x9m1zm0ek] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-4x9m1zm0ek] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-4x9m1zm0ek] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-4x9m1zm0ek] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-4x9m1zm0ek] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-4x9m1zm0ek] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-4x9m1zm0ek] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-4x9m1zm0ek] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-4x9m1zm0ek] {
    display: flex;
    gap: 12px;
}

.btn-next[b-4x9m1zm0ek] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-4x9m1zm0ek] {
    background: var(--BEC-colorBrandBackgroundHover);
}

/* Sidebar Footer */
.sidebar-footer[b-4x9m1zm0ek] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons */
.btn[b-4x9m1zm0ek] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-4x9m1zm0ek] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-4x9m1zm0ek] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-4x9m1zm0ek] {
    background: #e1dfdd;
}

.btn-success[b-4x9m1zm0ek] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-4x9m1zm0ek] {
    background: #0b5c0b;
}

.btn i[b-4x9m1zm0ek] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-4x9m1zm0ek {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   WIZARD FORM STYLES
   ======================================== */
.form-group[b-4x9m1zm0ek] {
    margin-bottom: 20px;
}

.form-label[b-4x9m1zm0ek] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-value[b-4x9m1zm0ek] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-4x9m1zm0ek] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-4x9m1zm0ek] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-4x9m1zm0ek] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-4x9m1zm0ek] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-4x9m1zm0ek] {
    font-size: 12px;
}

.column-chooser-list[b-4x9m1zm0ek] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-4x9m1zm0ek] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorBrandBackground);
}

.column-chooser-item[b-4x9m1zm0ek]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-4x9m1zm0ek]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-4x9m1zm0ek] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-4x9m1zm0ek] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-4x9m1zm0ek] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-4x9m1zm0ek] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-4x9m1zm0ek] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-4x9m1zm0ek] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-4x9m1zm0ek] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-4x9m1zm0ek] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-4x9m1zm0ek] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-4x9m1zm0ek] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-4x9m1zm0ek] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-4x9m1zm0ek] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* Dialog Content Styling */
[b-4x9m1zm0ek] .notification-success .e-dlg-content,
[b-4x9m1zm0ek] .notification-error .e-dlg-content,
[b-4x9m1zm0ek] .notification-warning .e-dlg-content,
[b-4x9m1zm0ek] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: #323130;
}

/* Close Icon Color */
[b-4x9m1zm0ek] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-4x9m1zm0ek] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-4x9m1zm0ek] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-4x9m1zm0ek] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: white;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-4x9m1zm0ek] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-4x9m1zm0ek] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-4x9m1zm0ek] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-4x9m1zm0ek] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-4x9m1zm0ek] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-4x9m1zm0ek] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-4x9m1zm0ek] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-4x9m1zm0ek] {
    animation: fadeInUp-b-4x9m1zm0ek 0.3s ease-out;
}

.step-title[b-4x9m1zm0ek] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-4x9m1zm0ek] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-4x9m1zm0ek] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-4x9m1zm0ek] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-4x9m1zm0ek]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-4x9m1zm0ek]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-4x9m1zm0ek]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-4x9m1zm0ek]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-4x9m1zm0ek] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-4x9m1zm0ek] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-4x9m1zm0ek] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-4x9m1zm0ek] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-4x9m1zm0ek] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-4x9m1zm0ek] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-4x9m1zm0ek] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-4x9m1zm0ek] {
    background: #f3f2f1;
}

/* ========================================
   GDPR INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.gdpr-step-icon-brand[b-4x9m1zm0ek] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.gdpr-separator-text[b-4x9m1zm0ek] {
    color: #e0e0e0;
}

.gdpr-dialog-header[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gdpr-dialog-header-sm[b-4x9m1zm0ek] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gdpr-danger-icon[b-4x9m1zm0ek] {
    color: #d13438;
}

.gdpr-danger-text[b-4x9m1zm0ek] {
    color: #d13438;
    font-weight: 500;
}

.gdpr-detail-box[b-4x9m1zm0ek] {
    background: #f9f9f9;
    padding: 12px;
    border-radius: 4px;
    margin-top: 12px;
}

.gdpr-pre-line-text[b-4x9m1zm0ek] {
    margin: 0;
    white-space: pre-line;
}
/* /Components/Pages/MainLayout/Administration/Administration/GDPR/DataSubjectRequestAdministration.razor.rz.scp.css */
/* DATA SUBJECT REQUEST ADMINISTRATION - 100% Identical to System Modules */
.erp-page-container[b-jhcty2alm6] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   Same as System Modules
   ======================================== */
.erp-page-header[b-jhcty2alm6] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-jhcty2alm6] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-jhcty2alm6] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-jhcty2alm6] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-jhcty2alm6] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-jhcty2alm6] {
    transform: scale(0.98);
}

.page-subtitle[b-jhcty2alm6] {
    display: none;
}

.header-right[b-jhcty2alm6] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   Same as User Company Assignment
   ======================================== */
.stats-container[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-jhcty2alm6] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-jhcty2alm6] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-jhcty2alm6] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-jhcty2alm6] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

.erp-page-content[b-jhcty2alm6] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-jhcty2alm6] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-jhcty2alm6] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-jhcty2alm6] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-jhcty2alm6] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-jhcty2alm6] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-jhcty2alm6] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-jhcty2alm6] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-jhcty2alm6] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-jhcty2alm6] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-jhcty2alm6] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-jhcty2alm6] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-jhcty2alm6] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-jhcty2alm6] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-jhcty2alm6] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-jhcty2alm6] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-jhcty2alm6] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-jhcty2alm6] .e-toolbar .e-textbox.e-input-group,
[b-jhcty2alm6] .e-toolbar .e-input-group.e-control-wrapper,
[b-jhcty2alm6] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-jhcty2alm6] .e-toolbar .e-textbox.e-input-group .e-input,
[b-jhcty2alm6] .e-toolbar .e-input-group .e-input,
[b-jhcty2alm6] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-jhcty2alm6] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-jhcty2alm6] .e-toolbar .e-input-group:focus-within,
[b-jhcty2alm6] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-jhcty2alm6] .e-toolbar .e-textbox .e-input-group-icon,
[b-jhcty2alm6] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-jhcty2alm6] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-jhcty2alm6] .e-toolbar .e-input-group .e-input::placeholder,
[b-jhcty2alm6] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

.content-placeholder[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 400px;
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
    text-align: center;
    padding: 40px
}

.placeholder-icon[b-jhcty2alm6] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px
}

.placeholder-title[b-jhcty2alm6] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0
}

.placeholder-message[b-jhcty2alm6] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-jhcty2alm6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-jhcty2alm6] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-jhcty2alm6 1s linear infinite;
}

@keyframes spin-b-jhcty2alm6 {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-jhcty2alm6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    padding: 40px;
    text-align: center;
}

.error-container i[b-jhcty2alm6] {
    font-size: 48px;
    color: #d13438;
}

.error-container p[b-jhcty2alm6] {
    color: var(--BEC-colorNeutralForeground1);
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-jhcty2alm6] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
    line-height: 1.2;
}

.badge-success[b-jhcty2alm6] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-jhcty2alm6] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-jhcty2alm6] {
    background: var(--BEC-colorPaletteYellowBackground2);
    color: var(--BEC-colorPaletteYellowForeground2);
}

.badge-primary[b-jhcty2alm6] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   100% Identical to System Modules
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-jhcty2alm6] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-jhcty2alm6] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-jhcty2alm6] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-jhcty2alm6] .e-grid .e-row.e-selectionbackground,
[b-jhcty2alm6] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-jhcty2alm6] .e-grid .e-row.e-selectionbackground:hover,
[b-jhcty2alm6] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-jhcty2alm6] .e-grid .e-row.e-selectionbackground td:first-child,
[b-jhcty2alm6] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-jhcty2alm6] .e-grid .e-row {
    height: 32px !important;
}

[b-jhcty2alm6] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-jhcty2alm6] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-jhcty2alm6] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-jhcty2alm6] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* ========================================
   WIZARD FORM STYLES
   ======================================== */
.form-group[b-jhcty2alm6] {
    margin-bottom: 20px;
}

.form-label[b-jhcty2alm6] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 6px;
}

.form-label.required[b-jhcty2alm6]::after {
    content: " *";
    color: #d13438;
}

.form-value[b-jhcty2alm6] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    min-height: 36px;
    display: flex;
    align-items: center;
}

.form-row[b-jhcty2alm6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-jhcty2alm6] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-jhcty2alm6] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-jhcty2alm6] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-jhcty2alm6] {
    font-size: 12px;
}

.column-chooser-list[b-jhcty2alm6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-jhcty2alm6] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorBrandBackground);
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-jhcty2alm6] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-jhcty2alm6] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-jhcty2alm6] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-jhcty2alm6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-jhcty2alm6] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-jhcty2alm6] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--BEC-colorNeutralForeground3);
}

.sidebar-close-btn:hover[b-jhcty2alm6] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-jhcty2alm6] {
    font-size: 18px;
}

.sidebar-content[b-jhcty2alm6] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-jhcty2alm6] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-jhcty2alm6] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-jhcty2alm6] {
    margin-bottom: 24px;
    animation: fadeInUp-b-jhcty2alm6 0.6s ease;
}

.wizard-step .step-title[b-jhcty2alm6] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.wizard-step .step-description[b-jhcty2alm6] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-jhcty2alm6] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-jhcty2alm6] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-jhcty2alm6] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-jhcty2alm6] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-jhcty2alm6] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-jhcty2alm6] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-jhcty2alm6] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-jhcty2alm6] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-jhcty2alm6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-jhcty2alm6] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-jhcty2alm6] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-jhcty2alm6] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-jhcty2alm6] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-jhcty2alm6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-jhcty2alm6] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-jhcty2alm6] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-jhcty2alm6] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-jhcty2alm6] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-jhcty2alm6] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-jhcty2alm6] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-jhcty2alm6] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-jhcty2alm6] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-jhcty2alm6] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-jhcty2alm6] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-jhcty2alm6] {
    display: flex;
    gap: 12px;
}

.btn-next[b-jhcty2alm6] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-jhcty2alm6] {
    background: var(--BEC-colorBrandBackgroundHover);
}

/* Sidebar Footer */
.sidebar-footer[b-jhcty2alm6] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons */
.btn[b-jhcty2alm6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-jhcty2alm6] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-jhcty2alm6] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-jhcty2alm6] {
    background: #e1dfdd;
}

.btn-success[b-jhcty2alm6] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-jhcty2alm6] {
    background: #0b5c0b;
}

.btn i[b-jhcty2alm6] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-jhcty2alm6 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-jhcty2alm6] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-jhcty2alm6] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-jhcty2alm6] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-jhcty2alm6] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-jhcty2alm6] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-jhcty2alm6] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-jhcty2alm6] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-jhcty2alm6] {
    animation: fadeInUp-b-jhcty2alm6 0.3s ease-out;
}

.step-title[b-jhcty2alm6] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-jhcty2alm6] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-jhcty2alm6] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-jhcty2alm6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-jhcty2alm6]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-jhcty2alm6]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-jhcty2alm6]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-jhcty2alm6]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-jhcty2alm6] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-jhcty2alm6] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-jhcty2alm6] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-jhcty2alm6] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-jhcty2alm6] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-jhcty2alm6] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-jhcty2alm6] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-jhcty2alm6] {
    background: #f3f2f1;
}

/* ========================================
   GDPR INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.gdpr-step-icon-brand[b-jhcty2alm6] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.gdpr-separator-text[b-jhcty2alm6] {
    color: #e0e0e0;
}

.gdpr-dialog-header[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gdpr-dialog-header-sm[b-jhcty2alm6] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gdpr-brand-icon[b-jhcty2alm6] {
    color: var(--BEC-colorBrandForeground1);
}

.gdpr-form-group-mb[b-jhcty2alm6] {
    margin-bottom: 20px;
}

.gdpr-readonly-value[b-jhcty2alm6] {
    padding: 8px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.gdpr-pre-line-text[b-jhcty2alm6] {
    margin: 0;
    white-space: pre-line;
}
/* /Components/Pages/MainLayout/Administration/Administration/GDPR/ProcessingActivityRecordAdministration.razor.rz.scp.css */
/* PROCESSING ACTIVITY RECORD ADMINISTRATION - Header matches System Modules */

.erp-page-container[b-x0fmlw6y08] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   Matches System Modules exactly
   ======================================== */
.erp-page-header[b-x0fmlw6y08] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-x0fmlw6y08] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-x0fmlw6y08] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-x0fmlw6y08] {
    display: none;
}

.header-right[b-x0fmlw6y08] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-x0fmlw6y08] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-x0fmlw6y08] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-x0fmlw6y08] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-x0fmlw6y08] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-x0fmlw6y08] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-x0fmlw6y08] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-x0fmlw6y08] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-x0fmlw6y08] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-x0fmlw6y08] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-x0fmlw6y08] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-x0fmlw6y08] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-x0fmlw6y08] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-x0fmlw6y08] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-x0fmlw6y08] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-x0fmlw6y08] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-x0fmlw6y08] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-x0fmlw6y08] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-x0fmlw6y08] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-x0fmlw6y08] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-x0fmlw6y08] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-x0fmlw6y08] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-x0fmlw6y08] .e-toolbar .e-textbox.e-input-group,
[b-x0fmlw6y08] .e-toolbar .e-input-group.e-control-wrapper,
[b-x0fmlw6y08] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-x0fmlw6y08] .e-toolbar .e-textbox.e-input-group .e-input,
[b-x0fmlw6y08] .e-toolbar .e-input-group .e-input,
[b-x0fmlw6y08] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-x0fmlw6y08] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-x0fmlw6y08] .e-toolbar .e-input-group:focus-within,
[b-x0fmlw6y08] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-x0fmlw6y08] .e-toolbar .e-textbox .e-input-group-icon,
[b-x0fmlw6y08] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-x0fmlw6y08] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-x0fmlw6y08] .e-toolbar .e-input-group .e-input::placeholder,
[b-x0fmlw6y08] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   CONTENT PLACEHOLDER
   ======================================== */
.content-placeholder[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 400px;
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
    text-align: center;
    padding: 40px;
}

.placeholder-icon[b-x0fmlw6y08] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.placeholder-title[b-x0fmlw6y08] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.placeholder-message[b-x0fmlw6y08] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   HELP ICON BUTTON
   ======================================== */
.help-icon-btn[b-x0fmlw6y08] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-x0fmlw6y08] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-x0fmlw6y08] {
    transform: scale(0.98);
}

/* ========================================
   HELP WIZARD SIDEBAR STYLING
   ======================================== */
[b-x0fmlw6y08] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-x0fmlw6y08] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-x0fmlw6y08] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-x0fmlw6y08] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-x0fmlw6y08] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-x0fmlw6y08] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-x0fmlw6y08] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-x0fmlw6y08] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-x0fmlw6y08] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-x0fmlw6y08] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-x0fmlw6y08] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-x0fmlw6y08] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-x0fmlw6y08] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Step Icon */
.step-icon[b-x0fmlw6y08] {
    margin-bottom: 24px;
    animation: fadeInUp-b-x0fmlw6y08 0.6s ease;
}

.step-icon i[b-x0fmlw6y08] {
    font-size: 48px;
}

/* Info Box */
.info-box[b-x0fmlw6y08] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-x0fmlw6y08] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-x0fmlw6y08] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-x0fmlw6y08] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-x0fmlw6y08] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-x0fmlw6y08] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-x0fmlw6y08] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-x0fmlw6y08] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-x0fmlw6y08] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-x0fmlw6y08] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-x0fmlw6y08] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-x0fmlw6y08] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-x0fmlw6y08] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-x0fmlw6y08] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-x0fmlw6y08] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-x0fmlw6y08] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-x0fmlw6y08] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-x0fmlw6y08] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-x0fmlw6y08] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-x0fmlw6y08] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-x0fmlw6y08] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-x0fmlw6y08] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-x0fmlw6y08] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-x0fmlw6y08] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-x0fmlw6y08] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-x0fmlw6y08] {
    display: flex;
    gap: 12px;
}

/* Buttons */
.btn[b-x0fmlw6y08] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-x0fmlw6y08] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-x0fmlw6y08] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-x0fmlw6y08] {
    background: #e1dfdd;
}

.btn-success[b-x0fmlw6y08] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-x0fmlw6y08] {
    background: #0b5c0b;
}

.btn i[b-x0fmlw6y08] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-x0fmlw6y08 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-x0fmlw6y08] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-x0fmlw6y08] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-x0fmlw6y08 1s linear infinite;
}

@keyframes spin-b-x0fmlw6y08 {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-x0fmlw6y08] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-x0fmlw6y08] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-x0fmlw6y08] {
    font-size: 48px;
}

.error-container p[b-x0fmlw6y08] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-x0fmlw6y08] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-x0fmlw6y08] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-x0fmlw6y08] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-x0fmlw6y08] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-x0fmlw6y08] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   100% Identical to System Modules
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-x0fmlw6y08] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-x0fmlw6y08] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-x0fmlw6y08] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-x0fmlw6y08] .e-grid .e-row.e-selectionbackground,
[b-x0fmlw6y08] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-x0fmlw6y08] .e-grid .e-row.e-selectionbackground:hover,
[b-x0fmlw6y08] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-x0fmlw6y08] .e-grid .e-row.e-selectionbackground td:first-child,
[b-x0fmlw6y08] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-x0fmlw6y08] .e-grid .e-row {
    height: 32px !important;
}

[b-x0fmlw6y08] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-x0fmlw6y08] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-x0fmlw6y08] .e-grid .e-headercell {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
}

/* Grid Row Hover Effect */
[b-x0fmlw6y08] .e-grid .e-row:hover:not(.e-selectionbackground):not([aria-selected="true"]) {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* ========================================
   FORM STYLING FOR WIZARDS
   ======================================== */
.form-group[b-x0fmlw6y08] {
    margin-bottom: 20px;
}

.form-label[b-x0fmlw6y08] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-x0fmlw6y08]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

.form-value[b-x0fmlw6y08] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-x0fmlw6y08] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* ========================================
   COLUMN CHOOSER STYLING
   ======================================== */
.column-chooser-actions[b-x0fmlw6y08] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-x0fmlw6y08] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-x0fmlw6y08] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-x0fmlw6y08] {
    font-size: 12px;
}

.column-chooser-list[b-x0fmlw6y08] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-x0fmlw6y08] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-x0fmlw6y08]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-x0fmlw6y08]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-x0fmlw6y08] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-x0fmlw6y08] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-x0fmlw6y08] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-x0fmlw6y08] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-x0fmlw6y08] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-x0fmlw6y08] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-x0fmlw6y08] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-x0fmlw6y08] {
    animation: fadeInUp-b-x0fmlw6y08 0.3s ease-out;
}

.step-title[b-x0fmlw6y08] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-x0fmlw6y08] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-x0fmlw6y08] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-x0fmlw6y08] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-x0fmlw6y08]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-x0fmlw6y08]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-x0fmlw6y08]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-x0fmlw6y08]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-x0fmlw6y08] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-x0fmlw6y08] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-x0fmlw6y08] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-x0fmlw6y08] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-x0fmlw6y08] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-x0fmlw6y08] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-x0fmlw6y08] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-x0fmlw6y08] {
    background: #f3f2f1;
}

/* ========================================
   GDPR INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.gdpr-step-icon-brand[b-x0fmlw6y08] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.gdpr-separator-text[b-x0fmlw6y08] {
    color: #e0e0e0;
}

.gdpr-dialog-header[b-x0fmlw6y08] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gdpr-icon-lg[b-x0fmlw6y08] {
    font-size: 24px;
}

.gdpr-title-text[b-x0fmlw6y08] {
    font-size: 18px;
    font-weight: 600;
}

.gdpr-pre-line-text[b-x0fmlw6y08] {
    margin: 0;
    white-space: pre-line;
}
/* /Components/Pages/MainLayout/Administration/Administration/GDPR/SecurityIncidentAdministration.razor.rz.scp.css */
/* ========================================
   SECURITY INCIDENT ADMINISTRATION PAGE
   100% Identical to System Module Administration
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-u1fz6q8ml5] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-u1fz6q8ml5] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-u1fz6q8ml5] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-u1fz6q8ml5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-u1fz6q8ml5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-u1fz6q8ml5] {
    display: none;
}

.header-right[b-u1fz6q8ml5] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-u1fz6q8ml5] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-u1fz6q8ml5] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-u1fz6q8ml5] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-u1fz6q8ml5] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-u1fz6q8ml5] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-u1fz6q8ml5] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-u1fz6q8ml5] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-u1fz6q8ml5] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-u1fz6q8ml5] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-u1fz6q8ml5] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-u1fz6q8ml5] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-u1fz6q8ml5] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-u1fz6q8ml5] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-u1fz6q8ml5] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-u1fz6q8ml5] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-u1fz6q8ml5] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-u1fz6q8ml5] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-u1fz6q8ml5] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-u1fz6q8ml5] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-u1fz6q8ml5] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-u1fz6q8ml5] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-u1fz6q8ml5] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-u1fz6q8ml5] .e-toolbar .e-textbox.e-input-group,
[b-u1fz6q8ml5] .e-toolbar .e-input-group.e-control-wrapper,
[b-u1fz6q8ml5] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-u1fz6q8ml5] .e-toolbar .e-textbox.e-input-group .e-input,
[b-u1fz6q8ml5] .e-toolbar .e-input-group .e-input,
[b-u1fz6q8ml5] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-u1fz6q8ml5] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-u1fz6q8ml5] .e-toolbar .e-input-group:focus-within,
[b-u1fz6q8ml5] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-u1fz6q8ml5] .e-toolbar .e-textbox .e-input-group-icon,
[b-u1fz6q8ml5] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-u1fz6q8ml5] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-u1fz6q8ml5] .e-toolbar .e-input-group .e-input::placeholder,
[b-u1fz6q8ml5] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-u1fz6q8ml5] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-u1fz6q8ml5] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-u1fz6q8ml5] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-u1fz6q8ml5] .e-grid .e-row.e-selectionbackground,
[b-u1fz6q8ml5] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-u1fz6q8ml5] .e-grid .e-row.e-selectionbackground:hover,
[b-u1fz6q8ml5] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-u1fz6q8ml5] .e-grid .e-row.e-selectionbackground td:first-child,
[b-u1fz6q8ml5] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-u1fz6q8ml5] .e-grid .e-row {
    height: 32px !important;
}

[b-u1fz6q8ml5] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-u1fz6q8ml5] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-u1fz6q8ml5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-u1fz6q8ml5] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-u1fz6q8ml5 1s linear infinite;
}

@keyframes spin-b-u1fz6q8ml5 {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-u1fz6q8ml5] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-u1fz6q8ml5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-u1fz6q8ml5] {
    font-size: 48px;
}

.error-container p[b-u1fz6q8ml5] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-u1fz6q8ml5] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-u1fz6q8ml5] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-u1fz6q8ml5] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-u1fz6q8ml5] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-u1fz6q8ml5] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-danger[b-u1fz6q8ml5] {
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground2);
}

.badge-info[b-u1fz6q8ml5] {
    background: var(--BEC-colorPaletteBlueBackground2);
    color: var(--BEC-colorPaletteBlueForeground2);
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
[b-u1fz6q8ml5] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-u1fz6q8ml5] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-u1fz6q8ml5] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-u1fz6q8ml5] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

/* ========================================
   WIZARD SIDEBAR STYLING (100% Copy from System Module Administration)
   ======================================== */
.sidebar-header[b-u1fz6q8ml5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-u1fz6q8ml5] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-u1fz6q8ml5] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-u1fz6q8ml5] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-u1fz6q8ml5] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-u1fz6q8ml5] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-u1fz6q8ml5] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-u1fz6q8ml5] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-u1fz6q8ml5] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-u1fz6q8ml5] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-u1fz6q8ml5] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-u1fz6q8ml5] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Form Group */
.form-group[b-u1fz6q8ml5] {
    margin-bottom: 20px;
}

.form-label[b-u1fz6q8ml5] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-u1fz6q8ml5]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

.form-value[b-u1fz6q8ml5] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-u1fz6q8ml5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rtl-text[b-u1fz6q8ml5] {
    direction: rtl;
    text-align: right;
}

/* Sidebar Footer */
.sidebar-footer[b-u1fz6q8ml5] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-u1fz6q8ml5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-u1fz6q8ml5] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-u1fz6q8ml5] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-u1fz6q8ml5] {
    background: #e1dfdd;
}

.btn-success[b-u1fz6q8ml5] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-u1fz6q8ml5] {
    background: #0b5c0b;
}

.btn i[b-u1fz6q8ml5] {
    font-size: 14px;
}

/* Info Box */
.info-box[b-u1fz6q8ml5] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-u1fz6q8ml5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-u1fz6q8ml5] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-u1fz6q8ml5] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-u1fz6q8ml5] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-u1fz6q8ml5] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-u1fz6q8ml5] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-u1fz6q8ml5] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-u1fz6q8ml5] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-u1fz6q8ml5] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-u1fz6q8ml5] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-u1fz6q8ml5] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-u1fz6q8ml5] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-u1fz6q8ml5] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* Dialog Content Styling */
[b-u1fz6q8ml5] .notification-success .e-dlg-content,
[b-u1fz6q8ml5] .notification-error .e-dlg-content,
[b-u1fz6q8ml5] .notification-warning .e-dlg-content,
[b-u1fz6q8ml5] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: #323130;
}

/* Close Icon Color */
[b-u1fz6q8ml5] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-u1fz6q8ml5] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-u1fz6q8ml5] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-u1fz6q8ml5] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: white;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .erp-page-header[b-u1fz6q8ml5] {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
    }

    .stats-container[b-u1fz6q8ml5] {
        width: 100%;
        justify-content: space-between;
    }

    .page-title[b-u1fz6q8ml5] {
        font-size: 18px;
    }

    [b-u1fz6q8ml5] .e-toolbar {
        margin: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS) !important;
    }

    .form-row[b-u1fz6q8ml5] {
        grid-template-columns: 1fr;
    }

    [b-u1fz6q8ml5] .assignment-wizard-sidebar {
        width: 90% !important;
    }

    .sidebar-header[b-u1fz6q8ml5],
    .sidebar-footer[b-u1fz6q8ml5] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-u1fz6q8ml5] {
        padding: 16px 20px;
    }
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-u1fz6q8ml5] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-u1fz6q8ml5] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-u1fz6q8ml5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-u1fz6q8ml5] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-u1fz6q8ml5] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-u1fz6q8ml5] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-u1fz6q8ml5] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-u1fz6q8ml5] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-u1fz6q8ml5] {
    animation: fadeInUp 0.3s ease-out;
}

.step-title[b-u1fz6q8ml5] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-u1fz6q8ml5] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-u1fz6q8ml5] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-u1fz6q8ml5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-u1fz6q8ml5]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-u1fz6q8ml5]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-u1fz6q8ml5]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-u1fz6q8ml5]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-u1fz6q8ml5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-u1fz6q8ml5] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-u1fz6q8ml5] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-u1fz6q8ml5] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-u1fz6q8ml5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-u1fz6q8ml5] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-u1fz6q8ml5] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-u1fz6q8ml5] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-u1fz6q8ml5] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-u1fz6q8ml5] {
    background: #f3f2f1;
}

/* ========================================
   GDPR INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.gdpr-separator-text[b-u1fz6q8ml5] {
    color: #e0e0e0;
}

.gdpr-dialog-header-sm[b-u1fz6q8ml5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gdpr-icon-md[b-u1fz6q8ml5] {
    font-size: 20px;
}

.gdpr-pre-line[b-u1fz6q8ml5] {
    white-space: pre-line;
}

.gdpr-mt-20[b-u1fz6q8ml5] {
    margin-top: 20px;
}
/* /Components/Pages/MainLayout/Administration/Administration/Organization/OrganizationAdministration.razor.rz.scp.css */
/* ========================================
   ORGANIZATION ADMINISTRATION
   Following AuditLogAdministration CSS pattern 100%
   
   FEATURES:
   ✅ Sticky Page Header (stays at top)
   ✅ Sticky Action Toolbar (stays below header with 8px gap)
   ✅ Sticky Grid Headers (stays below toolbar)
   ✅ Minimal CSS - Structure Only
   ✅ Syncfusion handles component styling
   ✅ Smooth scroll behavior
   ✅ Professional shadows & elevation
   ✅ Compact 20% smaller design
   ✅ Clear visual distinction: Active buttons (bright) vs Disabled (dimmed gray)
   
   STICKY POSITIONING STRATEGY:
   📌 Page Header:    top: 0px,    z-index: 100
   📌 Action Toolbar: top: 58px,   z-index: 90  (with 8px margin-top for spacing)
   📌 Grid Headers:   top: 110px,  z-index: 80  (adjusted for compact toolbar)
   
   This creates a layered sticky effect where each
   element sticks below the previous one while scrolling.
   
   IMPORTANT: Container must NOT have overflow-y,
   let the browser's default scroll work for sticky!
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-6cjosv2t6k] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   Let browser handle scrolling for sticky to work
   ======================================== */
.erp-page-container[b-6cjosv2t6k] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-6cjosv2t6k] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-6cjosv2t6k] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-6cjosv2t6k] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-6cjosv2t6k] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-6cjosv2t6k] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-6cjosv2t6k] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-6cjosv2t6k] {
    transform: scale(0.98);
}

.page-subtitle[b-6cjosv2t6k] {
    display: none;
}

.header-right[b-6cjosv2t6k] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-6cjosv2t6k] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-6cjosv2t6k] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-6cjosv2t6k] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-6cjosv2t6k] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-6cjosv2t6k] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR - MICROSOFT STYLE (MATCHING ALIALONE)
   ======================================== */
[b-6cjosv2t6k] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-6cjosv2t6k] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-6cjosv2t6k] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-6cjosv2t6k] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-6cjosv2t6k] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-6cjosv2t6k] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-6cjosv2t6k] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-6cjosv2t6k] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-6cjosv2t6k] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE */
/* Maximum specificity to override all Syncfusion defaults */

/* Container - Force exact 22px height with all possible selectors */
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-control-wrapper.e-textbox,
[b-6cjosv2t6k] .e-toolbar .e-textbox.e-input-group,
[b-6cjosv2t6k] .e-toolbar .e-input-group.e-control-wrapper {
    min-height: 22px !important;
    max-height: 22px !important;
    height: 22px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

/* Input field - Exact 20px height with vertical centering */
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox .e-input,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group .e-input,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group .e-input,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input,
[b-6cjosv2t6k] .e-toolbar .e-textbox.e-input-group .e-input,
[b-6cjosv2t6k] .e-toolbar .e-textbox.e-input-group input.e-input,
[b-6cjosv2t6k] .e-toolbar .e-input-group input {
    font-size: 11px !important;
    padding: 0 8px !important;
    line-height: 20px !important;
    height: 20px !important;
    box-sizing: border-box !important;
    border: none !important;
    margin: 0 !important;
    background: transparent !important;
    outline: none !important;
}

/* Placeholder - Perfect vertical centering */
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input::placeholder,
[b-6cjosv2t6k] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-6cjosv2t6k] .e-toolbar .e-input-group input::placeholder {
    line-height: 20px !important;
    font-size: 11px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
}

/* Clear button icon - Aligned with container */
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox .e-input-group-icon,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group .e-input-group-icon,
[b-6cjosv2t6k] .e-toolbar .e-textbox.e-input-group .e-input-group-icon {
    height: 22px !important;
    line-height: 22px !important;
    border: none !important;
    padding: 0 6px !important;
    min-height: 22px !important;
    max-height: 22px !important;
}

/* Focus state */
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox:focus-within,
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group:focus-within,
[b-6cjosv2t6k] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any extra padding/margin from wrapper elements */
[b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group-icon.e-clear-icon {
    height: 22px !important;
}

/* ========================================
   PAGE CONTENT
   No overflow here - let page scroll naturally
   ======================================== */
.erp-page-content[b-6cjosv2t6k] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   UNIFIED LOADING SPINNER - Tailwind3 Style
   Used across entire page (grid loading + modal loading)
   100% Syncfusion SfSpinner component
   ======================================== */
[b-6cjosv2t6k] .e-spinner-pane.e-spin-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.97) !important;
    z-index: 50 !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
}

/* Spinner Label */
[b-6cjosv2t6k] .e-spinner-pane .e-spin-label {
    font-size: 18px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    margin-top: 20px !important;
}

/* Tailwind3 Spinner Customization */
[b-6cjosv2t6k] .e-spinner-pane .e-spinner-inner {
    border-color: rgba(0, 120, 212, 0.1) !important;
    border-top-color: var(--BEC-colorBrandBackground) !important;
}

/* Error Dialog Content */
.error-dialog-content[b-6cjosv2t6k] {
    display: flex;
    gap: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalXL);
    align-items: flex-start;
}

.error-icon[b-6cjosv2t6k] {
    flex-shrink: 0;
}

.error-icon i[b-6cjosv2t6k] {
    font-size: 48px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-message h4[b-6cjosv2t6k] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground1);
}

.error-message p[b-6cjosv2t6k] {
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.error-hint[b-6cjosv2t6k] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   GRID STYLING - 100% IDENTICAL TO SYSTEM MODULES
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-6cjosv2t6k] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-6cjosv2t6k] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-6cjosv2t6k] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-6cjosv2t6k] .e-grid .e-row.e-selectionbackground,
[b-6cjosv2t6k] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-6cjosv2t6k] .e-grid .e-row.e-selectionbackground:hover,
[b-6cjosv2t6k] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-6cjosv2t6k] .e-grid .e-row.e-selectionbackground td:first-child,
[b-6cjosv2t6k] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-6cjosv2t6k] .e-grid .e-row {
    height: 32px !important;
}

[b-6cjosv2t6k] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-6cjosv2t6k] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid Row Hover */
[b-6cjosv2t6k] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Ensure grid table is fully visible */
:global(.e-grid .e-table)[b-6cjosv2t6k] {
    width: 100% !important;
}

/* ⚠️ PAGER STYLING: Managed by BEC_Theme.css (Global Ultra-Compact Single-Row Pager) */
/* DO NOT add pager CSS here - it will override the global styles */

/* Code Badge in Grid */
:global(.code-badge)[b-6cjosv2t6k] {
    display: inline-flex;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    border: 1px solid var(--BEC-colorBrandStroke1);
}

/* Count Badge in Grid */
:global(.count-badge)[b-6cjosv2t6k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

/* Status Text in Grid - Simple colored text without background or icons */
:global(.status-text)[b-6cjosv2t6k] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
}

:global(.status-text.status-active)[b-6cjosv2t6k] {
    color: #107c10;
    /* Green text for Active */
}

:global(.status-text.status-inactive)[b-6cjosv2t6k] {
    color: #d13438;
    /* Red text for Inactive */
}

/* RTL Text Support */
:global(.rtl-text)[b-6cjosv2t6k] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

:global(.rtl-input)[b-6cjosv2t6k] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

/* ========================================
   DIALOG STYLING
   Note: View/Edit modals now use separate scoped CSS files
   ======================================== */

/* ========================================
   INLINE VALIDATION ERROR (Phase 9)
   Displayed directly under each field
   ======================================== */
.field-error[b-6cjosv2t6k] {
    margin-top: var(--BEC-spacingHorizontalSNudge);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background-color: var(--BEC-colorPaletteRedBackground2);
    border-left: 3px solid var(--BEC-colorPaletteRedForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorPaletteRedForeground1);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    animation: slideDown-b-6cjosv2t6k 0.2s ease-out;
}

.field-error i[b-6cjosv2t6k] {
    font-size: var(--BEC-fontSizeBase300);
}

@keyframes slideDown-b-6cjosv2t6k {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Confirmation Dialogs */
.confirmation-content[b-6cjosv2t6k] {
    display: flex;
    gap: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalXL);
    align-items: flex-start;
}

.confirmation-icon[b-6cjosv2t6k] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.confirmation-icon-danger[b-6cjosv2t6k] {
    background: linear-gradient(135deg, #fff4e6 0%, #ffe4cc 100%);
    color: var(--BEC-colorPaletteRedForeground1);
}

.confirmation-icon-warning[b-6cjosv2t6k] {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    color: var(--BEC-colorPaletteDarkOrangeForeground1);
}

.confirmation-icon-success[b-6cjosv2t6k] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.confirmation-message[b-6cjosv2t6k] {
    flex: 1;
}

.confirmation-message p[b-6cjosv2t6k] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
}

.confirmation-message p:last-child[b-6cjosv2t6k] {
    margin-bottom: 0;
}

.confirmation-warning[b-6cjosv2t6k] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, #fff4e6 0%, #ffe4cc 100%);
    border-left: 3px solid var(--BEC-colorPaletteRedForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
    margin: var(--BEC-spacingHorizontalM) 0 0 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.confirmation-warning i[b-6cjosv2t6k] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-top: var(--BEC-spacingHorizontalXXS);
    font-size: var(--BEC-fontSizeBase300);
}

.confirmation-info[b-6cjosv2t6k] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left: 3px solid var(--BEC-colorPaletteGreenForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-colorPaletteGreenForeground2);
    margin: var(--BEC-spacingHorizontalM) 0 0 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.confirmation-info i[b-6cjosv2t6k] {
    color: var(--BEC-colorPaletteGreenForeground1);
    margin-top: var(--BEC-spacingHorizontalXXS);
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   GRID PAGER STYLES
   ⚠️ Pager styles now in BEC_Theme.css (Global)
   ⚠️ DO NOT duplicate Syncfusion overrides here
   ======================================== */

/* ========================================
   PAGE-SPECIFIC RESPONSIVE LAYOUT
   Syncfusion component styles handled by BEC_Theme.css
   Only page layout positioning here
   ======================================== */

/* Tablet (768px - 1024px) - Layout Positioning Only */
@media (max-width: 1024px) {

    /* Sticky Toolbar Positioning */
    [b-6cjosv2t6k] .e-toolbar.e-control {
        top: 50px !important;
        /* Below compact header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-6cjosv2t6k] {
        top: 100px !important;
        /* Below header + toolbar */
    }
}

/* Mobile (< 768px) - Layout Adjustments */
@media (max-width: 768px) {

    /* Page Header - Stack Vertically */
    .erp-page-header[b-6cjosv2t6k] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    /* Stats - Full Width */
    .stats-container[b-6cjosv2t6k] {
        width: 100%;
        justify-content: space-around;
    }

    /* Sticky Toolbar Positioning - Adjusted for taller header */
    [b-6cjosv2t6k] .e-toolbar.e-control {
        top: 90px !important;
        /* Below taller mobile header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-6cjosv2t6k] {
        top: 140px !important;
        /* Below header + toolbar */
    }
}

/* Small Mobile (< 480px) - Icon-Only Toolbar */
@media (max-width: 480px) {

    /* Hide button text, show icons only to save space */
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }

    /* Search Bar - Responsive Width for Mobile */
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }


    /* Column Chooser - Responsive on Mobile */
    [b-6cjosv2t6k] .e-grid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* Medium Mobile (481px - 767px) - Adjust Search Bar */
@media (min-width: 481px) and (max-width: 767px) {

    /* Search Bar - Medium Width for Medium Mobile */
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }
}

/* Tablet (768px - 1024px) - Adjust Search Bar */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Search Bar - Tablet Width */
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-6cjosv2t6k] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-6cjosv2t6k] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-6cjosv2t6k] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   ======================================== */
[b-6cjosv2t6k] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Column Chooser Dialog Header */
[b-6cjosv2t6k] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Content */
[b-6cjosv2t6k] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Footer (OK button) */
[b-6cjosv2t6k] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ========================================
   HELP WIZARD SIDEBAR STYLES
   ======================================== */
[b-6cjosv2t6k] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-6cjosv2t6k] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-6cjosv2t6k] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-6cjosv2t6k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-6cjosv2t6k] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-6cjosv2t6k] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-6cjosv2t6k] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-6cjosv2t6k] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-6cjosv2t6k] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-6cjosv2t6k] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

/* Wizard Step Content */
.wizard-step[b-6cjosv2t6k] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-6cjosv2t6k] {
    margin-bottom: 24px;
    animation: fadeInUp-b-6cjosv2t6k 0.6s ease;
}

.step-title[b-6cjosv2t6k] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-6cjosv2t6k] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-6cjosv2t6k] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-6cjosv2t6k] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-6cjosv2t6k] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-6cjosv2t6k] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-6cjosv2t6k] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-6cjosv2t6k] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-6cjosv2t6k] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-6cjosv2t6k] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-6cjosv2t6k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-6cjosv2t6k] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-6cjosv2t6k] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-6cjosv2t6k] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-6cjosv2t6k] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-6cjosv2t6k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-6cjosv2t6k] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-6cjosv2t6k] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-6cjosv2t6k] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-6cjosv2t6k] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-6cjosv2t6k] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-6cjosv2t6k] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-6cjosv2t6k] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-6cjosv2t6k] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-6cjosv2t6k] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-6cjosv2t6k] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.sidebar-footer[b-6cjosv2t6k] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-6cjosv2t6k] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.wizard-actions[b-6cjosv2t6k] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-6cjosv2t6k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-6cjosv2t6k] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-6cjosv2t6k] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-6cjosv2t6k] {
    background: #e1dfdd;
}

.btn-success[b-6cjosv2t6k] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-6cjosv2t6k] {
    background: #0b5c0b;
}

.btn i[b-6cjosv2t6k] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-6cjosv2t6k {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ========================================
   ASSIGNMENT WIZARD SIDEBAR STYLING
   ======================================== */
.assignment-wizard-sidebar[b-6cjosv2t6k] {
    background: white;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

.sidebar-step-content[b-6cjosv2t6k] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

/* Form styling for wizard */
.form-group[b-6cjosv2t6k] {
    margin-bottom: 20px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.form-label[b-6cjosv2t6k] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
    text-align: left;
}

.form-label.required[b-6cjosv2t6k]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

.form-row[b-6cjosv2t6k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
    margin-bottom: 20px;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure all Syncfusion inputs take full width within wizard */
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-input-group,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-input-group input,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-input-group .e-input,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-textbox,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-dropdownbase,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-dropdownlist,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-dropdownlist .e-input-group,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-textbox-wrapper,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-input-group-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure form groups in wizard take full width */
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k] {
    width: 100% !important;
}

/* Ensure Syncfusion components within form groups take full width */
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-input-group,
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-textbox,
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-dropdownbase,
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-dropdownlist {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure all wrapper divs don't constrain width */
.assignment-wizard-sidebar .form-group>*[b-6cjosv2t6k] {
    width: 100%;
    box-sizing: border-box;
}

/* Remove any margins/padding that create white space */
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-control-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure inputs have no internal padding creating white space */
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-input-group input {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Specific targeting for Syncfusion TextBox wrapper */
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-control-wrapper,
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Remove any default margins from Syncfusion components */
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-input-group,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-textbox,
.assignment-wizard-sidebar[b-6cjosv2t6k]  .e-dropdownbase {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Force all child elements to fill width */
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  * {
    max-width: 100% !important;
}

/* Target SfTextBox component directly */
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-control,
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-control-wrapper,
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-textbox-wrapper,
.assignment-wizard-sidebar .form-group[b-6cjosv2t6k]  .e-input-group-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    [b-6cjosv2t6k] .assignment-wizard-sidebar {
        width: 90% !important;
    }

    .sidebar-header[b-6cjosv2t6k],
    .sidebar-footer[b-6cjosv2t6k] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-6cjosv2t6k] {
        padding: 16px 20px;
    }

    .form-row[b-6cjosv2t6k] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   VIEW WIZARD STYLING
   ======================================== */
.form-value[b-6cjosv2t6k] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-value a[b-6cjosv2t6k] {
    text-decoration: none;
    color: var(--BEC-colorBrandForeground1);
}

.form-value a:hover[b-6cjosv2t6k] {
    text-decoration: underline;
}

.status-text[b-6cjosv2t6k] {
    font-size: 14px;
    font-weight: 600;
}

.status-text.status-active[b-6cjosv2t6k] {
    color: #107c10;
    /* Green text for Active */
}

.status-text.status-inactive[b-6cjosv2t6k] {
    color: #d13438;
    /* Red text for Inactive */
}

.stat-value[b-6cjosv2t6k] {
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1);
}

.loading-container[b-6cjosv2t6k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}

.loading-container .spinner[b-6cjosv2t6k] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: spin-b-6cjosv2t6k 1s linear infinite;
}

@keyframes spin-b-6cjosv2t6k {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   ======================================== */
/* Success Notification */
[b-6cjosv2t6k] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-6cjosv2t6k] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-6cjosv2t6k] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-6cjosv2t6k] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-6cjosv2t6k] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-6cjosv2t6k] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-6cjosv2t6k] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-6cjosv2t6k] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-6cjosv2t6k] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-6cjosv2t6k] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-6cjosv2t6k] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-6cjosv2t6k] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* Dialog Content Styling */
[b-6cjosv2t6k] .notification-success .e-dlg-content,
[b-6cjosv2t6k] .notification-error .e-dlg-content,
[b-6cjosv2t6k] .notification-warning .e-dlg-content,
[b-6cjosv2t6k] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: #323130;
}

/* Close Icon Color */
[b-6cjosv2t6k] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-6cjosv2t6k] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-6cjosv2t6k] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-6cjosv2t6k] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: white;
}

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-6cjosv2t6k] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-6cjosv2t6k] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-6cjosv2t6k] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-6cjosv2t6k] {
    font-size: 12px;
}

.column-chooser-list[b-6cjosv2t6k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-6cjosv2t6k] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-6cjosv2t6k] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-6cjosv2t6k]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-6cjosv2t6k]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   COLUMN CHOOSER WIZARD - PROPER HEIGHT FIX
   ======================================== */
[b-6cjosv2t6k] .assignment-wizard-sidebar .sidebar-content {
    height: calc(100vh - 140px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

[b-6cjosv2t6k] .assignment-wizard-sidebar .sidebar-step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-6cjosv2t6k] .assignment-wizard-sidebar .wizard-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* ========================================
   COLUMN CHOOSER WIZARD STYLES (MATCHING TRANSACTIONS PAGE)
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-6cjosv2t6k] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column List */
.column-list[b-6cjosv2t6k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-6cjosv2t6k] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-6cjosv2t6k] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-6cjosv2t6k] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-6cjosv2t6k] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
    text-align: left;
}

/* Select All/Deselect All Actions */
.column-actions[b-6cjosv2t6k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.action-link[b-6cjosv2t6k] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-link:hover[b-6cjosv2t6k] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-6cjosv2t6k]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-6cjosv2t6k]::-webkit-scrollbar-track {
    background: transparent;
}

.column-list[b-6cjosv2t6k]::-webkit-scrollbar-thumb {
    background-color: var(--BEC-colorNeutralStroke1);
    border-radius: 3px;
}

.column-list[b-6cjosv2t6k]::-webkit-scrollbar-thumb:hover {
    background-color: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   MIGRATED INLINE STYLES → CSS CLASSES
   ======================================== */
.adm-dialog-header-flex[b-6cjosv2t6k] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-notification-icon[b-6cjosv2t6k] {
    font-size: 20px;
}

.adm-preline-text[b-6cjosv2t6k] {
    white-space: pre-line;
}

.adm-text-muted[b-6cjosv2t6k] {
    color: var(--BEC-colorNeutralForeground3);
}

.adm-text-brand[b-6cjosv2t6k] {
    color: var(--BEC-colorBrandForeground1);
}

.adm-auto-generate-notice[b-6cjosv2t6k] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.adm-wizard-icon[b-6cjosv2t6k] {
    margin-right: 6px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-label-hidden[b-6cjosv2t6k] {
    visibility: hidden;
}

.adm-checkbox-row[b-6cjosv2t6k] {
    display: flex;
    align-items: center;
    margin-top: 4px;
}

.adm-checkbox-hint[b-6cjosv2t6k] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin-left: 8px;
}

.adm-checkbox-row-gap12[b-6cjosv2t6k] {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 4px;
}

.adm-help-icon-lg[b-6cjosv2t6k] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-6cjosv2t6k] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/Profile/ProfileAdministration.razor.rz.scp.css */
/* ========================================
   PROFILE ADMINISTRATION PAGE - RIGHT SIDEBAR WIZARD
   Sophisticated CSS | Proper Specificity | Minimal !important
   ======================================== */

/* ========================================
   0. ERP PAGE CONTAINER - ESSENTIAL BASE STYLES
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-t0ywbv7zjt] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-t0ywbv7zjt] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-t0ywbv7zjt] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-t0ywbv7zjt] {
    transform: scale(0.98);
}

.page-subtitle[b-t0ywbv7zjt] {
    display: none;
}

.header-right[b-t0ywbv7zjt] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-t0ywbv7zjt] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-t0ywbv7zjt] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-t0ywbv7zjt] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-t0ywbv7zjt] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT - Natural Flex Layout (Organization Admin Pattern)
   ✅ No fixed height - let page scroll naturally
   ✅ Grid handles its own scrolling via .e-gridcontent
   ======================================== */
.erp-page-content[b-t0ywbv7zjt] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    /* NO overflow - let page scroll naturally */
}

/* ========================================
   GRID SCROLLING - Organization Admin Pattern (PROVEN TO WORK)
   ✅ Horizontal and vertical scroll in grid content
   ======================================== */
[b-t0ywbv7zjt] .profile-admin-grid.e-grid {
    overflow-x: auto !important;
    /* Horizontal scroll for wide tables */
}

[b-t0ywbv7zjt] .profile-admin-grid .e-gridcontent {
    overflow-x: auto !important;
    /* Horizontal scroll */
    overflow-y: auto !important;
    /* Vertical scroll for grid content */
}

/* ========================================
   ACTION TOOLBAR STYLING
   ======================================== */

[b-t0ywbv7zjt] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-t0ywbv7zjt] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-t0ywbv7zjt] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-t0ywbv7zjt] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-t0ywbv7zjt] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-t0ywbv7zjt] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-t0ywbv7zjt] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-t0ywbv7zjt] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-t0ywbv7zjt] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-t0ywbv7zjt] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-t0ywbv7zjt] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* SEARCH TEXTBOX IN TOOLBAR - MAXIMUM SPECIFICITY OVERRIDE */
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-textbox,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input-group,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
}

[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group .e-input,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 22px !important;
    height: 22px !important;
    box-sizing: border-box !important;
    border: none !important;
}

[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox:focus-within,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group:focus-within,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper:focus-within,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input-group-icon,
[b-t0ywbv7zjt] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
}

/* ========================================
   GRID STYLING - 100% IDENTICAL TO SYSTEM MODULES
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-t0ywbv7zjt] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-t0ywbv7zjt] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-t0ywbv7zjt] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-t0ywbv7zjt] .e-grid .e-row.e-selectionbackground,
[b-t0ywbv7zjt] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-t0ywbv7zjt] .e-grid .e-row.e-selectionbackground:hover,
[b-t0ywbv7zjt] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-t0ywbv7zjt] .e-grid .e-row.e-selectionbackground td:first-child,
[b-t0ywbv7zjt] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-t0ywbv7zjt] .e-grid .e-row {
    height: 32px !important;
}

[b-t0ywbv7zjt] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-t0ywbv7zjt] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content area - Syncfusion official scrolling solution */
[b-t0ywbv7zjt] .e-grid .e-gridcontent {
    overflow-x: auto;
    overflow-y: auto;
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
[b-t0ywbv7zjt] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-t0ywbv7zjt] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-t0ywbv7zjt] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Custom Scrollbar Styling - Professional look */
[b-t0ywbv7zjt] .profile-admin-grid .e-gridcontent::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[b-t0ywbv7zjt] .profile-admin-grid .e-gridcontent::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 6px;
    margin: 2px;
}

[b-t0ywbv7zjt] .profile-admin-grid .e-gridcontent::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2);
    border-radius: 6px;
    border: 2px solid var(--BEC-colorNeutralBackground2);
    transition: background 0.2s ease;
}

[b-t0ywbv7zjt] .profile-admin-grid .e-gridcontent::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorBrandBackground);
}

[b-t0ywbv7zjt] .profile-admin-grid .e-gridcontent::-webkit-scrollbar-thumb:active {
    background: var(--BEC-colorBrandBackgroundPressed);
}

/* Horizontal scrollbar */
[b-t0ywbv7zjt] .profile-admin-grid .e-gridcontent::-webkit-scrollbar-corner {
    background: var(--BEC-colorNeutralBackground2);
}

/* Firefox scrollbar */
[b-t0ywbv7zjt] .profile-admin-grid .e-gridcontent {
    scrollbar-width: thin;
    scrollbar-color: var(--BEC-colorNeutralStroke2) var(--BEC-colorNeutralBackground2);
}

/* Grid content positioning */
[b-t0ywbv7zjt] .profile-admin-grid .e-content {
    position: relative;
}

/* Smooth selection highlight */
[b-t0ywbv7zjt] .profile-admin-grid .e-selectionbackground {
    transition: background-color 0.15s ease;
}

/* Loading indicator for virtual scrolling */
[b-t0ywbv7zjt] .profile-admin-grid .e-spinner-pane {
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* ========================================
   FILTERED COLUMN INDICATOR
   Blue header text when column is filtered
   ======================================== */

/* Change filter icon color to blue when active */
[b-t0ywbv7zjt] .profile-admin-grid .e-headercell .e-filtered::before {
    color: var(--BEC-colorBrandForeground1);
}

/* Change header TEXT color to blue when column is filtered */
[b-t0ywbv7zjt] .profile-admin-grid .e-headercell .e-headercelldiv {
    transition: color 0.2s ease;
}

[b-t0ywbv7zjt] .profile-admin-grid .e-filtered~.e-headercelldiv,
[b-t0ywbv7zjt] .profile-admin-grid .e-filtered~.e-headertext,
[b-t0ywbv7zjt] .profile-admin-grid .e-headercell:has(.e-filtered) .e-headercelldiv,
[b-t0ywbv7zjt] .profile-admin-grid .e-headercell:has(.e-filtered) .e-headertext {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

/* Also highlight the sort icon if column is both filtered and sorted */
[b-t0ywbv7zjt] .profile-admin-grid .e-headercell:has(.e-filtered) .e-sortfilterdiv .e-icon-ascending,
[b-t0ywbv7zjt] .profile-admin-grid .e-headercell:has(.e-filtered) .e-sortfilterdiv .e-icon-descending {
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   UNIFIED LOADING SPINNER - Tailwind3 Style
   Used across entire page (grid loading + modal loading)
   100% Syncfusion SfSpinner component
   ======================================== */
[b-t0ywbv7zjt] .e-spinner-pane.e-spin-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.97);
    z-index: 50;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* Spinner Label */
[b-t0ywbv7zjt] .e-spinner-pane .e-spin-label {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    margin-top: 20px;
}

/* Tailwind3 Spinner Customization */
[b-t0ywbv7zjt] .e-spinner-pane .e-spinner-inner {
    border-color: rgba(0, 120, 212, 0.1);
    border-top-color: var(--BEC-colorBrandBackground);
}

/* ========================================
   RTL TEXT (for Arabic names)
   ======================================== */
.rtl-text[b-t0ywbv7zjt] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

/* ========================================
   GRID COLUMN TEMPLATES - Stacked Display (Name + Code)
   Used for Organization and Company columns
   ======================================== */
.stacked-display[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

.main-text[b-t0ywbv7zjt] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

.sub-text[b-t0ywbv7zjt] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightRegular);
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   Larger size for better visibility with viewport constraints
   ======================================== */
[b-t0ywbv7zjt] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px;
    max-width: 90vw;
    /* Never exceed 90% viewport width */
    height: auto;
    max-height: 80vh;
    /* Never exceed 80% viewport height */
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow16);
}

/* Excel Filter Checkbox List Area - More visible items */
[b-t0ywbv7zjt] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px);
    /* Account for search box, header, footer */
    min-height: 300px;
    overflow-y: auto;
}

/* Excel Filter Search Box */
[b-t0ywbv7zjt] .e-grid .e-excelfilter .e-searchbox {
    margin-bottom: 8px;
}

/* Excel Filter Dialog Content */
[b-t0ywbv7zjt] .e-grid .e-excelfilter .e-dlg-content {
    padding: 16px;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   Make it a compact dialog instead of full-screen
   ======================================== */
[b-t0ywbv7zjt] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px;
    width: 450px;
    max-height: 80vh;
    /* Responsive height constraint */
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
}

/* Column Chooser Dialog Header */
[b-t0ywbv7zjt] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    padding: 16px 20px;
}

/* Column Chooser Dialog Content */
[b-t0ywbv7zjt] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px;
    overflow-y: auto;
    padding: 16px 20px;
}

/* Column Chooser Dialog Footer (OK button) */
[b-t0ywbv7zjt] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    padding: 12px 20px;
    display: flex;
    justify-content: flex-end;
}

/* ========================================
   1. SIDEBAR CONTAINER - Full Height Right Panel
   Responsive: Desktop 40%, Laptop 45%, Tablet 60%, Mobile 90%
   ======================================== */

/* ✅ SYNCFUSION PATTERN: Fixed height container */
[b-t0ywbv7zjt] .profile-wizard-sidebar.e-sidebar {
    height: 100vh !important;
    max-height: 100vh !important;
    background: white;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

/* Responsive Width - Desktop (default in C#: 40%) */
@media (max-width: 1366px) {

    /* Laptop */
    [b-t0ywbv7zjt] .profile-wizard-sidebar.e-sidebar {
        width: 45% !important;
    }
}

@media (max-width: 1024px) {

    /* Tablet */
    [b-t0ywbv7zjt] .profile-wizard-sidebar.e-sidebar {
        width: 60% !important;
    }
}

@media (max-width: 768px) {

    /* Mobile */
    [b-t0ywbv7zjt] .profile-wizard-sidebar.e-sidebar {
        width: 90% !important;
    }

    /* Reduce padding on mobile */
    .sidebar-header[b-t0ywbv7zjt],
    .sidebar-footer[b-t0ywbv7zjt] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-t0ywbv7zjt] {
        padding: 16px 20px;
    }

    .sidebar-stepper[b-t0ywbv7zjt] {
        padding: 12px 20px;
    }
}

/* ========================================
   2. SIDEBAR HEADER - Fixed at Top
   ======================================== */

/* ✅ SYNCFUSION PATTERN: Fixed header with position sticky */
.sidebar-header[b-t0ywbv7zjt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-t0ywbv7zjt] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-t0ywbv7zjt] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-t0ywbv7zjt] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-t0ywbv7zjt] {
    font-size: 18px;
    color: #605e5c;
}

/* ========================================
   3. SIDEBAR CONTENT - Scrollable Middle
   ======================================== */

/* ✅ CORRECT PATTERN: Flex container for sticky footer support */
.sidebar-content[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

/* ========================================
   4. STEPPER - Compact Horizontal
   ======================================== */

/* ✅ SYNCFUSION PATTERN: Fixed stepper with position sticky */
.sidebar-stepper[b-t0ywbv7zjt] {
    padding: 12px 24px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
    position: sticky;
    top: 56px;
    z-index: 99;
}

/* Syncfusion Stepper Overrides - Increase specificity instead of !important */
[b-t0ywbv7zjt] .sidebar-stepper-clean.e-stepper {
    max-width: 100%;
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-stepper-steps {
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-container {
    padding: 6px 12px;
    border-radius: 20px;
    min-height: auto;
    transition: all 0.2s ease;
    flex: 1;
    max-width: 150px;
    justify-content: center;
}

/* Responsive Stepper - Mobile */
@media (max-width: 768px) {
    [b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-container {
        padding: 4px 8px;
        max-width: 120px;
    }

    [b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-label-container {
        font-size: 10px;
    }

    [b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-icons {
        font-size: 12px;
        margin-right: 4px;
    }
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-label-container {
    font-size: 12px;
    font-weight: 500;
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-icons {
    font-size: 14px;
    margin-right: 6px;
}

/* Remove circle around icon - Target more specifically */
[b-t0ywbv7zjt] .sidebar-stepper-clean .e-step-label-container .e-icons::before {
    background: none;
    border: none;
    box-shadow: none;
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-step-inprogress .e-step-label-container .e-icons {
    background: none;
    border-radius: 0;
    padding: 0;
}

/* Hide subtitle */
[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-text-container {
    display: none;
}

/* Hide connector line */
[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-stepper-progressbar {
    display: none;
}

/* Stepper States - Higher specificity */
[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-notstarted {
    background: transparent;
    border: 1.5px solid #d1d1d1;
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-notstarted .e-step-label-container {
    color: #8a8886;
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-inprogress {
    background: #0078d4;
    border: 1.5px solid #0078d4;
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-inprogress .e-step-label-container {
    color: white;
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-completed {
    background: #107c10;
    border: 1.5px solid #107c10;
}

[b-t0ywbv7zjt] .sidebar-stepper-clean .e-stepper .e-step-completed .e-step-label-container {
    color: white;
    font-weight: 600;
}

/* ========================================
   5. STEP CONTENT - Fills Available Space
   ======================================== */

/* ✅ CORRECT PATTERN: Flex-grow to fill space, scrollable when needed */
.sidebar-step-content[b-t0ywbv7zjt] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px 24px 16px;
    position: relative;
}

/* Step Container for Steps 1, 3, 4, 5 (with cards) */
.step-container[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 8px;
}

/* ========================================
   6. SYNCFUSION CARD STYLING
   ======================================== */

[b-t0ywbv7zjt] .step-container .e-card {
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s;
}

[b-t0ywbv7zjt] .step-container .e-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

[b-t0ywbv7zjt] .step-container .e-card .e-card-header {
    background: #f3f2f1;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
}

[b-t0ywbv7zjt] .step-container .e-card .e-card-header .e-card-header-title {
    font-size: 14px;
    font-weight: 600;
    color: #323130;
}

[b-t0ywbv7zjt] .step-container .e-card .e-card-content {
    padding: 16px;
}

/* ========================================
   7. FORM FIELDS - COMPACT SPACING
   ======================================== */

.field-row[b-t0ywbv7zjt] {
    margin-bottom: 12px;
}

.field-row-2col[b-t0ywbv7zjt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

/* Responsive: Stack columns on mobile */
@media (max-width: 768px) {
    .field-row-2col[b-t0ywbv7zjt] {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.field-col[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
}

.field-hint-clean[b-t0ywbv7zjt] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #605e5c;
    font-style: italic;
}

.error-text-clean[b-t0ywbv7zjt] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #d13438;
    font-weight: 500;
}

[b-t0ywbv7zjt] .error-field.e-input-group,
[b-t0ywbv7zjt] .error-field.e-control-wrapper {
    border-color: #d13438;
}

/* Owner Item Template */
.owner-item-clean[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.owner-item-clean i[b-t0ywbv7zjt] {
    color: #0078d4;
    font-size: 14px;
}

.email-clean[b-t0ywbv7zjt] {
    margin-left: auto;
    font-size: 12px;
    color: #8a8886;
}

/* ========================================
   8. STEP 2 - SYSTEMS TOGGLE SWITCHES (2-COLUMN GRID)
   Modern, compact, professional with Syncfusion SfSwitch
   Reference: https://blazor.syncfusion.com/demos/buttons/toggle-switch-button?theme=fluent2
   ======================================== */

/* Main Container */
.systems-toggle-container[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px 8px;
    background: #fafafa;
    border-radius: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Header with Label and Count */
.systems-toggle-header[b-t0ywbv7zjt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.systems-toggle-header .field-label-clean[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #323130;
}

.systems-toggle-header .field-label-clean i[b-t0ywbv7zjt] {
    color: #0078d4;
    font-size: 16px;
}

.selection-count-badge[b-t0ywbv7zjt] {
    font-size: 12px;
    font-weight: 600;
    color: #0078d4;
    background: #e1f5fe;
    padding: 4px 12px;
    border-radius: 12px;
}

/* Search Box */
.systems-search-box[b-t0ywbv7zjt] {
    margin-bottom: 6px;
}

/* 2-COLUMN GRID LAYOUT */
.systems-toggle-grid[b-t0ywbv7zjt] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Individual Toggle Card */
.system-toggle-card[b-t0ywbv7zjt] {
    background: white;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s ease;
    min-width: 0;
    overflow: hidden;
}

.system-toggle-card:hover[b-t0ywbv7zjt] {
    border-color: #0078d4;
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.1);
}

.toggle-card-content[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* System Info (Icon + Text) */
.system-info-toggle[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.system-icon-toggle[b-t0ywbv7zjt] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e1f5fe;
    color: #0078d4;
    border-radius: 6px;
    font-size: 14px;
    flex-shrink: 0;
}

.system-details-toggle[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.system-name-toggle[b-t0ywbv7zjt] {
    font-size: 13px;
    font-weight: 500;
    color: #323130;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.system-code-toggle[b-t0ywbv7zjt] {
    font-size: 11px;
    color: #605e5c;
    font-weight: 400;
}

/* Syncfusion Switch Styling */
[b-t0ywbv7zjt] .system-switch.e-switch-wrapper {
    flex-shrink: 0;
}

[b-t0ywbv7zjt] .system-switch .e-switch-inner {
    background: #d1d1d1;
}

[b-t0ywbv7zjt] .system-switch.e-switch-wrapper .e-switch-on {
    background: #0078d4;
}

[b-t0ywbv7zjt] .system-switch.e-switch-wrapper .e-switch-handle {
    background: white;
}

/* Selection Summary */
.systems-summary[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #e6f7f1;
    border: 1px solid #8cd4b0;
    border-radius: 6px;
    color: #107c10;
    font-size: 13px;
    font-weight: 500;
}

.systems-summary i[b-t0ywbv7zjt] {
    font-size: 14px;
}

/* Warning (No Selection) */
.systems-warning[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fff4ce;
    border: 1px solid #ffb900;
    border-radius: 6px;
    color: #8a5100;
    font-size: 13px;
    font-weight: 500;
}

.systems-warning i[b-t0ywbv7zjt] {
    font-size: 14px;
}

/* Scrollbar for Grid */
.systems-toggle-grid[b-t0ywbv7zjt]::-webkit-scrollbar {
    width: 8px;
}

.systems-toggle-grid[b-t0ywbv7zjt]::-webkit-scrollbar-track {
    background: #fafafa;
}

.systems-toggle-grid[b-t0ywbv7zjt]::-webkit-scrollbar-thumb {
    background: #d1d1d1;
    border-radius: 4px;
}

.systems-toggle-grid[b-t0ywbv7zjt]::-webkit-scrollbar-thumb:hover {
    background: #0078d4;
}

/* Responsive: Stack to 1 column on small screens */
@media (max-width: 600px) {
    .systems-toggle-grid[b-t0ywbv7zjt] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   9. STEP 3 - MODULES ACCORDION
   ======================================== */

[b-t0ywbv7zjt] .modules-accordion-clean.e-accordion {
    border: none;
    background: transparent;
    margin-top: 8px;
}

[b-t0ywbv7zjt] .modules-accordion-clean .e-acrdn-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
    background: white;
}

.accordion-header-clean[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px;
    font-size: 15px;
    font-weight: 600;
}

.accordion-header-clean i[b-t0ywbv7zjt] {
    color: #0078d4;
    font-size: 16px;
}

.badge-clean[b-t0ywbv7zjt] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: #e3f2fd;
    color: #0078d4;
    font-size: 12px;
    font-weight: 700;
    border-radius: 12px;
}

[b-t0ywbv7zjt] .modules-accordion-clean .e-acrdn-item .e-acrdn-content {
    padding: 8px;
    border-top: 1px solid #e0e0e0;
}

.module-item-clean[b-t0ywbv7zjt] {
    padding: 10px;
    border: 1px solid #f3f2f1;
    border-radius: 6px;
    margin-bottom: 10px;
    transition: all 0.2s;
}

.module-item-clean:hover[b-t0ywbv7zjt] {
    border-color: #d1d1d1;
    background: #fafafa;
}

.module-item-clean.selected[b-t0ywbv7zjt] {
    border-color: #0078d4;
    background: #f3f9ff;
}

.module-header-clean[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.module-icon-clean[b-t0ywbv7zjt] {
    color: #0078d4;
    font-size: 16px;
}

.module-type-badge-clean[b-t0ywbv7zjt] {
    margin-left: auto;
    padding: 2px 8px;
    background: #edebe9;
    color: #323130;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

.module-permissions-clean[b-t0ywbv7zjt] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.permissions-section-clean[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-label-clean[b-t0ywbv7zjt] {
    font-size: 12px;
    font-weight: 600;
    color: #605e5c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.permissions-row-clean[b-t0ywbv7zjt] {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.field-col-clean[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-label-clean[b-t0ywbv7zjt] {
    font-size: 12px;
    color: #605e5c;
    font-weight: 500;
}

/* ========================================
   10. LOADING & EMPTY STATES
   ======================================== */

.loading-state-clean[b-t0ywbv7zjt],
.empty-state-clean[b-t0ywbv7zjt],
.placeholder-clean[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: #8a8886;
}

.loading-state-clean .spinner-border[b-t0ywbv7zjt] {
    margin-bottom: 16px;
}

.empty-state-clean i[b-t0ywbv7zjt],
.placeholder-clean i[b-t0ywbv7zjt] {
    color: #d1d1d1;
    margin-bottom: 16px;
}

.empty-state-clean h3[b-t0ywbv7zjt],
.placeholder-clean h3[b-t0ywbv7zjt] {
    font-size: 18px;
    font-weight: 600;
    color: #605e5c;
    margin-bottom: 8px;
}

/* ========================================
   LOADING & ERROR CONTAINERS (Matches System Modules)
   ======================================== */

.loading-container[b-t0ywbv7zjt],
.error-container[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorNeutralForeground2);
}

.loading-container .spinner[b-t0ywbv7zjt],
.loading-container .spinner[b-t0ywbv7zjt]::before,
.loading-container .spinner[b-t0ywbv7zjt]::after {
    display: inline-block;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: spin-b-t0ywbv7zjt 1s linear infinite;
}

@keyframes spin-b-t0ywbv7zjt {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-t0ywbv7zjt],
.error-container p[b-t0ywbv7zjt] {
    font-size: 16px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.error-container i[b-t0ywbv7zjt] {
    font-size: 48px;
    color: var(--BEC-colorPaletteRedForeground1);
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-t0ywbv7zjt] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-t0ywbv7zjt] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-t0ywbv7zjt] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-t0ywbv7zjt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-t0ywbv7zjt] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--BEC-colorNeutralForeground3);
}

.sidebar-close-btn:hover[b-t0ywbv7zjt] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-t0ywbv7zjt] {
    font-size: 18px;
}

.sidebar-content[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.wizard-step[b-t0ywbv7zjt] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-t0ywbv7zjt] {
    margin-bottom: 24px;
    animation: fadeInUp-b-t0ywbv7zjt 0.6s ease;
}

@keyframes fadeInUp-b-t0ywbv7zjt {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wizard-step .step-title[b-t0ywbv7zjt] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.wizard-step .step-description[b-t0ywbv7zjt] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Form Styling for Wizard */
.sidebar-step-content[b-t0ywbv7zjt] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

.sidebar-step-content .wizard-step[b-t0ywbv7zjt] {
    text-align: left;
    padding: 0;
}

.sidebar-step-content .step-title[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
}

.sidebar-step-content .step-title i[b-t0ywbv7zjt] {
    color: #0078d4;
    font-size: 20px;
}

.sidebar-step-content .step-description[b-t0ywbv7zjt] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
}

/* Info Box */
.info-box[b-t0ywbv7zjt] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

.info-box div[b-t0ywbv7zjt] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
}

.info-box strong[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* Features List */
.features-list[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.feature-item[b-t0ywbv7zjt] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-t0ywbv7zjt] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-t0ywbv7zjt] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-t0ywbv7zjt] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.example-step[b-t0ywbv7zjt] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-t0ywbv7zjt] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.example-step ul[b-t0ywbv7zjt] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-t0ywbv7zjt] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.use-case[b-t0ywbv7zjt] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-t0ywbv7zjt] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-t0ywbv7zjt] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-t0ywbv7zjt] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-t0ywbv7zjt] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-t0ywbv7zjt] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 12px 0;
    text-align: left;
}

.warning-box i[b-t0ywbv7zjt] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-t0ywbv7zjt] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-t0ywbv7zjt] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-t0ywbv7zjt] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-t0ywbv7zjt] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.wizard-actions[b-t0ywbv7zjt] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-t0ywbv7zjt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-t0ywbv7zjt] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-t0ywbv7zjt] {
    background: #f3f3f3;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-t0ywbv7zjt] {
    background: #e0e0e0;
}

.btn-next[b-t0ywbv7zjt] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-t0ywbv7zjt] {
    background: var(--BEC-colorBrandForeground1);
}

.btn-success[b-t0ywbv7zjt] {
    background: #10b981;
    color: white;
}

.btn-success:hover:not(:disabled)[b-t0ywbv7zjt] {
    background: #059669;
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-t0ywbv7zjt] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-t0ywbv7zjt] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-t0ywbv7zjt] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-t0ywbv7zjt] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-t0ywbv7zjt] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-t0ywbv7zjt] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-t0ywbv7zjt] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-t0ywbv7zjt] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-t0ywbv7zjt] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-t0ywbv7zjt] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-t0ywbv7zjt] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-t0ywbv7zjt] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */
.column-chooser-actions[b-t0ywbv7zjt] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.column-chooser-actions .btn-link[b-t0ywbv7zjt] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-t0ywbv7zjt] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-t0ywbv7zjt] {
    font-size: 12px;
}

.column-chooser-list[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-chooser-item[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.column-chooser-item:hover[b-t0ywbv7zjt] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-t0ywbv7zjt]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-t0ywbv7zjt]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
}

/* ========================================
   BADGE STYLING (Matches System Modules)
   ======================================== */

.badge[b-t0ywbv7zjt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
    border: none;
    background: transparent;
}

.badge-success[b-t0ywbv7zjt] {
    background: transparent;
    color: #10b981;
    border: none;
}

.badge-inactive[b-t0ywbv7zjt] {
    background: transparent;
    color: #ef4444;
    border: none;
}

.badge-warning[b-t0ywbv7zjt] {
    background: transparent;
    color: #f59e0b;
    border: none;
}

.badge-primary[b-t0ywbv7zjt] {
    background: transparent;
    color: #3b82f6;
    border: none;
}

/* Count Badges in Grid - NO SHADOW, NO BACKGROUND COLOR */
.count-badge[b-t0ywbv7zjt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 4px 8px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    background: transparent;
    color: var(--BEC-colorNeutralForeground1);
    border: none;
}

.count-systems[b-t0ywbv7zjt] {
    background: transparent;
    color: var(--BEC-colorNeutralForeground1);
}

.count-modules[b-t0ywbv7zjt] {
    background: transparent;
    color: var(--BEC-colorNeutralForeground1);
}

.count-users[b-t0ywbv7zjt] {
    background: transparent;
    color: var(--BEC-colorNeutralForeground1);
}

/* Status Badges - Green for Active, Red for Inactive */
.badge[b-t0ywbv7zjt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
    border: none;
    background: transparent;
}

.badge-success[b-t0ywbv7zjt] {
    background: transparent;
    color: #10b981;
    border: none;
}

.badge-inactive[b-t0ywbv7zjt] {
    background: transparent;
    color: #ef4444;
    border: none;
}

.badge-warning[b-t0ywbv7zjt] {
    background: transparent;
    color: #f59e0b;
    border: none;
}

.badge-primary[b-t0ywbv7zjt] {
    background: transparent;
    color: #3b82f6;
    border: none;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-t0ywbv7zjt] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-t0ywbv7zjt] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-t0ywbv7zjt] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-t0ywbv7zjt] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-t0ywbv7zjt] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-t0ywbv7zjt] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-t0ywbv7zjt] {
    animation: fadeInUp-b-t0ywbv7zjt 0.3s ease-out;
}

.step-title[b-t0ywbv7zjt] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-t0ywbv7zjt] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-t0ywbv7zjt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-t0ywbv7zjt]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-t0ywbv7zjt]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-t0ywbv7zjt]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-t0ywbv7zjt]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-t0ywbv7zjt] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-t0ywbv7zjt] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-t0ywbv7zjt] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-t0ywbv7zjt] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-t0ywbv7zjt] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-t0ywbv7zjt] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-t0ywbv7zjt] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-t0ywbv7zjt] {
    background: #f3f2f1;
}

/* ========================================
   MIGRATED INLINE STYLES → CSS CLASSES
   ======================================== */
.adm-badge-active[b-t0ywbv7zjt] {
    color: #28a745;
    font-weight: 600;
}

.adm-badge-inactive[b-t0ywbv7zjt] {
    color: #dc3545;
    font-weight: 600;
}

.adm-warning-icon[b-t0ywbv7zjt] {
    color: var(--BEC-warning-color);
    margin-bottom: 15px;
}

.adm-warning-heading[b-t0ywbv7zjt] {
    margin: 0 0 10px 0;
    color: var(--BEC-warning-color);
}

.adm-warning-desc[b-t0ywbv7zjt] {
    color: var(--BEC-text-secondary);
    margin-bottom: 20px;
}

.adm-dependency-actions-box[b-t0ywbv7zjt] {
    margin-top: 20px;
    padding: 15px;
    background: var(--BEC-background-secondary);
    border-radius: 8px;
}

.adm-dependency-title[b-t0ywbv7zjt] {
    margin: 0 0 10px 0;
    font-weight: 500;
}

.adm-btn-row[b-t0ywbv7zjt] {
    display: flex;
    gap: 10px;
}

.adm-delete-list[b-t0ywbv7zjt] {
    margin: 10px 0;
    padding-left: 20px;
}

.adm-delete-list-item[b-t0ywbv7zjt] {
    margin: 5px 0;
}

.adm-text-brand[b-t0ywbv7zjt] {
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-t0ywbv7zjt] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/SystemManagement/SystemAdministration.razor.rz.scp.css */
/* ========================================
   SYSTEM ADMINISTRATION - STANDARDIZED PAGE STYLES
   Used on: SystemAdministration.razor (Read-only view)
   
   Note: This page is read-only for viewing system configuration.
   Uses same styling pattern as System Modules page.
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-281cb7uv7c] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   Same as System Modules page
   ======================================== */
.erp-page-header[b-281cb7uv7c] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-281cb7uv7c] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-281cb7uv7c] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-281cb7uv7c] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-281cb7uv7c] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-281cb7uv7c] {
    transform: scale(0.98);
}

.page-subtitle[b-281cb7uv7c] {
    display: none;
}

.header-right[b-281cb7uv7c] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   Same as System Modules page
   ======================================== */
.stats-container[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-281cb7uv7c] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-281cb7uv7c] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-281cb7uv7c] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-281cb7uv7c] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

.BEC-CommandBar[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    min-height: 56px;
    position: sticky;
    top: 36px;
    z-index: 99;
    backdrop-filter: blur(8px);
    box-shadow: var(--BEC-shadow2);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.action-group[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.action-group-primary[b-281cb7uv7c] {
    flex-shrink: 0;
}

.action-group-utility[b-281cb7uv7c] {
    flex-shrink: 0;
}

.BEC-CommandBar-button[b-281cb7uv7c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalXS);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    height: 36px;
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    font-family: var(--BEC-fontFamilyBase);
    cursor: pointer;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
    position: relative;
    overflow: hidden;
    user-select: none;
}

.BEC-CommandBar-button:hover:not(:disabled)[b-281cb7uv7c] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorNeutralStroke2);
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow4);
}

.BEC-CommandBar-button:disabled[b-281cb7uv7c] {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground4);
}

.BEC-CommandBar-button--primary[b-281cb7uv7c] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
    box-shadow: var(--BEC-shadow2);
}

.BEC-CommandBar-button--primary:hover:not(:disabled)[b-281cb7uv7c] {
    background: var(--BEC-colorBrandBackgroundHover);
    border-color: var(--BEC-colorBrandBackgroundHover);
    box-shadow: var(--BEC-shadow8);
}

.BEC-CommandBar-button--danger[b-281cb7uv7c] {
    color: var(--BEC-colorPaletteRedForeground1);
    border-color: var(--BEC-colorNeutralStroke1);
}

.BEC-CommandBar-button--danger:hover:not(:disabled)[b-281cb7uv7c] {
    background: var(--BEC-colorPaletteRedBackground1);
    border-color: var(--BEC-colorPaletteRedForeground1);
}

.action-divider[b-281cb7uv7c] {
    width: 1px;
    height: 28px;
    background: var(--BEC-colorNeutralStroke1);
    margin: 0 var(--BEC-spacingHorizontalXS);
    flex-shrink: 0;
}

.search-box[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: 0 var(--BEC-spacingHorizontalM);
    height: 36px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    min-width: 280px;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.search-box:focus-within[b-281cb7uv7c] {
    background: var(--BEC-colorNeutralBackground1);
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
    min-width: 320px;
}

.search-icon[b-281cb7uv7c] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    flex-shrink: 0;
    transition: color var(--BEC-durationFast) var(--BEC-curveEasyEase);
}

.search-box:focus-within .search-icon[b-281cb7uv7c] {
    color: var(--BEC-colorBrandForeground1);
}

.search-input[b-281cb7uv7c] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--BEC-fontSizeBase300);
    font-family: var(--BEC-fontFamilyBase);
    color: var(--BEC-colorNeutralForeground1);
    outline: none;
}

.search-input[b-281cb7uv7c]::placeholder {
    color: var(--BEC-colorNeutralForeground4);
}

.content-placeholder[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: var(--BEC-spacingHorizontalXXXL);
}

.placeholder-card[b-281cb7uv7c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    text-align: center;
    max-width: 600px;
}

.placeholder-icon[b-281cb7uv7c] {
    font-size: 64px;
    color: var(--BEC-colorBrandForeground1);
    opacity: 0.6;
}

.placeholder-title[b-281cb7uv7c] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.placeholder-message[b-281cb7uv7c] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    line-height: 1.6;
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-281cb7uv7c] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   LOADING AND ERROR STATES
   ======================================== */
.loading-container[b-281cb7uv7c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-281cb7uv7c] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-281cb7uv7c 1s linear infinite;
}

@keyframes spin-b-281cb7uv7c {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-281cb7uv7c] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.error-container[b-281cb7uv7c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-281cb7uv7c] {
    font-size: 48px;
}

.error-container p[b-281cb7uv7c] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-281cb7uv7c] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-281cb7uv7c] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-281cb7uv7c] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-281cb7uv7c] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-281cb7uv7c] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-281cb7uv7c] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-281cb7uv7c] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-281cb7uv7c] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-281cb7uv7c] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-281cb7uv7c] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-281cb7uv7c] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-281cb7uv7c] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-281cb7uv7c] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-281cb7uv7c] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-281cb7uv7c] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-281cb7uv7c] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-281cb7uv7c] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-281cb7uv7c] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-281cb7uv7c] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-281cb7uv7c] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-281cb7uv7c] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-281cb7uv7c] .e-toolbar .e-textbox.e-input-group,
[b-281cb7uv7c] .e-toolbar .e-input-group.e-control-wrapper,
[b-281cb7uv7c] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-281cb7uv7c] .e-toolbar .e-textbox.e-input-group .e-input,
[b-281cb7uv7c] .e-toolbar .e-input-group .e-input,
[b-281cb7uv7c] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-281cb7uv7c] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-281cb7uv7c] .e-toolbar .e-input-group:focus-within,
[b-281cb7uv7c] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-281cb7uv7c] .e-toolbar .e-textbox .e-input-group-icon,
[b-281cb7uv7c] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-281cb7uv7c] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-281cb7uv7c] .e-toolbar .e-input-group .e-input::placeholder,
[b-281cb7uv7c] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   Same as System Modules page
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-281cb7uv7c] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-281cb7uv7c] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-281cb7uv7c] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-281cb7uv7c] .e-grid .e-row.e-selectionbackground,
[b-281cb7uv7c] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-281cb7uv7c] .e-grid .e-row.e-selectionbackground:hover,
[b-281cb7uv7c] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-281cb7uv7c] .e-grid .e-row.e-selectionbackground td:first-child,
[b-281cb7uv7c] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-281cb7uv7c] .e-grid .e-row {
    height: 32px !important;
}

[b-281cb7uv7c] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-281cb7uv7c] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid Row Hover */
[b-281cb7uv7c] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Search Textbox in Toolbar */
[b-281cb7uv7c] .e-toolbar .e-textbox {
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
}

[b-281cb7uv7c] .e-toolbar .e-textbox:focus {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

[b-281cb7uv7c] .e-toolbar .e-textbox.e-input-group {
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
}

[b-281cb7uv7c] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

@media (max-width: 768px) {
    .page-header-content[b-281cb7uv7c] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    .page-stats[b-281cb7uv7c] {
        width: 100%;
        justify-content: center;
    }

    .BEC-CommandBar[b-281cb7uv7c] {
        flex-wrap: wrap;
        gap: var(--BEC-spacingHorizontalS);
    }

    .action-divider[b-281cb7uv7c] {
        display: none;
    }

    .search-box[b-281cb7uv7c] {
        order: -1;
        width: 100%;
        min-width: auto;
    }

    .BEC-CommandBar-button span[b-281cb7uv7c] {
        display: none;
    }

    .BEC-CommandBar-button[b-281cb7uv7c] {
        padding: var(--BEC-spacingHorizontalS);
        width: 36px;
    }
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-281cb7uv7c] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-281cb7uv7c] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-281cb7uv7c] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-281cb7uv7c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-281cb7uv7c] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-281cb7uv7c] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-281cb7uv7c] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-281cb7uv7c] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-281cb7uv7c] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
    padding: 24px;
    overflow-y: auto;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-281cb7uv7c] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-281cb7uv7c] {
    margin-bottom: 24px;
    animation: fadeInUp-b-281cb7uv7c 0.6s ease;
}

.step-title[b-281cb7uv7c] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-281cb7uv7c] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-281cb7uv7c] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-281cb7uv7c] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-281cb7uv7c] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-281cb7uv7c] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-281cb7uv7c] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-281cb7uv7c] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-281cb7uv7c] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-281cb7uv7c] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-281cb7uv7c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-281cb7uv7c] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-281cb7uv7c] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-281cb7uv7c] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-281cb7uv7c] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-281cb7uv7c] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-281cb7uv7c] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-281cb7uv7c] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-281cb7uv7c] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-281cb7uv7c] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-281cb7uv7c] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-281cb7uv7c] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-281cb7uv7c] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-281cb7uv7c] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-281cb7uv7c] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-281cb7uv7c] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-281cb7uv7c] {
    background: #e1dfdd;
}

.btn-next[b-281cb7uv7c] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-281cb7uv7c] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-281cb7uv7c] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-281cb7uv7c] {
    background: #0b5c0b;
}

.btn i[b-281cb7uv7c] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-281cb7uv7c {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-281cb7uv7c] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-281cb7uv7c] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-281cb7uv7c] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-281cb7uv7c] {
    font-size: 12px;
}

.column-chooser-list[b-281cb7uv7c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-281cb7uv7c] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-281cb7uv7c]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-281cb7uv7c]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-281cb7uv7c] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-281cb7uv7c] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-281cb7uv7c] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-281cb7uv7c] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-281cb7uv7c] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-281cb7uv7c] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-281cb7uv7c] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-281cb7uv7c] {
    animation: fadeInUp-b-281cb7uv7c 0.3s ease-out;
}

.step-title[b-281cb7uv7c] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-281cb7uv7c] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-281cb7uv7c] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-281cb7uv7c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-281cb7uv7c]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-281cb7uv7c]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-281cb7uv7c]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-281cb7uv7c]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-281cb7uv7c] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-281cb7uv7c] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-281cb7uv7c] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-281cb7uv7c] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-281cb7uv7c] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-281cb7uv7c] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-281cb7uv7c] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-281cb7uv7c] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-281cb7uv7c] {
    background: #f3f2f1;
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-notification-icon[b-281cb7uv7c] {
    font-size: 20px;
}

.adm-preline-text[b-281cb7uv7c] {
    white-space: pre-line;
}

.adm-help-icon-lg[b-281cb7uv7c] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-281cb7uv7c] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/SystemManagement/SystemModuleAdministration.razor.rz.scp.css */
/* ========================================
   SYSTEM MODULE ADMINISTRATION PAGE
   100% Identical to Profile Administration
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-nmjmt102f1] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-nmjmt102f1] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-nmjmt102f1] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-nmjmt102f1] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-nmjmt102f1] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-nmjmt102f1] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-nmjmt102f1] {
    transform: scale(0.98);
}

.page-subtitle[b-nmjmt102f1] {
    display: none;
}

.header-right[b-nmjmt102f1] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-nmjmt102f1] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-nmjmt102f1] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-nmjmt102f1] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-nmjmt102f1] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-nmjmt102f1] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-nmjmt102f1] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-nmjmt102f1] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-nmjmt102f1] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-nmjmt102f1] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-nmjmt102f1] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-nmjmt102f1] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-nmjmt102f1] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-nmjmt102f1] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-nmjmt102f1] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-nmjmt102f1] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-nmjmt102f1] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-nmjmt102f1] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-nmjmt102f1] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-nmjmt102f1] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-nmjmt102f1] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-nmjmt102f1] .e-toolbar .e-textbox.e-input-group,
[b-nmjmt102f1] .e-toolbar .e-input-group.e-control-wrapper,
[b-nmjmt102f1] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-nmjmt102f1] .e-toolbar .e-textbox.e-input-group .e-input,
[b-nmjmt102f1] .e-toolbar .e-input-group .e-input,
[b-nmjmt102f1] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-nmjmt102f1] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-nmjmt102f1] .e-toolbar .e-input-group:focus-within,
[b-nmjmt102f1] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-nmjmt102f1] .e-toolbar .e-textbox .e-input-group-icon,
[b-nmjmt102f1] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-nmjmt102f1] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-nmjmt102f1] .e-toolbar .e-input-group .e-input::placeholder,
[b-nmjmt102f1] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-nmjmt102f1] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-nmjmt102f1] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-nmjmt102f1] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-nmjmt102f1] .e-grid .e-row.e-selectionbackground,
[b-nmjmt102f1] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-nmjmt102f1] .e-grid .e-row.e-selectionbackground:hover,
[b-nmjmt102f1] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-nmjmt102f1] .e-grid .e-row.e-selectionbackground td:first-child,
[b-nmjmt102f1] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-nmjmt102f1] .e-grid .e-row {
    height: 32px !important;
}

[b-nmjmt102f1] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-nmjmt102f1] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-nmjmt102f1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-nmjmt102f1] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-nmjmt102f1 1s linear infinite;
}

@keyframes spin-b-nmjmt102f1 {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-nmjmt102f1] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-nmjmt102f1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-nmjmt102f1] {
    font-size: 48px;
}

.error-container p[b-nmjmt102f1] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-nmjmt102f1] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-nmjmt102f1] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-nmjmt102f1] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-nmjmt102f1] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-nmjmt102f1] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
[b-nmjmt102f1] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-nmjmt102f1] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-nmjmt102f1] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-nmjmt102f1] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-nmjmt102f1] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-nmjmt102f1] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-nmjmt102f1] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING (100% Copy from UserBranchAdministration)
   ======================================== */
.sidebar-header[b-nmjmt102f1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-nmjmt102f1] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-nmjmt102f1] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-nmjmt102f1] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-nmjmt102f1] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-nmjmt102f1] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-nmjmt102f1] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-nmjmt102f1] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-nmjmt102f1] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-nmjmt102f1] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Form Group */
.form-group[b-nmjmt102f1] {
    margin-bottom: 20px;
}

.form-label[b-nmjmt102f1] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-nmjmt102f1]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

/* Column Chooser Specific Styles */
.column-chooser-actions[b-nmjmt102f1] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-nmjmt102f1] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-nmjmt102f1] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-nmjmt102f1] {
    font-size: 12px;
}

.column-chooser-list[b-nmjmt102f1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-nmjmt102f1] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-nmjmt102f1]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-nmjmt102f1]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ✅ AUTO-GENERATION INFO BANNER */
.auto-gen-info[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border: 1px solid #90caf9;
    border-radius: 8px;
    font-size: 14px;
    color: #1565c0;
    margin-bottom: 8px;
}

.auto-gen-info i[b-nmjmt102f1] {
    font-size: 18px;
    color: #7b1fa2;
    animation: sparkle-b-nmjmt102f1 2s ease-in-out infinite;
}

@keyframes sparkle-b-nmjmt102f1 {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.auto-gen-info strong[b-nmjmt102f1] {
    color: #1565c0;
    font-weight: 600;
}

.form-value[b-nmjmt102f1] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-nmjmt102f1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rtl-text[b-nmjmt102f1] {
    direction: rtl;
    text-align: right;
}

/* Sidebar Footer */
.sidebar-footer[b-nmjmt102f1] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-nmjmt102f1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-nmjmt102f1] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-nmjmt102f1] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-nmjmt102f1] {
    background: #e1dfdd;
}

.btn-success[b-nmjmt102f1] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-nmjmt102f1] {
    background: #0b5c0b;
}

.btn i[b-nmjmt102f1] {
    font-size: 14px;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .erp-page-header[b-nmjmt102f1] {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
    }

    .stats-container[b-nmjmt102f1] {
        width: 100%;
        justify-content: space-between;
    }

    .page-title[b-nmjmt102f1] {
        font-size: 18px;
    }

    [b-nmjmt102f1] .e-toolbar {
        margin: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS) !important;
    }

    .form-row[b-nmjmt102f1] {
        grid-template-columns: 1fr;
    }

    [b-nmjmt102f1] .assignment-wizard-sidebar {
        width: 90% !important;
    }

    .sidebar-header[b-nmjmt102f1],
    .sidebar-footer[b-nmjmt102f1] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-nmjmt102f1] {
        padding: 16px 20px;
    }
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-nmjmt102f1] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-nmjmt102f1] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-nmjmt102f1] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-nmjmt102f1] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-nmjmt102f1] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-nmjmt102f1] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-nmjmt102f1] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-nmjmt102f1] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-nmjmt102f1] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-nmjmt102f1] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-nmjmt102f1] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-nmjmt102f1] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* Dialog Content Styling */
[b-nmjmt102f1] .notification-success .e-dlg-content,
[b-nmjmt102f1] .notification-error .e-dlg-content,
[b-nmjmt102f1] .notification-warning .e-dlg-content,
[b-nmjmt102f1] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: #323130;
}

/* Close Icon Color */
[b-nmjmt102f1] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-nmjmt102f1] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-nmjmt102f1] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-nmjmt102f1] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: white;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-nmjmt102f1] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-nmjmt102f1] {
    margin-bottom: 24px;
    animation: fadeInUp-b-nmjmt102f1 0.6s ease;
}

.step-title[b-nmjmt102f1] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-nmjmt102f1] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-nmjmt102f1] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-nmjmt102f1] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-nmjmt102f1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-nmjmt102f1] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-nmjmt102f1] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-nmjmt102f1] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-nmjmt102f1] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-nmjmt102f1] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-nmjmt102f1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-nmjmt102f1] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-nmjmt102f1] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-nmjmt102f1] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-nmjmt102f1] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-nmjmt102f1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-nmjmt102f1] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-nmjmt102f1] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-nmjmt102f1] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-nmjmt102f1] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-nmjmt102f1] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-nmjmt102f1] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-nmjmt102f1] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-nmjmt102f1] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-nmjmt102f1] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-nmjmt102f1] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-nmjmt102f1 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   STATUS BADGE STYLES - Text Only (No Background)
   ======================================== */
.badge[b-nmjmt102f1] {
    display: inline-block;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: none !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.badge-success[b-nmjmt102f1] {
    color: #10b981 !important;
}

.badge-inactive[b-nmjmt102f1] {
    color: #dc2626 !important;
}

.badge-warning[b-nmjmt102f1] {
    color: #f59e0b !important;
}

.badge-primary[b-nmjmt102f1] {
    color: #0078d4 !important;
}

/* ========================================
   RESPONSIVE DESIGN - COMPREHENSIVE MEDIA QUERIES
   ======================================== */

/* Tablet (768px - 1024px) - Layout Positioning Only */
@media (max-width: 1024px) {

    /* Sticky Toolbar Positioning */
    [b-nmjmt102f1] .e-toolbar.e-control {
        top: 50px !important;
        /* Below compact header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-nmjmt102f1] {
        top: 100px !important;
        /* Below header + toolbar */
    }

    /* Search Bar - Tablet Width */
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
    }
}

/* Mobile (< 768px) - Layout Adjustments */
@media (max-width: 768px) {

    /* Page Header - Stack Vertically */
    .erp-page-header[b-nmjmt102f1] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    /* Stats - Full Width */
    .stats-container[b-nmjmt102f1] {
        width: 100%;
        justify-content: space-around;
    }

    /* Sticky Toolbar Positioning - Adjusted for taller header */
    [b-nmjmt102f1] .e-toolbar.e-control {
        top: 90px !important;
        /* Below taller mobile header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-nmjmt102f1] {
        top: 140px !important;
        /* Below header + toolbar */
    }

    /* Sidebar Width - Full Width on Mobile */
    [b-nmjmt102f1] .assignment-wizard-sidebar {
        width: 90% !important;
    }

    .sidebar-header[b-nmjmt102f1],
    .sidebar-footer[b-nmjmt102f1] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-nmjmt102f1] {
        padding: 16px 20px;
    }

    .form-row[b-nmjmt102f1] {
        grid-template-columns: 1fr;
    }
}

/* Medium Mobile (481px - 767px) - Adjust Search Bar */
@media (min-width: 481px) and (max-width: 767px) {

    /* Search Bar - Medium Width for Medium Mobile */
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }
}

/* Small Mobile (< 480px) - Icon-Only Toolbar */
@media (max-width: 480px) {

    /* Hide button text, show icons only to save space */
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }

    /* Search Bar - Responsive Width for Mobile */
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-nmjmt102f1] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }

    /* Column Chooser - Responsive on Mobile */
    [b-nmjmt102f1] .e-grid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-nmjmt102f1] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-nmjmt102f1] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   ======================================== */
[b-nmjmt102f1] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-nmjmt102f1] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-nmjmt102f1] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-nmjmt102f1] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-nmjmt102f1] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-nmjmt102f1] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-nmjmt102f1] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-nmjmt102f1] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-nmjmt102f1] {
    animation: fadeInUp-b-nmjmt102f1 0.3s ease-out;
}

.step-title[b-nmjmt102f1] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-nmjmt102f1] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-nmjmt102f1] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-nmjmt102f1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-nmjmt102f1]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-nmjmt102f1]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-nmjmt102f1]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-nmjmt102f1]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-nmjmt102f1] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-nmjmt102f1] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-nmjmt102f1] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-nmjmt102f1] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-nmjmt102f1] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-nmjmt102f1] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-nmjmt102f1] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-nmjmt102f1] {
    background: #f3f2f1;
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-label-hidden[b-nmjmt102f1] {
    visibility: hidden;
}

.adm-checkbox-group[b-nmjmt102f1] {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 4px;
}

.adm-dialog-header-flex[b-nmjmt102f1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-text-danger[b-nmjmt102f1] {
    color: #d13438;
}

.adm-text-danger-bold[b-nmjmt102f1] {
    color: #d13438;
    font-weight: 500;
}

.adm-info-box-light[b-nmjmt102f1] {
    background: #f9f9f9;
    padding: 12px;
    border-radius: 4px;
    margin-top: 12px;
}

.adm-notification-icon[b-nmjmt102f1] {
    font-size: 20px;
}

.adm-preline-text[b-nmjmt102f1] {
    white-space: pre-line;
}

.adm-help-icon-lg[b-nmjmt102f1] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-nmjmt102f1] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/SystemManagement/SystemOverview.razor.rz.scp.css */
/* ============================================================================
   SYSTEM OVERVIEW PAGE STYLES
   Microsoft-Style Compact Design with TreeView
   ============================================================================ */

/* ============================================================================
   PAGE HEADER - ULTRA MINIMAL (IDENTICAL TO PROFILE ADMINISTRATION)
   ============================================================================ */

.erp-page-header[b-tp30048l04] {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 6px 24px;
    min-height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
}

.header-left[b-tp30048l04] {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.page-title[b-tp30048l04] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.page-title i[b-tp30048l04] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-title h1[b-tp30048l04] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.stats-container[b-tp30048l04] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-tp30048l04] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-tp30048l04] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-tp30048l04] {
    display: block;
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.stat-divider[b-tp30048l04] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ============================================================================
   ACTION TOOLBAR - MICROSOFT STYLE (IDENTICAL TO PROFILE ADMINISTRATION)
   ============================================================================ */

[b-tp30048l04] .erp-action-toolbar.e-toolbar.e-control {
    position: sticky;
    top: 36px;
    z-index: 99;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 2px 20px;
    min-height: 28px;
    margin: 3px 24px 1px 24px;
    box-shadow: var(--BEC-shadow2);
}

[b-tp30048l04] .e-toolbar .e-toolbar-item {
    margin: 0 2px;
}

[b-tp30048l04] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0;
}

[b-tp30048l04] .e-toolbar .e-toolbar-item .e-tbar-btn {
    color: #0078d4;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    padding: 0 8px;
    min-height: 24px;
    line-height: 1;
    gap: 5px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

[b-tp30048l04] .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
    background: var(--BEC-colorNeutralBackground1Hover);
    color: #106ebe;
}

[b-tp30048l04] .e-toolbar .e-toolbar-item .e-tbar-btn:active {
    background: var(--BEC-colorNeutralBackground1Pressed);
}

[b-tp30048l04] .e-toolbar .e-toolbar-item .e-tbar-btn[disabled] {
    color: var(--BEC-colorNeutralForegroundDisabled);
    opacity: 0.5;
    cursor: not-allowed;
}

[b-tp30048l04] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px;
    line-height: 1;
}

[b-tp30048l04] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    font-size: 12px;
    line-height: 1;
}

[b-tp30048l04] .e-toolbar .e-separator {
    width: 2px;
    height: 14px;
    background: #0078d4;
    margin: 0 4px;
    opacity: 0.3;
}

[b-tp30048l04] .e-toolbar .e-textbox.e-input-group {
    width: 200px;
    min-height: 24px;
    border-radius: var(--BEC-borderRadiusSmall);
}

[b-tp30048l04] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px;
    padding: 2px 8px;
    line-height: 1;
}

/* ============================================================================
   PAGE CONTENT - TREEVIEW CONTAINER
   ============================================================================ */

.erp-page-content[b-tp30048l04] {
    padding: 8px 24px 24px 24px;
    height: calc(100vh - 235px);
    overflow: auto;
}

/* ============================================================================
   TREEVIEW - CUSTOM NODE STYLING
   ============================================================================ */

.system-overview-tree[b-tp30048l04] {
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground1);
    padding: 8px;
}

[b-tp30048l04] .system-overview-tree .e-list-item {
    border-radius: var(--BEC-borderRadiusSmall);
    padding: 4px 8px;
    margin-bottom: 2px;
}

[b-tp30048l04] .system-overview-tree .e-list-item:hover {
    background: var(--BEC-colorNeutralBackground1Hover);
}

[b-tp30048l04] .system-overview-tree .e-list-item.e-active {
    background: var(--BEC-colorNeutralBackground1Selected);
    border-left: 3px solid var(--BEC-colorBrandBackground);
}

/* Tree Node Template Styling */
.tree-node[b-tp30048l04] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
}

.tree-node i[b-tp30048l04] {
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.tree-node .node-title[b-tp30048l04] {
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    flex: 1;
}

/* Node Type Specific Colors */
.tree-node.node-root i[b-tp30048l04] {
    color: var(--BEC-colorBrandForeground1);
}

.tree-node.node-organization i[b-tp30048l04] {
    color: #0078d4;
}

.tree-node.node-company i[b-tp30048l04] {
    color: #107c10;
}

.tree-node.node-branch i[b-tp30048l04] {
    color: #0078d4;
}

.tree-node.node-project i[b-tp30048l04] {
    color: #ca5010;
}

.tree-node.node-system i[b-tp30048l04] {
    color: #8764b8;
}

.tree-node.node-module i[b-tp30048l04] {
    color: #00b7c3;
}

.tree-node.node-profile i[b-tp30048l04] {
    color: #c239b3;
}

.tree-node.node-group i[b-tp30048l04] {
    color: var(--BEC-colorNeutralForeground3);
}

/* Node Badges */
.node-badge[b-tp30048l04] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 10px;
    font-weight: var(--BEC-fontWeightMedium);
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

.node-badge.users[b-tp30048l04] {
    background: #e1f5fe;
    color: #01579b;
}

.node-badge.modules[b-tp30048l04] {
    background: #f3e5f5;
    color: #4a148c;
}

.node-badge.projects[b-tp30048l04] {
    background: #fff3e0;
    color: #e65100;
}

/* Node Status */
.node-status[b-tp30048l04] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
}

.node-status.active[b-tp30048l04] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.node-status.inactive[b-tp30048l04] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.node-status.in-progress[b-tp30048l04] {
    background: var(--BEC-colorPaletteBlueForeground2);
    color: white;
}

.node-status.under-development[b-tp30048l04] {
    background: var(--BEC-colorPaletteYellowBackground2);
    color: var(--BEC-colorPaletteYellowForeground2);
}

.node-status.production[b-tp30048l04] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

/* Node Type Badge (Standalone) */
.node-type-badge[b-tp30048l04] {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 9px;
    font-weight: var(--BEC-fontWeightBold);
    background: var(--BEC-colorBrandBackground);
    color: white;
    text-transform: uppercase;
}

/* ============================================================================
   LOADING & ERROR STATES
   ============================================================================ */

.loading-container[b-tp30048l04],
.error-container[b-tp30048l04] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorNeutralForeground2);
}

.loading-spinner[b-tp30048l04] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: spin-b-tp30048l04 1s linear infinite;
}

@keyframes spin-b-tp30048l04 {
    to {
        transform: rotate(360deg);
    }
}

.error-container i[b-tp30048l04] {
    font-size: 48px;
    color: var(--BEC-colorPaletteRedForeground2);
}

/* ============================================================================
   DIALOG STYLING
   ============================================================================ */

[b-tp30048l04] .erp-dialog .e-dlg-header-content {
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 12px 20px;
}

.dialog-header[b-tp30048l04] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dialog-header i[b-tp30048l04] {
    font-size: 20px;
    color: var(--BEC-colorBrandForeground1);
}

.dialog-header span[b-tp30048l04] {
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.dialog-content[b-tp30048l04] {
    padding: 20px;
}

.dialog-content .form-group[b-tp30048l04] {
    margin-bottom: 16px;
}

.dialog-content .form-group label[b-tp30048l04] {
    display: block;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 4px;
}

.dialog-content .form-value[b-tp30048l04] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

/* ============================================================================
   NOTIFICATION DIALOG STYLING
   ============================================================================ */

[b-tp30048l04] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, var(--BEC-colorPaletteGreenBackground2) 0%, var(--BEC-colorPaletteGreenBackground1) 100%);
    border-bottom: none;
}

[b-tp30048l04] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, var(--BEC-colorPaletteRedBackground2) 0%, var(--BEC-colorPaletteRedBackground1) 100%);
    border-bottom: none;
}

[b-tp30048l04] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, var(--BEC-colorPaletteYellowBackground2) 0%, var(--BEC-colorPaletteYellowBackground1) 100%);
    border-bottom: none;
}

[b-tp30048l04] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, var(--BEC-colorPaletteBlueForeground2) 0%, var(--BEC-colorBrandBackground) 100%);
    border-bottom: none;
}

.notification-header[b-tp30048l04] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-header i[b-tp30048l04] {
    font-size: 24px;
    color: white;
}

.notification-header span[b-tp30048l04] {
    font-size: 16px;
    font-weight: var(--BEC-fontWeightBold);
    color: white;
}

.notification-content[b-tp30048l04] {
    padding: 20px;
}

.notification-content p[b-tp30048l04] {
    margin: 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.5;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 1200px) {
    .stats-container[b-tp30048l04] {
        gap: 12px;
    }

    .stat-card[b-tp30048l04] {
        gap: 3px;
    }

    .stat-value[b-tp30048l04] {
        font-size: 12px;
    }

    .stat-label[b-tp30048l04] {
        font-size: 9px;
    }
}

@media (max-width: 768px) {
    .erp-page-header[b-tp30048l04] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 16px;
    }

    .header-left[b-tp30048l04] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }

    .stats-container[b-tp30048l04] {
        flex-wrap: wrap;
        gap: 8px;
    }

    [b-tp30048l04] .erp-action-toolbar {
        margin: 8px 16px;
    }

    .erp-page-content[b-tp30048l04] {
        padding: 8px 16px 16px 16px;
    }

    [b-tp30048l04] .e-toolbar .e-textbox.e-input-group {
        width: 150px;
    }
}

/* /Components/Pages/MainLayout/Administration/Administration/User/Assignments/UserBranchAdministration.razor.rz.scp.css */
/* ========================================
   USER BRANCH ASSIGNMENT - OPTIMIZED CSS
   Clean | Efficient | No Duplications
   ======================================== */

/* ========================================
   PAGE LAYOUT
   ======================================== */
.erp-page-container[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.erp-page-content[b-xfjca4ar1k] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-xfjca4ar1k] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-xfjca4ar1k] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-xfjca4ar1k] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-xfjca4ar1k] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-xfjca4ar1k] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-xfjca4ar1k] {
    transform: scale(0.98);
}

.page-subtitle[b-xfjca4ar1k] {
    display: none;
}

.header-right[b-xfjca4ar1k] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-xfjca4ar1k] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-xfjca4ar1k] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-xfjca4ar1k] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-xfjca4ar1k] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR STYLING
   ======================================== */

[b-xfjca4ar1k] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-xfjca4ar1k] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-xfjca4ar1k] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-xfjca4ar1k] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-xfjca4ar1k] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-xfjca4ar1k] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-xfjca4ar1k] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-xfjca4ar1k] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-xfjca4ar1k] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-xfjca4ar1k] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-xfjca4ar1k] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* SEARCH TEXTBOX IN TOOLBAR - MAXIMUM SPECIFICITY OVERRIDE */
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-textbox,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input-group,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
}

[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group .e-input,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 20px !important;
    height: 20px !important;
    box-sizing: border-box !important;
    border: none !important;
}

[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox:focus-within,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group:focus-within,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper:focus-within,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input-group-icon,
[b-xfjca4ar1k] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group .e-input-group-icon {
    border: none !important;
    height: 20px !important;
}

/* ========================================
   GRID BADGES
   ======================================== */
.badge[b-xfjca4ar1k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
}

.badge-project[b-xfjca4ar1k] {
    background: var(--BEC-colorStatusWarningBackground1);
    color: var(--BEC-colorStatusWarningForeground1);
}

.badge-branch[b-xfjca4ar1k] {
    background: var(--BEC-colorStatusInfoBackground1);
    color: var(--BEC-colorStatusInfoForeground1);
}

.user-count-badge[b-xfjca4ar1k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--BEC-colorBrandBackground1);
    color: var(--BEC-colorBrandForeground1);
    border-radius: 12px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.status-badge[b-xfjca4ar1k] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.status-active[b-xfjca4ar1k] {
    color: #10b981;
    background: transparent;
    font-weight: var(--BEC-fontWeightSemibold);
}

.status-inactive[b-xfjca4ar1k] {
    color: #ef4444;
    background: transparent;
    font-weight: var(--BEC-fontWeightSemibold);
}

.rtl-text[b-xfjca4ar1k] {
    direction: rtl;
    text-align: right;
    font-family: 'Segoe UI', 'Arial', sans-serif;
}

/* ========================================
   GRID STYLING - 100% IDENTICAL TO SYSTEM MODULES
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-xfjca4ar1k] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-xfjca4ar1k] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-xfjca4ar1k] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-xfjca4ar1k] .e-grid .e-row.e-selectionbackground,
[b-xfjca4ar1k] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-xfjca4ar1k] .e-grid .e-row.e-selectionbackground:hover,
[b-xfjca4ar1k] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-xfjca4ar1k] .e-grid .e-row.e-selectionbackground td:first-child,
[b-xfjca4ar1k] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-xfjca4ar1k] .e-grid .e-row {
    height: 32px !important;
}

[b-xfjca4ar1k] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-xfjca4ar1k] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid Row Hover */
[b-xfjca4ar1k] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* ========================================
   SIDEBAR WIZARD (40% Width)
   ======================================== */
[b-xfjca4ar1k] .assignment-wizard-sidebar.e-sidebar {
    height: 100vh !important;
    max-height: 100vh !important;
    background: white;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

/* Responsive Width - Matches ProfileAdministration (Desktop default: 40%) */
@media (max-width: 1366px) {

    /* Laptop */
    [b-xfjca4ar1k] .assignment-wizard-sidebar.e-sidebar {
        width: 45% !important;
    }
}

@media (max-width: 1024px) {

    /* Tablet */
    [b-xfjca4ar1k] .assignment-wizard-sidebar.e-sidebar {
        width: 60% !important;
    }
}

@media (max-width: 768px) {

    /* Mobile */
    [b-xfjca4ar1k] .assignment-wizard-sidebar.e-sidebar {
        width: 90% !important;
    }

    /* Reduce padding on mobile */
    .sidebar-header[b-xfjca4ar1k],
    .sidebar-footer[b-xfjca4ar1k] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-xfjca4ar1k] {
        padding: 16px 20px;
    }

    .sidebar-stepper[b-xfjca4ar1k] {
        padding: 12px 20px;
    }
}

.sidebar-header[b-xfjca4ar1k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-xfjca4ar1k] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-xfjca4ar1k] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-xfjca4ar1k] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-xfjca4ar1k] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

/* ========================================
   STEPPER (Syncfusion) - Matches ProfileAdministration
   ======================================== */
.sidebar-stepper[b-xfjca4ar1k] {
    padding: 12px 24px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
    position: sticky;
    top: 56px;
    z-index: 99;
}

/* Syncfusion Stepper Overrides - Increase specificity instead of !important */
[b-xfjca4ar1k] .sidebar-stepper-clean.e-stepper {
    max-width: 100%;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-stepper-steps {
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-step-container {
    padding: 6px 12px;
    border-radius: 20px;
    min-height: auto;
    transition: all 0.2s ease;
    flex: 1;
    max-width: 150px;
    justify-content: center;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-step-label-container {
    font-size: 12px;
    font-weight: 500;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-icons {
    font-size: 14px;
    margin-right: 6px;
}

/* ⭐ CRITICAL: Remove circle around icon */
[b-xfjca4ar1k] .sidebar-stepper-clean .e-step-label-container .e-icons::before {
    background: none;
    border: none;
    box-shadow: none;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-step-inprogress .e-step-label-container .e-icons {
    background: none;
    border-radius: 0;
    padding: 0;
}

/* Hide subtitle */
[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-step-text-container {
    display: none;
}

/* Hide connector line */
[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-stepper-progressbar {
    display: none;
}

/* Stepper States - Higher specificity */
[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-step-notstarted {
    background: transparent;
    border: 1.5px solid #d1d1d1;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-step-notstarted .e-step-label-container {
    color: #8a8886;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-step-inprogress {
    background: #0078d4;
    border: 1.5px solid #0078d4;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-step-inprogress .e-step-label-container {
    color: white;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-step-completed {
    background: #107c10;
    border: 1.5px solid #107c10;
}

[b-xfjca4ar1k] .sidebar-stepper-clean .e-stepper .e-step-completed .e-step-label-container {
    color: white;
    font-weight: 600;
}

/* ========================================
   WIZARD STEPS
   ======================================== */
.sidebar-step-content[b-xfjca4ar1k] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

.wizard-step[b-xfjca4ar1k] {
    max-width: 100%;
}

.step-title[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
}

.step-title i[b-xfjca4ar1k] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-xfjca4ar1k] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
.form-group[b-xfjca4ar1k] {
    margin-bottom: 20px;
}

.form-label[b-xfjca4ar1k] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-xfjca4ar1k]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

.form-row[b-xfjca4ar1k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.form-hint[b-xfjca4ar1k],
.field-hint[b-xfjca4ar1k] {
    display: block;
    font-size: 12px;
    color: #605e5c;
    margin-top: 4px;
    font-style: italic;
}

.error-message[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #d13438;
    font-size: 13px;
    margin-top: 4px;
}

.error-message i[b-xfjca4ar1k] {
    font-size: 14px;
}

.error-message-box[b-xfjca4ar1k] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: #fef0f0;
    border: 1px solid #f1aeb5;
    border-radius: 6px;
    color: #d13438;
    font-size: 14px;
    margin-top: 16px;
}

.error-message-box i[b-xfjca4ar1k] {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ========================================
   SELECTED ITEM CARD (Branch/Project Display)
   ======================================== */
.selected-item-card[b-xfjca4ar1k] {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-top: 16px;
    overflow: hidden;
}

.selected-item-card .card-header[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #e8f4fd;
    border-bottom: 1px solid #d0e8f7;
    font-size: 16px;
    font-weight: 600;
    color: #0078d4;
}

.selected-item-card .card-header i[b-xfjca4ar1k] {
    font-size: 20px;
}

.selected-item-card .card-body[b-xfjca4ar1k] {
    padding: 16px;
}

.selected-item-card .info-row[b-xfjca4ar1k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
}

.selected-item-card .info-row:last-child[b-xfjca4ar1k] {
    border-bottom: none;
}

.selected-item-card .info-row .label[b-xfjca4ar1k] {
    font-weight: 500;
    color: #605e5c;
    font-size: 14px;
}

.selected-item-card .info-row .value[b-xfjca4ar1k] {
    color: #323130;
    font-size: 14px;
}

/* ========================================
   USER SELECTION CONTAINER
   ======================================== */
.user-selection-container[b-xfjca4ar1k] {
    margin-top: 16px;
}

.selection-toolbar[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.search-box[b-xfjca4ar1k] {
    flex: 1;
}

.action-buttons[b-xfjca4ar1k] {
    display: flex;
    gap: 8px;
}

.action-btn[b-xfjca4ar1k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f3f2f1;
    color: #323130;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover:not(:disabled)[b-xfjca4ar1k] {
    background: #e1dfdd;
    border-color: #c8c6c4;
}

.action-btn:disabled[b-xfjca4ar1k] {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-btn i[b-xfjca4ar1k] {
    font-size: 14px;
}

.selection-info[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #e8f4fd;
    border: 1px solid #c7e0f4;
    border-radius: 6px;
    color: #0078d4;
    font-size: 14px;
    margin-bottom: 12px;
}

.selection-info i[b-xfjca4ar1k] {
    font-size: 16px;
}

.listbox-container[b-xfjca4ar1k] {
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    overflow: hidden;
}

.no-results[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: #605e5c;
}

.no-results i[b-xfjca4ar1k] {
    font-size: 48px;
    color: #c8c6c4;
    margin-bottom: 16px;
}

.no-results p[b-xfjca4ar1k] {
    margin: 0;
    font-size: 14px;
}

/* User Item in ListBox */
.user-item[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.user-name[b-xfjca4ar1k] {
    font-weight: 500;
    color: #323130;
}

.user-separator[b-xfjca4ar1k] {
    color: #c8c6c4;
}

.user-email[b-xfjca4ar1k] {
    color: #605e5c;
    font-size: 13px;
}

/* ========================================
   REVIEW SECTION
   ======================================== */
.review-section[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-card[b-xfjca4ar1k] {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.review-card .review-header[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #e8f4fd;
    border-bottom: 1px solid #d0e8f7;
    font-size: 15px;
    font-weight: 600;
    color: #0078d4;
}

.review-card .review-header i[b-xfjca4ar1k] {
    font-size: 18px;
}

.review-card .review-body[b-xfjca4ar1k] {
    padding: 16px;
}

.review-card .review-row[b-xfjca4ar1k] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
}

.review-card .review-row:last-child[b-xfjca4ar1k] {
    border-bottom: none;
}

.review-card .review-row .label[b-xfjca4ar1k] {
    font-weight: 500;
    color: #605e5c;
    font-size: 14px;
    min-width: 120px;
}

.review-card .review-row .value[b-xfjca4ar1k] {
    color: #323130;
    font-size: 14px;
    text-align: right;
    flex: 1;
}

.review-card .user-list[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.review-card .user-review-item[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.review-card .user-review-item i[b-xfjca4ar1k] {
    font-size: 16px;
    color: #0078d4;
}

.review-card .user-info[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-card .user-info .user-name[b-xfjca4ar1k] {
    font-weight: 500;
    color: #323130;
    font-size: 14px;
}

.review-card .user-info .user-email[b-xfjca4ar1k] {
    color: #605e5c;
    font-size: 12px;
}

.review-card .no-data[b-xfjca4ar1k] {
    color: #605e5c;
    font-style: italic;
    text-align: center;
    padding: 20px 0;
}

/* ========================================
   SIDEBAR FOOTER (Buttons)
   ======================================== */
.sidebar-footer[b-xfjca4ar1k] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
    z-index: 100;
}

/* Button Styles (HTML buttons) */
.btn[b-xfjca4ar1k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

.btn:disabled[b-xfjca4ar1k] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn i[b-xfjca4ar1k] {
    font-size: 14px;
}

.btn-secondary[b-xfjca4ar1k] {
    background: #f3f2f1;
    color: #323130;
    border: 1px solid #d1d1d1;
}

.btn-secondary:hover:not(:disabled)[b-xfjca4ar1k] {
    background: #e1dfdd;
    border-color: #c8c6c4;
}

.btn-secondary:active:not(:disabled)[b-xfjca4ar1k] {
    background: #d2d0ce;
}

.btn-primary[b-xfjca4ar1k] {
    background: #0078d4;
    color: white;
    border: 1px solid #0078d4;
}

.btn-primary:hover:not(:disabled)[b-xfjca4ar1k] {
    background: #106ebe;
    border-color: #106ebe;
    box-shadow: 0 2px 6px rgba(0, 120, 212, 0.3);
}

.btn-primary:active:not(:disabled)[b-xfjca4ar1k] {
    background: #005a9e;
}

.btn-success[b-xfjca4ar1k] {
    background: #107c10;
    color: white;
    border: 1px solid #107c10;
}

.btn-success:hover:not(:disabled)[b-xfjca4ar1k] {
    background: #0b5a0b;
    border-color: #0b5a0b;
    box-shadow: 0 2px 6px rgba(16, 124, 16, 0.3);
}

.btn-success:active:not(:disabled)[b-xfjca4ar1k] {
    background: #094509;
}

/* Spinner in button */
.spinner-border[b-xfjca4ar1k] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-animation-b-xfjca4ar1k 0.75s linear infinite;
}

.spinner-border-sm[b-xfjca4ar1k] {
    width: 12px;
    height: 12px;
    border-width: 2px;
}

@keyframes spinner-border-animation-b-xfjca4ar1k {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   SYNCFUSION COMPONENT OVERRIDES FOR WIZARD
   ======================================== */

/* TextBox in wizard forms */
[b-xfjca4ar1k] .sidebar-step-content .e-input-group,
[b-xfjca4ar1k] .sidebar-step-content .e-float-input {
    margin-bottom: 0;
}

[b-xfjca4ar1k] .sidebar-step-content .e-input-group .e-input,
[b-xfjca4ar1k] .sidebar-step-content .e-float-input .e-input {
    font-size: 14px;
    padding: 8px 12px;
    border-color: #d1d1d1;
    border-radius: 4px;
}

[b-xfjca4ar1k] .sidebar-step-content .e-input-group:focus-within,
[b-xfjca4ar1k] .sidebar-step-content .e-float-input:focus-within {
    border-color: #0078d4;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.3);
}

/* DropDownList in wizard forms */
[b-xfjca4ar1k] .sidebar-step-content .e-ddl.e-input-group,
[b-xfjca4ar1k] .sidebar-step-content .e-dropdownlist.e-input-group {
    border-radius: 4px;
}

[b-xfjca4ar1k] .sidebar-step-content .e-ddl .e-input,
[b-xfjca4ar1k] .sidebar-step-content .e-dropdownlist .e-input {
    font-size: 14px;
}

/* MultiSelect in wizard */
[b-xfjca4ar1k] .sidebar-step-content .e-multi-select-wrapper {
    border-radius: 4px;
    border-color: #d1d1d1;
}

[b-xfjca4ar1k] .sidebar-step-content .e-multi-select-wrapper:focus-within {
    border-color: #0078d4;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.3);
}

/* ListBox styling */
[b-xfjca4ar1k] .sidebar-step-content .e-listbox-wrapper {
    border: 1px solid #d1d1d1;
    border-radius: 6px;
}

[b-xfjca4ar1k] .sidebar-step-content .e-listbox-wrapper .e-list-item {
    padding: 10px 12px;
    border-bottom: 1px solid #f3f2f1;
}

[b-xfjca4ar1k] .sidebar-step-content .e-listbox-wrapper .e-list-item:hover {
    background: #f8f9fa;
}

[b-xfjca4ar1k] .sidebar-step-content .e-listbox-wrapper .e-list-item.e-active {
    background: #e8f4fd;
    color: #0078d4;
}

/* Checkbox in ListBox */
[b-xfjca4ar1k] .sidebar-step-content .e-listbox-wrapper .e-checkbox-wrapper {
    margin-right: 10px;
}

/* ========================================
   HELP WIZARD SPECIFIC STYLES
   ======================================== */
[b-xfjca4ar1k] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

[b-xfjca4ar1k] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

.step-icon[b-xfjca4ar1k] {
    text-align: center;
    margin-bottom: 24px;
}

.step-icon i[b-xfjca4ar1k] {
    font-size: 48px;
    color: #0078d4;
}

.info-box[b-xfjca4ar1k] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #e8f4fd;
    border: 1px solid #c7e0f4;
    border-left: 4px solid #0078d4;
    border-radius: 6px;
    margin: 20px 0;
}

.info-box i[b-xfjca4ar1k] {
    font-size: 20px;
    color: #0078d4;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-box strong[b-xfjca4ar1k] {
    display: block;
    margin-bottom: 4px;
    color: #323130;
}

.features-list[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feature-item[b-xfjca4ar1k] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.feature-item i[b-xfjca4ar1k] {
    font-size: 20px;
    color: #0078d4;
    flex-shrink: 0;
    margin-top: 2px;
}

.feature-item strong[b-xfjca4ar1k] {
    display: block;
    margin-bottom: 4px;
    color: #323130;
}

.feature-item p[b-xfjca4ar1k] {
    margin: 0;
    color: #605e5c;
    font-size: 13px;
}

.example-steps[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}

.example-step[b-xfjca4ar1k] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.step-number[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #0078d4;
    color: white;
    border-radius: 50%;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.example-step ul[b-xfjca4ar1k] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step li[b-xfjca4ar1k] {
    margin: 4px 0;
    color: #605e5c;
}

.use-cases[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.use-case[b-xfjca4ar1k] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.use-case-good[b-xfjca4ar1k] {
    background: #f0fdf4;
    border-color: #86efac;
}

.use-case i[b-xfjca4ar1k] {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.use-case-good i[b-xfjca4ar1k] {
    color: #16a34a;
}

.use-case strong[b-xfjca4ar1k] {
    display: block;
    margin-bottom: 4px;
    color: #323130;
}

.use-case p[b-xfjca4ar1k] {
    margin: 0;
    color: #605e5c;
    font-size: 13px;
}

.warning-box[b-xfjca4ar1k] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-left: 4px solid #ffc107;
    border-radius: 6px;
    margin: 20px 0;
}

.warning-box i[b-xfjca4ar1k] {
    font-size: 20px;
    color: #ffc107;
    flex-shrink: 0;
    margin-top: 2px;
}

.warning-box strong[b-xfjca4ar1k] {
    display: block;
    margin-bottom: 4px;
    color: #856404;
}

.dont-show-again[b-xfjca4ar1k] {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.dont-show-again label[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #605e5c;
}

.dont-show-again input[type="checkbox"][b-xfjca4ar1k] {
    cursor: pointer;
}

.wizard-progress[b-xfjca4ar1k] {
    color: #605e5c;
    font-size: 13px;
}

.wizard-actions[b-xfjca4ar1k] {
    display: flex;
    gap: 12px;
}

.btn-next[b-xfjca4ar1k] {
    background: #0078d4;
    color: white;
}

.btn-next:hover:not(:disabled)[b-xfjca4ar1k] {
    background: #106ebe;
}

.btn-cancel[b-xfjca4ar1k] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-xfjca4ar1k] {
    background: #e1dfdd;
}

/* ========================================
   COLUMN CHOOSER WIZARD
   ======================================== */
.column-chooser-actions[b-xfjca4ar1k] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.column-chooser-actions .btn-link[b-xfjca4ar1k] {
    background: transparent;
    border: none;
    color: #0078d4;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.column-chooser-actions .btn-link:hover[b-xfjca4ar1k] {
    background: #f3f2f1;
}

.column-chooser-actions .btn-link i[b-xfjca4ar1k] {
    font-size: 12px;
}

.column-chooser-list[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
}

.column-chooser-item[b-xfjca4ar1k] {
    padding: 10px 12px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.column-chooser-item:hover[b-xfjca4ar1k] {
    background: #e8f4fd;
    border-color: #c7e0f4;
    transform: translateX(2px);
}

[b-xfjca4ar1k] .column-chooser-item .e-checkbox-wrapper {
    width: 100%;
}

[b-xfjca4ar1k] .column-chooser-item .e-label {
    font-size: 14px;
    font-weight: 500;
    color: #323130;
}

/* ========================================
   NOTIFICATION DIALOG STYLING (Syncfusion SfDialog)
   Matches SystemModuleAdministration pattern
   ======================================== */
[b-xfjca4ar1k] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, var(--BEC-colorPaletteGreenBackground2) 0%, var(--BEC-colorPaletteGreenBackground1) 100%);
    border-bottom: none;
}

[b-xfjca4ar1k] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, var(--BEC-colorPaletteRedBackground2) 0%, var(--BEC-colorPaletteRedBackground1) 100%);
    border-bottom: none;
}

[b-xfjca4ar1k] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, var(--BEC-colorPaletteYellowBackground2) 0%, var(--BEC-colorPaletteYellowBackground1) 100%);
    border-bottom: none;
}

[b-xfjca4ar1k] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, var(--BEC-colorPaletteBlueForeground2) 0%, var(--BEC-colorBrandBackground) 100%);
    border-bottom: none;
}

.notification-header[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-header i[b-xfjca4ar1k] {
    font-size: 24px;
    color: white;
}

.notification-header span[b-xfjca4ar1k] {
    font-size: 16px;
    font-weight: var(--BEC-fontWeightBold);
    color: white;
}

.notification-content[b-xfjca4ar1k] {
    padding: 20px;
}

.notification-content p[b-xfjca4ar1k] {
    margin: 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.5;
    white-space: pre-line;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .form-row[b-xfjca4ar1k] {
        grid-template-columns: 1fr;
    }

    .sidebar-footer[b-xfjca4ar1k] {
        flex-wrap: wrap;
    }

    .btn[b-xfjca4ar1k] {
        min-width: auto;
        flex: 1;
    }

    .review-card .review-row[b-xfjca4ar1k] {
        flex-direction: column;
        gap: 4px;
    }

    .review-card .review-row .value[b-xfjca4ar1k] {
        text-align: left;
    }
}

/* ========================================
   RESPONSIVE DESIGN (Tablet & Mobile)
   Matches UserAdministration & Standard Layouts
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .erp-page-header[b-xfjca4ar1k] {
        padding: 12px 20px;
    }

    [b-xfjca4ar1k] .e-toolbar.e-control {
        top: 50px !important;
        padding: 2px 20px !important;
    }

    :global(.e-grid .e-gridheader)[b-xfjca4ar1k] {
        top: 100px !important;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {

    /* Page Header - Compact */
    .erp-page-header[b-xfjca4ar1k] {
        flex-direction: column;
        padding: 12px 16px;
        gap: 12px;
        min-height: auto;
    }

    .header-right[b-xfjca4ar1k] {
        width: 100%;
    }

    /* Stats - Full Width */
    .stats-container[b-xfjca4ar1k] {
        width: 100%;
        justify-content: space-around;
        background: var(--BEC-colorNeutralBackground2);
        padding: 8px;
        border-radius: 6px;
    }

    /* Toolbar - Mobile Optimized */
    [b-xfjca4ar1k] .e-toolbar.e-control {
        top: 110px !important;
        /* Pushed down by stacked header */
        margin: 0 16px !important;
        padding: 2px 8px !important;
        overflow-x: auto;
    }

    /* Grid Headers - Adjusted */
    :global(.e-grid .e-gridheader)[b-xfjca4ar1k] {
        top: 160px !important;
    }

    /* Grid Body - Adjust height for mobile header */
    [b-xfjca4ar1k] .e-grid {
        height: calc(100vh - 230px) !important;
    }

    /* Sidebars - Full Width on Mobile */
    [b-xfjca4ar1k] .assignment-wizard-sidebar {
        width: 95% !important;
    }

    /* Help Wizard - Full Width */
    [b-xfjca4ar1k] .help-wizard-sidebar {
        width: 100% !important;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {

    /* Icon-Only Toolbar to save space */
    [b-xfjca4ar1k] .e-toolbar .e-toolbar-item .e-tbar-btn-text {
        display: none;
    }

    /* Except for search box */
    [b-xfjca4ar1k] .e-toolbar .e-toolbar-item .e-tbar-btn-text.e-search {
        display: block;
    }

    /* Stats - Smaller Text */
    .stat-value[b-xfjca4ar1k] {
        font-size: 16px;
    }

    .stat-label[b-xfjca4ar1k] {
        font-size: 10px;
    }

    /* Sidebars - Full Screen */
    [b-xfjca4ar1k] .assignment-wizard-sidebar {
        width: 100% !important;
    }
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES (GOLD STANDARD)
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-xfjca4ar1k] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column List */
.column-list[b-xfjca4ar1k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-xfjca4ar1k] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-xfjca4ar1k] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-xfjca4ar1k] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
    text-align: left;
}

/* Select All/Deselect All Actions */
.column-actions[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.action-link[b-xfjca4ar1k] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-link:hover[b-xfjca4ar1k] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-xfjca4ar1k]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-xfjca4ar1k]::-webkit-scrollbar-track {
    background: transparent;
}

.column-list[b-xfjca4ar1k]::-webkit-scrollbar-thumb {
    background-color: var(--BEC-colorNeutralStroke1);
    border-radius: 3px;
}

.column-list[b-xfjca4ar1k]::-webkit-scrollbar-thumb:hover {
    background-color: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-help-icon-lg[b-xfjca4ar1k] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-xfjca4ar1k] {
    color: #e0e0e0;
}

.adm-dialog-header-flex[b-xfjca4ar1k] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-notification-icon[b-xfjca4ar1k] {
    font-size: 20px;
}

.adm-preline-text[b-xfjca4ar1k] {
    white-space: pre-line;
}
/* /Components/Pages/MainLayout/Administration/Administration/User/Assignments/UserCompanyAdministration.razor.rz.scp.css */
/* ========================================
   USER BRANCH ASSIGNMENT - OPTIMIZED CSS
   Clean | Efficient | No Duplications
   ======================================== */

/* ========================================
   PAGE LAYOUT
   ======================================== */
.erp-page-container[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

.erp-page-content[b-jlwbmd2lyy] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-jlwbmd2lyy] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-jlwbmd2lyy] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-jlwbmd2lyy] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-jlwbmd2lyy] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-jlwbmd2lyy] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-jlwbmd2lyy] {
    transform: scale(0.98);
}

.page-subtitle[b-jlwbmd2lyy] {
    display: none;
}

.header-right[b-jlwbmd2lyy] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-jlwbmd2lyy] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-jlwbmd2lyy] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-jlwbmd2lyy] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-jlwbmd2lyy] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR STYLING
   ======================================== */

[b-jlwbmd2lyy] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-jlwbmd2lyy] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-jlwbmd2lyy] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-jlwbmd2lyy] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-jlwbmd2lyy] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-jlwbmd2lyy] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-jlwbmd2lyy] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-jlwbmd2lyy] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-jlwbmd2lyy] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-jlwbmd2lyy] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-jlwbmd2lyy] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* SEARCH TEXTBOX IN TOOLBAR - MAXIMUM SPECIFICITY OVERRIDE */
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-textbox,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input-group,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
}

[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group .e-input,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 20px !important;
    height: 20px !important;
    box-sizing: border-box !important;
    border: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox:focus-within,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group:focus-within,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper:focus-within,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input-group-icon,
[b-jlwbmd2lyy] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group .e-input-group-icon {
    border: none !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   GRID BADGES
   ======================================== */
.badge[b-jlwbmd2lyy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
}

.badge-project[b-jlwbmd2lyy] {
    background: var(--BEC-colorStatusWarningBackground1);
    color: var(--BEC-colorStatusWarningForeground1);
}

.badge-branch[b-jlwbmd2lyy] {
    background: var(--BEC-colorStatusInfoBackground1);
    color: var(--BEC-colorStatusInfoForeground1);
}

.user-count-badge[b-jlwbmd2lyy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--BEC-colorBrandBackground1);
    color: var(--BEC-colorBrandForeground1);
    border-radius: 12px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.status-badge[b-jlwbmd2lyy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.status-active[b-jlwbmd2lyy] {
    background: var(--BEC-colorStatusSuccessBackground1);
    color: var(--BEC-colorStatusSuccessForeground1);
}

.status-inactive[b-jlwbmd2lyy] {
    background: var(--BEC-colorStatusDangerBackground1);
    color: var(--BEC-colorStatusDangerForeground1);
}

.rtl-text[b-jlwbmd2lyy] {
    direction: rtl;
    text-align: right;
    font-family: 'Segoe UI', 'Arial', sans-serif;
}

/* ========================================
   GRID STYLING - 100% IDENTICAL TO SYSTEM MODULES
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-jlwbmd2lyy] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-jlwbmd2lyy] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-jlwbmd2lyy] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-jlwbmd2lyy] .e-grid .e-row.e-selectionbackground,
[b-jlwbmd2lyy] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-jlwbmd2lyy] .e-grid .e-row.e-selectionbackground:hover,
[b-jlwbmd2lyy] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-jlwbmd2lyy] .e-grid .e-row.e-selectionbackground td:first-child,
[b-jlwbmd2lyy] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-jlwbmd2lyy] .e-grid .e-row {
    height: 32px !important;
}

[b-jlwbmd2lyy] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-jlwbmd2lyy] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid Row Hover */
[b-jlwbmd2lyy] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* ========================================
   SIDEBAR WIZARD (40% Width)
   ======================================== */
[b-jlwbmd2lyy] .assignment-wizard-sidebar.e-sidebar {
    height: 100vh !important;
    max-height: 100vh !important;
    background: white;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

/* Responsive Width - Matches ProfileAdministration (Desktop default: 40%) */
@media (max-width: 1366px) {

    /* Laptop */
    [b-jlwbmd2lyy] .assignment-wizard-sidebar.e-sidebar {
        width: 45% !important;
    }
}

@media (max-width: 1024px) {

    /* Tablet */
    [b-jlwbmd2lyy] .assignment-wizard-sidebar.e-sidebar {
        width: 60% !important;
    }
}

@media (max-width: 768px) {

    /* Mobile */
    [b-jlwbmd2lyy] .assignment-wizard-sidebar.e-sidebar {
        width: 90% !important;
    }

    /* Reduce padding on mobile */
    .sidebar-header[b-jlwbmd2lyy],
    .sidebar-footer[b-jlwbmd2lyy] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-jlwbmd2lyy] {
        padding: 16px 20px;
    }

    .sidebar-stepper[b-jlwbmd2lyy] {
        padding: 12px 20px;
    }
}

.sidebar-header[b-jlwbmd2lyy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-jlwbmd2lyy] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-jlwbmd2lyy] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-jlwbmd2lyy] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-jlwbmd2lyy] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

/* ========================================
   STEPPER (Syncfusion) - Matches ProfileAdministration
   ======================================== */
.sidebar-stepper[b-jlwbmd2lyy] {
    padding: 12px 24px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
    position: sticky;
    top: 56px;
    z-index: 99;
}

/* Syncfusion Stepper Overrides - Increase specificity instead of !important */
[b-jlwbmd2lyy] .sidebar-stepper-clean.e-stepper {
    max-width: 100%;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-stepper-steps {
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-step-container {
    padding: 6px 12px;
    border-radius: 20px;
    min-height: auto;
    transition: all 0.2s ease;
    flex: 1;
    max-width: 150px;
    justify-content: center;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-step-label-container {
    font-size: 12px;
    font-weight: 500;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-icons {
    font-size: 14px;
    margin-right: 6px;
}

/* ⭐ CRITICAL: Remove circle around icon */
[b-jlwbmd2lyy] .sidebar-stepper-clean .e-step-label-container .e-icons::before {
    background: none;
    border: none;
    box-shadow: none;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-step-inprogress .e-step-label-container .e-icons {
    background: none;
    border-radius: 0;
    padding: 0;
}

/* Hide subtitle */
[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-step-text-container {
    display: none;
}

/* Hide connector line */
[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-stepper-progressbar {
    display: none;
}

/* Stepper States - Higher specificity */
[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-step-notstarted {
    background: transparent;
    border: 1.5px solid #d1d1d1;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-step-notstarted .e-step-label-container {
    color: #8a8886;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-step-inprogress {
    background: #0078d4;
    border: 1.5px solid #0078d4;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-step-inprogress .e-step-label-container {
    color: white;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-step-completed {
    background: #107c10;
    border: 1.5px solid #107c10;
}

[b-jlwbmd2lyy] .sidebar-stepper-clean .e-stepper .e-step-completed .e-step-label-container {
    color: white;
    font-weight: 600;
}

/* ========================================
   WIZARD STEPS
   ======================================== */
.sidebar-step-content[b-jlwbmd2lyy] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

.wizard-step[b-jlwbmd2lyy] {
    max-width: 100%;
}

.step-title[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
}

.step-title i[b-jlwbmd2lyy] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-jlwbmd2lyy] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
}

/* ========================================
   FORM ELEMENTS (Consolidated)
   ======================================== */
.form-group[b-jlwbmd2lyy] {
    margin-bottom: 20px;
}

.form-label[b-jlwbmd2lyy] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-jlwbmd2lyy]::after {
    content: " *";
    color: #d13438;
}

.field-hint[b-jlwbmd2lyy] {
    display: block;
    font-size: 11px;
    color: #8a8886;
    margin-top: 4px;
    font-style: italic;
}

.error-message[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #d13438;
    margin-top: 6px;
}

.error-message-box[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background-color: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    margin-top: 16px;
}

.error-message-box i[b-jlwbmd2lyy] {
    color: #d13438;
    font-size: 18px;
    flex-shrink: 0;
}

.error-message-box span[b-jlwbmd2lyy] {
    color: #d13438;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

[b-jlwbmd2lyy] .uppercase-input input {
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
    font-weight: 500;
}

[b-jlwbmd2lyy] .multiline-textbox textarea {
    min-height: 70px;
    resize: vertical;
}

[b-jlwbmd2lyy] .rtl-text input {
    direction: rtl;
    text-align: right;
}

/* ========================================
   SELECTED ITEM CARD
   ======================================== */
.selected-item-card[b-jlwbmd2lyy] {
    margin-top: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fafafa;
}

.selected-item-card .card-header[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f3f2f1;
    border-bottom: 1px solid #e0e0e0;
    font-size: 16px;
    font-weight: 600;
    color: #323130;
}

.selected-item-card .card-header i[b-jlwbmd2lyy] {
    color: #0078d4;
    font-size: 18px;
}

.selected-item-card .card-body[b-jlwbmd2lyy] {
    padding: 16px;
}

.info-row[b-jlwbmd2lyy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #edebe9;
}

.info-row:last-child[b-jlwbmd2lyy] {
    border-bottom: none;
}

.info-row .label[b-jlwbmd2lyy] {
    font-size: 13px;
    color: #8a8886;
    font-weight: 500;
}

.info-row .value[b-jlwbmd2lyy] {
    font-size: 13px;
    color: #323130;
    font-weight: 600;
}

/* ========================================
   USER SELECTION (Optimized ListBox)
   ======================================== */
.user-selection-container[b-jlwbmd2lyy] {
    margin-top: 20px;
}

.selection-toolbar[b-jlwbmd2lyy] {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.search-box[b-jlwbmd2lyy] {
    flex: 1;
    min-width: 250px;
}

/* ⭐ MULTI-SELECT CHIP STYLING (Syncfusion Box Mode) */
[b-jlwbmd2lyy] .search-box .e-multi-select-wrapper {
    border: 2px solid #d1d1d1;
    border-radius: 6px;
    padding: 4px 8px;
    transition: border-color 0.2s ease;
}

[b-jlwbmd2lyy] .search-box .e-multi-select-wrapper:hover {
    border-color: #0078d4;
}

[b-jlwbmd2lyy] .search-box .e-multi-select-wrapper.e-input-focus {
    border-color: #0078d4;
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
}

/* Chip styling */
[b-jlwbmd2lyy] .search-box .e-chips {
    background: linear-gradient(135deg, #0078d4 0%, #106ebe 100%);
    color: white;
    border-radius: 16px;
    padding: 4px 12px;
    margin: 2px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

[b-jlwbmd2lyy] .search-box .e-chips:hover {
    background: linear-gradient(135deg, #106ebe 0%, #005a9e 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 120, 212, 0.3);
}

/* Chip close button */
[b-jlwbmd2lyy] .search-box .e-chips .e-chips-close::before {
    color: white;
    font-size: 12px;
    opacity: 0.9;
}

[b-jlwbmd2lyy] .search-box .e-chips .e-chips-close:hover::before {
    opacity: 1;
}

/* Input field inside MultiSelect */
[b-jlwbmd2lyy] .search-box .e-multi-select-wrapper .e-input-group input {
    font-size: 14px;
    padding: 6px 8px;
}

.action-buttons[b-jlwbmd2lyy] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.action-btn[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid #0078d4;
    border-radius: 4px;
    background: white;
    color: #0078d4;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover:not(:disabled)[b-jlwbmd2lyy] {
    background: #0078d4;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 120, 212, 0.2);
}

.action-btn:disabled[b-jlwbmd2lyy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-btn i[b-jlwbmd2lyy] {
    font-size: 14px;
}

.selection-info[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #e6f2ff 0%, #cce5ff 100%);
    border: 1px solid #0078d4;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #004578;
}

.selection-info i[b-jlwbmd2lyy] {
    font-size: 20px;
    color: #0078d4;
}

.selection-info strong[b-jlwbmd2lyy] {
    color: #0078d4;
    font-weight: 600;
}

.listbox-container[b-jlwbmd2lyy] {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ⭐ SYNCFUSION LISTBOX - SINGLE LINE LAYOUT (Official Pattern) */

/* List item - Fixed height with proper structure */
[b-jlwbmd2lyy] .e-listbox .e-list-item {
    height: 44px !important;
    padding: 0 16px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #f3f2f1 !important;
    border-radius: 0 !important;
    transition: all 0.2s ease;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

[b-jlwbmd2lyy] .e-listbox .e-list-item:last-child {
    border-bottom: none !important;
}

[b-jlwbmd2lyy] .e-listbox .e-list-item:hover {
    background-color: #f9f9f9 !important;
}

[b-jlwbmd2lyy] .e-listbox .e-list-item.e-active {
    background-color: #e6f7ff !important;
    border-left: 3px solid #0078d4 !important;
    padding-left: 13px !important;
}

/* ⭐ CRITICAL: Checkbox wrapper - Position inline at vertical center */
[b-jlwbmd2lyy] .e-listbox .e-list-item .e-checkbox-wrapper {
    position: relative !important;
    margin: 0 !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

/* ⭐ CRITICAL: List text container - Must constrain width for ellipsis to work */
[b-jlwbmd2lyy] .e-listbox .e-list-item .e-list-text {
    display: block !important;
    width: 100% !important;
    flex: 1 !important;
    overflow: hidden !important;
    padding-right: 16px !important;
}

/* User item wrapper - Single line flex layout with ellipsis */
.user-item[b-jlwbmd2lyy] {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    height: 44px !important;
    line-height: 44px !important;
}

.user-name[b-jlwbmd2lyy] {
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    line-height: normal !important;
}

.user-separator[b-jlwbmd2lyy] {
    font-size: 14px;
    color: #d0d0d0;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    line-height: normal !important;
}

.user-email[b-jlwbmd2lyy] {
    font-size: 13px;
    color: #8a8886;
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    line-height: normal !important;
}

.no-results[b-jlwbmd2lyy] {
    text-align: center;
    padding: 50px 20px;
    color: #8a8886;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    border-radius: 8px;
    margin-top: 16px;
}

.no-results i[b-jlwbmd2lyy] {
    font-size: 56px;
    color: #d0d0d0;
    margin-bottom: 16px;
    display: block;
}

.no-results p[b-jlwbmd2lyy] {
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

.no-results strong[b-jlwbmd2lyy] {
    color: #323130;
    font-weight: 600;
}

/* ========================================
   REVIEW SECTION
   ======================================== */
.review-section[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.review-card[b-jlwbmd2lyy] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.review-header[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f3f2f1;
    border-bottom: 1px solid #e0e0e0;
    font-size: 15px;
    font-weight: 600;
    color: #323130;
}

.review-header i[b-jlwbmd2lyy] {
    color: #0078d4;
    font-size: 16px;
}

.review-body[b-jlwbmd2lyy] {
    padding: 16px;
}

.review-row[b-jlwbmd2lyy] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #edebe9;
}

.review-row:last-child[b-jlwbmd2lyy] {
    border-bottom: none;
}

.review-row .label[b-jlwbmd2lyy] {
    font-size: 13px;
    color: #8a8886;
    font-weight: 500;
}

.review-row .value[b-jlwbmd2lyy] {
    font-size: 13px;
    color: #323130;
    font-weight: 600;
}

.user-list[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.user-review-item[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.user-review-item i[b-jlwbmd2lyy] {
    font-size: 14px;
    color: #0078d4;
}

.user-review-item .user-info[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-review-item .user-name[b-jlwbmd2lyy] {
    font-size: 13px;
    font-weight: 500;
    color: #323130;
}

.user-review-item .user-email[b-jlwbmd2lyy] {
    font-size: 11px;
    color: #8a8886;
}

.no-data[b-jlwbmd2lyy] {
    text-align: center;
    color: #8a8886;
    font-size: 13px;
    padding: 20px;
}

/* ========================================
   FOOTER BUTTONS (Consolidated)
   ======================================== */
.sidebar-footer[b-jlwbmd2lyy] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    bottom: 0;
    z-index: 100;
}

.btn[b-jlwbmd2lyy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-jlwbmd2lyy] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-jlwbmd2lyy] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-jlwbmd2lyy] {
    background: #e1dfdd;
}

.btn-primary[b-jlwbmd2lyy] {
    background: #0078d4;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-jlwbmd2lyy] {
    background: #106ebe;
}

.btn-success[b-jlwbmd2lyy] {
    background: #107c10;
    color: white;
}

.btn-success:hover:not(:disabled)[b-jlwbmd2lyy] {
    background: #0b5a0b;
    box-shadow: 0 2px 8px rgba(16, 124, 16, 0.3);
}

.btn i[b-jlwbmd2lyy] {
    font-size: 14px;
}

.spinner-border[b-jlwbmd2lyy] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-jlwbmd2lyy 0.75s linear infinite;
}

.spinner-border-sm[b-jlwbmd2lyy] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.15em;
}

@keyframes spinner-border-b-jlwbmd2lyy {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-jlwbmd2lyy] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-jlwbmd2lyy] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-jlwbmd2lyy] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-jlwbmd2lyy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-jlwbmd2lyy] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-jlwbmd2lyy] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--BEC-colorNeutralForeground3);
}

.sidebar-close-btn:hover[b-jlwbmd2lyy] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-jlwbmd2lyy] {
    font-size: 18px;
}

.sidebar-content[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.wizard-step[b-jlwbmd2lyy] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-jlwbmd2lyy] {
    margin-bottom: 24px;
    animation: fadeInUp-b-jlwbmd2lyy 0.6s ease;
}

@keyframes fadeInUp-b-jlwbmd2lyy {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wizard-step .step-title[b-jlwbmd2lyy] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.wizard-step .step-description[b-jlwbmd2lyy] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Form Styling for Wizard */
.sidebar-step-content[b-jlwbmd2lyy] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

.sidebar-step-content .wizard-step[b-jlwbmd2lyy] {
    text-align: left;
    padding: 0;
}

.sidebar-step-content .step-title[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
}

.sidebar-step-content .step-title i[b-jlwbmd2lyy] {
    color: #0078d4;
    font-size: 20px;
}

.sidebar-step-content .step-description[b-jlwbmd2lyy] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
}

/* Info Box */
.info-box[b-jlwbmd2lyy] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-jlwbmd2lyy] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

.info-box div[b-jlwbmd2lyy] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
}

.info-box strong[b-jlwbmd2lyy] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* Features List */
.features-list[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.feature-item[b-jlwbmd2lyy] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-jlwbmd2lyy] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-jlwbmd2lyy] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-jlwbmd2lyy] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-jlwbmd2lyy] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.example-step[b-jlwbmd2lyy] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-jlwbmd2lyy] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.example-step ul[b-jlwbmd2lyy] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-jlwbmd2lyy] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.use-case[b-jlwbmd2lyy] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-jlwbmd2lyy] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-jlwbmd2lyy] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-jlwbmd2lyy] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-jlwbmd2lyy] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-jlwbmd2lyy] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 12px 0;
    text-align: left;
}

.warning-box i[b-jlwbmd2lyy] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-jlwbmd2lyy] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-jlwbmd2lyy] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-jlwbmd2lyy] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-jlwbmd2lyy] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.wizard-actions[b-jlwbmd2lyy] {
    display: flex;
    gap: 12px;
}

/* ========================================
   RESPONSIVE DESIGN (Tablet & Mobile)
   Matches UserAdministration & Standard Layouts
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .erp-page-header[b-jlwbmd2lyy] {
        padding: 12px 20px;
    }

    [b-jlwbmd2lyy] .e-toolbar.e-control {
        top: 50px !important;
        padding: 2px 20px !important;
    }

    :global(.e-grid .e-gridheader)[b-jlwbmd2lyy] {
        top: 100px !important;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {

    /* Page Header - Compact */
    .erp-page-header[b-jlwbmd2lyy] {
        flex-direction: column;
        padding: 12px 16px;
        gap: 12px;
        min-height: auto;
    }

    .header-right[b-jlwbmd2lyy] {
        width: 100%;
    }

    /* Stats - Full Width */
    .stats-container[b-jlwbmd2lyy] {
        width: 100%;
        justify-content: space-around;
        background: var(--BEC-colorNeutralBackground2);
        padding: 8px;
        border-radius: 6px;
    }

    /* Toolbar - Mobile Optimized */
    [b-jlwbmd2lyy] .e-toolbar.e-control {
        top: 110px !important;
        /* Pushed down by stacked header */
        margin: 0 16px !important;
        padding: 2px 8px !important;
        overflow-x: auto;
    }

    /* Grid Headers - Adjusted */
    :global(.e-grid .e-gridheader)[b-jlwbmd2lyy] {
        top: 160px !important;
    }

    /* Grid Body - Adjust height for mobile header */
    [b-jlwbmd2lyy] .e-grid {
        height: calc(100vh - 230px) !important;
    }

    /* Sidebars - Full Width on Mobile */
    [b-jlwbmd2lyy] .assignment-wizard-sidebar {
        width: 95% !important;
    }

    /* Help Wizard - Full Width */
    [b-jlwbmd2lyy] .help-wizard-sidebar {
        width: 100% !important;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {

    /* Icon-Only Toolbar to save space */
    [b-jlwbmd2lyy] .e-toolbar .e-toolbar-item .e-tbar-btn-text {
        display: none;
    }

    /* Except for search box */
    [b-jlwbmd2lyy] .e-toolbar .e-toolbar-item .e-tbar-btn-text.e-search {
        display: block;
    }

    /* Stats - Smaller Text */
    .stat-value[b-jlwbmd2lyy] {
        font-size: 16px;
    }

    .stat-label[b-jlwbmd2lyy] {
        font-size: 10px;
    }

    /* Sidebars - Full Screen */
    [b-jlwbmd2lyy] .assignment-wizard-sidebar {
        width: 100% !important;
    }
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES (GOLD STANDARD)
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-jlwbmd2lyy] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column List */
.column-list[b-jlwbmd2lyy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-jlwbmd2lyy] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-jlwbmd2lyy] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-jlwbmd2lyy] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
    text-align: left;
}

/* Select All/Deselect All Actions */
.column-actions[b-jlwbmd2lyy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.action-link[b-jlwbmd2lyy] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-link:hover[b-jlwbmd2lyy] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-jlwbmd2lyy]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-jlwbmd2lyy]::-webkit-scrollbar-track {
    background: transparent;
}

.column-list[b-jlwbmd2lyy]::-webkit-scrollbar-thumb {
    background-color: var(--BEC-colorNeutralStroke1);
    border-radius: 3px;
}

.column-list[b-jlwbmd2lyy]::-webkit-scrollbar-thumb:hover {
    background-color: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-text-brand[b-jlwbmd2lyy] {
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-jlwbmd2lyy] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/User/Compliance/UserConsentAdministration.razor.rz.scp.css */
/* ========================================
   USER CONSENT ADMINISTRATION - STANDARDIZED PAGE STYLES
   Uses same styling pattern as System Modules page
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-40scv0mve3] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   Same as System Modules page
   ======================================== */
.erp-page-header[b-40scv0mve3] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-40scv0mve3] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-40scv0mve3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-40scv0mve3] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-40scv0mve3] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-40scv0mve3] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-40scv0mve3] {
    transform: scale(0.98);
}

.page-subtitle[b-40scv0mve3] {
    display: none;
}

.header-right[b-40scv0mve3] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER
   ======================================== */
.stats-container[b-40scv0mve3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-40scv0mve3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 60px;
}

.stat-value[b-40scv0mve3] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1;
}

.stat-label[b-40scv0mve3] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider[b-40scv0mve3] {
    width: 1px;
    height: 20px;
    background: var(--BEC-colorNeutralStroke1);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-40scv0mve3] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-40scv0mve3] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-40scv0mve3] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-40scv0mve3] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-40scv0mve3] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-40scv0mve3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-40scv0mve3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-40scv0mve3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-40scv0mve3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-40scv0mve3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-40scv0mve3] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-40scv0mve3] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-40scv0mve3] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-40scv0mve3] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-40scv0mve3] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-40scv0mve3] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-40scv0mve3] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-40scv0mve3] .e-toolbar .e-textbox.e-input-group,
[b-40scv0mve3] .e-toolbar .e-input-group.e-control-wrapper,
[b-40scv0mve3] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-40scv0mve3] .e-toolbar .e-textbox.e-input-group .e-input,
[b-40scv0mve3] .e-toolbar .e-input-group .e-input,
[b-40scv0mve3] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-40scv0mve3] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-40scv0mve3] .e-toolbar .e-input-group:focus-within,
[b-40scv0mve3] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-40scv0mve3] .e-toolbar .e-textbox .e-input-group-icon,
[b-40scv0mve3] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-40scv0mve3] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-40scv0mve3] .e-toolbar .e-input-group .e-input::placeholder,
[b-40scv0mve3] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   TOOLBAR OVERFLOW POPUP - POSITION FIX
   ======================================== */
[b-40scv0mve3] .e-toolbar-pop.e-popup {
    top: 58px !important;
    margin-top: 0 !important;
}

[b-40scv0mve3] .e-toolbar-pop.e-popup.e-popup-open {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-40scv0mve3] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-40scv0mve3] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-40scv0mve3] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-40scv0mve3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-40scv0mve3] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-40scv0mve3] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-40scv0mve3] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-40scv0mve3] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-40scv0mve3] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-40scv0mve3] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
    padding: 24px;
    overflow-y: auto;
}

.sidebar-step-content[b-40scv0mve3] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-40scv0mve3] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-40scv0mve3] {
    margin-bottom: 24px;
    animation: fadeInUp-b-40scv0mve3 0.6s ease;
}

.step-title[b-40scv0mve3] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-40scv0mve3] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-40scv0mve3] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-40scv0mve3] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-40scv0mve3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-40scv0mve3] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-40scv0mve3] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-40scv0mve3] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-40scv0mve3] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-40scv0mve3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-40scv0mve3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-40scv0mve3] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-40scv0mve3] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-40scv0mve3] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-40scv0mve3] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-40scv0mve3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-40scv0mve3] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-40scv0mve3] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-40scv0mve3] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-40scv0mve3] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-40scv0mve3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-40scv0mve3] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-40scv0mve3] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-40scv0mve3] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-40scv0mve3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-40scv0mve3] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-40scv0mve3] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-40scv0mve3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-40scv0mve3] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-40scv0mve3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-40scv0mve3] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-40scv0mve3],
.btn-secondary[b-40scv0mve3] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-40scv0mve3],
.btn-secondary:hover:not(:disabled)[b-40scv0mve3] {
    background: #e1dfdd;
}

.btn-next[b-40scv0mve3] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-40scv0mve3] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-40scv0mve3] {
    background: #10b981;
    color: white;
}

.btn-success:hover:not(:disabled)[b-40scv0mve3] {
    background: #059669;
}

/* Animation */
@keyframes fadeInUp-b-40scv0mve3 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-40scv0mve3] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-40scv0mve3] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-40scv0mve3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-40scv0mve3] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-40scv0mve3] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-40scv0mve3] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-40scv0mve3] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-40scv0mve3] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-40scv0mve3] {
    animation: fadeInUp-b-40scv0mve3 0.3s ease-out;
}

.step-title[b-40scv0mve3] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-40scv0mve3] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-40scv0mve3] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-40scv0mve3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-40scv0mve3]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-40scv0mve3]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-40scv0mve3]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-40scv0mve3]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-40scv0mve3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-40scv0mve3] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-40scv0mve3] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-40scv0mve3] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-40scv0mve3] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-40scv0mve3] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-40scv0mve3] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-40scv0mve3] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-40scv0mve3] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-40scv0mve3] {
    background: #f3f2f1;
}

/* ========================================
   LOADING AND ERROR STATES
   ======================================== */
.loading-container[b-40scv0mve3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-40scv0mve3] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-40scv0mve3 1s linear infinite;
}

@keyframes spin-b-40scv0mve3 {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-40scv0mve3] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

.error-container[b-40scv0mve3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    padding: 40px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
}

.error-container i[b-40scv0mve3] {
    font-size: 48px;
    color: var(--BEC-colorError);
}

.error-container p[b-40scv0mve3] {
    color: var(--BEC-colorNeutralForeground1);
    font-size: 14px;
    margin: 0;
    text-align: center;
}

/* ========================================
   CONTENT PLACEHOLDER
   ======================================== */
.content-placeholder[b-40scv0mve3] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 400px;
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
    text-align: center;
    padding: 40px;
}

.placeholder-icon[b-40scv0mve3] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.placeholder-title[b-40scv0mve3] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.placeholder-message[b-40scv0mve3] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-text-success[b-40scv0mve3] {
    color: var(--BEC-colorSuccess);
}

.adm-text-error[b-40scv0mve3] {
    color: var(--BEC-colorError);
}

.adm-help-icon-lg[b-40scv0mve3] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-40scv0mve3] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/User/Management/UserAdministration.razor.rz.scp.css */
/* ========================================
   USER ADMINISTRATION - 100% SYNCFUSION NATIVE RESPONSIVE
   
   FEATURES:
   ✅ 100% Syncfusion EnableAdaptiveUI (automatic mobile/tablet optimization)
   ✅ 100% Syncfusion HideAtMedia (responsive column hiding)
   ✅ 100% Syncfusion RowRenderingMode (vertical layout on mobile)
   ✅ BEC Theme variables only (no hardcoded values)
   ✅ No inline styles (all CSS in this file)
   ✅ NO custom media queries (all responsive via Syncfusion)
   
   RESPONSIVE BEHAVIOR:
   Handled 100% by Syncfusion EnableAdaptiveUI + HideAtMedia
   No custom @media queries needed - Syncfusion handles everything
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-4hr5k2elbg] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-4hr5k2elbg] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-4hr5k2elbg] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-4hr5k2elbg] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-4hr5k2elbg] {
    transform: scale(0.98);
}

.page-subtitle[b-4hr5k2elbg] {
    display: none;
}

.header-right[b-4hr5k2elbg] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-4hr5k2elbg] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-4hr5k2elbg] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-4hr5k2elbg] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-4hr5k2elbg] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR - MICROSOFT STYLE (MATCHING ORGANIZATION ADMINISTRATION)
   ======================================== */
[b-4hr5k2elbg] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-4hr5k2elbg] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-4hr5k2elbg] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-4hr5k2elbg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-4hr5k2elbg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-4hr5k2elbg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-4hr5k2elbg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-4hr5k2elbg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-4hr5k2elbg] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-4hr5k2elbg] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* SEARCH TEXTBOX IN TOOLBAR - MAXIMUM SPECIFICITY OVERRIDE */
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-textbox,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input-group,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
}

[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group .e-input,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 22px !important;
    height: 22px !important;
    box-sizing: border-box !important;
    border: none !important;
}

[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox:focus-within,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group:focus-within,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper:focus-within,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input-group-icon,
[b-4hr5k2elbg] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
}

/* ========================================
   TOOLBAR OVERFLOW POPUP - POSITION FIX
   Positions overflow menu directly below toolbar
   ======================================== */
[b-4hr5k2elbg] .e-toolbar-pop.e-popup {
    top: 58px !important;
    /* Match toolbar sticky position */
    margin-top: 0 !important;
}

[b-4hr5k2elbg] .e-toolbar-pop.e-popup.e-popup-open {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* ========================================
   PAGE CONTENT - Grid Container
   ======================================== */
.erp-page-content[b-4hr5k2elbg] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    overflow: visible;
}

/* ========================================
   GRID VIRTUAL SCROLLING - BUTTER SMOOTH PERFORMANCE 🚀
   Optimized for 5K+ records with hardware acceleration
   ======================================== */

/* Main grid container - Hardware acceleration */
[b-4hr5k2elbg] .user-admin-grid {
    will-change: scroll-position;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    contain: layout style paint;
    isolation: isolate;
}

/* Grid content area - Syncfusion official scrolling solution */
/* Note: Overflow is now handled in the Grid Styling section below */

/* Virtual scroll placeholder - Ensure smooth rendering */
[b-4hr5k2elbg] .user-admin-grid .e-virtualtrack {
    will-change: height;
    contain: layout;
}

/* ========================================
   GRID STYLING - 100% IDENTICAL TO SYSTEM MODULES
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-4hr5k2elbg] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-4hr5k2elbg] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-4hr5k2elbg] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-4hr5k2elbg] .e-grid .e-row.e-selectionbackground,
[b-4hr5k2elbg] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-4hr5k2elbg] .e-grid .e-row.e-selectionbackground:hover,
[b-4hr5k2elbg] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-4hr5k2elbg] .e-grid .e-row.e-selectionbackground td:first-child,
[b-4hr5k2elbg] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-4hr5k2elbg] .e-grid .e-row {
    height: 32px !important;
}

[b-4hr5k2elbg] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-4hr5k2elbg] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid Row Hover */
[b-4hr5k2elbg] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Custom Scrollbar Styling - Professional look */
[b-4hr5k2elbg] .user-admin-grid .e-gridcontent::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[b-4hr5k2elbg] .user-admin-grid .e-gridcontent::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 6px;
    margin: 2px;
}

[b-4hr5k2elbg] .user-admin-grid .e-gridcontent::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2);
    border-radius: 6px;
    border: 2px solid var(--BEC-colorNeutralBackground2);
    transition: background 0.2s ease;
}

[b-4hr5k2elbg] .user-admin-grid .e-gridcontent::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorBrandBackground);
}

[b-4hr5k2elbg] .user-admin-grid .e-gridcontent::-webkit-scrollbar-thumb:active {
    background: var(--BEC-colorBrandBackgroundPressed);
}

/* Horizontal scrollbar */
[b-4hr5k2elbg] .user-admin-grid .e-gridcontent::-webkit-scrollbar-corner {
    background: var(--BEC-colorNeutralBackground2);
}

/* Firefox scrollbar */
[b-4hr5k2elbg] .user-admin-grid .e-gridcontent {
    scrollbar-width: thin;
    scrollbar-color: var(--BEC-colorNeutralStroke2) var(--BEC-colorNeutralBackground2);
}

/* Prevent flickering during scroll */
[b-4hr5k2elbg] .user-admin-grid .e-content {
    position: relative;
    overflow: hidden;
}

/* Smooth selection highlight */
[b-4hr5k2elbg] .user-admin-grid .e-selectionbackground {
    transition: background-color 0.15s ease;
}

/* Loading indicator for virtual scrolling */
[b-4hr5k2elbg] .user-admin-grid .e-spinner-pane {
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* ========================================
   FILTERED COLUMN INDICATOR
   Blue header text when column is filtered
   ======================================== */

/* Change filter icon color to blue when active */
[b-4hr5k2elbg] .user-admin-grid .e-headercell .e-filtered::before {
    color: var(--BEC-colorBrandForeground1) !important;
}

/* Change header TEXT color to blue when column is filtered */
[b-4hr5k2elbg] .user-admin-grid .e-headercell .e-headercelldiv {
    transition: color 0.2s ease;
}

[b-4hr5k2elbg] .user-admin-grid .e-filtered~.e-headercelldiv,
[b-4hr5k2elbg] .user-admin-grid .e-filtered~.e-headertext,
[b-4hr5k2elbg] .user-admin-grid .e-headercell:has(.e-filtered) .e-headercelldiv,
[b-4hr5k2elbg] .user-admin-grid .e-headercell:has(.e-filtered) .e-headertext {
    color: var(--BEC-colorBrandForeground1) !important;
    font-weight: 600 !important;
}

/* Also highlight the sort icon if column is both filtered and sorted */
[b-4hr5k2elbg] .user-admin-grid .e-headercell:has(.e-filtered) .e-sortfilterdiv .e-icon-ascending,
[b-4hr5k2elbg] .user-admin-grid .e-headercell:has(.e-filtered) .e-sortfilterdiv .e-icon-descending {
    color: var(--BEC-colorBrandForeground1) !important;
}

/* ========================================
   UNIFIED LOADING SPINNER - Tailwind3 Style
   Used across entire page (grid loading + modal loading)
   100% Syncfusion SfSpinner component
   ======================================== */
[b-4hr5k2elbg] .e-spinner-pane.e-spin-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.97) !important;
    z-index: 50 !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
}

/* Spinner Label */
[b-4hr5k2elbg] .e-spinner-pane .e-spin-label {
    font-size: 18px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    margin-top: 20px !important;
}

/* Tailwind3 Spinner Customization */
[b-4hr5k2elbg] .e-spinner-pane .e-spinner-inner {
    border-color: rgba(0, 120, 212, 0.1) !important;
    border-top-color: var(--BEC-colorBrandBackground) !important;
}

/* ========================================
   RTL TEXT (for Arabic names)
   ======================================== */
.rtl-text[b-4hr5k2elbg] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

/* ========================================
   USER TYPE STYLING (No inline styles)
   ======================================== */
.user-type-employee[b-4hr5k2elbg] {
    color: #0078d4;
    font-weight: 500;
}

.user-type-external[b-4hr5k2elbg] {
    color: #ff8c00;
    font-weight: 500;
}

/* ========================================
   STATUS BADGE (for IsActive column)
   Text-only, no background or icons
   ======================================== */
.status-badge[b-4hr5k2elbg] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.status-active[b-4hr5k2elbg] {
    color: #10b981;
    /* Green for active */
}

.status-inactive[b-4hr5k2elbg] {
    color: #dc2626;
    /* Red for inactive */
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   Larger size for better visibility with viewport constraints
   ======================================== */
[b-4hr5k2elbg] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    /* Never exceed 90% viewport width */
    height: auto !important;
    max-height: 80vh !important;
    /* Never exceed 80% viewport height */
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Excel Filter Checkbox List Area - More visible items */
[b-4hr5k2elbg] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    /* Account for search box, header, footer */
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* Excel Filter Search Box */
[b-4hr5k2elbg] .e-grid .e-excelfilter .e-searchbox {
    margin-bottom: 8px !important;
}

/* Excel Filter Dialog Content */
[b-4hr5k2elbg] .e-grid .e-excelfilter .e-dlg-content {
    padding: 16px !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   Make it a compact dialog instead of full-screen
   ======================================== */
[b-4hr5k2elbg] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    /* Responsive height constraint */
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Column Chooser Dialog Header */
[b-4hr5k2elbg] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Content */
[b-4hr5k2elbg] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Footer (OK button) */
[b-4hr5k2elbg] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ========================================
   RESPONSIVE DESIGN - 100% SYNCFUSION NATIVE
   All responsive behavior handled by:
   - EnableAdaptiveUI (Grid)
   - HideAtMedia (Columns)  
   - RowRenderingMode (Mobile vertical layout)
   NO custom media queries - Syncfusion handles everything
   ======================================== */

/* ========================================
   CONFIRMATION DIALOGS - Minimal Clean Style
   Matching UserAdministration aesthetic
   ======================================== */
.confirmation-dialog-content[b-4hr5k2elbg] {
    padding: var(--BEC-spacingVerticalL);
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingVerticalL);
}

.confirmation-message[b-4hr5k2elbg] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.confirmation-count[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightBold);
}

.confirmation-warning[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingVerticalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-left: 3px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    line-height: 1.5;
}

.confirmation-warning i[b-4hr5k2elbg] {
    font-size: 16px;
    color: var(--BEC-colorBrandForeground1);
    flex-shrink: 0;
}

/* ========================================
   RESET PASSWORD MODAL V2 - 100% SYNCFUSION COMPONENTS
   Clean card-based design with proper visual hierarchy
   ======================================== */

/* Main Container */
.reset-password-container[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingVerticalL);
    padding: var(--BEC-spacingVerticalM);
}

/* ===== SYNCFUSION CARD BASE STYLES ===== */
.sf-card[b-4hr5k2elbg] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow2);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.sf-card:hover[b-4hr5k2elbg] {
    box-shadow: var(--BEC-shadow4);
}

/* Card Header */
.sf-card-header[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.sf-card-header i[b-4hr5k2elbg] {
    font-size: 20px;
    color: var(--BEC-colorBrandForeground1);
}

.sf-card-header h5[b-4hr5k2elbg] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

/* Card Body */
.sf-card-body[b-4hr5k2elbg] {
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalL);
}

.sf-card-body p[b-4hr5k2elbg] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.5;
}

/* ===== PRIMARY HEADER CARD (Blue gradient) ===== */
.sf-card-primary[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, var(--BEC-colorBrandBackground), var(--BEC-colorBrandBackground2));
    border: none;
    color: white;
}

.sf-card-primary .sf-card-icon i[b-4hr5k2elbg] {
    font-size: 36px;
    color: white;
}

.sf-card-title[b-4hr5k2elbg] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightBold);
    color: inherit;
}

.sf-card-subtitle[b-4hr5k2elbg] {
    margin: 4px 0 0 0;
    font-size: var(--BEC-fontSizeBase200);
    opacity: 0.9;
}

/* ===== SUCCESS CARD (Green gradient) ===== */
.sf-card-success[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: white;
}

.sf-card-success .sf-card-icon i[b-4hr5k2elbg] {
    font-size: 36px;
    color: white;
}

/* Success Light (for email status) */
.sf-card-success-light[b-4hr5k2elbg] {
    background: var(--BEC-colorStatusSuccessBackground1);
    border-color: var(--BEC-colorStatusSuccessForeground1);
}

/* ===== WARNING CARD (Yellow) ===== */
.sf-card-warning[b-4hr5k2elbg] {
    background: var(--BEC-colorStatusWarningBackground1);
    border-color: var(--BEC-colorStatusWarningForeground1);
}

.sf-card-warning .sf-card-header i[b-4hr5k2elbg] {
    color: var(--BEC-colorStatusWarningForeground1);
}

/* ===== INFO CARD (Blue light) ===== */
.sf-card-info[b-4hr5k2elbg] {
    background: #f0f9ff;
    border-color: var(--BEC-colorBrandBackground);
}

.sf-card-info .sf-card-header i[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandBackground);
}

/* ===== USER INFO CARD ===== */
.sf-card-user[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-left: 4px solid var(--BEC-colorBrandBackground);
}

.sf-user-avatar[b-4hr5k2elbg] {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusCircular);
}

.sf-user-avatar i[b-4hr5k2elbg] {
    font-size: 32px;
    color: white;
}

.sf-user-details[b-4hr5k2elbg] {
    flex: 1;
}

.sf-user-name[b-4hr5k2elbg] {
    margin: 0 0 8px 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sf-user-email[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.sf-user-email i[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
}

.sf-no-email[b-4hr5k2elbg] {
    color: var(--BEC-colorPaletteRedForeground1);
    font-style: italic;
}

/* ===== PASSWORD CARD ===== */
.sf-card-password[b-4hr5k2elbg] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 2px solid var(--BEC-colorBrandBackground);
}

.sf-card-password .sf-card-header[b-4hr5k2elbg] {
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* ===== OPTION CARD (for checkbox) ===== */
.sf-card-option[b-4hr5k2elbg] {
    background: var(--BEC-colorNeutralBackground3);
    border-color: var(--BEC-colorNeutralStroke2);
}

/* ===== INFO LIST (bullet points with icons) ===== */
.sf-info-list[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingVerticalM);
}

.sf-info-item[b-4hr5k2elbg] {
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
}

.sf-info-item i[b-4hr5k2elbg] {
    flex-shrink: 0;
    font-size: 18px;
    margin-top: 2px;
}

.sf-icon-success[b-4hr5k2elbg] {
    color: var(--BEC-colorStatusSuccessForeground1);
}

/* ===== SYNCFUSION CHECKBOX CUSTOM ===== */
[b-4hr5k2elbg] .sf-checkbox-custom {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

[b-4hr5k2elbg] .sf-checkbox-custom .e-checkbox-wrapper {
    margin-right: var(--BEC-spacingHorizontalS);
}

[b-4hr5k2elbg] .sf-checkbox-custom .e-label {
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.5;
}

/* ===== SUMMARY STATS GRID ===== */
.sf-summary-grid[b-4hr5k2elbg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--BEC-spacingHorizontalL);
}

.sf-summary-card[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingVerticalS);
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusLarge);
    text-align: center;
    transition: transform 0.2s ease;
}

.sf-summary-card:hover[b-4hr5k2elbg] {
    transform: translateY(-2px);
}

.sf-summary-card.sf-success[b-4hr5k2elbg] {
    background: var(--BEC-colorStatusSuccessBackground1);
    color: var(--BEC-colorStatusSuccessForeground1);
    border: 1px solid var(--BEC-colorStatusSuccessForeground1);
}

.sf-summary-card.sf-info[b-4hr5k2elbg] {
    background: #f0f9ff;
    color: var(--BEC-colorBrandBackground);
    border: 1px solid var(--BEC-colorBrandBackground);
}

.sf-summary-card.sf-warning[b-4hr5k2elbg] {
    background: var(--BEC-colorStatusWarningBackground1);
    color: var(--BEC-colorStatusWarningForeground1);
    border: 1px solid var(--BEC-colorStatusWarningForeground1);
}

.sf-summary-card.sf-error[b-4hr5k2elbg] {
    background: var(--BEC-colorStatusDangerBackground1);
    color: var(--BEC-colorStatusDangerForeground1);
    border: 1px solid var(--BEC-colorStatusDangerForeground1);
}

.sf-summary-card i[b-4hr5k2elbg] {
    font-size: 28px;
}

.sf-summary-number[b-4hr5k2elbg] {
    font-size: 32px;
    font-weight: var(--BEC-fontWeightBold);
    line-height: 1;
}

.sf-summary-label[b-4hr5k2elbg] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    opacity: 0.9;
}

/* ===== PASSWORDS LIST CONTAINER ===== */
.sf-passwords-container[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingVerticalM);
    max-height: 400px;
    overflow-y: auto;
    padding: var(--BEC-spacingVerticalS);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.sf-password-item[b-4hr5k2elbg] {
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.sf-password-item:hover[b-4hr5k2elbg] {
    box-shadow: var(--BEC-shadow2);
    border-color: var(--BEC-colorBrandBackground);
}

.sf-password-header[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--BEC-spacingVerticalM);
}

.sf-password-header strong[b-4hr5k2elbg] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

/* ===== BADGE ===== */
.sf-badge[b-4hr5k2elbg] {
    padding: 4px 10px;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightBold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sf-badge-danger[b-4hr5k2elbg] {
    background: var(--BEC-colorStatusDangerBackground1);
    color: var(--BEC-colorStatusDangerForeground1);
    border: 1px solid var(--BEC-colorStatusDangerForeground1);
}

/* ===== PASSWORD INPUT FIELDS ===== */
.sf-password-field[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

[b-4hr5k2elbg] .sf-password-input {
    flex: 1;
}

[b-4hr5k2elbg] .sf-password-input .e-input-group {
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground3);
}

[b-4hr5k2elbg] .sf-password-input input {
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightBold);
    letter-spacing: 1.5px;
    text-align: center;
    color: var(--BEC-colorNeutralForeground1);
}

[b-4hr5k2elbg] .sf-copy-btn {
    flex-shrink: 0;
    min-width: 36px;
    height: 36px;
}

/* Large Password Display */
.sf-password-display-field[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

[b-4hr5k2elbg] .sf-password-input-large {
    flex: 1;
}

[b-4hr5k2elbg] .sf-password-input-large .e-input-group {
    border: 2px solid var(--BEC-colorBrandBackground);
    background: white;
}

[b-4hr5k2elbg] .sf-password-input-large input {
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    font-weight: var(--BEC-fontWeightBold);
    letter-spacing: 2px;
    text-align: center;
    color: var(--BEC-colorBrandForeground1);
}

[b-4hr5k2elbg] .sf-copy-btn-large {
    flex-shrink: 0;
    min-width: 100px;
    height: 40px;
}

/* Copy Feedback */
.sf-copy-feedback[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    margin-top: var(--BEC-spacingVerticalS);
    padding: var(--BEC-spacingVerticalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorStatusSuccessBackground1);
    color: var(--BEC-colorStatusSuccessForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    animation: fadeIn-b-4hr5k2elbg 0.3s ease;
}

@keyframes fadeIn-b-4hr5k2elbg {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== STATUS MESSAGE ===== */
.sf-status-message[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
}

.sf-status-message i[b-4hr5k2elbg] {
    font-size: 20px;
}

/* ===== NOTICE LIST ===== */
.sf-notice-list[b-4hr5k2elbg] {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.sf-notice-list li[b-4hr5k2elbg] {
    margin-bottom: var(--BEC-spacingVerticalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
}

/* ===== DIALOG CUSTOMIZATION ===== */
[b-4hr5k2elbg] .reset-password-dialog-v2.e-dialog {
    border-radius: var(--BEC-borderRadiusXLarge);
    box-shadow: var(--BEC-shadow16);
}

[b-4hr5k2elbg] .reset-password-dialog-v2 .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalXL);
}

[b-4hr5k2elbg] .reset-password-dialog-v2 .e-dlg-header-content {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground1);
}

[b-4hr5k2elbg] .reset-password-dialog-v2 .e-dlg-content {
    padding: 0;
    max-height: 70vh;
    overflow-y: auto;
}

[b-4hr5k2elbg] .reset-password-dialog-v2 .e-footer-content {
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalXL);
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-4hr5k2elbg] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-4hr5k2elbg] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-4hr5k2elbg] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-4hr5k2elbg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-4hr5k2elbg] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--BEC-colorNeutralForeground3);
}

.sidebar-close-btn:hover[b-4hr5k2elbg] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-4hr5k2elbg] {
    font-size: 18px;
}

.sidebar-content[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.wizard-step[b-4hr5k2elbg] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-4hr5k2elbg] {
    margin-bottom: 24px;
    animation: fadeInUp-b-4hr5k2elbg 0.6s ease;
}

@keyframes fadeInUp-b-4hr5k2elbg {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wizard-step .step-title[b-4hr5k2elbg] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.wizard-step .step-description[b-4hr5k2elbg] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Form Styling for Wizard */
.sidebar-step-content[b-4hr5k2elbg] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

.sidebar-step-content .wizard-step[b-4hr5k2elbg] {
    text-align: left;
    padding: 0;
}

.sidebar-step-content .step-title[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
}

.sidebar-step-content .step-title i[b-4hr5k2elbg] {
    color: #0078d4;
    font-size: 20px;
}

.sidebar-step-content .step-description[b-4hr5k2elbg] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
}

.form-group[b-4hr5k2elbg] {
    margin-bottom: 20px;
}

.form-label[b-4hr5k2elbg] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-4hr5k2elbg]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

.form-row[b-4hr5k2elbg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rtl-text[b-4hr5k2elbg] {
    direction: rtl;
    text-align: right;
}

/* Sidebar Footer */
.sidebar-footer[b-4hr5k2elbg] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-4hr5k2elbg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-4hr5k2elbg] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-4hr5k2elbg] {
    background: #f3f3f3;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-4hr5k2elbg] {
    background: #e0e0e0;
}

.btn-success[b-4hr5k2elbg] {
    background: #10b981;
    color: white;
}

.btn-success:hover:not(:disabled)[b-4hr5k2elbg] {
    background: #059669;
}

/* Info Box */
.info-box[b-4hr5k2elbg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

.info-box div[b-4hr5k2elbg] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
}

.info-box strong[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-4hr5k2elbg] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-4hr5k2elbg] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-4hr5k2elbg] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-4hr5k2elbg] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-4hr5k2elbg] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-4hr5k2elbg] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-4hr5k2elbg] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-4hr5k2elbg] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-4hr5k2elbg] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-4hr5k2elbg] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-4hr5k2elbg] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-4hr5k2elbg] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* ========================================
   COLUMN CHOOSER SPECIFIC STYLES
   ======================================== */
.column-chooser-actions[b-4hr5k2elbg] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.column-chooser-actions .btn-link[b-4hr5k2elbg] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-4hr5k2elbg] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-4hr5k2elbg] {
    font-size: 12px;
}

.column-chooser-list[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-chooser-item[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.column-chooser-item:hover[b-4hr5k2elbg] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorBrandBackground);
}

.column-chooser-item[b-4hr5k2elbg]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-4hr5k2elbg]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
}

/* ========================================
   RESPONSIVE - 100% SYNCFUSION NATIVE
   Reset Password Modal uses Syncfusion's built-in dialog responsiveness
   No custom media queries needed
/* ========================================
   MISSING WIZARD STYLES (Ported from SystemModuleAdministration)
   ======================================== */

.form-value[b-4hr5k2elbg] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}



/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-4hr5k2elbg] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-4hr5k2elbg] {
    margin-bottom: 24px;
    animation: fadeInUp-b-4hr5k2elbg 0.6s ease;
}

.step-title[b-4hr5k2elbg] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-4hr5k2elbg] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-4hr5k2elbg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-4hr5k2elbg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-4hr5k2elbg] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-4hr5k2elbg] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-4hr5k2elbg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-4hr5k2elbg] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-4hr5k2elbg] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-4hr5k2elbg] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-4hr5k2elbg] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-4hr5k2elbg] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-4hr5k2elbg] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-4hr5k2elbg] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-4hr5k2elbg] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-4hr5k2elbg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-4hr5k2elbg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-4hr5k2elbg] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-4hr5k2elbg] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-4hr5k2elbg] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-4hr5k2elbg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-4hr5k2elbg {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   RESPONSIVE DESIGN (Tablet & Mobile)
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .erp-page-header[b-4hr5k2elbg] {
        padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    }

    [b-4hr5k2elbg] .e-toolbar.e-control {
        top: 50px !important;
        padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalL) !important;
    }

    :global(.e-grid .e-gridheader)[b-4hr5k2elbg] {
        top: 100px !important;
    }

    /* Search Bar - Tablet Width */
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {

    /* Page Header - Compact */
    .erp-page-header[b-4hr5k2elbg] {
        flex-direction: column;
        padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
        gap: var(--BEC-spacingHorizontalM);
    }

    /* Stats - Full Width */
    .stats-container[b-4hr5k2elbg] {
        width: 100%;
        justify-content: space-around;
    }

    /* Toolbar - Mobile Optimized */
    [b-4hr5k2elbg] .e-toolbar.e-control {
        top: 90px !important;
        padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalM) !important;
    }

    /* Grid Headers - Adjusted */
    :global(.e-grid .e-gridheader)[b-4hr5k2elbg] {
        top: 140px !important;
    }

    /* Sidebars - Full Width on Mobile */
    [b-4hr5k2elbg] .assignment-wizard-sidebar {
        width: 90% !important;
    }

    /* Form Row - Single Column on Mobile */
    .form-row[b-4hr5k2elbg] {
        grid-template-columns: 1fr;
    }
}

/* Medium Mobile (481px - 767px) - Adjust Search Bar */
@media (min-width: 481px) and (max-width: 767px) {

    /* Search Bar - Medium Width for Medium Mobile */
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {

    /* Icon-Only Toolbar */
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item .e-tbar-btn-text {
        display: none;
    }

    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item {
        min-width: 32px;
    }

    /* Search Bar - Responsive Width for Mobile */
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] .e-textbox,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] .e-input-group,
    [b-4hr5k2elbg] .e-toolbar .e-toolbar-item[align="Right"] .e-control-wrapper {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }

    /* Column Chooser Dialog - Responsive */
    [b-4hr5k2elbg] .e-dialog.e-cc-dialog {
        width: 90vw !important;
        max-width: 90vw !important;
    }

    /* Sidebars - Full Width */
    [b-4hr5k2elbg] .assignment-wizard-sidebar {
        width: 95% !important;
    }

    /* Stats - Smaller Text */
    .stat-value[b-4hr5k2elbg] {
        font-size: 20px;
    }

    .stat-label[b-4hr5k2elbg] {
        font-size: 10px;
    }
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES (GOLD STANDARD)
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-4hr5k2elbg] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column List */
.column-list[b-4hr5k2elbg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-4hr5k2elbg] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-4hr5k2elbg] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-4hr5k2elbg] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
    text-align: left;
}

/* Select All/Deselect All Actions */
.column-actions[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.action-link[b-4hr5k2elbg] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-link:hover[b-4hr5k2elbg] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-4hr5k2elbg]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-4hr5k2elbg]::-webkit-scrollbar-track {
    background: transparent;
}

.column-list[b-4hr5k2elbg]::-webkit-scrollbar-thumb {
    background-color: var(--BEC-colorNeutralStroke1);
    border-radius: 3px;
}

.column-list[b-4hr5k2elbg]::-webkit-scrollbar-thumb:hover {
    background-color: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   MIGRATED INLINE STYLES → CSS CLASSES
   ======================================== */
.adm-label-hidden[b-4hr5k2elbg] {
    visibility: hidden;
}

.adm-checkbox-row[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    margin-top: 4px;
}

.adm-checkbox-hint[b-4hr5k2elbg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin-left: 8px;
}

.adm-text-brand[b-4hr5k2elbg] {
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-muted[b-4hr5k2elbg] {
    color: var(--BEC-colorNeutralForeground3);
}

.adm-error-center[b-4hr5k2elbg] {
    padding: 20px;
    text-align: center;
}

.adm-error-icon-sm[b-4hr5k2elbg] {
    font-size: 24px;
    color: var(--BEC-colorPaletteRedForeground1);
    margin-bottom: 10px;
}

.adm-dialog-header-flex[b-4hr5k2elbg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-notification-icon[b-4hr5k2elbg] {
    font-size: 20px;
}

.adm-preline-text[b-4hr5k2elbg] {
    white-space: pre-line;
}

.adm-help-icon-lg[b-4hr5k2elbg] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-4hr5k2elbg] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/User/Profile/UserProfileAdministration.razor.rz.scp.css */
/* ========================================
   USER PROFILE ADMINISTRATION - PAGE STYLES
   Used on: UserProfileAdministration.razor
   
   Standard page header + BEC Command Bar + custom tabs and card layouts
   All styles use correct BEC Theme variables for consistency.
   ======================================== */

/* ========================================
   STANDARDIZED PAGE HEADER (from CompanyAdministration)
   ======================================== */

.page-header[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    min-height: 72px;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    background: linear-gradient(
        to bottom,
        var(--BEC-colorNeutralBackground1) 0%,
        rgba(255, 255, 255, 0.98) 100%
    );
    box-shadow: var(--BEC-shadow2);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.page-header-content[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--BEC-spacingHorizontalXL);
    max-width: 1600px;
    margin: 0 auto;
}

.page-header-left[b-aay0xlne2g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXXS);
}

.page-title[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase600);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    line-height: 1.2;
}

.page-title i[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase600);
    color: var(--BEC-colorBrandForeground1);
    transition: transform var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.page-title:hover i[b-aay0xlne2g] {
    transform: scale(1.1) rotate(-5deg);
}

.page-description[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
    line-height: 1.4;
}

.page-header-right[b-aay0xlne2g] {
    flex-shrink: 0;
}

/* ========================================
   STANDARDIZED BEC COMMAND BAR (from CompanyAdministration)
   ======================================== */

.BEC-CommandBar[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    min-height: 56px;
    position: sticky;
    top: 72px;
    z-index: 99;
    backdrop-filter: blur(8px);
    box-shadow: var(--BEC-shadow2);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.action-group[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.action-group-primary[b-aay0xlne2g] {
    flex-shrink: 0;
}

.action-group-utility[b-aay0xlne2g] {
    flex-shrink: 0;
}

.BEC-CommandBar-button[b-aay0xlne2g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalXS);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    height: 36px;
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    font-family: var(--BEC-fontFamilyBase);
    cursor: pointer;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
    position: relative;
    overflow: hidden;
    user-select: none;
}

.BEC-CommandBar-button:hover:not(:disabled)[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorNeutralStroke2);
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow4);
}

.BEC-CommandBar-button--primary[b-aay0xlne2g] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
    box-shadow: var(--BEC-shadow2);
}

.BEC-CommandBar-button--primary:hover:not(:disabled)[b-aay0xlne2g] {
    background: var(--BEC-colorBrandBackgroundHover);
    border-color: var(--BEC-colorBrandBackgroundHover);
    box-shadow: var(--BEC-shadow8);
}

.action-divider[b-aay0xlne2g] {
    width: 1px;
    height: 28px;
    background: var(--BEC-colorNeutralStroke1);
    margin: 0 var(--BEC-spacingHorizontalXS);
    flex-shrink: 0;
}

.search-box[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: 0 var(--BEC-spacingHorizontalM);
    height: 36px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    min-width: 280px;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.search-box:focus-within[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground1);
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
    min-width: 320px;
}

.search-icon[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    flex-shrink: 0;
    transition: color var(--BEC-durationFast) var(--BEC-curveEasyEase);
}

.search-box:focus-within .search-icon[b-aay0xlne2g] {
    color: var(--BEC-colorBrandForeground1);
}

.search-input[b-aay0xlne2g] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--BEC-fontSizeBase300);
    font-family: var(--BEC-fontFamilyBase);
    color: var(--BEC-colorNeutralForeground1);
    outline: none;
}

.search-input[b-aay0xlne2g]::placeholder {
    color: var(--BEC-colorNeutralForeground4);
}

.clear-search-btn[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--BEC-colorNeutralBackground3);
    border: none;
    border-radius: var(--BEC-borderRadiusCircular);
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--BEC-durationFast) var(--BEC-curveEasyEase);
}

.clear-search-btn:hover[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground1);
    transform: rotate(90deg) scale(1.1);
}

.clear-search-btn i[b-aay0xlne2g] {
    font-size: 12px;
}

/* ========================================
   CUSTOM CONTENT AREA - Tabs and Cards
   ======================================== */

.BEC-page-container[b-aay0xlne2g] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    background-color: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground1);
    min-height: 400px;
}

/* Tabs */
.BEC-Tabs[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.BEC-Tab[b-aay0xlne2g] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border-bottom: 2px solid transparent;
    transition: all var(--BEC-durationFaster) var(--BEC-curveEasyEase);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.BEC-Tab:hover[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorBrandBackground);
}

.BEC-Tab.active[b-aay0xlne2g] {
    color: var(--BEC-colorBrandBackground);
    border-bottom-color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightMedium);
}

.BEC-Tab-icon[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase300);
}

.BEC-Tab-text[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase300);
}

/* Content Area */
.BEC-page-content[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    min-height: 400px;
}

/* Loading States */
.BEC-loading-container[b-aay0xlne2g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalXXXL);
    gap: var(--BEC-spacingHorizontalL);
}

.BEC-loading-text[b-aay0xlne2g] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: var(--BEC-fontSizeBase300);
    margin: 0;
}

/* Assignments Container */
.BEC-assignments-container[b-aay0xlne2g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalL);
}

.BEC-Card[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
    padding: var(--BEC-spacingHorizontalL);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
    cursor: default;
}

.BEC-Card--clickable[b-aay0xlne2g] {
    cursor: pointer;
}

.BEC-Card--clickable:hover[b-aay0xlne2g] {
    transform: translateY(-2px);
    box-shadow: var(--BEC-shadow8);
    border-color: var(--BEC-colorBrandBackground);
}

.BEC-Card.selected[b-aay0xlne2g] {
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}

.BEC-Card-header[b-aay0xlne2g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--BEC-spacingHorizontalM);
    padding-bottom: var(--BEC-spacingHorizontalM);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.BEC-user-info[b-aay0xlne2g] {
    flex: 1;
}

.BEC-user-name[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalXS) 0;
}

.BEC-user-email[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.BEC-user-actions[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.BEC-profiles-section[b-aay0xlne2g] {
    margin-top: var(--BEC-spacingHorizontalM);
}

.BEC-profiles-header[b-aay0xlne2g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--BEC-spacingHorizontalS);
}

.BEC-profiles-title[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.BEC-profiles-grid[b-aay0xlne2g] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--BEC-spacingHorizontalXS);
}

.BEC-empty-state[b-aay0xlne2g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalL);
    text-align: center;
    color: var(--BEC-colorNeutralForeground2);
}

.BEC-empty-icon[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase600);
    margin-bottom: var(--BEC-spacingHorizontalS);
    opacity: 0.5;
}

.BEC-empty-text[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase300);
    margin: 0;
}

/* Table Styles */
.BEC-Table-container[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    margin: var(--BEC-spacingHorizontalL);
}

.BEC-Table[b-aay0xlne2g] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--BEC-fontFamilyBase);
    font-size: var(--BEC-fontSizeBase300);
    line-height: var(--BEC-lineHeightBase300);
    color: var(--BEC-colorNeutralForeground1);
    background: var(--BEC-colorNeutralBackground1);
}

.BEC-Table th[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    text-align: left;
    font-weight: var(--BEC-fontWeightSemibold);
    height: 42px;
    position: relative;
}

.BEC-Table th.sortable[b-aay0xlne2g] {
    cursor: pointer;
    user-select: none;
}

.BEC-Table th.sortable:hover[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground3);
}

.BEC-Table td[b-aay0xlne2g] {
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    height: 42px;
}

.BEC-Table tbody tr:hover[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground2);
}

.BEC-Table tbody tr.selected[b-aay0xlne2g] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralBackground1);
}

.BEC-Table-sortIcon[b-aay0xlne2g] {
    width: 16px;
    height: 16px;
    margin-left: var(--BEC-spacingHorizontalXS);
    opacity: 0.5;
}

.BEC-Table th.sorted .BEC-Table-sortIcon[b-aay0xlne2g] {
    opacity: 1;
}

.BEC-Table-actions[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.BEC-profile-info[b-aay0xlne2g] {
    display: flex;
    flex-direction: column;
}

.BEC-profile-name[b-aay0xlne2g] {
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

.BEC-profile-desc[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
}

/* Analytics */
.BEC-analytics-container[b-aay0xlne2g] {
    padding: var(--BEC-spacingHorizontalL);
}

.BEC-stats-grid[b-aay0xlne2g] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--BEC-spacingHorizontalL);
}

.BEC-stat-card[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
}

.BEC-stat-icon[b-aay0xlne2g] {
    width: 48px;
    height: 48px;
    background: var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusMedium);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--BEC-colorNeutralBackground1);
    font-size: var(--BEC-fontSizeBase500);
}

.BEC-stat-content[b-aay0xlne2g] {
    flex: 1;
}

.BEC-stat-value[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase600);
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalXS) 0;
}

.BEC-stat-label[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* Dialog Styles */
.BEC-Dialog[b-aay0xlne2g] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-aay0xlne2g var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.BEC-Dialog.open[b-aay0xlne2g] {
    display: flex;
}

@keyframes fadeIn-b-aay0xlne2g {
    from { opacity: 0; }
    to { opacity: 1; }
}

.BEC-Dialog-content[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusSmall);
    box-shadow: var(--BEC-shadow28);
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    animation: slideInUp-b-aay0xlne2g var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

@keyframes slideInUp-b-aay0xlne2g {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.BEC-Dialog--small .BEC-Dialog-content[b-aay0xlne2g] {
    width: 400px;
}

.BEC-Dialog--medium .BEC-Dialog-content[b-aay0xlne2g] {
    width: 600px;
}

.BEC-Dialog--large .BEC-Dialog-content[b-aay0xlne2g] {
    width: 900px;
}

.BEC-Dialog-header[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--BEC-spacingHorizontalL);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.BEC-Dialog-title[b-aay0xlne2g] {
    font-family: var(--BEC-fontFamilyBase);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.BEC-Dialog-closeButton[b-aay0xlne2g] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--BEC-borderRadiusSmall);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--BEC-durationFaster) var(--BEC-curveEasyEase);
    color: var(--BEC-colorNeutralForeground2);
}

.BEC-Dialog-closeButton:hover[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground2);
}

.BEC-Dialog-body[b-aay0xlne2g] {
    padding: var(--BEC-spacingHorizontalL);
    font-family: var(--BEC-fontFamilyBase);
    font-size: var(--BEC-fontSizeBase300);
    line-height: var(--BEC-lineHeightBase300);
    color: var(--BEC-colorNeutralForeground1);
}

.BEC-Dialog-footer[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalL);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

/* Form Styles */
.BEC-form-grid[b-aay0xlne2g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.BEC-form-group[b-aay0xlne2g] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.BEC-form-group--full[b-aay0xlne2g] {
    grid-column: 1 / -1;
}

.BEC-field-validation-error[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorPaletteRedForeground1);
    margin-top: var(--BEC-spacingHorizontalXS);
}

/* Assignments Management */
.BEC-assignments-management[b-aay0xlne2g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    max-height: 60vh;
    overflow-y: auto;
}

.BEC-available-section[b-aay0xlne2g],
.BEC-assigned-section[b-aay0xlne2g] {
    display: flex;
    flex-direction: column;
}

.BEC-section-title[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.BEC-profiles-list[b-aay0xlne2g] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.BEC-List-item[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    min-height: 48px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    transition: all var(--BEC-durationFaster) var(--BEC-curveEasyEase);
    gap: var(--BEC-spacingHorizontalS);
}

.BEC-List-item:hover[b-aay0xlne2g] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorNeutralStroke2);
}

.BEC-List-item.assigned[b-aay0xlne2g] {
    background: var(--BEC-colorPaletteGreenBackground1);
    border-color: var(--BEC-colorPaletteGreenBackground2);
}

.BEC-List-itemContent[b-aay0xlne2g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXXS);
}

.BEC-List-itemTitle[b-aay0xlne2g] {
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

.BEC-List-itemDescription[b-aay0xlne2g] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
}

.BEC-List-itemActions[b-aay0xlne2g] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .BEC-page-container[b-aay0xlne2g] {
        padding: var(--BEC-spacingHorizontalM);
    }
    
    .page-header-content[b-aay0xlne2g] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }
    
    .BEC-CommandBar[b-aay0xlne2g] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--BEC-spacingHorizontalS);
    }
    
    .search-box[b-aay0xlne2g] {
        max-width: none;
    }
    
    .BEC-assignments-container[b-aay0xlne2g] {
        grid-template-columns: 1fr;
    }
    
    .BEC-stats-grid[b-aay0xlne2g] {
        grid-template-columns: 1fr;
    }
    
    .BEC-assignments-management[b-aay0xlne2g] {
        grid-template-columns: 1fr;
    }
    
    .BEC-form-grid[b-aay0xlne2g] {
        grid-template-columns: 1fr;
    }
    
    .BEC-Dialog--medium .BEC-Dialog-content[b-aay0xlne2g],
    .BEC-Dialog--large .BEC-Dialog-content[b-aay0xlne2g] {
        width: 95vw;
        max-width: 95vw;
    }
}
/* /Components/Pages/MainLayout/Administration/Administration/User/Profile/UserProfileFavoriteAdministration.razor.rz.scp.css */
/* ========================================
   USER PROFILE FAVORITE ADMINISTRATION - STANDARDIZED PAGE STYLES
   Used on: UserProfileFavoriteAdministration.razor
   
   Manages user favorite profiles.
   Uses same styling pattern as System Modules page.
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-be6j9x5bbm] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   Same as System Modules page
   ======================================== */
.erp-page-header[b-be6j9x5bbm] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-be6j9x5bbm] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-be6j9x5bbm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-be6j9x5bbm] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-be6j9x5bbm] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-be6j9x5bbm] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-be6j9x5bbm] {
    transform: scale(0.98);
}

.page-subtitle[b-be6j9x5bbm] {
    display: none;
}

.header-right[b-be6j9x5bbm] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   Same as System Modules page
   ======================================== */
.stats-container[b-be6j9x5bbm] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-be6j9x5bbm] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-be6j9x5bbm] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-be6j9x5bbm] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-be6j9x5bbm] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-be6j9x5bbm] {
    padding: var(--BEC-spacingHorizontalL);
    flex: 1;
    overflow: auto;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-be6j9x5bbm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-be6j9x5bbm] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: spin-b-be6j9x5bbm 1s linear infinite;
}

@keyframes spin-b-be6j9x5bbm {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-container p[b-be6j9x5bbm] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-be6j9x5bbm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    padding: var(--BEC-spacingHorizontalXL);
    text-align: center;
}

.error-container i[b-be6j9x5bbm] {
    font-size: 48px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container p[b-be6j9x5bbm] {
    font-size: 14px;
    margin: 0;
    color: var(--BEC-colorNeutralForeground1);
}

.BEC-CommandBar[b-be6j9x5bbm] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    min-height: 56px;
    position: sticky;
    top: 36px;
    z-index: 99;
    backdrop-filter: blur(8px);
    box-shadow: var(--BEC-shadow2);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.action-group[b-be6j9x5bbm] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.action-group-primary[b-be6j9x5bbm] {
    flex-shrink: 0;
}

.action-group-utility[b-be6j9x5bbm] {
    flex-shrink: 0;
}

.BEC-CommandBar-button[b-be6j9x5bbm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalXS);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    height: 36px;
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    font-family: var(--BEC-fontFamilyBase);
    cursor: pointer;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
    position: relative;
    overflow: hidden;
    user-select: none;
}

.BEC-CommandBar-button:hover:not(:disabled)[b-be6j9x5bbm] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorNeutralStroke2);
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow4);
}

.BEC-CommandBar-button:disabled[b-be6j9x5bbm] {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground4);
}

.BEC-CommandBar-button--primary[b-be6j9x5bbm] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
    box-shadow: var(--BEC-shadow2);
}

.BEC-CommandBar-button--primary:hover:not(:disabled)[b-be6j9x5bbm] {
    background: var(--BEC-colorBrandBackgroundHover);
    border-color: var(--BEC-colorBrandBackgroundHover);
    box-shadow: var(--BEC-shadow8);
}

.BEC-CommandBar-button--danger[b-be6j9x5bbm] {
    color: var(--BEC-colorPaletteRedForeground1);
    border-color: var(--BEC-colorNeutralStroke1);
}

.BEC-CommandBar-button--danger:hover:not(:disabled)[b-be6j9x5bbm] {
    background: var(--BEC-colorPaletteRedBackground1);
    border-color: var(--BEC-colorPaletteRedForeground1);
}

.action-divider[b-be6j9x5bbm] {
    width: 1px;
    height: 28px;
    background: var(--BEC-colorNeutralStroke1);
    margin: 0 var(--BEC-spacingHorizontalXS);
    flex-shrink: 0;
}

.search-box[b-be6j9x5bbm] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: 0 var(--BEC-spacingHorizontalM);
    height: 36px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    min-width: 280px;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.search-box:focus-within[b-be6j9x5bbm] {
    background: var(--BEC-colorNeutralBackground1);
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
    min-width: 320px;
}

.search-icon[b-be6j9x5bbm] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    flex-shrink: 0;
    transition: color var(--BEC-durationFast) var(--BEC-curveEasyEase);
}

.search-box:focus-within .search-icon[b-be6j9x5bbm] {
    color: var(--BEC-colorBrandForeground1);
}

.search-input[b-be6j9x5bbm] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--BEC-fontSizeBase300);
    font-family: var(--BEC-fontFamilyBase);
    color: var(--BEC-colorNeutralForeground1);
    outline: none;
}

.search-input[b-be6j9x5bbm]::placeholder {
    color: var(--BEC-colorNeutralForeground4);
}

.content-placeholder[b-be6j9x5bbm] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: var(--BEC-spacingHorizontalXXXL);
}

.placeholder-card[b-be6j9x5bbm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    text-align: center;
    max-width: 600px;
}

.placeholder-icon[b-be6j9x5bbm] {
    font-size: 64px;
    color: var(--BEC-colorBrandForeground1);
    opacity: 0.6;
}

.placeholder-title[b-be6j9x5bbm] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.placeholder-message[b-be6j9x5bbm] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    line-height: 1.6;
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-be6j9x5bbm] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-be6j9x5bbm] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-be6j9x5bbm] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-be6j9x5bbm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-be6j9x5bbm] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-be6j9x5bbm] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-be6j9x5bbm] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-be6j9x5bbm] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-be6j9x5bbm] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-be6j9x5bbm] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
    padding: 24px;
    overflow-y: auto;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-be6j9x5bbm] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-be6j9x5bbm] {
    margin-bottom: 24px;
    animation: fadeInUp-b-be6j9x5bbm 0.6s ease;
}

.step-title[b-be6j9x5bbm] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-be6j9x5bbm] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-be6j9x5bbm] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-be6j9x5bbm] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-be6j9x5bbm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-be6j9x5bbm] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-be6j9x5bbm] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-be6j9x5bbm] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-be6j9x5bbm] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-be6j9x5bbm] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-be6j9x5bbm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-be6j9x5bbm] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-be6j9x5bbm] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-be6j9x5bbm] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-be6j9x5bbm] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-be6j9x5bbm] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-be6j9x5bbm] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-be6j9x5bbm] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-be6j9x5bbm] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-be6j9x5bbm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-be6j9x5bbm] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-be6j9x5bbm] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* ========================================
   FORM STYLING (Create Wizard)
   ======================================== */
.form-group[b-be6j9x5bbm] {
    margin-bottom: 20px;
}

.form-label[b-be6j9x5bbm] {
    display: block;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 6px;
}

.form-text[b-be6j9x5bbm] {
    display: block;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 4px;
}

[b-be6j9x5bbm] .e-textbox {
    width: 100%;
}

/* Wizard Progress */
.wizard-progress[b-be6j9x5bbm] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-be6j9x5bbm] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-be6j9x5bbm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-be6j9x5bbm] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-be6j9x5bbm] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-be6j9x5bbm] {
    background: #e1dfdd;
}

.btn-next[b-be6j9x5bbm] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-be6j9x5bbm] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-be6j9x5bbm] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-be6j9x5bbm] {
    background: #0b5c0b;
}

.btn i[b-be6j9x5bbm] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-be6j9x5bbm {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-be6j9x5bbm] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-be6j9x5bbm] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-be6j9x5bbm] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-be6j9x5bbm] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-be6j9x5bbm] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-be6j9x5bbm] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-be6j9x5bbm] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-be6j9x5bbm] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-be6j9x5bbm] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-be6j9x5bbm] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-be6j9x5bbm] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-be6j9x5bbm] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-be6j9x5bbm] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-be6j9x5bbm] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-be6j9x5bbm] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-be6j9x5bbm] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-be6j9x5bbm] .e-toolbar .e-textbox.e-input-group,
[b-be6j9x5bbm] .e-toolbar .e-input-group.e-control-wrapper,
[b-be6j9x5bbm] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-be6j9x5bbm] .e-toolbar .e-textbox.e-input-group .e-input,
[b-be6j9x5bbm] .e-toolbar .e-input-group .e-input,
[b-be6j9x5bbm] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-be6j9x5bbm] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-be6j9x5bbm] .e-toolbar .e-input-group:focus-within,
[b-be6j9x5bbm] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-be6j9x5bbm] .e-toolbar .e-textbox .e-input-group-icon,
[b-be6j9x5bbm] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-be6j9x5bbm] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-be6j9x5bbm] .e-toolbar .e-input-group .e-input::placeholder,
[b-be6j9x5bbm] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   TOOLBAR OVERFLOW POPUP - POSITION FIX
   ======================================== */
[b-be6j9x5bbm] .e-toolbar-pop.e-popup {
    top: 58px !important;
    margin-top: 0 !important;
}

[b-be6j9x5bbm] .e-toolbar-pop.e-popup.e-popup-open {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* ========================================
   GRID STYLING
   ======================================== */

[b-be6j9x5bbm] .e-toolbar .e-textbox.e-input-group {
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
}

[b-be6j9x5bbm] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   Same as System Modules page
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-be6j9x5bbm] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header - Rounded Top Corners */
[b-be6j9x5bbm] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-be6j9x5bbm] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-be6j9x5bbm] .e-grid .e-row.e-selectionbackground,
[b-be6j9x5bbm] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-be6j9x5bbm] .e-grid .e-row.e-selectionbackground:hover,
[b-be6j9x5bbm] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-be6j9x5bbm] .e-grid .e-row.e-selectionbackground td:first-child,
[b-be6j9x5bbm] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-be6j9x5bbm] .e-grid .e-row {
    height: 32px !important;
}

[b-be6j9x5bbm] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-be6j9x5bbm] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid Row Hover */
[b-be6j9x5bbm] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* ========================================
   NOTIFICATION DIALOG STYLING
   ======================================== */
[b-be6j9x5bbm] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-bottom: 2px solid #10b981;
}

[b-be6j9x5bbm] .notification-success .e-dlg-header-content i {
    color: #10b981;
}

[b-be6j9x5bbm] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-bottom: 2px solid #ef4444;
}

[b-be6j9x5bbm] .notification-error .e-dlg-header-content i {
    color: #ef4444;
}

[b-be6j9x5bbm] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-bottom: 2px solid #f59e0b;
}

[b-be6j9x5bbm] .notification-warning .e-dlg-header-content i {
    color: #f59e0b;
}

[b-be6j9x5bbm] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-bottom: 2px solid #3b82f6;
}

[b-be6j9x5bbm] .notification-info .e-dlg-header-content i {
    color: #3b82f6;
}

@media (max-width: 768px) {
    .page-header-content[b-be6j9x5bbm] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    .page-stats[b-be6j9x5bbm] {
        width: 100%;
        justify-content: center;
    }

    .BEC-CommandBar[b-be6j9x5bbm] {
        flex-wrap: wrap;
        gap: var(--BEC-spacingHorizontalS);
    }

    .action-divider[b-be6j9x5bbm] {
        display: none;
    }

    .search-box[b-be6j9x5bbm] {
        order: -1;
        width: 100%;
        min-width: auto;
    }

    .BEC-CommandBar-button span[b-be6j9x5bbm] {
        display: none;
    }

    .BEC-CommandBar-button[b-be6j9x5bbm] {
        padding: var(--BEC-spacingHorizontalS);
        width: 36px;
    }
}

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-be6j9x5bbm] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-be6j9x5bbm] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-be6j9x5bbm] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-be6j9x5bbm] {
    font-size: 12px;
}

.column-chooser-list[b-be6j9x5bbm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-be6j9x5bbm] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-be6j9x5bbm] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-be6j9x5bbm]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-be6j9x5bbm]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-notification-icon[b-be6j9x5bbm] {
    font-size: 20px;
}

.adm-preline-text[b-be6j9x5bbm] {
    white-space: pre-line;
}

.adm-help-icon-lg[b-be6j9x5bbm] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-required-marker[b-be6j9x5bbm] {
    color: red;
}

.adm-warning-icon-sm[b-be6j9x5bbm] {
    color: #f59e0b;
    margin-right: 8px;
}

.adm-info-box-gray[b-be6j9x5bbm] {
    background: #f3f4f6;
    padding: 12px;
    border-radius: 6px;
    margin-top: 12px;
}

.adm-text-cannot-undo[b-be6j9x5bbm] {
    margin-top: 12px;
    color: #dc2626;
}
/* /Components/Pages/MainLayout/Administration/Administration/User/Profile/UserProfileHistoryAdministration.razor.rz.scp.css */
/* ========================================
   USER PROFILE HISTORY ADMINISTRATION - STANDARDIZED PAGE STYLES
   Uses same styling pattern as System Modules page
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   Same as System Modules page
   ======================================== */
.erp-page-header[b-ctmqhc6ibl] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-ctmqhc6ibl] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-ctmqhc6ibl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-ctmqhc6ibl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-ctmqhc6ibl] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-ctmqhc6ibl] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-ctmqhc6ibl] {
    transform: scale(0.98);
}

.page-subtitle[b-ctmqhc6ibl] {
    display: none;
}

.header-right[b-ctmqhc6ibl] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER
   ======================================== */
.stats-container[b-ctmqhc6ibl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 60px;
}

.stat-value[b-ctmqhc6ibl] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1;
}

.stat-label[b-ctmqhc6ibl] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider[b-ctmqhc6ibl] {
    width: 1px;
    height: 20px;
    background: var(--BEC-colorNeutralStroke1);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-ctmqhc6ibl] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-ctmqhc6ibl] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-ctmqhc6ibl] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-ctmqhc6ibl] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-ctmqhc6ibl] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-ctmqhc6ibl] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-ctmqhc6ibl] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-ctmqhc6ibl] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-ctmqhc6ibl] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-ctmqhc6ibl] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-ctmqhc6ibl] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-ctmqhc6ibl] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-ctmqhc6ibl] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-ctmqhc6ibl] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-ctmqhc6ibl] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-ctmqhc6ibl] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-ctmqhc6ibl] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-ctmqhc6ibl] .e-toolbar .e-textbox.e-input-group,
[b-ctmqhc6ibl] .e-toolbar .e-input-group.e-control-wrapper,
[b-ctmqhc6ibl] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-ctmqhc6ibl] .e-toolbar .e-textbox.e-input-group .e-input,
[b-ctmqhc6ibl] .e-toolbar .e-input-group .e-input,
[b-ctmqhc6ibl] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-ctmqhc6ibl] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-ctmqhc6ibl] .e-toolbar .e-input-group:focus-within,
[b-ctmqhc6ibl] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-ctmqhc6ibl] .e-toolbar .e-textbox .e-input-group-icon,
[b-ctmqhc6ibl] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-ctmqhc6ibl] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-ctmqhc6ibl] .e-toolbar .e-input-group .e-input::placeholder,
[b-ctmqhc6ibl] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   LOADING & ERROR STATES
   ======================================== */
.loading-container[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-ctmqhc6ibl] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-ctmqhc6ibl 1s linear infinite;
}

@keyframes spin-b-ctmqhc6ibl {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-ctmqhc6ibl] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

.error-container[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    padding: 40px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
}

.error-container i[b-ctmqhc6ibl] {
    font-size: 48px;
    color: var(--BEC-colorError);
}

.error-container p[b-ctmqhc6ibl] {
    color: var(--BEC-colorNeutralForeground1);
    font-size: 14px;
    margin: 0;
    text-align: center;
}

/* ========================================
   CONTENT PLACEHOLDER
   ======================================== */
.content-placeholder[b-ctmqhc6ibl] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 400px;
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
    text-align: center;
    padding: 40px;
}

.placeholder-icon[b-ctmqhc6ibl] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.placeholder-title[b-ctmqhc6ibl] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.placeholder-message[b-ctmqhc6ibl] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-ctmqhc6ibl] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-ctmqhc6ibl] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-ctmqhc6ibl] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-ctmqhc6ibl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-ctmqhc6ibl] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-ctmqhc6ibl] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-ctmqhc6ibl] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-ctmqhc6ibl] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-ctmqhc6ibl] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
    padding: 24px;
    overflow-y: auto;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-ctmqhc6ibl] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-ctmqhc6ibl] {
    margin-bottom: 24px;
    animation: fadeInUp-b-ctmqhc6ibl 0.6s ease;
}

.step-title[b-ctmqhc6ibl] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-ctmqhc6ibl] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-ctmqhc6ibl] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-ctmqhc6ibl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-ctmqhc6ibl] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-ctmqhc6ibl] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-ctmqhc6ibl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-ctmqhc6ibl] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-ctmqhc6ibl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-ctmqhc6ibl] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-ctmqhc6ibl] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-ctmqhc6ibl] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-ctmqhc6ibl] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-ctmqhc6ibl] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-ctmqhc6ibl] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-ctmqhc6ibl] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-ctmqhc6ibl] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-ctmqhc6ibl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-ctmqhc6ibl] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-ctmqhc6ibl] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-ctmqhc6ibl] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-ctmqhc6ibl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-ctmqhc6ibl] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-ctmqhc6ibl] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-ctmqhc6ibl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-ctmqhc6ibl] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-ctmqhc6ibl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-ctmqhc6ibl] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-ctmqhc6ibl] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-ctmqhc6ibl] {
    background: #e1dfdd;
}

.btn-cancel[b-ctmqhc6ibl] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-ctmqhc6ibl] {
    background: #e1dfdd;
}

.btn-next[b-ctmqhc6ibl] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-ctmqhc6ibl] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-ctmqhc6ibl] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-ctmqhc6ibl] {
    background: #0b5c0b;
}

.btn i[b-ctmqhc6ibl] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-ctmqhc6ibl {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-ctmqhc6ibl] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-ctmqhc6ibl] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-ctmqhc6ibl] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-ctmqhc6ibl] {
    font-size: 12px;
}

.column-chooser-list[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-ctmqhc6ibl] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-ctmqhc6ibl] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-ctmqhc6ibl]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-ctmqhc6ibl]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-ctmqhc6ibl] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-ctmqhc6ibl] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-ctmqhc6ibl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-ctmqhc6ibl] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-ctmqhc6ibl] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-ctmqhc6ibl] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-ctmqhc6ibl] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-ctmqhc6ibl] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-ctmqhc6ibl] {
    animation: fadeInUp-b-ctmqhc6ibl 0.3s ease-out;
}

.step-title[b-ctmqhc6ibl] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-ctmqhc6ibl] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-ctmqhc6ibl] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-ctmqhc6ibl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-ctmqhc6ibl]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-ctmqhc6ibl]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-ctmqhc6ibl]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-ctmqhc6ibl]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-ctmqhc6ibl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-ctmqhc6ibl] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-ctmqhc6ibl] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-ctmqhc6ibl] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-ctmqhc6ibl] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-ctmqhc6ibl] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-ctmqhc6ibl] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-ctmqhc6ibl] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-ctmqhc6ibl] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-ctmqhc6ibl] {
    background: #f3f2f1;
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-text-success[b-ctmqhc6ibl] {
    color: var(--BEC-colorSuccess);
}

.adm-help-icon-lg[b-ctmqhc6ibl] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-ctmqhc6ibl] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/User/Security/UserLoginHistoryAdministration.razor.rz.scp.css */
/* ========================================
   USER LOGIN HISTORY ADMINISTRATION - STANDARDIZED PAGE STYLES
   Uses same styling pattern as System Modules page
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   Same as System Modules page
   ======================================== */
.erp-page-header[b-p0dh8uzlbv] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-p0dh8uzlbv] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-p0dh8uzlbv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-p0dh8uzlbv] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-p0dh8uzlbv] {
    display: none;
}

.header-right[b-p0dh8uzlbv] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER
   ======================================== */
.stats-container[b-p0dh8uzlbv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 60px;
}

.stat-value[b-p0dh8uzlbv] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1;
}

.stat-label[b-p0dh8uzlbv] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider[b-p0dh8uzlbv] {
    width: 1px;
    height: 20px;
    background: var(--BEC-colorNeutralStroke1);
}

/* Help Icon Button */
.help-icon-btn[b-p0dh8uzlbv] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-p0dh8uzlbv] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-p0dh8uzlbv] {
    transform: scale(0.98);
}

/* ========================================
   HELP WIZARD - NO BACKDROP OVERLAY
   Remove grey overlay so user can interact with page
   ======================================== */
[b-p0dh8uzlbv] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-p0dh8uzlbv] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-p0dh8uzlbv] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-p0dh8uzlbv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-p0dh8uzlbv] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-p0dh8uzlbv] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-p0dh8uzlbv] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-p0dh8uzlbv] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-p0dh8uzlbv] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-p0dh8uzlbv] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

/* Wizard Step Content */
.wizard-step[b-p0dh8uzlbv] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-p0dh8uzlbv] {
    margin-bottom: 24px;
    animation: fadeInUp-b-p0dh8uzlbv 0.6s ease;
}

.step-title[b-p0dh8uzlbv] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-title h2[b-p0dh8uzlbv] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
    text-align: center;
}

.step-description[b-p0dh8uzlbv] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

.info-box[b-p0dh8uzlbv] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-p0dh8uzlbv] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-p0dh8uzlbv] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-p0dh8uzlbv] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-p0dh8uzlbv] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-p0dh8uzlbv] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-p0dh8uzlbv] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-p0dh8uzlbv] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-p0dh8uzlbv] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-p0dh8uzlbv] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-p0dh8uzlbv] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-p0dh8uzlbv] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-p0dh8uzlbv] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-p0dh8uzlbv] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-p0dh8uzlbv] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-p0dh8uzlbv] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

.warning-box[b-p0dh8uzlbv] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-p0dh8uzlbv] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-p0dh8uzlbv] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-p0dh8uzlbv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-p0dh8uzlbv] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-p0dh8uzlbv] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-p0dh8uzlbv] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-p0dh8uzlbv] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-p0dh8uzlbv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-p0dh8uzlbv] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-p0dh8uzlbv] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-p0dh8uzlbv] {
    background: #e1dfdd;
}

.btn-next[b-p0dh8uzlbv] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-p0dh8uzlbv] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-p0dh8uzlbv] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-p0dh8uzlbv] {
    background: #0b5c0b;
}

.btn i[b-p0dh8uzlbv] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-p0dh8uzlbv {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-p0dh8uzlbv] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-p0dh8uzlbv] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-p0dh8uzlbv] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-p0dh8uzlbv] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-p0dh8uzlbv] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-p0dh8uzlbv] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-p0dh8uzlbv] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-p0dh8uzlbv] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-p0dh8uzlbv] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-p0dh8uzlbv] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-p0dh8uzlbv] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-p0dh8uzlbv] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-p0dh8uzlbv] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-p0dh8uzlbv] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-p0dh8uzlbv] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-p0dh8uzlbv] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-p0dh8uzlbv] .e-toolbar .e-textbox.e-input-group,
[b-p0dh8uzlbv] .e-toolbar .e-input-group.e-control-wrapper,
[b-p0dh8uzlbv] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-p0dh8uzlbv] .e-toolbar .e-textbox.e-input-group .e-input,
[b-p0dh8uzlbv] .e-toolbar .e-input-group .e-input,
[b-p0dh8uzlbv] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-p0dh8uzlbv] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-p0dh8uzlbv] .e-toolbar .e-input-group:focus-within,
[b-p0dh8uzlbv] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-p0dh8uzlbv] .e-toolbar .e-textbox .e-input-group-icon,
[b-p0dh8uzlbv] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-p0dh8uzlbv] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-p0dh8uzlbv] .e-toolbar .e-input-group .e-input::placeholder,
[b-p0dh8uzlbv] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   TOOLBAR OVERFLOW POPUP - POSITION FIX
   ======================================== */
[b-p0dh8uzlbv] .e-toolbar-pop.e-popup {
    top: 58px !important;
    margin-top: 0 !important;
}

[b-p0dh8uzlbv] .e-toolbar-pop.e-popup.e-popup-open {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* ========================================
   CONTENT PLACEHOLDER
   ======================================== */
.content-placeholder[b-p0dh8uzlbv] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: var(--BEC-spacingHorizontalXXXL);
}

.placeholder-card[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    text-align: center;
    max-width: 600px;
}

.placeholder-icon[b-p0dh8uzlbv] {
    font-size: 64px;
    color: var(--BEC-colorBrandForeground1);
    opacity: 0.6;
}

.placeholder-title[b-p0dh8uzlbv] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.placeholder-message[b-p0dh8uzlbv] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    line-height: 1.6;
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-p0dh8uzlbv] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */
.column-chooser-actions[b-p0dh8uzlbv] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-p0dh8uzlbv] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-p0dh8uzlbv] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-p0dh8uzlbv] {
    font-size: 12px;
}

.column-chooser-list[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-p0dh8uzlbv] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-p0dh8uzlbv] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-p0dh8uzlbv]  .e-checkbox-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0;
}

.column-chooser-item[b-p0dh8uzlbv]  .e-checkbox-label {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 400;
    margin-left: 8px;
    cursor: pointer;
    user-select: none;
    flex: 1;
}

/* ========================================
   LOADING AND ERROR STATES
   ======================================== */
.loading-container[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-p0dh8uzlbv] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-p0dh8uzlbv 1s linear infinite;
}

@keyframes spin-b-p0dh8uzlbv {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-p0dh8uzlbv] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

.error-container[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    padding: 40px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
}

.error-container i[b-p0dh8uzlbv] {
    font-size: 48px;
    color: var(--BEC-colorError);
}

.error-container p[b-p0dh8uzlbv] {
    color: var(--BEC-colorNeutralForeground1);
    font-size: 14px;
    margin: 0;
    text-align: center;
}

@media (max-width: 768px) {
    .erp-page-header[b-p0dh8uzlbv] {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
    }

    .stats-container[b-p0dh8uzlbv] {
        width: 100%;
        justify-content: space-between;
    }

    .page-title[b-p0dh8uzlbv] {
        font-size: 18px;
    }

    [b-p0dh8uzlbv] .e-toolbar {
        margin: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS) !important;
    }
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-p0dh8uzlbv] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-p0dh8uzlbv] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-p0dh8uzlbv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-p0dh8uzlbv] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-p0dh8uzlbv] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-p0dh8uzlbv] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-p0dh8uzlbv] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-p0dh8uzlbv] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-p0dh8uzlbv] {
    animation: fadeInUp-b-p0dh8uzlbv 0.3s ease-out;
}

.step-title[b-p0dh8uzlbv] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-p0dh8uzlbv] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-p0dh8uzlbv] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-p0dh8uzlbv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-p0dh8uzlbv]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-p0dh8uzlbv]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-p0dh8uzlbv]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-p0dh8uzlbv]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-p0dh8uzlbv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-p0dh8uzlbv] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-p0dh8uzlbv] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-p0dh8uzlbv] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-p0dh8uzlbv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-p0dh8uzlbv] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-p0dh8uzlbv] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-p0dh8uzlbv] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-p0dh8uzlbv] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-p0dh8uzlbv] {
    background: #f3f2f1;
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-help-icon-lg[b-p0dh8uzlbv] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-p0dh8uzlbv] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/User/Security/UserSessionAdministration.razor.rz.scp.css */
/* ========================================
   USER SESSION ADMINISTRATION - COMPREHENSIVE STYLES
   Used on: UserSessionAdministration.razor
   
   Monitor active sessions, track login history, and manage authentication.
   100% Identical to Profile Administration Header & Toolbar
   ======================================== */

/* ========================================
   ERP PAGE CONTAINER
   ======================================== */
.erp-page-container[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - 100% IDENTICAL TO SYSTEM MODULES
   ======================================== */
.erp-page-header[b-lillroxeb1] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-lillroxeb1] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-lillroxeb1] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-lillroxeb1] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-lillroxeb1] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-lillroxeb1] {
    transform: scale(0.98);
}

.page-subtitle[b-lillroxeb1] {
    display: none;
}

.header-right[b-lillroxeb1] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-lillroxeb1] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-lillroxeb1] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-lillroxeb1] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider[b-lillroxeb1] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-lillroxeb1] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to Attendance - Back Office
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-lillroxeb1] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-lillroxeb1] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-lillroxeb1] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-lillroxeb1] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-lillroxeb1] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-lillroxeb1] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-lillroxeb1] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-lillroxeb1] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-lillroxeb1] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-lillroxeb1] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-lillroxeb1] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-lillroxeb1] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-lillroxeb1] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-lillroxeb1] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-lillroxeb1] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-lillroxeb1] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-lillroxeb1] .e-toolbar .e-textbox.e-input-group,
[b-lillroxeb1] .e-toolbar .e-input-group.e-control-wrapper,
[b-lillroxeb1] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-lillroxeb1] .e-toolbar .e-textbox.e-input-group .e-input,
[b-lillroxeb1] .e-toolbar .e-input-group .e-input,
[b-lillroxeb1] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-lillroxeb1] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-lillroxeb1] .e-toolbar .e-input-group:focus-within,
[b-lillroxeb1] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-lillroxeb1] .e-toolbar .e-textbox .e-input-group-icon,
[b-lillroxeb1] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-lillroxeb1] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-lillroxeb1] .e-toolbar .e-input-group .e-input::placeholder,
[b-lillroxeb1] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* Ensure toolbar item containing search is properly aligned */
[b-lillroxeb1] .e-toolbar .e-toolbar-item[align="Right"] {
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* ========================================
   TAB CONTAINER
   ======================================== */
.tab-container[b-lillroxeb1] {
    padding: 0;
    background: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   FILTERS BAR (Login History Tab)
   ======================================== */
.filters-bar[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin-bottom: var(--BEC-spacingHorizontalM);
    flex-wrap: wrap;
}

.filter-group[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.filter-group--search[b-lillroxeb1] {
    margin-left: auto;
}

.filter-label[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    white-space: nowrap;
}

.filter-buttons[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.filter-button[b-lillroxeb1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalXS);
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalM);
    height: 32px;
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    font-family: var(--BEC-fontFamilyBase);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.filter-button:hover:not(.active)[b-lillroxeb1] {
    background: var(--BEC-colorNeutralBackground3);
    border-color: var(--BEC-colorNeutralStroke2);
    transform: translateY(-1px);
}

.filter-button.active[b-lillroxeb1] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
    box-shadow: var(--BEC-shadow2);
}

.filter-button--success.active[b-lillroxeb1] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground1);
    border-color: var(--BEC-colorPaletteGreenBorder1);
}

.filter-button--danger.active[b-lillroxeb1] {
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground1);
    border-color: var(--BEC-colorPaletteRedBorder1);
}

.filter-divider[b-lillroxeb1] {
    width: 1px;
    height: 24px;
    background: var(--BEC-colorNeutralStroke1);
}

.filter-spacer[b-lillroxeb1] {
    flex: 1;
}

.tab-content[b-lillroxeb1] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    min-height: calc(100vh - 250px);
}

/* ========================================
   STATUS BADGES
   ======================================== */
.status-badge[b-lillroxeb1] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    padding: 4px 10px;
    border-radius: var(--BEC-borderRadiusLarge);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.status-badge i[b-lillroxeb1] {
    font-size: 10px;
}

.status-badge--success[b-lillroxeb1] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorPaletteGreenForeground1);
    border: 1px solid var(--BEC-colorPaletteGreenBorder1);
}

.status-badge--warning[b-lillroxeb1] {
    background: var(--BEC-colorPaletteYellowBackground1);
    color: var(--BEC-colorPaletteYellowForeground1);
    border: 1px solid var(--BEC-colorPaletteYellowBorder1);
}

.status-badge--danger[b-lillroxeb1] {
    background: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
    border: 1px solid var(--BEC-colorPaletteRedBorder1);
}

.status-badge--info[b-lillroxeb1] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-state[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    min-height: 400px;
    padding: var(--BEC-spacingHorizontalXXXL);
}

.loading-spinner[b-lillroxeb1] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-lillroxeb1 1s linear infinite;
}

@keyframes spin-b-lillroxeb1 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-state p[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-state[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    min-height: 400px;
    padding: var(--BEC-spacingHorizontalXXXL);
    text-align: center;
}

.error-state i[b-lillroxeb1] {
    font-size: 64px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-state h3[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.error-state p[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    line-height: 1.6;
    max-width: 500px;
}

.retry-button[b-lillroxeb1] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    font-family: var(--BEC-fontFamilyBase);
    cursor: pointer;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.retry-button:hover[b-lillroxeb1] {
    background: var(--BEC-colorBrandBackgroundHover);
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow8);
}

/* ========================================
   EMPTY STATE
   ======================================== */
.empty-state[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    min-height: 400px;
    padding: var(--BEC-spacingHorizontalXXXL);
    text-align: center;
}

.empty-state i[b-lillroxeb1] {
    font-size: 64px;
    color: var(--BEC-colorNeutralForeground4);
    opacity: 0.6;
}

.empty-state h3[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.empty-state p[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
    line-height: 1.6;
}

/* ========================================
   PLACEHOLDER STATE (Phase 3 Coming Soon)
   ======================================== */
.content-placeholder[b-lillroxeb1] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: var(--BEC-spacingHorizontalXXXL);
}

.placeholder-card[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    text-align: center;
    max-width: 600px;
}

.placeholder-icon[b-lillroxeb1] {
    font-size: 64px;
    color: var(--BEC-colorBrandForeground1);
    opacity: 0.6;
}

.placeholder-title[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.placeholder-message[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    line-height: 1.6;
}

/* ========================================
   DIALOG STYLING (Phase 4)
   ======================================== */

/* Dialog Header */
.dialog-header[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.dialog-header i[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase500);
}

.dialog-header--info[b-lillroxeb1] {
    color: var(--BEC-colorBrandForeground1);
    border-bottom: 3px solid var(--BEC-colorBrandBackground);
}

.dialog-header--info i[b-lillroxeb1] {
    color: var(--BEC-colorBrandForeground1);
}

.dialog-header--warning[b-lillroxeb1] {
    color: var(--BEC-colorPaletteYellowForeground2);
    border-bottom: 3px solid var(--BEC-colorPaletteYellowBorder1);
}

.dialog-header--warning i[b-lillroxeb1] {
    color: var(--BEC-colorPaletteYellowForeground1);
}

.dialog-header--danger[b-lillroxeb1] {
    color: var(--BEC-colorPaletteRedForeground1);
    border-bottom: 3px solid var(--BEC-colorPaletteRedBorder1);
}

.dialog-header--danger i[b-lillroxeb1] {
    color: var(--BEC-colorPaletteRedForeground1);
}

/* Dialog Content */
.dialog-content[b-lillroxeb1] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
}

.dialog-message[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    line-height: 1.6;
}

.dialog-warning[b-lillroxeb1] {
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorPaletteYellowBackground1);
    border: 1px solid var(--BEC-colorPaletteYellowBorder1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteYellowForeground2);
    margin: 0;
    line-height: 1.5;
}

.dialog-warning i[b-lillroxeb1] {
    color: var(--BEC-colorPaletteYellowForeground1);
    margin-top: 2px;
    flex-shrink: 0;
}

/* Dialog Footer */
.dialog-footer[b-lillroxeb1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

/* Dialog Buttons */
.dialog-button[b-lillroxeb1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    height: 36px;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    font-family: var(--BEC-fontFamilyBase);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.dialog-button:disabled[b-lillroxeb1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dialog-button--primary[b-lillroxeb1] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.dialog-button--primary:hover:not(:disabled)[b-lillroxeb1] {
    background: var(--BEC-colorBrandBackgroundHover);
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow4);
}

.dialog-button--secondary[b-lillroxeb1] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.dialog-button--secondary:hover:not(:disabled)[b-lillroxeb1] {
    background: var(--BEC-colorNeutralBackground3);
    border-color: var(--BEC-colorNeutralStroke2);
}

.dialog-button--danger[b-lillroxeb1] {
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground1);
    border: 1px solid var(--BEC-colorPaletteRedBorder1);
}

.dialog-button--danger:hover:not(:disabled)[b-lillroxeb1] {
    background: var(--BEC-colorPaletteRedForeground1);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow4);
}

/* Session Details Dialog */
.session-details[b-lillroxeb1] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
}

.details-section[b-lillroxeb1] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.details-section:last-child[b-lillroxeb1] {
    margin-bottom: 0;
}

.section-title[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
}

.section-title i[b-lillroxeb1] {
    color: var(--BEC-colorBrandForeground1);
}

.details-grid[b-lillroxeb1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--BEC-spacingHorizontalM);
}

.detail-item[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value[b-lillroxeb1] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
}

/* Syncfusion Dialog Overrides */
[b-lillroxeb1] .confirmation-dialog .e-dlg-header-content,
[b-lillroxeb1] .details-dialog .e-dlg-header-content {
    padding: 0 !important;
    background: transparent !important;
}

[b-lillroxeb1] .confirmation-dialog .e-dlg-content,
[b-lillroxeb1] .details-dialog .e-dlg-content {
    padding: 0 !important;
}

[b-lillroxeb1] .confirmation-dialog .e-footer-content,
[b-lillroxeb1] .details-dialog .e-footer-content {
    padding: 0 !important;
    border-top: none !important;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 1200px) {
    .statistics-cards[b-lillroxeb1] {
        grid-template-columns: repeat(2, 1fr);
    }

    .details-grid[b-lillroxeb1] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-header-content[b-lillroxeb1] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    .statistics-cards[b-lillroxeb1] {
        grid-template-columns: 1fr;
    }

    .BEC-CommandBar[b-lillroxeb1] {
        flex-wrap: wrap;
        gap: var(--BEC-spacingHorizontalS);
    }

    .action-divider[b-lillroxeb1] {
        display: none;
    }

    .search-box[b-lillroxeb1] {
        order: -1;
        width: 100%;
        min-width: auto;
    }

    .BEC-CommandBar-button span[b-lillroxeb1] {
        display: none;
    }

    .BEC-CommandBar-button[b-lillroxeb1] {
        padding: var(--BEC-spacingHorizontalS);
        width: 36px;
    }

    .filters-bar[b-lillroxeb1] {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-group--search[b-lillroxeb1] {
        margin-left: 0;
        width: 100%;
    }
}

/* ========================================
   HELP WIZARD SIDEBAR STYLING
   ======================================== */
[b-lillroxeb1] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-lillroxeb1] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-lillroxeb1] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   WIZARD SIDEBAR STYLING
   ======================================== */
.sidebar-header[b-lillroxeb1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-lillroxeb1] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-lillroxeb1] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-lillroxeb1] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-lillroxeb1] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-lillroxeb1] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-lillroxeb1] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-lillroxeb1] {
    margin-bottom: 24px;
    animation: fadeInUp-b-lillroxeb1 0.6s ease;
}

.step-title[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-lillroxeb1] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-lillroxeb1] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-lillroxeb1] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-lillroxeb1] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-lillroxeb1] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-lillroxeb1] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-lillroxeb1] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-lillroxeb1] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-lillroxeb1] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-lillroxeb1] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-lillroxeb1] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-lillroxeb1] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-lillroxeb1] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-lillroxeb1] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-lillroxeb1] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-lillroxeb1] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-lillroxeb1] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-lillroxeb1] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-lillroxeb1] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-lillroxeb1] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-lillroxeb1] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-lillroxeb1] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-lillroxeb1] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-lillroxeb1] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.wizard-actions[b-lillroxeb1] {
    display: flex;
    gap: 12px;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-lillroxeb1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-lillroxeb1] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-lillroxeb1] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-lillroxeb1] {
    background: #e1dfdd;
}

.btn-next[b-lillroxeb1] {
    background: var(--BEC-colorBrandBackground);
    color: #ffffff;
}

.btn-next:hover:not(:disabled)[b-lillroxeb1] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-lillroxeb1] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-lillroxeb1] {
    background: #0b5c0b;
}

.btn i[b-lillroxeb1] {
    font-size: 14px;
}

/* Animations */
@keyframes fadeInUp-b-lillroxeb1 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   NOTIFICATION DIALOG STYLING
   ======================================== */

/* Success Notification */
[b-lillroxeb1] .notification-success .e-dlg-header-content {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

[b-lillroxeb1] .notification-success .e-dlg-header-content i {
    color: white;
}

[b-lillroxeb1] .notification-success .e-footer-content .e-btn-primary {
    background: #10b981;
    border-color: #10b981;
}

/* Error Notification */
[b-lillroxeb1] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-lillroxeb1] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-lillroxeb1] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

/* Warning Notification */
[b-lillroxeb1] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-lillroxeb1] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-lillroxeb1] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Info Notification */
[b-lillroxeb1] .notification-info .e-dlg-header-content {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

[b-lillroxeb1] .notification-info .e-dlg-header-content i {
    color: white;
}

[b-lillroxeb1] .notification-info .e-footer-content .e-btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-lillroxeb1] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-lillroxeb1] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-lillroxeb1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-lillroxeb1] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-lillroxeb1] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-lillroxeb1] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-lillroxeb1] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-lillroxeb1] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-lillroxeb1] {
    animation: fadeInUp-b-lillroxeb1 0.3s ease-out;
}

.step-title[b-lillroxeb1] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-lillroxeb1] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-lillroxeb1] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-lillroxeb1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-lillroxeb1]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-lillroxeb1]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-lillroxeb1]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-lillroxeb1]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-lillroxeb1] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-lillroxeb1] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-lillroxeb1] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-lillroxeb1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-lillroxeb1] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-lillroxeb1] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-lillroxeb1] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-lillroxeb1] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-lillroxeb1] {
    background: #f3f2f1;
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-dialog-header-flex[b-lillroxeb1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-notification-icon[b-lillroxeb1] {
    font-size: 20px;
}

.adm-preline-text[b-lillroxeb1] {
    white-space: pre-line;
}

.adm-text-brand[b-lillroxeb1] {
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-lillroxeb1] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Administration/Administration/User/Settings/UserPreferenceAdministration.razor.rz.scp.css */
/* ========================================
   USER PREFERENCE ADMINISTRATION PAGE
   100% Identical to Profile Administration
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-2kj826wd10] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   Matches System Modules exactly
   ======================================== */
.erp-page-header[b-2kj826wd10] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-2kj826wd10] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-2kj826wd10] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-2kj826wd10] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-2kj826wd10] {
    display: none;
}

.header-right[b-2kj826wd10] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-2kj826wd10] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-2kj826wd10] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-2kj826wd10] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-2kj826wd10] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-2kj826wd10] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-2kj826wd10] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to User Sessions
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-2kj826wd10] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-2kj826wd10] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-2kj826wd10] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-2kj826wd10] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-2kj826wd10] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-2kj826wd10] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-2kj826wd10] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-2kj826wd10] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-2kj826wd10] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-2kj826wd10] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-2kj826wd10] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-2kj826wd10] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-2kj826wd10] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-2kj826wd10] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-2kj826wd10] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-2kj826wd10] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-2kj826wd10] .e-toolbar .e-textbox.e-input-group,
[b-2kj826wd10] .e-toolbar .e-input-group.e-control-wrapper,
[b-2kj826wd10] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 300px !important;
    vertical-align: middle !important;
    position: relative !important;
}

[b-2kj826wd10] .e-toolbar .e-textbox.e-input-group .e-input,
[b-2kj826wd10] .e-toolbar .e-input-group .e-input,
[b-2kj826wd10] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    display: flex !important;
    align-items: center !important;
}

[b-2kj826wd10] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-2kj826wd10] .e-toolbar .e-input-group:focus-within,
[b-2kj826wd10] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-2kj826wd10] .e-toolbar .e-textbox .e-input-group-icon,
[b-2kj826wd10] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    width: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Placeholder Alignment - Perfect Centering */
[b-2kj826wd10] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-2kj826wd10] .e-toolbar .e-input-group .e-input::placeholder,
[b-2kj826wd10] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    opacity: 1 !important;
}

/* ========================================
   CONTENT PLACEHOLDER (Temporary)
   ======================================== */
.content-placeholder[b-2kj826wd10] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: var(--BEC-colorNeutralBackground2);
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    margin: 20px;
}

.content-placeholder-inner[b-2kj826wd10] {
    text-align: center;
    padding: 40px;
}

.placeholder-icon[b-2kj826wd10] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.placeholder-title[b-2kj826wd10] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.placeholder-message[b-2kj826wd10] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-2kj826wd10] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-2kj826wd10] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-2kj826wd10 1s linear infinite;
}

@keyframes spin-b-2kj826wd10 {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-2kj826wd10] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-2kj826wd10] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-system[b-2kj826wd10] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-user[b-2kj826wd10] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

/* ========================================
   DIALOG STYLING
   ======================================== */
.dialog-header[b-2kj826wd10] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.dialog-header i[b-2kj826wd10] {
    color: var(--BEC-colorBrandForeground1);
}

.dialog-content[b-2kj826wd10] {
    padding: 20px;
}

.dialog-footer[b-2kj826wd10] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
.form-group[b-2kj826wd10] {
    margin-bottom: 16px;
}

.form-group label[b-2kj826wd10] {
    display: block;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 6px;
}

.form-group .required[b-2kj826wd10] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.form-value[b-2kj826wd10] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-2kj826wd10] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* ========================================
   DIALOG TEXT STYLING
   ======================================== */
.warning-text[b-2kj826wd10] {
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 8px 0;
}

.info-text[b-2kj826wd10] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 12px;
    margin: 8px 0;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.info-text i[b-2kj826wd10] {
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
[b-2kj826wd10] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-2kj826wd10] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-2kj826wd10] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-2kj826wd10] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

/* ========================================
   WIZARD SIDEBAR STYLING (100% Copy from UserBranchAdministration)
   ======================================== */
.sidebar-header[b-2kj826wd10] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-2kj826wd10] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-2kj826wd10] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-2kj826wd10] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-2kj826wd10] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-2kj826wd10] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-2kj826wd10] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-2kj826wd10] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

.wizard-step[b-2kj826wd10] {
    max-width: 100%;
}

.step-title[b-2kj826wd10] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
}

.step-title i[b-2kj826wd10] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-2kj826wd10] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
}

/* Form Group */
.form-group[b-2kj826wd10] {
    margin-bottom: 20px;
}

.form-label[b-2kj826wd10] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-2kj826wd10]::after {
    content: ' *';
    color: #d13438;
}

.form-row[b-2kj826wd10] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* Review Section */
.review-section[b-2kj826wd10] {
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.review-item[b-2kj826wd10] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
}

.review-item:last-child[b-2kj826wd10] {
    border-bottom: none;
}

.review-label[b-2kj826wd10] {
    font-weight: 600;
    color: #323130;
    font-size: 14px;
}

.review-value[b-2kj826wd10] {
    color: #605e5c;
    font-size: 14px;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

/* Sidebar Footer */
.sidebar-footer[b-2kj826wd10] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-2kj826wd10] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-2kj826wd10] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-2kj826wd10] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-2kj826wd10] {
    background: #e1dfdd;
}

.btn-primary[b-2kj826wd10] {
    background: #0078d4;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-2kj826wd10] {
    background: #106ebe;
}

.btn-success[b-2kj826wd10] {
    background: #107c10;
    color: white;
}

.btn-success:hover:not(:disabled)[b-2kj826wd10] {
    background: #0b5a0b;
    box-shadow: 0 2px 8px rgba(16, 124, 16, 0.3);
}

.btn i[b-2kj826wd10] {
    font-size: 14px;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .erp-page-header[b-2kj826wd10] {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
    }

    .stats-container[b-2kj826wd10] {
        width: 100%;
        justify-content: space-between;
    }

    .page-title[b-2kj826wd10] {
        font-size: 18px;
    }

    [b-2kj826wd10] .e-toolbar {
        margin: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS) !important;
    }

    .form-row[b-2kj826wd10] {
        grid-template-columns: 1fr;
    }

    [b-2kj826wd10] .e-dialog {
        width: 95% !important;
    }

    [b-2kj826wd10] .assignment-wizard-sidebar {
        width: 90% !important;
    }

    .sidebar-header[b-2kj826wd10],
    .sidebar-footer[b-2kj826wd10] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-2kj826wd10] {
        padding: 16px 20px;
    }

    .form-row[b-2kj826wd10] {
        grid-template-columns: 1fr;
    }

    .review-item[b-2kj826wd10] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .review-value[b-2kj826wd10] {
        max-width: 100%;
        text-align: left;
    }
}

/* ========================================
   HELP ICON BUTTON
   ======================================== */
.help-icon-btn[b-2kj826wd10] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-2kj826wd10] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-2kj826wd10] {
    transform: scale(0.98);
}

/* ========================================
   HELP WIZARD SIDEBAR STYLING
   ======================================== */
[b-2kj826wd10] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Ensure help wizard doesn't block interaction with page content */
[b-2kj826wd10] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-2kj826wd10] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-2kj826wd10] {
    max-width: 100%;
    text-align: left;
}

.step-icon[b-2kj826wd10] {
    margin-bottom: 24px;
    animation: fadeInUp-b-2kj826wd10 0.6s ease;
}

.step-icon i[b-2kj826wd10] {
    font-size: 48px;
}

.step-title[b-2kj826wd10] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-2kj826wd10] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-2kj826wd10] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-2kj826wd10] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-2kj826wd10] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-2kj826wd10] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-2kj826wd10] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-2kj826wd10] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-2kj826wd10] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-2kj826wd10] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-2kj826wd10] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-2kj826wd10] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-2kj826wd10] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-2kj826wd10] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-2kj826wd10] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-2kj826wd10] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-2kj826wd10] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-2kj826wd10] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-2kj826wd10] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-2kj826wd10] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-2kj826wd10] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-2kj826wd10] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-2kj826wd10] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-2kj826wd10] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-2kj826wd10] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-2kj826wd10] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-2kj826wd10] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-2kj826wd10] {
    display: flex;
    gap: 12px;
}

/* Animations */
@keyframes fadeInUp-b-2kj826wd10 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   COLUMN CHOOSER STYLES
   ======================================== */
.column-chooser-actions[b-2kj826wd10] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-2kj826wd10] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-2kj826wd10] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-2kj826wd10] {
    font-size: 12px;
}

.column-chooser-list[b-2kj826wd10] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-2kj826wd10] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-2kj826wd10] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-2kj826wd10]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-2kj826wd10]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLING - GOLD STANDARD
   ======================================== */
[b-2kj826wd10] .column-chooser-sidebar {
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid #e0e0e0;
    z-index: 2000 !important;
}

/* Hide the overlay specifically for this sidebar */
[b-2kj826wd10] .column-chooser-sidebar+.e-sidebar-overlay {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sidebar-header[b-2kj826wd10] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #faf9f8;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-title[b-2kj826wd10] {
    font-size: 18px;
    font-weight: 600;
    color: #323130;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-title i[b-2kj826wd10] {
    color: var(--BEC-colorBrandBackground);
}

.sidebar-close-btn[b-2kj826wd10] {
    background: transparent;
    border: none;
    color: #605e5c;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.sidebar-close-btn:hover[b-2kj826wd10] {
    color: #323130;
    background: #edebe9;
}

.sidebar-content[b-2kj826wd10] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.wizard-step[b-2kj826wd10] {
    animation: fadeInUp-b-2kj826wd10 0.3s ease-out;
}

.step-title[b-2kj826wd10] {
    font-size: 16px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-title i[b-2kj826wd10] {
    color: var(--BEC-colorBrandBackground);
}

.step-description[b-2kj826wd10] {
    font-size: 13px;
    color: #605e5c;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Column List Styling */
.column-list[b-2kj826wd10] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom Scrollbar for Column List */
.column-list[b-2kj826wd10]::-webkit-scrollbar {
    width: 6px;
}

.column-list[b-2kj826wd10]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.column-list[b-2kj826wd10]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.column-list[b-2kj826wd10]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.column-item[b-2kj826wd10] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.column-item:hover[b-2kj826wd10] {
    background: #f3f2f1;
    border-color: #c8c6c4;
}

.column-item input[type="checkbox"][b-2kj826wd10] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandBackground);
}

.column-item label[b-2kj826wd10] {
    flex: 1;
    font-size: 14px;
    color: #323130;
    cursor: pointer;
    user-select: none;
    text-align: left;
}

.column-actions[b-2kj826wd10] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.action-link[b-2kj826wd10] {
    font-size: 12px;
    color: var(--BEC-colorBrandBackground);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-link:hover[b-2kj826wd10] {
    color: var(--BEC-colorBrandBackgroundHover);
    text-decoration: underline;
}

.sidebar-footer[b-2kj826wd10] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

.btn-secondary[b-2kj826wd10] {
    background: #ffffff;
    color: #323130;
    border: 1px solid #8a8886;
}

.btn-secondary:hover[b-2kj826wd10] {
    background: #f3f2f1;
}

/* ========================================
   ADMIN INLINE-STYLE MIGRATION CLASSES
   ======================================== */
.adm-dialog-header-flex[b-2kj826wd10] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-notification-icon[b-2kj826wd10] {
    font-size: 20px;
}

.adm-preline-text[b-2kj826wd10] {
    white-space: pre-line;
}

.adm-help-icon-lg[b-2kj826wd10] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.adm-text-separator[b-2kj826wd10] {
    color: #e0e0e0;
}
/* /Components/Pages/MainLayout/Approval/Workflow.razor.rz.scp.css */
/* Fluent Focus Design Styles */
:root[b-ju80plb9qk] {
    --bg-color: #f0f2f5;
    --white: #ffffff;
    --primary: #0f6cbd;
    --primary-hover: #005a9e;
    --text-primary: #242424;
    --text-secondary: #616161;
    --border-color: #e0e0e0;
    --header-height: 60px;
}

.workflow-container[b-ju80plb9qk] {
    font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    height: calc(100vh - 60px);
    /* Adjust for main layout header if needed */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Command Bar */
.command-bar[b-ju80plb9qk] {
    background: var(--white);
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 24px;
    border-bottom: 1px solid var(--border-color);
    justify-content: space-between;
    flex-shrink: 0;
}

.page-title[b-ju80plb9qk] {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
}

.actions[b-ju80plb9qk] {
    display: flex;
    gap: 12px;
}

.btn[b-ju80plb9qk] {
    padding: 6px 16px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    text-decoration: none;
}

.btn:disabled[b-ju80plb9qk] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary[b-ju80plb9qk] {
    background-color: var(--primary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-ju80plb9qk] {
    background-color: var(--primary-hover);
}

.btn-light[b-ju80plb9qk],
.btn-secondary[b-ju80plb9qk],
.btn-outline[b-ju80plb9qk] {
    background-color: white;
    border-color: #d1d1d1;
    color: var(--text-primary);
}

.btn-light:hover:not(:disabled)[b-ju80plb9qk],
.btn-secondary:hover:not(:disabled)[b-ju80plb9qk],
.btn-outline:hover:not(:disabled)[b-ju80plb9qk] {
    background-color: #f5f5f5;
}

.btn-danger[b-ju80plb9qk] {
    background-color: #d92b2b;
    color: white;
    border-color: #d92b2b;
}

.btn-danger:hover:not(:disabled)[b-ju80plb9qk] {
    background-color: #a80000;
}

.btn-success[b-ju80plb9qk] {
    background-color: #107c10;
    color: white;
    border-color: #107c10;
}

.btn-success:hover:not(:disabled)[b-ju80plb9qk] {
    background-color: #0b5a0b;
}

/* Stats Ribbon */
.stats-ribbon[b-ju80plb9qk] {
    background: white;
    padding: 16px 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.stat-item[b-ju80plb9qk] {
    display: flex;
    flex-direction: column;
    padding: 0 12px;
    border-left: 4px solid transparent;
}

.stat-item.active[b-ju80plb9qk] {
    border-color: var(--primary);
}

.stat-item.danger[b-ju80plb9qk] {
    border-color: #d92b2b;
}

.stat-item.warning[b-ju80plb9qk] {
    border-color: #ffb900;
}

.stat-item.info[b-ju80plb9qk] {
    border-color: #0078d4;
}

.stat-value[b-ju80plb9qk] {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.stat-label[b-ju80plb9qk] {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Layout */
.main-layout[b-ju80plb9qk] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Sidebar Tabs */
.tab-sidebar[b-ju80plb9qk] {
    width: 240px;
    background: white;
    border-right: 1px solid var(--border-color);
    padding-top: 20px;
    flex-shrink: 0;
}

.tab-btn[b-ju80plb9qk] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 24px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    gap: 12px;
    border-left: 3px solid transparent;
}

.tab-btn:hover[b-ju80plb9qk] {
    background-color: #f0f0f0;
}

.tab-btn.active[b-ju80plb9qk] {
    font-weight: 600;
    background-color: #eff6fc;
    border-left-color: var(--primary);
    color: var(--primary);
}

.badge[b-ju80plb9qk] {
    margin-left: auto;
    background: var(--primary);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
}

/* Content Area */
.content-area[b-ju80plb9qk] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

/* Tab Content Wrapper */
.tab-content[b-ju80plb9qk] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Filters */
.filters-bar[b-ju80plb9qk] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    background: white;
    padding: 12px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.search-input[b-ju80plb9qk] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    font-family: inherit;
    min-width: 200px;
}

.select-filter[b-ju80plb9qk],
.form-control[b-ju80plb9qk] {
    padding: 8px 12px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    background: white;
    font-family: inherit;
    color: var(--text-primary);
}

.form-control[b-ju80plb9qk] {
    width: 100%;
    box-sizing: border-box;
}

.filter-separator[b-ju80plb9qk] {
    width: 1px;
    height: 24px;
    background: #e0e0e0;
    margin: 0 8px;
}

/* Data List */
.approval-list[b-ju80plb9qk] {
    background: white;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.approval-list-body[b-ju80plb9qk] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}

.list-header[b-ju80plb9qk] {
    display: grid;
    grid-template-columns: 40px minmax(200px, 2fr) 150px 150px 150px 100px 100px;
    padding: 12px 16px;
    background: #fafafa;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 12px;
    color: var(--text-secondary);
    align-items: center;
    flex-shrink: 0;
}

.list-item[b-ju80plb9qk] {
    display: grid;
    grid-template-columns: 40px minmax(200px, 2fr) 150px 150px 150px 100px 100px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.1s;
}

.list-item:hover[b-ju80plb9qk] {
    background-color: #f5f5f5;
}

.list-item:last-child[b-ju80plb9qk] {
    border-bottom: none;
}

.cell-main[b-ju80plb9qk] {
    display: flex;
    flex-direction: column;
}

.main-text[b-ju80plb9qk] {
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 4px;
}

.sub-text[b-ju80plb9qk] {
    font-size: 12px;
    color: var(--text-secondary);
}

.status-badge[b-ju80plb9qk] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: #eee;
}

.status-badge.pending[b-ju80plb9qk] {
    background: #fff4ce;
    color: #5c4300;
}

.status-badge.approved[b-ju80plb9qk] {
    background: #dff6dd;
    color: #107c10;
}

.status-badge.rejected[b-ju80plb9qk] {
    background: #fde7e9;
    color: #a80000;
}

.status-badge.sla[b-ju80plb9qk] {
    background: #fde7e9;
    color: #a80000;
}

.status-badge.escalated[b-ju80plb9qk] {
    background: #fdf6e7;
    color: #8a3c00;
}

.status-badge.active[b-ju80plb9qk] {
    background: #e1dfdd;
    color: #201f1e;
}

.status-badge.inactive[b-ju80plb9qk] {
    background: #f3f2f1;
    color: #a19f9d;
}

.user-cell[b-ju80plb9qk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.avatar-circle[b-ju80plb9qk] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
}

.action-cell[b-ju80plb9qk] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}

.list-item:hover .action-cell[b-ju80plb9qk] {
    opacity: 1;
}

/* Checkbox custom */
.custom-checkbox[b-ju80plb9qk] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bulk Actions Message */
.bulk-actions-bar[b-ju80plb9qk] {
    background: #eff6fc;
    color: var(--primary);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    margin-bottom: 12px;
    border-radius: 4px;
}

.selection-count[b-ju80plb9qk] {
    font-weight: 600;
}

/* Pagination */
.pagination-container[b-ju80plb9qk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    margin-top: auto;
    flex-shrink: 0;
}

.pagination-info[b-ju80plb9qk] {
    font-size: 13px;
    color: var(--text-secondary);
}

.pagination[b-ju80plb9qk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-numbers[b-ju80plb9qk] {
    font-size: 13px;
    font-weight: 600;
}

/* Empty State */
.empty-state[b-ju80plb9qk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--text-secondary);
    text-align: center;
}

.empty-state i[b-ju80plb9qk],
.empty-state svg[b-ju80plb9qk] {
    font-size: 48px;
    margin-bottom: 16px;
    color: #d1d1d1;
}

.empty-state h3[b-ju80plb9qk] {
    margin: 0 0 8px 0;
    color: var(--text-primary);
}

/* Loading State */
.loading-state[b-ju80plb9qk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.spinner[b-ju80plb9qk] {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin-b-ju80plb9qk 1s linear infinite;
    margin-bottom: 12px;
}

@keyframes spin-b-ju80plb9qk {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Delegation Card (Adaptive for new layout) */
.delegations-grid[b-ju80plb9qk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.delegation-card[b-ju80plb9qk] {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.delegation-header[b-ju80plb9qk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--primary);
}

.delegation-row[b-ju80plb9qk] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f0;
}

.delegation-row:last-child[b-ju80plb9qk] {
    border-bottom: none;
}

.delegation-row .label[b-ju80plb9qk] {
    color: var(--text-secondary);
}

.delegation-row .value[b-ju80plb9qk] {
    font-weight: 500;
}

/* Drawer / Side Panel (Right Side Wizard) */
.drawer-overlay[b-ju80plb9qk] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1500;
    display: flex;
    justify-content: flex-end;
    /* Align to right */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: opacity 0.3s;
}

.drawer-panel[b-ju80plb9qk] {
    background: white;
    width: 600px;
    max-width: 90vw;
    height: 100vh;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    animation: slideInRight-b-ju80plb9qk 0.35s cubic-bezier(0.1, 0.9, 0.2, 1);
    /* Smoother bezier */
    position: relative;
    border-left: 1px solid rgba(0, 0, 0, 0.05);
}

.drawer-panel.large[b-ju80plb9qk] {
    width: 800px;
}

@keyframes slideInRight-b-ju80plb9qk {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.drawer-header[b-ju80plb9qk] {
    padding: 24px 32px;
    border-bottom: 1px solid var(--border-color);
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.drawer-header h3[b-ju80plb9qk] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.btn-close-drawer[b-ju80plb9qk] {
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

.btn-close-drawer:hover[b-ju80plb9qk] {
    background: #eaeaea;
    color: var(--text-primary);
}

.drawer-body[b-ju80plb9qk] {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
    background: white;
}

.drawer-footer[b-ju80plb9qk] {
    padding: 24px 32px;
    border-top: 1px solid var(--border-color);
    background: #fafafa;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    flex-shrink: 0;
}

/* Form refinement inside drawer */
.form-group label[b-ju80plb9qk] {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-control[b-ju80plb9qk] {
    border: 1px solid #d1d1d1;
    padding: 10px 12px;
    border-radius: 4px;
    transition: border-color 0.2s;
}

.form-control:focus[b-ju80plb9qk] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(15, 108, 189, 0.1);
}

/* Improve list items in drawer */
.drawer-body .list-item[b-ju80plb9qk] {
    padding: 16px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: flex-start;
}

.drawer-body .list-item:last-child[b-ju80plb9qk] {
    border-bottom: none;
}


/* Toast */
.toast[b-ju80plb9qk] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2000;
    border-left: 4px solid var(--primary);
    animation: slideIn-b-ju80plb9qk 0.3s ease-out;
}

.toast-success[b-ju80plb9qk] {
    border-left-color: #107c10;
}

.toast-error[b-ju80plb9qk] {
    border-left-color: #d92b2b;
}

.toast-warning[b-ju80plb9qk] {
    border-left-color: #ffb900;
}

@keyframes slideIn-b-ju80plb9qk {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Trip Type Badges for Travel Request Details */
.status-badge.one-way[b-ju80plb9qk] {
    background: #e8f4fd;
    color: #0078d4;
}

.status-badge.round-trip[b-ju80plb9qk] {
    background: #e8f5e9;
    color: #107c10;
}

.status-badge.multi-city[b-ju80plb9qk] {
    background: #f3e5f5;
    color: #7b1fa2;
}

.status-badge.default[b-ju80plb9qk] {
    background: #f5f5f5;
    color: #616161;
}

/* Running status badge for workflows */
.status-badge.running[b-ju80plb9qk] {
    background: #e3f2fd;
    color: #1976d2;
}

.status-badge.completed[b-ju80plb9qk] {
    background: #dff6dd;
    color: #107c10;
}

.status-badge.cancelled[b-ju80plb9qk] {
    background: #fde7e9;
    color: #a80000;
}

/* ============================================
   OPTIMISTIC UI - FAILURE BADGE STYLES
   ============================================ */

/* Failed status badge */
.status-badge.failed[b-ju80plb9qk] {
    background: linear-gradient(135deg, #ff4444, #cc0000);
    color: white;
    animation: pulse-error-b-ju80plb9qk 2s infinite;
    font-weight: 600;
}

@keyframes pulse-error-b-ju80plb9qk {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(255, 68, 68, 0);
    }
}

/* List item with failure */
.list-item.has-failure[b-ju80plb9qk] {
    background: linear-gradient(90deg, #fff5f5 0%, white 30%);
    border-left: 4px solid #d92b2b;
}

/* Inline failure badge */
.failure-badge[b-ju80plb9qk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #d92b2b;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
    animation: shake-b-ju80plb9qk 0.5s ease-in-out;
}

@keyframes shake-b-ju80plb9qk {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.failure-badge i[b-ju80plb9qk] {
    font-size: 10px;
}

/* Failure message under the item */
.failure-message[b-ju80plb9qk] {
    color: #d92b2b;
    font-size: 12px;
    margin-top: 4px;
    padding-left: 2px;
}

.failure-message a[b-ju80plb9qk] {
    color: #0f6cbd;
    text-decoration: underline;
    cursor: pointer;
}

.failure-message a:hover[b-ju80plb9qk] {
    color: #005a9e;
}

/* Priority class for failed items */
.priority-failed[b-ju80plb9qk] {
    position: relative;
}

.priority-failed[b-ju80plb9qk]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #d92b2b;
}

/* ============================================
   PERFORMANCE EVALUATION DETAILS
   ============================================ */

.pe-result-badge[b-ju80plb9qk] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pe-result-excellent[b-ju80plb9qk] {
    background: #dff6dd;
    color: #107c10;
}

.pe-result-very-good[b-ju80plb9qk] {
    background: #e3f2fd;
    color: #0f6cbd;
}

.pe-result-good[b-ju80plb9qk] {
    background: #fff4ce;
    color: #7a6400;
}

.pe-result-satisfactory[b-ju80plb9qk] {
    background: #fff1e0;
    color: #a36200;
}

.pe-result-needs-improvement[b-ju80plb9qk] {
    background: #fde7e9;
    color: #a80000;
}

.pe-result-na[b-ju80plb9qk] {
    background: #f5f5f5;
    color: #616161;
}

.pe-view-btn[b-ju80plb9qk] {
    border: 1px solid #0078d4;
    color: #fff;
    background: #0078d4;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 4px;
}

.pe-view-btn:hover:not(:disabled)[b-ju80plb9qk] {
    background: #005a9e;
    border-color: #005a9e;
    color: #fff;
}

/* ============================================
   MOBILE RESPONSIVE — ≤768px
   ============================================ */
@media (max-width: 768px) {

    /* Container: allow scrolling instead of fixed viewport height */
    .workflow-container[b-ju80plb9qk] {
        height: auto;
        min-height: calc(100vh - 60px);
        overflow: auto;
    }

    /* Command bar: stack title and actions vertically */
    .command-bar[b-ju80plb9qk] {
        flex-wrap: wrap;
        height: auto;
        padding: 12px 16px;
        gap: 12px;
    }

    .page-title[b-ju80plb9qk] {
        font-size: 16px;
    }

    .actions[b-ju80plb9qk] {
        width: 100%;
        justify-content: stretch;
    }

    .actions .btn[b-ju80plb9qk] {
        flex: 1;
        justify-content: center;
        min-height: 44px;
        font-size: 13px;
    }

    /* Stats ribbon: 2×2 grid with more breathing room */
    .stats-ribbon[b-ju80plb9qk] {
        grid-template-columns: repeat(2, 1fr);
        padding: 12px 16px;
        gap: 12px;
    }

    .stat-item[b-ju80plb9qk] {
        padding: 8px 12px;
    }

    .stat-value[b-ju80plb9qk] {
        font-size: 20px;
    }

    .stat-label[b-ju80plb9qk] {
        font-size: 11px;
    }

    /* Main layout: collapse from side-by-side to stacked */
    .main-layout[b-ju80plb9qk] {
        flex-direction: column;
        overflow: auto;
    }

    /* Sidebar tabs → horizontal scrollable row */
    .tab-sidebar[b-ju80plb9qk] {
        width: 100%;
        display: flex;
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-shrink: 0;
    }

    .tab-btn[b-ju80plb9qk] {
        flex: 1 0 auto;
        padding: 12px 16px;
        justify-content: center;
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
        min-height: 44px;
        font-size: 13px;
    }

    .tab-btn.active[b-ju80plb9qk] {
        border-left-color: transparent;
        border-bottom-color: var(--primary);
    }

    .badge[b-ju80plb9qk] {
        margin-left: 6px;
    }

    /* Content area: reduce padding */
    .content-area[b-ju80plb9qk] {
        padding: 12px;
    }

    /* Filters: full-width stacked */
    .filters-bar[b-ju80plb9qk] {
        flex-direction: column;
        gap: 8px;
        padding: 12px;
    }

    .search-input[b-ju80plb9qk] {
        min-width: unset;
        width: 100%;
        min-height: 44px;
    }

    .select-filter[b-ju80plb9qk] {
        width: 100%;
        min-height: 44px;
    }

    .filter-separator[b-ju80plb9qk] {
        display: none;
    }

    .filters-bar .btn[b-ju80plb9qk] {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    /* Approval list: card-style stacked layout */
    .list-header[b-ju80plb9qk] {
        display: none;
    }

    .list-item[b-ju80plb9qk] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 16px;
        grid-template-columns: none;
    }

    .cell-main[b-ju80plb9qk] {
        width: 100%;
    }

    .main-text[b-ju80plb9qk] {
        word-break: break-word;
        white-space: normal;
    }

    .sub-text[b-ju80plb9qk] {
        word-break: break-word;
        white-space: normal;
    }

    .user-cell[b-ju80plb9qk] {
        width: 100%;
    }

    .action-cell[b-ju80plb9qk] {
        opacity: 1;
        justify-content: flex-start;
        width: 100%;
        padding-top: 8px;
        border-top: 1px solid #f0f0f0;
    }

    .action-cell .btn[b-ju80plb9qk] {
        min-width: 44px;
        min-height: 44px;
    }

    .custom-checkbox[b-ju80plb9qk] {
        position: absolute;
        top: 16px;
        right: 16px;
    }

    .list-item[b-ju80plb9qk] {
        position: relative;
    }

    /* Bulk actions: wrap */
    .bulk-actions-bar[b-ju80plb9qk] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .bulk-actions-bar .btn[b-ju80plb9qk] {
        flex: 1;
        min-height: 44px;
        justify-content: center;
    }

    /* Pagination: stack */
    .pagination-container[b-ju80plb9qk] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
        text-align: center;
    }

    .pagination[b-ju80plb9qk] {
        justify-content: center;
    }

    .pagination .btn[b-ju80plb9qk] {
        min-height: 44px;
    }

    /* Delegation cards: single column */
    .delegations-grid[b-ju80plb9qk] {
        grid-template-columns: 1fr;
    }

    /* Drawer: full-width on mobile */
    .drawer-panel[b-ju80plb9qk] {
        width: 100vw;
        max-width: 100vw;
    }

    .drawer-panel.large[b-ju80plb9qk] {
        width: 100vw;
    }

    .drawer-header[b-ju80plb9qk] {
        padding: 16px;
    }

    .drawer-header h3[b-ju80plb9qk] {
        font-size: 17px;
    }

    .drawer-body[b-ju80plb9qk] {
        padding: 16px;
    }

    .drawer-footer[b-ju80plb9qk] {
        padding: 16px;
    }

    .drawer-footer .btn[b-ju80plb9qk] {
        min-height: 44px;
    }

    /* Empty/loading states: less padding */
    .empty-state[b-ju80plb9qk] {
        padding: 32px 16px;
    }

    .loading-state[b-ju80plb9qk] {
        padding: 32px 16px;
    }
}

/* ============================================
   SMALL MOBILE — ≤430px (iPhone 14 Pro Max)
   ============================================ */
@media (max-width: 430px) {

    .command-bar[b-ju80plb9qk] {
        padding: 10px 12px;
    }

    .page-title[b-ju80plb9qk] {
        font-size: 15px;
        gap: 8px;
    }

    .actions .btn[b-ju80plb9qk] {
        font-size: 12px;
        padding: 6px 10px;
    }

    .stats-ribbon[b-ju80plb9qk] {
        padding: 10px 12px;
        gap: 8px;
    }

    .stat-value[b-ju80plb9qk] {
        font-size: 18px;
    }

    .stat-label[b-ju80plb9qk] {
        font-size: 10px;
    }

    .content-area[b-ju80plb9qk] {
        padding: 8px;
    }

    .tab-btn[b-ju80plb9qk] {
        padding: 10px 12px;
        font-size: 12px;
        gap: 6px;
    }

    .tab-btn svg[b-ju80plb9qk] {
        width: 14px;
        height: 14px;
    }

    .list-item[b-ju80plb9qk] {
        padding: 12px;
    }
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/backoffice/absents/AbsentsBackOffice.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-lcdmb8hylg] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-lcdmb8hylg] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-lcdmb8hylg] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-lcdmb8hylg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-lcdmb8hylg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-lcdmb8hylg] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-lcdmb8hylg] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-lcdmb8hylg] {
    transform: scale(0.98);
}

.page-subtitle[b-lcdmb8hylg] {
    display: none;
}

.header-right[b-lcdmb8hylg] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-lcdmb8hylg] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-lcdmb8hylg] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-lcdmb8hylg] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-lcdmb8hylg] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-lcdmb8hylg] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-lcdmb8hylg] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
    /* Prevent scroll on content wrapper */
}

/* Grid container to fill available space */
[b-lcdmb8hylg] .e-grid {
    /*flex: 1;*/
    /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-lcdmb8hylg] .e-grid .e-row {
    height: 28px !important;
}

[b-lcdmb8hylg] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-lcdmb8hylg] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-lcdmb8hylg] .e-grid .e-gridcontent {
    /*    flex: 1;*/
    overflow-y: auto;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-lcdmb8hylg] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-lcdmb8hylg] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-lcdmb8hylg] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-lcdmb8hylg] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-lcdmb8hylg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-lcdmb8hylg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-lcdmb8hylg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-lcdmb8hylg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-lcdmb8hylg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-lcdmb8hylg] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-lcdmb8hylg] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-lcdmb8hylg] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-lcdmb8hylg] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-lcdmb8hylg] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-lcdmb8hylg] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-lcdmb8hylg] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-lcdmb8hylg] .e-toolbar .e-textbox.e-input-group,
[b-lcdmb8hylg] .e-toolbar .e-input-group.e-control-wrapper,
[b-lcdmb8hylg] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 22px !important;
    max-height: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

/* Search Input Field */
[b-lcdmb8hylg] .e-toolbar .e-textbox.e-input-group .e-input,
[b-lcdmb8hylg] .e-toolbar .e-input-group .e-input,
[b-lcdmb8hylg] .e-toolbar .e-float-input .e-input {
    font-size: 11px !important;
    padding: 0 8px !important;
    line-height: 1 !important;
    height: 20px !important;
    min-height: 20px !important;
    border: none !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
}

/* Placeholder Styling */
[b-lcdmb8hylg] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-lcdmb8hylg] .e-toolbar .e-input-group .e-input::placeholder,
[b-lcdmb8hylg] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    opacity: 0.7 !important;
}

/* Focus State */
[b-lcdmb8hylg] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-lcdmb8hylg] .e-toolbar .e-input-group:focus-within,
[b-lcdmb8hylg] .e-toolbar .e-float-input:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* Clear Button Styling */
[b-lcdmb8hylg] .e-toolbar .e-textbox .e-clear-icon,
[b-lcdmb8hylg] .e-toolbar .e-input-group .e-clear-icon {
    font-size: 10px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    padding: 0 4px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[b-lcdmb8hylg] .e-toolbar .e-textbox .e-clear-icon:hover,
[b-lcdmb8hylg] .e-toolbar .e-input-group .e-clear-icon:hover {
    color: var(--BEC-colorBrandBackground) !important;
    background: transparent !important;
}

/* Search Icon (if present) */
[b-lcdmb8hylg] .e-toolbar .e-input-group-icon {
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   DATE FILTER SECTION
   ======================================== */
.filter-section[b-lcdmb8hylg] {
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 8px 16px;
    margin: 8px 24px;
}

.filter-row[b-lcdmb8hylg] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-item[b-lcdmb8hylg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-label[b-lcdmb8hylg] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
.loading-overlay[b-lcdmb8hylg] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row hover effect */
[b-lcdmb8hylg] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
    cursor: pointer;
}

/* Selected row highlighting */
[b-lcdmb8hylg] .e-grid .e-row.e-selectionbackground,
[b-lcdmb8hylg] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

/* Selected row hover */
[b-lcdmb8hylg] .e-grid .e-row.e-selectionbackground:hover,
[b-lcdmb8hylg] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Microsoft-style blue left border on selected rows */
[b-lcdmb8hylg] .e-grid .e-row.e-selectionbackground td:first-child,
[b-lcdmb8hylg] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   UNDER DEVELOPMENT STATUS
   ======================================== */
.under-development-container[b-lcdmb8hylg] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 60px 20px;
}

.under-development-content[b-lcdmb8hylg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 500px;
}/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Assignment wizard sidebar - no overlay */
[b-lcdmb8hylg] .assignment-wizard-sidebar + .e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.sidebar-header[b-lcdmb8hylg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-lcdmb8hylg] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-lcdmb8hylg] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-lcdmb8hylg] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-lcdmb8hylg] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-lcdmb8hylg] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-lcdmb8hylg] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-lcdmb8hylg] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-lcdmb8hylg] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-lcdmb8hylg] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-lcdmb8hylg] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-lcdmb8hylg] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Column Chooser Specific Styles */
.column-chooser-actions[b-lcdmb8hylg] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-lcdmb8hylg] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-lcdmb8hylg] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-lcdmb8hylg] {
    font-size: 12px;
}

.column-chooser-list[b-lcdmb8hylg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-lcdmb8hylg] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-lcdmb8hylg] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-lcdmb8hylg]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-lcdmb8hylg]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-lcdmb8hylg] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-lcdmb8hylg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-lcdmb8hylg] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-lcdmb8hylg] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-lcdmb8hylg] {
    background: #e1dfdd;
}

.btn-success[b-lcdmb8hylg] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-lcdmb8hylg] {
    background: #0b5c0b;
}

.btn i[b-lcdmb8hylg] {
    font-size: 14px;
}
/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-lcdmb8hylg] .help-wizard-sidebar + .e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Wizard Step Content */
.wizard-step[b-lcdmb8hylg] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-lcdmb8hylg] {
    margin-bottom: 24px;
    animation: fadeInUp-b-lcdmb8hylg 0.6s ease;
}

/* Info Box */
.info-box[b-lcdmb8hylg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-lcdmb8hylg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-lcdmb8hylg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-lcdmb8hylg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-lcdmb8hylg] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-lcdmb8hylg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-lcdmb8hylg] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-lcdmb8hylg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-lcdmb8hylg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-lcdmb8hylg] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-lcdmb8hylg] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-lcdmb8hylg] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-lcdmb8hylg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-lcdmb8hylg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-lcdmb8hylg] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-lcdmb8hylg] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-lcdmb8hylg] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-lcdmb8hylg] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-lcdmb8hylg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-lcdmb8hylg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-lcdmb8hylg] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-lcdmb8hylg] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-lcdmb8hylg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-lcdmb8hylg] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-lcdmb8hylg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-lcdmb8hylg {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-lcdmb8hylg] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.att-empty-icon[b-lcdmb8hylg] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.att-empty-title[b-lcdmb8hylg] {
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
}

.att-empty-subtitle[b-lcdmb8hylg] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
}

.att-footer-left[b-lcdmb8hylg] {
    flex: 1;
    text-align: left;
}

.att-footer-actions[b-lcdmb8hylg] {
    display: flex;
    gap: 12px;
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/backoffice/attendance/AttendanceBackOffice.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-keb7a3ybg3] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-keb7a3ybg3] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-keb7a3ybg3] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-keb7a3ybg3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-keb7a3ybg3] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-keb7a3ybg3] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-keb7a3ybg3] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-keb7a3ybg3] {
    transform: scale(0.98);
}

.page-subtitle[b-keb7a3ybg3] {
    display: none;
}

.header-right[b-keb7a3ybg3] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-keb7a3ybg3] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-keb7a3ybg3] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-keb7a3ybg3] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-keb7a3ybg3] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-keb7a3ybg3] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-keb7a3ybg3] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 10px 20px;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

/* Grid container to fill available space */
[b-keb7a3ybg3] .e-grid {
    /*flex: 1;*/
    /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-keb7a3ybg3] .e-grid .e-row {
    height: 28px !important;
}

[b-keb7a3ybg3] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-keb7a3ybg3] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-keb7a3ybg3] .e-grid .e-gridcontent {
    /*    flex: 1;*/
    overflow-y: auto;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-keb7a3ybg3] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-keb7a3ybg3] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-keb7a3ybg3] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-keb7a3ybg3] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-keb7a3ybg3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-keb7a3ybg3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-keb7a3ybg3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-keb7a3ybg3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-keb7a3ybg3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-keb7a3ybg3] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-keb7a3ybg3] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-keb7a3ybg3] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-keb7a3ybg3] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-keb7a3ybg3] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-keb7a3ybg3] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-keb7a3ybg3] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-keb7a3ybg3] .e-toolbar .e-textbox.e-input-group,
[b-keb7a3ybg3] .e-toolbar .e-input-group.e-control-wrapper,
[b-keb7a3ybg3] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-keb7a3ybg3] .e-toolbar .e-textbox.e-input-group .e-input,
[b-keb7a3ybg3] .e-toolbar .e-input-group .e-input,
[b-keb7a3ybg3] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
}

[b-keb7a3ybg3] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-keb7a3ybg3] .e-toolbar .e-input-group:focus-within,
[b-keb7a3ybg3] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-keb7a3ybg3] .e-toolbar .e-textbox .e-input-group-icon,
[b-keb7a3ybg3] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
/* ========================================
   LOADING INDICATOR - STANDARD (Admin Page Style)
   ======================================== */
.loading-container[b-keb7a3ybg3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-keb7a3ybg3] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-keb7a3ybg3 1s linear infinite;
}

@keyframes spin-b-keb7a3ybg3 {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-keb7a3ybg3] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

/* ========================================
   GRID BADGES AND STATUS INDICATORS
   ======================================== */
.status-badge[b-keb7a3ybg3] {
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    display: inline-block;
}

.delay-badge[b-keb7a3ybg3] {
    color: #d13438;
    background: #fef6f6;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.overtime-badge[b-keb7a3ybg3] {
    color: #107c10;
    background: #f0f9f0;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.early-badge[b-keb7a3ybg3] {
    color: #0078d4;
    background: #f0f7fc;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.delay-count-badge[b-keb7a3ybg3] {
    color: #d13438;
    background: #fef6f6;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row Hover Effect */
[b-keb7a3ybg3] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
    cursor: pointer;
}

/* Selected Row Highlighting - Microsoft Style */
[b-keb7a3ybg3] .e-grid .e-row.e-selectionbackground,
[b-keb7a3ybg3] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-keb7a3ybg3] .e-grid .e-row.e-selectionbackground:hover,
[b-keb7a3ybg3] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-keb7a3ybg3] .e-grid .e-row.e-selectionbackground td:first-child,
[b-keb7a3ybg3] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   HELP WIZARD STYLES (Mirrored from OrganizationAdministration)
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-keb7a3ybg3] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

[b-keb7a3ybg3] .help-wizard-sidebar.e-sidebar-over {
    pointer-events: auto;
}

[b-keb7a3ybg3] .help-wizard-sidebar.e-sidebar-over~* {
    pointer-events: auto;
}

.sidebar-title[b-keb7a3ybg3] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-keb7a3ybg3] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-keb7a3ybg3] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-keb7a3ybg3] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-keb7a3ybg3] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-keb7a3ybg3] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
    padding: 24px;
    overflow-y: auto;
}

/* Wizard Step Content */
.wizard-step[b-keb7a3ybg3] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-keb7a3ybg3] {
    margin-bottom: 24px;
    animation: fadeInUp-b-keb7a3ybg3 0.6s ease;
}

.step-title[b-keb7a3ybg3] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-keb7a3ybg3] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-keb7a3ybg3] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-keb7a3ybg3] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-keb7a3ybg3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-keb7a3ybg3] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-keb7a3ybg3] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-keb7a3ybg3] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-keb7a3ybg3] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-keb7a3ybg3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-keb7a3ybg3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.example-step[b-keb7a3ybg3] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-keb7a3ybg3] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.example-step code[b-keb7a3ybg3] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-keb7a3ybg3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-keb7a3ybg3] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-keb7a3ybg3] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-keb7a3ybg3] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-keb7a3ybg3] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-keb7a3ybg3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-keb7a3ybg3] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-keb7a3ybg3] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-keb7a3ybg3] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-keb7a3ybg3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-keb7a3ybg3] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Sidebar Footer */
.sidebar-footer[b-keb7a3ybg3] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Wizard Progress */
.wizard-progress[b-keb7a3ybg3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-keb7a3ybg3] {
    display: flex;
    gap: 12px;
}

/* Buttons */
.btn[b-keb7a3ybg3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-keb7a3ybg3] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-keb7a3ybg3] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-keb7a3ybg3] {
    background: #e1dfdd;
}

.btn-next[b-keb7a3ybg3] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-keb7a3ybg3] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-keb7a3ybg3] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-keb7a3ybg3] {
    background: #0b5c0b;
}

/* Animations */
@keyframes fadeInUp-b-keb7a3ybg3 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   COLUMN CHOOSER WIZARD SPECIFIC STYLES
   ======================================== */

/* Sidebar header for both wizards */
.sidebar-header[b-keb7a3ybg3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Column Chooser Actions */
.column-chooser-actions[b-keb7a3ybg3] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.btn-link[b-keb7a3ybg3] {
    background: none;
    border: none;
    color: var(--BEC-colorBrandForeground1);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-link:hover[b-keb7a3ybg3] {
    background: var(--BEC-colorNeutralBackground2);
}

.btn-link i[b-keb7a3ybg3] {
    font-size: 11px;
}

/* Column Chooser List */
.column-chooser-list[b-keb7a3ybg3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-chooser-item[b-keb7a3ybg3] {
    padding: 10px 14px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.column-chooser-item:hover[b-keb7a3ybg3] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorBrandBackground);
}

/* Checkbox styling */
[b-keb7a3ybg3] .column-chooser-item .e-checkbox-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

[b-keb7a3ybg3] .column-chooser-item .e-label {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    text-align: left;
    flex: 1;
}

/* Scrollbar for column list */
.column-chooser-list[b-keb7a3ybg3]::-webkit-scrollbar {
    width: 6px;
}

.column-chooser-list[b-keb7a3ybg3]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 3px;
}

.column-chooser-list[b-keb7a3ybg3]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2);
    border-radius: 3px;
}

.column-chooser-list[b-keb7a3ybg3]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorBrandBackground);
}

/* Sidebar Step Content */
.sidebar-step-content[b-keb7a3ybg3] {
    flex: 1;
    overflow-y: auto;
}

/* Assignment Wizard Sidebar */
[b-keb7a3ybg3] .assignment-wizard-sidebar {
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

[b-keb7a3ybg3] .assignment-wizard-sidebar .e-sidebar {
    background: #ffffff;
}

.btn-secondary[b-keb7a3ybg3] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-keb7a3ybg3] {
    background: #e1dfdd;
}

/* ========================================
   RESPONSIVE DESIGN - MEDIA QUERIES
   ======================================== */

/* Tablet and below (1024px and below) */
@media (max-width: 1024px) {

    /* Adjust header padding */
    .erp-page-header[b-keb7a3ybg3] {
        padding: 6px 16px;
    }

    /* Adjust stats container */
    .stats-container[b-keb7a3ybg3] {
        gap: 12px;
    }

    .stat-value[b-keb7a3ybg3] {
        font-size: 12px;
    }

    .stat-label[b-keb7a3ybg3] {
        font-size: 9px;
    }

    /* Adjust toolbar */
    [b-keb7a3ybg3] .e-toolbar.e-control {
        margin: 3px 16px 1px 16px !important;
        padding: 2px 12px !important;
    }

    /* Adjust page content padding */
    .erp-page-content[b-keb7a3ybg3] {
        padding: 10px 16px 30px 16px;
    }

    /* Column chooser width */
    [b-keb7a3ybg3] .assignment-wizard-sidebar {
        width: 50% !important;
        min-width: 320px !important;
    }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {

    /* Hide page subtitle */
    .page-subtitle[b-keb7a3ybg3] {
        display: none !important;
    }

    /* Stack header items vertically */
    .erp-page-header[b-keb7a3ybg3] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 12px;
    }

    .header-left[b-keb7a3ybg3],
    .header-right[b-keb7a3ybg3] {
        width: 100%;
    }

    /* Adjust stats to be more compact */
    .stats-container[b-keb7a3ybg3] {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }

    .stat-card[b-keb7a3ybg3] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Toolbar adjustments */
    [b-keb7a3ybg3] .e-toolbar.e-control {
        margin: 3px 12px 1px 12px !important;
        padding: 2px 8px !important;
        min-height: 36px !important;
    }

    /* Hide less important toolbar buttons on mobile */
    [b-keb7a3ybg3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none !important;
    }

    /* Show only icons on mobile */
    [b-keb7a3ybg3] .e-toolbar .e-toolbar-item .e-tbar-btn {
        padding: 0 6px !important;
    }

    /* Page content */
    .erp-page-content[b-keb7a3ybg3] {
        padding: 10px 12px 20px 12px;
    }

    /* Adjust grid height for mobile */
    [b-keb7a3ybg3] .e-grid {
        height: calc(100vh - 280px) !important;
    }

    /* Column chooser full width on mobile */
    [b-keb7a3ybg3] .assignment-wizard-sidebar {
        width: 90% !important;
        min-width: unset !important;
    }

    /* Help wizard full width on mobile */
    [b-keb7a3ybg3] .help-wizard-sidebar {
        width: 90% !important;
    }

    /* Reduce font sizes for mobile */
    .page-title[b-keb7a3ybg3] {
        font-size: 13px;
    }

    .page-title i[b-keb7a3ybg3] {
        font-size: 13px;
    }

    /* Grid cells more compact */
    [b-keb7a3ybg3] .e-grid .e-row td {
        padding: 2px 4px !important;
        font-size: 10px !important;
    }

    [b-keb7a3ybg3] .e-grid .e-gridheader .e-headercell {
        padding: 2px 4px !important;
        font-size: 10px !important;
    }
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {

    /* Further compact adjustments */
    .erp-page-header[b-keb7a3ybg3] {
        padding: 8px;
    }

    /* Hide stat dividers */
    .stat-divider[b-keb7a3ybg3] {
        display: none;
    }

    /* Compact stats */
    .stat-value[b-keb7a3ybg3] {
        font-size: 11px;
    }

    .stat-label[b-keb7a3ybg3] {
        font-size: 8px;
    }

    /* Toolbar */
    [b-keb7a3ybg3] .e-toolbar.e-control {
        margin: 3px 8px 1px 8px !important;
        padding: 2px 4px !important;
    }

    /* Content */
    .erp-page-content[b-keb7a3ybg3] {
        padding: 8px;
    }

    /* Sidebar full width */
    [b-keb7a3ybg3] .assignment-wizard-sidebar,
    [b-keb7a3ybg3] .help-wizard-sidebar {
        width: 95% !important;
    }

    /* Sidebar padding reduction */
    .sidebar-content[b-keb7a3ybg3] {
        padding: 16px;
    }

    .sidebar-header[b-keb7a3ybg3] {
        padding: 12px 16px;
    }

    .sidebar-footer[b-keb7a3ybg3] {
        padding: 12px 16px;
    }
}

/* ========================================
   COLUMN CHOOSER - LEFT ALIGNMENT (PROFESSIONAL)
   Using aggressive selectors to override Syncfusion defaults
   ======================================== */

/* Dialog content area */
:global(.e-ccdlg .e-cc-contentdiv)[b-keb7a3ybg3],
:global(.e-ccdlg .e-dlg-content)[b-keb7a3ybg3],
:global(.e-dialog.e-ccdlg .e-cc-contentdiv)[b-keb7a3ybg3],
:global(.e-dialog.e-ccdlg .e-dlg-content)[b-keb7a3ybg3] {
    direction: ltr !important;
    text-align: left !important;
}

/* Search box */
:global(.e-ccdlg .e-cc-searchdiv)[b-keb7a3ybg3],
:global(.e-dialog.e-ccdlg .e-cc-searchdiv)[b-keb7a3ybg3] {
    direction: ltr !important;
    text-align: left !important;
}

/* Checkbox wrapper - force left alignment */
:global(.e-ccdlg .e-checkbox-wrapper)[b-keb7a3ybg3],
:global(.e-dialog.e-ccdlg .e-checkbox-wrapper)[b-keb7a3ybg3],
:global(.e-ccdlg .e-frame.e-check)[b-keb7a3ybg3],
:global(.e-ccdlg .e-cc-contentdiv .e-checkbox-wrapper)[b-keb7a3ybg3] {
    direction: ltr !important;
    justify-content: flex-start !important;
    align-items: center !important;
    display: flex !important;
}

/* Checkbox labels */
:global(.e-ccdlg .e-checkbox-wrapper .e-label)[b-keb7a3ybg3],
:global(.e-dialog.e-ccdlg .e-checkbox-wrapper .e-label)[b-keb7a3ybg3],
:global(.e-ccdlg .e-label)[b-keb7a3ybg3] {
    padding-left: 8px !important;
    padding-right: 0 !important;
    text-align: left !important;
    order: 2 !important;
}

/* Checkbox itself */
:global(.e-ccdlg .e-checkbox-wrapper .e-frame)[b-keb7a3ybg3],
:global(.e-ccdlg .e-frame.e-check)[b-keb7a3ybg3] {
    order: 1 !important;
    margin-right: 0 !important;
}

/* Select All/Deselect All */
:global(.e-ccdlg .e-selectall)[b-keb7a3ybg3],
:global(.e-dialog.e-ccdlg .e-selectall)[b-keb7a3ybg3] {
    direction: ltr !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-keb7a3ybg3] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/backoffice/transactions/TransactionsBackOffice.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-l735bs6vnh] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-l735bs6vnh] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-l735bs6vnh] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-l735bs6vnh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-l735bs6vnh] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-l735bs6vnh] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-l735bs6vnh] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-l735bs6vnh] {
    transform: scale(0.98);
}

.page-subtitle[b-l735bs6vnh] {
    display: none;
}

.header-right[b-l735bs6vnh] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-l735bs6vnh] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-l735bs6vnh] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-l735bs6vnh] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-l735bs6vnh] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-l735bs6vnh] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-l735bs6vnh] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

/* Grid container to fill available space */
[b-l735bs6vnh] .e-grid {
    /*flex: 1;*/
    /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-l735bs6vnh] .e-grid .e-row {
    height: 28px !important;
}

[b-l735bs6vnh] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-l735bs6vnh] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-l735bs6vnh] .e-grid .e-gridcontent {
    /*    flex: 1;*/
    overflow-y: auto;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-l735bs6vnh] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-l735bs6vnh] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-l735bs6vnh] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-l735bs6vnh] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-l735bs6vnh] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-l735bs6vnh] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-l735bs6vnh] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-l735bs6vnh] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-l735bs6vnh] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-l735bs6vnh] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-l735bs6vnh] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-l735bs6vnh] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-l735bs6vnh] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-l735bs6vnh] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-l735bs6vnh] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-l735bs6vnh] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-l735bs6vnh] .e-toolbar .e-textbox.e-input-group,
[b-l735bs6vnh] .e-toolbar .e-input-group.e-control-wrapper,
[b-l735bs6vnh] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 22px !important;
    max-height: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

/* Search Input Field */
[b-l735bs6vnh] .e-toolbar .e-textbox.e-input-group .e-input,
[b-l735bs6vnh] .e-toolbar .e-input-group .e-input,
[b-l735bs6vnh] .e-toolbar .e-float-input .e-input {
    font-size: 11px !important;
    padding: 0 8px !important;
    line-height: 1 !important;
    height: 20px !important;
    min-height: 20px !important;
    border: none !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
}

/* Placeholder Styling */
[b-l735bs6vnh] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-l735bs6vnh] .e-toolbar .e-input-group .e-input::placeholder,
[b-l735bs6vnh] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    opacity: 0.7 !important;
}

/* Focus State */
[b-l735bs6vnh] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-l735bs6vnh] .e-toolbar .e-input-group:focus-within,
[b-l735bs6vnh] .e-toolbar .e-float-input:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* Clear Button Styling */
[b-l735bs6vnh] .e-toolbar .e-textbox .e-clear-icon,
[b-l735bs6vnh] .e-toolbar .e-input-group .e-clear-icon {
    font-size: 10px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    padding: 0 4px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[b-l735bs6vnh] .e-toolbar .e-textbox .e-clear-icon:hover,
[b-l735bs6vnh] .e-toolbar .e-input-group .e-clear-icon:hover {
    color: var(--BEC-colorBrandBackground) !important;
    background: transparent !important;
}

/* Search Icon (if present) */
[b-l735bs6vnh] .e-toolbar .e-input-group-icon {
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
/* ========================================
   LOADING INDICATOR - STANDARD (Admin Page Style)
   ======================================== */
.loading-container[b-l735bs6vnh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-l735bs6vnh] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-l735bs6vnh 1s linear infinite;
}

@keyframes spin-b-l735bs6vnh {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-l735bs6vnh] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row hover effect */
[b-l735bs6vnh] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
    cursor: pointer;
}

/* Selected row highlighting */
[b-l735bs6vnh] .e-grid .e-row.e-selectionbackground,
[b-l735bs6vnh] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

/* Selected row hover */
[b-l735bs6vnh] .e-grid .e-row.e-selectionbackground:hover,
[b-l735bs6vnh] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Microsoft-style blue left border on selected rows */
[b-l735bs6vnh] .e-grid .e-row.e-selectionbackground td:first-child,
[b-l735bs6vnh] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   UNDER DEVELOPMENT STATUS
   ======================================== */
.under-development-container[b-l735bs6vnh] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 60px 20px;
}

.under-development-content[b-l735bs6vnh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 500px;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Assignment wizard sidebar - no overlay */
[b-l735bs6vnh] .assignment-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.sidebar-header[b-l735bs6vnh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-l735bs6vnh] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-l735bs6vnh] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-l735bs6vnh] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-l735bs6vnh] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-l735bs6vnh] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-l735bs6vnh] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-l735bs6vnh] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-l735bs6vnh] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-l735bs6vnh] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-l735bs6vnh] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-l735bs6vnh] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Column Chooser Specific Styles */
.column-chooser-actions[b-l735bs6vnh] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-l735bs6vnh] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-l735bs6vnh] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-l735bs6vnh] {
    font-size: 12px;
}

.column-chooser-list[b-l735bs6vnh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-l735bs6vnh] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-l735bs6vnh] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-l735bs6vnh]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-l735bs6vnh]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-l735bs6vnh] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-l735bs6vnh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-l735bs6vnh] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-l735bs6vnh] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-l735bs6vnh] {
    background: #e1dfdd;
}

.btn-success[b-l735bs6vnh] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-l735bs6vnh] {
    background: #0b5c0b;
}

.btn i[b-l735bs6vnh] {
    font-size: 14px;
}

/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-l735bs6vnh] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Wizard Step Content */
.wizard-step[b-l735bs6vnh] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-l735bs6vnh] {
    margin-bottom: 24px;
    animation: fadeInUp-b-l735bs6vnh 0.6s ease;
}

/* Info Box */
.info-box[b-l735bs6vnh] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-l735bs6vnh] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-l735bs6vnh] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-l735bs6vnh] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-l735bs6vnh] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-l735bs6vnh] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-l735bs6vnh] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-l735bs6vnh] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-l735bs6vnh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-l735bs6vnh] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-l735bs6vnh] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-l735bs6vnh] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-l735bs6vnh] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-l735bs6vnh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-l735bs6vnh] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-l735bs6vnh] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-l735bs6vnh] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-l735bs6vnh] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-l735bs6vnh] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-l735bs6vnh] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-l735bs6vnh] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-l735bs6vnh] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-l735bs6vnh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-l735bs6vnh] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-l735bs6vnh] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-l735bs6vnh {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-l735bs6vnh] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.att-empty-icon[b-l735bs6vnh] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.att-empty-title[b-l735bs6vnh] {
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
}

.att-empty-subtitle[b-l735bs6vnh] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
}

.att-footer-left[b-l735bs6vnh] {
    flex: 1;
    text-align: left;
}

.att-footer-actions[b-l735bs6vnh] {
    display: flex;
    gap: 12px;
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/concrete/absents/AbsentsConcrete.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-ygar6goh48] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-ygar6goh48] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-ygar6goh48] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-ygar6goh48] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-ygar6goh48] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-ygar6goh48] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-ygar6goh48] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-ygar6goh48] {
    transform: scale(0.98);
}

.header-right[b-ygar6goh48] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-ygar6goh48] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-ygar6goh48] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-ygar6goh48] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-ygar6goh48] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-ygar6goh48] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-ygar6goh48] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
}

/* Grid container to fill available space */
[b-ygar6goh48] .e-grid {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Compact row height and font size */
[b-ygar6goh48] .e-grid .e-row {
    height: 28px !important;
}

[b-ygar6goh48] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-ygar6goh48] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-ygar6goh48] .e-grid .e-gridcontent {
    flex: 1;
    min-height: 0;
    overflow-y: auto !important;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-ygar6goh48] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-ygar6goh48] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-ygar6goh48] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-ygar6goh48] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-ygar6goh48] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-ygar6goh48] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-ygar6goh48] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-ygar6goh48] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-ygar6goh48] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-ygar6goh48] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-ygar6goh48] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-ygar6goh48] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-ygar6goh48] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   ENHANCED SEARCH BAR STYLING - MATCHING ATTENDANCE CONCRETE
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-ygar6goh48] .e-toolbar .e-textbox.e-input-group,
[b-ygar6goh48] .e-toolbar .e-input-group.e-control-wrapper,
[b-ygar6goh48] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
    max-height: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-ygar6goh48] .e-toolbar .e-textbox.e-input-group .e-input,
[b-ygar6goh48] .e-toolbar .e-input-group .e-input,
[b-ygar6goh48] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
}

[b-ygar6goh48] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-ygar6goh48] .e-toolbar .e-input-group:focus-within,
[b-ygar6goh48] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-ygar6goh48] .e-toolbar .e-textbox .e-input-group-icon,
[b-ygar6goh48] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
/* ========================================
   LOADING INDICATOR - STANDARD (Admin Page Style)
   ======================================== */
.loading-container[b-ygar6goh48] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-ygar6goh48] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-ygar6goh48 1s linear infinite;
}

@keyframes spin-b-ygar6goh48 {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-ygar6goh48] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row Hover Effect */
[b-ygar6goh48] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
    cursor: pointer;
}

/* Selected Row Highlighting - Microsoft Style */
[b-ygar6goh48] .e-grid .e-row.e-selectionbackground,
[b-ygar6goh48] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-ygar6goh48] .e-grid .e-row.e-selectionbackground:hover,
[b-ygar6goh48] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-ygar6goh48] .e-grid .e-row.e-selectionbackground td:first-child,
[b-ygar6goh48] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Assignment wizard sidebar - no overlay */
[b-ygar6goh48] .assignment-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.sidebar-header[b-ygar6goh48] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-ygar6goh48] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-ygar6goh48] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-ygar6goh48] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-ygar6goh48] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-ygar6goh48] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-ygar6goh48] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-ygar6goh48] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-ygar6goh48] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-ygar6goh48] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-ygar6goh48] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-ygar6goh48] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Column Chooser Specific Styles */
.column-chooser-actions[b-ygar6goh48] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-ygar6goh48] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-ygar6goh48] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-ygar6goh48] {
    font-size: 12px;
}

.column-chooser-list[b-ygar6goh48] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-ygar6goh48] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-ygar6goh48] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-ygar6goh48]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-ygar6goh48]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-ygar6goh48] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-ygar6goh48] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-ygar6goh48] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-ygar6goh48] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-ygar6goh48] {
    background: #e1dfdd;
}

.btn-success[b-ygar6goh48] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-ygar6goh48] {
    background: #0b5c0b;
}

.btn i[b-ygar6goh48] {
    font-size: 14px;
}

/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-ygar6goh48] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Wizard Step Content */
.wizard-step[b-ygar6goh48] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-ygar6goh48] {
    margin-bottom: 24px;
    animation: fadeInUp-b-ygar6goh48 0.6s ease;
}

.step-title[b-ygar6goh48] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-ygar6goh48] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-ygar6goh48] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-ygar6goh48] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-ygar6goh48] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-ygar6goh48] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-ygar6goh48] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-ygar6goh48] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-ygar6goh48] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-ygar6goh48] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-ygar6goh48] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-ygar6goh48] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-ygar6goh48] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-ygar6goh48] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-ygar6goh48] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-ygar6goh48] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-ygar6goh48] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-ygar6goh48] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-ygar6goh48] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-ygar6goh48] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-ygar6goh48] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-ygar6goh48] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-ygar6goh48] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-ygar6goh48] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-ygar6goh48] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-ygar6goh48] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-ygar6goh48] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-ygar6goh48 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    .erp-page-header[b-ygar6goh48] {
        padding: 8px 16px;
    }

    .stats-container[b-ygar6goh48] {
        gap: 12px;
    }

    .stat-value[b-ygar6goh48] {
        font-size: 13px;
    }

    .stat-label[b-ygar6goh48] {
        font-size: 9px;
    }

    [b-ygar6goh48] .e-toolbar.e-control {
        margin: 3px 16px 1px 16px !important;
        padding: 2px 12px !important;
    }

    [b-ygar6goh48] .assignment-wizard-sidebar,
    [b-ygar6goh48] .help-wizard-sidebar {
        width: 50% !important;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {

    /* Page Header - Stack Layout */
    .erp-page-header[b-ygar6goh48] {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
        gap: 12px;
    }

    .header-left[b-ygar6goh48] {
        width: 100%;
    }

    .header-right[b-ygar6goh48] {
        width: 100%;
    }

    .page-title[b-ygar6goh48] {
        font-size: 16px;
    }

    .page-title i[b-ygar6goh48] {
        font-size: 16px;
    }

    /* Stats Container - Full Width */
    .stats-container[b-ygar6goh48] {
        width: 100%;
        justify-content: space-between;
        gap: 16px;
    }

    .stat-card[b-ygar6goh48] {
        flex: 1;
        justify-content: center;
    }

    .stat-value[b-ygar6goh48] {
        font-size: 14px;
    }

    .stat-label[b-ygar6goh48] {
        font-size: 10px;
    }

    /* Toolbar - Icon Only Mode */
    [b-ygar6goh48] .e-toolbar.e-control {
        margin: 3px 12px 1px 12px !important;
        padding: 2px 8px !important;
    }

    /* Hide button text, show only icons on mobile */
    [b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none !important;
    }

    [b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
        margin-right: 0 !important;
        font-size: 14px !important;
    }

    [b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn {
        padding: 0 6px !important;
        min-width: auto !important;
    }

    /* Search Bar - Reduced Width */
    [b-ygar6goh48] .e-toolbar .e-textbox.e-input-group,
    [b-ygar6goh48] .e-toolbar .e-input-group.e-control-wrapper {
        width: 200px !important;
        min-width: 150px !important;
    }

    /* Wizards - Larger Width on Mobile */
    [b-ygar6goh48] .assignment-wizard-sidebar,
    [b-ygar6goh48] .help-wizard-sidebar {
        width: 90% !important;
    }

    .sidebar-header[b-ygar6goh48] {
        padding: 12px 16px;
    }

    .sidebar-title[b-ygar6goh48] {
        font-size: 18px;
    }

    .sidebar-title i[b-ygar6goh48] {
        font-size: 20px;
    }

    .sidebar-step-content[b-ygar6goh48] {
        padding: 16px;
    }

    .sidebar-footer[b-ygar6goh48] {
        padding: 12px 16px;
        flex-wrap: wrap;
    }

    /* Grid Adjustments */
    [b-ygar6goh48] .e-grid .e-row {
        height: 36px !important;
    }

    [b-ygar6goh48] .e-grid .e-row td {
        padding: 4px 8px !important;
        font-size: 12px !important;
    }

    [b-ygar6goh48] .e-grid .e-gridheader .e-headercell {
        height: 36px !important;
        padding: 4px 8px !important;
        font-size: 12px !important;
    }

    /* Help Wizard - Mobile Adjustments */
    .step-title[b-ygar6goh48] {
        font-size: 20px;
    }

    .step-icon i[b-ygar6goh48] {
        font-size: 40px !important;
    }

    .feature-item[b-ygar6goh48] {
        padding: 12px;
    }

    .feature-item i[b-ygar6goh48] {
        font-size: 20px;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {

    /* Page Header - More Compact */
    .erp-page-header[b-ygar6goh48] {
        padding: 8px 12px;
    }

    .page-title[b-ygar6goh48] {
        font-size: 14px;
    }

    .page-title i[b-ygar6goh48] {
        font-size: 14px;
    }

    .help-icon-btn[b-ygar6goh48] {
        font-size: 12px;
        padding: 2px 4px;
    }

    /* Stats Container - Stack Vertically */
    .stats-container[b-ygar6goh48] {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .stat-card[b-ygar6goh48] {
        justify-content: flex-start;
        padding: 4px 0;
    }

    .stat-divider[b-ygar6goh48] {
        display: none;
    }

    .stat-value[b-ygar6goh48] {
        font-size: 16px;
    }

    .stat-label[b-ygar6goh48] {
        font-size: 11px;
    }

    /* Toolbar - Ultra Compact */
    [b-ygar6goh48] .e-toolbar.e-control {
        margin: 2px 8px 1px 8px !important;
        padding: 2px 4px !important;
        min-height: 32px !important;
    }

    [b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn {
        padding: 0 4px !important;
        min-height: 28px !important;
    }

    [b-ygar6goh48] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
        font-size: 12px !important;
    }

    /* Search Bar - Minimum Width */
    [b-ygar6goh48] .e-toolbar .e-textbox.e-input-group,
    [b-ygar6goh48] .e-toolbar .e-input-group.e-control-wrapper {
        width: 120px !important;
        min-width: 100px !important;
    }

    [b-ygar6goh48] .e-toolbar .e-textbox.e-input-group .e-input {
        font-size: 11px !important;
        padding: 0px 6px !important;
    }

    /* Wizards - Full Width on Small Mobile */
    [b-ygar6goh48] .assignment-wizard-sidebar,
    [b-ygar6goh48] .help-wizard-sidebar {
        width: 95% !important;
    }

    .sidebar-header[b-ygar6goh48] {
        padding: 10px 12px;
    }

    .sidebar-title[b-ygar6goh48] {
        font-size: 16px;
        gap: 8px;
    }

    .sidebar-title i[b-ygar6goh48] {
        font-size: 18px;
    }

    .sidebar-close-btn[b-ygar6goh48] {
        width: 32px;
        height: 32px;
    }

    .sidebar-close-btn i[b-ygar6goh48] {
        font-size: 16px;
    }

    .sidebar-step-content[b-ygar6goh48] {
        padding: 12px;
    }

    .sidebar-footer[b-ygar6goh48] {
        padding: 10px 12px;
    }

    .btn[b-ygar6goh48] {
        padding: 8px 12px;
        font-size: 13px;
        min-width: 80px;
    }

    /* Grid - More Compact */
    [b-ygar6goh48] .e-grid .e-row {
        height: 40px !important;
    }

    [b-ygar6goh48] .e-grid .e-row td {
        padding: 6px !important;
        font-size: 11px !important;
    }

    [b-ygar6goh48] .e-grid .e-gridheader .e-headercell {
        height: 40px !important;
        padding: 6px !important;
        font-size: 11px !important;
    }

    /* Help Wizard - Small Mobile */
    .step-title[b-ygar6goh48] {
        font-size: 18px;
    }

    .step-description[b-ygar6goh48] {
        font-size: 13px;
    }

    .step-icon i[b-ygar6goh48] {
        font-size: 36px !important;
    }

    .feature-item[b-ygar6goh48] {
        padding: 10px;
        gap: 10px;
    }

    .feature-item i[b-ygar6goh48] {
        font-size: 18px;
    }

    .feature-item strong[b-ygar6goh48] {
        font-size: 13px;
    }

    .feature-item p[b-ygar6goh48] {
        font-size: 11px;
    }

    .example-step[b-ygar6goh48] {
        padding: 10px;
        gap: 10px;
    }

    .step-number[b-ygar6goh48] {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .use-case[b-ygar6goh48] {
        padding: 10px;
        gap: 10px;
    }

    .use-case i[b-ygar6goh48] {
        font-size: 18px;
    }

    .column-chooser-list[b-ygar6goh48] {
        max-height: calc(100vh - 300px);
    }

    .column-chooser-item[b-ygar6goh48] {
        padding: 8px 10px;
    }

    .wizard-progress[b-ygar6goh48] {
        font-size: 11px;
        width: 100%;
        text-align: center;
        margin-top: 8px;
    }
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-ygar6goh48] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/concrete/attendance/AttendanceConcrete.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-qn997bd4fg] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-qn997bd4fg] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-qn997bd4fg] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-qn997bd4fg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-qn997bd4fg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-qn997bd4fg] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-qn997bd4fg] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-qn997bd4fg] {
    transform: scale(0.98);
}

.page-subtitle[b-qn997bd4fg] {
    display: none;
}

.header-right[b-qn997bd4fg] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-qn997bd4fg] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-qn997bd4fg] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-qn997bd4fg] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-qn997bd4fg] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-qn997bd4fg] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-qn997bd4fg] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 10px 20px 10px 20px;
    position: relative;
}

/* Grid container to fill available space */
[b-qn997bd4fg] .e-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-qn997bd4fg] .e-grid .e-row {
    height: 28px !important;
}

[b-qn997bd4fg] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-qn997bd4fg] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Ensure grid header stays below toolbar */
[b-qn997bd4fg] .e-grid .e-gridheader {
    z-index: 1 !important;
    position: relative !important;
}

/* Grid content scrolls internally */
[b-qn997bd4fg] .e-grid .e-gridcontent {
    flex: 1;
    min-height: 0;
    overflow-y: auto !important;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-qn997bd4fg] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 999 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Toolbar Items */
[b-qn997bd4fg] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-qn997bd4fg] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-qn997bd4fg] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-qn997bd4fg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-qn997bd4fg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-qn997bd4fg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-qn997bd4fg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-qn997bd4fg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-qn997bd4fg] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-qn997bd4fg] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-qn997bd4fg] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-qn997bd4fg] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-qn997bd4fg] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-qn997bd4fg] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-qn997bd4fg] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-qn997bd4fg] .e-toolbar .e-textbox.e-input-group,
[b-qn997bd4fg] .e-toolbar .e-input-group.e-control-wrapper,
[b-qn997bd4fg] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-qn997bd4fg] .e-toolbar .e-textbox.e-input-group .e-input,
[b-qn997bd4fg] .e-toolbar .e-input-group .e-input,
[b-qn997bd4fg] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
}

[b-qn997bd4fg] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-qn997bd4fg] .e-toolbar .e-input-group:focus-within,
[b-qn997bd4fg] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-qn997bd4fg] .e-toolbar .e-textbox .e-input-group-icon,
[b-qn997bd4fg] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
/* ========================================
   LOADING INDICATOR - STANDARD (Admin Page Style)
   ======================================== */
.loading-container[b-qn997bd4fg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-qn997bd4fg] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-qn997bd4fg 1s linear infinite;
}

@keyframes spin-b-qn997bd4fg {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-qn997bd4fg] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

/* ========================================
   GRID BADGES AND STATUS INDICATORS
   ======================================== */
.status-badge[b-qn997bd4fg] {
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    display: inline-block;
}

.delay-badge[b-qn997bd4fg] {
    color: #d13438;
    background: #fef6f6;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.overtime-badge[b-qn997bd4fg] {
    color: #107c10;
    background: #f0f9f0;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.early-badge[b-qn997bd4fg] {
    color: #0078d4;
    background: #f0f7fc;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.delay-count-badge[b-qn997bd4fg] {
    color: #d13438;
    background: #fef6f6;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row Hover Effect */
[b-qn997bd4fg] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
    cursor: pointer;
}

/* Selected Row Highlighting - Microsoft Style */
[b-qn997bd4fg] .e-grid .e-row.e-selectionbackground,
[b-qn997bd4fg] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-qn997bd4fg] .e-grid .e-row.e-selectionbackground:hover,
[b-qn997bd4fg] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-qn997bd4fg] .e-grid .e-row.e-selectionbackground td:first-child,
[b-qn997bd4fg] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-qn997bd4fg] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.sidebar-header[b-qn997bd4fg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.sidebar-title[b-qn997bd4fg] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-qn997bd4fg] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-qn997bd4fg] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-qn997bd4fg] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-qn997bd4fg] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-qn997bd4fg] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    padding: 24px;
    overflow-y: auto;
}

.wizard-step[b-qn997bd4fg] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-qn997bd4fg] {
    margin-bottom: 24px;
}

.step-title[b-qn997bd4fg] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-qn997bd4fg] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

.info-box[b-qn997bd4fg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-qn997bd4fg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

.features-list[b-qn997bd4fg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-qn997bd4fg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-qn997bd4fg] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-qn997bd4fg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-qn997bd4fg] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-qn997bd4fg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

.example-steps[b-qn997bd4fg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.example-step[b-qn997bd4fg] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-qn997bd4fg] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.example-step code[b-qn997bd4fg] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

.use-cases[b-qn997bd4fg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-qn997bd4fg] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-qn997bd4fg] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-qn997bd4fg] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-qn997bd4fg] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-qn997bd4fg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

.warning-box[b-qn997bd4fg] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-qn997bd4fg] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

.dont-show-again[b-qn997bd4fg] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-qn997bd4fg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-qn997bd4fg] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.sidebar-footer[b-qn997bd4fg] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.wizard-progress[b-qn997bd4fg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.wizard-actions[b-qn997bd4fg] {
    display: flex;
    gap: 12px;
}

/* Base Button Styling */
.btn[b-qn997bd4fg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-qn997bd4fg] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn i[b-qn997bd4fg] {
    font-size: 12px;
}

.btn-cancel[b-qn997bd4fg] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-qn997bd4fg] {
    background: #e1dfdd;
}

.btn-next[b-qn997bd4fg] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-qn997bd4fg] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-success[b-qn997bd4fg] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-qn997bd4fg] {
    background: #0b5c0b;
}

.btn-secondary[b-qn997bd4fg] {
    background: #f3f2f1;
    color: #323130;
    border: 1px solid #e1dfdd;
}

.btn-secondary:hover:not(:disabled)[b-qn997bd4fg] {
    background: #e1dfdd;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Column chooser sidebar - specific styling */
[b-qn997bd4fg] .assignment-wizard-sidebar {
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    z-index: 1001 !important;
}

[b-qn997bd4fg] .assignment-wizard-sidebar .e-sidebar {
    background: #ffffff;
}

.sidebar-step-content[b-qn997bd4fg] {
    flex: 1;
    overflow-y: auto;
}

/* Column Chooser Actions */
.column-chooser-actions[b-qn997bd4fg] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.btn-link[b-qn997bd4fg] {
    background: none;
    border: none;
    color: var(--BEC-colorBrandForeground1);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-link:hover[b-qn997bd4fg] {
    background: var(--BEC-colorNeutralBackground2);
}

.btn-link i[b-qn997bd4fg] {
    font-size: 11px;
}

/* Column Chooser List */
.column-chooser-list[b-qn997bd4fg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-chooser-item[b-qn997bd4fg] {
    padding: 10px 14px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.column-chooser-item:hover[b-qn997bd4fg] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorBrandBackground);
}

/* Scrollbar for column list */
.column-chooser-list[b-qn997bd4fg]::-webkit-scrollbar {
    width: 6px;
}

.column-chooser-list[b-qn997bd4fg]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 3px;
}

.column-chooser-list[b-qn997bd4fg]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2);
    border-radius: 3px;
}

.column-chooser-list[b-qn997bd4fg]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorBrandBackground);
}

/* Checkbox styling */
[b-qn997bd4fg] .column-chooser-item .e-checkbox-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

[b-qn997bd4fg] .column-chooser-item .e-label {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    text-align: left;
    flex: 1;
}

/* ========================================
   RESPONSIVE DESIGN - MEDIA QUERIES
   ======================================== */

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    .erp-page-header[b-qn997bd4fg] {
        padding: 8px 16px;
    }

    .stats-container[b-qn997bd4fg] {
        gap: 12px;
    }

    .stat-value[b-qn997bd4fg] {
        font-size: 13px;
    }

    .stat-label[b-qn997bd4fg] {
        font-size: 9px;
    }

    [b-qn997bd4fg] .e-toolbar.e-control {
        padding: 2px 16px !important;
        margin: 3px 16px 1px 16px !important;
    }

    .erp-page-content[b-qn997bd4fg] {
        padding: 10px 16px 10px 16px;
    }

    [b-qn997bd4fg] .help-wizard-sidebar,
    [b-qn997bd4fg] .assignment-wizard-sidebar {
        width: 50% !important;
        min-width: 320px;
    }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
    .erp-page-header[b-qn997bd4fg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 12px;
    }

    .header-left[b-qn997bd4fg],
    .header-right[b-qn997bd4fg] {
        width: 100%;
    }

    .page-title[b-qn997bd4fg] {
        font-size: 16px;
    }

    .stats-container[b-qn997bd4fg] {
        width: 100%;
        justify-content: space-around;
        gap: 8px;
    }

    .stat-card[b-qn997bd4fg] {
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .stat-value[b-qn997bd4fg] {
        font-size: 14px;
    }

    .stat-label[b-qn997bd4fg] {
        font-size: 9px;
    }

    [b-qn997bd4fg] .e-toolbar.e-control {
        padding: 2px 12px !important;
        margin: 3px 12px 1px 12px !important;
    }

    [b-qn997bd4fg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none !important;
    }

    [b-qn997bd4fg] .e-toolbar .e-toolbar-item .e-tbar-btn {
        min-width: auto !important;
        padding: 0 8px !important;
    }

    [b-qn997bd4fg] .e-toolbar .e-textbox.e-input-group,
    [b-qn997bd4fg] .e-toolbar .e-input-group.e-control-wrapper {
        width: 200px !important;
    }

    .erp-page-content[b-qn997bd4fg] {
        padding: 8px 12px 8px 12px;
    }

    [b-qn997bd4fg] .help-wizard-sidebar,
    [b-qn997bd4fg] .assignment-wizard-sidebar {
        width: 90% !important;
        min-width: unset;
    }

    .sidebar-header[b-qn997bd4fg] {
        padding: 12px 16px;
    }

    .sidebar-title[b-qn997bd4fg] {
        font-size: 18px;
    }

    .sidebar-content[b-qn997bd4fg] {
        padding: 16px;
    }

    .sidebar-footer[b-qn997bd4fg] {
        padding: 12px 16px;
        flex-direction: column;
        gap: 8px;
    }

    .wizard-actions[b-qn997bd4fg] {
        width: 100%;
        justify-content: space-between;
    }

    .btn[b-qn997bd4fg] {
        flex: 1;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .erp-page-header[b-qn997bd4fg] {
        padding: 8px;
    }

    .page-title[b-qn997bd4fg] {
        font-size: 14px;
    }

    .page-title i[b-qn997bd4fg] {
        font-size: 14px;
    }

    .stat-divider[b-qn997bd4fg] {
        display: none;
    }

    .stats-container[b-qn997bd4fg] {
        gap: 12px;
    }

    [b-qn997bd4fg] .e-toolbar.e-control {
        padding: 2px 8px !important;
        margin: 3px 8px 1px 8px !important;
    }

    [b-qn997bd4fg] .e-toolbar .e-textbox.e-input-group,
    [b-qn997bd4fg] .e-toolbar .e-input-group.e-control-wrapper {
        width: 150px !important;
    }

    .erp-page-content[b-qn997bd4fg] {
        padding: 8px;
    }

    [b-qn997bd4fg] .help-wizard-sidebar,
    [b-qn997bd4fg] .assignment-wizard-sidebar {
        width: 95% !important;
    }

    .sidebar-header[b-qn997bd4fg] {
        padding: 10px 12px;
    }

    .sidebar-title[b-qn997bd4fg] {
        font-size: 16px;
    }

    .sidebar-title i[b-qn997bd4fg] {
        font-size: 18px;
    }

    .sidebar-content[b-qn997bd4fg] {
        padding: 12px;
    }

    .step-title[b-qn997bd4fg] {
        font-size: 18px;
    }

    .step-description[b-qn997bd4fg] {
        font-size: 13px;
    }

    .btn[b-qn997bd4fg] {
        font-size: 13px;
        padding: 8px 16px;
    }
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-qn997bd4fg] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/concrete/transactions/TransactionsConcrete.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-pytgkeub8j] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-pytgkeub8j] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-pytgkeub8j] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-pytgkeub8j] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-pytgkeub8j] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-pytgkeub8j] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-pytgkeub8j] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-pytgkeub8j] {
    transform: scale(0.98);
}

.page-subtitle[b-pytgkeub8j] {
    display: none;
}

.header-right[b-pytgkeub8j] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-pytgkeub8j] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-pytgkeub8j] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-pytgkeub8j] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-pytgkeub8j] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-pytgkeub8j] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-pytgkeub8j] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
    /* Prevent scroll on content wrapper */
}

/* Grid container to fill available space */
[b-pytgkeub8j] .e-grid {
    /*flex: 1;*/
    /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-pytgkeub8j] .e-grid .e-row {
    height: 28px !important;
}

[b-pytgkeub8j] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-pytgkeub8j] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-pytgkeub8j] .e-grid .e-gridcontent {
    /*    flex: 1;*/
    overflow-y: auto;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-pytgkeub8j] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-pytgkeub8j] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-pytgkeub8j] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-pytgkeub8j] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-pytgkeub8j] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-pytgkeub8j] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-pytgkeub8j] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-pytgkeub8j] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-pytgkeub8j] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-pytgkeub8j] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-pytgkeub8j] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-pytgkeub8j] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-pytgkeub8j] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-pytgkeub8j] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-pytgkeub8j] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-pytgkeub8j] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
/* ========================================
   LOADING INDICATOR - STANDARD (Admin Page Style)
   ======================================== */
.loading-container[b-pytgkeub8j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-pytgkeub8j] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-pytgkeub8j 1s linear infinite;
}

@keyframes spin-b-pytgkeub8j {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-pytgkeub8j] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row hover effect */
[b-pytgkeub8j] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
    cursor: pointer;
}

/* Selected row highlighting */
[b-pytgkeub8j] .e-grid .e-row.e-selectionbackground,
[b-pytgkeub8j] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

/* Selected row hover */
[b-pytgkeub8j] .e-grid .e-row.e-selectionbackground:hover,
[b-pytgkeub8j] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Microsoft-style blue left border on selected rows */
[b-pytgkeub8j] .e-grid .e-row.e-selectionbackground td:first-child,
[b-pytgkeub8j] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group,
[b-pytgkeub8j] .e-toolbar .e-input-group.e-control-wrapper,
[b-pytgkeub8j] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 22px !important;
    max-height: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

/* Search Input Field */
[b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group .e-input,
[b-pytgkeub8j] .e-toolbar .e-input-group .e-input,
[b-pytgkeub8j] .e-toolbar .e-float-input .e-input {
    font-size: 11px !important;
    padding: 0 8px !important;
    line-height: 1 !important;
    height: 20px !important;
    min-height: 20px !important;
    border: none !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
}

/* Placeholder Styling */
[b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-pytgkeub8j] .e-toolbar .e-input-group .e-input::placeholder,
[b-pytgkeub8j] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    opacity: 0.7 !important;
}

/* Focus State */
[b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-pytgkeub8j] .e-toolbar .e-input-group:focus-within,
[b-pytgkeub8j] .e-toolbar .e-float-input:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* Clear Button Styling */
[b-pytgkeub8j] .e-toolbar .e-textbox .e-clear-icon,
[b-pytgkeub8j] .e-toolbar .e-input-group .e-clear-icon {
    font-size: 10px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    padding: 0 4px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[b-pytgkeub8j] .e-toolbar .e-textbox .e-clear-icon:hover,
[b-pytgkeub8j] .e-toolbar .e-input-group .e-clear-icon:hover {
    color: var(--BEC-colorBrandBackground) !important;
    background: transparent !important;
}

/* Search Icon (if present) */
[b-pytgkeub8j] .e-toolbar .e-input-group-icon {
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-pytgkeub8j] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Sidebar header, content, footer already defined above */

/* Wizard Step Content */
.wizard-step[b-pytgkeub8j] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-pytgkeub8j] {
    margin-bottom: 24px;
    animation: fadeInUp-b-pytgkeub8j 0.6s ease;
}

/* Info Box */
.info-box[b-pytgkeub8j] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-pytgkeub8j] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-pytgkeub8j] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-pytgkeub8j] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-pytgkeub8j] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-pytgkeub8j] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-pytgkeub8j] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-pytgkeub8j] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-pytgkeub8j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-pytgkeub8j] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-pytgkeub8j] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-pytgkeub8j] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-pytgkeub8j] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-pytgkeub8j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-pytgkeub8j] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-pytgkeub8j] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-pytgkeub8j] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-pytgkeub8j] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-pytgkeub8j] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-pytgkeub8j] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-pytgkeub8j] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-pytgkeub8j] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-pytgkeub8j] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-pytgkeub8j] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-pytgkeub8j] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-pytgkeub8j {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   SIDEBAR STYLES (SHARED BY WIZARDS)
   ======================================== */

.sidebar-header[b-pytgkeub8j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-pytgkeub8j] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-pytgkeub8j] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-pytgkeub8j] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-pytgkeub8j] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-pytgkeub8j] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-pytgkeub8j] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-pytgkeub8j] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-pytgkeub8j] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-pytgkeub8j] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-pytgkeub8j] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-pytgkeub8j] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-pytgkeub8j] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-pytgkeub8j] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-pytgkeub8j] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-pytgkeub8j] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-pytgkeub8j] {
    background: #e1dfdd;
}

.btn-success[b-pytgkeub8j] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-pytgkeub8j] {
    background: #0b5c0b;
}

.btn i[b-pytgkeub8j] {
    font-size: 14px;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-pytgkeub8j] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column list container */
.column-list[b-pytgkeub8j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

/* Custom scrollbar for column list */
.column-list[b-pytgkeub8j]::-webkit-scrollbar {
    width: 8px;
}

.column-list[b-pytgkeub8j]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.column-list[b-pytgkeub8j]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.column-list[b-pytgkeub8j]::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Column item */
.column-item[b-pytgkeub8j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.column-item:hover[b-pytgkeub8j] {
    background: #f9f9f9;
    border-color: #0078d4;
    transform: translateX(2px);
}

.column-item input[type="checkbox"][b-pytgkeub8j] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #0078d4;
}

.column-item label[b-pytgkeub8j] {
    flex: 1;
    font-size: 14px;
    color: #242424;
    cursor: pointer;
    user-select: none;
}

/* Bulk actions */
.bulk-actions[b-pytgkeub8j] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.bulk-action-btn[b-pytgkeub8j] {
    flex: 1;
    padding: 8px 16px;
    background: #f3f2f1;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    color: #323130;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bulk-action-btn:hover[b-pytgkeub8j] {
    background: #e1dfdd;
    border-color: #0078d4;
}

.bulk-action-btn i[b-pytgkeub8j] {
    margin-right: 6px;
    font-size: 12px;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-pytgkeub8j] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column List */
.column-list[b-pytgkeub8j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-pytgkeub8j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-pytgkeub8j] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-pytgkeub8j] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-pytgkeub8j] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
}

/* Select All/Deselect All Actions */
.column-actions[b-pytgkeub8j] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.action-link[b-pytgkeub8j] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.action-link:hover[b-pytgkeub8j] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-pytgkeub8j]::-webkit-scrollbar {
    width: 8px;
}

.column-list[b-pytgkeub8j]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 4px;
}

.column-list[b-pytgkeub8j]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke1);
    border-radius: 4px;
}

.column-list[b-pytgkeub8j]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ======================================== */

/* Mobile Devices (320px - 767px) */
@media screen and (max-width: 767px) {

    /* Page Header - Stack Stats */
    .erp-page-header[b-pytgkeub8j] {
        flex-direction: column;
        gap: 16px;
        padding: 12px 16px;
    }

    .header-left[b-pytgkeub8j] {
        width: 100%;
    }

    .page-title[b-pytgkeub8j] {
        font-size: 18px;
    }

    .header-right[b-pytgkeub8j] {
        width: 100%;
    }

    .stats-container[b-pytgkeub8j] {
        justify-content: flex-start;
        gap: 12px;
    }

    .stat-card[b-pytgkeub8j] {
        min-width: auto;
    }

    .stat-value[b-pytgkeub8j] {
        font-size: 20px;
    }

    .stat-label[b-pytgkeub8j] {
        font-size: 10px;
    }

    /* Toolbar - Stack Buttons */
    [b-pytgkeub8j] .e-toolbar .e-toolbar-items {
        flex-wrap: wrap;
    }

    [b-pytgkeub8j] .e-toolbar .e-toolbar-item {
        margin: 4px;
    }

    /* Search Bar - Full Width */
    [b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Grid - Reduce Padding */
    .erp-page-content[b-pytgkeub8j] {
        padding: 8px;
    }

    [b-pytgkeub8j] .e-grid {
        font-size: 12px;
    }

    [b-pytgkeub8j] .e-grid .e-headercell {
        padding: 8px 4px;
        font-size: 11px;
    }

    [b-pytgkeub8j] .e-grid .e-rowcell {
        padding: 8px 4px;
        font-size: 12px;
    }

    /* Wizards - Full Width */
    [b-pytgkeub8j] .column-chooser-sidebar,
    [b-pytgkeub8j] .help-wizard-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sidebar-header[b-pytgkeub8j] {
        padding: 12px 16px;
    }

    .sidebar-title[b-pytgkeub8j] {
        font-size: 16px;
    }

    .sidebar-step-content[b-pytgkeub8j] {
        padding: 16px;
    }

    .step-title[b-pytgkeub8j] {
        font-size: 16px;
    }

    .step-description[b-pytgkeub8j] {
        font-size: 13px;
    }

    /* Buttons - Larger Tap Targets */
    .btn[b-pytgkeub8j] {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 14px;
    }

    .sidebar-close-btn[b-pytgkeub8j] {
        width: 44px;
        height: 44px;
    }

    /* Column List - Better Spacing */
    .column-item[b-pytgkeub8j] {
        padding: 14px 12px;
    }

    .column-item input[type="checkbox"][b-pytgkeub8j] {
        width: 20px;
        height: 20px;
    }

    .column-item label[b-pytgkeub8j] {
        font-size: 14px;
    }

    /* Feature Items - Stack Icons */
    .feature-item[b-pytgkeub8j] {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    .feature-item i[b-pytgkeub8j] {
        margin-bottom: 8px;
    }
}

/* Tablet Devices (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    /* Page Header - Adjust Spacing */
    .erp-page-header[b-pytgkeub8j] {
        padding: 16px 20px;
    }

    .page-title[b-pytgkeub8j] {
        font-size: 20px;
    }

    .stats-container[b-pytgkeub8j] {
        gap: 16px;
    }

    /* Search Bar - Responsive Width */
    [b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group {
        width: 250px !important;
        max-width: 250px !important;
    }

    /* Wizards - Responsive Width */
    [b-pytgkeub8j] .column-chooser-sidebar,
    [b-pytgkeub8j] .help-wizard-sidebar {
        width: 500px !important;
        max-width: 90vw !important;
    }

    /* Grid - Adjust Font Size */
    [b-pytgkeub8j] .e-grid {
        font-size: 13px;
    }

    [b-pytgkeub8j] .e-grid .e-headercell {
        font-size: 12px;
    }

    [b-pytgkeub8j] .e-grid .e-rowcell {
        font-size: 13px;
    }
}

/* Desktop Devices (1025px+) */
@media screen and (min-width: 1025px) {
    /* Default styles already optimized for desktop */

    /* Wizards - Fixed Width */
    [b-pytgkeub8j] .column-chooser-sidebar,
    [b-pytgkeub8j] .help-wizard-sidebar {
        width: 600px !important;
        max-width: 600px !important;
    }

    /* Search Bar - Fixed Width */
    [b-pytgkeub8j] .e-toolbar .e-textbox.e-input-group {
        width: 300px !important;
        max-width: 300px !important;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {

    /* Larger Tap Targets */
    .btn[b-pytgkeub8j],
    .action-link[b-pytgkeub8j],
    .sidebar-close-btn[b-pytgkeub8j],
    .help-icon-btn[b-pytgkeub8j] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Larger Checkboxes */
    .column-item input[type="checkbox"][b-pytgkeub8j] {
        width: 22px;
        height: 22px;
    }

    /* Remove Hover Effects (Not Applicable on Touch) */
    .column-item:hover[b-pytgkeub8j],
    .feature-item:hover[b-pytgkeub8j],
    .btn:hover[b-pytgkeub8j] {
        transform: none;
    }
}

/* Landscape Orientation on Mobile */
@media screen and (max-width: 767px) and (orientation: landscape) {

    /* Reduce Header Height */
    .erp-page-header[b-pytgkeub8j] {
        padding: 8px 16px;
    }

    .page-title[b-pytgkeub8j] {
        font-size: 16px;
    }

    .stats-container[b-pytgkeub8j] {
        gap: 8px;
    }

    .stat-value[b-pytgkeub8j] {
        font-size: 18px;
    }

    /* Wizards - Reduce Height */
    .sidebar-header[b-pytgkeub8j] {
        padding: 10px 16px;
    }

    .sidebar-step-content[b-pytgkeub8j] {
        padding: 12px 16px;
    }
}

/* High DPI Displays (Retina) */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* Sharper Borders */
    .stat-card[b-pytgkeub8j],
    .column-item[b-pytgkeub8j],
    .feature-item[b-pytgkeub8j] {
        border-width: 0.5px;
    }
}

/* Print Styles */
@media print {

    /* Hide UI Elements */
    .e-toolbar[b-pytgkeub8j],
    .sidebar-header[b-pytgkeub8j],
    .sidebar-footer[b-pytgkeub8j],
    .help-icon-btn[b-pytgkeub8j] {
        display: none !important;
    }

    /* Optimize Grid for Print */
    .erp-page-content[b-pytgkeub8j] {
        padding: 0;
    }

    [b-pytgkeub8j] .e-grid {
        border: 1px solid #000;
    }

    [b-pytgkeub8j] .e-grid .e-headercell,
    [b-pytgkeub8j] .e-grid .e-rowcell {
        border: 1px solid #ccc;
        padding: 4px;
    }
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-pytgkeub8j] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.att-col-separator[b-pytgkeub8j] {
    color: #e0e0e0;
}

.att-footer-left[b-pytgkeub8j] {
    flex: 1;
    text-align: left;
}

.att-footer-actions[b-pytgkeub8j] {
    display: flex;
    gap: 12px;
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/contracting/absents/AbsentsContracting.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-e8hlpuwmm7] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-e8hlpuwmm7] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-e8hlpuwmm7] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-e8hlpuwmm7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-e8hlpuwmm7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-e8hlpuwmm7] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-e8hlpuwmm7] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-e8hlpuwmm7] {
    transform: scale(0.98);
}

.page-subtitle[b-e8hlpuwmm7] {
    display: none;
}

.header-right[b-e8hlpuwmm7] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-e8hlpuwmm7] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-e8hlpuwmm7] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-e8hlpuwmm7] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-e8hlpuwmm7] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-e8hlpuwmm7] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-e8hlpuwmm7] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
    /* Prevent scroll on content wrapper */
}

/* Grid container to fill available space */
[b-e8hlpuwmm7] .e-grid {
    /*flex: 1;*/
    /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-e8hlpuwmm7] .e-grid .e-row {
    height: 28px !important;
}

[b-e8hlpuwmm7] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-e8hlpuwmm7] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-e8hlpuwmm7] .e-grid .e-gridcontent {
    /*    flex: 1;*/
    overflow-y: auto;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-e8hlpuwmm7] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-e8hlpuwmm7] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-e8hlpuwmm7] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-e8hlpuwmm7] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-e8hlpuwmm7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-e8hlpuwmm7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-e8hlpuwmm7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-e8hlpuwmm7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-e8hlpuwmm7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-e8hlpuwmm7] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-e8hlpuwmm7] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-e8hlpuwmm7] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-e8hlpuwmm7] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-e8hlpuwmm7] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-e8hlpuwmm7] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-e8hlpuwmm7] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* DropDownList in Toolbar */
[b-e8hlpuwmm7] .e-toolbar .e-dropdownlist {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-e8hlpuwmm7] .e-toolbar .e-dropdownlist .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-e8hlpuwmm7] .e-toolbar .e-dropdownlist:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   ENHANCED SEARCH BAR STYLING - MATCHING ATTENDANCE CONCRETE
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-e8hlpuwmm7] .e-toolbar .e-textbox.e-input-group,
[b-e8hlpuwmm7] .e-toolbar .e-input-group.e-control-wrapper,
[b-e8hlpuwmm7] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
    max-height: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-e8hlpuwmm7] .e-toolbar .e-textbox.e-input-group .e-input,
[b-e8hlpuwmm7] .e-toolbar .e-input-group .e-input,
[b-e8hlpuwmm7] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
}

[b-e8hlpuwmm7] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-e8hlpuwmm7] .e-toolbar .e-input-group:focus-within,
[b-e8hlpuwmm7] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-e8hlpuwmm7] .e-toolbar .e-textbox .e-input-group-icon,
[b-e8hlpuwmm7] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
/* ========================================
   LOADING INDICATOR - STANDARD (Admin Page Style)
   ======================================== */
.loading-container[b-e8hlpuwmm7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-e8hlpuwmm7] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-e8hlpuwmm7 1s linear infinite;
}

@keyframes spin-b-e8hlpuwmm7 {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-e8hlpuwmm7] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row Hover Effect */
[b-e8hlpuwmm7] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
    cursor: pointer;
}

/* Selected Row Highlighting - Microsoft Style */
[b-e8hlpuwmm7] .e-grid .e-row.e-selectionbackground,
[b-e8hlpuwmm7] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-e8hlpuwmm7] .e-grid .e-row.e-selectionbackground:hover,
[b-e8hlpuwmm7] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-e8hlpuwmm7] .e-grid .e-row.e-selectionbackground td:first-child,
[b-e8hlpuwmm7] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Assignment wizard sidebar - no overlay */
[b-e8hlpuwmm7] .assignment-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.sidebar-header[b-e8hlpuwmm7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-e8hlpuwmm7] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-e8hlpuwmm7] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-e8hlpuwmm7] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-e8hlpuwmm7] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-e8hlpuwmm7] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-e8hlpuwmm7] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-e8hlpuwmm7] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-e8hlpuwmm7] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-e8hlpuwmm7] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-e8hlpuwmm7] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-e8hlpuwmm7] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Column Chooser Specific Styles */
.column-chooser-actions[b-e8hlpuwmm7] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-e8hlpuwmm7] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-e8hlpuwmm7] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-e8hlpuwmm7] {
    font-size: 12px;
}

.column-chooser-list[b-e8hlpuwmm7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-e8hlpuwmm7] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-e8hlpuwmm7] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-e8hlpuwmm7]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-e8hlpuwmm7]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-e8hlpuwmm7] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-e8hlpuwmm7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-e8hlpuwmm7] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-e8hlpuwmm7] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-e8hlpuwmm7] {
    background: #e1dfdd;
}

.btn-success[b-e8hlpuwmm7] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-e8hlpuwmm7] {
    background: #0b5c0b;
}

.btn i[b-e8hlpuwmm7] {
    font-size: 14px;
}

/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-e8hlpuwmm7] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Wizard Step Content */
.wizard-step[b-e8hlpuwmm7] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-e8hlpuwmm7] {
    margin-bottom: 24px;
    animation: fadeInUp-b-e8hlpuwmm7 0.6s ease;
}

.step-title[b-e8hlpuwmm7] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-e8hlpuwmm7] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-e8hlpuwmm7] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-e8hlpuwmm7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-e8hlpuwmm7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-e8hlpuwmm7] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-e8hlpuwmm7] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-e8hlpuwmm7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-e8hlpuwmm7] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-e8hlpuwmm7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-e8hlpuwmm7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-e8hlpuwmm7] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-e8hlpuwmm7] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-e8hlpuwmm7] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-e8hlpuwmm7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-e8hlpuwmm7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-e8hlpuwmm7] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-e8hlpuwmm7] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-e8hlpuwmm7] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-e8hlpuwmm7] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-e8hlpuwmm7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-e8hlpuwmm7] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-e8hlpuwmm7] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-e8hlpuwmm7] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-e8hlpuwmm7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-e8hlpuwmm7] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-e8hlpuwmm7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-e8hlpuwmm7 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    .erp-page-header[b-e8hlpuwmm7] {
        padding: 8px 16px;
    }

    .page-title[b-e8hlpuwmm7] {
        font-size: 13px;
    }

    .stat-value[b-e8hlpuwmm7] {
        font-size: 13px;
    }

    .stat-label[b-e8hlpuwmm7] {
        font-size: 9px;
    }

    [b-e8hlpuwmm7] .e-toolbar.e-control {
        margin: 3px 16px 1px 16px !important;
    }

    /* Wizards take 50% width on tablet */
    [b-e8hlpuwmm7] .assignment-wizard-sidebar,
    [b-e8hlpuwmm7] .help-wizard-sidebar {
        width: 50% !important;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .erp-page-header[b-e8hlpuwmm7] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 12px;
    }

    .header-left[b-e8hlpuwmm7] {
        width: 100%;
    }

    .header-right[b-e8hlpuwmm7] {
        width: 100%;
    }

    .stats-container[b-e8hlpuwmm7] {
        width: 100%;
        justify-content: flex-start;
    }

    .page-title[b-e8hlpuwmm7] {
        font-size: 12px;
    }

    /* Toolbar - Icon only mode for mobile */
    [b-e8hlpuwmm7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none !important;
    }

    [b-e8hlpuwmm7] .e-toolbar .e-toolbar-item .e-tbar-btn {
        padding: 0 6px !important;
        min-width: auto !important;
    }

    [b-e8hlpuwmm7] .e-toolbar.e-control {
        padding: 2px 12px !important;
        margin: 3px 12px 1px 12px !important;
    }

    /* Search bar smaller on mobile */
    [b-e8hlpuwmm7] .e-toolbar .e-textbox.e-input-group,
    [b-e8hlpuwmm7] .e-toolbar .e-input-group.e-control-wrapper {
        width: 200px !important;
    }

    /* Wizards take 90% width on mobile */
    [b-e8hlpuwmm7] .assignment-wizard-sidebar,
    [b-e8hlpuwmm7] .help-wizard-sidebar {
        width: 90% !important;
    }

    /* Grid rows taller for better touch interaction */
    [b-e8hlpuwmm7] .e-grid .e-row {
        height: 36px !important;
    }

    [b-e8hlpuwmm7] .e-grid .e-row td {
        padding: 4px 8px !important;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .erp-page-header[b-e8hlpuwmm7] {
        padding: 6px 8px;
    }

    .page-title[b-e8hlpuwmm7] {
        font-size: 11px;
    }

    .stats-container[b-e8hlpuwmm7] {
        flex-direction: column;
        gap: 8px;
    }

    .stat-card[b-e8hlpuwmm7] {
        width: 100%;
    }

    .stat-divider[b-e8hlpuwmm7] {
        display: none;
    }

    /* Ultra compact toolbar */
    [b-e8hlpuwmm7] .e-toolbar.e-control {
        padding: 2px 8px !important;
        margin: 3px 8px 1px 8px !important;
    }

    [b-e8hlpuwmm7] .e-toolbar .e-toolbar-item .e-tbar-btn {
        padding: 0 4px !important;
    }

    /* Search bar even smaller */
    [b-e8hlpuwmm7] .e-toolbar .e-textbox.e-input-group,
    [b-e8hlpuwmm7] .e-toolbar .e-input-group.e-control-wrapper {
        width: 150px !important;
    }

    /* Wizards take 95% width on small mobile */
    [b-e8hlpuwmm7] .assignment-wizard-sidebar,
    [b-e8hlpuwmm7] .help-wizard-sidebar {
        width: 95% !important;
    }

    /* Grid rows even taller for touch */
    [b-e8hlpuwmm7] .e-grid .e-row {
        height: 40px !important;
    }
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-e8hlpuwmm7] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/contracting/attendance/AttendanceContracting.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-7gquzzaxap] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-7gquzzaxap] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-7gquzzaxap] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-7gquzzaxap] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-7gquzzaxap] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-7gquzzaxap] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-7gquzzaxap] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-7gquzzaxap] {
    transform: scale(0.98);
}

.page-subtitle[b-7gquzzaxap] {
    display: none;
}

.header-right[b-7gquzzaxap] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-7gquzzaxap] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-7gquzzaxap] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-7gquzzaxap] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-7gquzzaxap] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-7gquzzaxap] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-7gquzzaxap] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
}

/* Grid container to fill available space */
[b-7gquzzaxap] .e-grid {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-7gquzzaxap] .e-grid .e-row {
    height: 28px !important;
}

[b-7gquzzaxap] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-7gquzzaxap] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-7gquzzaxap] .e-grid .e-gridcontent {
    flex: 1;
    min-height: 0;
    overflow-y: auto !important;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-7gquzzaxap] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-7gquzzaxap] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-7gquzzaxap] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-7gquzzaxap] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-7gquzzaxap] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-7gquzzaxap] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-7gquzzaxap] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-7gquzzaxap] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-7gquzzaxap] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-7gquzzaxap] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-7gquzzaxap] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-7gquzzaxap] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-7gquzzaxap] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-7gquzzaxap] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-7gquzzaxap] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-7gquzzaxap] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* DropDownList in Toolbar */
[b-7gquzzaxap] .e-toolbar .e-dropdownlist {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-7gquzzaxap] .e-toolbar .e-dropdownlist .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-7gquzzaxap] .e-toolbar .e-dropdownlist:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-7gquzzaxap] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-7gquzzaxap] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-7gquzzaxap] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
.loading-overlay[b-7gquzzaxap] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   GRID BADGES AND STATUS INDICATORS
   ======================================== */
.status-badge[b-7gquzzaxap] {
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    display: inline-block;
}

.delay-badge[b-7gquzzaxap] {
    color: #d13438;
    background: #fef6f6;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.overtime-badge[b-7gquzzaxap] {
    color: #107c10;
    background: #f0f9f0;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.early-badge[b-7gquzzaxap] {
    color: #0078d4;
    background: #f0f7fc;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.delay-count-badge[b-7gquzzaxap] {
    color: #d13438;
    background: #fef6f6;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row Hover Effect */
[b-7gquzzaxap] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
    cursor: pointer;
}

/* Selected Row Highlighting - Microsoft Style */
[b-7gquzzaxap] .e-grid .e-row.e-selectionbackground,
[b-7gquzzaxap] .e-grid .e-row[aria-selected=\"true\"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-7gquzzaxap] .e-grid .e-row.e-selectionbackground:hover,
[b-7gquzzaxap] .e-grid .e-row[aria-selected=\"true\"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-7gquzzaxap] .e-grid .e-row.e-selectionbackground td:first-child,
[b-7gquzzaxap] .e-grid .e-row[aria-selected=\"true\"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED
   ======================================== */
[b-7gquzzaxap] .e-toolbar .e-textbox.e-input-group,
[b-7gquzzaxap] .e-toolbar .e-input-group.e-control-wrapper,
[b-7gquzzaxap] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-7gquzzaxap] .e-toolbar .e-textbox.e-input-group .e-input,
[b-7gquzzaxap] .e-toolbar .e-input-group .e-input,
[b-7gquzzaxap] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
}

[b-7gquzzaxap] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-7gquzzaxap] .e-toolbar .e-input-group:focus-within,
[b-7gquzzaxap] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-7gquzzaxap] .e-toolbar .e-textbox .e-input-group-icon,
[b-7gquzzaxap] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Column chooser sidebar - specific styling */
[b-7gquzzaxap] .assignment-wizard-sidebar {
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    z-index: 1001 !important;
}

[b-7gquzzaxap] .assignment-wizard-sidebar .e-sidebar {
    background: #ffffff;
}

.sidebar-header[b-7gquzzaxap] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-7gquzzaxap] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-7gquzzaxap] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-7gquzzaxap] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-7gquzzaxap] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-7gquzzaxap] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-7gquzzaxap] {
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow-y: auto;
}

.sidebar-step-content[b-7gquzzaxap] {
    flex: 1;
    overflow-y: auto;
}

.wizard-step[b-7gquzzaxap] {
    text-align: center;
    padding: 20px;
}

.step-title[b-7gquzzaxap] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-7gquzzaxap] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Column Chooser Actions */
.column-chooser-actions[b-7gquzzaxap] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.btn-link[b-7gquzzaxap] {
    background: none;
    border: none;
    color: var(--BEC-colorBrandForeground1);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-link:hover[b-7gquzzaxap] {
    background: var(--BEC-colorNeutralBackground2);
}

.btn-link i[b-7gquzzaxap] {
    font-size: 11px;
}

/* Column Chooser List */
.column-chooser-list[b-7gquzzaxap] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-chooser-item[b-7gquzzaxap] {
    padding: 10px 14px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.column-chooser-item:hover[b-7gquzzaxap] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorBrandBackground);
}

/* Scrollbar for column list */
.column-chooser-list[b-7gquzzaxap]::-webkit-scrollbar {
    width: 6px;
}

.column-chooser-list[b-7gquzzaxap]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 3px;
}

.column-chooser-list[b-7gquzzaxap]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2);
    border-radius: 3px;
}

.column-chooser-list[b-7gquzzaxap]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorBrandBackground);
}

/* Checkbox styling */
[b-7gquzzaxap] .column-chooser-item .e-checkbox-wrapper {
    width: 100%;
}

[b-7gquzzaxap] .column-chooser-item .e-label {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
}

.sidebar-footer[b-7gquzzaxap] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.btn[b-7gquzzaxap] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-7gquzzaxap] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn i[b-7gquzzaxap] {
    font-size: 12px;
}

.btn-secondary[b-7gquzzaxap] {
    background: #f3f2f1;
    color: #323130;
    border: 1px solid #e1dfdd;
}

.btn-secondary:hover:not(:disabled)[b-7gquzzaxap] {
    background: #e1dfdd;
}

.btn-success[b-7gquzzaxap] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-7gquzzaxap] {
    background: #0b5c0b;
}

/* ========================================
   HELP WIZARD SIDEBAR STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-7gquzzaxap] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.wizard-step[b-7gquzzaxap] {
    animation: fadeInUp-b-7gquzzaxap 0.4s ease;
}

.step-icon[b-7gquzzaxap] {
    text-align: center;
    margin-bottom: 24px;
}

.info-box[b-7gquzzaxap] {
    background: #f0f7fc;
    border-left: 4px solid #0078d4;
    padding: 16px;
    border-radius: 4px;
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.info-box i[b-7gquzzaxap] {
    color: #0078d4;
    font-size: 20px;
    flex-shrink: 0;
}

.features-list[b-7gquzzaxap] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

.feature-item[b-7gquzzaxap] {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 8px;
    transition: all 0.2s;
}

.feature-item:hover[b-7gquzzaxap] {
    background: #f0f0f0;
    transform: translateX(4px);
}

.feature-item i[b-7gquzzaxap] {
    color: #0078d4;
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-7gquzzaxap] {
    display: block;
    margin-bottom: 4px;
    color: #242424;
}

.feature-item p[b-7gquzzaxap] {
    margin: 0;
    color: #605e5c;
    font-size: 13px;
}

.example-steps[b-7gquzzaxap] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-7gquzzaxap] {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 8px;
}

.step-number[b-7gquzzaxap] {
    width: 32px;
    height: 32px;
    background: #0078d4;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.use-cases[b-7gquzzaxap] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-7gquzzaxap] {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
}

.use-case-good[b-7gquzzaxap] {
    background: linear-gradient(135deg, #f0f9f0 0%, #e6f4e6 100%);
    border-left: 4px solid #107c10;
}

.use-case i[b-7gquzzaxap] {
    font-size: 20px;
    flex-shrink: 0;
}

\n .use-case-good i[b-7gquzzaxap] {
    color: #107c10;
}

.use-case strong[b-7gquzzaxap] {
    display: block;
    margin-bottom: 4px;
    color: #242424;
}

.use-case p[b-7gquzzaxap] {
    margin: 0;
    color: #605e5c;
    font-size: 13px;
}

.warning-box[b-7gquzzaxap] {
    background: #fff4e5;
    border-left: 4px solid #f7630c;
    padding: 16px;
    border-radius: 4px;
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.warning-box i[b-7gquzzaxap] {
    color: #f7630c;
    font-size: 20px;
    flex-shrink: 0;
}

.dont-show-again[b-7gquzzaxap] {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
    text-align: center;
}

.dont-show-again label[b-7gquzzaxap] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #605e5c;
    font-size: 13px;
}

.wizard-progress[b-7gquzzaxap] {
    color: #605e5c;
    font-size: 13px;
    font-weight: 500;
}

.wizard-actions[b-7gquzzaxap] {
    display: flex;
    gap: 12px;
}

.btn-cancel[b-7gquzzaxap] {
    background: #f3f2f1;
    color: #323130;
}

.btn-cancel:hover:not(:disabled)[b-7gquzzaxap] {
    background: #e1dfdd;
}

.btn-next[b-7gquzzaxap] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-next:hover:not(:disabled)[b-7gquzzaxap] {
    background: var(--BEC-colorBrandBackgroundHover);
}

/* Animations */
@keyframes fadeInUp-b-7gquzzaxap {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   RESPONSIVE DESIGN - MEDIA QUERIES
   ======================================== */

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    .erp-page-header[b-7gquzzaxap] {
        padding: 8px 16px;
    }

    .stats-container[b-7gquzzaxap] {
        gap: 12px;
    }

    .stat-value[b-7gquzzaxap] {
        font-size: 13px;
    }

    .stat-label[b-7gquzzaxap] {
        font-size: 9px;
    }

    [b-7gquzzaxap] .e-toolbar.e-control {
        padding: 2px 16px !important;
        margin: 3px 16px 1px 16px !important;
    }

    .erp-page-content[b-7gquzzaxap] {
        padding: 10px 16px 10px 16px;
    }

    /* Wizards - 50% width on tablet */
    [b-7gquzzaxap] .help-wizard-sidebar,
    [b-7gquzzaxap] .assignment-wizard-sidebar {
        width: 50% !important;
        min-width: 320px;
    }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {

    /* Header - Stack vertically */
    .erp-page-header[b-7gquzzaxap] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 12px;
    }

    .header-left[b-7gquzzaxap],
    .header-right[b-7gquzzaxap] {
        width: 100%;
    }

    .page-title[b-7gquzzaxap] {
        font-size: 16px;
    }

    /* Stats - Compact layout */
    .stats-container[b-7gquzzaxap] {
        width: 100%;
        justify-content: space-around;
        gap: 8px;
    }

    .stat-card[b-7gquzzaxap] {
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .stat-value[b-7gquzzaxap] {
        font-size: 14px;
    }

    .stat-label[b-7gquzzaxap] {
        font-size: 9px;
    }

    /* Toolbar - Icons only on mobile */
    [b-7gquzzaxap] .e-toolbar.e-control {
        padding: 2px 12px !important;
        margin: 3px 12px 1px 12px !important;
    }

    [b-7gquzzaxap] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none !important;
    }

    [b-7gquzzaxap] .e-toolbar .e-toolbar-item .e-tbar-btn {
        min-width: auto !important;
        padding: 0 8px !important;
    }

    /* Search box - Smaller on mobile */
    [b-7gquzzaxap] .e-toolbar .e-textbox.e-input-group,
    [b-7gquzzaxap] .e-toolbar .e-input-group.e-control-wrapper {
        width: 200px !important;
    }

    /* Page content */
    .erp-page-content[b-7gquzzaxap] {
        padding: 8px 12px 8px 12px;
    }

    /* Wizards - 90% width on mobile */
    [b-7gquzzaxap] .help-wizard-sidebar,
    [b-7gquzzaxap] .assignment-wizard-sidebar {
        width: 90% !important;
        min-width: unset;
    }

    .sidebar-header[b-7gquzzaxap] {
        padding: 12px 16px;
    }

    .sidebar-title[b-7gquzzaxap] {
        font-size: 18px;
    }

    .sidebar-content[b-7gquzzaxap] {
        padding: 16px;
    }

    .sidebar-footer[b-7gquzzaxap] {
        padding: 12px 16px;
        flex-direction: column;
        gap: 8px;
    }

    .wizard-actions[b-7gquzzaxap] {
        width: 100%;
        justify-content: space-between;
    }

    .btn[b-7gquzzaxap] {
        flex: 1;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .erp-page-header[b-7gquzzaxap] {
        padding: 8px;
    }

    .page-title[b-7gquzzaxap] {
        font-size: 14px;
    }

    .page-title i[b-7gquzzaxap] {
        font-size: 14px;
    }

    /* Stats - Hide dividers on very small screens */
    .stat-divider[b-7gquzzaxap] {
        display: none;
    }

    .stats-container[b-7gquzzaxap] {
        gap: 12px;
    }

    /* Toolbar */
    [b-7gquzzaxap] .e-toolbar.e-control {
        padding: 2px 8px !important;
        margin: 3px 8px 1px 8px !important;
    }

    /* Search - Even smaller */
    [b-7gquzzaxap] .e-toolbar .e-textbox.e-input-group,
    [b-7gquzzaxap] .e-toolbar .e-input-group.e-control-wrapper {
        width: 150px !important;
    }

    /* Page content */
    .erp-page-content[b-7gquzzaxap] {
        padding: 8px;
    }

    /* Wizards - 95% width on very small screens */
    [b-7gquzzaxap] .help-wizard-sidebar,
    [b-7gquzzaxap] .assignment-wizard-sidebar {
        width: 95% !important;
    }

    .sidebar-header[b-7gquzzaxap] {
        padding: 10px 12px;
    }

    .sidebar-title[b-7gquzzaxap] {
        font-size: 16px;
    }

    .sidebar-title i[b-7gquzzaxap] {
        font-size: 18px;
    }

    .sidebar-content[b-7gquzzaxap] {
        padding: 12px;
    }

    .step-title[b-7gquzzaxap] {
        font-size: 18px;
    }

    .step-description[b-7gquzzaxap] {
        font-size: 13px;
    }

    .btn[b-7gquzzaxap] {
        font-size: 13px;
        padding: 8px 16px;
    }
}

/* ========================================
   LOADING SPINNER CUSTOMIZATION - Force White Background
   ======================================== */
/* ========================================
   LOADING & ERROR CONTAINERS
   ======================================== */
.loading-container[b-7gquzzaxap],
.error-container[b-7gquzzaxap] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorNeutralForeground2);
    background: #ffffff;
}

.loading-container .spinner[b-7gquzzaxap],
.loading-container .spinner[b-7gquzzaxap]::before,
.loading-container .spinner[b-7gquzzaxap]::after {
    display: inline-block;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: spin-b-7gquzzaxap 1s linear infinite;
}

@keyframes spin-b-7gquzzaxap {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-7gquzzaxap],
.error-container p[b-7gquzzaxap] {
    font-size: 16px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.error-container i[b-7gquzzaxap] {
    font-size: 48px;
    color: var(--BEC-colorPaletteRedForeground1);
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-7gquzzaxap] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/contracting/transactions/TransactionsContracting.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-th51h3fbep] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-th51h3fbep] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-th51h3fbep] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-th51h3fbep] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-th51h3fbep] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-th51h3fbep] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-th51h3fbep] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-th51h3fbep] {
    transform: scale(0.98);
}

.page-subtitle[b-th51h3fbep] {
    display: none;
}

.header-right[b-th51h3fbep] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-th51h3fbep] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-th51h3fbep] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-th51h3fbep] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-th51h3fbep] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-th51h3fbep] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-th51h3fbep] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
    /* Prevent scroll on content wrapper */
}

/* Grid container to fill available space */
[b-th51h3fbep] .e-grid {
    /*flex: 1;*/
    /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-th51h3fbep] .e-grid .e-row {
    height: 28px !important;
}

[b-th51h3fbep] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-th51h3fbep] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-th51h3fbep] .e-grid .e-gridcontent {
    /*    flex: 1;*/
    overflow-y: auto;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-th51h3fbep] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-th51h3fbep] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-th51h3fbep] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-th51h3fbep] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-th51h3fbep] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-th51h3fbep] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-th51h3fbep] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-th51h3fbep] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-th51h3fbep] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-th51h3fbep] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-th51h3fbep] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-th51h3fbep] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-th51h3fbep] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-th51h3fbep] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-th51h3fbep] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-th51h3fbep] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* DropDownList in Toolbar */
[b-th51h3fbep] .e-toolbar .e-dropdownlist {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-th51h3fbep] .e-toolbar .e-dropdownlist .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-th51h3fbep] .e-toolbar .e-dropdownlist:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-th51h3fbep] .e-toolbar .e-textbox.e-input-group,
[b-th51h3fbep] .e-toolbar .e-input-group.e-control-wrapper,
[b-th51h3fbep] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 22px !important;
    max-height: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

/* Search Input Field */
[b-th51h3fbep] .e-toolbar .e-textbox.e-input-group .e-input,
[b-th51h3fbep] .e-toolbar .e-input-group .e-input,
[b-th51h3fbep] .e-toolbar .e-float-input .e-input {
    font-size: 11px !important;
    padding: 0 8px !important;
    line-height: 1 !important;
    height: 20px !important;
    min-height: 20px !important;
    border: none !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
}

/* Placeholder Styling */
[b-th51h3fbep] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-th51h3fbep] .e-toolbar .e-input-group .e-input::placeholder,
[b-th51h3fbep] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    opacity: 0.7 !important;
}

/* Focus State */
[b-th51h3fbep] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-th51h3fbep] .e-toolbar .e-input-group:focus-within,
[b-th51h3fbep] .e-toolbar .e-float-input:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* Clear Button Styling */
[b-th51h3fbep] .e-toolbar .e-textbox .e-clear-icon,
[b-th51h3fbep] .e-toolbar .e-input-group .e-clear-icon {
    font-size: 10px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    padding: 0 4px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[b-th51h3fbep] .e-toolbar .e-textbox .e-clear-icon:hover,
[b-th51h3fbep] .e-toolbar .e-input-group .e-clear-icon:hover {
    color: var(--BEC-colorBrandBackground) !important;
    background: transparent !important;
}

/* Search Icon (if present) */
[b-th51h3fbep] .e-toolbar .e-input-group-icon {
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
/* ========================================
   LOADING INDICATOR - STANDARD (Admin Page Style)
   ======================================== */
.loading-container[b-th51h3fbep] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-th51h3fbep] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-th51h3fbep 1s linear infinite;
}

@keyframes spin-b-th51h3fbep {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-th51h3fbep] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row hover effect */
[b-th51h3fbep] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
    cursor: pointer;
}

/* Selected row highlighting */
[b-th51h3fbep] .e-grid .e-row.e-selectionbackground,
[b-th51h3fbep] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

/* Selected row hover */
[b-th51h3fbep] .e-grid .e-row.e-selectionbackground:hover,
[b-th51h3fbep] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Microsoft-style blue left border on selected rows */
[b-th51h3fbep] .e-grid .e-row.e-selectionbackground td:first-child,
[b-th51h3fbep] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   SIDEBAR STYLES (SHARED BY WIZARDS)
   ======================================== */

.sidebar-header[b-th51h3fbep] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-th51h3fbep] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-th51h3fbep] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-th51h3fbep] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-th51h3fbep] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-th51h3fbep] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-th51h3fbep] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-th51h3fbep] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-th51h3fbep] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-th51h3fbep] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-th51h3fbep] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-th51h3fbep] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-th51h3fbep] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-th51h3fbep] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-th51h3fbep] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-th51h3fbep] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-th51h3fbep] {
    background: #e1dfdd;
}

.btn-success[b-th51h3fbep] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-th51h3fbep] {
    background: #0b5c0b;
}

.btn i[b-th51h3fbep] {
    font-size: 14px;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-th51h3fbep] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column List */
.column-list[b-th51h3fbep] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-th51h3fbep] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-th51h3fbep] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-th51h3fbep] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-th51h3fbep] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
}

/* Select All/Deselect All Actions */
.column-actions[b-th51h3fbep] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.action-link[b-th51h3fbep] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.action-link:hover[b-th51h3fbep] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-th51h3fbep]::-webkit-scrollbar {
    width: 8px;
}

.column-list[b-th51h3fbep]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 4px;
}

.column-list[b-th51h3fbep]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke1);
    border-radius: 4px;
}

.column-list[b-th51h3fbep]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-th51h3fbep] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Wizard Step Content */
.wizard-step[b-th51h3fbep] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-th51h3fbep] {
    margin-bottom: 24px;
    animation: fadeInUp-b-th51h3fbep 0.6s ease;
}

/* Info Box */
.info-box[b-th51h3fbep] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-th51h3fbep] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-th51h3fbep] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-th51h3fbep] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-th51h3fbep] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-th51h3fbep] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-th51h3fbep] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-th51h3fbep] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-th51h3fbep] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-th51h3fbep] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-th51h3fbep] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-th51h3fbep] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-th51h3fbep] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-th51h3fbep] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-th51h3fbep] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-th51h3fbep] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-th51h3fbep] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-th51h3fbep] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-th51h3fbep] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-th51h3fbep] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-th51h3fbep] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-th51h3fbep] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-th51h3fbep] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-th51h3fbep] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-th51h3fbep] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-th51h3fbep {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-th51h3fbep] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.att-col-separator[b-th51h3fbep] {
    color: #e0e0e0;
}

.att-footer-left[b-th51h3fbep] {
    flex: 1;
    text-align: left;
}

.att-footer-actions[b-th51h3fbep] {
    display: flex;
    gap: 12px;
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/mobco/absents/AbsentsMOBCO.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-o2xzrywrtl] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-o2xzrywrtl] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-o2xzrywrtl] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-o2xzrywrtl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-o2xzrywrtl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-o2xzrywrtl] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-o2xzrywrtl] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-o2xzrywrtl] {
    transform: scale(0.98);
}

.page-subtitle[b-o2xzrywrtl] {
    display: none;
}

.header-right[b-o2xzrywrtl] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-o2xzrywrtl] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-o2xzrywrtl] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-o2xzrywrtl] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-o2xzrywrtl] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-o2xzrywrtl] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-o2xzrywrtl] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
    /* Prevent scroll on content wrapper */
}

/* Grid container to fill available space */
[b-o2xzrywrtl] .e-grid {
    /*flex: 1;*/
    /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-o2xzrywrtl] .e-grid .e-row {
    height: 28px !important;
}

[b-o2xzrywrtl] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-o2xzrywrtl] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-o2xzrywrtl] .e-grid .e-gridcontent {
    /*    flex: 1;*/
    overflow-y: auto;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-o2xzrywrtl] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-o2xzrywrtl] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-o2xzrywrtl] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-o2xzrywrtl] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-o2xzrywrtl] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-o2xzrywrtl] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-o2xzrywrtl] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-o2xzrywrtl] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-o2xzrywrtl] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-o2xzrywrtl] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-o2xzrywrtl] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-o2xzrywrtl] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-o2xzrywrtl] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-o2xzrywrtl] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-o2xzrywrtl] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-o2xzrywrtl] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-o2xzrywrtl] .e-toolbar .e-textbox.e-input-group,
[b-o2xzrywrtl] .e-toolbar .e-input-group.e-control-wrapper,
[b-o2xzrywrtl] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 22px !important;
    max-height: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

/* Search Input Field */
[b-o2xzrywrtl] .e-toolbar .e-textbox.e-input-group .e-input,
[b-o2xzrywrtl] .e-toolbar .e-input-group .e-input,
[b-o2xzrywrtl] .e-toolbar .e-float-input .e-input {
    font-size: 11px !important;
    padding: 0 8px !important;
    line-height: 1 !important;
    height: 20px !important;
    min-height: 20px !important;
    border: none !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
}

/* Placeholder Styling */
[b-o2xzrywrtl] .e-toolbar .e-textbox.e-input-group .e-input::placeholder,
[b-o2xzrywrtl] .e-toolbar .e-input-group .e-input::placeholder,
[b-o2xzrywrtl] .e-toolbar .e-float-input .e-input::placeholder {
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
    opacity: 0.7 !important;
}

/* Focus State */
[b-o2xzrywrtl] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-o2xzrywrtl] .e-toolbar .e-input-group:focus-within,
[b-o2xzrywrtl] .e-toolbar .e-float-input:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* Clear Button Styling */
[b-o2xzrywrtl] .e-toolbar .e-textbox .e-clear-icon,
[b-o2xzrywrtl] .e-toolbar .e-input-group .e-clear-icon {
    font-size: 10px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    padding: 0 4px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[b-o2xzrywrtl] .e-toolbar .e-textbox .e-clear-icon:hover,
[b-o2xzrywrtl] .e-toolbar .e-input-group .e-clear-icon:hover {
    color: var(--BEC-colorBrandBackground) !important;
    background: transparent !important;
}

/* Search Icon (if present) */
[b-o2xzrywrtl] .e-toolbar .e-input-group-icon {
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
.loading-overlay[b-o2xzrywrtl] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row hover effect */
[b-o2xzrywrtl] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
    cursor: pointer;
}

/* Selected row highlighting */
[b-o2xzrywrtl] .e-grid .e-row.e-selectionbackground,
[b-o2xzrywrtl] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

/* Selected row hover */
[b-o2xzrywrtl] .e-grid .e-row.e-selectionbackground:hover,
[b-o2xzrywrtl] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Microsoft-style blue left border on selected rows */
[b-o2xzrywrtl] .e-grid .e-row.e-selectionbackground td:first-child,
[b-o2xzrywrtl] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   UNDER DEVELOPMENT STATUS
   ======================================== */
.under-development-container[b-o2xzrywrtl] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 60px 20px;
}

.under-development-content[b-o2xzrywrtl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 500px;
}/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Assignment wizard sidebar - no overlay */
[b-o2xzrywrtl] .assignment-wizard-sidebar + .e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.sidebar-header[b-o2xzrywrtl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-o2xzrywrtl] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-o2xzrywrtl] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-o2xzrywrtl] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-o2xzrywrtl] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-o2xzrywrtl] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-o2xzrywrtl] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-o2xzrywrtl] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-o2xzrywrtl] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-o2xzrywrtl] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-o2xzrywrtl] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-o2xzrywrtl] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Column Chooser Specific Styles */
.column-chooser-actions[b-o2xzrywrtl] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-o2xzrywrtl] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-o2xzrywrtl] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-o2xzrywrtl] {
    font-size: 12px;
}

.column-chooser-list[b-o2xzrywrtl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-o2xzrywrtl] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-o2xzrywrtl] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-o2xzrywrtl]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-o2xzrywrtl]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-o2xzrywrtl] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-o2xzrywrtl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-o2xzrywrtl] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-o2xzrywrtl] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-o2xzrywrtl] {
    background: #e1dfdd;
}

.btn-success[b-o2xzrywrtl] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-o2xzrywrtl] {
    background: #0b5c0b;
}

.btn i[b-o2xzrywrtl] {
    font-size: 14px;
}
/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-o2xzrywrtl] .help-wizard-sidebar + .e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Wizard Step Content */
.wizard-step[b-o2xzrywrtl] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-o2xzrywrtl] {
    margin-bottom: 24px;
    animation: fadeInUp-b-o2xzrywrtl 0.6s ease;
}

/* Info Box */
.info-box[b-o2xzrywrtl] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-o2xzrywrtl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-o2xzrywrtl] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-o2xzrywrtl] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-o2xzrywrtl] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-o2xzrywrtl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-o2xzrywrtl] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-o2xzrywrtl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-o2xzrywrtl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-o2xzrywrtl] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-o2xzrywrtl] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-o2xzrywrtl] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-o2xzrywrtl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-o2xzrywrtl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-o2xzrywrtl] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-o2xzrywrtl] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-o2xzrywrtl] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-o2xzrywrtl] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-o2xzrywrtl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-o2xzrywrtl] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-o2xzrywrtl] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-o2xzrywrtl] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-o2xzrywrtl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-o2xzrywrtl] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-o2xzrywrtl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-o2xzrywrtl {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-o2xzrywrtl] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.att-empty-icon[b-o2xzrywrtl] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.att-empty-title[b-o2xzrywrtl] {
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
}

.att-empty-subtitle[b-o2xzrywrtl] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
}

.att-footer-left[b-o2xzrywrtl] {
    flex: 1;
    text-align: left;
}

.att-footer-actions[b-o2xzrywrtl] {
    display: flex;
    gap: 12px;
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/mobco/attendance/AttendanceMOBCO.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-jvph61c2j3] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-jvph61c2j3] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-jvph61c2j3] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-jvph61c2j3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-jvph61c2j3] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-jvph61c2j3] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-jvph61c2j3] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-jvph61c2j3] {
    transform: scale(0.98);
}

.page-subtitle[b-jvph61c2j3] {
    display: none;
}

.header-right[b-jvph61c2j3] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-jvph61c2j3] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-jvph61c2j3] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-jvph61c2j3] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-jvph61c2j3] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-jvph61c2j3] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-jvph61c2j3] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
    /* Prevent scroll on content wrapper */
}

/* Grid container to fill available space */
[b-jvph61c2j3] .e-grid {
    /*flex: 1;*/
    /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-jvph61c2j3] .e-grid .e-row {
    height: 28px !important;
}

[b-jvph61c2j3] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-jvph61c2j3] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-jvph61c2j3] .e-grid .e-gridcontent {
    /*    flex: 1;*/
    overflow-y: auto;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-jvph61c2j3] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-jvph61c2j3] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-jvph61c2j3] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-jvph61c2j3] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-jvph61c2j3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-jvph61c2j3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-jvph61c2j3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-jvph61c2j3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-jvph61c2j3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-jvph61c2j3] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-jvph61c2j3] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-jvph61c2j3] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-jvph61c2j3] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-jvph61c2j3] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-jvph61c2j3] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-jvph61c2j3] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   ENHANCED SEARCH BAR STYLING - MATCHING ABSENTS CONTRACTING
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-jvph61c2j3] .e-toolbar .e-textbox.e-input-group,
[b-jvph61c2j3] .e-toolbar .e-input-group.e-control-wrapper,
[b-jvph61c2j3] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
    max-height: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-jvph61c2j3] .e-toolbar .e-textbox.e-input-group .e-input,
[b-jvph61c2j3] .e-toolbar .e-input-group .e-input,
[b-jvph61c2j3] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
}

[b-jvph61c2j3] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-jvph61c2j3] .e-toolbar .e-input-group:focus-within,
[b-jvph61c2j3] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Remove any borders from icon buttons inside textbox */
[b-jvph61c2j3] .e-toolbar .e-textbox .e-input-group-icon,
[b-jvph61c2j3] .e-toolbar .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   ROW SELECTION STYLING
   ======================================== */

/* Row hover effect */
[b-jvph61c2j3] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
    cursor: pointer;
}

/* Selected row highlighting */
[b-jvph61c2j3] .e-grid .e-row.e-selectionbackground,
[b-jvph61c2j3] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

/* Selected row hover */
[b-jvph61c2j3] .e-grid .e-row.e-selectionbackground:hover,
[b-jvph61c2j3] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Microsoft-style blue left border on selected rows */
[b-jvph61c2j3] .e-grid .e-row.e-selectionbackground td:first-child,
[b-jvph61c2j3] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(6px - 3px) !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
.loading-overlay[b-jvph61c2j3] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   GRID BADGES AND STATUS INDICATORS
   ======================================== */
.status-badge[b-jvph61c2j3] {
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    display: inline-block;
}

.delay-badge[b-jvph61c2j3] {
    color: #d13438;
    background: #fef6f6;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.overtime-badge[b-jvph61c2j3] {
    color: #107c10;
    background: #f0f9f0;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.early-badge[b-jvph61c2j3] {
    color: #0078d4;
    background: #f0f7fc;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.delay-count-badge[b-jvph61c2j3] {
    color: #d13438;
    background: #fef6f6;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   UNDER DEVELOPMENT STATUS
   ======================================== */
.under-development-container[b-jvph61c2j3] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 60px 20px;
}

.under-development-content[b-jvph61c2j3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 500px;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Assignment wizard sidebar - no overlay */
[b-jvph61c2j3] .assignment-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.sidebar-header[b-jvph61c2j3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-jvph61c2j3] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-jvph61c2j3] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-jvph61c2j3] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-jvph61c2j3] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-jvph61c2j3] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-jvph61c2j3] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-jvph61c2j3] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-jvph61c2j3] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-jvph61c2j3] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-jvph61c2j3] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-jvph61c2j3] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Column Chooser Specific Styles */
.column-chooser-actions[b-jvph61c2j3] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-jvph61c2j3] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-jvph61c2j3] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-actions .btn-link i[b-jvph61c2j3] {
    font-size: 12px;
}

.column-chooser-list[b-jvph61c2j3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-jvph61c2j3] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-jvph61c2j3] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}

.column-chooser-item[b-jvph61c2j3]  .e-checkbox-wrapper {
    width: 100%;
}

.column-chooser-item[b-jvph61c2j3]  .e-checkbox-label {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-jvph61c2j3] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-jvph61c2j3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-jvph61c2j3] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-jvph61c2j3] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-jvph61c2j3] {
    background: #e1dfdd;
}

.btn-success[b-jvph61c2j3] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-jvph61c2j3] {
    background: #0b5c0b;
}

.btn i[b-jvph61c2j3] {
    font-size: 14px;
}

/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-jvph61c2j3] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Wizard Step Content - matching column chooser */
.step-icon[b-jvph61c2j3] {
    margin-bottom: 24px;
    animation: fadeInUp-b-jvph61c2j3 0.6s ease;
}

/* Info Box */
.info-box[b-jvph61c2j3] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-jvph61c2j3] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-jvph61c2j3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-jvph61c2j3] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-jvph61c2j3] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-jvph61c2j3] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-jvph61c2j3] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-jvph61c2j3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-jvph61c2j3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-jvph61c2j3] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-jvph61c2j3] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-jvph61c2j3] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-jvph61c2j3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-jvph61c2j3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-jvph61c2j3] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-jvph61c2j3] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-jvph61c2j3] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-jvph61c2j3] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-jvph61c2j3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-jvph61c2j3] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-jvph61c2j3] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-jvph61c2j3] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-jvph61c2j3] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-jvph61c2j3] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-jvph61c2j3] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-jvph61c2j3 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-jvph61c2j3] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.att-empty-icon[b-jvph61c2j3] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.att-empty-title[b-jvph61c2j3] {
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
}

.att-footer-left[b-jvph61c2j3] {
    flex: 1;
    text-align: left;
}

.att-footer-actions[b-jvph61c2j3] {
    display: flex;
    gap: 12px;
}
/* /Components/Pages/MainLayout/Attendance Reporting/attendance-reports/mobco/transactions/TransactionsMOBCO.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-50g4a5m7i7] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-50g4a5m7i7] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-50g4a5m7i7] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-50g4a5m7i7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-50g4a5m7i7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-50g4a5m7i7] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-50g4a5m7i7] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-50g4a5m7i7] {
    transform: scale(0.98);
}

.header-right[b-50g4a5m7i7] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-50g4a5m7i7] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-50g4a5m7i7] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-50g4a5m7i7] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-50g4a5m7i7] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-50g4a5m7i7] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-50g4a5m7i7] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
    /* Prevent scroll on content wrapper */
}

/* Grid container to fill available space */
[b-50g4a5m7i7] .e-grid {
    /*flex: 1;*/
    /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-50g4a5m7i7] .e-grid .e-row {
    height: 28px !important;
}

[b-50g4a5m7i7] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-50g4a5m7i7] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-50g4a5m7i7] .e-grid .e-gridcontent {
    /*    flex: 1;*/
    overflow-y: auto;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-50g4a5m7i7] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 20px 1px 20px !important;
}

/* Toolbar Items */
[b-50g4a5m7i7] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-50g4a5m7i7] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-50g4a5m7i7] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-50g4a5m7i7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-50g4a5m7i7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-50g4a5m7i7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-50g4a5m7i7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-50g4a5m7i7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-50g4a5m7i7] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-50g4a5m7i7] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-50g4a5m7i7] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-50g4a5m7i7] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-50g4a5m7i7] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-50g4a5m7i7] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-50g4a5m7i7] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-50g4a5m7i7] .e-toolbar .e-textbox.e-input-group,
[b-50g4a5m7i7] .e-toolbar .e-input-group.e-control-wrapper,
[b-50g4a5m7i7] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Search Input Field */
[b-50g4a5m7i7] .e-toolbar .e-textbox.e-input-group .e-input,
[b-50g4a5m7i7] .e-toolbar .e-input-group .e-input,
[b-50g4a5m7i7] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
}

/* Focus State */
[b-50g4a5m7i7] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-50g4a5m7i7] .e-toolbar .e-input-group:focus-within,
[b-50g4a5m7i7] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Clear Button Styling */
[b-50g4a5m7i7] .e-toolbar .e-textbox .e-clear-icon,
[b-50g4a5m7i7] .e-toolbar .e-input-group .e-clear-icon {
    font-size: 10px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    padding: 0 4px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[b-50g4a5m7i7] .e-toolbar .e-textbox .e-clear-icon:hover,
[b-50g4a5m7i7] .e-toolbar .e-input-group .e-clear-icon:hover {
    color: var(--BEC-colorBrandBackground) !important;
    background: transparent !important;
}

/* Search Icon (if present) */
[b-50g4a5m7i7] .e-toolbar .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-50g4a5m7i7] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Sidebar header, content, footer already defined above */

/* Wizard Step Content */
.wizard-step[b-50g4a5m7i7] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-50g4a5m7i7] {
    margin-bottom: 24px;
    animation: fadeInUp-b-50g4a5m7i7 0.6s ease;
}

/* Info Box */
.info-box[b-50g4a5m7i7] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-50g4a5m7i7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-50g4a5m7i7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-50g4a5m7i7] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-50g4a5m7i7] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-50g4a5m7i7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-50g4a5m7i7] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-50g4a5m7i7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-50g4a5m7i7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-50g4a5m7i7] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-50g4a5m7i7] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-50g4a5m7i7] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-50g4a5m7i7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-50g4a5m7i7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-50g4a5m7i7] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-50g4a5m7i7] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-50g4a5m7i7] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-50g4a5m7i7] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-50g4a5m7i7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-50g4a5m7i7] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-50g4a5m7i7] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-50g4a5m7i7] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-50g4a5m7i7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-50g4a5m7i7] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-50g4a5m7i7] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-50g4a5m7i7 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   SIDEBAR STYLES (SHARED BY WIZARDS)
   ======================================== */

.sidebar-header[b-50g4a5m7i7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-50g4a5m7i7] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-50g4a5m7i7] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-50g4a5m7i7] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-50g4a5m7i7] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-50g4a5m7i7] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-50g4a5m7i7] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-50g4a5m7i7] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-50g4a5m7i7] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-50g4a5m7i7] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-50g4a5m7i7] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-50g4a5m7i7] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-50g4a5m7i7] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-50g4a5m7i7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-50g4a5m7i7] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-50g4a5m7i7] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-50g4a5m7i7] {
    background: #e1dfdd;
}

.btn-success[b-50g4a5m7i7] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-50g4a5m7i7] {
    background: #0b5c0b;
}

.btn i[b-50g4a5m7i7] {
    font-size: 14px;
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-50g4a5m7i7] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Column List */
.column-list[b-50g4a5m7i7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-50g4a5m7i7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-50g4a5m7i7] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-50g4a5m7i7] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-50g4a5m7i7] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
}

/* Select All/Deselect All Actions */
.column-actions[b-50g4a5m7i7] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.action-link[b-50g4a5m7i7] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.action-link:hover[b-50g4a5m7i7] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-50g4a5m7i7]::-webkit-scrollbar {
    width: 8px;
}

.column-list[b-50g4a5m7i7]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 4px;
}

.column-list[b-50g4a5m7i7]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke1);
    border-radius: 4px;
}

.column-list[b-50g4a5m7i7]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ======================================== */

/* Mobile Devices (320px - 767px) */
@media screen and (max-width: 767px) {

    /* Page Header - Stack Stats */
    .erp-page-header[b-50g4a5m7i7] {
        flex-direction: column;
        gap: 16px;
        padding: 12px 16px;
    }

    .header-left[b-50g4a5m7i7] {
        width: 100%;
    }

    .page-title[b-50g4a5m7i7] {
        font-size: 18px;
    }

    .header-right[b-50g4a5m7i7] {
        width: 100%;
    }

    .stats-container[b-50g4a5m7i7] {
        justify-content: flex-start;
        gap: 12px;
    }

    .stat-card[b-50g4a5m7i7] {
        min-width: auto;
    }

    .stat-value[b-50g4a5m7i7] {
        font-size: 20px;
    }

    .stat-label[b-50g4a5m7i7] {
        font-size: 10px;
    }

    /* Toolbar - Stack Buttons */
    [b-50g4a5m7i7] .e-toolbar .e-toolbar-items {
        flex-wrap: wrap;
    }

    [b-50g4a5m7i7] .e-toolbar .e-toolbar-item {
        margin: 4px;
    }

    /* Search Bar - Full Width */
    [b-50g4a5m7i7] .e-toolbar .e-textbox.e-input-group {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Grid - Reduce Padding */
    .erp-page-content[b-50g4a5m7i7] {
        padding: 8px;
    }

    [b-50g4a5m7i7] .e-grid {
        font-size: 12px;
    }

    [b-50g4a5m7i7] .e-grid .e-headercell {
        padding: 8px 4px;
        font-size: 11px;
    }

    [b-50g4a5m7i7] .e-grid .e-rowcell {
        padding: 8px 4px;
        font-size: 12px;
    }

    /* Wizards - Full Width */
    [b-50g4a5m7i7] .column-chooser-sidebar,
    [b-50g4a5m7i7] .help-wizard-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sidebar-header[b-50g4a5m7i7] {
        padding: 12px 16px;
    }

    .sidebar-title[b-50g4a5m7i7] {
        font-size: 16px;
    }

    .sidebar-step-content[b-50g4a5m7i7] {
        padding: 16px;
    }

    .step-title[b-50g4a5m7i7] {
        font-size: 16px;
    }

    .step-description[b-50g4a5m7i7] {
        font-size: 13px;
    }

    /* Buttons - Larger Tap Targets */
    .btn[b-50g4a5m7i7] {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 14px;
    }

    .sidebar-close-btn[b-50g4a5m7i7] {
        width: 44px;
        height: 44px;
    }

    /* Column List - Better Spacing */
    .column-item[b-50g4a5m7i7] {
        padding: 14px 12px;
    }

    .column-item input[type="checkbox"][b-50g4a5m7i7] {
        width: 20px;
        height: 20px;
    }

    .column-item label[b-50g4a5m7i7] {
        font-size: 14px;
    }

    /* Feature Items - Stack Icons */
    .feature-item[b-50g4a5m7i7] {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    .feature-item i[b-50g4a5m7i7] {
        margin-bottom: 8px;
    }
}

/* Tablet Devices (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    /* Page Header - Adjust Spacing */
    .erp-page-header[b-50g4a5m7i7] {
        padding: 16px 20px;
    }

    .page-title[b-50g4a5m7i7] {
        font-size: 20px;
    }

    .stats-container[b-50g4a5m7i7] {
        gap: 16px;
    }

    /* Search Bar - Responsive Width */
    [b-50g4a5m7i7] .e-toolbar .e-textbox.e-input-group {
        width: 250px !important;
        max-width: 250px !important;
    }

    /* Wizards - Responsive Width */
    [b-50g4a5m7i7] .column-chooser-sidebar,
    [b-50g4a5m7i7] .help-wizard-sidebar {
        width: 500px !important;
        max-width: 90vw !important;
    }

    /* Grid - Adjust Font Size */
    [b-50g4a5m7i7] .e-grid {
        font-size: 13px;
    }

    [b-50g4a5m7i7] .e-grid .e-headercell {
        font-size: 12px;
    }

    [b-50g4a5m7i7] .e-grid .e-rowcell {
        font-size: 13px;
    }
}

/* Desktop Devices (1025px+) */
@media screen and (min-width: 1025px) {
    /* Default styles already optimized for desktop */

    /* Wizards - Fixed Width */
    [b-50g4a5m7i7] .column-chooser-sidebar,
    [b-50g4a5m7i7] .help-wizard-sidebar {
        width: 600px !important;
        max-width: 600px !important;
    }

    /* Search Bar - Fixed Width */
    [b-50g4a5m7i7] .e-toolbar .e-textbox.e-input-group {
        width: 300px !important;
        max-width: 300px !important;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {

    /* Larger Tap Targets */
    .btn[b-50g4a5m7i7],
    .action-link[b-50g4a5m7i7],
    .sidebar-close-btn[b-50g4a5m7i7],
    .help-icon-btn[b-50g4a5m7i7] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Larger Checkboxes */
    .column-item input[type="checkbox"][b-50g4a5m7i7] {
        width: 22px;
        height: 22px;
    }

    /* Remove Hover Effects (Not Applicable on Touch) */
    .column-item:hover[b-50g4a5m7i7],
    .feature-item:hover[b-50g4a5m7i7],
    .btn:hover[b-50g4a5m7i7] {
        transform: none;
    }
}

/* Landscape Orientation on Mobile */
@media screen and (max-width: 767px) and (orientation: landscape) {

    /* Reduce Header Height */
    .erp-page-header[b-50g4a5m7i7] {
        padding: 8px 16px;
    }

    .page-title[b-50g4a5m7i7] {
        font-size: 16px;
    }

    .stats-container[b-50g4a5m7i7] {
        gap: 8px;
    }

    .stat-value[b-50g4a5m7i7] {
        font-size: 18px;
    }

    /* Wizards - Reduce Height */
    .sidebar-header[b-50g4a5m7i7] {
        padding: 10px 16px;
    }

    .sidebar-step-content[b-50g4a5m7i7] {
        padding: 12px 16px;
    }
}

/* High DPI Displays (Retina) */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* Sharper Borders */
    .stat-card[b-50g4a5m7i7],
    .column-item[b-50g4a5m7i7],
    .feature-item[b-50g4a5m7i7] {
        border-width: 0.5px;
    }
}

/* Print Styles */
@media print {

    /* Hide UI Elements */
    .e-toolbar[b-50g4a5m7i7],
    .sidebar-header[b-50g4a5m7i7],
    .sidebar-footer[b-50g4a5m7i7],
    .help-icon-btn[b-50g4a5m7i7] {
        display: none !important;
    }

    /* Optimize Grid for Print */
    .erp-page-content[b-50g4a5m7i7] {
        padding: 0;
    }

    [b-50g4a5m7i7] .e-grid {
        border: 1px solid #000;
    }

    [b-50g4a5m7i7] .e-grid .e-headercell,
    [b-50g4a5m7i7] .e-grid .e-rowcell {
        border: 1px solid #ccc;
        padding: 4px;
    }
}

/* ========================================
   COLUMN CHOOSER - COMPACT & PROFESSIONAL
   Matching Personal Attendance page styling
   ======================================== */
:global(.e-ccdlg)[b-50g4a5m7i7],
:global(.e-dialog.e-ccdlg)[b-50g4a5m7i7] {
    max-width: 350px !important;
    width: 350px !important;
}

:global(.e-ccdlg .e-dlg-header)[b-50g4a5m7i7],
:global(.e-dialog.e-ccdlg .e-dlg-header)[b-50g4a5m7i7] {
    padding: 10px 14px !important;
}

:global(.e-ccdlg .e-dlg-content)[b-50g4a5m7i7],
:global(.e-dialog.e-ccdlg .e-dlg-content)[b-50g4a5m7i7] {
    padding: 10px 14px !important;
}

:global(.e-ccdlg .e-footer-content)[b-50g4a5m7i7],
:global(.e-dialog.e-ccdlg .e-footer-content)[b-50g4a5m7i7] {
    padding: 8px 14px !important;
}

/* Left-align checkboxes and labels */
:global(.e-ccdlg .e-cc-contentdiv)[b-50g4a5m7i7],
:global(.e-ccdlg .e-dlg-content)[b-50g4a5m7i7],
:global(.e-dialog.e-ccdlg .e-cc-contentdiv)[b-50g4a5m7i7],
:global(.e-dialog.e-ccdlg .e-dlg-content)[b-50g4a5m7i7] {
    direction: ltr !important;
    text-align: left !important;
}

:global(.e-ccdlg .e-checkbox-wrapper)[b-50g4a5m7i7],
:global(.e-dialog.e-ccdlg .e-checkbox-wrapper)[b-50g4a5m7i7] {
    direction: ltr !important;
    justify-content: flex-start !important;
    align-items: center !important;
    display: flex !important;
}

:global(.e-ccdlg .e-checkbox-wrapper .e-label)[b-50g4a5m7i7],
:global(.e-dialog.e-ccdlg .e-checkbox-wrapper .e-label)[b-50g4a5m7i7] {
    padding-left: 8px !important;
    padding-right: 0 !important;
    text-align: left !important;
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-50g4a5m7i7] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.att-col-separator[b-50g4a5m7i7] {
    color: #e0e0e0;
}

.att-footer-left[b-50g4a5m7i7] {
    flex: 1;
    text-align: left;
}

.att-footer-actions[b-50g4a5m7i7] {
    display: flex;
    gap: 12px;
}
/* /Components/Pages/MainLayout/Attendance Reporting/personal-attendance/PersonalAttendanceDetails.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-ai7spri7fs] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-ai7spri7fs] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-ai7spri7fs] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-ai7spri7fs] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-ai7spri7fs] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-ai7spri7fs] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-ai7spri7fs] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-ai7spri7fs] {
    transform: scale(0.98);
}

.page-subtitle[b-ai7spri7fs] {
    display: none;
}

.header-right[b-ai7spri7fs] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-ai7spri7fs] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-ai7spri7fs] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-ai7spri7fs] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-ai7spri7fs] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-ai7spri7fs] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-ai7spri7fs] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-ai7spri7fs] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-ai7spri7fs] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-ai7spri7fs] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-ai7spri7fs] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-ai7spri7fs] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-ai7spri7fs] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-ai7spri7fs] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-ai7spri7fs] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-ai7spri7fs] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-ai7spri7fs] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-ai7spri7fs] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-ai7spri7fs] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-ai7spri7fs] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-ai7spri7fs] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-ai7spri7fs] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-ai7spri7fs] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* DropDownList in Toolbar */
[b-ai7spri7fs] .e-toolbar .e-dropdownlist {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-ai7spri7fs] .e-toolbar .e-dropdownlist .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-ai7spri7fs] .e-toolbar .e-dropdownlist:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - ENHANCED PROFESSIONAL STYLE
   ======================================== */

/* Search TextBox Container - Exact Height Match */
[b-ai7spri7fs] .e-toolbar .e-textbox.e-input-group,
[b-ai7spri7fs] .e-toolbar .e-input-group.e-control-wrapper,
[b-ai7spri7fs] .e-toolbar .e-float-input.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* Search Input Field */
[b-ai7spri7fs] .e-toolbar .e-textbox.e-input-group .e-input,
[b-ai7spri7fs] .e-toolbar .e-input-group .e-input,
[b-ai7spri7fs] .e-toolbar .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 24px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    border: none !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightRegular) !important;
}

/* Focus State */
[b-ai7spri7fs] .e-toolbar .e-textbox.e-input-group:focus-within,
[b-ai7spri7fs] .e-toolbar .e-input-group:focus-within,
[b-ai7spri7fs] .e-toolbar .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

/* Clear Button Styling */
[b-ai7spri7fs] .e-toolbar .e-textbox .e-clear-icon,
[b-ai7spri7fs] .e-toolbar .e-input-group .e-clear-icon {
    font-size: 10px !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    padding: 0 4px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[b-ai7spri7fs] .e-toolbar .e-textbox .e-clear-icon:hover,
[b-ai7spri7fs] .e-toolbar .e-input-group .e-clear-icon:hover {
    color: var(--BEC-colorBrandBackground) !important;
    background: transparent !important;
}

/* Search Icon (if present) */
[b-ai7spri7fs] .e-toolbar .e-input-group-icon {
    border: none !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.search-container[b-ai7spri7fs] {
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.search-input-wrapper[b-ai7spri7fs] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.search-icon[b-ai7spri7fs] {
    position: absolute;
    left: 8px;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
    pointer-events: none;
}

.search-input-wrapper input[b-ai7spri7fs] {
    padding-left: 28px;
    width: 100%;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
.loading-overlay[b-ai7spri7fs] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

.loading-spinner[b-ai7spri7fs] {
    border: 3px solid var(--BEC-colorNeutralStroke2);
    border-top: 3px solid var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-ai7spri7fs 1s linear infinite;
    margin-right: 12px;
}

@keyframes spin-b-ai7spri7fs {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ========================================
   ERROR MESSAGE
   ======================================== */
.error-message[b-ai7spri7fs] {
    padding: 12px 16px;
    background: #fef6f6;
    border: 1px solid #d13438;
    border-radius: var(--BEC-borderRadiusMedium);
    color: #d13438;
    font-size: 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.error-message i[b-ai7spri7fs] {
    font-size: 16px;
}

/* ========================================
   GRID STYLING
   ======================================== */
[b-ai7spri7fs] .erp-grid {
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
}

[b-ai7spri7fs] .erp-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

[b-ai7spri7fs] .erp-grid .e-headercelldiv {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

[b-ai7spri7fs] .erp-grid .e-rowcell {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

[b-ai7spri7fs] .erp-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover);
}

/* ========================================
   UNDER DEVELOPMENT STATUS
   ======================================== */
.under-development-container[b-ai7spri7fs] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 60px 20px;
}

.under-development-content[b-ai7spri7fs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 500px;
}

/* ========================================
   HELP WIZARD STYLES
   ======================================== */

/* Help wizard sidebar - no overlay */
[b-ai7spri7fs] .help-wizard-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Step Icon */
.step-icon[b-ai7spri7fs] {
    text-align: center;
    margin-bottom: 20px;
}

/* Info Box */
.info-box[b-ai7spri7fs] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-ai7spri7fs] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-ai7spri7fs] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-ai7spri7fs] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-ai7spri7fs] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-ai7spri7fs] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-ai7spri7fs] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-ai7spri7fs] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-ai7spri7fs] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-ai7spri7fs] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-ai7spri7fs] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step strong[b-ai7spri7fs] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.example-step p[b-ai7spri7fs] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Use Cases */
.use-cases[b-ai7spri7fs] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-ai7spri7fs] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-ai7spri7fs] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #10b981;
}

.use-case i[b-ai7spri7fs] {
    color: #10b981;
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-ai7spri7fs] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-ai7spri7fs] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-ai7spri7fs] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-ai7spri7fs] {
    color: #f59e0b;
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-ai7spri7fs] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-ai7spri7fs] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-ai7spri7fs] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-ai7spri7fs] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Animations */
@keyframes fadeInUp-b-ai7spri7fs {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */

/* Column chooser sidebar - no overlay */
[b-ai7spri7fs] .column-chooser-sidebar+.e-sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* ========================================
   SIDEBAR STYLES (SHARED BY WIZARDS)
   ======================================== */

.sidebar-header[b-ai7spri7fs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-ai7spri7fs] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-ai7spri7fs] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-ai7spri7fs] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-ai7spri7fs] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-ai7spri7fs] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-ai7spri7fs] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-ai7spri7fs] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-ai7spri7fs] {
    max-width: 100%;
    text-align: left;
}

.step-title[b-ai7spri7fs] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-ai7spri7fs] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-ai7spri7fs] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
}

/* Sidebar Footer */
.sidebar-footer[b-ai7spri7fs] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-ai7spri7fs] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-ai7spri7fs] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-ai7spri7fs] {
    background: #f3f2f1;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-ai7spri7fs] {
    background: #e1dfdd;
}

.btn-success[b-ai7spri7fs] {
    background: #107c10;
    color: #ffffff;
}

.btn-success:hover:not(:disabled)[b-ai7spri7fs] {
    background: #0b5c0b;
}

.btn i[b-ai7spri7fs] {
    font-size: 14px;
}

/* Column List */
.column-list[b-ai7spri7fs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 8px;
}

.column-item[b-ai7spri7fs] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.column-item:hover[b-ai7spri7fs] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.column-item input[type="checkbox"][b-ai7spri7fs] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--BEC-colorBrandForeground1);
}

.column-item label[b-ai7spri7fs] {
    flex: 1;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    user-select: none;
}

/* Select All/Deselect All Actions */
.column-actions[b-ai7spri7fs] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.action-link[b-ai7spri7fs] {
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.action-link:hover[b-ai7spri7fs] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Scrollbar Styling for Column List */
.column-list[b-ai7spri7fs]::-webkit-scrollbar {
    width: 8px;
}

.column-list[b-ai7spri7fs]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 4px;
}

.column-list[b-ai7spri7fs]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke1);
    border-radius: 4px;
}

.column-list[b-ai7spri7fs]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ======================================== */

/* Mobile Devices (320px - 767px) */
@media screen and (max-width: 767px) {

    /* Page Header - Stack Stats */
    .erp-page-header[b-ai7spri7fs] {
        flex-direction: column;
        gap: 16px;
        padding: 12px 16px;
    }

    .header-left[b-ai7spri7fs] {
        width: 100%;
    }

    .page-title[b-ai7spri7fs] {
        font-size: 18px;
    }

    .header-right[b-ai7spri7fs] {
        width: 100%;
    }

    .stats-container[b-ai7spri7fs] {
        justify-content: flex-start;
        gap: 12px;
        flex-wrap: wrap;
    }

    .stat-card[b-ai7spri7fs] {
        min-width: auto;
        flex: 1 1 calc(50% - 6px);
    }

    .stat-value[b-ai7spri7fs] {
        font-size: 20px;
    }

    .stat-label[b-ai7spri7fs] {
        font-size: 10px;
    }

    /* Toolbar - Stack Buttons */
    [b-ai7spri7fs] .e-toolbar .e-toolbar-items {
        flex-wrap: wrap;
    }

    [b-ai7spri7fs] .e-toolbar .e-toolbar-item {
        margin: 4px;
    }

    /* Search Bar - Full Width */
    [b-ai7spri7fs] .e-toolbar .e-textbox.e-input-group {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Grid - Reduce Padding */
    .erp-page-content[b-ai7spri7fs] {
        padding: 8px;
    }

    [b-ai7spri7fs] .e-grid {
        font-size: 12px;
    }

    [b-ai7spri7fs] .e-grid .e-headercell {
        padding: 8px 4px;
        font-size: 11px;
    }

    [b-ai7spri7fs] .e-grid .e-rowcell {
        padding: 8px 4px;
        font-size: 12px;
    }

    /* Wizards - Full Width */
    [b-ai7spri7fs] .column-chooser-sidebar,
    [b-ai7spri7fs] .help-wizard-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sidebar-header[b-ai7spri7fs] {
        padding: 12px 16px;
    }

    .sidebar-title[b-ai7spri7fs] {
        font-size: 16px;
    }

    .sidebar-step-content[b-ai7spri7fs] {
        padding: 16px;
    }

    .step-title[b-ai7spri7fs] {
        font-size: 16px;
    }

    .step-description[b-ai7spri7fs] {
        font-size: 13px;
    }

    /* Buttons - Larger Tap Targets */
    .btn[b-ai7spri7fs] {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 14px;
    }

    .sidebar-close-btn[b-ai7spri7fs] {
        width: 44px;
        height: 44px;
    }

    /* Column List - Better Spacing */
    .column-item[b-ai7spri7fs] {
        padding: 14px 12px;
    }

    .column-item input[type="checkbox"][b-ai7spri7fs] {
        width: 20px;
        height: 20px;
    }

    .column-item label[b-ai7spri7fs] {
        font-size: 14px;
    }

    /* Feature Items - Stack Icons */
    .feature-item[b-ai7spri7fs] {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    .feature-item i[b-ai7spri7fs] {
        margin-bottom: 8px;
    }

    /* Date Filters - Stack Vertically */
    .date-filters[b-ai7spri7fs] {
        flex-direction: column;
        gap: 12px;
    }

    .date-filter-group[b-ai7spri7fs] {
        width: 100%;
    }
}

/* Tablet Devices (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    /* Page Header - Adjust Spacing */
    .erp-page-header[b-ai7spri7fs] {
        padding: 16px 20px;
    }

    .page-title[b-ai7spri7fs] {
        font-size: 20px;
    }

    .stats-container[b-ai7spri7fs] {
        gap: 16px;
    }

    /* Search Bar - Responsive Width */
    [b-ai7spri7fs] .e-toolbar .e-textbox.e-input-group {
        width: 250px !important;
        max-width: 250px !important;
    }

    /* Wizards - Responsive Width */
    [b-ai7spri7fs] .column-chooser-sidebar,
    [b-ai7spri7fs] .help-wizard-sidebar {
        width: 500px !important;
        max-width: 90vw !important;
    }

    /* Grid - Adjust Font Size */
    [b-ai7spri7fs] .e-grid {
        font-size: 13px;
    }

    [b-ai7spri7fs] .e-grid .e-headercell {
        font-size: 12px;
    }

    [b-ai7spri7fs] .e-grid .e-rowcell {
        font-size: 13px;
    }
}

/* Desktop Devices (1025px+) */
@media screen and (min-width: 1025px) {
    /* Default styles already optimized for desktop */

    /* Wizards - Fixed Width */
    [b-ai7spri7fs] .column-chooser-sidebar,
    [b-ai7spri7fs] .help-wizard-sidebar {
        width: 600px !important;
        max-width: 600px !important;
    }

    /* Search Bar - Fixed Width */
    [b-ai7spri7fs] .e-toolbar .e-textbox.e-input-group {
        width: 300px !important;
        max-width: 300px !important;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {

    /* Larger Tap Targets */
    .btn[b-ai7spri7fs],
    .action-link[b-ai7spri7fs],
    .sidebar-close-btn[b-ai7spri7fs] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Larger Checkboxes */
    .column-item input[type="checkbox"][b-ai7spri7fs] {
        width: 22px;
        height: 22px;
    }

    /* Remove Hover Effects (Not Applicable on Touch) */
    .column-item:hover[b-ai7spri7fs],
    .feature-item:hover[b-ai7spri7fs],
    .btn:hover[b-ai7spri7fs] {
        transform: none;
    }

    /* Toolbar Buttons - Larger */
    [b-ai7spri7fs] .e-toolbar .e-btn {
        min-height: 44px;
        padding: 10px 16px;
    }
}

/* Landscape Orientation on Mobile */
@media screen and (max-width: 767px) and (orientation: landscape) {

    /* Reduce Header Height */
    .erp-page-header[b-ai7spri7fs] {
        padding: 8px 16px;
    }

    .page-title[b-ai7spri7fs] {
        font-size: 16px;
    }

    .stats-container[b-ai7spri7fs] {
        gap: 8px;
    }

    .stat-value[b-ai7spri7fs] {
        font-size: 18px;
    }

    /* Wizards - Reduce Height */
    .sidebar-header[b-ai7spri7fs] {
        padding: 10px 16px;
    }

    .sidebar-step-content[b-ai7spri7fs] {
        padding: 12px 16px;
    }

    /* Grid Height - More Space */
    [b-ai7spri7fs] .e-grid {
        height: calc(100vh - 180px) !important;
    }
}

/* High DPI Displays (Retina) */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* Sharper Borders */
    .stat-card[b-ai7spri7fs],
    .column-item[b-ai7spri7fs],
    .feature-item[b-ai7spri7fs] {
        border-width: 0.5px;
    }
}

/* Print Styles */
@media print {

    /* Hide UI Elements */
    .e-toolbar[b-ai7spri7fs],
    .sidebar-header[b-ai7spri7fs],
    .sidebar-footer[b-ai7spri7fs],
    .erp-page-header[b-ai7spri7fs] {
        display: none !important;
    }

    /* Optimize Grid for Print */
    .erp-page-content[b-ai7spri7fs] {
        padding: 0;
    }

    [b-ai7spri7fs] .e-grid {
        border: 1px solid #000;
        height: auto !important;
    }

    [b-ai7spri7fs] .e-grid .e-headercell,
    [b-ai7spri7fs] .e-grid .e-rowcell {
        border: 1px solid #ccc;
        padding: 4px;
    }

    /* Show all rows when printing */
    [b-ai7spri7fs] .e-grid .e-pager {
        display: none !important;
    }
}

/* ========================================
   COLUMN CHOOSER SIDEBAR - WIDTH STYLING
   Using multiple selectors for maximum specificity
   ======================================== */
[b-ai7spri7fs] .column-chooser-sidebar.e-sidebar,
[b-ai7spri7fs] .column-chooser-sidebar,
:global(.column-chooser-sidebar.e-sidebar)[b-ai7spri7fs],
:global(.column-chooser-sidebar)[b-ai7spri7fs],
:global(body .column-chooser-sidebar)[b-ai7spri7fs],
:global(body .e-sidebar.column-chooser-sidebar)[b-ai7spri7fs] {
    width: 350px !important;
    max-width: 350px !important;
    min-width: 350px !important;
}

/* Target the sidebar wrapper */
[b-ai7spri7fs] .e-sidebar-wrapper .column-chooser-sidebar,
:global(.e-sidebar-wrapper .column-chooser-sidebar)[b-ai7spri7fs],
:global(body .e-sidebar-wrapper .column-chooser-sidebar)[b-ai7spri7fs] {
    width: 350px !important;
    max-width: 350px !important;
}

/* Target any sidebar with this class at root level */
:global(.e-sidebar[class*="column-chooser"])[b-ai7spri7fs] {
    width: 350px !important;
    max-width: 350px !important;
    min-width: 350px !important;
}

/* ========================================
   COLUMN CHOOSER - COMPACT & PROFESSIONAL
   ======================================== */
:global(.e-ccdlg)[b-ai7spri7fs],
:global(.e-dialog.e-ccdlg)[b-ai7spri7fs] {
    max-width: 280px !important;
    width: 280px !important;
}

:global(.e-ccdlg .e-dlg-header)[b-ai7spri7fs],
:global(.e-dialog.e-ccdlg .e-dlg-header)[b-ai7spri7fs] {
    padding: 10px 14px !important;
}

:global(.e-ccdlg .e-dlg-content)[b-ai7spri7fs],
:global(.e-dialog.e-ccdlg .e-dlg-content)[b-ai7spri7fs] {
    padding: 10px 14px !important;
}

:global(.e-ccdlg .e-footer-content)[b-ai7spri7fs],
:global(.e-dialog.e-ccdlg .e-footer-content)[b-ai7spri7fs] {
    padding: 8px 14px !important;
}

/* ========================================
   ATTENDANCE REPORTING - MIGRATED INLINE STYLES
   ======================================== */
.att-step-icon[b-ai7spri7fs] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.att-col-separator[b-ai7spri7fs] {
    color: #e0e0e0;
}

.att-footer-left[b-ai7spri7fs] {
    flex: 1;
    text-align: left;
}

.att-footer-actions[b-ai7spri7fs] {
    display: flex;
    gap: 12px;
}

.att-info-box-mt[b-ai7spri7fs] {
    margin-top: 24px;
}
/* /Components/Pages/MainLayout/AttendanceDocs.razor.rz.scp.css */
/* AttendanceDocs - Full-Width Layout Approach */

/* Base Container */
.docs-container[b-x94plshrzr] {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--text-primary, #2D3748);
}

/* Documentation Section Styling */
.docs-section[b-x94plshrzr] {
    display: none;
    animation: fade-in-b-x94plshrzr 0.2s ease;
    width: 100%;
}

.docs-section.active[b-x94plshrzr] {
    display: block;
}

@keyframes fade-in-b-x94plshrzr {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.docs-section-header[b-x94plshrzr] {
    background: linear-gradient(90deg, var(--accent-primary, #2B3484) 0%, var(--accent-secondary, #5A67D8) 100%);
    padding: 1rem 1.5rem;
    color: white;
    width: 100%;
}

.docs-section-header h2[b-x94plshrzr] {
    margin: 0;
    font-weight: 600;
    font-size: 1.5rem;
}

.docs-section-content[b-x94plshrzr] {
    padding: 1.25rem 1.5rem;
}

.docs-section-content p[b-x94plshrzr] {
    line-height: 1.5;
    margin-bottom: 0.75rem;
    color: var(--text-primary, #2D3748);
    font-size: 0.9375rem;
}

/* Feature Grid */
.feature-grid[b-x94plshrzr] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.feature-card[b-x94plshrzr] {
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    padding: 1rem;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color, #E2E8F0);
}

.feature-card:hover[b-x94plshrzr] {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.05));
}

.feature-icon[b-x94plshrzr] {
    width: 32px;
    height: 32px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 0.5rem;
}

.report-icon[b-x94plshrzr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e3c72'%3E%3Cpath d='M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E");
}

.dashboard-icon[b-x94plshrzr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e3c72'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 10h2v7H7v-7zm4-3h2v10h-2V7zm4 6h2v4h-2v-4z'/%3E%3C/svg%3E");
}

.filter-icon[b-x94plshrzr] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e3c72'%3E%3Cpath d='M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z'/%3E%3C/svg%3E");
}

.feature-card h3[b-x94plshrzr] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--accent-primary, #2B3484);
}

.feature-card p[b-x94plshrzr] {
    font-size: 0.875rem;
    line-height: 1.4;
    margin: 0;
    color: var(--text-secondary, #4A5568);
}

/* Report Types */
.report-type-list[b-x94plshrzr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    width: 100%;
}

.report-type-item[b-x94plshrzr] {
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    padding: 1rem;
    border-left: 3px solid var(--accent-primary, #2B3484);
}

.report-type-item h3[b-x94plshrzr] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--accent-primary, #2B3484);
}

.report-type-item p[b-x94plshrzr] {
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    color: var(--text-secondary, #4A5568);
}

.report-note[b-x94plshrzr] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background-color: rgba(49, 130, 206, 0.1);
    padding: 0.5rem;
    border-radius: 4px;
    margin-top: 0.5rem;
}

.note-icon[b-x94plshrzr] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233182ce'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.report-note p[b-x94plshrzr] {
    font-size: 0.8125rem;
    margin: 0;
    color: var(--accent-primary, #2B3484);
}

/* Interface Guide */
.interface-section[b-x94plshrzr] {
    margin-bottom: 1.5rem;
    width: 100%;
}

.interface-section h3[b-x94plshrzr] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--accent-primary, #2B3484);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    padding-bottom: 0.5rem;
}

.interface-section h3[b-x94plshrzr]::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background-color: var(--accent-primary, #2B3484);
    border-radius: 2px;
}

.interface-section p[b-x94plshrzr] {
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
}

.interface-section ul[b-x94plshrzr] {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.interface-section li[b-x94plshrzr] {
    margin-bottom: 0.375rem;
    line-height: 1.5;
    font-size: 0.9375rem;
}

/* Data Interpretation */
.data-section[b-x94plshrzr] {
    margin-bottom: 1.5rem;
    width: 100%;
}

.data-section h3[b-x94plshrzr] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--accent-primary, #2B3484);
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    padding-bottom: 0.5rem;
}

.data-table[b-x94plshrzr] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border-color, #E2E8F0);
    font-size: 0.875rem;
}

.data-table th[b-x94plshrzr] {
    background-color: var(--accent-primary, #2B3484);
    color: white;
    text-align: left;
    padding: 0.625rem 0.875rem;
    font-weight: 600;
    font-size: 0.875rem;
}

.data-table td[b-x94plshrzr] {
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--border-color, #E2E8F0);
    font-size: 0.875rem;
}

.data-table tr:nth-child(even)[b-x94plshrzr] {
    background-color: var(--bg-tertiary, #F1F5F9);
}

.indicator[b-x94plshrzr] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.indicator.normal[b-x94plshrzr] {
    background-color: #A0AEC0;
}

.indicator.success[b-x94plshrzr] {
    background-color: #48BB78;
}

.indicator.warning[b-x94plshrzr] {
    background-color: #ED8936;
}

.indicator.danger[b-x94plshrzr] {
    background-color: #E53E3E;
}

.data-table ul[b-x94plshrzr] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.data-table li[b-x94plshrzr] {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
}

/* Filtering */
.filter-section[b-x94plshrzr] {
    margin-bottom: 1.5rem;
    width: 100%;
}

.filter-section h3[b-x94plshrzr] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--accent-primary, #2B3484);
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    padding-bottom: 0.5rem;
}

.filter-section p[b-x94plshrzr] {
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
}

.filter-section ul[b-x94plshrzr] {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.filter-section li[b-x94plshrzr] {
    margin-bottom: 0.375rem;
    line-height: 1.5;
    font-size: 0.9375rem;
}

/* FAQ */
.faq-list[b-x94plshrzr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

:deep(.fluent-accordion-item)[b-x94plshrzr] {
    border: none;
    background-color: transparent;
    width: 100%;
}

:deep(.fluent-accordion-item .fluent-accordion-header-content)[b-x94plshrzr] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary, #2D3748);
}

:deep(.fluent-accordion-item .fluent-accordion-header)[b-x94plshrzr] {
    background-color: var(--bg-tertiary, #F1F5F9);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 4px;
    padding: 0.75rem 1rem;
}

:deep(.fluent-accordion-item .fluent-accordion-header:hover)[b-x94plshrzr] {
    background-color: rgba(43, 52, 132, 0.05);
}

:deep(.fluent-accordion-item[expanded] .fluent-accordion-header)[b-x94plshrzr] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
}

:deep(.fluent-accordion-item .fluent-accordion-region)[b-x94plshrzr] {
    background-color: white;
    border: 1px solid var(--border-color, #E2E8F0);
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

:deep(.fluent-accordion-item .fluent-accordion-region-content)[b-x94plshrzr] {
    padding: 1rem;
}

:deep(.fluent-accordion-item .fluent-accordion-region-content p)[b-x94plshrzr] {
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    color: var(--text-secondary, #4A5568);
}

:deep(.fluent-accordion-item .fluent-accordion-region-content p:last-child)[b-x94plshrzr] {
    margin-bottom: 0;
}

:deep(.fluent-accordion-item .fluent-accordion-region-content ul)[b-x94plshrzr] {
    padding-left: 1.25rem;
    margin-bottom: 0.75rem;
}

:deep(.fluent-accordion-item .fluent-accordion-region-content li)[b-x94plshrzr] {
    margin-bottom: 0.375rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Tablet Breakpoint */
@media (min-width: 768px) {
    .docs-section-header[b-x94plshrzr] {
        padding: 1.25rem 2rem;
    }
    
    .docs-section-header h2[b-x94plshrzr] {
        font-size: 1.75rem;
    }
    
    .docs-section-content[b-x94plshrzr] {
        padding: 1.5rem 2rem;
    }
    
    .feature-grid[b-x94plshrzr] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .diagram-content[b-x94plshrzr] {
        flex-direction: row;
        justify-content: space-between;
    }
    
    .diagram-arrow[b-x94plshrzr] {
        transform: rotate(-90deg);
    }
    
    .diagram-box[b-x94plshrzr] {
        width: 30%;
        max-width: none;
    }
    
    .selector-tabs[b-x94plshrzr] {
        justify-content: flex-start;
    }
    
    .columns-grid[b-x94plshrzr] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .filter-columns[b-x94plshrzr] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .stats-item[b-x94plshrzr] {
        flex: 1 0 auto;
    }
    
    .report-type-list[b-x94plshrzr] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Desktop Breakpoint */
@media (min-width: 1024px) {
    .docs-section-header[b-x94plshrzr] {
        padding: 1.5rem 2.5rem;
    }
    
    .docs-section-content[b-x94plshrzr] {
        padding: 2rem 2.5rem;
    }
    
    .interface-mockup[b-x94plshrzr] {
        padding: 1.5rem;
        gap: 1rem;
    }
    
    .mobile-mockup[b-x94plshrzr] {
        max-width: 360px;
    }
    
    .date-presets[b-x94plshrzr] {
        justify-content: flex-start;
    }
    
    .faq-list[b-x94plshrzr] {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}

/* Large Desktop Breakpoint */
@media (min-width: 1280px) {
    .docs-section-header[b-x94plshrzr] {
        padding: 1.75rem 3rem;
    }
    
    .docs-section-header h2[b-x94plshrzr] {
        font-size: 2rem;
    }
    
    .docs-section-content[b-x94plshrzr] {
        padding: 2.5rem 3rem;
    }
}

/* Overview Diagram */
.overview-diagram[b-x94plshrzr] {
    margin-top: 1.5rem;
    width: 100%;
}

.diagram-header[b-x94plshrzr] {
    background-color: var(--accent-primary, #2B3484);
    color: white;
    font-size: 0.9375rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

.diagram-content[b-x94plshrzr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    gap: 0.75rem;
    background-color: var(--bg-tertiary, #F1F5F9);
}

.diagram-box[b-x94plshrzr] {
    width: 100%;
    max-width: 400px;
    padding: 0.75rem;
    border-radius: 4px;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary, #2D3748);
}

.filter-box[b-x94plshrzr] {
    background-color: rgba(49, 130, 206, 0.15);
    border: 1px solid rgba(49, 130, 206, 0.3);
}

.stats-box[b-x94plshrzr] {
    background-color: rgba(72, 187, 120, 0.15);
    border: 1px solid rgba(72, 187, 120, 0.3);
}

.data-box[b-x94plshrzr] {
    background-color: rgba(237, 137, 54, 0.15);
    border: 1px solid rgba(237, 137, 54, 0.3);
}

.diagram-arrow[b-x94plshrzr] {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--border-color, #E2E8F0);
}

/* Report Selector */
.report-selector[b-x94plshrzr] {
    margin-top: 1.5rem;
    width: 100%;
}

.selector-header[b-x94plshrzr] {
    background-color: var(--accent-primary, #2B3484);
    color: white;
    font-size: 0.9375rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

.selector-tabs[b-x94plshrzr] {
    display: flex;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    flex-wrap: wrap;
    background-color: var(--bg-tertiary, #F1F5F9);
}

.selector-tab[b-x94plshrzr] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: white;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.5));
}

.selector-tab.active[b-x94plshrzr] {
    background-color: rgba(43, 52, 132, 0.1);
    border-color: var(--accent-primary, #2B3484);
}

.tab-indicator[b-x94plshrzr] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #CBD5E0;
    margin-right: 0.5rem;
}

.selector-tab.active .tab-indicator[b-x94plshrzr] {
    background-color: var(--accent-primary, #2B3484);
}

/* Interface Mockup */
.interface-layout[b-x94plshrzr] {
    margin: 1rem 0 1.5rem;
    width: 100%;
}

.interface-mockup[b-x94plshrzr] {
    background-color: var(--bg-tertiary, #F1F5F9);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.mockup-filter[b-x94plshrzr] {
    height: 50px;
    background-color: white;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mockup-filter[b-x94plshrzr]::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 60%;
    height: 10px;
    background-color: rgba(43, 52, 132, 0.1);
    border-radius: 4px;
}

.mockup-filter[b-x94plshrzr]::after {
    content: '';
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20%;
    height: 10px;
    background-color: rgba(43, 52, 132, 0.2);
    border-radius: 4px;
}

.mockup-stats[b-x94plshrzr] {
    height: 40px;
    background-color: var(--accent-primary, #2B3484);
    opacity: 0.8;
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    gap: 1rem;
}

.mockup-stats[b-x94plshrzr]::before, 
.mockup-stats[b-x94plshrzr]::after {
    content: '';
    height: 10px;
    background-color: white;
    opacity: 0.7;
    border-radius: 4px;
}

.mockup-stats[b-x94plshrzr]::before {
    width: 60px;
}

.mockup-stats[b-x94plshrzr]::after {
    width: 80px;
}

.mockup-table[b-x94plshrzr] {
    height: 120px;
    background-color: white;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.mockup-table[b-x94plshrzr]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background-color: rgba(43, 52, 132, 0.05);
}

.mockup-table[b-x94plshrzr]::after {
    content: '';
    position: absolute;
    top: 40px;
    left: 1rem;
    right: 1rem;
    height: 70px;
    background-image: 
        linear-gradient(to bottom, 
            rgba(226, 232, 240, 0.5) 0%, 
            rgba(226, 232, 240, 0.5) 1px, 
            transparent 1px, 
            transparent 23px,
            rgba(226, 232, 240, 0.5) 23px, 
            rgba(226, 232, 240, 0.5) 24px, 
            transparent 24px, 
            transparent 47px,
            rgba(226, 232, 240, 0.5) 47px, 
            rgba(226, 232, 240, 0.5) 48px);
}

/* Stats Indicators */
.stats-indicators[b-x94plshrzr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    width: 100%;
}

.stats-item[b-x94plshrzr] {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    flex: 1 0 48%;
    min-width: 140px;
}

.stats-icon[b-x94plshrzr] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 4px;
    margin-right: 0.75rem;
    position: relative;
}

.stats-icon.total[b-x94plshrzr] {
    background-color: rgba(43, 52, 132, 0.1);
}

.stats-icon.present[b-x94plshrzr] {
    background-color: rgba(72, 187, 120, 0.1);
}

.stats-icon.late[b-x94plshrzr] {
    background-color: rgba(237, 137, 54, 0.1);
}

.stats-icon.overtime[b-x94plshrzr] {
    background-color: rgba(49, 130, 206, 0.1);
}

.stats-icon.early[b-x94plshrzr] {
    background-color: rgba(229, 62, 62, 0.1);
}

.stats-text[b-x94plshrzr] {
    display: flex;
    flex-direction: column;
}

.stats-label[b-x94plshrzr] {
    font-size: 0.75rem;
    color: var(--text-secondary, #4A5568);
}

.stats-value[b-x94plshrzr] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary, #2D3748);
}

/* Columns Grid */
.columns-grid[b-x94plshrzr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 0.75rem;
    width: 100%;
}

.column-item[b-x94plshrzr] {
    background-color: rgba(43, 52, 132, 0.05);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    text-align: center;
}

/* Mobile Mockup */
.mobile-mockup[b-x94plshrzr] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background-color: rgba(43, 52, 132, 0.05);
    width: 100%;
    max-width: 360px;
}

.mobile-card[b-x94plshrzr] {
    background-color: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mobile-card-header[b-x94plshrzr] {
    background-color: var(--accent-primary, #2B3484);
    color: white;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
}

.badge-number[b-x94plshrzr] {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 0.125rem 0.5rem;
    font-size: 0.8125rem;
}

.mobile-card-content[b-x94plshrzr] {
    padding: 0.625rem 0.875rem;
}

.mobile-row[b-x94plshrzr] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
}

.mobile-row:last-child[b-x94plshrzr] {
    margin-bottom: 0;
}

.mobile-label[b-x94plshrzr] {
    color: var(--text-secondary, #4A5568);
}

.mobile-value[b-x94plshrzr] {
    font-weight: 500;
}

.mobile-value.delay[b-x94plshrzr] {
    color: #ED8936;
}

/* Filter Mockup */
.filter-mockup[b-x94plshrzr] {
    margin-top: 0.75rem;
    background-color: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 400px;
}

.filter-header[b-x94plshrzr] {
    background-color: var(--accent-primary, #2B3484);
    color: white;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    font-weight: 500;
}

.filter-content[b-x94plshrzr] {
    padding: 0.75rem 1rem;
}

.filter-group[b-x94plshrzr] {
    margin-bottom: 0.75rem;
}

.filter-group:last-child[b-x94plshrzr] {
    margin-bottom: 0;
}

.filter-label[b-x94plshrzr] {
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
    color: var(--text-secondary, #4A5568);
}

.filter-input[b-x94plshrzr] {
    height: 30px;
    background-color: rgba(226, 232, 240, 0.5);
    border-radius: 4px;
}

.filter-date-range[b-x94plshrzr] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.date-preset[b-x94plshrzr] {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    background-color: rgba(226, 232, 240, 0.5);
    border-radius: 4px;
    color: var(--text-secondary, #4A5568);
}

.date-preset.active[b-x94plshrzr] {
    background-color: rgba(43, 52, 132, 0.1);
    color: var(--accent-primary, #2B3484);
    font-weight: 500;
}

/* Data Visuals */
.data-visual[b-x94plshrzr] {
    margin-top: 1rem;
    background-color: white;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.8));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    width: 100%;
}

.absent-row[b-x94plshrzr], .trc-row[b-x94plshrzr] {
    display: flex;
    border-bottom: 1px solid var(--border-color, rgba(226, 232, 240, 0.5));
}

.absent-row:last-child[b-x94plshrzr], .trc-row:last-child[b-x94plshrzr] {
    border-bottom: none;
}

.absent-cell[b-x94plshrzr], .trc-cell[b-x94plshrzr] {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    flex: 1;
    display: flex;
    align-items: center;
}

.absent-cell.header[b-x94plshrzr], .trc-cell.header[b-x94plshrzr] {
    background-color: var(--accent-primary, #2B3484);
    color: white;
    font-weight: 500;
    font-size: 0.8125rem;
}

/* Search Visual */
.search-visual[b-x94plshrzr] {
    margin-top: 0.75rem;
    width: 100%;
}

.search-box[b-x94plshrzr] {
    background-color: white;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.8));
    width: 100%;
    max-width: 500px;
}

.search-icon[b-x94plshrzr] {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234A5568'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    margin-right: 0.75rem;
    opacity: 0.5;
}

.search-placeholder[b-x94plshrzr] {
    color: var(--text-secondary, #4A5568);
    opacity: 0.6;
    font-size: 0.875rem;
}

/* Filter Columns */
.filter-columns[b-x94plshrzr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 0.75rem;
    width: 100%;
}

.filter-column[b-x94plshrzr] {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.filter-column-icon[b-x94plshrzr] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    background-color: rgba(43, 52, 132, 0.1);
    border-radius: 2px;
    margin-right: 0.5rem;
}

.filter-column span[b-x94plshrzr] {
    font-size: 0.875rem;
}

/* Date Presets */
.date-presets[b-x94plshrzr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    width: 100%;
}

.date-preset-item[b-x94plshrzr] {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.date-preset-item.active[b-x94plshrzr] {
    background-color: rgba(43, 52, 132, 0.1);
    border: 1px solid var(--accent-primary, #2B3484);
}

.date-preset-icon[b-x94plshrzr] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    background-color: rgba(43, 52, 132, 0.1);
    border-radius: 2px;
    margin-right: 0.5rem;
}

.date-preset-item span[b-x94plshrzr] {
    font-size: 0.875rem;
}

/* Sort Visual */
.sort-visual[b-x94plshrzr] {
    margin-top: 0.75rem;
    width: 100%;
}

.sort-buttons[b-x94plshrzr] {
    display: flex;
    gap: 0.75rem;
}

.sort-button[b-x94plshrzr] {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sort-icon[b-x94plshrzr] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    background-color: rgba(43, 52, 132, 0.1);
    border-radius: 2px;
    margin-right: 0.5rem;
}

.sort-button span[b-x94plshrzr] {
    font-size: 0.875rem;
}

/* Date Picker Visual */
.date-picker-visual[b-x94plshrzr] {
    margin-top: 0.75rem;
    background-color: white;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 600px;
}

.date-picker[b-x94plshrzr] {
    display: flex;
    align-items: center;
}

.date-label[b-x94plshrzr] {
    font-size: 0.875rem;
    margin-right: 0.5rem;
    color: var(--text-secondary, #4A5568);
}

.date-input[b-x94plshrzr] {
    width: 120px;
    height: 32px;
    background-color: rgba(226, 232, 240, 0.5);
    border-radius: 4px;
}

.date-apply[b-x94plshrzr] {
    padding: 0.25rem 0.75rem;
    background-color: var(--accent-primary, #2B3484);
    color: white;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
}
/* /Components/Pages/MainLayout/AutomatedEmails/MarketingPortalImages.razor.rz.scp.css */
/* ========================================
   Marketing Portal Images — scoped styles
   Mirrors Intranet-MainPage's card-surface / home-col material,
   brand navy, Inter type and inline-toast conventions.
   ======================================== */

.mpi-page-root[b-ytkzcuv314] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.5rem;
    font-family: 'Inter', sans-serif;
    color: #4b5563;
    --BEC-colorBrandBackground: #2B3484;
    --BEC-colorBrandBackgroundHover: #1e2460;
}

[b-ytkzcuv314] button:not(:disabled) { cursor: pointer; }
[b-ytkzcuv314] button:disabled { cursor: not-allowed; opacity: 0.6; }

/* ── Header ── */
.mpi-header[b-ytkzcuv314] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.mpi-header__title-wrap[b-ytkzcuv314] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mpi-header__title[b-ytkzcuv314] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.mpi-header__subtitle[b-ytkzcuv314] {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0.15rem 0 0;
}

.mpi-header__actions[b-ytkzcuv314] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mpi-header__count[b-ytkzcuv314] {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 600;
}

.mpi-upload-btn[b-ytkzcuv314] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--BEC-colorBrandBackground, #2B3484);
    color: #fff;
    border: none;
    border-radius: 0.4rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background 0.15s ease;
}
.mpi-upload-btn:hover:not(:disabled)[b-ytkzcuv314] { background: var(--BEC-colorBrandBackgroundHover, #1e2460); }

.mpi-send-email-btn[b-ytkzcuv314] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    color: var(--BEC-colorBrandBackground, #2B3484);
    border: 1px solid var(--BEC-colorBrandBackground, #2B3484);
    border-radius: 0.4rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background 0.15s ease;
}
.mpi-send-email-btn:hover[b-ytkzcuv314] { background: rgba(43, 52, 132, 0.08); }

/* Reused from the shared icon-badge convention (Intranet-MainPage's content-section-header__icon) */
.content-section-header__icon[b-ytkzcuv314] {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--BEC-colorBrandBackground, #2B3484);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.content-section-divider[b-ytkzcuv314] {
    border: none;
    border-top: 1px solid #f3f4f6;
    margin: 0 1.25rem 0.75rem;
}

.card-surface[b-ytkzcuv314] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.home-col__header[b-ytkzcuv314] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem 0.2rem;
    gap: 0.5rem;
}

.home-col__header-left[b-ytkzcuv314] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.home-col__title[b-ytkzcuv314] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #111827;
}

/* ── Upload progress panel ── */
.mpi-upload-progress[b-ytkzcuv314] {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mpi-upload-progress__row[b-ytkzcuv314] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px 150px;
    align-items: center;
    gap: 0.75rem;
}

.mpi-upload-progress__name[b-ytkzcuv314] {
    font-size: 0.75rem;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mpi-upload-progress__bar-track[b-ytkzcuv314] {
    height: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.mpi-upload-progress__bar-fill[b-ytkzcuv314] {
    height: 100%;
    background: var(--BEC-colorBrandBackground, #2B3484);
    transition: width 0.2s ease;
}

.mpi-upload-progress__status[b-ytkzcuv314] {
    font-size: 0.7rem;
    color: #6b7280;
    text-align: right;
}

/* ── Gallery grid ── */
.mpi-gallery-card[b-ytkzcuv314] { padding-bottom: 1rem; }

.mpi-grid[b-ytkzcuv314] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.85rem;
    padding: 0 1.25rem;
}

.mpi-card[b-ytkzcuv314] {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f9fafb;
}

.mpi-card--skeleton[b-ytkzcuv314] {
    aspect-ratio: 4/3.6;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 37%, #f3f4f6 63%);
    background-size: 400% 100%;
    animation: mpi-skeleton-shimmer-b-ytkzcuv314 1.4s ease infinite;
}
@keyframes mpi-skeleton-shimmer-b-ytkzcuv314 {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.mpi-card__thumb[b-ytkzcuv314] {
    position: relative;
    aspect-ratio: 4/3;
    background: #eef2f7;
    cursor: pointer;
}

.mpi-card__thumb img[b-ytkzcuv314] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mpi-card__overlay[b-ytkzcuv314] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(17, 24, 39, 0);
    opacity: 0;
    transition: all 0.15s ease;
}

.mpi-card__thumb:hover .mpi-card__overlay[b-ytkzcuv314] {
    background: rgba(17, 24, 39, 0.45);
    opacity: 1;
}

.mpi-card__overlay-btn[b-ytkzcuv314] {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: transform 0.1s ease;
}
.mpi-card__overlay-btn:hover[b-ytkzcuv314] { transform: scale(1.08); background: #fff; }

.mpi-card__overlay-btn--danger:hover[b-ytkzcuv314] { background: #fee2e2; color: #dc2626; }

.mpi-card__meta[b-ytkzcuv314] {
    padding: 0.45rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.mpi-card__name[b-ytkzcuv314] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mpi-card__date[b-ytkzcuv314] {
    font-size: 0.65rem;
    color: #9ca3af;
}

/* ── Empty / forbidden states ── */
.mpi-empty-state[b-ytkzcuv314] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: #9ca3af;
    gap: 0.35rem;
    text-align: center;
}
.mpi-empty-state i[b-ytkzcuv314] { font-size: 1.75rem; opacity: 0.6; margin-bottom: 0.35rem; }
.mpi-empty-state p[b-ytkzcuv314] { font-size: 0.85rem; font-weight: 600; margin: 0; color: #6b7280; }
.mpi-empty-state span[b-ytkzcuv314] { font-size: 0.75rem; margin: 0; }

/* ── Fullscreen viewer ── */
.mpi-viewer-backdrop[b-ytkzcuv314] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 2rem;
}

.mpi-viewer-container[b-ytkzcuv314] {
    position: relative;
    max-width: min(90vw, 1100px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.mpi-viewer-image[b-ytkzcuv314] {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.mpi-viewer-close[b-ytkzcuv314] {
    position: absolute;
    top: -2.5rem;
    right: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mpi-viewer-close:hover[b-ytkzcuv314] { background: rgba(255,255,255,0.28); }

.mpi-viewer-info[b-ytkzcuv314] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    color: #e5e7eb;
    font-size: 0.8rem;
}

.mpi-viewer-info__name[b-ytkzcuv314] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mpi-viewer-copy-btn[b-ytkzcuv314] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}
.mpi-viewer-copy-btn:hover[b-ytkzcuv314] { background: rgba(255,255,255,0.22); }

/* ── Delete confirmation modal (the one sanctioned centered-modal case: destructive confirmation) ── */
.mpi-confirm-backdrop[b-ytkzcuv314] {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2300;
    padding: 1.5rem;
}

.mpi-confirm-modal[b-ytkzcuv314] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 380px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

.mpi-confirm-modal__icon[b-ytkzcuv314] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: #fee2e2;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.mpi-confirm-modal__title[b-ytkzcuv314] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.mpi-confirm-modal__body[b-ytkzcuv314] {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
}

.mpi-confirm-modal__actions[b-ytkzcuv314] {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.75rem;
    width: 100%;
}

.mpi-btn[b-ytkzcuv314] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 0.4rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.mpi-btn--secondary[b-ytkzcuv314] {
    background: #fff;
    border-color: #d1d5db;
    color: #374151;
}
.mpi-btn--secondary:hover:not(:disabled)[b-ytkzcuv314] { background: #f9fafb; }

.mpi-btn--danger[b-ytkzcuv314] {
    background: #dc2626;
    color: #fff;
}
.mpi-btn--danger:hover:not(:disabled)[b-ytkzcuv314] { background: #b91c1c; }

/* ── Toast (same shape as Intranet-MainPage's inline toast) ── */
.toast-container[b-ytkzcuv314] { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 2100; }
.toast[b-ytkzcuv314] { border: 1px solid; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); padding: 1rem; max-width: 28rem; }
.toast--success[b-ytkzcuv314] { background-color: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.toast--error[b-ytkzcuv314] { background-color: #fef2f2; border-color: #fecaca; color: #991b1b; }
.toast__body[b-ytkzcuv314] { display: flex; align-items: flex-start; gap: 0.75rem; }
.toast__icon--success[b-ytkzcuv314] { flex-shrink: 0; color: #16a34a; }
.toast__icon--error[b-ytkzcuv314] { flex-shrink: 0; color: #dc2626; }
.toast__content[b-ytkzcuv314] { flex: 1; }
.toast__title[b-ytkzcuv314] { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.toast__message[b-ytkzcuv314] { font-size: 0.75rem; line-height: 1rem; margin-top: 0.25rem; }
.toast__close[b-ytkzcuv314] { flex-shrink: 0; color: #9ca3af; background: none; border: none; }
.toast__close:hover[b-ytkzcuv314] { color: #4b5563; }

@media (max-width: 640px) {
    .mpi-header[b-ytkzcuv314] { flex-direction: column; align-items: flex-start; }
    .mpi-upload-progress__row[b-ytkzcuv314] { grid-template-columns: 1fr; row-gap: 0.25rem; }
    .mpi-upload-progress__status[b-ytkzcuv314] { text-align: left; }
}
/* /Components/Pages/MainLayout/AutomatedEmails/SendMarketingEmailModal.razor.rz.scp.css */
/* ========================================
   Send Marketing Email Modal — scoped styles
   Matches MarketingPortalImages' card-surface / brand-navy / Inter material.
   ======================================== */

.sme-backdrop[b-c1lhuxo9lw] {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2200;
    padding: 1.5rem;
}

.sme-modal[b-c1lhuxo9lw] {
    /* Explicitly opaque — do NOT rely on a shared ".card-surface" class here.
       Blazor CSS isolation scopes each .razor.css file separately, so a class
       defined only in MarketingPortalImages.razor.css has no effect on markup
       rendered by this component, even if this component's HTML also carries
       that class name. Without its own background this modal rendered fully
       transparent and the gallery page behind it showed straight through. */
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    width: 100%;
    max-width: 560px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
    --BEC-colorBrandBackground: #2B3484;
    --BEC-colorBrandBackgroundHover: #1e2460;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

[b-c1lhuxo9lw] button:not(:disabled) { cursor: pointer; }
[b-c1lhuxo9lw] button:disabled { cursor: not-allowed; opacity: 0.6; }

.sme-modal__header[b-c1lhuxo9lw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.5rem;
}

.sme-modal__header-left[b-c1lhuxo9lw] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.content-section-header__icon[b-c1lhuxo9lw] {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.5rem;
    background: var(--BEC-colorBrandBackground, #2B3484);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sme-modal__title[b-c1lhuxo9lw] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #111827;
}

.sme-modal__close[b-c1lhuxo9lw] {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.4rem;
    border: none;
    background: transparent;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sme-modal__close:hover:not(:disabled)[b-c1lhuxo9lw] { background: #f3f4f6; color: #111827; }

.content-section-divider[b-c1lhuxo9lw] {
    border: none;
    border-top: 1px solid #f3f4f6;
    margin: 0 1.25rem 0.5rem;
}

.sme-modal__body[b-c1lhuxo9lw] {
    padding: 0 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.sme-field[b-c1lhuxo9lw] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sme-field__label-row[b-c1lhuxo9lw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sme-field__label[b-c1lhuxo9lw] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.sme-field__optional[b-c1lhuxo9lw] {
    font-weight: 500;
    text-transform: none;
    color: #9ca3af;
    letter-spacing: normal;
}

.sme-field__loading[b-c1lhuxo9lw] {
    font-size: 0.8rem;
    color: #9ca3af;
    padding: 0.4rem 0;
}

.sme-field__error[b-c1lhuxo9lw] {
    font-size: 0.7rem;
    color: #dc2626;
}

.sme-input[b-c1lhuxo9lw],
.sme-select[b-c1lhuxo9lw],
.sme-textarea[b-c1lhuxo9lw] {
    border: 1px solid #d1d5db;
    border-radius: 0.4rem;
    padding: 0.5rem 0.65rem;
    font-size: 0.82rem;
    font-family: inherit;
    color: #111827;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}
.sme-input:focus[b-c1lhuxo9lw],
.sme-select:focus[b-c1lhuxo9lw],
.sme-textarea:focus[b-c1lhuxo9lw] {
    outline: none;
    border-color: var(--BEC-colorBrandBackground, #2B3484);
    box-shadow: 0 0 0 2px rgba(43, 52, 132, 0.12);
}

.sme-textarea[b-c1lhuxo9lw] {
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    resize: vertical;
    min-height: 160px;
}

.sme-input--error[b-c1lhuxo9lw] { border-color: #dc2626 !important; }

.sme-body-preview[b-c1lhuxo9lw] {
    width: 100%;
    min-height: 200px;
    border: 1px solid #d1d5db;
    border-radius: 0.4rem;
    background: #fff;
}

/* ── Recipient chip input ── */
.sme-chip-input[b-c1lhuxo9lw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #d1d5db;
    border-radius: 0.4rem;
    padding: 0.35rem 0.5rem;
    background: #fff;
}
.sme-chip-input:focus-within[b-c1lhuxo9lw] {
    border-color: var(--BEC-colorBrandBackground, #2B3484);
    box-shadow: 0 0 0 2px rgba(43, 52, 132, 0.12);
}

.sme-chip[b-c1lhuxo9lw] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(43, 52, 132, 0.08);
    color: #2B3484;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.sme-chip__remove[b-c1lhuxo9lw] {
    border: none;
    background: none;
    color: inherit;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0;
    opacity: 0.7;
}
.sme-chip__remove:hover[b-c1lhuxo9lw] { opacity: 1; }

.sme-chip-input__field[b-c1lhuxo9lw] {
    flex: 1;
    min-width: 140px;
    border: none;
    outline: none;
    font-size: 0.82rem;
    font-family: inherit;
    padding: 0.15rem 0.1rem;
}

.sme-cc-bcc-toggle[b-c1lhuxo9lw] {
    display: flex;
    gap: 1rem;
    margin-top: -0.4rem;
}

.sme-link-btn[b-c1lhuxo9lw] {
    border: none;
    background: none;
    color: var(--BEC-colorBrandBackground, #2B3484);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0;
}
.sme-link-btn:hover[b-c1lhuxo9lw] { text-decoration: underline; }

.sme-link-btn--muted[b-c1lhuxo9lw] {
    color: #9ca3af;
    text-transform: none;
    font-weight: 600;
}
.sme-link-btn--muted:hover[b-c1lhuxo9lw] { color: #dc2626; }

.sme-field__hint[b-c1lhuxo9lw] {
    font-size: 0.68rem;
    color: #9ca3af;
    line-height: 1.4;
}
.sme-field__hint code[b-c1lhuxo9lw] {
    background: #f3f4f6;
    padding: 0.05rem 0.3rem;
    border-radius: 0.2rem;
    font-size: 0.66rem;
}

.sme-modal__footer[b-c1lhuxo9lw] {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.9rem 1.25rem 1.1rem;
}

.sme-btn[b-c1lhuxo9lw] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 0.4rem;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.sme-btn--secondary[b-c1lhuxo9lw] {
    background: #fff;
    border-color: #d1d5db;
    color: #374151;
}
.sme-btn--secondary:hover:not(:disabled)[b-c1lhuxo9lw] { background: #f9fafb; }

.sme-btn--primary[b-c1lhuxo9lw] {
    background: var(--BEC-colorBrandBackground, #2B3484);
    color: #fff;
}
.sme-btn--primary:hover:not(:disabled)[b-c1lhuxo9lw] { background: var(--BEC-colorBrandBackgroundHover, #1e2460); }

@media (max-width: 640px) {
    .sme-modal[b-c1lhuxo9lw] { max-width: 100%; }
}
/* /Components/Pages/MainLayout/Estimation/EstimationDashboard.razor.rz.scp.css */
/* ========================================
   ESTIMATION DASHBOARD
   Microsoft-style compact design
   No header, no toolbar - data focused
   ======================================== */

.dashboard-container[b-4vneec451w] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 0;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    overflow: hidden;
}

/* ========================================
   PORTFOLIO SUMMARY BAR
   ======================================== */
.portfolio-bar[b-4vneec451w] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 10px 16px;
    background: var(--BEC-colorNeutralBackground1, #fff);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #e1e1e1);
    flex-shrink: 0;
}

.portfolio-metric[b-4vneec451w] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 20px;
}

.portfolio-metric:first-child[b-4vneec451w] {
    padding-left: 0;
}

.metric-value[b-4vneec451w] {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.metric-value.selling[b-4vneec451w] {
    color: var(--BEC-colorPaletteRedForeground1, #c50f1f);
    font-weight: 700;
}

.metric-value.direct[b-4vneec451w] {
    color: var(--BEC-colorPaletteGreenForeground1, #0e7a0d);
}

.metric-value.indirect[b-4vneec451w] {
    color: var(--BEC-colorPaletteBlueForeground1, #0078d4);
}

.metric-value.indirect small[b-4vneec451w] {
    font-size: 11px;
    font-weight: 400;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.metric-value.ps[b-4vneec451w] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6914);
}

.metric-value.count[b-4vneec451w] {
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.metric-label[b-4vneec451w] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #707070);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.metric-divider[b-4vneec451w] {
    width: 1px;
    height: 36px;
    background: var(--BEC-colorNeutralStroke2, #e1e1e1);
}

/* ========================================
   PROJECTS GRID
   ======================================== */
.projects-grid[b-4vneec451w] {
    flex: 1;
    padding: 12px;
    min-height: 0;
    overflow: hidden;
}

/* Syncfusion Grid Overrides - Compact Style */
[b-4vneec451w] .e-grid {
    border: 1px solid var(--BEC-colorNeutralStroke2, #e1e1e1) !important;
    border-radius: 4px !important;
    font-size: 13px !important;
}

[b-4vneec451w] .e-grid .e-headercell {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    color: var(--BEC-colorNeutralForeground2, #616161) !important;
    padding: 8px 12px !important;
}

[b-4vneec451w] .e-grid .e-rowcell {
    padding: 6px 12px !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #f0f0f0) !important;
}

[b-4vneec451w] .e-grid .e-row:hover .e-rowcell {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5) !important;
    cursor: pointer;
}

[b-4vneec451w] .e-grid .e-row.e-altrow .e-rowcell {
    background: var(--BEC-colorNeutralBackground2, #fafafa) !important;
}

/* Status Dot */
.status-dot[b-4vneec451w] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-dot.status-healthy[b-4vneec451w] {
    background: var(--BEC-colorPaletteGreenBackground3, #107c10);
}

.status-dot.status-warning[b-4vneec451w] {
    background: var(--BEC-colorPaletteYellowBackground3, #ffaa44);
}

.status-dot.status-critical[b-4vneec451w] {
    background: var(--BEC-colorPaletteRedBackground3, #d13438);
}

/* Margin Badge */
.margin-badge[b-4vneec451w] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.margin-badge.margin-healthy[b-4vneec451w] {
    background: var(--BEC-colorPaletteGreenBackground1, #dff6dd);
    color: var(--BEC-colorPaletteGreenForeground1, #0e7a0d);
}

.margin-badge.margin-warning[b-4vneec451w] {
    background: var(--BEC-colorPaletteYellowBackground1, #fff4ce);
    color: var(--BEC-colorPaletteYellowForeground1, #8a6914);
}

.margin-badge.margin-critical[b-4vneec451w] {
    background: var(--BEC-colorPaletteRedBackground1, #fde7e9);
    color: var(--BEC-colorPaletteRedForeground1, #c50f1f);
}

/* Percent Hint */
.percent-hint[b-4vneec451w] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

/* Action Button */
.action-btn[b-4vneec451w] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--BEC-colorNeutralForeground3, #707070);
    cursor: pointer;
    transition: all 0.15s ease;
}

.action-btn:hover[b-4vneec451w] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: white;
}

/* ========================================
   STATES
   ======================================== */
.loading-state[b-4vneec451w],
.error-state[b-4vneec451w],
.empty-state[b-4vneec451w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.spinner[b-4vneec451w] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--BEC-colorNeutralStroke2, #e1e1e1);
    border-top-color: var(--BEC-colorBrandBackground, #0078d4);
    border-radius: 50%;
    animation: spin-b-4vneec451w 0.8s linear infinite;
}

@keyframes spin-b-4vneec451w {
    to { transform: rotate(360deg); }
}

.error-state[b-4vneec451w] {
    color: var(--BEC-colorPaletteRedForeground1, #c50f1f);
}

.error-state i[b-4vneec451w] {
    font-size: 32px;
}

.retry-btn[b-4vneec451w] {
    padding: 6px 16px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 4px;
    background: var(--BEC-colorNeutralBackground1, #fff);
    color: var(--BEC-colorNeutralForeground1, #242424);
    font-size: 13px;
    cursor: pointer;
}

.retry-btn:hover[b-4vneec451w] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.empty-state i[b-4vneec451w] {
    font-size: 48px;
    opacity: 0.5;
}
/* /Components/Pages/MainLayout/Estimation/ItemCases.razor.rz.scp.css */
/* ========================================
   ITEM CASES ADMINISTRATION
   Following BranchAdministration CSS pattern 100%
   
   FEATURES:
   ✅ Sticky Page Header (stays at top)
   ✅ Sticky Action Toolbar (stays below header with 8px gap)
   ✅ Sticky Grid Headers (stays below toolbar)
   ✅ Minimal CSS - Structure Only
   ✅ Syncfusion handles component styling
   ✅ Smooth scroll behavior
   ✅ Professional shadows & elevation
   ✅ Compact 20% smaller design
   ✅ Clear visual distinction: Active buttons (bright) vs Disabled (dimmed gray)
   
   STICKY POSITIONING STRATEGY:
   📌 Page Header:    top: 0px,    z-index: 100
   📌 Action Toolbar: top: 58px,   z-index: 90  (with 8px margin-top for spacing)
   📌 Grid Headers:   top: 110px,  z-index: 80  (adjusted for compact toolbar)
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-sdzk5y2wc0] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-sdzk5y2wc0] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-sdzk5y2wc0] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-sdzk5y2wc0] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-sdzk5y2wc0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-sdzk5y2wc0] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-sdzk5y2wc0] {
    display: none;
}

/* Help Icon Button */
.help-icon-btn[b-sdzk5y2wc0] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-sdzk5y2wc0] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-sdzk5y2wc0] {
    transform: scale(0.98);
}

.header-right[b-sdzk5y2wc0] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-sdzk5y2wc0] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-sdzk5y2wc0] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-sdzk5y2wc0] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-sdzk5y2wc0] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-sdzk5y2wc0] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR - CLEAN UNDERLINE DESIGN
   ======================================== */

/* Toolbar Container */
[b-sdzk5y2wc0] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalXL) !important;
    min-height: 36px !important;
    margin: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalL) !important;
}

/* Toolbar Items */
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: var(--BEC-spacingHorizontalS) !important;
}

/* Toolbar button base styling */
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: var(--BEC-fontSizeBase200) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: var(--BEC-spacingHorizontalXS) !important;
    min-height: 26px !important;
    box-shadow: none !important;
}

/* Button Icons */
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 13px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
}

/* Button Text */
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
}

/* Hover Effect */
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Active/Pressed State */
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) {
    opacity: 0.7 !important;
    transition: opacity 0.1s ease !important;
}

[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-icons,
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackgroundPressed) !important;
}

/* Danger Button (Delete) */
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-icons,
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-tbar-btn-text {
    color: #dc2626 !important;
}

[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-icons,
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-tbar-btn-text {
    color: #b91c1c !important;
}

/* Disabled Button State */
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
}

[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
    cursor: not-allowed;
    background: var(--BEC-colorNeutralBackground3);
}

[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn * {
    color: #aaaaaa;
}

/* Toolbar Separator */
[b-sdzk5y2wc0] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: var(--BEC-spacingHorizontalL) !important;
    margin: 0 var(--BEC-spacingHorizontalXS) !important;
    border-radius: 0.5px !important;
    opacity: 0.6 !important;
}

/* Button Focus State */
[b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-sdzk5y2wc0] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Loading Overlay */
.loading-overlay[b-sdzk5y2wc0] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* Placeholder Content */
.placeholder-content[b-sdzk5y2wc0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
}

/* ========================================
   GRID STYLING (for future implementation)
   ======================================== */

[b-sdzk5y2wc0] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

[b-sdzk5y2wc0] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-sdzk5y2wc0] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* ========================================
   RESPONSIVE LAYOUT
   ======================================== */

@media (max-width: 1024px) {
    [b-sdzk5y2wc0] .e-toolbar.e-control {
        top: 50px !important;
    }
}

@media (max-width: 768px) {
    .erp-page-header[b-sdzk5y2wc0] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }
    
    .stats-container[b-sdzk5y2wc0] {
        width: 100%;
        justify-content: space-around;
    }

    [b-sdzk5y2wc0] .e-toolbar.e-control {
        top: 90px !important;
    }
}

@media (max-width: 480px) {
    [b-sdzk5y2wc0] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }
}

/* ========================================
   SIDEBAR WIZARD STYLES (Microsoft Pattern)
   ======================================== */

/* Wizard Sidebar Styling */
.sidebar-header[b-sdzk5y2wc0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-sdzk5y2wc0] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-sdzk5y2wc0] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-sdzk5y2wc0] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-sdzk5y2wc0] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-sdzk5y2wc0] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-sdzk5y2wc0] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-sdzk5y2wc0] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
    text-align: left;
}

.wizard-step[b-sdzk5y2wc0] {
    max-width: 100%;
    text-align: left;
    padding: 20px;
}

.step-title[b-sdzk5y2wc0] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
    text-align: left;
}

.step-title i[b-sdzk5y2wc0] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-sdzk5y2wc0] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
    text-align: left;
    line-height: 1.6;
}

/* Sidebar Footer */
.sidebar-footer[b-sdzk5y2wc0] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Form Group */
.form-group[b-sdzk5y2wc0] {
    margin-bottom: 20px;
}

.form-label[b-sdzk5y2wc0] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-sdzk5y2wc0]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

.form-value[b-sdzk5y2wc0] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    color: #323130;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-sdzk5y2wc0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* Checkbox Wrapper - consistent spacing for checkbox fields */
.checkbox-wrapper[b-sdzk5y2wc0] {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 4px;
}

/* ========================================
   MODAL DIALOGS (for confirmations)
   ======================================== */

/* Modal Overlay */
.modal-overlay[b-sdzk5y2wc0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-sdzk5y2wc0 0.2s ease-out;
}

@keyframes fadeIn-b-sdzk5y2wc0 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Container */
.modal-content[b-sdzk5y2wc0] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-sdzk5y2wc0 0.3s ease-out;
}

.modal-content.modal-sm[b-sdzk5y2wc0] {
    max-width: 400px;
}

@keyframes slideUp-b-sdzk5y2wc0 {
    from {
        opacity: 0;
        transform: translateY(var(--BEC-spacingHorizontalXL));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal Header */
.modal-header[b-sdzk5y2wc0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXL) 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: linear-gradient(to bottom, var(--BEC-colorNeutralBackground1) 0%, #f9fafb 100%);
    border-radius: var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge) 0 0;
}

.modal-header h3[b-sdzk5y2wc0] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
}

.modal-header h3 i[b-sdzk5y2wc0] {
    color: var(--BEC-colorBrandBackground);
    font-size: var(--BEC-fontSizeBase500);
}

.modal-header.modal-header-danger[b-sdzk5y2wc0] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
}

.modal-header.modal-header-danger h3[b-sdzk5y2wc0],
.modal-header.modal-header-danger h3 i[b-sdzk5y2wc0] {
    color: #dc2626;
}

.modal-header.modal-header-warning[b-sdzk5y2wc0] {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
}

.modal-header.modal-header-warning h3[b-sdzk5y2wc0],
.modal-header.modal-header-warning h3 i[b-sdzk5y2wc0] {
    color: #d97706;
}

.modal-header.modal-header-success[b-sdzk5y2wc0] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}

.modal-header.modal-header-success h3[b-sdzk5y2wc0],
.modal-header.modal-header-success h3 i[b-sdzk5y2wc0] {
    color: #16a34a;
}

.close-btn[b-sdzk5y2wc0] {
    background: transparent;
    border: none;
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.close-btn:hover[b-sdzk5y2wc0] {
    background: #f0f0f0;
    color: var(--BEC-colorNeutralForeground1);
}

/* Modal Body */
.modal-body[b-sdzk5y2wc0] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.modal-body p[b-sdzk5y2wc0] {
    margin: 0 0 12px 0;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.5;
}

.modal-body .text-danger[b-sdzk5y2wc0] {
    color: #dc2626;
    font-size: 13px;
}

/* Modal Footer */
.modal-footer[b-sdzk5y2wc0] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL) 24px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: #f9fafb;
    border-radius: 0 0 var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge);
}

/* Modal Container (alternative to modal-content) */
.modal-container[b-sdzk5y2wc0] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-sdzk5y2wc0 0.3s ease-out;
}

.modal-container.modal-sm[b-sdzk5y2wc0] {
    max-width: 500px;
}

.modal-title[b-sdzk5y2wc0] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
}

.modal-title i[b-sdzk5y2wc0] {
    color: var(--BEC-colorBrandBackground);
    font-size: var(--BEC-fontSizeBase500);
}

.modal-close[b-sdzk5y2wc0] {
    background: transparent;
    border: none;
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.modal-close:hover[b-sdzk5y2wc0] {
    background: #f0f0f0;
    color: var(--BEC-colorNeutralForeground1);
}

.modal-content-body[b-sdzk5y2wc0] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Warning Messages in Confirmation Dialogs */
.warning-message[b-sdzk5y2wc0] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
}

.warning-message strong[b-sdzk5y2wc0] {
    color: #d83b01;
}

.warning-note[b-sdzk5y2wc0] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, #fff4e6 0%, #ffe4cc 100%);
    border-left: 3px solid #d83b01;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.warning-note i[b-sdzk5y2wc0] {
    color: #d83b01;
    margin-top: var(--BEC-spacingHorizontalXXS);
    font-size: var(--BEC-fontSizeBase300);
    flex-shrink: 0;
}

.warning-note-info[b-sdzk5y2wc0] {
    background: linear-gradient(135deg, #e8f4fd 0%, #c7e0f4 100%);
    border-left-color: var(--BEC-colorBrandBackground);
}

.warning-note-info i[b-sdzk5y2wc0] {
    color: var(--BEC-colorBrandBackground);
}

.warning-note-success[b-sdzk5y2wc0] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left-color: #10b981;
}

.warning-note-success i[b-sdzk5y2wc0] {
    color: #10b981;
}

/* Buttons */
.btn[b-sdzk5y2wc0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn:disabled[b-sdzk5y2wc0] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary[b-sdzk5y2wc0] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-sdzk5y2wc0] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-secondary[b-sdzk5y2wc0] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-sdzk5y2wc0] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-danger[b-sdzk5y2wc0] {
    background: #dc2626;
    color: white;
}

.btn-danger:hover:not(:disabled)[b-sdzk5y2wc0] {
    background: #b91c1c;
}

.btn-warning[b-sdzk5y2wc0] {
    background: #d97706;
    color: white;
}

.btn-warning:hover:not(:disabled)[b-sdzk5y2wc0] {
    background: #b45309;
}

.btn-success[b-sdzk5y2wc0] {
    background: #16a34a;
    color: white;
}

.btn-success:hover:not(:disabled)[b-sdzk5y2wc0] {
    background: #15803d;
}

.btn-link[b-sdzk5y2wc0] {
    background: transparent;
    color: var(--BEC-colorBrandForeground1);
    padding: 4px 8px;
}

.btn-link:hover:not(:disabled)[b-sdzk5y2wc0] {
    text-decoration: underline;
}

.btn-sm[b-sdzk5y2wc0] {
    padding: 4px 10px;
    font-size: 12px;
}

/* Spinner */
.spinner-small[b-sdzk5y2wc0] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-sdzk5y2wc0 0.8s linear infinite;
}

@keyframes spin-b-sdzk5y2wc0 {
    to { transform: rotate(360deg); }
}

/* Loading spinner for page */
.loading-spinner[b-sdzk5y2wc0] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-sdzk5y2wc0 0.8s linear infinite;
    margin-bottom: 16px;
}

/* Error Message */
.error-message[b-sdzk5y2wc0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #dc2626;
    text-align: center;
}

.error-message i[b-sdzk5y2wc0] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.7;
}

.error-message p[b-sdzk5y2wc0] {
    margin: 0 0 16px 0;
    font-size: 14px;
}

.retry-btn[b-sdzk5y2wc0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    cursor: pointer;
    font-size: 13px;
}

.retry-btn:hover[b-sdzk5y2wc0] {
    background: #b91c1c;
}

/* Badges - Text Only (for Yes/No columns) */
.badge-yes[b-sdzk5y2wc0] {
    color: #16a34a;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
}

.badge-no[b-sdzk5y2wc0] {
    color: #6b7280;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
}

.badge-warning[b-sdzk5y2wc0] {
    color: #d97706;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
}

.badge-neutral[b-sdzk5y2wc0] {
    color: #6b7280;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
}

/* Status Column Badges (with background) */
.badge-active[b-sdzk5y2wc0] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    background: #dcfce7;
    color: #16a34a;
}

.badge-inactive[b-sdzk5y2wc0] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    background: #fee2e2;
    color: #dc2626;
}

/* Column Chooser */
.column-chooser-actions[b-sdzk5y2wc0] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.column-list[b-sdzk5y2wc0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.column-item[b-sdzk5y2wc0] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
}

/* ========================================
   BADGE STYLES
   ======================================== */
.badge[b-sdzk5y2wc0] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-sdzk5y2wc0] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-sdzk5y2wc0] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-sdzk5y2wc0] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-sdzk5y2wc0] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   COLUMN CHOOSER WIZARD STYLES
   ======================================== */
.column-chooser-actions[b-sdzk5y2wc0] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    text-align: left;
}

.column-chooser-actions .btn-link[b-sdzk5y2wc0] {
    background: transparent;
    border: none;
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.column-chooser-actions .btn-link:hover[b-sdzk5y2wc0] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.column-chooser-list[b-sdzk5y2wc0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
    text-align: left;
}

.column-chooser-item[b-sdzk5y2wc0] {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    text-align: left;
}

.column-chooser-item:hover[b-sdzk5y2wc0] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    transform: translateX(2px);
}
/* /Components/Pages/MainLayout/Estimation/LineItems.razor.rz.scp.css */
/* ========================================
   LINE ITEMS (BOQ) ADMINISTRATION
   High-Performance Grid Styling
   
   FEATURES:
   ✅ Sticky Page Header
   ✅ Sticky Action Toolbar
   ✅ Frozen Columns Support
   ✅ Batch Editing Visual Feedback
   ✅ Computed Value Highlighting
   ✅ Item Case Badge Colors
   ✅ Aggregate Footer Styling
   ✅ Pending Changes Banner
   ======================================== */

/* ========================================
   OVERRIDE PARENT SCROLL BEHAVIOR
   This ensures ONLY the grid content scrolls
   ======================================== */
[b-sjc20pm4va] .page-content {
    overflow: hidden !important;
    overflow-y: hidden !important;
}

[b-sjc20pm4va] .page-content-inner {
    overflow: hidden !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ========================================
   PAGE CONTAINER - Full Width Layout
   Uses relative positioning for proper layout flow
   ======================================== */
.erp-page-container[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100%;
    position: relative;
    background: var(--BEC-colorNeutralBackground2);
    width: 100%;
    box-sizing: border-box;
}

/* ========================================
   PAGE HEADER - Sticky at top
   ======================================== */
.erp-page-header[b-sjc20pm4va] {
    position: sticky;
    top: 0;
    flex-shrink: 0;
    z-index: 100;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 40px;
    min-height: 40px;
}

.header-left[b-sjc20pm4va] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-sjc20pm4va] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 13px;
}

.help-icon-btn[b-sjc20pm4va] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-sjc20pm4va] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.header-right[b-sjc20pm4va] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* ========================================
   HEADER FINANCIAL SUMMARY - Ultra Compact
   Single line display matching header height
   ======================================== */
.header-financial-summary[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 6px;
    padding: 2px 8px;
    height: 32px;
}

.header-financial-summary .fin-item[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    min-width: 70px;
    height: 100%;
}

.header-financial-summary .fin-item.project-info[b-sjc20pm4va] {
    flex-direction: row;
    gap: 6px;
    min-width: auto;
    padding-right: 10px;
}

.header-financial-summary .fin-divider[b-sjc20pm4va] {
    width: 1px;
    height: 20px;
    background: var(--BEC-colorNeutralStroke2);
    margin: 0 2px;
}

.header-financial-summary .fin-code[b-sjc20pm4va] {
    font-size: 10px;
    font-weight: 700;
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground2);
    padding: 1px 6px;
    border-radius: 3px;
}

.header-financial-summary .fin-name[b-sjc20pm4va] {
    font-size: 10px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-financial-summary .fin-label[b-sjc20pm4va] {
    font-size: 8px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.2px;
    line-height: 1;
}

.header-financial-summary .fin-value[b-sjc20pm4va] {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.header-financial-summary .fin-value.direct[b-sjc20pm4va] {
    color: #2563eb;
}

.header-financial-summary .fin-value.indirect[b-sjc20pm4va] {
    color: #059669;
}

.header-financial-summary .fin-value.indirect small[b-sjc20pm4va] {
    font-size: 8px;
    font-weight: 500;
    opacity: 0.8;
}

.header-financial-summary .fin-value.ps[b-sjc20pm4va] {
    color: #7c3aed;
}

.header-financial-summary .fin-value.selling[b-sjc20pm4va] {
    color: #dc2626;
}

/* Legacy - kept for compatibility */
.btn-select-project[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--BEC-colorBrandBackground);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-select-project:hover[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-select-project i[b-sjc20pm4va] {
    font-size: 12px;
}

/* ========================================
   NO PROJECT SELECTED STATE
   Full-page prompt to select a project
   ======================================== */
.no-project-selected-container[b-sjc20pm4va] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: var(--BEC-colorNeutralBackground2);
    position: relative;
    z-index: 1;
    /* Low z-index so sidebar appears above */
}

.no-project-card[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 64px;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXLarge);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    box-shadow: var(--BEC-shadow8);
    max-width: 480px;
}

.no-project-icon[b-sjc20pm4va] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--BEC-colorBrandBackground2), var(--BEC-colorNeutralBackground3));
    border-radius: 50%;
    margin-bottom: 24px;
}

.no-project-icon i[b-sjc20pm4va] {
    font-size: 36px;
    color: var(--BEC-colorBrandForeground1);
}

.no-project-card h2[b-sjc20pm4va] {
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 12px 0;
}

.no-project-card p[b-sjc20pm4va] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 28px 0;
    line-height: 1.5;
}

.btn-select-project-large[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--BEC-colorBrandBackground);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-select-project-large:hover[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackgroundHover);
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow8);
}

.btn-select-project-large i[b-sjc20pm4va] {
    font-size: 16px;
}

/* ========================================
   PROJECT SELECTOR SIDEBAR
   Sidebar UI for selecting projects
   ======================================== */
.project-search-box[b-sjc20pm4va] {
    margin-bottom: 16px;
    pointer-events: auto !important;
}

.form-section[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    pointer-events: auto !important;
}

.projects-list[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    padding-right: 4px;
    pointer-events: auto !important;
}

.loading-projects[b-sjc20pm4va],
.no-projects[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: var(--BEC-colorNeutralForeground3);
    gap: 12px;
}

.loading-projects i[b-sjc20pm4va],
.no-projects i[b-sjc20pm4va] {
    font-size: 32px;
    opacity: 0.6;
}

.project-card[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    cursor: pointer;
    transition: all 0.15s ease;
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
}

.project-card:hover[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandStroke1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.project-card.selected[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackground2);
    border-color: var(--BEC-colorBrandStroke1);
    box-shadow: 0 0 0 2px var(--BEC-colorBrandStroke1);
}

.project-card-header[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.project-card-code[b-sjc20pm4va] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
}

.project-card .selected-icon[b-sjc20pm4va] {
    color: var(--BEC-colorSuccessForeground1);
    font-size: 14px;
}

.project-card-name[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 6px;
}

.project-card-stats[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

.project-card-stats i[b-sjc20pm4va] {
    font-size: 10px;
}

.project-card-stats.empty[b-sjc20pm4va] {
    color: var(--BEC-colorNeutralForeground4);
    font-style: italic;
}

/* ========================================
   PROJECT PERCENTAGE CONTROLS BAR
   ADJ% and MARKUP% with proper sizing
   ======================================== */
.project-percentage-bar[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--BEC-colorNeutralBackground1);
    padding: 6px 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    height: 38px;
}

.pct-label[b-sjc20pm4va] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
}

.pct-divider[b-sjc20pm4va] {
    width: 1px;
    height: 22px;
    background: var(--BEC-colorNeutralStroke2);
    margin: 0 6px;
}

/* Percentage Input Styling - Proper Size */
[b-sjc20pm4va] .pct-input {
    height: 28px !important;
}

[b-sjc20pm4va] .pct-input .e-input-group {
    border: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 28px !important;
    min-height: 28px !important;
}

[b-sjc20pm4va] .pct-input .e-input-group input {
    height: 26px !important;
    font-size: 13px !important;
    padding: 0 8px !important;
    text-align: right !important;
}

[b-sjc20pm4va] .pct-input .e-input-group:hover {
    border-color: var(--BEC-colorBrandStroke1) !important;
}

[b-sjc20pm4va] .pct-input .e-input-group:focus-within {
    border-color: var(--BEC-colorBrandStroke1) !important;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandStroke1) !important;
}

[b-sjc20pm4va] .pct-input .e-input-group-icon {
    display: none !important;
}

/* Apply Button - Matching Height */
.btn-apply[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: none;
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-colorBrandBackground);
    color: white;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s ease;
}

.btn-apply:hover:not(:disabled)[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-apply:disabled[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackgroundDisabled);
    color: var(--BEC-colorNeutralForegroundDisabled);
    cursor: not-allowed;
}

.btn-apply i[b-sjc20pm4va] {
    font-size: 12px;
}

/* Legacy - keep for backwards compatibility */
[b-sjc20pm4va] .pct-input-compact {
    height: 22px !important;
}

[b-sjc20pm4va] .pct-input-compact .e-input-group {
    border: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 3px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 22px !important;
    min-height: 22px !important;
}

[b-sjc20pm4va] .pct-input-compact .e-input-group:hover {
    border-color: var(--BEC-colorBrandBackground) !important;
}

[b-sjc20pm4va] .pct-input-compact .e-input-group input {
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    text-align: center !important;
    padding: 2px 4px !important;
    height: 20px !important;
    line-height: 20px !important;
}

[b-sjc20pm4va] .pct-input-compact .e-input-group-icon {
    display: none !important;
}

/* Compact Apply Button - Icon only */
.btn-apply-compact[b-sjc20pm4va] {
    background: #059669;
    color: white;
    border: none;
    width: 20px;
    height: 20px;
    font-size: 9px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.btn-apply-compact:hover:not(:disabled)[b-sjc20pm4va] {
    background: #047857;
}

.btn-apply-compact:disabled[b-sjc20pm4va] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-apply-compact i[b-sjc20pm4va] {
    font-size: 9px;
}

.btn-apply-compact .fa-spinner[b-sjc20pm4va] {
    animation: spin-b-sjc20pm4va 0.8s linear infinite;
}

/* ========================================
   STATS CONTAINER
   ======================================== */
.stats-container[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
}

.stat-card[b-sjc20pm4va] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-sjc20pm4va] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-card.total-direct .stat-value[b-sjc20pm4va] {
    color: #059669;
}

.stat-card.total-selling .stat-value[b-sjc20pm4va] {
    color: #0891b2;
}

.stat-label[b-sjc20pm4va] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-sjc20pm4va] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR - Fixed at top of grid, doesn't scroll
   ======================================== */
[b-sjc20pm4va] .e-toolbar.e-control {
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalXL) !important;
    min-height: 44px !important;
    margin: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
}

[b-sjc20pm4va] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

/* Compact Toolbar - Matches header height */
[b-sjc20pm4va] .compact-toolbar.e-toolbar {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 var(--BEC-spacingHorizontalXXL) !important;
}

[b-sjc20pm4va] .compact-toolbar .e-toolbar-items {
    height: 44px !important;
}


[b-sjc20pm4va] .compact-toolbar .e-toolbar-item {
    margin: 0 1px !important;
    height: 44px !important;
    /* Removed display: flex to fix layout issues */
}

[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    min-height: 28px !important;
    height: 28px !important;
    line-height: 1 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove focus outline/border on toolbar buttons */
[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn:focus,
[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn:focus-visible,
[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn:active,
[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn.e-focused {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 12px !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.15s ease !important;
}

[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    transition: color 0.15s ease !important;
}

[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Highlighted Save Button (when pending changes) */
[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .toolbar-btn-highlight .e-icons,
[b-sjc20pm4va] .compact-toolbar .e-toolbar-item .toolbar-btn-highlight .e-tbar-btn-text {
    color: #059669 !important;
    font-weight: 600 !important;
}

/* Disabled State */
[b-sjc20pm4va] .compact-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
}

[b-sjc20pm4va] .compact-toolbar .e-separator {
    background: var(--BEC-colorNeutralStroke2) !important;
    width: 1px !important;
    height: 18px !important;
    margin: 0 4px !important;
}



/* ========================================
   VIEW TOGGLE BUTTONS - Grid/Pivot Switch
   ======================================== */
[b-sjc20pm4va] .compact-toolbar .view-toggle-active .e-tbar-btn {
    background: var(--BEC-colorBrandBackground2) !important;
    border-radius: 4px !important;
}

[b-sjc20pm4va] .compact-toolbar .view-toggle-active .e-tbar-btn .e-icons,
[b-sjc20pm4va] .compact-toolbar .view-toggle-active .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorBrandForeground1) !important;
    font-weight: 600 !important;
}

/* ========================================
   PIVOT TABLE VIEW - Simple wrapper
   ======================================== */
.pivot-wrapper[b-sjc20pm4va] {
    width: 100%;
    padding: 0;
    background: var(--BEC-colorNeutralBackground1);
}

/* Pivot View - Simple styling without height overrides */
[b-sjc20pm4va] .pivot-wrapper .e-pivotview {
    border: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 4px;
}

/* Pivot Toolbar */
[b-sjc20pm4va] .pivot-wrapper .e-pivot-toolbar {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
    padding: 4px 8px !important;
}

/* Pivot Grouping Bar */
[b-sjc20pm4va] .pivot-wrapper .e-grouping-bar {
    background: var(--BEC-colorNeutralBackground3) !important;
}

/* Pivot Header Cells */
[b-sjc20pm4va] .pivot-wrapper .e-pivotview .e-headercell {
    background: var(--BEC-colorNeutralBackground3) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

/* Pivot Row Cells */
[b-sjc20pm4va] .pivot-wrapper .e-pivotview .e-rowcell {
    font-size: 12px !important;
}

/* Pivot Grand Total */
[b-sjc20pm4va] .pivot-wrapper .e-pivotview .e-gtot {
    background: #e8f4fd !important;
    font-weight: 700 !important;
}

/* Pivot Values - Right align numbers */
[b-sjc20pm4va] .pivot-wrapper .e-pivotview .e-valuescontent {
    text-align: right !important;
}

/* Field List Panel */
[b-sjc20pm4va] .e-pivotfieldlist-container {
    font-size: 12px !important;
}

[b-sjc20pm4va] .e-pivotfieldlist-container .e-list-item {
    font-size: 12px !important;
    padding: 4px 8px !important;
}

/* Drill Through Dialog */
[b-sjc20pm4va] .e-drillthrough-dialog {
    max-width: 90vw !important;
}

[b-sjc20pm4va] .e-drillthrough-dialog .e-grid .e-headercell {
    font-size: 11px !important;
}

[b-sjc20pm4va] .e-drillthrough-dialog .e-grid .e-rowcell {
    font-size: 11px !important;
}

/* ========================================
   PENDING CHANGES BANNER - Fixed, doesn't scroll
   ======================================== */
.pending-changes-banner[b-sjc20pm4va] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-bottom: 2px solid #f59e0b;
    font-size: 13px;
    color: #92400e;
    animation: slideDown-b-sjc20pm4va 0.3s ease-out;
}

.pending-changes-banner i[b-sjc20pm4va] {
    color: #d97706;
    font-size: 16px;
}

.pending-changes-banner strong[b-sjc20pm4va] {
    color: #92400e;
}

.pending-changes-banner .btn[b-sjc20pm4va] {
    padding: 4px 12px;
    font-size: 12px;
}

@keyframes slideDown-b-sjc20pm4va {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   PAGE CONTENT - Full Width
   Fills remaining viewport space
   ======================================== */
.erp-page-content[b-sjc20pm4va] {
    flex: 1 1 0;
    padding: 10px 20px 10px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Loading Overlay */
.loading-overlay[b-sjc20pm4va] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
}

.loading-spinner[b-sjc20pm4va] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-sjc20pm4va 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-sjc20pm4va {
    to {
        transform: rotate(360deg);
    }
}

/* Error Container */
.error-container[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: #dc2626;
    text-align: center;
}

.error-container i[b-sjc20pm4va] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.7;
}

/* ========================================
   HIGH-PERFORMANCE GRID STYLING
   Full Width & Auto-fit Headers
   Grid fills available space with pager at bottom
   ======================================== */
[b-sjc20pm4va] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Fill available height - keeps pager at bottom */
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Grid header (column headers) - FIXED at top */
[b-sjc20pm4va] .e-grid .e-gridheader {
    flex: 0 0 auto !important;
    z-index: 10 !important;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid content (data rows) - THIS IS THE ONLY THING THAT SCROLLS */
[b-sjc20pm4va] .e-grid .e-gridcontent {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
}

/* Inner content container */
[b-sjc20pm4va] .e-grid .e-gridcontent .e-content {
    overflow: auto !important;
    height: 100% !important;
}

/* Movable content for frozen columns */
[b-sjc20pm4va] .e-grid .e-movablecontent {
    overflow: auto !important;
}

/* Footer (aggregates) - FIXED at bottom */
[b-sjc20pm4va] .e-grid .e-gridfooter {
    flex: 0 0 auto !important;
    z-index: 5 !important;
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    border-top: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Pager - FIXED at very bottom */
[b-sjc20pm4va] .e-grid .e-gridpager {
    flex: 0 0 auto !important;
    z-index: 5 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
}

[b-sjc20pm4va] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    font-size: 12px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* Column header text - no truncation */
[b-sjc20pm4va] .e-grid .e-headercell .e-headercelldiv {
    white-space: nowrap !important;
    overflow: visible !important;
}

[b-sjc20pm4va] .e-grid .e-rowcell {
    font-size: 13px !important;
    padding: 6px 12px !important;
    vertical-align: middle !important;
}

/* Frozen Columns Visual Separator */
[b-sjc20pm4va] .e-grid .e-frozencontent,
[b-sjc20pm4va] .e-grid .e-frozenheader {
    border-right: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Frozen header stays sticky with main header */
[b-sjc20pm4va] .e-grid .e-frozenheader {
    position: sticky !important;
    top: 0 !important;
    z-index: 11 !important;
}

/* Frozen content scrolls with main content but stays left */
[b-sjc20pm4va] .e-grid .e-frozencontent {
    z-index: 2 !important;
}

/* Row Hover */
[b-sjc20pm4va] .e-grid .e-row:hover:not(.e-editedrow) {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row */
[b-sjc20pm4va] .e-grid .e-row.e-selectionbackground {
    background: #dbeafe !important;
}

/* Batch Editing - Dirty Cell */
[b-sjc20pm4va] .e-grid .e-updatedtd {
    background: #fef9c3 !important;
    position: relative;
}

[b-sjc20pm4va] .e-grid .e-updatedtd::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-width: 6px;
    border-style: solid;
    border-color: #f59e0b transparent transparent #f59e0b;
}

/* Batch Editing - New Row */
[b-sjc20pm4va] .e-grid .e-insertedrow {
    background: #dcfce7 !important;
}

/* ========================================
   COMPUTED VALUES STYLING
   ======================================== */
.computed-value[b-sjc20pm4va] {
    color: var(--BEC-colorNeutralForeground2);
    font-style: italic;
}

.computed-value.total-value[b-sjc20pm4va] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.computed-value.highlight[b-sjc20pm4va] {
    color: #0891b2;
    font-weight: var(--BEC-fontWeightBold);
}

/* ========================================
   ITEM CASE BADGES
   ======================================== */
.item-case-badge[b-sjc20pm4va] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
}

.item-case-normal[b-sjc20pm4va] {
    background: #e0f2fe;
    color: #0369a1;
}

.item-case-ps[b-sjc20pm4va] {
    background: #fef3c7;
    color: #92400e;
}

.item-case-pc[b-sjc20pm4va] {
    background: #f3e8ff;
    color: #7c3aed;
}

.item-case-dw[b-sjc20pm4va] {
    background: #fee2e2;
    color: #dc2626;
}

.item-case-default[b-sjc20pm4va] {
    background: #f1f5f9;
    color: #475569;
}

/* ========================================
   PACKAGE LEVEL CELLS & CASCADING DROPDOWNS
   ======================================== */
.package-display[b-sjc20pm4va] {
    cursor: help;
    border-bottom: 1px dashed var(--BEC-colorNeutralStroke2);
}

.pk-level-cell[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

/* Color-code different levels for visual hierarchy */
[b-sjc20pm4va] .e-grid td:has(.pk-level-cell:not(:empty)) {
    background: linear-gradient(90deg, rgba(0, 120, 212, 0.03) 0%, transparent 100%);
}

/* Full path display in edit wizard */
.full-path-display[b-sjc20pm4va] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground3);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    min-height: 38px;
    display: flex;
    align-items: center;
    word-break: break-word;
}

/* Cascading dropdown styling - disabled state */
[b-sjc20pm4va] .e-dropdownlist.e-disabled {
    opacity: 0.5;
    background: var(--BEC-colorNeutralBackground3) !important;
}

/* Clear button visible for cascading dropdowns */
[b-sjc20pm4va] .e-dropdownlist .e-clear-icon {
    color: var(--BEC-colorNeutralForeground3);
}

[b-sjc20pm4va] .e-dropdownlist .e-clear-icon:hover {
    color: var(--BEC-colorStatusDangerForeground1);
}

/* ========================================
   STATUS BADGES
   ======================================== */
.badge-active[b-sjc20pm4va] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    background: #dcfce7;
    color: #16a34a;
}

.badge-inactive[b-sjc20pm4va] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    background: #fee2e2;
    color: #dc2626;
}

/* ========================================
   AGGREGATE FOOTER
   ======================================== */
[b-sjc20pm4va] .e-grid .e-gridfooter {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    border-top: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-sjc20pm4va] .e-grid .e-summaryrow .e-summarycell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
}

.aggregate-label[b-sjc20pm4va] {
    color: var(--BEC-colorNeutralForeground2);
}

.aggregate-label strong[b-sjc20pm4va] {
    color: var(--BEC-colorNeutralForeground1);
}

.aggregate-total[b-sjc20pm4va] {
    font-weight: var(--BEC-fontWeightBold);
    color: #059669;
}

.aggregate-total.highlight[b-sjc20pm4va] {
    color: #0891b2;
    font-size: 14px;
}

/* ========================================
   SIDEBAR WIZARD STYLES
   Note: Z-index handled globally in layout-global.css
   ======================================== */

/* Sidebar appearance styling */
[b-sjc20pm4va] .assignment-wizard-sidebar {
    background: var(--BEC-colorNeutralBackground1, #ffffff) !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid var(--BEC-colorNeutralStroke1, #e0e0e0) !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

[b-sjc20pm4va] .assignment-wizard-sidebar .e-content-animation {
    height: 100%;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Wrapper for all sidebar content */
[b-sjc20pm4va] .assignment-wizard-sidebar>.e-sidebar-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sidebar-header[b-sjc20pm4va] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    flex-shrink: 0;
    top: 0;
    z-index: 100;
    pointer-events: auto !important;
    flex-shrink: 0;
}

.sidebar-header h2[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 0;
}

.sidebar-header h2 i[b-sjc20pm4va] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 20px;
}

.sidebar-title[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-sjc20pm4va] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-sjc20pm4va] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-sjc20pm4va] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-sjc20pm4va] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 24px;
    position: relative;
    pointer-events: auto !important;
}

.sidebar-step-content[b-sjc20pm4va] {
    flex: 1;
    padding: 0;
}

/* ========== WIZARD-SPECIFIC SCROLLING ========== */
/* Import wizard - no vertical scrolling, compact layout */
[b-sjc20pm4va] .import-wizard-sidebar .sidebar-content {
    overflow-y: visible;
}

[b-sjc20pm4va] .import-wizard-sidebar .form-section {
    padding: 0;
}

[b-sjc20pm4va] .import-wizard-sidebar .section-title {
    margin-bottom: 12px;
}

[b-sjc20pm4va] .import-wizard-sidebar .import-instructions {
    margin-bottom: 12px;
}

[b-sjc20pm4va] .import-wizard-sidebar .template-download-section {
    margin: 12px 0;
}

[b-sjc20pm4va] .import-wizard-sidebar .upload-area {
    padding: 16px;
}

[b-sjc20pm4va] .import-wizard-sidebar .import-summary {
    padding: 12px;
    margin-bottom: 12px;
}

[b-sjc20pm4va] .import-wizard-sidebar .preview-grid {
    max-height: none;
}

[b-sjc20pm4va] .import-wizard-sidebar .preview-table {
    max-height: 250px;
    overflow-y: auto;
}

.sidebar-footer[b-sjc20pm4va] {
    padding: 16px 24px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    pointer-events: auto !important;
    flex-shrink: 0;
    z-index: 10;
    margin-top: auto;
}

.sidebar-footer .btn[b-sjc20pm4va] {
    pointer-events: auto !important;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
}

.sidebar-footer .btn-secondary[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorNeutralForeground1, #242424);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
}

.sidebar-footer .btn-secondary:hover[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

.sidebar-footer .btn-primary[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: white;
    border: none;
}

.sidebar-footer .btn-primary:hover:not(:disabled)[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackgroundHover, #106ebe);
}

.sidebar-footer .btn-primary:disabled[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackgroundDisabled, #f0f0f0);
    color: var(--BEC-colorNeutralForegroundDisabled, #a0a0a0);
    cursor: not-allowed;
}

/* Close Button */
.close-btn[b-sjc20pm4va] {
    background: transparent;
    border: none;
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground3, #605e5c);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    transition: all 0.2s ease;
}

.close-btn:hover[b-sjc20pm4va] {
    background: #f0f0f0;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* Form Elements */
.form-group[b-sjc20pm4va] {
    margin-bottom: 20px;
}

.form-label[b-sjc20pm4va] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-sjc20pm4va]::after {
    content: " *";
    color: #d13438;
    font-weight: 600;
}

.form-row[b-sjc20pm4va] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.section-title[b-sjc20pm4va] {
    font-size: 14px;
    font-weight: 600;
    color: #323130;
    margin: 24px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title i[b-sjc20pm4va] {
    color: #0078d4;
}

.checkbox-wrapper[b-sjc20pm4va] {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 4px;
}

/* Detail View */
.detail-section[b-sjc20pm4va] {
    margin-bottom: 24px;
}

.detail-grid[b-sjc20pm4va] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.detail-item[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-item.full-width[b-sjc20pm4va] {
    grid-column: span 2;
}

.detail-label[b-sjc20pm4va] {
    font-size: 12px;
    color: #605e5c;
    font-weight: 500;
}

.detail-value[b-sjc20pm4va] {
    font-size: 14px;
    color: #323130;
    padding: 8px 12px;
    background: #f9f9f9;
    border-radius: 4px;
    min-height: 36px;
    display: flex;
    align-items: center;
}

.detail-value.computed[b-sjc20pm4va] {
    background: #e0f2fe;
    color: #0369a1;
    font-style: italic;
}

.detail-value.highlight[b-sjc20pm4va] {
    background: #dcfce7;
    color: #16a34a;
    font-weight: 600;
}

/* ========================================
   MODAL DIALOGS
   ======================================== */
.modal-overlay[b-sjc20pm4va] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
    /* Must be higher than header (1001) and sidebar (99999) */
    animation: fadeIn-b-sjc20pm4va 0.2s ease-out;
}

@keyframes fadeIn-b-sjc20pm4va {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-container[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-sjc20pm4va 0.3s ease-out;
    pointer-events: auto;
}

.modal-container.modal-sm[b-sjc20pm4va] {
    max-width: 400px;
}

/* Ensure modal buttons are clickable */
.modal-footer button[b-sjc20pm4va] {
    pointer-events: auto;
    cursor: pointer;
}

@keyframes slideUp-b-sjc20pm4va {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    font-size: 18px;
    font-weight: 600;
}

.modal-header i[b-sjc20pm4va] {
    font-size: 20px;
}

.modal-danger .modal-header[b-sjc20pm4va] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #dc2626;
}

.modal-warning .modal-header[b-sjc20pm4va] {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    color: #d97706;
}

.modal-success .modal-header[b-sjc20pm4va] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #16a34a;
}

.modal-content[b-sjc20pm4va] {
    padding: 20px;
}

.modal-content p[b-sjc20pm4va] {
    margin: 0 0 12px 0;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.5;
}

.warning-text[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d97706;
    font-size: 13px;
}

.warning-text i[b-sjc20pm4va] {
    font-size: 14px;
}

.modal-footer[b-sjc20pm4va] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: #f9fafb;
    border-radius: 0 0 var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge);
}

/* ========================================
   BUTTONS
   ======================================== */
.btn[b-sjc20pm4va] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn:disabled[b-sjc20pm4va] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-sm[b-sjc20pm4va] {
    padding: 4px 10px;
    font-size: 12px;
}

.btn-primary[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-secondary[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-success[b-sjc20pm4va] {
    background: #16a34a;
    color: white;
}

.btn-success:hover:not(:disabled)[b-sjc20pm4va] {
    background: #15803d;
}

.btn-warning[b-sjc20pm4va] {
    background: #d97706;
    color: white;
}

.btn-warning:hover:not(:disabled)[b-sjc20pm4va] {
    background: #b45309;
}

.btn-danger[b-sjc20pm4va] {
    background: #dc2626;
    color: white;
}

.btn-danger:hover:not(:disabled)[b-sjc20pm4va] {
    background: #b91c1c;
}

.btn-outline[b-sjc20pm4va] {
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground2);
}

.btn-outline:hover:not(:disabled)[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorBrandBackground);
}

/* ========================================
   PERCENTAGES WIZARD - Clean Microsoft-style
   ======================================== */

/* Percentages Wizard - Compact Layout */
.percentages-wizard .pct-content[b-sjc20pm4va] {
    padding: 20px 24px !important;
    overflow: visible !important;
}

.percentages-wizard .pct-description[b-sjc20pm4va] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.5;
    margin: 0 0 20px 0;
}

.percentages-wizard .pct-section[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: 16px;
    overflow: hidden;
}

.percentages-wizard .pct-section-header[b-sjc20pm4va] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground3);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.percentages-wizard .pct-section-body[b-sjc20pm4va] {
    padding: 14px 16px;
}

.percentages-wizard .pct-row[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.percentages-wizard .pct-input-group[b-sjc20pm4va] {
    flex: 1;
    max-width: 140px;
}

.percentages-wizard .pct-input-group[b-sjc20pm4va]  .e-numeric {
    width: 100% !important;
}

.percentages-wizard .btn-apply[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}

.percentages-wizard .pct-hint[b-sjc20pm4va] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 8px;
}

.percentages-wizard .pct-info-box[b-sjc20pm4va] {
    background: linear-gradient(135deg, #e8f4fd 0%, #d6ecfc 100%);
    border: 1px solid #b3d9f7;
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 14px 16px;
    margin-top: 8px;
}

.percentages-wizard .pct-info-title[b-sjc20pm4va] {
    font-size: 13px;
    font-weight: 600;
    color: #0078d4;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.percentages-wizard .pct-info-title i[b-sjc20pm4va] {
    font-size: 14px;
}

.percentages-wizard .pct-info-text[b-sjc20pm4va] {
    font-size: 12px;
    color: #1a5276;
    line-height: 1.6;
}

.percentages-wizard .pct-info-formula[b-sjc20pm4va] {
    font-size: 12px;
    color: #1a5276;
    font-family: 'JetBrains Mono', monospace;
    background: rgba(255, 255, 255, 0.5);
    padding: 6px 10px;
    border-radius: 4px;
    margin: 8px 0;
    display: inline-block;
}

.percentages-wizard .sidebar-footer[b-sjc20pm4va] {
    padding: 12px 24px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

/* Legacy styles kept for compatibility */
.section-description[b-sjc20pm4va] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 8px 0 16px 0;
    line-height: 1.5;
}

.info-box[b-sjc20pm4va] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(0, 120, 212, 0.05) 0%, rgba(0, 120, 212, 0.1) 100%);
    border: 1px solid rgba(0, 120, 212, 0.2);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-top: 24px;
}

.info-box>i[b-sjc20pm4va] {
    color: var(--BEC-colorBrandBackground);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-box strong[b-sjc20pm4va] {
    color: var(--BEC-colorNeutralForeground1);
}

.info-box ul[b-sjc20pm4va] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.info-box li[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 4px;
}

/* ========================================
   COLUMN CHOOSER
   ======================================== */
.column-chooser-actions[b-sjc20pm4va] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.column-chooser-list[b-sjc20pm4va] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}

.column-chooser-item[b-sjc20pm4va] {
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.column-chooser-item:hover[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandBackground);
}

/* ========================================
   PROJECT DETAILS WIZARD
   ======================================== */
.project-details-section[b-sjc20pm4va] {
    margin-bottom: 24px;
}

.project-details-section .section-title[b-sjc20pm4va] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.project-details-section .section-title i[b-sjc20pm4va] {
    color: var(--BEC-colorBrandBackground);
    font-size: 14px;
}

/* Financial Summary */
.financial-summary[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 16px;
}

.summary-row[b-sjc20pm4va] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed var(--BEC-colorNeutralStroke2);
}

.summary-row:last-child[b-sjc20pm4va] {
    border-bottom: none;
}

.summary-row.total-row[b-sjc20pm4va] {
    border-top: 2px solid var(--BEC-colorBrandBackground);
    border-bottom: none;
    margin-top: 8px;
    padding-top: 16px;
    font-weight: 600;
}

.summary-row.ps-row[b-sjc20pm4va] {
    color: #d97706;
}

.summary-label[b-sjc20pm4va] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
}

.summary-value[b-sjc20pm4va] {
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.summary-value.highlight[b-sjc20pm4va] {
    color: #059669;
    font-size: 16px;
}

.percentage-badge[b-sjc20pm4va] {
    display: inline-block;
    background: var(--BEC-colorBrandBackground);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
    font-weight: 500;
}

/* Statistics Grid */
.stats-grid[b-sjc20pm4va] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.stat-box[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 16px;
    text-align: center;
    transition: all 0.2s ease;
}

.stat-box:hover[b-sjc20pm4va] {
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.stat-number[b-sjc20pm4va] {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--BEC-colorBrandBackground);
    line-height: 1.2;
}

.stat-text[b-sjc20pm4va] {
    display: block;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Empty State */
.empty-state[b-sjc20pm4va] {
    text-align: center;
    padding: 40px 20px;
    color: var(--BEC-colorNeutralForeground3);
}

.empty-state i[b-sjc20pm4va] {
    font-size: 48px;
    opacity: 0.5;
    margin-bottom: 16px;
    display: block;
}

.empty-state p[b-sjc20pm4va] {
    font-size: 14px;
    margin: 0 0 8px 0;
}

.empty-state small[b-sjc20pm4va] {
    font-size: 12px;
    opacity: 0.7;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
    /* Toolbar adjustments for smaller screens */
}

@media (max-width: 768px) {
    .erp-page-header[b-sjc20pm4va] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }

    .stats-container[b-sjc20pm4va] {
        width: 100%;
        justify-content: space-around;
    }

    .form-row[b-sjc20pm4va] {
        grid-template-columns: 1fr;
    }

    .detail-grid[b-sjc20pm4va] {
        grid-template-columns: 1fr;
    }

    .detail-item.full-width[b-sjc20pm4va] {
        grid-column: span 1;
    }
}

@media (max-width: 480px) {
    [b-sjc20pm4va] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }

    .pending-changes-banner[b-sjc20pm4va] {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ========================================
   BULK IMPORT WIZARD STYLES
   ======================================== */

/* Step Indicator */
.import-steps[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.import-steps .step[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.import-steps .step-number[b-sjc20pm4va] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.import-steps .step.active .step-number[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.import-steps .step.completed .step-number[b-sjc20pm4va] {
    background: #16a34a;
    color: white;
}

.import-steps .step-label[b-sjc20pm4va] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: 500;
}

.import-steps .step.active .step-label[b-sjc20pm4va] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

.import-steps .step-line[b-sjc20pm4va] {
    width: 40px;
    height: 2px;
    background: var(--BEC-colorNeutralStroke2);
    margin: 0 8px;
    margin-bottom: 18px;
}

.import-steps .step-line.completed[b-sjc20pm4va] {
    background: #16a34a;
}

/* Import Step Content */
.import-step-content[b-sjc20pm4va] {
    padding: 8px 0;
}

.import-step-content .step-title[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.import-step-content .step-title i[b-sjc20pm4va] {
    font-size: 20px;
    color: var(--BEC-colorBrandBackground);
}

.import-step-content .step-title h3[b-sjc20pm4va] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.import-step-content .step-description[b-sjc20pm4va] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Template Info Card */
.template-info[b-sjc20pm4va] {
    margin-bottom: 20px;
}

.template-info .info-card[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: var(--BEC-borderRadiusMedium);
}

.template-info .info-card i[b-sjc20pm4va] {
    font-size: 24px;
    color: #16a34a;
}

.template-info .info-card strong[b-sjc20pm4va] {
    display: block;
    font-size: 13px;
    color: #166534;
}

.template-info .info-card span[b-sjc20pm4va] {
    font-size: 11px;
    color: #15803d;
}

/* Template Columns */
.template-columns[b-sjc20pm4va] {
    margin-bottom: 24px;
}

.template-columns h4[b-sjc20pm4va] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 10px;
}

.columns-grid[b-sjc20pm4va] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.col-tag[b-sjc20pm4va] {
    padding: 4px 8px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2);
}

.col-tag.required[b-sjc20pm4va] {
    background: #fef3c7;
    color: #92400e;
}

/* File Upload Area */
.file-upload-area[b-sjc20pm4va] {
    border: 2px dashed var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 40px 20px;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
}

.file-upload-area:hover[b-sjc20pm4va],
.file-upload-area.dragging[b-sjc20pm4va] {
    border-color: var(--BEC-colorBrandBackground);
    background: #f0f9ff;
}

.file-upload-area.has-file[b-sjc20pm4va] {
    border-style: solid;
    border-color: #16a34a;
    background: #f0fdf4;
}

.file-upload-area>i[b-sjc20pm4va] {
    font-size: 40px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 12px;
    display: block;
}

.file-upload-area.has-file>i.file-icon[b-sjc20pm4va] {
    color: #16a34a;
}

.file-upload-area p[b-sjc20pm4va] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.file-upload-area .file-name[b-sjc20pm4va] {
    font-weight: 600;
    color: #166534;
}

.file-upload-area .file-size[b-sjc20pm4va] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    display: block;
    margin-bottom: 12px;
}

.file-upload-area span[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.file-upload-area .file-input[b-sjc20pm4va] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-error[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--BEC-borderRadiusSmall);
    margin-top: 12px;
    font-size: 12px;
    color: #dc2626;
}

/* Validation Summary */
.validation-summary[b-sjc20pm4va] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.validation-summary .summary-card[b-sjc20pm4va] {
    padding: 16px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: center;
}

.validation-summary .summary-card.success[b-sjc20pm4va] {
    background: #f0fdf4;
    border: 1px solid #86efac;
}

.validation-summary .summary-card.warning[b-sjc20pm4va] {
    background: #fffbeb;
    border: 1px solid #fcd34d;
}

.validation-summary .summary-card.error[b-sjc20pm4va] {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.validation-summary .summary-card i[b-sjc20pm4va] {
    font-size: 20px;
    margin-bottom: 4px;
}

.validation-summary .summary-card.success i[b-sjc20pm4va] {
    color: #16a34a;
}

.validation-summary .summary-card.warning i[b-sjc20pm4va] {
    color: #d97706;
}

.validation-summary .summary-card.error i[b-sjc20pm4va] {
    color: #dc2626;
}

.validation-summary .count[b-sjc20pm4va] {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.validation-summary .summary-card.success .count[b-sjc20pm4va] {
    color: #16a34a;
}

.validation-summary .summary-card.warning .count[b-sjc20pm4va] {
    color: #d97706;
}

.validation-summary .summary-card.error .count[b-sjc20pm4va] {
    color: #dc2626;
}

.validation-summary .label[b-sjc20pm4va] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

/* Preview Table */
.preview-table-container[b-sjc20pm4va] {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-bottom: 16px;
}

.preview-table[b-sjc20pm4va] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.preview-table th[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground3);
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.preview-table td[b-sjc20pm4va] {
    padding: 8px 10px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.preview-table tr.valid[b-sjc20pm4va] {
    background: #f0fdf4;
}

.preview-table tr.warning[b-sjc20pm4va] {
    background: #fffbeb;
}

.preview-table tr.error[b-sjc20pm4va] {
    background: #fef2f2;
}

.preview-table .desc-cell[b-sjc20pm4va] {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Validation Errors */
.validation-errors[b-sjc20pm4va] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--BEC-borderRadiusSmall);
    padding: 12px;
}

.validation-errors h4[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #dc2626;
    margin: 0 0 8px 0;
}

.validation-errors ul[b-sjc20pm4va] {
    margin: 0;
    padding-left: 20px;
    font-size: 11px;
    color: #991b1b;
}

.validation-errors li[b-sjc20pm4va] {
    margin-bottom: 4px;
}

.validation-errors .more-errors[b-sjc20pm4va] {
    font-size: 11px;
    color: #dc2626;
    font-style: italic;
}

/* Large Button */
.btn-lg[b-sjc20pm4va] {
    padding: 12px 24px;
    font-size: 14px;
}

/* =====================================================
   IMPORT WIZARD STYLES (PackageLevels Pattern)
   ===================================================== */

/* Template Download Section */
.template-download-section[b-sjc20pm4va] {
    margin: 16px 0;
}

.btn-download[b-sjc20pm4va] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 2px dashed var(--BEC-colorBrandStroke1);
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorBrandForeground1);
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-download:hover:not(:disabled)[b-sjc20pm4va] {
    background: var(--BEC-colorBrandBackgroundHover);
    border-style: solid;
}

.btn-download:disabled[b-sjc20pm4va] {
    opacity: 0.7;
    cursor: wait;
}

.btn-download .fa-spin[b-sjc20pm4va] {
    animation: spin-b-sjc20pm4va 1s linear infinite;
}

/* Template Download Success Message */
.template-download-success[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.15) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--BEC-borderRadiusMedium);
    color: #059669;
    font-size: 13px;
    font-weight: 500;
    animation: slideIn-b-sjc20pm4va 0.3s ease-out;
}

.template-download-success i[b-sjc20pm4va] {
    font-size: 16px;
    color: #10b981;
}

@keyframes slideIn-b-sjc20pm4va {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Import Instructions */
.import-instructions[b-sjc20pm4va] {
    margin-bottom: 16px;
}

.instruction-card[b-sjc20pm4va] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusMedium);
    border-left: 3px solid var(--BEC-colorBrandForeground1);
}

.instruction-card i[b-sjc20pm4va] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 18px;
    flex-shrink: 0;
}

.instruction-card ul[b-sjc20pm4va] {
    margin: 8px 0 0;
    padding-left: 20px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
}

.instruction-card li[b-sjc20pm4va] {
    margin-bottom: 4px;
}

/* Upload Area */
.upload-area[b-sjc20pm4va] {
    margin: 16px 0;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px dashed var(--BEC-colorNeutralStroke1);
}

.selected-file-info[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 14px;
    background: #dcfce7;
    border-radius: var(--BEC-borderRadiusSmall);
    color: #166534;
}

.selected-file-info i[b-sjc20pm4va] {
    font-size: 16px;
}

/* Import Error Message */
.import-error[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 14px;
    background: #fee2e2;
    border-radius: var(--BEC-borderRadiusSmall);
    color: #b91c1c;
    font-size: 13px;
}

/* Import Summary */
.import-summary[b-sjc20pm4va] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.import-summary .summary-item[b-sjc20pm4va] {
    display: flex;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.import-summary .summary-item.error[b-sjc20pm4va] {
    grid-column: 1 / -1;
    background: #fee2e2;
    color: #b91c1c;
}

.import-summary .summary-label[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
}

.import-summary .summary-value[b-sjc20pm4va] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

/* Validation Success */
.validation-success[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #dcfce7;
    border-radius: var(--BEC-borderRadiusMedium);
    color: #166534;
    margin-bottom: 16px;
}

.validation-success i[b-sjc20pm4va] {
    font-size: 20px;
}

/* =====================================================
   HELP WIZARD STYLES
   ===================================================== */

/* Help Wizard Sidebar */
.help-wizard-sidebar[b-sjc20pm4va] {
    --help-accent: #3b82f6;
    --help-accent-light: #dbeafe;
    --help-success: #10b981;
    --help-warning: #f59e0b;
    --help-info: #6366f1;
}

.help-content[b-sjc20pm4va] {
    padding: 0 !important;
}

/* Step Indicators */
.help-steps-indicator[b-sjc20pm4va] {
    display: flex;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--BEC-colorNeutralBackground3) 0%, var(--BEC-colorNeutralBackground2) 100%);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.help-step[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.help-step.active[b-sjc20pm4va] {
    opacity: 1;
}

.help-step.completed[b-sjc20pm4va] {
    opacity: 0.8;
}

.help-step .step-number[b-sjc20pm4va] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground1);
    border: 2px solid var(--BEC-colorNeutralStroke1);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2);
    transition: all 0.3s ease;
}

.help-step.active .step-number[b-sjc20pm4va] {
    background: var(--help-accent);
    border-color: var(--help-accent);
    color: white;
    transform: scale(1.1);
}

.help-step.completed .step-number[b-sjc20pm4va] {
    background: var(--help-success);
    border-color: var(--help-success);
    color: white;
}

.help-step .step-label[b-sjc20pm4va] {
    font-size: 10px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2);
    text-align: center;
}

.help-step.active .step-label[b-sjc20pm4va] {
    color: var(--help-accent);
    font-weight: 600;
}

/* Help Step Content */
.help-step-content[b-sjc20pm4va] {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(100vh - 280px);
}

.help-section[b-sjc20pm4va] {
    margin-bottom: 20px;
}

.help-section:last-child[b-sjc20pm4va] {
    margin-bottom: 0;
}

.help-section h3[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--help-accent-light);
}

.help-section h3 i[b-sjc20pm4va] {
    color: var(--help-accent);
}

.help-section p[b-sjc20pm4va] {
    font-size: 13px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 12px 0;
}

/* Column List */
.help-column-list[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.help-column-item[b-sjc20pm4va] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    border-left: 3px solid var(--help-accent);
}

.help-column-item .column-name[b-sjc20pm4va] {
    font-weight: 600;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    min-width: 100px;
}

.help-column-item .column-desc[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    text-align: right;
}

/* Help Tips */
.help-tips[b-sjc20pm4va] {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.help-tips li[b-sjc20pm4va] {
    position: relative;
    padding: 8px 0 8px 24px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    border-bottom: 1px dashed var(--BEC-colorNeutralStroke2);
}

.help-tips li:last-child[b-sjc20pm4va] {
    border-bottom: none;
}

.help-tips li[b-sjc20pm4va]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--help-success);
    font-weight: bold;
}

/* Formula Cards */
.formula-card[b-sjc20pm4va] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 12px 14px;
    margin-bottom: 10px;
    border-left: 3px solid var(--help-accent);
}

.formula-card .formula-row[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.formula-card .formula-code[b-sjc20pm4va] {
    background: var(--help-accent);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
}

.formula-card .formula-name[b-sjc20pm4va] {
    font-weight: 600;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
}

.formula-card .formula-desc[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* Code Example */
.code-example[b-sjc20pm4va] {
    background: #1e293b;
    padding: 12px 16px;
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 12px 0;
}

.code-example code[b-sjc20pm4va] {
    color: #22d3ee;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}

.code-explanation[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Formula Box */
.formula-box[b-sjc20pm4va] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 14px 16px;
    margin: 12px 0;
}

.formula-box.special[b-sjc20pm4va] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #fcd34d;
}

.formula-box .formula-title[b-sjc20pm4va] {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.formula-box code.formula[b-sjc20pm4va] {
    display: block;
    background: #1e293b;
    color: #22d3ee;
    padding: 10px 14px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 500;
}

.formula-box p[b-sjc20pm4va] {
    font-size: 12px;
    color: #78350f;
    margin: 10px 0 0 0;
}

/* Formula Exception */
.formula-exception[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fef3c7;
    border-radius: var(--BEC-borderRadiusSmall);
    margin-top: 10px;
}

.formula-exception i[b-sjc20pm4va] {
    color: #d97706;
}

.formula-exception span[b-sjc20pm4va] {
    font-size: 12px;
    color: #92400e;
    font-weight: 500;
}

/* Item Case Cards */
.item-case-card[b-sjc20pm4va] {
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.item-case-card .case-header[b-sjc20pm4va] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    font-weight: 600;
}

.item-case-card.normal .case-header[b-sjc20pm4va] {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}

.item-case-card.rateonly .case-header[b-sjc20pm4va] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.item-case-card.ps .case-header[b-sjc20pm4va] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.item-case-card .case-code[b-sjc20pm4va] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}

.item-case-card.normal .case-code[b-sjc20pm4va] {
    color: #166534;
}

.item-case-card.rateonly .case-code[b-sjc20pm4va] {
    color: #92400e;
}

.item-case-card.ps .case-code[b-sjc20pm4va] {
    color: #1e40af;
}

.item-case-card .case-badge[b-sjc20pm4va] {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.item-case-card.normal .case-badge[b-sjc20pm4va] {
    background: #166534;
    color: white;
}

.item-case-card .case-badge.warning[b-sjc20pm4va] {
    background: #d97706;
    color: white;
}

.item-case-card .case-badge.info[b-sjc20pm4va] {
    background: #3b82f6;
    color: white;
}

.item-case-card .case-body[b-sjc20pm4va] {
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground1);
}

.item-case-card .case-body p[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.item-case-card .case-body ul[b-sjc20pm4va] {
    margin: 0;
    padding-left: 20px;
}

.item-case-card .case-body li[b-sjc20pm4va] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 4px;
}

.item-case-card .case-body li strong[b-sjc20pm4va] {
    color: var(--BEC-colorNeutralForeground1);
}

/* Percentage Info */
.percentage-info[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.percentage-item[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.percentage-item .pct-label[b-sjc20pm4va] {
    background: var(--help-info);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    min-width: 80px;
    text-align: center;
}

.percentage-item .pct-desc[b-sjc20pm4va] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
}

/* Help Footer */
.help-footer[b-sjc20pm4va] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.help-checkbox[b-sjc20pm4va] {
    flex-shrink: 0;
}

[b-sjc20pm4va] .help-checkbox .e-checkbox-wrapper .e-label {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
}

.help-nav-buttons[b-sjc20pm4va] {
    display: flex;
    gap: 10px;
}

/* ========================================
   NEW DESIGN - VISITOR DASHBOARD STYLE
   ======================================== */
.visitor-dashboard-container[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    background-color: var(--BEC-colorNeutralBackground3);
    font-family: var(--BEC-fontFamilyBase);
    color: var(--BEC-colorNeutralForeground1);
    overflow: hidden;
}

.dashboard-header[b-sjc20pm4va] {
    background-color: var(--BEC-colorNeutralBackground1);
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.header-title-section[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
}

.header-right-section[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
}

.header-icon[b-sjc20pm4va] {
    font-size: 24px;
    display: flex;
    align-items: center;
}

.page-title[b-sjc20pm4va] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.page-subtitle[b-sjc20pm4va] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

.header-stats[b-sjc20pm4va] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding-right: var(--BEC-spacingHorizontalL);
    border-right: 1px solid var(--BEC-colorNeutralStroke1);
}

.header-stat-item[b-sjc20pm4va] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.header-stat-value[b-sjc20pm4va] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightBold);
    line-height: 1;
    color: var(--BEC-colorNeutralForeground1);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.header-stat-label[b-sjc20pm4va] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 4px;
    text-transform: uppercase;
}

/* Financial Colors */
.header-stat-value.success[b-sjc20pm4va] {
    color: #2563eb;
}

/* Direct */
.header-stat-value.warning[b-sjc20pm4va] {
    color: #059669;
}

/* Indirect */
.header-stat-value.info[b-sjc20pm4va] {
    color: #7c3aed;
}

/* Prov Sum */
.header-stat-value.highlight[b-sjc20pm4va] {
    color: #dc2626;
}

/* Selling */

.header-actions[b-sjc20pm4va] {
    display: flex;
    gap: var(--BEC-spacingHorizontalS);
}

.btn-icon[b-sjc20pm4va] {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground3);
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.btn-icon:hover[b-sjc20pm4va] {
    background-color: var(--BEC-colorNeutralBackground1Hover);
    color: var(--BEC-colorBrandBackground);
}

.dashboard-scroll-area[b-sjc20pm4va] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--BEC-spacingVerticalM) var(--BEC-spacingHorizontalXXL);
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingVerticalM);
}

/* Grid Card Wrapper */
.grid-section-card[b-sjc20pm4va] {
    background-color: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    /* border: 1px solid var(--BEC-colorNeutralStroke1); */
    flex: 1;
    /* Expand to fill space */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Contain the grid */
}
/* /Components/Pages/MainLayout/Estimation/LineItemsPivot.razor.rz.scp.css */
/* ========================================
   LINE ITEMS PIVOT PAGE
   Dedicated pivot table analysis view
   ======================================== */

.pivot-page-container[b-jw4quof5c2] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--BEC-colorNeutralBackground2, #f5f5f5);
}

/* ========================================
   PAGE HEADER - Matching Line Items BOQ
   ======================================== */
.erp-page-header[b-jw4quof5c2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    flex-shrink: 0;
}

.header-left[b-jw4quof5c2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-title[b-jw4quof5c2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #333);
    margin: 0;
}

.page-title i[b-jw4quof5c2] {
    font-size: 14px;
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.back-btn[b-jw4quof5c2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--BEC-colorNeutralForeground2, #666);
    cursor: pointer;
    transition: all 0.15s ease;
}

.back-btn:hover[b-jw4quof5c2] {
    background: var(--BEC-colorNeutralBackground3, #f0f0f0);
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.header-right[b-jw4quof5c2] {
    display: flex;
    align-items: center;
}

/* Financial Summary - Compact single line */
.header-financial-summary[b-jw4quof5c2] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
}

.fin-item[b-jw4quof5c2] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.fin-item.project-info[b-jw4quof5c2] {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--BEC-colorBrandBackground2, #deecf9);
    border-radius: 4px;
}

.fin-code[b-jw4quof5c2] {
    font-weight: 700;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 11px;
}

.fin-name[b-jw4quof5c2] {
    color: var(--BEC-colorNeutralForeground2, #666);
    font-size: 11px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fin-label[b-jw4quof5c2] {
    font-size: 9px;
    color: var(--BEC-colorNeutralForeground3, #999);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.fin-value[b-jw4quof5c2] {
    font-weight: 600;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1, #333);
}

.fin-value.direct[b-jw4quof5c2] {
    color: var(--BEC-colorPaletteGreenForeground1, #107c10);
}

.fin-value.indirect[b-jw4quof5c2] {
    color: var(--BEC-colorPaletteBlueForeground1, #0078d4);
}

.fin-value.indirect small[b-jw4quof5c2] {
    font-size: 9px;
    font-weight: 400;
    color: var(--BEC-colorNeutralForeground3, #999);
}

.fin-value.ps[b-jw4quof5c2] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6914);
}

.fin-value.selling[b-jw4quof5c2] {
    color: var(--BEC-colorPaletteRedForeground1, #d13438);
    font-weight: 700;
}

.fin-divider[b-jw4quof5c2] {
    width: 1px;
    height: 24px;
    background: var(--BEC-colorNeutralStroke2, #e0e0e0);
}

/* ========================================
   MAIN CONTENT
   ======================================== */
.pivot-content[b-jw4quof5c2] {
    flex: 1;
    padding: 12px;
    overflow: auto;
    min-height: 0;
}

/* Loading State */
.loading-container[b-jw4quof5c2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
}

.loading-spinner[b-jw4quof5c2] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-top-color: var(--BEC-colorBrandForeground1, #0078d4);
    border-radius: 50%;
    animation: spin-b-jw4quof5c2 1s linear infinite;
}

@keyframes spin-b-jw4quof5c2 {
    to { transform: rotate(360deg); }
}

/* Error State */
.error-container[b-jw4quof5c2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1, #d13438);
}

.error-container i[b-jw4quof5c2] {
    font-size: 48px;
}

/* Empty State */
.empty-container[b-jw4quof5c2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    color: var(--BEC-colorNeutralForeground2, #666);
}

.empty-container i[b-jw4quof5c2] {
    font-size: 64px;
    opacity: 0.5;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn[b-jw4quof5c2] {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary[b-jw4quof5c2] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: white;
}

.btn-primary:hover[b-jw4quof5c2] {
    background: var(--BEC-colorBrandBackgroundHover, #106ebe);
}

.btn-secondary[b-jw4quof5c2] {
    background: var(--BEC-colorNeutralBackground3, #f0f0f0);
    color: var(--BEC-colorNeutralForeground1, #333);
}

.btn-secondary:hover[b-jw4quof5c2] {
    background: var(--BEC-colorNeutralBackground4, #e0e0e0);
}

/* ========================================
   SYNCFUSION PIVOT OVERRIDES
   ======================================== */
[b-jw4quof5c2] .e-pivotview {
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0) !important;
    border-radius: 6px !important;
    overflow: hidden;
}

[b-jw4quof5c2] .e-pivotview .e-grouping-bar {
    background: var(--BEC-colorNeutralBackground3, #f0f0f0) !important;
    padding: 6px !important;
}

[b-jw4quof5c2] .e-pivotview .e-headercell {
    background: var(--BEC-colorNeutralBackground3, #f0f0f0) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

[b-jw4quof5c2] .e-pivotview .e-gtot {
    background: linear-gradient(135deg, #e8f4fd 0%, #d6ecfc 100%) !important;
    font-weight: 700 !important;
}

[b-jw4quof5c2] .e-pivotview .e-summary {
    background: var(--BEC-colorNeutralBackground2, #f5f5f5) !important;
    font-weight: 600 !important;
}

[b-jw4quof5c2] .e-pivotview .e-valuescontent {
    text-align: right !important;
    font-size: 12px !important;
}

[b-jw4quof5c2] .e-pivotview .e-rowsheader {
    font-size: 12px !important;
}

/* Field List Styling */
[b-jw4quof5c2] .e-pivotfieldlist-wrapper {
    font-size: 12px !important;
}

[b-jw4quof5c2] .e-pivotfieldlist .e-field-list-tree .e-list-text {
    font-size: 12px !important;
}
/* /Components/Pages/MainLayout/Estimation/PackageLevels.razor.rz.scp.css */
/* ========================================
   PACKAGE LEVELS ADMINISTRATION
   Following ItemCases.razor.css pattern 100%
   
   FEATURES:
   ✅ Sticky Page Header
   ✅ Sticky Action Toolbar
   ✅ Sidebar Wizards (MS Outlook/OneDrive style)
   ✅ Modal Dialogs for confirmations
   ✅ Professional styling
   ======================================== */

/* Smooth scrolling */
:global(html)[b-n27yu04t5c] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER
   ======================================== */
.erp-page-container[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER
   ======================================== */
.erp-page-header[b-n27yu04t5c] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-n27yu04t5c] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-n27yu04t5c] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-n27yu04t5c] {
    display: none;
}

/* Help Icon Button */
.help-icon-btn[b-n27yu04t5c] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-n27yu04t5c] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.header-right[b-n27yu04t5c] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER
   ======================================== */
.stats-container[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
}

.stat-card[b-n27yu04t5c] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-n27yu04t5c] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-n27yu04t5c] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-n27yu04t5c] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR
   ======================================== */
[b-n27yu04t5c] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalXL) !important;
    min-height: 36px !important;
    margin: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalL) !important;
}

[b-n27yu04t5c] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

[b-n27yu04t5c] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: var(--BEC-fontSizeBase200) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    min-height: 26px !important;
}

[b-n27yu04t5c] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 13px !important;
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-n27yu04t5c] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-n27yu04t5c] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-n27yu04t5c] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-n27yu04t5c] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-icons,
[b-n27yu04t5c] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-tbar-btn-text {
    color: #dc2626 !important;
}

[b-n27yu04t5c] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
}

[b-n27yu04t5c] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: var(--BEC-spacingHorizontalL) !important;
    opacity: 0.6 !important;
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-n27yu04t5c] {
    flex: 1;
    padding: 10px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Loading Overlay */
.loading-overlay[b-n27yu04t5c] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
}

.loading-spinner[b-n27yu04t5c] {
    font-size: 32px;
    color: var(--BEC-colorBrandBackground);
}

.loading-overlay p[b-n27yu04t5c] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* Error Container */
.error-container[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    text-align: center;
}

.error-container i[b-n27yu04t5c] {
    font-size: 48px;
    color: #dc2626;
}

.error-container p[b-n27yu04t5c] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
}

/* Placeholder Content */
.placeholder-content[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    color: var(--BEC-colorNeutralForeground3);
    text-align: center;
}

.placeholder-icon[b-n27yu04t5c] {
    font-size: 48px;
    color: var(--BEC-colorBrandBackground);
    opacity: 0.5;
}

.placeholder-content h3[b-n27yu04t5c] {
    margin: 0;
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.placeholder-content p[b-n27yu04t5c] {
    margin: 0;
    font-size: 14px;
}

.placeholder-badge[b-n27yu04t5c] {
    background: var(--BEC-colorBrandBackground);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
}

/* ========================================
   SIDEBAR WIZARD STYLES
   ======================================== */
[b-n27yu04t5c] .assignment-wizard-sidebar {
    background: var(--BEC-colorNeutralBackground1) !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15) !important;
    border-left: 1px solid var(--BEC-colorNeutralStroke1) !important;
}

[b-n27yu04t5c] .assignment-wizard-sidebar .e-content-animation {
    height: 100%;
}

.sidebar-header[b-n27yu04t5c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--BEC-colorBrandBackground);
    color: white;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.sidebar-title[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.sidebar-title i[b-n27yu04t5c] {
    font-size: 18px;
}

.sidebar-close-btn[b-n27yu04t5c] {
    background: transparent;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.sidebar-close-btn:hover[b-n27yu04t5c] {
    background: rgba(255, 255, 255, 0.2);
}

.sidebar-content[b-n27yu04t5c] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.sidebar-step-content[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-footer[b-n27yu04t5c] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   FORM STYLES
   ======================================== */
.form-row[b-n27yu04t5c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.form-group[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full-width[b-n27yu04t5c] {
    grid-column: 1 / -1;
}

.form-label[b-n27yu04t5c] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.form-label.required[b-n27yu04t5c]::after {
    content: " *";
    color: #dc2626;
}

.checkbox-wrapper[b-n27yu04t5c] {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 4px;
}

/* Info Banner */
.info-banner[b-n27yu04t5c] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: #e0f2fe;
    border: 1px solid #0ea5e9;
    border-radius: var(--BEC-borderRadiusMedium);
    color: #0369a1;
    font-size: 13px;
    margin-bottom: 20px;
}

.info-banner i[b-n27yu04t5c] {
    font-size: 16px;
    margin-top: 2px;
}

/* Form Hint */
.form-hint[b-n27yu04t5c] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 4px;
}

/* Auto-Generated Section */
.auto-generated-section[b-n27yu04t5c] {
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 16px;
    margin-top: 20px;
}

.auto-generated-section .section-title[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.auto-generated-section .section-title i[b-n27yu04t5c] {
    color: var(--BEC-colorBrandForeground1);
}

.auto-field[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed var(--BEC-colorNeutralStroke2);
}

.auto-field:last-child[b-n27yu04t5c] {
    border-bottom: none;
    padding-bottom: 0;
}

.auto-label[b-n27yu04t5c] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.auto-value[b-n27yu04t5c] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    font-family: 'Consolas', 'Monaco', monospace;
}

.auto-value.path[b-n27yu04t5c] {
    font-family: inherit;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightRegular);
    color: var(--BEC-colorNeutralForeground2);
    font-style: italic;
}

/* Parent Info Card */
.parent-info-card[b-n27yu04t5c] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #0ea5e9;
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: 20px;
    overflow: hidden;
}

.parent-info-header[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #0ea5e9;
    color: white;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.parent-info-header i[b-n27yu04t5c] {
    font-size: 14px;
}

.parent-info-content[b-n27yu04t5c] {
    padding: 12px 16px;
}

.parent-detail[b-n27yu04t5c] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.parent-detail:last-child[b-n27yu04t5c] {
    margin-bottom: 0;
}

.parent-label[b-n27yu04t5c] {
    font-size: 11px;
    color: #0369a1;
    font-weight: var(--BEC-fontWeightMedium);
    min-width: 50px;
    text-transform: uppercase;
}

.parent-value[b-n27yu04t5c] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

.parent-value.path[b-n27yu04t5c] {
    font-weight: var(--BEC-fontWeightRegular);
    font-style: italic;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 12px;
}

/* Detail View Styles */
.detail-section[b-n27yu04t5c] {
    margin-bottom: 24px;
}

.section-title[b-n27yu04t5c] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.detail-grid[b-n27yu04t5c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.detail-item[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label[b-n27yu04t5c] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value[b-n27yu04t5c] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
}

/* Column Chooser Styles */
.column-chooser-actions[b-n27yu04t5c] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.column-chooser-list[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.column-chooser-item[b-n27yu04t5c] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

/* ========================================
   BUTTON STYLES
   ======================================== */
.btn[b-n27yu04t5c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn:disabled[b-n27yu04t5c] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary[b-n27yu04t5c] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-n27yu04t5c] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-secondary[b-n27yu04t5c] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-n27yu04t5c] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-success[b-n27yu04t5c] {
    background: #16a34a;
    color: white;
}

.btn-success:hover:not(:disabled)[b-n27yu04t5c] {
    background: #15803d;
}

.btn-warning[b-n27yu04t5c] {
    background: #d97706;
    color: white;
}

.btn-warning:hover:not(:disabled)[b-n27yu04t5c] {
    background: #b45309;
}

.btn-danger[b-n27yu04t5c] {
    background: #dc2626;
    color: white;
}

.btn-danger:hover:not(:disabled)[b-n27yu04t5c] {
    background: #b91c1c;
}

.btn-outline[b-n27yu04t5c] {
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-outline:hover:not(:disabled)[b-n27yu04t5c] {
    background: var(--BEC-colorNeutralBackground2);
}

.btn-sm[b-n27yu04t5c] {
    padding: 4px 10px;
    font-size: 12px;
}

/* ========================================
   MODAL STYLES
   ======================================== */
.modal-overlay[b-n27yu04t5c] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-n27yu04t5c 0.2s ease;
}

@keyframes fadeIn-b-n27yu04t5c {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-container[b-n27yu04t5c] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    min-width: 400px;
    max-width: 500px;
    animation: slideIn-b-n27yu04t5c 0.2s ease;
}

@keyframes slideIn-b-n27yu04t5c {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.modal-danger .modal-header[b-n27yu04t5c] {
    background: #fef2f2;
    color: #dc2626;
}

.modal-warning .modal-header[b-n27yu04t5c] {
    background: #fffbeb;
    color: #d97706;
}

.modal-success .modal-header[b-n27yu04t5c] {
    background: #f0fdf4;
    color: #16a34a;
}

.modal-content[b-n27yu04t5c] {
    padding: 20px;
}

.modal-content p[b-n27yu04t5c] {
    margin: 0 0 12px 0;
    color: var(--BEC-colorNeutralForeground1);
    font-size: 14px;
}

.warning-text[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d97706 !important;
    font-size: 13px !important;
}

.info-text[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0369a1 !important;
    font-size: 13px !important;
}

.modal-footer[b-n27yu04t5c] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground2);
}

/* ========================================
   BADGE STYLES
   ======================================== */
.badge-active[b-n27yu04t5c] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    background: #dcfce7;
    color: #16a34a;
}

.badge-inactive[b-n27yu04t5c] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    background: #fee2e2;
    color: #dc2626;
}

/* ========================================
   EMPTY STATE
   ======================================== */
.empty-state[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 20px;
    text-align: center;
}

.empty-state i[b-n27yu04t5c] {
    font-size: 64px;
    color: var(--BEC-colorNeutralForeground4);
}

.empty-state h3[b-n27yu04t5c] {
    margin: 0;
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.empty-state p[b-n27yu04t5c] {
    margin: 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   TREEGRID STYLES
   ======================================== */
[b-n27yu04t5c] .e-treegrid {
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
}

[b-n27yu04t5c] .e-treegrid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-n27yu04t5c] .e-treegrid .e-headercell {
    background: var(--BEC-colorNeutralBackground2) !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    font-size: 12px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    padding: 8px 12px !important;
}

[b-n27yu04t5c] .e-treegrid .e-rowcell {
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
}

[b-n27yu04t5c] .e-treegrid .e-row:hover .e-rowcell {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-n27yu04t5c] .e-treegrid .e-row.e-altrow .e-rowcell {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-n27yu04t5c] .e-treegrid .e-row.e-altrow:hover .e-rowcell {
    background: var(--BEC-colorNeutralBackground2Hover) !important;
}

[b-n27yu04t5c] .e-treegrid .e-rowcell.e-selectionbackground {
    background: rgba(0, 120, 212, 0.1) !important;
}

[b-n27yu04t5c] .e-treegrid .e-treegridexpand,
[b-n27yu04t5c] .e-treegrid .e-treegridcollapse {
    color: var(--BEC-colorBrandForeground1) !important;
}

[b-n27yu04t5c] .e-treegrid .e-checkbox-wrapper .e-frame {
    border-color: var(--BEC-colorNeutralStroke1) !important;
}

[b-n27yu04t5c] .e-treegrid .e-checkbox-wrapper .e-frame.e-check {
    background: var(--BEC-colorBrandBackground) !important;
    border-color: var(--BEC-colorBrandBackground) !important;
}

/* TreeGrid Pager */
[b-n27yu04t5c] .e-treegrid .e-pager {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 8px 12px !important;
}

[b-n27yu04t5c] .e-treegrid .e-pager .e-pagercontainer {
    background: transparent !important;
}

/* Level Badge Styles */
.level-badge[b-n27yu04t5c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.level-badge.level-1[b-n27yu04t5c] {
    background: #dbeafe;
    color: #1d4ed8;
}

.level-badge.level-2[b-n27yu04t5c] {
    background: #dcfce7;
    color: #16a34a;
}

.level-badge.level-3[b-n27yu04t5c] {
    background: #fef3c7;
    color: #d97706;
}

.level-badge.level-4[b-n27yu04t5c] {
    background: #fce7f3;
    color: #be185d;
}

.level-badge.level-5[b-n27yu04t5c] {
    background: #e0e7ff;
    color: #4338ca;
}

/* Full Path Text */
.full-path-text[b-n27yu04t5c] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 12px;
    font-style: italic;
}

/* ========================================
   IMPORT WIZARD STYLES
   ======================================== */

/* Import Instructions Card */
.import-instructions[b-n27yu04t5c] {
    margin-bottom: 20px;
}

.instruction-card[b-n27yu04t5c] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border-radius: 8px;
    border-left: 4px solid #2196f3;
}

.instruction-card i[b-n27yu04t5c] {
    color: #2196f3;
    font-size: 24px;
    flex-shrink: 0;
}

.instruction-card ul[b-n27yu04t5c] {
    margin: 8px 0 0 0;
    padding-left: 20px;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 13px;
}

.instruction-card ul li[b-n27yu04t5c] {
    margin-bottom: 4px;
}

/* Upload Area */
.upload-area[b-n27yu04t5c] {
    margin: 20px 0;
    padding: 20px;
    border: 2px dashed var(--BEC-colorNeutralStroke1);
    border-radius: 8px;
    text-align: center;
    transition: border-color 0.2s;
}

.upload-area:hover[b-n27yu04t5c] {
    border-color: var(--BEC-colorBrandStroke1);
}

.selected-file-info[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 6px;
    color: var(--BEC-colorNeutralForeground1);
}

.selected-file-info i[b-n27yu04t5c] {
    color: #217346;
    font-size: 20px;
}

/* Import Error */
.import-error[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #ffebee;
    border-radius: 6px;
    color: #c62828;
    margin-top: 16px;
}

.import-error i[b-n27yu04t5c] {
    flex-shrink: 0;
}

/* Import Summary */
.import-summary[b-n27yu04t5c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 8px;
}

.summary-item[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.summary-item.error .summary-value[b-n27yu04t5c] {
    color: #c62828;
}

.summary-label[b-n27yu04t5c] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
}

.summary-value[b-n27yu04t5c] {
    font-size: 24px;
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1);
}

/* Validation Errors */
.validation-errors[b-n27yu04t5c] {
    background: #ffebee;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.validation-errors h4[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c62828;
    margin: 0 0 12px 0;
    font-size: 14px;
}

.validation-errors ul[b-n27yu04t5c] {
    margin: 0;
    padding-left: 24px;
    color: #b71c1c;
    font-size: 13px;
}

.validation-errors li[b-n27yu04t5c] {
    margin-bottom: 4px;
}

.validation-errors .more-errors[b-n27yu04t5c] {
    font-style: italic;
    color: #e57373;
}

/* Validation Success */
.validation-success[b-n27yu04t5c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: #e8f5e9;
    border-radius: 8px;
    color: #2e7d32;
    margin-bottom: 20px;
}

.validation-success i[b-n27yu04t5c] {
    font-size: 24px;
}

/* Preview Grid */
.preview-grid[b-n27yu04t5c] {
    margin-top: 20px;
}

.preview-grid h4[b-n27yu04t5c] {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
}

.preview-table[b-n27yu04t5c] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.preview-table th[b-n27yu04t5c],
.preview-table td[b-n27yu04t5c] {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.preview-table th[b-n27yu04t5c] {
    background: var(--BEC-colorNeutralBackground3);
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    position: sticky;
    top: 0;
}

.preview-table tbody tr:hover[b-n27yu04t5c] {
    background: var(--BEC-colorNeutralBackground2);
}

.preview-table .row-error[b-n27yu04t5c] {
    background: #ffebee;
}

.preview-table .row-error:hover[b-n27yu04t5c] {
    background: #ffcdd2;
}

/* Badges for preview */
.badge-valid[b-n27yu04t5c] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.badge-error[b-n27yu04t5c] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #ffebee;
    color: #c62828;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    cursor: help;
}

/* Import Results */
.import-results[b-n27yu04t5c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}

.result-icon[b-n27yu04t5c] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.result-icon.success[b-n27yu04t5c] {
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
}

.result-icon i[b-n27yu04t5c] {
    font-size: 40px;
    color: white;
}

.result-stats[b-n27yu04t5c] {
    text-align: center;
}

.stat-row[b-n27yu04t5c] {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 0;
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground1);
}

.stat-row strong[b-n27yu04t5c] {
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .erp-page-header[b-n27yu04t5c] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }
    
    .form-row[b-n27yu04t5c] {
        grid-template-columns: 1fr;
    }
    
    .detail-grid[b-n27yu04t5c] {
        grid-template-columns: 1fr;
    }
    
    .modal-container[b-n27yu04t5c] {
        min-width: 90%;
        margin: 0 16px;
    }
    
    .import-summary[b-n27yu04t5c] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/MainLayout/FlightTicket/BookingTeam/BookingDashboard.razor.rz.scp.css */
/* ========================================
   BOOKING TEAM DASHBOARD - V3 BEC DESIGN TOKENS
   Uses --BEC-* design tokens from the design system.
   ======================================== */

/* ========================================
   PAGE LAYOUT & CONTAINER
   ======================================== */
.erp-page-container[b-22pogpxcos] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--BEC-colorNeutralBackground1);
    overflow: hidden;
}


/* ========================================
   PHASE 2: PAGE HEADER (Sticky) - MATCHING REQUEST DETAIL
   ======================================== */
.erp-page-header[b-22pogpxcos] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #FFFFFF;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    box-shadow: none;
    height: 40px;
    min-height: 40px;
}

/* Header Middle for Filters — removed from wireframe v3 */


.filter-item[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-item label[b-22pogpxcos] {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
}

/* Override Syncfusion Dropdown for header */
[b-22pogpxcos] .filter-item .e-dropdownlist.e-input-group {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: 28px !important;
}

[b-22pogpxcos] .filter-item .e-dropdownlist.e-input-group .e-input {
    font-size: 13px !important;
    font-weight: 500 !important;
}

.page-title[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-22pogpxcos] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 16px;
    background: none;
    padding: 0;
    border-radius: 0;
}

.help-icon-btn[b-22pogpxcos] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    margin-left: 8px;
    font-size: 14px;
}

/* Stats Cards (Copied from RequestDetail) */
.stats-container[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: transparent;
    border: none;
    height: auto;
}

.stat-card[b-22pogpxcos] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 0;
}

.stat-card[b-22pogpxcos]::after {
    display: none;
}

/* Remove dashboard separators */

.stat-value[b-22pogpxcos] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-22pogpxcos] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    margin-top: 0;
}

.stat-divider[b-22pogpxcos] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   LIVE INDICATOR - Minimal Style
   ======================================== */
.live-indicator[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-dot[b-22pogpxcos] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #107c10;
    animation: pulse-b-22pogpxcos 2s infinite;
}

.live-text[b-22pogpxcos] {
    font-size: 11px;
    font-weight: 600;
    color: #107c10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes pulse-b-22pogpxcos {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(0.85);
    }
}

/* ========================================
   PHASE 3: ACTION TOOLBAR (Sticky, single row, aligned)
   ======================================== */
[b-22pogpxcos] .e-toolbar.e-control {
    position: sticky !important;
    top: 40px !important;
    z-index: 90 !important;
    background: #FAFAF9 !important;
    border: none !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 12px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

/* Toolbar inner wrapper - keep items on one row, vertically centered */
[b-22pogpxcos] .e-toolbar .e-toolbar-items {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    height: 36px !important;
    flex-wrap: nowrap !important;
}

[b-22pogpxcos] .e-toolbar .e-toolbar-left,
[b-22pogpxcos] .e-toolbar .e-toolbar-center,
[b-22pogpxcos] .e-toolbar .e-toolbar-right {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
}

/* Toolbar Items - compact height */
[b-22pogpxcos] .e-toolbar .e-toolbar-item {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
}

[b-22pogpxcos] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    height: 26px !important;
    min-height: 26px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-22pogpxcos] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-22pogpxcos] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorNeutralBackground2) !important;
    color: var(--BEC-colorBrandBackground) !important;
}

[b-22pogpxcos] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-22pogpxcos] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Primary Button Style in Toolbar */
[b-22pogpxcos] .primary-action-btn .e-tbar-btn {
    background: var(--BEC-colorBrandBackground) !important;
    color: white !important;
}

[b-22pogpxcos] .primary-action-btn .e-tbar-btn .e-icons,
[b-22pogpxcos] .primary-action-btn .e-tbar-btn .e-tbar-btn-text {
    color: white !important;
}

[b-22pogpxcos] .primary-action-btn .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorBrandBackgroundHover) !important;
    color: white !important;
}

[b-22pogpxcos] .primary-action-btn .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-22pogpxcos] .primary-action-btn .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: white !important;
}

/* Separator - vertically centered */
[b-22pogpxcos] .e-toolbar .e-separator {
    background-color: var(--BEC-colorNeutralStroke2) !important;
    height: 20px !important;
    margin: 0 8px !important;
    align-self: center !important;
}

/* Search Input - match toolbar row height so it doesn't override */
[b-22pogpxcos] .e-toolbar .e-input-group,
[b-22pogpxcos] .e-toolbar .e-toolbar-item .e-input-group {
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-22pogpxcos] .e-toolbar .e-input-group .e-input,
[b-22pogpxcos] .e-toolbar .e-toolbar-item .e-input-group .e-input {
    height: 30px !important;
    line-height: 30px !important;
}

/* ========================================
   PHASE 4: GRID CONTENT - COLOR CODED
   ======================================== */
.erp-page-content[b-22pogpxcos] {
    flex: 1;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

[b-22pogpxcos] .e-grid {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: 'Segoe UI', sans-serif !important;
    background: white !important;
}

/* Grid Header - Neutral */
[b-22pogpxcos] .e-grid .e-gridheader {
    background-color: #FAFAF9 !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
}

[b-22pogpxcos] .e-headercell {
    background-color: #FAFAF9 !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none;
    letter-spacing: normal;
    padding: 8px 12px !important;
}

[b-22pogpxcos] .e-grid .e-headercell .e-headertext {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #323130;
}

/* Grid Rows */
[b-22pogpxcos] .e-grid .e-rowcell {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px !important;
    color: #323130 !important;
    padding: 8px 12px !important;
}

/* Zebra striping */
[b-22pogpxcos] .e-grid .e-row:nth-child(even) .e-rowcell {
    background-color: #FAFAFA !important;
}

/* Hover & Selection */
[b-22pogpxcos] .e-grid .e-row:hover .e-rowcell {
    background-color: #F5F5F5 !important;
}

[b-22pogpxcos] .e-grid .e-row.e-selectionbackground .e-rowcell {
    background-color: #EBF3FC !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* ========================================
   CUSTOM TEMPLATE CLASSES
   ======================================== */

/* Text Utilities */
.text-bold[b-22pogpxcos] {
    font-weight: 700;
    color: var(--BEC-colorBrandForeground1);
}

.text-small[b-22pogpxcos] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

/* Traveller Column */
.emp-code-badge[b-22pogpxcos] {
    font-family: monospace;
    font-size: 11px;
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorBrandForeground1);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--BEC-colorBrandStroke2);
}

.department-text[b-22pogpxcos],
.job-title-text[b-22pogpxcos],
.created-by-text[b-22pogpxcos],
.purpose-text[b-22pogpxcos] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Route */
.route-simple[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 13px;
}

.route-simple .city[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground1);
}

.route-simple .arrow[b-22pogpxcos] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 12px;
    font-weight: 600;
}

/* Stacked Route for Multi-Leg */
.route-stacked[b-22pogpxcos] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.route-leg[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1.3;
}

.route-leg .city[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    white-space: nowrap;
}

.route-leg .arrow[b-22pogpxcos] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

/* First leg gets accent color */
.route-stacked .route-leg:first-child .arrow[b-22pogpxcos] {
    color: var(--BEC-colorBrandForeground1);
}

/* Return leg gets different color */
.route-stacked .route-leg:nth-child(2) .arrow[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground4);
}

.route-arrow[b-22pogpxcos] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
}

/* Status Badges - COMPLETE COLOR MAPPING */
.status-badge[b-22pogpxcos] {
    padding: 3px 12px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 11px;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    min-width: 80px;
}

/* DRAFT */
.status-draft[b-22pogpxcos] {
    background-color: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground3);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

/* PENDING / SUBMITTED (Blue/Orange) */
.status-submitted[b-22pogpxcos] {
    background-color: #E6F5FF;
    color: #0078D4;
    border: 1px solid #c7e0f4;
}

.status-pending[b-22pogpxcos] {
    background-color: #FDF6E3;
    color: #9A6603;
    border: 1px solid #FAEBCC;
}

/* Orange-ish for attention */

/* APPROVED / SENT (Green/Teal) */
.status-approved[b-22pogpxcos] {
    background-color: #DFF6DD;
    color: #107C10;
    border: 1px solid #C4EBC3;
}

.status-sent[b-22pogpxcos] {
    background-color: #E0F7FA;
    color: #006064;
    border: 1px solid #B2EBF2;
}

/* QUOTING / RECEIVED (Purple) */
.status-quoted[b-22pogpxcos] {
    background-color: #F3E5F5;
    color: #7B1FA2;
    border: 1px solid #E1BEE7;
}

/* SELECTED / BOOKED / COMPLETED (Strong Blue/Green) */
.status-selected[b-22pogpxcos] {
    background-color: #E3F2FD;
    color: #0D47A1;
    border: 1px solid #BBDEFB;
    font-weight: 700;
}

.status-booked[b-22pogpxcos] {
    background-color: #E8F5E9;
    color: #1B5E20;
    border: 1px solid #C8E6C9;
    font-weight: 700;
}

.status-completed[b-22pogpxcos] {
    background-color: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground3);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    text-decoration: line-through;
}

/* REJECTED / CANCELLED (Red/Gray) */
.status-rejected[b-22pogpxcos] {
    background-color: #FDE7E9;
    color: #A80000;
    border: 1px solid #F8B0B6;
}

.status-cancelled[b-22pogpxcos] {
    background-color: #F3F2F1;
    color: #A19F9D;
    border: 1px solid #EDEBE9;
}

/* Default */
.status-default[b-22pogpxcos] {
    background-color: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground3);
}

/* Text-based column styles */
.location-text[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-text[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
}

/* Domestic / International badges */
.domestic-badge[b-22pogpxcos] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background-color: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

.intl-badge[b-22pogpxcos] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background-color: #EFF6FC;
    color: #0078D4;
}

.travel-dates-text[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
}

.flight-class-text[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
}

.services-text[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
}

.no-services[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground4);
    font-size: 12px;
    font-style: italic;
}

/* Project Column Styles */
.project-name-text[b-22pogpxcos] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 13px;
    font-weight: 500;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-custom-text[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
    font-style: italic;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.no-project[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground4);
    font-size: 12px;
    font-style: italic;
    font-weight: 500;
}

/* Legacy Service Icons (kept for reference) */
.service-badges[b-22pogpxcos] {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.service-icon[b-22pogpxcos] {
    color: var(--BEC-colorNeutralStroke1);
    margin-right: 4px;
    font-size: 13px;
}

.service-icon.active[b-22pogpxcos] {
    color: var(--BEC-colorBrandForeground1);
    scale: 1.1;
}

/* Attachments */
.attachment-link[b-22pogpxcos] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 8px;
    border-radius: 12px;
}

/* ========================================
   UNIFIED DIALOG STYLES — Wireframe v2 tokens
   ======================================== */

/* SfDialog overlay — flat, no blur */
[b-22pogpxcos] .e-dlg-overlay {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* SfDialog container */
[b-22pogpxcos] .e-dialog {
    border: 1px solid #E0E0E0 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
}

/* Dialog header — 36px, flat #FAFAF9 */
[b-22pogpxcos] .e-dialog .e-dlg-header-content {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    background: #FAFAF9 !important;
    border-bottom: 1px solid #E0E0E0 !important;
    display: flex !important;
    align-items: center !important;
}

[b-22pogpxcos] .e-dialog .e-dlg-header {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #242424 !important;
    display: flex !important;
    align-items: center !important;
}

[b-22pogpxcos] .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 3px !important;
    color: #9E9E9E !important;
    box-shadow: none !important;
}

[b-22pogpxcos] .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover {
    background: #F5F5F4 !important;
    color: #242424 !important;
}

/* Dialog body */
[b-22pogpxcos] .e-dialog .e-dlg-content {
    padding: 16px !important;
}

/* Dialog footer — flat #FAFAF9 */
[b-22pogpxcos] .e-dialog .e-footer-content {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    background: #FAFAF9 !important;
    border-top: 1px solid #E0E0E0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

/* Dialog footer buttons — 28px compact */
[b-22pogpxcos] .e-dialog .e-footer-content .e-btn {
    height: 28px !important;
    padding: 0 14px !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
    min-width: auto !important;
    box-shadow: none !important;
}

/* Default button */
[b-22pogpxcos] .e-dialog .e-footer-content .e-btn.e-flat {
    background: #FFFFFF !important;
    color: #616161 !important;
    border: 1px solid #E0E0E0 !important;
}

[b-22pogpxcos] .e-dialog .e-footer-content .e-btn.e-flat:hover {
    background: #F5F5F4 !important;
}

/* Primary button */
[b-22pogpxcos] .e-dialog .e-footer-content .e-btn.e-primary {
    background: #0078D4 !important;
    color: #FFFFFF !important;
    border: none !important;
}

[b-22pogpxcos] .e-dialog .e-footer-content .e-btn.e-primary:hover {
    background: #106EBE !important;
}

/* Danger button */
[b-22pogpxcos] .e-dialog .e-footer-content .e-btn.e-danger {
    background: #A80000 !important;
    color: #FFFFFF !important;
    border: none !important;
}

[b-22pogpxcos] .e-dialog .e-footer-content .e-btn.e-danger:hover {
    background: #8B0000 !important;
}

/* Dialog header title row */
.dialog-header-title[b-22pogpxcos] {
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #242424;
}

.dialog-header-title i[b-22pogpxcos] {
    font-size: 13px;
    color: #0078D4;
}

.dialog-header-title.warning i[b-22pogpxcos] {
    color: #A80000;
}

/* Dialog content inner */
.dialog-content-inner[b-22pogpxcos] {
    padding: 0;
}

.dialog-content-inner p[b-22pogpxcos] {
    font-size: 13px;
    color: #242424;
    margin: 0 0 12px 0;
}

.export-dialog-hint[b-22pogpxcos] {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: #616161;
}

.export-dialog-dates[b-22pogpxcos] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.export-dialog-dates .filter-item[b-22pogpxcos] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.export-dialog-dates .filter-item label[b-22pogpxcos] {
    font-size: 12px;
    font-weight: 600;
    color: #242424;
}

.delete-error-message[b-22pogpxcos] {
    color: #A80000;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #FDE7E9;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
}

.request-summary[b-22pogpxcos] {
    background: #FAFAF9;
    padding: 8px 12px;
    border-radius: 3px;
    margin-bottom: 12px;
    font-size: 13px;
    border: 1px solid #EBEBEB;
}

.vendor-list[b-22pogpxcos] {
    border: 1px solid #E0E0E0;
    border-radius: 3px;
    max-height: 300px;
    overflow-y: auto;
}

.vendor-item[b-22pogpxcos] {
    padding: 8px 10px;
    border-bottom: 1px solid #EBEBEB;
    display: flex;
    align-items: center;
}

.vendor-item:last-child[b-22pogpxcos] {
    border-bottom: none;
}

.vendor-item:hover[b-22pogpxcos] {
    background-color: #F5F5F5;
}

.no-vendors[b-22pogpxcos] {
    padding: 16px;
    text-align: center;
    color: #9E9E9E;
    font-size: 13px;
}

/* Loading & Error */
.loading-container[b-22pogpxcos] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.error-container[b-22pogpxcos] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #d13438;
}

.btn-retry[b-22pogpxcos] {
    margin-top: 10px;
    padding: 6px 16px;
    background: var(--BEC-colorBrandBackground);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Trip Type Visuals */
.trip-cell[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--BEC-colorNeutralForeground1);
}

.flight-class-badge[b-22pogpxcos] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--BEC-colorNeutralBackground2);
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   HELP DRAWER — Wireframe v2 tokens
   Flat, compact, matches grid toolbar aesthetic
   ======================================== */
.drawer-overlay[b-22pogpxcos] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1050;
    display: flex;
    justify-content: flex-end;
    animation: drawerFadeIn-b-22pogpxcos 0.2s ease;
}

.drawer-panel[b-22pogpxcos] {
    background: #FFFFFF;
    width: 460px;
    max-width: 90vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #E0E0E0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
    animation: drawerSlideIn-b-22pogpxcos 0.25s ease;
}

@keyframes drawerFadeIn-b-22pogpxcos {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes drawerSlideIn-b-22pogpxcos {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Drawer header — 40px, flat #FAFAF9, matches toolbar */
.drawer-header[b-22pogpxcos] {
    display: flex;
    align-items: center;
    height: 40px;
    min-height: 40px;
    padding: 0 12px;
    background: #FAFAF9;
    border-bottom: 1px solid #E0E0E0;
    gap: 8px;
    flex-shrink: 0;
}

.drawer-header-icon[b-22pogpxcos] {
    font-size: 14px;
    color: #0078D4;
    flex-shrink: 0;
}

.drawer-header-title[b-22pogpxcos] {
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    flex: 1;
    margin: 0;
    line-height: 1;
}

.btn-close-drawer[b-22pogpxcos] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #9E9E9E;
    font-size: 14px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-close-drawer:hover[b-22pogpxcos] {
    background: #F5F5F4;
    color: #242424;
}

/* Drawer body */
.drawer-body[b-22pogpxcos] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #FFFFFF;
}

/* Drawer footer — flat #FAFAF9 */
.drawer-footer[b-22pogpxcos] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 44px;
    padding: 0 12px;
    border-top: 1px solid #E0E0E0;
    background: #FAFAF9;
    gap: 8px;
    flex-shrink: 0;
}

/* Drawer footer buttons — 28px compact */
.btn-drawer-default[b-22pogpxcos] {
    height: 28px;
    padding: 0 14px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #E0E0E0;
    background: #FFFFFF;
    color: #616161;
    cursor: pointer;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    display: inline-flex;
    align-items: center;
}

.btn-drawer-default:hover[b-22pogpxcos] {
    background: #F5F5F4;
}

.btn-drawer-primary[b-22pogpxcos] {
    height: 28px;
    padding: 0 14px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: #0078D4;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    display: inline-flex;
    align-items: center;
}

.btn-drawer-primary:hover[b-22pogpxcos] {
    background: #106EBE;
}

/* Section headers inside drawer */
.d-section[b-22pogpxcos] {
    margin-bottom: 16px;
}

.d-section-hdr[b-22pogpxcos] {
    font-size: 12px;
    font-weight: 600;
    color: #616161;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding-bottom: 6px;
    border-bottom: 1px solid #EBEBEB;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.d-section-hdr i[b-22pogpxcos] {
    font-size: 12px;
    color: #0078D4;
}

/* Step list inside help drawer */
.step-list[b-22pogpxcos] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-item[b-22pogpxcos] {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #EBEBEB;
}

.step-item:last-child[b-22pogpxcos] {
    border-bottom: none;
}

.step-num[b-22pogpxcos] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0078D4;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.step-text strong[b-22pogpxcos] {
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    display: block;
    margin-bottom: 2px;
}

.step-text span[b-22pogpxcos] {
    font-size: 12px;
    color: #616161;
}

.step-tip[b-22pogpxcos] {
    background: #FDF6E3;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    color: #9A6603;
    margin-top: 4px;
    display: inline-block;
}


/* ========================================
   EXPORT BUTTON LOADING ANIMATION
   ======================================== */
[b-22pogpxcos] .btn-loading .e-icons {
    animation: spin-b-22pogpxcos 1s linear infinite;
}

@keyframes spin-b-22pogpxcos {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   URGENCY ROW HIGHLIGHTING
   Travel departing within 7 days
   ======================================== */
[b-22pogpxcos] .e-grid .e-row.row-urgent .e-rowcell {
    background-color: #FFF4E5;
    border-left-color: #F7630C;
}

[b-22pogpxcos] .e-grid .e-row.row-urgent:hover .e-rowcell {
    background-color: #FFEDCC;
}

/* Date column styling */
.date-text[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
}

/* Remarks column */
.remark-text[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 13px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Transport & Hotel notes columns */
.notes-text[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
}

/* No data placeholder */
.no-data[b-22pogpxcos] {
    color: var(--BEC-colorNeutralForeground4);
    font-size: 12px;
}

/* Passport column */
.passport-text[b-22pogpxcos] {
    font-family: monospace;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    letter-spacing: 0.3px;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Fixed position to escape overflow:hidden
   Styled as a proper centered modal dialog with search,
   checkboxes, Select All, and OK/Cancel buttons.
   ======================================== */
[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
    z-index: 10000 !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    font-size: 14px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-dlg-header .e-dlg-header-content {
    padding: 0 !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
    padding: 16px !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-ccsearch {
    margin-bottom: 8px !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-ccsearch input {
    height: 32px !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-ccsearch .e-input-group {
    height: 32px !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist {
    margin: 0 !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li {
    padding: 8px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-frame {
    border-radius: 2px !important;
    width: 16px !important;
    height: 16px !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkbox-wrapper {
    margin-right: 8px !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-label {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

[b-22pogpxcos] .e-grid .e-dialog.e-ccdlg .e-footer-content button {
    height: 32px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}
/* /Components/Pages/MainLayout/FlightTicket/BookingTeam/FinancialDashboard.razor.rz.scp.css */
/* ==========================================
   Financial Dashboard - Professional Compact
   Microsoft Fluent Design Inspired
   ========================================== */

/* 
   REMOVED :root definitions. 
   Using BEC_Theme.css global variables directly.
*/

.financial-dashboard[b-kmioqz3ody] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
    /* 16px */
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-dashboard-bg);
    /* Use theme gradient/bg */
    font-family: var(--BEC-fontFamilyBase);
    color: var(--BEC-neutralPrimary);
    max-width: 1600px;
    margin: 0 auto;
}

/* HEADER */
.dashboard-header[b-kmioqz3ody] {
    background: var(--BEC-colorNeutralBackground1);
    padding: 12px 20px;
    border-radius: var(--BEC-borderRadiusXLarge);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--BEC-depth-4);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

/* Header Middle for Filters */
.header-middle[b-kmioqz3ody] {
    flex: 1;
    display: flex;
    justify-content: center;
}

.filter-controls[b-kmioqz3ody] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--BEC-colorNeutralBackground1);
    padding: 2px 12px;
    border-radius: var(--BEC-borderRadiusXLarge);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.filter-item[b-kmioqz3ody] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-item label[b-kmioqz3ody] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-neutralSecondary);
    text-transform: uppercase;
}

/* Override Syncfusion Dropdown for header */
[b-kmioqz3ody] .filter-item .e-dropdownlist.e-input-group {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: 24px !important;
}

[b-kmioqz3ody] .filter-item .e-dropdownlist.e-input-group .e-input {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
}

.header-left .page-title[b-kmioqz3ody] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-neutralPrimary);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.header-left .page-title i[b-kmioqz3ody] {
    color: var(--BEC-themePrimary);
}

.header-left .subtitle[b-kmioqz3ody] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-neutralSecondary);
    padding-left: 24px;
    display: none;
}

/* Date Range Override */
[b-kmioqz3ody] .e-input-group {
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    padding: 4px 8px !important;
}

.header-right[b-kmioqz3ody] {
    display: flex;
    gap: var(--BEC-spacingHorizontalS);
    align-items: center;
}

.btn-refresh[b-kmioqz3ody],
.btn-export[b-kmioqz3ody] {
    background: transparent;
    border: 1px solid transparent;
    color: var(--BEC-neutralSecondary);
    padding: 6px 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    cursor: pointer;
    transition: all var(--BEC-durationNormal);
    font-size: var(--BEC-fontSizeBase300);
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-refresh:hover[b-kmioqz3ody],
.btn-export:hover[b-kmioqz3ody] {
    color: var(--BEC-themePrimary);
    background: var(--BEC-themeLighterAlt);
    border-color: var(--BEC-themeLighter);
}

/* UNIFIED GRID SYSTEM */
.grid-5-col[b-kmioqz3ody] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: 0;
}

.info-card[b-kmioqz3ody] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    padding: var(--BEC-spacingHorizontalL);
    box-shadow: var(--BEC-depth-4);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 80px;
    transition: all var(--BEC-durationNormal);
    position: relative;
}

.info-card:hover[b-kmioqz3ody] {
    box-shadow: var(--BEC-depth-8);
    transform: translateY(-1px);
}

.card-top[b-kmioqz3ody] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--BEC-spacingHorizontalS);
}

.card-label[b-kmioqz3ody] {
    font-size: 11px;
    /* Specific compact size */
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-neutralSecondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
}

.card-icon[b-kmioqz3ody] {
    color: var(--BEC-neutralTertiary);
    font-size: 14px;
}

.card-value[b-kmioqz3ody] {
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-neutralPrimary);
}

/* Status Indicators */
.status-dot[b-kmioqz3ody] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
}

/* Using Theme Semantic Colors */
.bg-wait[b-kmioqz3ody] {
    background-color: var(--BEC-warningText);
}

.bg-blue[b-kmioqz3ody] {
    background-color: var(--BEC-themePrimary);
}

.bg-green[b-kmioqz3ody] {
    background-color: var(--BEC-successText);
}

.text-success[b-kmioqz3ody] {
    color: var(--BEC-successText);
}

/* CHARTS ROW */
.charts-row[b-kmioqz3ody] {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: var(--BEC-spacingHorizontalL);
    height: 320px;
    margin-bottom: 0;
}

.chart-panel[b-kmioqz3ody] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXLarge);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    padding: var(--BEC-spacingHorizontalL);
    box-shadow: var(--BEC-depth-4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header[b-kmioqz3ody] {
    font-size: var(--BEC-fontSizeBase200);
    /* 12-13px */
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-neutralPrimary);
    margin-bottom: var(--BEC-spacingHorizontalM);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* .chart-viz removed */

/* DATA GRID PANEL */
.grid-panel[b-kmioqz3ody] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXLarge);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    box-shadow: var(--BEC-depth-4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 400px;
}

/* Customizing Syncfusion Grid */
[b-kmioqz3ody] .e-grid {
    border: none;
    font-family: inherit;
}

[b-kmioqz3ody] .e-grid .e-headercell {
    background-color: var(--BEC-colorNeutralBackground1) !important;
    color: var(--BEC-neutralSecondary) !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
}

[b-kmioqz3ody] .e-grid .e-rowcell {
    color: var(--BEC-neutralPrimary) !important;
    font-size: var(--BEC-fontSizeBase200) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 8px !important;
}

[b-kmioqz3ody] .e-grid .e-row:hover .e-rowcell {
    background-color: var(--BEC-neutralLighterAlt) !important;
}

/* Loading Overlay */
.loading-overlay[b-kmioqz3ody] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    /* Keep rgba for overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Tabs Styling Override */
[b-kmioqz3ody] .e-tab .e-tab-header {
    background: var(--BEC-neutralLighterAlt);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

[b-kmioqz3ody] .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    border: none;
    background: transparent;
}

[b-kmioqz3ody] .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    color: var(--BEC-neutralSecondary);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase200);
}

[b-kmioqz3ody] .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    border-bottom: 2px solid var(--BEC-themePrimary);
    background: var(--BEC-colorNeutralBackground1);
}

[b-kmioqz3ody] .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: var(--BEC-themePrimary);
}

/* ── Chairman Brief dialog ── */
.modal-overlay[b-kmioqz3ody] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn-b-kmioqz3ody 0.2s ease-out;
}

@keyframes fadeIn-b-kmioqz3ody {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-dialog[b-kmioqz3ody] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 460px;
    margin: 20px;
    animation: slideUp-b-kmioqz3ody 0.3s ease-out;
}

@keyframes slideUp-b-kmioqz3ody {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header[b-kmioqz3ody] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h3[b-kmioqz3ody] {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #111827;
}

.modal-header h3 i[b-kmioqz3ody] { color: #dc2626; }

.modal-header .close-btn[b-kmioqz3ody] {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #6b7280;
    border-radius: 6px;
    transition: all 0.2s;
}

.modal-header .close-btn:hover[b-kmioqz3ody] { background: #f3f4f6; color: #111827; }
.modal-header .close-btn:disabled[b-kmioqz3ody] { opacity: 0.5; cursor: not-allowed; }

.modal-body[b-kmioqz3ody] { padding: 20px; }

.modal-body .form-group[b-kmioqz3ody] { margin-bottom: 18px; }

.modal-body .form-group label[b-kmioqz3ody] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.radio-row[b-kmioqz3ody] { display: flex; gap: 16px; }

.radio-opt[b-kmioqz3ody] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

.date-range-row[b-kmioqz3ody] {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.date-range-row > div[b-kmioqz3ody] { flex: 1; }

.mini-label[b-kmioqz3ody] {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 4px;
}

.warning-note[b-kmioqz3ody] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: #eff6ff;
    border-radius: 8px;
    color: #1e40af;
    font-size: 12px;
}

.warning-note i[b-kmioqz3ody] { font-size: 15px; color: #3b82f6; margin-top: 1px; }

.modal-footer[b-kmioqz3ody] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 12px 12px;
}

.modal-footer .btn[b-kmioqz3ody] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.modal-footer .btn-secondary[b-kmioqz3ody] { background: white; border: 1px solid #d1d5db; color: #374151; }
.modal-footer .btn-secondary:hover:not(:disabled)[b-kmioqz3ody] { background: #f3f4f6; }

.modal-footer .btn-primary[b-kmioqz3ody] { background: var(--BEC-black, #111827); color: white; }
.modal-footer .btn-primary:hover:not(:disabled)[b-kmioqz3ody] { background: #dc2626; }

.modal-footer .btn:disabled[b-kmioqz3ody] { opacity: 0.6; cursor: not-allowed; }

.modal-footer .btn-primary .rpt-export-fab__spin[b-kmioqz3ody] {
    width: 13px; height: 13px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff;
    border-radius: 50%; display: inline-block; animation: rpt-spin-b-kmioqz3ody 0.8s linear infinite;
}

@keyframes rpt-spin-b-kmioqz3ody { to { transform: rotate(360deg); } }
/* /Components/Pages/MainLayout/FlightTicket/BookingTeam/RequestDetail.razor.rz.scp.css */
/* ========================================
   REQUEST DETAIL - OPTION 3 (Visual Split)
   Matches BookingDashboard Header/Toolbar behavior 100%
   ======================================== */

/* ============================================================================
   PROJECT DISPLAY SECTION
   ============================================================================ */

.project-display[b-4p8xqcgl44] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorBrandStroke2);
}

.project-icon-wrapper[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorBrandForeground1);
    font-size: 18px;
    flex-shrink: 0;
}

.project-info[b-4p8xqcgl44] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.project-name[b-4p8xqcgl44] {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.4;
}

.project-code[b-4p8xqcgl44] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-family: var(--BEC-fontFamilyMonospace);
}

.project-custom[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    font-style: italic;
}

.project-custom i[b-4p8xqcgl44] {
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   PAGE CONTAINER & STICKY BEHAVIOR
   ======================================== */
.erp-page-container[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: var(--BEC-colorNeutralBackground2);
}

/* STICKY HEADER */
.erp-page-header[b-4p8xqcgl44] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    /* Ensure non-transparent for detail page readability */
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    min-height: 48px;
}

.page-title[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-4p8xqcgl44] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 16px;
}

/* STICKY TOOLBAR (Same logic as Dashboard) */
[b-4p8xqcgl44] .e-toolbar.e-control {
    position: sticky !important;
    top: 60px !important;
    /* Header height + gap */
    z-index: 90 !important;
    background: white !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadowCard) !important;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalXL) !important;
    min-height: 36px !important;
    margin: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalL) !important;
}

/* Toolbar Items */
[b-4p8xqcgl44] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 4px 8px !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-4p8xqcgl44] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-4p8xqcgl44] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-4p8xqcgl44] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-4p8xqcgl44] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Primary Button Style in Toolbar */
[b-4p8xqcgl44] .primary-btn .e-tbar-btn {
    background: var(--BEC-colorBrandBackground) !important;
    color: white !important;
}

[b-4p8xqcgl44] .primary-btn .e-tbar-btn .e-icons,
[b-4p8xqcgl44] .primary-btn .e-tbar-btn .e-tbar-btn-text {
    color: white !important;
}

[b-4p8xqcgl44] .primary-btn .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorBrandBackgroundHover) !important;
    color: white !important;
}

[b-4p8xqcgl44] .primary-btn .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-4p8xqcgl44] .primary-btn .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: white !important;
}

/* Danger Button Style in Toolbar */
[b-4p8xqcgl44] .danger-btn .e-tbar-btn .e-icons,
[b-4p8xqcgl44] .danger-btn .e-tbar-btn .e-tbar-btn-text {
    color: #a4262c !important;
}

[b-4p8xqcgl44] .danger-btn .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-4p8xqcgl44] .danger-btn .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: #b91c1c !important;
}

/* ========================================
   SPLIT LAYOUT CONTENT (two scroll areas only)
   ======================================== */
.erp-page-content.content-split-layout[b-4p8xqcgl44] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    margin-top: 8px;
}

/* LEFT SIDE: CONTEXT PANEL (own scroll) */
.context-panel[b-4p8xqcgl44] {
    width: 320px;
    min-width: 320px;
    flex-shrink: 0;
    min-height: 0;
    background: white;
    border-right: 1px solid var(--BEC-colorNeutralStroke1);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.04);
}

.context-section[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
}

.context-title[b-4p8xqcgl44] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: 600;
    margin-bottom: 8px;
}

.context-val-big[b-4p8xqcgl44] {
    font-size: 16px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.3;
}

.sub-text[b-4p8xqcgl44] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 4px;
}

.context-divider[b-4p8xqcgl44] {
    height: 1px;
    background: var(--BEC-colorNeutralStroke2);
    width: 100%;
}

/* ROUTE TIMELINE */
.route-timeline[b-4p8xqcgl44] {
    position: relative;
    padding-left: 20px;
    margin-top: 8px;
}

.route-timeline[b-4p8xqcgl44]::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--BEC-colorNeutralStroke2);
}

.timeline-point[b-4p8xqcgl44] {
    position: relative;
    padding-bottom: 24px;
}

.timeline-point:last-child[b-4p8xqcgl44] {
    padding-bottom: 0;
}

.timeline-point[b-4p8xqcgl44]::after {
    content: '';
    position: absolute;
    left: -19px;
    top: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground);
    /* Use theme color */
    border: 2px solid white;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground);
}

.timeline-point:last-child[b-4p8xqcgl44]::after {
    background: var(--BEC-colorNeutralForeground1);
    /* End point different color */
    box-shadow: 0 0 0 1px var(--BEC-colorNeutralForeground1);
}

.point-name[b-4p8xqcgl44] {
    font-weight: 500;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.2;
}

.point-date[b-4p8xqcgl44] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 2px;
}

/* PER-LEG NOTES (shown under each leg in itinerary) */
.leg-note[b-4p8xqcgl44] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border-left: 3px solid var(--BEC-colorBrandStroke1);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.4;
    word-break: break-word;
}

.leg-note i[b-4p8xqcgl44] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* REQUIREMENTS BADGES */
.requirements-badges[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.req-badge[b-4p8xqcgl44] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.class-badge[b-4p8xqcgl44] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.visa-badge[b-4p8xqcgl44] {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #bbdefb;
}

.hotel-badge[b-4p8xqcgl44] {
    background: #fff3e0;
    color: #ef6c00;
    border: 1px solid #ffe0b2;
}

.transport-badge[b-4p8xqcgl44] {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.notes-text[b-4p8xqcgl44] {
    font-style: italic;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.5;
    background: var(--BEC-colorNeutralBackground2);
    padding: 12px;
    border-radius: 6px;
}

/* ========================================
   NOTES FROM TRAVELLER (left panel)
   ======================================== */
.notes-from-traveller-section[b-4p8xqcgl44] {
    margin-top: 4px;
}

.traveller-notes-block[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.traveller-note-item[b-4p8xqcgl44] {
    padding: 12px 14px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border-left: 4px solid var(--BEC-colorBrandStroke1);
}

.traveller-note-label[b-4p8xqcgl44] {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 6px;
}

.traveller-note-value[b-4p8xqcgl44] {
    margin: 0;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.5;
    white-space: pre-line;
    word-break: break-word;
}

/* RIGHT SIDE: QUOTE FEED (own scroll, more compact) */
.quote-feed[b-4p8xqcgl44] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 12px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--BEC-colorNeutralBackground2);
}

.feed-header[b-4p8xqcgl44] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.feed-header h3[b-4p8xqcgl44] {
    margin: 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
}

.feed-count[b-4p8xqcgl44] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: 500;
    background: white;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

/* QUOTE CARD - compact */
.quote-card-large[b-4p8xqcgl44] {
    background: white;
    border-radius: 8px;
    padding: 0;
    margin-bottom: 10px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    transition: all 0.2s ease;
    overflow: hidden;
    max-width: 720px;
}

.quote-card-large:hover[b-4p8xqcgl44] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border-color: var(--BEC-colorBrandBackground);
}

.quote-card-large.winner-card[b-4p8xqcgl44] {
    border: 2px solid #107c10;
    background: #f0fdf4;
}

.quote-card-large.winner-card .quote-action-col[b-4p8xqcgl44] {
    background: #e6ffec;
    border-left-color: #107c10;
}

/* Quote Summary Cards (compact list; click View quote for detail) */
.quote-card-summary[b-4p8xqcgl44] {
    position: relative;
    background: white;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    max-width: 720px;
    transition: all 0.2s ease;
}

.quote-card-summary:hover[b-4p8xqcgl44] {
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.quote-card-summary.winner-card[b-4p8xqcgl44] {
    border: 2px solid #107c10;
    background: #f0fdf4;
}

.quote-card-summary.lowest-price-card[b-4p8xqcgl44] {
    border-color: #059669;
}

.quote-summary-main[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.quote-summary-main .vendor-title[b-4p8xqcgl44] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: 6px;
}

.quote-summary-meta[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.quote-summary-meta .options-count[b-4p8xqcgl44] {
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2);
}

.quote-summary-meta .price-summary[b-4p8xqcgl44] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.quote-summary-meta .meta-date[b-4p8xqcgl44] {
    font-size: 11px;
    opacity: 0.9;
}

.btn-view-quote[b-4p8xqcgl44] {
    margin-left: auto;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground1);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-view-quote:hover[b-4p8xqcgl44] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* Single-option quote: standalone card (no View quote, Select winner on card) */
.quote-card-standalone[b-4p8xqcgl44] {
    position: relative;
    background: white;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    max-width: 720px;
    transition: all 0.2s ease;
}

.quote-card-standalone:hover[b-4p8xqcgl44] {
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.quote-card-standalone.winner-card[b-4p8xqcgl44] {
    border: 2px solid #107c10;
    background: #f0fdf4;
}

.quote-card-standalone.lowest-price-card[b-4p8xqcgl44] {
    border-color: #059669;
}

.quote-standalone-main[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.quote-standalone-main .vendor-title[b-4p8xqcgl44] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: 6px;
}

.quote-standalone-meta[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.quote-standalone-meta .price-val[b-4p8xqcgl44] {
    font-weight: 600;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
}

.quote-standalone-meta .meta-date[b-4p8xqcgl44] {
    font-size: 11px;
    opacity: 0.9;
}

.btn-select-winner-standalone[b-4p8xqcgl44] {
    margin-left: auto;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    background: #107c10;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-select-winner-standalone:hover[b-4p8xqcgl44] {
    background: #0d6b0d;
}

.quote-card-standalone .selected-option-label[b-4p8xqcgl44] {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: #107c10;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Quote options: side wizard (matches app wizard pattern) */
.quote-wizard-overlay[b-4p8xqcgl44] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: fadeIn-b-4p8xqcgl44 0.2s ease-out;
}

.quote-wizard-panel[b-4p8xqcgl44] {
    position: absolute;
    top: 0;
    right: 0;
    width: 480px;
    max-width: 95vw;
    height: 100%;
    background: var(--BEC-colorNeutralBackground1, #fff);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    animation: quoteWizardSlideIn-b-4p8xqcgl44 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes quoteWizardSlideIn-b-4p8xqcgl44 {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.quote-wizard-header[b-4p8xqcgl44] {
    padding: 20px 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #e2e8f0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    flex-shrink: 0;
}

.quote-wizard-title h2[b-4p8xqcgl44] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.quote-wizard-title .quote-wizard-sub[b-4p8xqcgl44] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: 500;
}

.quote-wizard-close[b-4p8xqcgl44] {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: var(--BEC-colorNeutralBackground3, #e5e5e5);
    color: var(--BEC-colorNeutralForeground2);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.quote-wizard-close:hover[b-4p8xqcgl44] {
    background: var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground1);
}

.quote-wizard-content[b-4p8xqcgl44] {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    background: #f9fafb;
}

.quote-wizard-card[b-4p8xqcgl44] {
    margin-bottom: 16px;
}

.quote-wizard-card.wiz-card[b-4p8xqcgl44] {
    background: white;
    border: 1px solid var(--BEC-colorNeutralStroke2, #e2e8f0);
    border-radius: 8px;
    padding: 16px;
}

.quote-wizard-card .wiz-label[b-4p8xqcgl44] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 10px;
}

.quote-wizard-contact[b-4p8xqcgl44] {
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.quote-wizard-note[b-4p8xqcgl44] {
    margin: 0;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.4;
}

.quote-options-list[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quote-option-row[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground2, #f5f5f5);
    border-radius: 8px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.option-header-row[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.quote-option-row .option-info[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.quote-option-row.lowest[b-4p8xqcgl44] {
    border-color: #059669;
    background: #ecfdf5;
}

.option-info[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.option-name[b-4p8xqcgl44] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
}

.option-total[b-4p8xqcgl44] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.option-badge[b-4p8xqcgl44] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #059669;
    background: #dcfce7;
    padding: 2px 6px;
    border-radius: 4px;
}

.btn-select-option[b-4p8xqcgl44] {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    background: #107c10;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-select-option:hover[b-4p8xqcgl44] {
    background: #0d6b0d;
}

.selected-option-label[b-4p8xqcgl44] {
    font-size: 12px;
    font-weight: 500;
    color: #107c10;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.quotation-note-to-traveller .quote-wizard-note[b-4p8xqcgl44],
.quote-wizard-content .booking-notes-from-vendor .quote-wizard-note[b-4p8xqcgl44] {
    margin: 0;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    white-space: pre-wrap;
}

.option-meta[b-4p8xqcgl44] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    display: flex;
    align-items: center;
    gap: 6px;
}

.option-note-block[b-4p8xqcgl44] {
    padding: 8px 0 0;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.option-note-label[b-4p8xqcgl44] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--BEC-colorNeutralForeground2);
}

.option-note-text[b-4p8xqcgl44] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    white-space: pre-wrap;
}

.option-legs-block[b-4p8xqcgl44] {
    padding: 8px 0 0;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.option-leg-row[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    padding: 8px 10px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 6px;
    margin-bottom: 6px;
}

.option-leg-row .leg-header[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.option-leg-row .leg-dates[b-4p8xqcgl44] {
    color: var(--BEC-colorNeutralForeground2);
}

.option-leg-row .leg-cost[b-4p8xqcgl44] {
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1);
}

.option-leg-row .leg-cost-breakdown[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2);
}

.option-leg-row .leg-cost-item[b-4p8xqcgl44] {
    white-space: nowrap;
}

.option-leg-row .leg-comment[b-4p8xqcgl44] {
    width: 100%;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2);
    font-style: italic;
    margin-top: 2px;
}

.quote-wizard-content .vendor-company[b-4p8xqcgl44] {
    padding: 10px 14px;
}

.quote-wizard-content .vendor-company-name[b-4p8xqcgl44] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.quote-wizard-content .booking-notes-from-vendor[b-4p8xqcgl44] {
    padding: 12px;
    background: #eff6ff;
    border-radius: 6px;
}

.quote-wizard-content .vendor-attachments-section .vendor-attachments-list[b-4p8xqcgl44],
.quote-wizard-content .booking-documents-section .booking-docs-list[b-4p8xqcgl44] {
    margin-top: 8px;
}

/* Quote Info Column */
.quote-info-col[b-4p8xqcgl44] {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
}

.vendor-title[b-4p8xqcgl44] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: 6px;
}

.vendor-icon[b-4p8xqcgl44] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
}

.quote-specs[b-4p8xqcgl44] {
    display: flex;
    gap: 32px;
}

.spec-item[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.spec-label[b-4p8xqcgl44] {
    font-size: 10px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
}

.spec-val[b-4p8xqcgl44] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
}

.quote-meta[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Quote Action Column */
.quote-action-col[b-4p8xqcgl44] {
    width: 120px;
    min-width: 120px;
    border-left: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    background: #faf9f8;
}

.price-display[b-4p8xqcgl44] {
    margin-bottom: 6px;
    text-align: right;
}

.price-val[b-4p8xqcgl44] {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1);
    display: block;
}

.price-val.text-muted[b-4p8xqcgl44] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 18px;
}

.action-btn[b-4p8xqcgl44] {
    width: 100%;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.action-btn.select[b-4p8xqcgl44] {
    background: white;
    border-color: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorBrandBackground);
}

.action-btn.select:hover[b-4p8xqcgl44] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.action-btn.selected[b-4p8xqcgl44] {
    background: #107c10;
    color: white;
    border-color: #107c10;
    cursor: default;
}

.action-btn.disabled[b-4p8xqcgl44] {
    background: transparent;
    color: var(--BEC-colorNeutralForeground3);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    cursor: not-allowed;
}


/* Status Pills */
.status-pill[b-4p8xqcgl44] {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.quote-status-quoted[b-4p8xqcgl44] {
    background: #e1dfdd;
    color: #242424;
}

.quote-status-selected[b-4p8xqcgl44] {
    background: #107c10;
    color: white;
}

.quote-status-pending[b-4p8xqcgl44] {
    background: white;
    border: 1px solid #ddd;
    color: #888;
}

.meta-date[b-4p8xqcgl44] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

/* NO QUOTES STATE */
.no-quotes-state[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--BEC-colorNeutralForeground3);
    background: white;
    border-radius: 12px;
    border: 1px dashed var(--BEC-colorNeutralStroke2);
}

.empty-icon[b-4p8xqcgl44] {
    font-size: 48px;
    color: var(--BEC-colorNeutralStroke2);
    margin-bottom: 16px;
}

.no-quotes-state h3[b-4p8xqcgl44] {
    margin: 0 0 8px 0;
    color: var(--BEC-colorNeutralForeground1);
}

/* HEADER STATS (Copied from Dashboard) */
.stats-container[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-card[b-4p8xqcgl44] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-4p8xqcgl44] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-4p8xqcgl44] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-4p8xqcgl44] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* Status colors for header stats */
.stat-value.status-approved[b-4p8xqcgl44] {
    color: #107c10;
}

.stat-value.status-rejected[b-4p8xqcgl44] {
    color: #a4262c;
}

.stat-value.status-pending[b-4p8xqcgl44] {
    color: #f58400;
}

/* ========================================
   CREATED BY (on-behalf booking indicator)
   ======================================== */
.created-by-info[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 8px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 4px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
}

.created-by-info i[b-4p8xqcgl44] {
    font-size: 11px;
    color: var(--BEC-colorBrandForeground1);
}

.created-by-label[b-4p8xqcgl44] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
}

.created-by-name[b-4p8xqcgl44] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   TRAVELLER CONTACT STYLES
   ======================================== */
.traveller-contact[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.contact-item[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
}

.contact-item i[b-4p8xqcgl44] {
    width: 16px;
    color: var(--BEC-colorNeutralForeground3);
}

.contact-item a[b-4p8xqcgl44] {
    color: var(--BEC-colorBrandForeground1);
    text-decoration: none;
}

.contact-item a:hover[b-4p8xqcgl44] {
    text-decoration: underline;
}

/* Traveller document numbers (passport, iqama) */
.traveller-docs-row[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.traveller-docs-row .doc-item[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 6px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.traveller-docs-row .doc-item i[b-4p8xqcgl44] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.traveller-docs-row .doc-label[b-4p8xqcgl44] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: 500;
}

.traveller-docs-row .doc-value[b-4p8xqcgl44] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   TRAVELLER DETAILS GRID
   ======================================== */
.traveller-details-grid[b-4p8xqcgl44] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.traveller-details-grid .detail-item[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.traveller-details-grid .detail-label[b-4p8xqcgl44] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: 500;
}

.traveller-details-grid .detail-value[b-4p8xqcgl44] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.traveller-details-grid .detail-value.emp-code[b-4p8xqcgl44] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground3);
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
    width: fit-content;
}

.traveller-details-grid .detail-value i[b-4p8xqcgl44] {
    color: var(--BEC-colorPaletteBlueForeground2);
    font-size: 10px;
    margin-right: 4px;
}

/* ========================================
   INFO GRID STYLES
   ======================================== */
.info-grid[b-4p8xqcgl44] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.info-item[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label[b-4p8xqcgl44] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: 600;
}

.info-value[b-4p8xqcgl44] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-value i[b-4p8xqcgl44] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 12px;
}

/* PURPOSE OF TRAVEL (shown in TRIP DETAILS section) */
.purpose-of-travel[b-4p8xqcgl44] {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border-left: 4px solid var(--BEC-colorPaletteDarkOrangeBackground3);
}

.purpose-of-travel .info-label[b-4p8xqcgl44] {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 4px;
}

.purpose-text[b-4p8xqcgl44] {
    margin: 0;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.5;
    white-space: pre-line;
    word-break: break-word;
}

/* ========================================
   ATTACHMENTS STYLES
   ======================================== */
.attachments-list[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attachment-item[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 8px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    transition: all 0.2s ease;
}

.attachment-item:hover[b-4p8xqcgl44] {
    background: var(--BEC-colorNeutralBackground3);
    border-color: var(--BEC-colorNeutralStroke1);
}

.file-icon[b-4p8xqcgl44] {
    font-size: 20px;
    width: 24px;
    text-align: center;
}

.file-icon.fa-file-pdf[b-4p8xqcgl44] {
    color: #e53935;
}

.file-icon.fa-file-word[b-4p8xqcgl44] {
    color: #1976d2;
}

.file-icon.fa-file-excel[b-4p8xqcgl44] {
    color: #43a047;
}

.file-icon.fa-file-image[b-4p8xqcgl44] {
    color: #fb8c00;
}

.file-icon.fa-file-zipper[b-4p8xqcgl44] {
    color: #8e24aa;
}

.file-icon.fa-file[b-4p8xqcgl44] {
    color: var(--BEC-colorNeutralForeground3);
}

.attachment-info[b-4p8xqcgl44] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.attachment-name[b-4p8xqcgl44] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-meta[b-4p8xqcgl44] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

.attachment-actions[b-4p8xqcgl44] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.attachment-action[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.view-action[b-4p8xqcgl44] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground3);
}

.view-action:hover[b-4p8xqcgl44] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.download-action[b-4p8xqcgl44] {
    color: #059669;
    background: #ecfdf5;
    border: none;
    cursor: pointer;
}

.download-action:hover[b-4p8xqcgl44] {
    background: #d1fae5;
    color: #047857;
}

button.attachment-action[b-4p8xqcgl44] {
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/* ========================================
   APPROVAL TIMELINE STYLES
   ======================================== */
.approval-timeline[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-left: 4px;
}

.approval-step[b-4p8xqcgl44] {
    display: flex;
    gap: 12px;
    position: relative;
    padding-bottom: 20px;
}

.approval-step:last-child[b-4p8xqcgl44] {
    padding-bottom: 0;
}

/* Vertical line connecting steps */
.approval-step:not(:last-child)[b-4p8xqcgl44]::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: var(--BEC-colorNeutralStroke2);
}

.step-icon[b-4p8xqcgl44] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    z-index: 1;
    background: white;
}

.approval-approved .step-icon[b-4p8xqcgl44] {
    background: #dcfce7;
    color: #15803d;
    border: 2px solid #15803d;
}

.approval-rejected .step-icon[b-4p8xqcgl44] {
    background: #fee2e2;
    color: #b91c1c;
    border: 2px solid #b91c1c;
}

.approval-pending .step-icon[b-4p8xqcgl44] {
    background: #fef3c7;
    color: #b45309;
    border: 2px solid #b45309;
}

.approval-skipped .step-icon[b-4p8xqcgl44] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
    border: 2px solid var(--BEC-colorNeutralStroke2);
}

.approval-default .step-icon[b-4p8xqcgl44] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground3);
    border: 2px solid var(--BEC-colorNeutralStroke2);
}

.step-content[b-4p8xqcgl44] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 2px;
}

.step-header[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.step-name[b-4p8xqcgl44] {
    font-weight: 600;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
}

.step-action[b-4p8xqcgl44] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
}

.approval-approved .step-action[b-4p8xqcgl44] {
    background: #dcfce7;
    color: #15803d;
}

.approval-rejected .step-action[b-4p8xqcgl44] {
    background: #fee2e2;
    color: #b91c1c;
}

.approval-pending .step-action[b-4p8xqcgl44] {
    background: #fef3c7;
    color: #b45309;
}

.approval-skipped .step-action[b-4p8xqcgl44] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.approval-default .step-action[b-4p8xqcgl44] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground3);
}

.step-details[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.step-approver[b-4p8xqcgl44],
.step-date[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.step-approver i[b-4p8xqcgl44],
.step-date i[b-4p8xqcgl44] {
    font-size: 10px;
}

.step-comments[b-4p8xqcgl44] {
    font-size: 12px;
    font-style: italic;
    color: var(--BEC-colorNeutralForeground2);
    background: var(--BEC-colorNeutralBackground2);
    padding: 8px 10px;
    border-radius: 6px;
    margin-top: 4px;
}

.step-comments i[b-4p8xqcgl44] {
    color: var(--BEC-colorNeutralForeground3);
    margin-right: 4px;
}

/* ========================================
   ADDITIONAL QUOTE STATUS STYLES
   ======================================== */
.quote-status-assigned[b-4p8xqcgl44] {
    background: #f3f4f6;
    color: #4b5563;
}

.quote-status-sent[b-4p8xqcgl44] {
    background: #e0f2fe;
    color: #0369a1;
}

/* ========================================
   LOADING & ERROR STATES
   ======================================== */
.loading-container[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 300px;
}

.error-container[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 16px;
    padding: 60px;
    text-align: center;
}

.error-container i[b-4p8xqcgl44] {
    font-size: 48px;
    color: #f59e0b;
}

.btn-retry[b-4p8xqcgl44] {
    padding: 10px 20px;
    background: var(--BEC-colorBrandBackground);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.btn-retry:hover[b-4p8xqcgl44] {
    background: var(--BEC-colorBrandBackgroundHover);
}

/* ========================================
   EMPTY STATE STYLES
   ======================================== */
.empty-approval-state[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 8px;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
}

.empty-approval-state i[b-4p8xqcgl44] {
    font-size: 16px;
}

/* ========================================
   MARKETPLACE MODEL - LOWEST PRICE & WINNER STYLES
   ======================================== */

/* Lowest Price Card Styling */
.quote-card-large.lowest-price-card[b-4p8xqcgl44] {
    border: 2px solid #059669;
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
    position: relative;
}

.quote-card-large.lowest-price-card .quote-action-col[b-4p8xqcgl44] {
    background: #ecfdf5;
    border-left-color: #059669;
}

.quote-card-large.lowest-price-card:hover[b-4p8xqcgl44] {
    border-color: #047857;
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.15);
}

/* Price Badges */
.lowest-price-badge[b-4p8xqcgl44],
.winner-badge[b-4p8xqcgl44] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 16px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 0 10px 0 10px;
}

.lowest-price-badge[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
}

.lowest-price-badge i[b-4p8xqcgl44] {
    margin-right: 4px;
    font-size: 10px;
}

.winner-badge[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.winner-badge i[b-4p8xqcgl44] {
    margin-right: 4px;
    font-size: 10px;
}

/* Price Display Lowest Price Styling */
.price-display.lowest-price .price-val[b-4p8xqcgl44] {
    color: #059669;
    font-size: 20px;
}

.price-label[b-4p8xqcgl44] {
    display: block;
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Select Recommended Button */
.action-btn.select-recommended[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
    border-color: #059669;
}

.action-btn.select-recommended:hover[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    color: white;
}

.action-btn.select-recommended i[b-4p8xqcgl44] {
    margin-right: 4px;
    animation: star-pulse-b-4p8xqcgl44 1.5s ease-in-out infinite;
}

@keyframes star-pulse-b-4p8xqcgl44 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Vendor Contact in Quote Card */
.vendor-contact[b-4p8xqcgl44] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.vendor-contact .contact-item[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vendor-contact .contact-item i[b-4p8xqcgl44] {
    width: 12px;
    font-size: 10px;
}

/* Cost Breakdown Grid */
.quote-cost-breakdown[b-4p8xqcgl44] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 6px;
    padding: 8px 10px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 6px;
}

.cost-item[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cost-label[b-4p8xqcgl44] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cost-label i[b-4p8xqcgl44] {
    font-size: 10px;
}

.cost-value[b-4p8xqcgl44] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

/* Quote Status Pills - Additional */
.quote-status-lowest[b-4p8xqcgl44] {
    background: #dcfce7;
    color: #059669;
}

.quote-status-winner[b-4p8xqcgl44] {
    background: #fef3c7;
    color: #d97706;
}

.quote-status-default[b-4p8xqcgl44] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   SELECT WINNER MODAL
   ======================================== */

.modal-overlay[b-4p8xqcgl44] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-4p8xqcgl44 0.2s ease-out;
}

@keyframes fadeIn-b-4p8xqcgl44 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-dialog[b-4p8xqcgl44] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 480px;
    margin: 20px;
    animation: slideUp-b-4p8xqcgl44 0.3s ease-out;
}

@keyframes slideUp-b-4p8xqcgl44 {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h3[b-4p8xqcgl44] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #111827;
}

.modal-header h3 i[b-4p8xqcgl44] {
    color: #f59e0b;
}

.modal-header .close-btn[b-4p8xqcgl44] {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #6b7280;
    border-radius: 6px;
    transition: all 0.2s;
}

.modal-header .close-btn:hover[b-4p8xqcgl44] {
    background: #f3f4f6;
    color: #111827;
}

.modal-body[b-4p8xqcgl44] {
    padding: 20px;
}

.winner-preview[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #10b981;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}

.winner-preview .vendor-info[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.winner-preview .vendor-info i[b-4p8xqcgl44] {
    font-size: 20px;
    color: #059669;
}

.winner-preview .vendor-name[b-4p8xqcgl44] {
    font-size: 16px;
    font-weight: 600;
    color: #065f46;
}

.winner-preview .quote-amount[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.winner-preview .quote-amount .label[b-4p8xqcgl44] {
    font-size: 13px;
    color: #047857;
}

.winner-preview .quote-amount .amount[b-4p8xqcgl44] {
    font-size: 18px;
    font-weight: 600;
    color: #065f46;
}

.winner-preview .lowest-badge[b-4p8xqcgl44] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #10b981;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.modal-body .form-group[b-4p8xqcgl44] {
    margin-bottom: 16px;
}

.modal-body .form-group label[b-4p8xqcgl44] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.modal-body .form-group textarea[b-4p8xqcgl44] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    resize: none;
    transition: border-color 0.2s;
}

.modal-body .form-group textarea:focus[b-4p8xqcgl44] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.warning-note[b-4p8xqcgl44] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: #eff6ff;
    border-radius: 8px;
    color: #1e40af;
    font-size: 13px;
}

.warning-note i[b-4p8xqcgl44] {
    font-size: 16px;
    color: #3b82f6;
    margin-top: 1px;
}

.modal-footer[b-4p8xqcgl44] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 12px 12px;
}

.modal-footer .btn[b-4p8xqcgl44] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.modal-footer .btn-secondary[b-4p8xqcgl44] {
    background: white;
    border: 1px solid #d1d5db;
    color: #374151;
}

.modal-footer .btn-secondary:hover:not(:disabled)[b-4p8xqcgl44] {
    background: #f3f4f6;
}

.modal-footer .btn-primary[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.modal-footer .btn-primary:hover:not(:disabled)[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.modal-footer .btn:disabled[b-4p8xqcgl44] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Winner Card Highlight */
.quote-card.winner-card[b-4p8xqcgl44] {
    border: 2px solid #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, white 100%);
}

.quote-card.winner-card[b-4p8xqcgl44]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 8px 8px 0 0;
}

/* Change Winner Confirmation Dialog */
.change-winner-dialog[b-4p8xqcgl44] {
    max-width: 500px;
}

.warning-header[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.warning-header h3[b-4p8xqcgl44] {
    color: #92400e;
}

.warning-header h3 i[b-4p8xqcgl44] {
    color: #f59e0b;
}

.warning-content p[b-4p8xqcgl44] {
    margin: 0 0 12px;
    color: #374151;
}

.current-winner-info[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #10b981;
    border-radius: 8px;
    margin-bottom: 16px;
}

.current-winner-info i[b-4p8xqcgl44] {
    color: #f59e0b;
    font-size: 20px;
}

.current-winner-info span[b-4p8xqcgl44] {
    font-size: 16px;
    font-weight: 600;
    color: #065f46;
}

.change-notice[b-4p8xqcgl44] {
    color: #1f2937;
}

.change-notice strong[b-4p8xqcgl44] {
    color: #3b82f6;
}

.modal-footer .btn-warning[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.modal-footer .btn-warning:hover:not(:disabled)[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* ========================================
   VENDOR ATTACHMENTS IN QUOTE CARDS
   ======================================== */
.vendor-attachments-section[b-4p8xqcgl44] {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--BEC-colorNeutralStroke2);
}

.attachments-header[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.attachments-header i[b-4p8xqcgl44] {
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

.vendor-attachments-list[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vendor-attachment-item[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vendor-attachment-item:hover[b-4p8xqcgl44] {
    background: var(--BEC-colorBrandBackground2);
}

.vendor-attachment-item i:first-child[b-4p8xqcgl44] {
    font-size: 14px;
    color: var(--BEC-colorBrandForeground1);
    width: 18px;
    text-align: center;
}

.vendor-attachment-item .att-name[b-4p8xqcgl44] {
    flex: 1;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.vendor-attachment-item .att-size[b-4p8xqcgl44] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.vendor-attachment-item .download-icon[b-4p8xqcgl44] {
    font-size: 12px;
    color: #059669;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.vendor-attachment-item:hover .download-icon[b-4p8xqcgl44] {
    opacity: 1;
}

/* ========================================
   RE-QUOTE DIALOG STYLES
   ======================================== */
.requote-dialog[b-4p8xqcgl44] {
    max-width: 500px;
}

.requote-info[b-4p8xqcgl44] {
    margin-bottom: 16px;
}

.requote-info .info-box[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #93c5fd;
    border-radius: 10px;
}

.requote-info .info-box i[b-4p8xqcgl44] {
    font-size: 24px;
    color: #3b82f6;
}

.requote-info .info-box span[b-4p8xqcgl44] {
    color: #1e40af;
    font-size: 14px;
}

.info-note[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
    border-color: #86efac !important;
}

.info-note i[b-4p8xqcgl44] {
    color: #16a34a !important;
}

.info-note span[b-4p8xqcgl44] {
    color: #166534 !important;
}

/* ========================================
   BOOKING DOCUMENTS SECTION STYLES
   ======================================== */
.booking-documents-section[b-4p8xqcgl44] {
    margin-top: 8px;
    padding: 8px 10px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.booking-documents-section.pending[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #fef3c7, #fef9c3);
    border-color: #fcd34d;
}

.booking-docs-header[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: 600;
    color: #1e293b;
    font-size: 12px;
}

.booking-docs-header i[b-4p8xqcgl44] {
    color: #10b981;
    font-size: 16px;
}

.booking-documents-section.pending .booking-docs-header i[b-4p8xqcgl44] {
    color: #f59e0b;
}

.booking-ref-badge[b-4p8xqcgl44] {
    margin-left: auto;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #93c5fd;
}

.booking-docs-notice[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 12px;
}

.booking-docs-notice.success[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #166534;
    border: 1px solid #86efac;
}

.booking-docs-notice.success i[b-4p8xqcgl44] {
    color: #16a34a;
}

.booking-docs-notice.pending[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #fef9c3, #fef08a);
    color: #854d0e;
    border: 1px solid #fcd34d;
}

.booking-docs-notice.pending i[b-4p8xqcgl44] {
    color: #f59e0b;
}

.booking-docs-list[b-4p8xqcgl44] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.booking-doc-item[b-4p8xqcgl44] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.booking-doc-item:hover[b-4p8xqcgl44] {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* Document type color variations */
.booking-doc-item.eticket[b-4p8xqcgl44] {
    border-left: 4px solid #3b82f6;
}

.booking-doc-item.visa[b-4p8xqcgl44] {
    border-left: 4px solid #8b5cf6;
}

.booking-doc-item.hotel[b-4p8xqcgl44] {
    border-left: 4px solid #f97316;
}

.booking-doc-item.transport[b-4p8xqcgl44] {
    border-left: 4px solid #14b8a6;
}

.booking-doc-item.insurance[b-4p8xqcgl44] {
    border-left: 4px solid #22c55e;
}

.booking-doc-item.other[b-4p8xqcgl44] {
    border-left: 4px solid #6b7280;
}

.booking-doc-icon[b-4p8xqcgl44] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.booking-doc-item.eticket .booking-doc-icon[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #2563eb;
}

.booking-doc-item.visa .booking-doc-icon[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    color: #7c3aed;
}

.booking-doc-item.hotel .booking-doc-icon[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #ffedd5, #fed7aa);
    color: #ea580c;
}

.booking-doc-item.transport .booking-doc-icon[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #ccfbf1, #99f6e4);
    color: #0d9488;
}

.booking-doc-item.insurance .booking-doc-icon[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #16a34a;
}

.booking-doc-item.other .booking-doc-icon[b-4p8xqcgl44] {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #4b5563;
}

.booking-doc-info[b-4p8xqcgl44] {
    flex: 1;
    min-width: 0;
}

.booking-doc-type[b-4p8xqcgl44] {
    font-weight: 600;
    color: #1e293b;
    font-size: 12px;
    margin-bottom: 1px;
}

.booking-doc-name[b-4p8xqcgl44] {
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking-doc-meta[b-4p8xqcgl44] {
    color: #94a3b8;
    font-size: 11px;
    margin-top: 2px;
}

.booking-download-btn[b-4p8xqcgl44] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.booking-download-btn:hover[b-4p8xqcgl44] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.booking-notes-from-vendor[b-4p8xqcgl44] {
    margin-top: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 8px;
    border: 1px solid #93c5fd;
}

.booking-notes-from-vendor strong[b-4p8xqcgl44] {
    display: block;
    font-size: 11px;
    color: #1e40af;
    margin-bottom: 4px;
}

.booking-notes-from-vendor p[b-4p8xqcgl44] {
    margin: 0;
    font-size: 12px;
    color: #374151;
    line-height: 1.45;
}

/* ========================================
   DATE NEGOTIATION SECTION
   ======================================== */
.negotiation-summary[b-4p8xqcgl44] {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.negotiation-summary .summary-item[b-4p8xqcgl44] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
}

.negotiation-summary .summary-item strong[b-4p8xqcgl44] {
    color: var(--BEC-colorNeutralForeground1);
}

.negotiation-summary .summary-item.confirmed[b-4p8xqcgl44] {
    color: #059669;
    font-weight: 500;
}

.negotiation-summary .summary-item.confirmed i[b-4p8xqcgl44] {
    margin-right: 4px;
}
/* /Components/Pages/MainLayout/FlightTicket/BulkBooking/BulkBatchCreate.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   BulkBatchCreate — Drawer Layout (560px)
   Scoped CSS · BEC Design Tokens · 8px grid
   ═══════════════════════════════════════════════════════════════ */

/* ── Drawer Overlay & Panel ─────────────────────────────────── */
.drawer-overlay[b-6orpo5klnb] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1050;
    display: flex;
    justify-content: flex-end;
}

.drawer-panel[b-6orpo5klnb] {
    width: 720px;
    max-width: 92vw;
    height: 100vh;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #E0E0E0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
    animation: drawerSlideIn-b-6orpo5klnb 0.25s ease-out;
}

@keyframes drawerSlideIn-b-6orpo5klnb {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ── Drawer Header (40px) ───────────────────────────────────── */
.drawer-header[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    min-height: 40px;
    padding: 0 16px;
    background: #FAFAF9;
    border-bottom: 1px solid #E0E0E0;
}

.drawer-header-icon[b-6orpo5klnb] {
    color: #0078D4;
    font-size: 14px;
}

.drawer-header-title[b-6orpo5klnb] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-close-drawer[b-6orpo5klnb] {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #616161;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
    flex-shrink: 0;
}

.btn-close-drawer:hover[b-6orpo5klnb] {
    background: #E0E0E0;
    color: #242424;
}

/* ── Drawer Body (scrollable) ───────────────────────────────── */
.drawer-body[b-6orpo5klnb] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* ── Drawer Footer (44px) ───────────────────────────────────── */
.drawer-footer[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: 44px;
    min-height: 44px;
    padding: 0 16px;
    background: #FAFAF9;
    border-top: 1px solid #E0E0E0;
}

/* ── Form Sections ──────────────────────────────────────────── */
.form-section[b-6orpo5klnb] {
    margin-bottom: 24px;
}

.form-section h3[b-6orpo5klnb] {
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #F0F0F0;
    padding-bottom: 8px;
}

.form-section h3 i[b-6orpo5klnb] {
    color: #0078D4;
    font-size: 12px;
}

.form-row[b-6orpo5klnb] {
    margin-bottom: 12px;
}

.form-row.split[b-6orpo5klnb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-group label[b-6orpo5klnb] {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #616161;
    margin-bottom: 4px;
}

.form-group.full[b-6orpo5klnb] {
    grid-column: 1 / -1;
}

.form-hint[b-6orpo5klnb] {
    font-size: 11px;
    color: #9E9E9E;
    margin: 0 0 8px 0;
}

.required[b-6orpo5klnb] {
    color: #D13438;
}

/* ── Travel Date Type Selector ──────────────────────────────── */
.date-type-selector[b-6orpo5klnb] {
    display: flex;
    gap: 16px;
    background: #FAFAF9;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
}

.radio-item[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #616161;
}

.radio-item input[type="radio"][b-6orpo5klnb] {
    width: 14px;
    height: 14px;
    accent-color: #0078D4;
}

/* ── Candidates Template Hint ───────────────────────────────── */
.candidates-template-hint[b-6orpo5klnb] {
    display: flex;
    gap: 10px;
    padding: 12px;
    margin-bottom: 12px;
    background: #EFF6FF;
    border: 1px solid #93C5FD;
    border-radius: 6px;
}

.candidates-template-hint-icon[b-6orpo5klnb] {
    flex-shrink: 0;
    color: #2563EB;
    font-size: 16px;
    margin-top: 2px;
}

.candidates-template-hint-body[b-6orpo5klnb] {
    flex: 1;
}

.candidates-template-hint-title[b-6orpo5klnb] {
    font-size: 12px;
    font-weight: 600;
    color: #1E40AF;
    margin: 0 0 4px 0;
}

.candidates-template-hint-text[b-6orpo5klnb] {
    font-size: 11px;
    color: #616161;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.candidates-template-hint-text strong[b-6orpo5klnb] {
    color: #242424;
}

.candidates-template-hint-steps[b-6orpo5klnb] {
    margin: 0 0 8px 0;
    padding-left: 16px;
    font-size: 11px;
    color: #616161;
    line-height: 1.6;
}

.candidates-template-download[b-6orpo5klnb] {
    margin-top: 4px;
}

.btn-download-template[b-6orpo5klnb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #0078D4;
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.btn-download-template:hover:not(:disabled)[b-6orpo5klnb] {
    background: #106EBE;
}

.btn-download-template:disabled[b-6orpo5klnb] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-download-template .spinner-small[b-6orpo5klnb] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: spin-b-6orpo5klnb 0.8s linear infinite;
}

@keyframes spin-b-6orpo5klnb {
    to { transform: rotate(360deg); }
}

/* ── File Attach & Attachments ──────────────────────────────── */
/* ── MS Fluent Upload Dropzone ──────────────────────────────── */
.upload-dropzone[b-6orpo5klnb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 20px;
    border: 2px dashed #D1D1D1;
    border-radius: 6px;
    background: #FAFAF9;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.upload-dropzone:hover[b-6orpo5klnb] {
    border-color: #0078D4;
    background: #F0F6FF;
}

.upload-dropzone-icon[b-6orpo5klnb] {
    font-size: 24px;
    color: #0078D4;
    margin-bottom: 4px;
}

.upload-dropzone-text[b-6orpo5klnb] {
    font-size: 13px;
    font-weight: 500;
    color: #242424;
}

.upload-dropzone-hint[b-6orpo5klnb] {
    font-size: 11px;
    color: #9E9E9E;
}

.upload-file-attached[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #F0FFF0;
    border: 1px solid #107C10;
    border-radius: 6px;
}

.upload-file-icon[b-6orpo5klnb] {
    color: #107C10;
    font-size: 16px;
}

.upload-file-name[b-6orpo5klnb] {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
    color: #242424;
}

.upload-file-remove[b-6orpo5klnb] {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #9E9E9E;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
}

.upload-file-remove:hover[b-6orpo5klnb] {
    background: #FFE0E0;
    color: #D13438;
}

/* ── Attachment Info Box (matches Excel upload info box) ───── */
.attachment-info-box[b-6orpo5klnb] {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: #F0F6FF;
    border: 1px solid #C7DFFB;
    border-left: 4px solid #0078D4;
    border-radius: 6px;
    margin-bottom: 12px;
}

.attachment-info-icon[b-6orpo5klnb] {
    color: #0078D4;
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.attachment-info-content[b-6orpo5klnb] {
    flex: 1;
}

.attachment-info-title[b-6orpo5klnb] {
    font-size: 13px;
    font-weight: 600;
    color: #0078D4;
    margin: 0 0 6px 0;
}

.attachment-info-text[b-6orpo5klnb] {
    font-size: 12px;
    color: #616161;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.attachment-info-list[b-6orpo5klnb] {
    font-size: 12px;
    color: #616161;
    margin: 0;
    padding-left: 18px;
    line-height: 1.6;
}

/* ── Attachment Type Selector ───────────────────────────────── */
.attachment-type-row[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.attachment-type-label[b-6orpo5klnb] {
    font-size: 12px;
    font-weight: 600;
    color: #323130;
}

.attachment-type-select[b-6orpo5klnb] {
    padding: 5px 10px;
    border: 1px solid #D1D1D1;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Segoe UI', sans-serif;
    color: #323130;
    background: #FFFFFF;
    min-width: 120px;
}

.attachment-type-select:focus[b-6orpo5klnb] {
    outline: none;
    border-color: #0078D4;
}

/* ── Attachment Dropzone (reuses .upload-dropzone base) ───── */
.attachment-dropzone[b-6orpo5klnb] {
    margin-bottom: 10px;
}

/* ── Pending Attachments Card ────────────────────────────────── */
.pending-attachments-card[b-6orpo5klnb] {
    margin-top: 10px;
    border: 1px solid #E1E1E1;
    border-radius: 6px;
    background: #FAFAF9;
    overflow: hidden;
}

.pending-attachments-header[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #F3F2F1;
    font-size: 12px;
    font-weight: 600;
    color: #323130;
    border-bottom: 1px solid #E1E1E1;
}

.pending-attachments-list[b-6orpo5klnb] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pending-attachments-list li[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid #F0F0F0;
    font-size: 12px;
}

.pending-attachments-list li:last-child[b-6orpo5klnb] {
    border-bottom: none;
}

.pending-file-name[b-6orpo5klnb] {
    flex: 1;
    color: #323130;
    font-weight: 500;
}

.doc-type-badge[b-6orpo5klnb] {
    font-size: 10px;
    padding: 2px 8px;
    background: #E0E7FF;
    color: #4338CA;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Processing Overlay ─────────────────────────────────────── */
.processing-overlay[b-6orpo5klnb] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
}

.processing-content[b-6orpo5klnb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    padding: 24px 32px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ════════════════════════════════════════════════════════════ */
/*  Edit-Mode: Read-Only Route Display                         */
/* ════════════════════════════════════════════════════════════ */

.route-readonly[b-6orpo5klnb] {
    background: #F9F9FB;
    border: 1px solid #E1E1E1;
    border-radius: 8px;
    padding: 14px 18px;
}

.route-display[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #323130;
}

.route-display i[b-6orpo5klnb] {
    color: #0078D4;
}

.route-label[b-6orpo5klnb] {
    font-size: 11px;
    color: #888;
    margin-top: 6px;
}

.route-value[b-6orpo5klnb] {
    font-weight: 600;
    color: #323130;
    font-size: 15px;
}

/* ════════════════════════════════════════════════════════════ */
/*  Edit-Mode: Existing Candidates                             */
/* ════════════════════════════════════════════════════════════ */

.existing-candidates-summary[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #605E5C;
}

.candidate-count-badge[b-6orpo5klnb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 6px;
    background: #0078D4;
    color: #FFF;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
}

.existing-candidates-list[b-6orpo5klnb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
    border: 1px solid #EDEBE9;
    border-radius: 6px;
    overflow: hidden;
}

.candidate-row-mini[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    font-size: 12px;
    background: #FAFAF9;
}

.candidate-row-mini:nth-child(even)[b-6orpo5klnb] {
    background: #FFF;
}

.candidate-name[b-6orpo5klnb] {
    font-weight: 500;
    color: #323130;
}

.candidate-passport[b-6orpo5klnb] {
    color: #605E5C;
    font-size: 11px;
}

.candidate-row-more[b-6orpo5klnb] {
    padding: 6px 12px;
    font-size: 11px;
    color: #888;
    font-style: italic;
    background: #F3F2F1;
    text-align: center;
}

.add-candidates-toggle[b-6orpo5klnb] {
    margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════ */
/*  Edit-Mode: Inline Upload Area                              */
/* ════════════════════════════════════════════════════════════ */

.inline-upload-area[b-6orpo5klnb] {
    margin-top: 10px;
    border: 1px dashed #D2D0CE;
    border-radius: 8px;
    padding: 12px;
    background: #FAFAF9;
}

.upload-drop-area[b-6orpo5klnb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.upload-drop-label[b-6orpo5klnb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 16px;
    width: 100%;
    text-align: center;
}

.upload-drop-label i[b-6orpo5klnb] {
    font-size: 28px;
    color: #0078D4;
}

.upload-drop-label span[b-6orpo5klnb] {
    font-size: 13px;
    color: #605E5C;
}

.upload-hint[b-6orpo5klnb] {
    font-size: 11px !important;
    color: #A0A0A0 !important;
}

.btn-link-action[b-6orpo5klnb] {
    background: none;
    border: none;
    color: #0078D4;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 0;
    font-family: 'Segoe UI', sans-serif;
}

.btn-link-action:hover[b-6orpo5klnb] {
    text-decoration: underline;
}

.upload-preview[b-6orpo5klnb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upload-preview-header[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #323130;
}

.upload-preview-list[b-6orpo5klnb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid #EDEBE9;
    border-radius: 4px;
    overflow: hidden;
    max-height: 180px;
    overflow-y: auto;
}

.upload-preview-row[b-6orpo5klnb] {
    display: flex;
    justify-content: space-between;
    padding: 4px 10px;
    font-size: 12px;
    background: #FFF;
}

.upload-preview-row:nth-child(even)[b-6orpo5klnb] {
    background: #FAFAF9;
}

.upload-preview-more[b-6orpo5klnb] {
    padding: 4px 10px;
    font-size: 11px;
    color: #888;
    font-style: italic;
    text-align: center;
    background: #F3F2F1;
}

.mono[b-6orpo5klnb] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
}

.btn-upload-confirm[b-6orpo5klnb] {
    align-self: flex-end;
    margin-top: 4px;
}

.btn-sm-action[b-6orpo5klnb] {
    background: none;
    border: 1px solid #D2D0CE;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    color: #323130;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Segoe UI', sans-serif;
}

.btn-sm-action:hover[b-6orpo5klnb] {
    background: #F3F2F1;
    border-color: #C8C6C4;
}

/* ════════════════════════════════════════════════════════════ */
/*  Edit-Mode: Existing Attachments                            */
/* ════════════════════════════════════════════════════════════ */

.existing-attachments-list[b-6orpo5klnb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.existing-attachment-row[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #FAFAF9;
    border: 1px solid #EDEBE9;
    border-radius: 4px;
    font-size: 12px;
}

.existing-attachment-row .btn-sm-action[b-6orpo5klnb] {
    padding: 2px 6px;
    font-size: 11px;
}

.edit-attachment-upload[b-6orpo5klnb] {
    margin-top: 8px;
}

.upload-progress-inline[b-6orpo5klnb] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    font-size: 12px;
    color: #0078D4;
}

.no-data-text[b-6orpo5klnb] {
    color: #888;
    font-size: 13px;
    font-style: italic;
    margin: 4px 0 8px;
}
/* /Components/Pages/MainLayout/FlightTicket/BulkBooking/BulkBookingDashboard.razor.rz.scp.css */
/* ========================================
   BULK BOOKING DASHBOARD - UNIFIED THEME
   Using BEC_Theme.css Design Tokens (NO HARDCODED VALUES)
   Matches BookingDashboard.razor.css pattern
   ======================================== */

/* ========================================
   PAGE LAYOUT & CONTAINER
   ======================================== */
.erp-page-container[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--BEC-colorNeutralBackground2);
    overflow: hidden;
}

/* ========================================
   PHASE 2: PAGE HEADER
   ======================================== */
.erp-page-header[b-quzbmv4vnr] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    box-shadow: none;
    height: 40px;
    min-height: 40px;
}

.page-title[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-quzbmv4vnr] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

.breadcrumb-separator[b-quzbmv4vnr] {
    font-weight: var(--BEC-fontWeightRegular);
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase300);
    margin-left: var(--BEC-spacingHorizontalXS);
}

.module-badge[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightBold);
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS);
    background: linear-gradient(135deg, var(--BEC-colorBrandBackground), var(--BEC-colorBrandBackgroundPressed));
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-radius: var(--BEC-borderRadiusMedium);
    letter-spacing: 0.8px;
    margin-left: var(--BEC-spacingHorizontalS);
}

.help-icon-btn[b-quzbmv4vnr] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    margin-left: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    padding: var(--BEC-spacingHorizontalXS);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all var(--BEC-durationFast);
}

.help-icon-btn:hover[b-quzbmv4vnr] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorBrandForeground1);
}

/* Header Right - Stats */
.header-right[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
}

.stats-container[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
}

.stat-card[b-quzbmv4vnr] {
    display: flex;
    align-items: baseline;
    gap: var(--BEC-spacingHorizontalXS);
    padding: 0;
}

.stat-value[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-value.total[b-quzbmv4vnr] {
    color: var(--BEC-layoutGray900);
}

.stat-value.draft[b-quzbmv4vnr] {
    color: var(--BEC-colorNeutralForeground3);
}

.stat-value.pending[b-quzbmv4vnr] {
    color: var(--BEC-colorPaletteYellowForeground1);
}

.stat-value.quoted[b-quzbmv4vnr] {
    color: var(--BEC-themeSecondary);
}

.stat-value.completed[b-quzbmv4vnr] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.stat-label[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-quzbmv4vnr] {
    width: 1px;
    height: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PHASE 3: ACTION TOOLBAR
   ======================================== */
[b-quzbmv4vnr] .e-toolbar.e-control {
    position: sticky !important;
    top: 40px !important;
    z-index: 90 !important;
    background: #FAFAF9 !important;
    border: none !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 12px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

/* Toolbar items: constrain height so buttons don't overflow the toolbar */
[b-quzbmv4vnr] .e-toolbar .e-toolbar-item {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
}

[b-quzbmv4vnr] .e-toolbar .e-toolbar-items {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    height: 36px !important;
    flex-wrap: nowrap !important;
}

[b-quzbmv4vnr] .e-toolbar .e-toolbar-left,
[b-quzbmv4vnr] .e-toolbar .e-toolbar-center,
[b-quzbmv4vnr] .e-toolbar .e-toolbar-right {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
}

[b-quzbmv4vnr] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    height: 26px !important;
    min-height: 26px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-quzbmv4vnr] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-quzbmv4vnr] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-quzbmv4vnr] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorNeutralBackground2) !important;
    color: var(--BEC-colorBrandBackground) !important;
}

[b-quzbmv4vnr] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-quzbmv4vnr] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-quzbmv4vnr] .e-toolbar .e-separator {
    background-color: var(--BEC-colorNeutralStroke2) !important;
    height: var(--BEC-spacingHorizontalXL) !important;
    margin: 0 var(--BEC-spacingHorizontalS) !important;
}

[b-quzbmv4vnr] .e-toolbar .e-input-group {
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-quzbmv4vnr] .e-toolbar .e-toolbar-item .e-input-group {
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-quzbmv4vnr] .e-toolbar .e-input-group .e-input,
[b-quzbmv4vnr] .e-toolbar .e-toolbar-item .e-input-group .e-input {
    height: 30px !important;
    line-height: 30px !important;
}

/* ========================================
   PHASE 4: GRID CONTENT (Full Width)
   ======================================== */
.erp-page-content[b-quzbmv4vnr] {
    flex: 1;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Grid fills available space */
[b-quzbmv4vnr] .e-grid {
    flex: 1;
    min-height: 0;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: 'Segoe UI', sans-serif !important;
    background: white !important;
}

[b-quzbmv4vnr] .e-grid .e-gridheader {
    background-color: #FAFAF9 !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
}

[b-quzbmv4vnr] .e-headercell {
    background-color: #FAFAF9 !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none;
    letter-spacing: normal;
    padding: 8px 12px !important;
}

[b-quzbmv4vnr] .e-grid .e-headercell .e-headertext {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #323130;
}

[b-quzbmv4vnr] .e-grid .e-rowcell {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px !important;
    color: #323130 !important;
    padding: 8px 12px !important;
    border-color: var(--BEC-layoutGray100) !important;
}

/* Zebra striping */
[b-quzbmv4vnr] .e-grid .e-row:nth-child(even) .e-rowcell {
    background-color: #FAFAFA !important;
}

[b-quzbmv4vnr] .e-grid .e-row:hover .e-rowcell {
    background-color: #F5F5F5 !important;
}

[b-quzbmv4vnr] .e-grid .e-row.e-selectionbackground .e-rowcell {
    background-color: #EBF3FC !important;
    color: var(--BEC-colorBrandForeground2) !important;
}

/* ========================================
   GRID CELL TEMPLATES
   ======================================== */
.id-text[b-quzbmv4vnr] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: #323130;
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
}

.batch-name-text[b-quzbmv4vnr] {
    color: var(--BEC-layoutGray900);
    font-weight: var(--BEC-fontWeightMedium);
}

.route-simple[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    font-weight: var(--BEC-fontWeightMedium);
    font-size: var(--BEC-fontSizeBase200);
}

.route-simple .city[b-quzbmv4vnr] {
    color: var(--BEC-layoutGray900);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.route-simple .arrow[b-quzbmv4vnr] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
}

.travel-dates-text[b-quzbmv4vnr],
.date-text[b-quzbmv4vnr] {
    color: var(--BEC-layoutGray600);
    font-size: var(--BEC-fontSizeBase200);
}

.pax-count[b-quzbmv4vnr] {
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-layoutGray900);
    font-family: 'Consolas', monospace;
}

.quote-badge[b-quzbmv4vnr] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorBrandForeground1);
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusCircular);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase200);
}

.price-text[b-quzbmv4vnr] {
    font-family: 'Consolas', monospace;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.lowest-price-text[b-quzbmv4vnr] {
    font-family: 'Consolas', monospace;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase200);
}

/* SLA Status Badges */
.sla-badge[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusCircular);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase100);
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    min-width: 72px;
}

.sla-ontime[b-quzbmv4vnr] {
    background-color: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorPaletteGreenForeground1);
    border: 1px solid var(--BEC-colorPaletteGreenBackground2);
}

.sla-warning[b-quzbmv4vnr] {
    background-color: var(--BEC-colorPaletteYellowBackground1);
    color: var(--BEC-colorPaletteYellowForeground1);
    border: 1px solid var(--BEC-colorPaletteYellowBackground2);
}

.sla-breached[b-quzbmv4vnr] {
    background-color: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
    border: 1px solid var(--BEC-colorPaletteRedBackground2);
}

.sla-escalated[b-quzbmv4vnr] {
    background-color: var(--BEC-errorBackground);
    color: var(--BEC-errorText);
    border: 1px solid var(--BEC-colorPaletteRedBackground2);
    font-weight: var(--BEC-fontWeightBold);
}

.no-data[b-quzbmv4vnr] {
    color: var(--BEC-colorNeutralForeground4);
}

/* Status Text — no background pill, text-color only */
.status-badge[b-quzbmv4vnr] {
    font-weight: 600;
    font-size: 12px;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    background: none;
    border: none;
    padding: 0;
}

.status-draft[b-quzbmv4vnr] {
    color: #8A8886;
}

.status-sent[b-quzbmv4vnr] {
    color: #CA5010;
}

.status-quoted[b-quzbmv4vnr] {
    color: #0078D4;
}

.status-approved[b-quzbmv4vnr] {
    color: #107C10;
}

.status-released[b-quzbmv4vnr] {
    color: #0078D4;
}

.status-booked[b-quzbmv4vnr] {
    color: #107C10;
    font-weight: 700;
}

.status-completed[b-quzbmv4vnr] {
    color: #8A8886;
}

.status-cancelled[b-quzbmv4vnr] {
    color: #D13438;
}

.status-default[b-quzbmv4vnr] {
    color: #8A8886;
}

/* ========================================
   INLINE MESSAGE BARS (NO TOASTS)
   ======================================== */
[b-quzbmv4vnr] .fluent-messagebar {
    margin-bottom: var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
}

[b-quzbmv4vnr] .fluent-messagebar-error {
    background: var(--BEC-colorPaletteRedBackground1);
    border: 1px solid var(--BEC-colorPaletteRedBackground2);
}

/* Loading & Error States */
.loading-container[b-quzbmv4vnr] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.error-container[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--BEC-layoutDangerRed);
    gap: var(--BEC-spacingHorizontalM);
}

.error-container i[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeHero900);
    opacity: 0.6;
}

.btn-retry[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    cursor: pointer;
    font-weight: var(--BEC-fontWeightSemibold);
}

.btn-retry:hover[b-quzbmv4vnr] {
    background: var(--BEC-colorBrandBackgroundHover);
}

/* ========================================
   DRAWER PANEL — Wireframe v2 flat tokens
   Matches BookingDashboard drawer pattern
   ======================================== */
.drawer-overlay[b-quzbmv4vnr] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1050;
    display: flex;
    justify-content: flex-end;
    animation: drawerFadeIn-b-quzbmv4vnr 0.2s ease;
}

.drawer-panel[b-quzbmv4vnr] {
    background: #FFFFFF;
    width: 720px;
    max-width: 92vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #E0E0E0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
    animation: drawerSlideIn-b-quzbmv4vnr 0.25s ease;
}

@keyframes drawerFadeIn-b-quzbmv4vnr {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes drawerSlideIn-b-quzbmv4vnr {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Drawer header — 40px, flat #FAFAF9, matches toolbar */
.drawer-header[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    height: 40px;
    min-height: 40px;
    padding: 0 12px;
    background: #FAFAF9;
    border-bottom: 1px solid #E0E0E0;
    gap: 8px;
    flex-shrink: 0;
}

.drawer-header-icon[b-quzbmv4vnr] {
    font-size: 14px;
    color: #0078D4;
    flex-shrink: 0;
}

.drawer-header-title[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    flex: 1;
    margin: 0;
    line-height: 1;
}

.btn-close-drawer[b-quzbmv4vnr] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #9E9E9E;
    font-size: 14px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-close-drawer:hover[b-quzbmv4vnr] {
    background: #F5F5F4;
    color: #242424;
}

/* Drawer body */
.drawer-body[b-quzbmv4vnr] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #FFFFFF;
}

/* Batch details drawer loading state */
.batch-details-loading[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    gap: 12px;
    color: #9E9E9E;
}

.batch-details-loading-spinner[b-quzbmv4vnr] {
    font-size: 20px;
    color: #0078D4;
}

.batch-details-loading-text[b-quzbmv4vnr] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #242424;
}

/* Drawer footer — flat #FAFAF9 */
.drawer-footer[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 44px;
    padding: 0 12px;
    border-top: 1px solid #E0E0E0;
    background: #FAFAF9;
    gap: 8px;
    flex-shrink: 0;
}

/* Drawer Sections — flat wireframe pattern */
.d-section[b-quzbmv4vnr] {
    margin-bottom: 16px;
}

.d-section-hdr[b-quzbmv4vnr] {
    font-size: 12px;
    font-weight: 600;
    color: #616161;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding-bottom: 6px;
    border-bottom: 1px solid #EBEBEB;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.d-section-hdr i[b-quzbmv4vnr] {
    font-size: 12px;
    color: #0078D4;
}

/* Attachments section – softer look */
.attachments-section[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
}
.attachments-section-title[b-quzbmv4vnr] {
    margin: 0 0 var(--BEC-spacingHorizontalM) !important;
    font-size: var(--BEC-fontSizeBase200) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-layoutGray700) !important;
}
.attachments-section-title i[b-quzbmv4vnr] {
    color: var(--BEC-layoutGray500);
    font-size: var(--BEC-fontSizeBase100);
}

/* ── Attachment Upload Area (matches candidates inline-upload-area) ── */
.att-upload-area[b-quzbmv4vnr] {
    padding: 12px;
    background: #F8FAFC;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    margin-bottom: 10px;
}

.att-type-row[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.att-type-label[b-quzbmv4vnr] {
    font-size: 12px;
    font-weight: 600;
    color: #616161;
}

.att-type-select[b-quzbmv4vnr] {
    height: 30px;
    border: 1px solid #E0E0E0;
    border-radius: 3px;
    padding: 0 8px;
    font-size: 13px;
    color: #242424;
    background: #FFFFFF;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    cursor: pointer;
}

.att-type-select:focus[b-quzbmv4vnr] {
    outline: none;
    border-color: #0078D4;
    box-shadow: 0 0 0 1px #0078D4;
}

/* ── Fluent File Cards ── */
.att-file-list[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.att-file-card[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 4px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.att-file-card:hover[b-quzbmv4vnr] {
    border-color: #D0D0D0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.att-file-icon[b-quzbmv4vnr] {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.att-icon-pdf[b-quzbmv4vnr] {
    background: #FDE8E8;
    color: #D13438;
}

.att-icon-img[b-quzbmv4vnr] {
    background: #E8F4FD;
    color: #0078D4;
}

.att-icon-default[b-quzbmv4vnr] {
    background: #F3F2F1;
    color: #616161;
}

.att-file-detail[b-quzbmv4vnr] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.att-file-name[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 500;
    color: #242424;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.att-file-meta[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #9E9E9E;
}

.att-file-type-badge[b-quzbmv4vnr] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #F3F2F1;
    color: #616161;
}

.att-file-actions[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.att-vendor-hint[b-quzbmv4vnr] {
    margin: 6px 0 0;
    font-size: 11px;
    color: #9E9E9E;
    display: flex;
    align-items: center;
    gap: 4px;
}

.att-vendor-hint i[b-quzbmv4vnr] {
    font-size: 11px;
    color: #0078D4;
}
.btn-icon-danger[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalS);
    background: transparent;
    border: 1px solid var(--BEC-layoutGray200);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-layoutGray600);
    cursor: pointer;
    flex-shrink: 0;
}
.btn-icon-danger:hover[b-quzbmv4vnr] {
    background: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
    border-color: var(--BEC-colorPaletteRedForeground1);
}

/* Small icon button for per-row actions (non-destructive) */
.btn-icon-action[b-quzbmv4vnr] {
    background: none;
    border: 1px solid var(--BEC-layoutGray200);
    color: var(--BEC-colorBrandForeground1, #0078D4);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    flex-shrink: 0;
    transition: background var(--BEC-durationFast);
}
.btn-icon-action:hover[b-quzbmv4vnr] {
    background: var(--BEC-colorBrandBackground2, rgba(0, 120, 212, 0.08));
    border-color: var(--BEC-colorBrandForeground1, #0078D4);
}

/* Key-value grid */
.kv-grid[b-quzbmv4vnr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

.kv-label[b-quzbmv4vnr] {
    font-size: 11px;
    font-weight: 600;
    color: #9E9E9E;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.kv-value[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 500;
    color: #242424;
}

/* Batch description — full-width text below section header */
.batch-description[b-quzbmv4vnr] {
    font-size: 13px;
    color: #616161;
    line-height: 1.5;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #EBEBEB;
}

/* Full-width key-value row for long text fields */
.kv-full-width[b-quzbmv4vnr] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #EBEBEB;
}

.kv-full-width .kv-value[b-quzbmv4vnr] {
    margin-top: 4px;
    line-height: 1.5;
}

/* Cabin class emphasis */
.cabin-class-value[b-quzbmv4vnr] {
    font-weight: 600;
}

/* Deadline highlighting */
.deadline-value[b-quzbmv4vnr] {
    font-weight: 500;
}

.deadline-near[b-quzbmv4vnr] {
    color: #D13438;
    font-weight: 600;
}

/* ========================================
   ROUTE BANNER
   ======================================== */
.route-banner[b-quzbmv4vnr] {
    background: linear-gradient(135deg, #0078D4 0%, #005A9E 100%);
    color: #fff;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
    border-radius: 6px;
}

.route-banner-cities[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.route-banner-city-name[b-quzbmv4vnr] {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.route-banner-arrow[b-quzbmv4vnr] {
    font-size: 15px;
    opacity: 0.7;
}

.route-banner-date[b-quzbmv4vnr] {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,0.3);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.route-banner-date-label[b-quzbmv4vnr] {
    font-size: 10px;
    opacity: 0.7;
    letter-spacing: 0.5px;
}

.route-banner-date-value[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 700;
}

.route-banner-date-sub[b-quzbmv4vnr] {
    font-size: 9px;
    opacity: 0.7;
}

/* ========================================
   3-COLUMN KEY-VALUE GRID
   ======================================== */
.kv-grid-3col[b-quzbmv4vnr] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px 16px;
}

.kv-value-mono[b-quzbmv4vnr] {
    font-family: 'Consolas', monospace;
    font-weight: 600;
}

/* ========================================
   CANDIDATE READINESS CHIPS
   ======================================== */
.readiness-chips-row[b-quzbmv4vnr] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #EBEBEB;
}

.readiness-chip[b-quzbmv4vnr] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    background: #F5F5F4;
    color: #9E9E9E;
}

.readiness-chip-dot[b-quzbmv4vnr] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.readiness-chip-dot.dot-ready[b-quzbmv4vnr] { background: var(--BEC-colorPaletteGreenForeground1, #107C10); }
.readiness-chip-dot.dot-visa[b-quzbmv4vnr] { background: var(--BEC-colorPaletteYellowForeground1, #C19C00); }
.readiness-chip-dot.dot-dropped[b-quzbmv4vnr] { background: var(--BEC-colorPaletteRedForeground1, #D13438); }
.readiness-chip-dot.dot-ticketed[b-quzbmv4vnr] { background: #0078D4; }

/* Active chip states — highlighted when count > 0 */
.readiness-chip.chip-ready-active[b-quzbmv4vnr] { background: #ecfdf5; color: #107C10; }
.readiness-chip.chip-visa-active[b-quzbmv4vnr] { background: #fefce8; color: #C19C00; }
.readiness-chip.chip-dropped-active[b-quzbmv4vnr] { background: #fef2f2; color: #D13438; }
.readiness-chip.chip-ticketed-active[b-quzbmv4vnr] { background: #E8F4FD; color: #0078D4; }

/* ========================================
   VENDOR QUOTE CARDS (redesigned)
   ======================================== */
.vq-list[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vq-card[b-quzbmv4vnr] {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s;
}

.vq-card:hover[b-quzbmv4vnr] {
    border-color: #B4D6FA;
}

.vq-card-lowest[b-quzbmv4vnr] {
    border-color: #107C10;
}

.vq-card-approved[b-quzbmv4vnr] {
    border-color: #107C10;
    background: #f6fff6;
}

.vq-card-rejected[b-quzbmv4vnr] {
    border-color: #e0e0e0;
    opacity: 0.7;
}

.vq-card-header[b-quzbmv4vnr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #FAFAF9;
    border-bottom: 1px solid #EBEBEB;
}

.vq-vendor-name[b-quzbmv4vnr] {
    font-size: 14px;
    font-weight: 700;
    color: #242424;
}

.vq-badges[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vq-badge-lowest[b-quzbmv4vnr] {
    font-size: 10px;
    font-weight: 700;
    color: #107C10;
    background: #ecfdf5;
    border: 1px solid #10b981;
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vq-badge-approved[b-quzbmv4vnr] {
    font-size: 10px;
    font-weight: 700;
    color: #107C10;
    background: #dcfce7;
    padding: 2px 8px;
    border-radius: 12px;
}

.vq-badge-rejected[b-quzbmv4vnr] {
    font-size: 10px;
    font-weight: 700;
    color: #D13438;
    background: #fee2e2;
    padding: 2px 8px;
    border-radius: 12px;
}

.vq-card-body[b-quzbmv4vnr] {
    padding: 12px 14px;
}

.vq-price-row[b-quzbmv4vnr] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.vq-currency[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 600;
    color: #616161;
}

.vq-total-price[b-quzbmv4vnr] {
    font-size: 22px;
    font-weight: 800;
    color: #242424;
    font-family: 'Consolas', monospace;
    letter-spacing: -0.5px;
}

.vq-price-breakdown[b-quzbmv4vnr] {
    font-size: 12px;
    color: #616161;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.vq-dot[b-quzbmv4vnr] {
    width: 3px;
    height: 3px;
    background: #9E9E9E;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Same price — compact one-liner */
.vq-same-price[b-quzbmv4vnr] {
    background: #ecfdf5;
    border: 1px solid #10b981;
    border-radius: 6px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #107C10;
    font-weight: 600;
}

.vq-uniform-tag[b-quzbmv4vnr] {
    font-size: 10px;
    background: rgba(16, 124, 16, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Multi-tier price groups */
.vq-groups-summary[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vq-group-line[b-quzbmv4vnr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    background: #FAFAF9;
    border-radius: 4px;
    font-size: 12px;
}

.vq-group-pax[b-quzbmv4vnr] {
    color: #616161;
    font-weight: 500;
}

.vq-group-subtotal[b-quzbmv4vnr] {
    font-weight: 700;
    color: #242424;
    font-family: 'Consolas', monospace;
}

/* Flight info */
.vq-flight-info[b-quzbmv4vnr] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #EBEBEB;
    font-size: 12px;
}

.vq-flight-item[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.vq-flight-label[b-quzbmv4vnr] {
    font-size: 10px;
    color: #9E9E9E;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.vq-flight-value[b-quzbmv4vnr] {
    font-size: 12px;
    font-weight: 600;
    color: #242424;
}

/* Option notes */
.vq-option-notes[b-quzbmv4vnr] {
    font-size: 12px;
    color: #616161;
    font-style: italic;
    padding: 4px 0;
}

.vq-option-notes i[b-quzbmv4vnr] {
    color: #0078D4;
    margin-right: 4px;
}

/* Vendor notes */
.vq-vendor-notes[b-quzbmv4vnr] {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #EBEBEB;
}

.vq-notes-label[b-quzbmv4vnr] {
    font-size: 11px;
    font-weight: 600;
    color: #616161;
    display: block;
    margin-bottom: 4px;
}

.vq-notes-label i[b-quzbmv4vnr] {
    color: #0078D4;
    margin-right: 3px;
}

.vq-notes-text[b-quzbmv4vnr] {
    font-size: 12px;
    color: #242424;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
    background: #FAFAF9;
    padding: 6px 10px;
    border-radius: 4px;
}

/* Card actions */
.vq-card-actions[b-quzbmv4vnr] {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #EBEBEB;
    background: #FAFAF9;
}

.vq-btn-accept[b-quzbmv4vnr] {
    flex: 1;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    background: #107C10;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.15s;
}

.vq-btn-accept:hover[b-quzbmv4vnr] {
    background: #0b5e0b;
}

.vq-btn-reject[b-quzbmv4vnr] {
    flex: 1;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #fecaca;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    background: #FFFFFF;
    color: #D13438;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.15s;
}

.vq-btn-reject:hover[b-quzbmv4vnr] {
    background: #fef2f2;
}

/* Approved vendor emphasis */
.approved-vendor-value[b-quzbmv4vnr] {
    color: #0078D4;
    font-weight: 600;
}

/* Candidate / List rows — flat wireframe pattern */
.list-row[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #EBEBEB;
    font-size: 13px;
}

.list-row:last-child[b-quzbmv4vnr] {
    border-bottom: none;
}

.list-row .name[b-quzbmv4vnr] {
    font-weight: 500;
    color: #242424;
}

.list-row .mono[b-quzbmv4vnr] {
    font-size: 11px;
    color: #9E9E9E;
    font-family: 'Cascadia Code', 'Consolas', monospace;
}

.mini-badge[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase100);
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    font-weight: var(--BEC-fontWeightSemibold);
}

.candidate-ready[b-quzbmv4vnr] { 
    background: var(--BEC-colorPaletteGreenBackground1); 
    color: var(--BEC-colorPaletteGreenForeground1); 
}
.candidate-pending[b-quzbmv4vnr] { 
    background: var(--BEC-colorPaletteYellowBackground1); 
    color: var(--BEC-colorPaletteYellowForeground1); 
}
.candidate-dropped[b-quzbmv4vnr] { 
    background: var(--BEC-colorPaletteRedBackground1); 
    color: var(--BEC-colorPaletteRedForeground1); 
}
.candidate-hold[b-quzbmv4vnr] { 
    background: var(--BEC-infoBackground); 
    color: var(--BEC-infoText); 
}
.candidate-ticketed[b-quzbmv4vnr] { 
    background: var(--BEC-colorPaletteGreenForeground1); 
    color: var(--BEC-colorNeutralForegroundOnBrand); 
}

/* ========================================
   CANDIDATE READINESS BREAKDOWN
   ======================================== */
.readiness-bar[b-quzbmv4vnr] {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--BEC-layoutGray100);
    margin-bottom: 10px;
    gap: 2px;
}

.readiness-seg[b-quzbmv4vnr] {
    min-width: 4px;
    transition: flex 0.3s ease;
}

.seg-ready[b-quzbmv4vnr] {
    background: var(--BEC-colorPaletteGreenForeground1);
}

.seg-visa[b-quzbmv4vnr] {
    background: var(--BEC-colorPaletteYellowForeground1);
}

.seg-dropped[b-quzbmv4vnr] {
    background: var(--BEC-colorPaletteRedForeground1);
}

.seg-ticketed[b-quzbmv4vnr] {
    background: #0078D4;
}

.readiness-legend[b-quzbmv4vnr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}

.readiness-item[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.readiness-dot[b-quzbmv4vnr] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-ready[b-quzbmv4vnr] {
    background: var(--BEC-colorPaletteGreenForeground1);
}

.dot-visa[b-quzbmv4vnr] {
    background: var(--BEC-colorPaletteYellowForeground1);
}

.dot-dropped[b-quzbmv4vnr] {
    background: var(--BEC-colorPaletteRedForeground1);
}

.dot-ticketed[b-quzbmv4vnr] {
    background: #0078D4;
}

.readiness-label[b-quzbmv4vnr] {
    font-size: 11px;
    color: #616161;
    flex: 1;
}

.readiness-count[b-quzbmv4vnr] {
    font-size: 12px;
    font-weight: 600;
    color: #242424;
    font-family: 'Consolas', monospace;
}

/* Quote List — wireframe flat pattern */
.quote-list[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quote-row[b-quzbmv4vnr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 10px;
    background: #FFFFFF;
    border-radius: 3px;
    gap: 10px;
    border: 1px solid #EBEBEB;
}

.quote-row.lowest[b-quzbmv4vnr] {
    background: #F6FFF6;
    border-color: #107C10;
}

.quote-info[b-quzbmv4vnr] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vendor-name[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 500;
    color: #242424;
}

.lowest-tag[b-quzbmv4vnr] {
    font-size: 10px;
    font-weight: 700;
    background: #107C10;
    color: #FFFFFF;
    padding: 1px 6px;
    border-radius: 3px;
}

.quote-status-tag[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase100);
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-left: var(--BEC-spacingHorizontalXS);
}

/* Vendor quote status: Approved = green, Rejected = red */
.quote-status-tag.approved[b-quzbmv4vnr] {
    background: #dcfce7;
    color: #15803d !important;
    font-weight: 600;
}

.quote-status-tag.rejected[b-quzbmv4vnr] {
    background: #fee2e2;
    color: #b91c1c !important;
    font-weight: 600;
}

.quote-price-group[b-quzbmv4vnr] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.quote-price[b-quzbmv4vnr] {
    font-family: 'Consolas', monospace;
    font-weight: 700;
    font-size: 14px;
    color: #242424;
}

.per-pax[b-quzbmv4vnr] {
    font-size: 11px;
    color: #9E9E9E;
}

/* Per-passenger prices (flexible pricing quote) */
.quote-seat-prices[b-quzbmv4vnr] {
    width: 100%;
    margin-top: var(--BEC-spacingHorizontalS);
    padding-top: var(--BEC-spacingHorizontalS);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.quote-seat-prices-label[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalXS);
}

.quote-seat-prices-table-wrap[b-quzbmv4vnr] {
    overflow-x: auto;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.quote-seat-prices-table[b-quzbmv4vnr] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--BEC-fontSizeBase200);
}

.quote-seat-prices-table th[b-quzbmv4vnr],
.quote-seat-prices-table td[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalSNudge) var(--BEC-spacingHorizontalM);
    text-align: left;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.quote-seat-prices-table th[b-quzbmv4vnr] {
    background: var(--BEC-colorNeutralBackground3);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
}

.quote-seat-prices-table tr:last-child td[b-quzbmv4vnr] {
    border-bottom: none;
}

/* Vendor Notes & Terms in Quote Card */
.vendor-notes-section[b-quzbmv4vnr] {
    margin-top: var(--BEC-spacingHorizontalM);
    padding-top: var(--BEC-spacingHorizontalS);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.vendor-notes-label[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalXS);
}

.vendor-notes-label i[b-quzbmv4vnr] {
    margin-right: 4px;
    color: var(--BEC-colorBrandForeground1);
}

.vendor-notes-text[b-quzbmv4vnr] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
    background: var(--BEC-colorNeutralBackground3);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusMedium);
}

/* Buttons */
.btn-sm-action[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalSNudge) var(--BEC-spacingHorizontalM);
    background: var(--BEC-layoutGray100);
    border: 1px solid var(--BEC-layoutGray200);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    color: var(--BEC-layoutGray900);
    transition: all var(--BEC-durationFast);
}

.btn-sm-action:hover[b-quzbmv4vnr] {
    background: var(--BEC-layoutGray200);
}

.btn-sm-primary[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalSNudge) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorBrandBackground);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    cursor: pointer;
}

.btn-sm-primary:hover[b-quzbmv4vnr] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-sm-danger[b-quzbmv4vnr] {
    padding: var(--BEC-spacingHorizontalSNudge) var(--BEC-spacingHorizontalM);
    background: transparent;
    border: 1px solid var(--BEC-colorPaletteRedForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorPaletteRedForeground1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.btn-sm-danger:hover[b-quzbmv4vnr] {
    background: var(--BEC-colorPaletteRedBackground1);
}

.btn-link-action[b-quzbmv4vnr] {
    background: none;
    border: none;
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase200);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalS) 0;
    font-weight: var(--BEC-fontWeightMedium);
}

.btn-link-action:hover[b-quzbmv4vnr] {
    text-decoration: underline;
}

/* Drawer footer buttons — 28px compact */
.btn-drawer-default[b-quzbmv4vnr] {
    height: 28px;
    padding: 0 14px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #E0E0E0;
    background: #FFFFFF;
    color: #616161;
    cursor: pointer;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-drawer-default:hover[b-quzbmv4vnr] {
    background: #F5F5F4;
}

.btn-drawer-primary[b-quzbmv4vnr] {
    height: 28px;
    padding: 0 14px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: #0078D4;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-drawer-primary:hover[b-quzbmv4vnr] {
    background: #106EBE;
}

/* Edit button in drawer header */
.btn-edit-drawer[b-quzbmv4vnr] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #0078D4;
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-edit-drawer:hover[b-quzbmv4vnr] {
    background: #EFF6FC;
    color: #106EBE;
}

/* Cancel/Danger button in drawer footer */
.btn-drawer-danger[b-quzbmv4vnr] {
    height: 28px;
    padding: 0 14px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #A80000;
    background: #FFFFFF;
    color: #A80000;
    cursor: pointer;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: auto;
}

.btn-drawer-danger:hover[b-quzbmv4vnr] {
    background: #FDE7E9;
}

.form-field[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-quzbmv4vnr] {
    font-size: 12px;
    font-weight: 600;
    color: #616161;
}

.form-label .required[b-quzbmv4vnr] {
    color: #A80000;
}

.form-select[b-quzbmv4vnr] {
    height: 32px;
    border: 1px solid #E0E0E0;
    border-radius: 3px;
    padding: 0 8px;
    font-size: 13px;
    color: #242424;
    background: #FFFFFF;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

.form-select:focus[b-quzbmv4vnr] {
    border-color: #0078D4;
    outline: none;
}

/* Empty Section */
.empty-section[b-quzbmv4vnr] {
    padding: 24px 16px;
    text-align: center;
    color: #616161;
    font-size: 12px;
    background: #FAFAF9;
    border: 1px dashed #EBEBEB;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.empty-section i[b-quzbmv4vnr] {
    font-size: 20px;
    color: #9E9E9E;
}

/* ── Inline Upload Area (embedded in drawer candidates section) ── */
.inline-upload-area[b-quzbmv4vnr] {
    padding: 12px;
    background: #F8FAFC;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    margin-bottom: 8px;
}

.upload-drop-area[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.upload-drop-label[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px;
    width: 100%;
    border: 2px dashed #C0C0C0;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s;
    background: #FFFFFF;
    text-align: center;
    color: #616161;
    font-size: 12px;
}

.upload-drop-label:hover[b-quzbmv4vnr] {
    border-color: #0078D4;
    background: #F5F9FF;
}

.upload-drop-label i[b-quzbmv4vnr] {
    font-size: 24px;
    color: #0078D4;
}

.upload-hint[b-quzbmv4vnr] {
    font-size: 11px;
    color: #9E9E9E;
}

.upload-preview[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upload-preview-header[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}

.upload-preview-list[b-quzbmv4vnr] {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #E0E0E0;
    border-radius: 3px;
    background: #FFFFFF;
}

.upload-preview-row[b-quzbmv4vnr] {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    font-size: 12px;
    border-bottom: 1px solid #F5F5F5;
}

.upload-preview-row:last-child[b-quzbmv4vnr] {
    border-bottom: none;
}

.upload-preview-more[b-quzbmv4vnr] {
    padding: 5px 10px;
    font-size: 11px;
    color: var(--accent, #1976D2);
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}

.upload-preview-more:hover[b-quzbmv4vnr] {
    color: var(--accent-dark, #1565C0);
    text-decoration: underline;
}

.btn-upload-confirm[b-quzbmv4vnr] {
    margin-top: 4px;
}

/* Step list inside help drawer — flat wireframe pattern */
.step-list[b-quzbmv4vnr] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-item[b-quzbmv4vnr] {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #EBEBEB;
}

.step-item:last-child[b-quzbmv4vnr] {
    border-bottom: none;
}

.step-num[b-quzbmv4vnr] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0078D4;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.step-text strong[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    display: block;
    margin-bottom: 2px;
}

.step-text span[b-quzbmv4vnr] {
    font-size: 12px;
    color: #616161;
}

.step-tip[b-quzbmv4vnr] {
    background: #FDF6E3;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    color: #9A6603;
    margin-top: 4px;
    display: inline-block;
}

/* Processing Overlay — flat, no blur */
.processing-overlay[b-quzbmv4vnr] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.processing-content[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    padding: 32px 48px;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border: 1px solid #E0E0E0;
}

.processing-content span[b-quzbmv4vnr] {
    font-weight: 500;
    color: #616161;
    font-size: 13px;
}

/* Export dialog (optional date range) */
.export-dialog-hint[b-quzbmv4vnr] {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: #616161;
}

.export-dialog-dates[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.export-dialog-dates .filter-item[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.export-dialog-dates .filter-item label[b-quzbmv4vnr] {
    font-size: 12px;
    font-weight: 600;
    color: #242424;
}

/* ========================================
   UNIFIED DIALOG STYLES — Wireframe v2 tokens
   ======================================== */

/* SfDialog overlay — flat, no blur */
[b-quzbmv4vnr] .e-dlg-overlay {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* SfDialog container */
[b-quzbmv4vnr] .e-dialog {
    border: 1px solid #E0E0E0 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
}

/* Dialog header — 36px, flat #FAFAF9 */
[b-quzbmv4vnr] .e-dialog .e-dlg-header-content {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    background: #FAFAF9 !important;
    border-bottom: 1px solid #E0E0E0 !important;
    display: flex !important;
    align-items: center !important;
}

[b-quzbmv4vnr] .e-dialog .e-dlg-header {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #242424 !important;
    display: flex !important;
    align-items: center !important;
}

[b-quzbmv4vnr] .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 3px !important;
    color: #9E9E9E !important;
    box-shadow: none !important;
}

[b-quzbmv4vnr] .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover {
    background: #F5F5F4 !important;
    color: #242424 !important;
}

/* Dialog body */
[b-quzbmv4vnr] .e-dialog .e-dlg-content {
    padding: 16px !important;
}

/* Dialog footer — flat #FAFAF9 */
[b-quzbmv4vnr] .e-dialog .e-footer-content {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    background: #FAFAF9 !important;
    border-top: 1px solid #E0E0E0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

/* ── RFQ Tracking ── */
.rfq-list[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rfq-item[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: #FFFFFF;
    border-radius: 3px;
    border: 1px solid #EBEBEB;
}

.rfq-item-header[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rfq-status-tag[b-quzbmv4vnr] {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 3px;
    white-space: nowrap;
}

.rfq-status-tag.pending[b-quzbmv4vnr] { background: #f0f0f0; color: #616161; }
.rfq-status-tag.submitted[b-quzbmv4vnr] { background: #E8F4FD; color: #0078D4; }
.rfq-status-tag.approved[b-quzbmv4vnr] { background: #DFF6DD; color: #107C10; }
.rfq-status-tag.rejected[b-quzbmv4vnr] { background: #FDE7E9; color: #D13438; }
.rfq-status-tag.expired[b-quzbmv4vnr] { background: #FFF4CE; color: #797673; }

.rfq-new-badge[b-quzbmv4vnr] {
    font-size: 9px;
    font-weight: 700;
    background: #0078D4;
    color: #fff;
    padding: 0 5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

.rfq-updated-badge[b-quzbmv4vnr] {
    font-size: 9px;
    font-weight: 700;
    background: #FFB900;
    color: #242424;
    padding: 0 5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

.rfq-meta[b-quzbmv4vnr] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #616161;
}

.rfq-meta i[b-quzbmv4vnr] {
    margin-right: 3px;
    font-size: 10px;
}

.rfq-sla[b-quzbmv4vnr] {
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.rfq-sla i[b-quzbmv4vnr] { font-size: 11px; }
.rfq-sla.ok[b-quzbmv4vnr] { color: #107C10; }
.rfq-sla.warning[b-quzbmv4vnr] { color: #C19C00; }
.rfq-sla.urgent[b-quzbmv4vnr] { color: #D13438; animation: rfq-pulse-b-quzbmv4vnr 1.5s ease-in-out infinite; }

@keyframes rfq-pulse-b-quzbmv4vnr {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.rfq-indicators[b-quzbmv4vnr] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
}

.rfq-ind-received[b-quzbmv4vnr] { color: #107C10; }
.rfq-ind-won[b-quzbmv4vnr] { color: #C19C00; }
.rfq-ind-rejected[b-quzbmv4vnr] { color: #D13438; }
.rfq-ind-expired[b-quzbmv4vnr] { color: #797673; }
.rfq-ind-count[b-quzbmv4vnr] { color: #616161; }

/* Dialog footer buttons — 28px compact */
[b-quzbmv4vnr] .e-dialog .e-footer-content .e-btn {
    height: 28px !important;
    padding: 0 14px !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
    min-width: auto !important;
    box-shadow: none !important;
}

/* Default button */
[b-quzbmv4vnr] .e-dialog .e-footer-content .e-btn.e-flat {
    background: #FFFFFF !important;
    color: #616161 !important;
    border: 1px solid #E0E0E0 !important;
}

[b-quzbmv4vnr] .e-dialog .e-footer-content .e-btn.e-flat:hover {
    background: #F5F5F4 !important;
}

/* Primary button */
[b-quzbmv4vnr] .e-dialog .e-footer-content .e-btn.e-primary {
    background: #0078D4 !important;
    color: #FFFFFF !important;
    border: none !important;
}

[b-quzbmv4vnr] .e-dialog .e-footer-content .e-btn.e-primary:hover {
    background: #106EBE !important;
}

/* Danger button */
[b-quzbmv4vnr] .e-dialog .e-footer-content .e-btn.e-danger {
    background: #A80000 !important;
    color: #FFFFFF !important;
    border: none !important;
}

[b-quzbmv4vnr] .e-dialog .e-footer-content .e-btn.e-danger:hover {
    background: #8B0000 !important;
}

/* Dialog header title row */
.dialog-header-title[b-quzbmv4vnr] {
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #242424;
}

.dialog-header-title i[b-quzbmv4vnr] {
    font-size: 13px;
    color: #0078D4;
}

.dialog-header-title.warning i[b-quzbmv4vnr] {
    color: #A80000;
}

/* Dialog content inner */
.dialog-content-inner[b-quzbmv4vnr] {
    padding: 0;
}

.dialog-content-inner p[b-quzbmv4vnr] {
    font-size: 13px;
    color: #242424;
    margin: 0 0 12px 0;
}

/* ========================================
   DRAWER TAB NAVIGATION
   ======================================== */
.drawer-tabs[b-quzbmv4vnr] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #EBEBEB;
    margin-bottom: 16px;
    padding: 0;
}

.drawer-tab[b-quzbmv4vnr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: #9E9E9E;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.drawer-tab:hover[b-quzbmv4vnr] {
    color: #616161;
}

.drawer-tab.active[b-quzbmv4vnr] {
    color: #0078D4;
    border-bottom-color: #0078D4;
}

.drawer-tab i[b-quzbmv4vnr] {
    font-size: 12px;
}

.tab-count[b-quzbmv4vnr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #E8E8E8;
    color: #616161;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.drawer-tab.active .tab-count[b-quzbmv4vnr] {
    background: #0078D4;
    color: #FFFFFF;
}

/* ========================================
   ACTIVITY HISTORY TIMELINE
   ======================================== */
.history-timeline[b-quzbmv4vnr] {
    position: relative;
    padding-left: 24px;
}

.history-timeline[b-quzbmv4vnr]::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: #E0E0E0;
    border-radius: 1px;
}

.timeline-entry[b-quzbmv4vnr] {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
}

.timeline-entry:last-child[b-quzbmv4vnr] {
    padding-bottom: 0;
}

.timeline-dot[b-quzbmv4vnr] {
    position: absolute;
    left: -24px;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.timeline-dot i[b-quzbmv4vnr] {
    font-size: 9px;
    color: #9E9E9E;
}

.timeline-content[b-quzbmv4vnr] {
    flex: 1;
    min-width: 0;
}

.timeline-action[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 600;
    color: #323130;
    line-height: 1.3;
}

.timeline-description[b-quzbmv4vnr] {
    font-size: 12px;
    color: #616161;
    margin-top: 2px;
    line-height: 1.4;
}

.timeline-meta[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    font-size: 11px;
    color: #9E9E9E;
}

.timeline-user i[b-quzbmv4vnr] {
    margin-right: 3px;
    font-size: 10px;
}

.timeline-time[b-quzbmv4vnr] {
    white-space: nowrap;
}

/* ========================================
   SLA ALERT BADGE (Header Stats)
   ======================================== */
.sla-alert-card[b-quzbmv4vnr] {
    position: relative;
}

.stat-value.sla-alert[b-quzbmv4vnr] {
    color: #D13438;
    font-weight: 700;
}

.stat-label .sla-icon[b-quzbmv4vnr] {
    color: #D13438;
    font-size: 10px;
    margin-right: 2px;
}

/* ── Ticket Cards ── */
.ticket-list[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.ticket-card[b-quzbmv4vnr] {
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--divider, #E0E0E0);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.15s ease;
}

.ticket-card:hover[b-quzbmv4vnr] {
    border-color: var(--brand, #0078D4);
}

.ticket-card-top[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ticket-passenger[b-quzbmv4vnr] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.ticket-passenger-name[b-quzbmv4vnr] {
    font-weight: 600;
    font-size: 13px;
    color: var(--fg-primary, #242424);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-passport[b-quzbmv4vnr] {
    font-size: 11px;
    color: var(--fg-secondary, #616161);
    font-family: 'Cascadia Code', 'Consolas', monospace;
    letter-spacing: 0.5px;
}

.ticket-verified[b-quzbmv4vnr] {
    font-size: 11px;
    color: #107C10;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ticket-unverified[b-quzbmv4vnr] {
    font-size: 11px;
    color: #797775;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ticket-flight[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--fg-secondary, #616161);
}

.ticket-airline[b-quzbmv4vnr] {
    font-weight: 600;
    color: var(--fg-primary, #242424);
}

.ticket-flight-num[b-quzbmv4vnr] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    letter-spacing: 0.3px;
}

.ticket-route[b-quzbmv4vnr] {
    color: var(--fg-primary, #242424);
}

.ticket-schedule[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--fg-secondary, #616161);
}

.ticket-schedule i[b-quzbmv4vnr] {
    font-size: 11px;
    margin-right: 4px;
    color: var(--brand, #0078D4);
}

.ticket-details[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--fg-secondary, #616161);
}

.ticket-card-bottom[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--divider, #E0E0E0);
    margin-top: 2px;
}

.ticket-price[b-quzbmv4vnr] {
    font-weight: 700;
    font-size: 13px;
    color: var(--fg-primary, #242424);
}

.ticket-price-breakdown[b-quzbmv4vnr] {
    font-size: 11px;
    color: var(--fg-secondary, #616161);
    font-weight: 400;
    margin-left: 4px;
}

.ticket-uploaded[b-quzbmv4vnr] {
    font-size: 11px;
    color: var(--fg-secondary, #616161);
}

.ticket-docs-sub-header[b-quzbmv4vnr] {
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-secondary, #616161);
    padding: 8px 0 4px;
    border-top: 1px solid var(--divider, #E0E0E0);
    margin-top: 4px;
}

.btn-verify-all[b-quzbmv4vnr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background: var(--brand, #0078D4);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.btn-verify-all:hover[b-quzbmv4vnr] {
    background: #106EBE;
}

.btn-verify-all:disabled[b-quzbmv4vnr] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Amendments --- */
.amendment-list[b-quzbmv4vnr] { display: flex; flex-direction: column; gap: 8px; }

.amendment-item[b-quzbmv4vnr] {
    background: var(--bg-primary, #ffffff);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
}

.amendment-header[b-quzbmv4vnr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.amendment-number[b-quzbmv4vnr] {
    font-weight: 600;
    font-size: 13px;
    color: var(--fg-primary, #242424);
}

.amendment-type-tag[b-quzbmv4vnr] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.amendment-type-tag.status-pending[b-quzbmv4vnr] { background: #fff3cd; color: #856404; }
.amendment-type-tag.status-processing[b-quzbmv4vnr] { background: #cce5ff; color: #004085; }
.amendment-type-tag.status-completed[b-quzbmv4vnr] { background: #d4edda; color: #155724; }
.amendment-type-tag.status-rejected[b-quzbmv4vnr] { background: #f8d7da; color: #721c24; }
.amendment-type-tag.status-cancelled[b-quzbmv4vnr] { background: #e2e3e5; color: #383d41; }

.amendment-type[b-quzbmv4vnr] {
    font-size: 12px;
    color: var(--brand, #0078D4);
    margin-bottom: 4px;
}

.amendment-desc[b-quzbmv4vnr] {
    font-size: 13px;
    color: var(--fg-primary, #242424);
    margin-bottom: 6px;
    line-height: 1.4;
}

.amendment-values[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 6px;
    padding: 6px 8px;
    background: var(--bg-secondary, #FAFAF9);
    border-radius: 6px;
}

.amendment-val-old[b-quzbmv4vnr] {
    color: #dc3545;
    text-decoration: line-through;
}

.amendment-arrow[b-quzbmv4vnr] {
    color: #6c757d;
    font-size: 10px;
}

.amendment-val-new[b-quzbmv4vnr] {
    color: #28a745;
    font-weight: 600;
}

.amendment-candidate[b-quzbmv4vnr] {
    font-size: 12px;
    color: #555;
    margin-bottom: 4px;
}

.amendment-fee[b-quzbmv4vnr] {
    font-size: 12px;
    margin-bottom: 4px;
}

.fee-accepted[b-quzbmv4vnr] { color: #28a745; margin-left: 6px; font-size: 11px; }
.fee-rejected[b-quzbmv4vnr] { color: #dc3545; margin-left: 6px; font-size: 11px; }

.amendment-vendor-notes[b-quzbmv4vnr] {
    font-size: 12px;
    color: #6c757d;
    font-style: italic;
    margin-bottom: 4px;
    padding: 4px 8px;
    background: #f8f9fa;
    border-radius: 4px;
}

.amendment-meta[b-quzbmv4vnr] {
    font-size: 11px;
    color: #888;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Amendment Form */
.amendment-form[b-quzbmv4vnr] { display: flex; flex-direction: column; gap: 12px; }
.amendment-form .form-group[b-quzbmv4vnr] { display: flex; flex-direction: column; gap: 4px; }
.amendment-form .form-group label[b-quzbmv4vnr] { font-size: 12px; font-weight: 600; color: var(--fg-primary, #242424); }
.amendment-form .required[b-quzbmv4vnr] { color: #dc3545; }
.amendment-form .form-row[b-quzbmv4vnr] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.amendment-form .form-select[b-quzbmv4vnr],
.amendment-form .form-control[b-quzbmv4vnr] {
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-family: 'Segoe UI', sans-serif;
}
.amendment-form textarea.form-control[b-quzbmv4vnr] { resize: vertical; min-height: 60px; }

/* ======================================================================
   CANCELLATIONS SECTION
   ====================================================================== */

.cancellation-list[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cancellation-item[b-quzbmv4vnr] {
    border: 1px solid var(--border-light, #E0E0E0);
    border-radius: 8px;
    padding: 12px;
    background: var(--bg-primary, #FFFFFF);
    transition: box-shadow 0.15s ease;
}

.cancellation-item:hover[b-quzbmv4vnr] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cancellation-header[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cancellation-number[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand, #0078D4);
}

.cancellation-status-tag[b-quzbmv4vnr] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.cancellation-status-tag.status-pending[b-quzbmv4vnr] { background: #fff3cd; color: #856404; }
.cancellation-status-tag.status-processing[b-quzbmv4vnr] { background: #cce5ff; color: #004085; }
.cancellation-status-tag.status-completed[b-quzbmv4vnr] { background: #d4edda; color: #155724; }
.cancellation-status-tag.status-rejected[b-quzbmv4vnr] { background: #f8d7da; color: #721c24; }
.cancellation-status-tag.status-cancelled[b-quzbmv4vnr] { background: #e2e3e5; color: #383d41; }

.cancellation-passenger[b-quzbmv4vnr] {
    font-size: 13px;
    color: var(--fg-primary, #242424);
    margin-bottom: 4px;
}

.cancellation-ticket[b-quzbmv4vnr] {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 4px;
}

.cancellation-type[b-quzbmv4vnr] {
    font-size: 12px;
    color: var(--brand, #0078D4);
    margin-bottom: 4px;
}

.cancellation-reason[b-quzbmv4vnr] {
    font-size: 12px;
    color: #555;
    font-style: italic;
    margin-bottom: 8px;
    padding: 4px 8px;
    background: #f8f9fa;
    border-radius: 4px;
}

.cancellation-financials[b-quzbmv4vnr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    padding: 8px;
    background: var(--bg-secondary, #FAFAF9);
    border-radius: 6px;
    margin-bottom: 8px;
}

.fin-item[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fin-label[b-quzbmv4vnr] {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.fin-value[b-quzbmv4vnr] {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-primary, #242424);
}

.fin-penalty .fin-value[b-quzbmv4vnr] {
    color: #dc3545;
}

.fin-refund .fin-value[b-quzbmv4vnr] {
    color: #28a745;
}

.fin-pct .fin-value[b-quzbmv4vnr] {
    color: #856404;
}

.cancellation-refund-status[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.refund-tag[b-quzbmv4vnr] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.refund-pending[b-quzbmv4vnr] { background: #fff3cd; color: #856404; }
.refund-processed[b-quzbmv4vnr] { background: #d4edda; color: #155724; }
.refund-partial[b-quzbmv4vnr] { background: #cce5ff; color: #004085; }
.refund-rejected[b-quzbmv4vnr] { background: #f8d7da; color: #721c24; }

.refund-ref[b-quzbmv4vnr] {
    font-size: 11px;
    color: #6c757d;
}

.cancellation-meta[b-quzbmv4vnr] {
    font-size: 11px;
    color: #888;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ======================================================================
   VENDOR PERFORMANCE DIALOG
   ====================================================================== */

.vp-loading[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: #6c757d;
    font-size: 13px;
}

.vp-list[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vp-card[b-quzbmv4vnr] {
    border: 1px solid var(--border-light, #E0E0E0);
    border-radius: 8px;
    padding: 16px;
    background: var(--bg-primary, #FFFFFF);
    transition: box-shadow 0.15s ease;
}

.vp-card:hover[b-quzbmv4vnr] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.vp-card-header[b-quzbmv4vnr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.vp-vendor-name[b-quzbmv4vnr] {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg-primary, #242424);
}

.vp-rating[b-quzbmv4vnr] {
    display: flex;
    gap: 2px;
    font-size: 13px;
}

.vp-rating .fa-solid.fa-star[b-quzbmv4vnr] {
    color: #f5a623;
}

.vp-rating .fa-regular.fa-star[b-quzbmv4vnr] {
    color: #d0d0d0;
}

.vp-metrics[b-quzbmv4vnr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.vp-metric[b-quzbmv4vnr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background: var(--bg-secondary, #FAFAF9);
    border-radius: 6px;
}

.vp-metric-label[b-quzbmv4vnr] {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
}

.vp-metric-value[b-quzbmv4vnr] {
    font-size: 16px;
    font-weight: 700;
    color: var(--fg-primary, #242424);
}

.vp-metric-value.metric-good[b-quzbmv4vnr] { color: #28a745; }
.vp-metric-value.metric-warn[b-quzbmv4vnr] { color: #e0a800; }
.vp-metric-value.metric-bad[b-quzbmv4vnr] { color: #dc3545; }

.vp-stats-row[b-quzbmv4vnr] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.vp-stat[b-quzbmv4vnr] {
    font-size: 12px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 4px;
}

.vp-stat-won[b-quzbmv4vnr] {
    color: #28a745;
    font-weight: 600;
}

.vp-stat-breach[b-quzbmv4vnr] {
    color: #dc3545;
    font-weight: 600;
}
/* /Components/Pages/MainLayout/FlightTicket/BulkBooking/BulkCandidateList.razor.rz.scp.css */
/* ===== Drawer Structure ===== */
.drawer-overlay[b-8vakaume1e] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1050;
    display: flex;
    justify-content: flex-end;
}

.drawer-panel[b-8vakaume1e] {
    width: 560px;
    max-width: 92vw;
    height: 100%;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #E0E0E0;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    animation: drawerSlideIn-b-8vakaume1e 0.25s ease-out;
}

.drawer-header[b-8vakaume1e] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    min-height: 40px;
    padding: 0 16px;
    background: #FAFAF9;
    border-bottom: 1px solid #E0E0E0;
}

.drawer-header-icon[b-8vakaume1e] {
    font-size: 14px;
    color: #0078D4;
}

.drawer-header-title[b-8vakaume1e] {
    font-size: 14px;
    font-weight: 600;
    color: #242424;
}

.drawer-header-subtitle[b-8vakaume1e] {
    font-size: 12px;
    color: #616161;
    margin-left: auto;
    margin-right: 8px;
    font-family: 'Consolas', 'Courier New', monospace;
}

.btn-close-drawer[b-8vakaume1e] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #616161;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background-color 0.15s, color 0.15s;
}

.btn-close-drawer:hover[b-8vakaume1e] {
    background: #E0E0E0;
    color: #242424;
}

/* ===== Step Indicator ===== */
.step-indicator[b-8vakaume1e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 10px 16px;
    background: #FAFAF9;
    border-bottom: 1px solid #E0E0E0;
}

.step[b-8vakaume1e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.step-num[b-8vakaume1e] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    background: #E0E0E0;
    color: #9E9E9E;
}

.step.active .step-num[b-8vakaume1e] {
    background: #0078D4;
    color: #FFFFFF;
}

.step.completed .step-num[b-8vakaume1e] {
    background: #107C10;
    color: #FFFFFF;
}

.step-label[b-8vakaume1e] {
    font-size: 12px;
    color: #9E9E9E;
}

.step.active .step-label[b-8vakaume1e] {
    color: #0078D4;
    font-weight: 600;
}

.step.completed .step-label[b-8vakaume1e] {
    color: #107C10;
}

.step-connector[b-8vakaume1e] {
    width: 24px;
    height: 1px;
    background: #E0E0E0;
    margin: 0 4px;
    margin-bottom: 18px;
}

/* ===== Drawer Body ===== */
.drawer-body[b-8vakaume1e] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===== Drawer Footer ===== */
.drawer-footer[b-8vakaume1e] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    height: 44px;
    min-height: 44px;
    padding: 0 16px;
    background: #FAFAF9;
    border-top: 1px solid #E0E0E0;
}

[b-8vakaume1e] .btn-drawer-default {
    font-size: 13px !important;
    height: 30px !important;
}

[b-8vakaume1e] .btn-drawer-primary {
    font-size: 13px !important;
    height: 30px !important;
    background: #0078D4 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 4px !important;
}

[b-8vakaume1e] .btn-drawer-primary:hover {
    background: #106EBE !important;
}

/* ===== Filters Bar ===== */
.filters-bar[b-8vakaume1e] {
    background: #FFFFFF;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #E0E0E0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.filter-group[b-8vakaume1e] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label[b-8vakaume1e] {
    font-size: 12px;
    font-weight: 500;
    color: #616161;
    white-space: nowrap;
}

/* ===== Grid Card ===== */
.grid-card[b-8vakaume1e] {
    background: #FFFFFF;
    border-radius: 6px;
    border: 1px solid #E0E0E0;
    padding: 1px;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.loading-state[b-8vakaume1e] {
    padding: 40px;
    text-align: center;
    color: #616161;
}

/* ===== Status Badges ===== */
.status-badge[b-8vakaume1e] {
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.status-badge.pending[b-8vakaume1e] {
    background: #FFF4CE;
    color: #835C00;
}

.status-badge.booked[b-8vakaume1e] {
    background: #DFF6DD;
    color: #0E700E;
}

.status-badge.cancelled[b-8vakaume1e] {
    background: #FDE7E9;
    color: #C4314B;
}

/* ===== Action Buttons ===== */
.action-buttons[b-8vakaume1e] {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.btn-icon[b-8vakaume1e] {
    background: none;
    border: none;
    color: #616161;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.15s, color 0.15s;
    font-size: 13px;
}

.btn-icon:hover[b-8vakaume1e] {
    background: #F0F0F0;
    color: #0078D4;
}

/* ===== Candidate Detail Overlay (above drawer) ===== */
.detail-overlay[b-8vakaume1e] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1060;
    display: flex;
    justify-content: flex-end;
}

.detail-panel[b-8vakaume1e] {
    width: 440px;
    max-width: 85vw;
    height: 100%;
    background: #FFFFFF;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    animation: drawerSlideIn-b-8vakaume1e 0.2s ease-out;
}

.detail-header[b-8vakaume1e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #E0E0E0;
    background: #FAFAF9;
}

.detail-header h2[b-8vakaume1e] {
    font-size: 14px;
    font-weight: 600;
    color: #242424;
    margin: 0;
}

.detail-body[b-8vakaume1e] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-section h3[b-8vakaume1e] {
    font-size: 12px;
    font-weight: 600;
    color: #616161;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 10px 0;
}

.detail-grid[b-8vakaume1e] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.detail-field[b-8vakaume1e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-label[b-8vakaume1e] {
    font-size: 11px;
    color: #9E9E9E;
    font-weight: 500;
}

.detail-value[b-8vakaume1e] {
    font-size: 13px;
    color: #242424;
}

/* ===== Animation ===== */
@keyframes drawerSlideIn-b-8vakaume1e {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}
/* /Components/Pages/MainLayout/FlightTicket/BulkBooking/BulkCandidateUpload.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   BulkCandidateUpload — Drawer Layout (560px)
   Scoped CSS · BEC Design Tokens · 8px grid
   ═══════════════════════════════════════════════════════════════ */

/* ── Drawer Overlay & Panel ─────────────────────────────────── */
.drawer-overlay[b-dgqk9hqxs5] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1050;
    display: flex;
    justify-content: flex-end;
}

.drawer-panel[b-dgqk9hqxs5] {
    width: 720px;
    max-width: 92vw;
    height: 100vh;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #E0E0E0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
    animation: drawerSlideIn-b-dgqk9hqxs5 0.25s ease-out;
}

@keyframes drawerSlideIn-b-dgqk9hqxs5 {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ── Drawer Header (40px) ───────────────────────────────────── */
.drawer-header[b-dgqk9hqxs5] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    min-height: 40px;
    padding: 0 16px;
    background: #FAFAF9;
    border-bottom: 1px solid #E0E0E0;
}

.drawer-header-icon[b-dgqk9hqxs5] {
    color: #0078D4;
    font-size: 14px;
}

.drawer-header-title[b-dgqk9hqxs5] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-close-drawer[b-dgqk9hqxs5] {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #616161;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
    flex-shrink: 0;
}

.btn-close-drawer:hover[b-dgqk9hqxs5] {
    background: #E0E0E0;
    color: #242424;
}

/* ── Step Indicator ─────────────────────────────────────────── */
.step-indicator[b-dgqk9hqxs5] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #FAFAF9;
    border-bottom: 1px solid #E0E0E0;
    gap: 0;
}

.step[b-dgqk9hqxs5] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9E9E9E;
    white-space: nowrap;
}

.step.active[b-dgqk9hqxs5] {
    color: #0078D4;
    font-weight: 600;
}

.step.completed[b-dgqk9hqxs5] {
    color: #107C10;
}

.step-num[b-dgqk9hqxs5] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    border: 1.5px solid #9E9E9E;
    color: #9E9E9E;
    flex-shrink: 0;
}

.step.active .step-num[b-dgqk9hqxs5] {
    border-color: #0078D4;
    background: #0078D4;
    color: #FFFFFF;
}

.step.completed .step-num[b-dgqk9hqxs5] {
    border-color: #107C10;
    background: #107C10;
    color: #FFFFFF;
}

.step-label[b-dgqk9hqxs5] {
    font-size: 12px;
}

.step-connector[b-dgqk9hqxs5] {
    width: 24px;
    height: 1px;
    background: #E0E0E0;
    margin: 0 4px;
    flex-shrink: 0;
}

/* ── Drawer Body (scrollable) ───────────────────────────────── */
.drawer-body[b-dgqk9hqxs5] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* ── Drawer Footer (44px) ───────────────────────────────────── */
.drawer-footer[b-dgqk9hqxs5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: 44px;
    min-height: 44px;
    padding: 0 16px;
    background: #FAFAF9;
    border-top: 1px solid #E0E0E0;
}

/* ── Upload Card ────────────────────────────────────────────── */
.upload-card[b-dgqk9hqxs5] {
    background: #FAFAF9;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 12px;
}

.upload-card.minimized[b-dgqk9hqxs5] {
    padding: 10px 16px;
}

.card-header[b-dgqk9hqxs5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.upload-card.minimized .card-header[b-dgqk9hqxs5] {
    margin-bottom: 0;
}

.card-header h3[b-dgqk9hqxs5] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-header h3 i[b-dgqk9hqxs5] {
    color: #0078D4;
    font-size: 12px;
}

/* ── Drop Zone ──────────────────────────────────────────────── */
.drop-zone[b-dgqk9hqxs5] {
    border: 2px dashed #D1D1D1;
    border-radius: 6px;
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: #FFFFFF;
}

.drop-zone i[b-dgqk9hqxs5] {
    font-size: 32px;
    color: #9E9E9E;
}

.drop-zone p[b-dgqk9hqxs5] {
    font-size: 12px;
    color: #616161;
    margin: 0;
    text-align: center;
}

.btn-browse[b-dgqk9hqxs5] {
    background: #0078D4;
    color: #FFFFFF;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-block;
}

.btn-browse:hover[b-dgqk9hqxs5] {
    background: #106EBE;
}

.btn-browse input[b-dgqk9hqxs5] {
    display: none;
}

.file-hint[b-dgqk9hqxs5] {
    font-size: 11px;
    color: #9E9E9E;
}

/* ── File Summary (after selection) ─────────────────────────── */
.file-summary[b-dgqk9hqxs5] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    padding: 8px 12px;
    border-radius: 4px;
}

.file-icon[b-dgqk9hqxs5] {
    width: 24px;
    height: 24px;
    background: #107C10;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.file-info .count[b-dgqk9hqxs5] {
    font-weight: 700;
    color: #107C10;
    font-size: 14px;
    margin-right: 4px;
}

.file-info .label[b-dgqk9hqxs5] {
    color: #107C10;
    font-size: 12px;
}

/* ── Template Download ──────────────────────────────────────── */
.template-download[b-dgqk9hqxs5] {
    margin-top: 12px;
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid #F0F0F0;
    font-size: 12px;
    color: #9E9E9E;
}

.template-download p[b-dgqk9hqxs5] {
    margin: 0 0 4px 0;
}

.btn-link[b-dgqk9hqxs5] {
    color: #0078D4;
    text-decoration: none;
    font-weight: 500;
    margin-left: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}

.btn-link:hover:not(:disabled)[b-dgqk9hqxs5] {
    text-decoration: underline;
}

.btn-link:disabled[b-dgqk9hqxs5] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-reset[b-dgqk9hqxs5] {
    background: none;
    border: none;
    color: #9E9E9E;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-reset:hover[b-dgqk9hqxs5] {
    color: #0078D4;
}

/* ── Preview Card ───────────────────────────────────────────── */
.preview-card[b-dgqk9hqxs5] {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    padding: 12px;
}

.grid-container[b-dgqk9hqxs5] {
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #E0E0E0;
}

/* ── Processing Overlay ─────────────────────────────────────── */
.processing-overlay[b-dgqk9hqxs5] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
}

.processing-content[b-dgqk9hqxs5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    padding: 24px 32px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
/* /Components/Pages/MainLayout/FlightTicket/DateNegotiation/DateNegotiationTimeline.razor.rz.scp.css */
/* ============================================================================
   Date Negotiation Timeline Styles
   ============================================================================ */

.negotiation-timeline-container[b-4jld7lorib] {
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* Loading State */
.timeline-loading[b-4jld7lorib] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px;
    color: var(--text-secondary, #6b7280);
}

.timeline-loading .spinner[b-4jld7lorib] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color, #e5e7eb);
    border-top-color: var(--primary-color, #3b82f6);
    border-radius: 50%;
    animation: spin-b-4jld7lorib 1s linear infinite;
}

@keyframes spin-b-4jld7lorib {
    to { transform: rotate(360deg); }
}

/* Empty State */
.timeline-empty[b-4jld7lorib] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px;
    color: var(--text-secondary, #9ca3af);
    background: var(--bg-secondary, #f9fafb);
    border-radius: 8px;
}

.timeline-empty i[b-4jld7lorib] {
    font-size: 32px;
    opacity: 0.5;
}

/* Header */
.timeline-header[b-4jld7lorib] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.timeline-stats[b-4jld7lorib] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.timeline-stats .stat[b-4jld7lorib] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 20px;
    color: var(--text-primary, #374151);
}

.timeline-stats .stat i[b-4jld7lorib] {
    color: var(--primary-color, #3b82f6);
}

.timeline-stats .stat.rejected i[b-4jld7lorib] {
    color: #ef4444;
}

.timeline-stats .stat.confirmed[b-4jld7lorib] {
    background: #dcfce7;
    color: #166534;
}

.timeline-stats .stat.confirmed i[b-4jld7lorib] {
    color: #22c55e;
}

/* Timeline Entries */
.timeline-entries[b-4jld7lorib] {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.timeline-entries[b-4jld7lorib]::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color, #e5e7eb);
}

.timeline-entry[b-4jld7lorib] {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    position: relative;
}

.timeline-entry:last-child[b-4jld7lorib] {
    padding-bottom: 0;
}

/* Entry Icon */
.entry-icon[b-4jld7lorib] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid var(--border-color, #e5e7eb);
    z-index: 1;
    font-size: 16px;
}

.timeline-entry.blue .entry-icon[b-4jld7lorib] {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}

.timeline-entry.green .entry-icon[b-4jld7lorib] {
    border-color: #22c55e;
    color: #22c55e;
    background: #f0fdf4;
}

.timeline-entry.red .entry-icon[b-4jld7lorib] {
    border-color: #ef4444;
    color: #ef4444;
    background: #fef2f2;
}

.timeline-entry.orange .entry-icon[b-4jld7lorib] {
    border-color: #f97316;
    color: #f97316;
    background: #fff7ed;
}

.timeline-entry.gray .entry-icon[b-4jld7lorib] {
    border-color: #9ca3af;
    color: #9ca3af;
    background: #f9fafb;
}

/* Entry Content */
.entry-content[b-4jld7lorib] {
    flex: 1;
    background: var(--bg-secondary, #f9fafb);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--border-color, #e5e7eb);
}

.entry-header[b-4jld7lorib] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.entry-type[b-4jld7lorib] {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary, #1f2937);
}

.entry-time[b-4jld7lorib] {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
}

.entry-actor[b-4jld7lorib] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
}

.actor-badge[b-4jld7lorib] {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

.actor-badge.vendor[b-4jld7lorib] {
    background: #dbeafe;
    color: #1d4ed8;
}

.actor-badge.traveler[b-4jld7lorib] {
    background: #fef3c7;
    color: #92400e;
}

.actor-badge.system[b-4jld7lorib] {
    background: #e5e7eb;
    color: #4b5563;
}

.entry-message[b-4jld7lorib] {
    background: white;
    padding: 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary, #4b5563);
    font-style: italic;
    margin-bottom: 12px;
    border-left: 3px solid var(--border-color, #d1d5db);
}

.entry-message i[b-4jld7lorib] {
    color: #9ca3af;
    margin-right: 6px;
    font-size: 11px;
}

/* Options Grid */
.entry-options[b-4jld7lorib] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.option-card[b-4jld7lorib] {
    background: white;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 12px;
    position: relative;
    transition: all 0.2s;
}

.option-card.recommended[b-4jld7lorib] {
    border-color: #22c55e;
    box-shadow: 0 0 0 1px #22c55e;
}

.option-card.selected[b-4jld7lorib] {
    border-color: #3b82f6;
    background: #eff6ff;
}

.recommended-badge[b-4jld7lorib] {
    position: absolute;
    top: -8px;
    right: 8px;
    background: #22c55e;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.recommended-badge i[b-4jld7lorib] {
    margin-right: 4px;
}

.option-date[b-4jld7lorib] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.option-date strong[b-4jld7lorib] {
    font-size: 14px;
    color: var(--text-primary, #1f2937);
}

.days-diff[b-4jld7lorib] {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}

.days-diff.plus[b-4jld7lorib] {
    background: #fef3c7;
    color: #92400e;
}

.days-diff.minus[b-4jld7lorib] {
    background: #dbeafe;
    color: #1d4ed8;
}

.days-diff.same[b-4jld7lorib] {
    background: #e5e7eb;
    color: #4b5563;
}

.option-flight[b-4jld7lorib] {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 4px;
}

.option-flight .airline[b-4jld7lorib] {
    font-weight: 500;
}

.option-flight .flight-number[b-4jld7lorib] {
    margin-left: 6px;
    color: #9ca3af;
}

.option-time[b-4jld7lorib] {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
}

.option-time i[b-4jld7lorib] {
    margin-right: 4px;
    color: #9ca3af;
}

.option-time i:last-of-type[b-4jld7lorib] {
    margin-left: 12px;
}

.option-price[b-4jld7lorib] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color, #e5e7eb);
    font-size: 13px;
    color: #059669;
}

.selected-badge[b-4jld7lorib] {
    margin-top: 8px;
    padding: 4px 8px;
    background: #3b82f6;
    color: white;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

/* Accepted Option */
.accepted-option[b-4jld7lorib] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #dcfce7;
    border-radius: 6px;
    font-size: 13px;
    color: #166534;
}

.accepted-option i[b-4jld7lorib] {
    color: #22c55e;
}

.accepted-option .flight[b-4jld7lorib] {
    margin-left: auto;
    color: #15803d;
    font-weight: 500;
}

/* Email Info */
.entry-email[b-4jld7lorib] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    font-size: 11px;
    color: var(--text-tertiary, #9ca3af);
}

.entry-email i[b-4jld7lorib] {
    color: #9ca3af;
}

.entry-email .cc[b-4jld7lorib] {
    color: #6b7280;
}

/* Amber color for counter-proposal events */
.timeline-entry.amber .entry-icon[b-4jld7lorib] {
    border-color: #f59e0b;
    color: #f59e0b;
    background: #fffbeb;
}

/* Counter-Proposal Styles */
.entry-counter-proposal[b-4jld7lorib] {
    margin-top: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border: 1px solid #F59E0B;
    border-radius: 8px;
}

.counter-proposal-header[b-4jld7lorib] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #92400E;
    margin-bottom: 12px;
}

.suggestion-cards[b-4jld7lorib] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.suggestion-card[b-4jld7lorib] {
    flex: 1;
    min-width: 140px;
    max-width: 180px;
    padding: 12px;
    background: white;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    text-align: center;
    transition: all 0.2s ease;
}

.suggestion-card.preferred[b-4jld7lorib] {
    border-color: #F59E0B;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.suggestion-card.accepted[b-4jld7lorib] {
    border-color: #10B981;
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
}

.preferred-badge[b-4jld7lorib] {
    display: inline-block;
    padding: 2px 8px;
    background: #FEF3C7;
    color: #92400E;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    margin-bottom: 8px;
}

.suggestion-date[b-4jld7lorib] {
    font-size: 16px;
    color: #1F2937;
    margin: 8px 0;
}

.suggestion-meta[b-4jld7lorib] {
    font-size: 11px;
    color: #6B7280;
}

.suggestion-meta .flexible[b-4jld7lorib] {
    color: #059669;
}

.suggestion-meta .fixed[b-4jld7lorib] {
    color: #DC2626;
}

.suggestion-note[b-4jld7lorib] {
    margin-top: 8px;
    padding: 8px;
    background: #F3F4F6;
    border-radius: 4px;
    font-size: 11px;
    color: #4B5563;
    text-align: left;
}

.suggestion-card .accepted-badge[b-4jld7lorib] {
    margin-top: 8px;
    padding: 4px 8px;
    background: #10B981;
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
}

.vendor-accepted-suggestion[b-4jld7lorib] {
    margin-top: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    border: 1px solid #10B981;
    border-radius: 8px;
    color: #065F46;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vendor-accepted-suggestion i[b-4jld7lorib] {
    font-size: 18px;
}

/* Responsive */
@media (max-width: 768px) {
    .timeline-entries[b-4jld7lorib]::before {
        left: 15px;
    }
    
    .entry-icon[b-4jld7lorib] {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 14px;
    }
    
    .entry-options[b-4jld7lorib] {
        grid-template-columns: 1fr;
    }
    
    .entry-header[b-4jld7lorib] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .suggestion-cards[b-4jld7lorib] {
        flex-direction: column;
    }
    
    .suggestion-card[b-4jld7lorib] {
        max-width: 100%;
    }
}

/* /Components/Pages/MainLayout/FlightTicket/DateNegotiation/DateProposalForm.razor.rz.scp.css */
/* ============================================================================
   Date Proposal Form Styles
   ============================================================================ */

.date-proposal-form[b-fxopxfr1i5] {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

/* Header */
.proposal-header[b-fxopxfr1i5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    user-select: none;
    transition: background 0.2s;
}

.proposal-header:hover[b-fxopxfr1i5] {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
}

.header-left[b-fxopxfr1i5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-left i:first-child[b-fxopxfr1i5] {
    font-size: 12px;
    color: #92400e;
    width: 12px;
}

.header-icon[b-fxopxfr1i5] {
    font-size: 16px;
    color: #d97706;
}

.header-title[b-fxopxfr1i5] {
    font-weight: 600;
    color: #92400e;
    font-size: 14px;
}

.header-badge .option-count[b-fxopxfr1i5] {
    background: #d97706;
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.header-badge .optional-tag[b-fxopxfr1i5] {
    color: #92400e;
    font-size: 12px;
    opacity: 0.7;
}

/* Body */
.proposal-body[b-fxopxfr1i5] {
    padding: 16px;
    background: white;
    border-top: 1px solid #fcd34d;
}

/* Info Banner */
.info-banner[b-fxopxfr1i5] {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: #fef9e7;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #92400e;
}

.info-banner i[b-fxopxfr1i5] {
    color: #d97706;
    margin-top: 2px;
}

.info-banner strong[b-fxopxfr1i5] {
    display: block;
    margin-bottom: 4px;
}

/* Original Dates */
.original-dates[b-fxopxfr1i5] {
    background: #f3f4f6;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 13px;
}

.original-dates .label[b-fxopxfr1i5] {
    color: #6b7280;
    margin-right: 8px;
}

.original-dates .date[b-fxopxfr1i5] {
    font-weight: 600;
    color: #1f2937;
}

/* Form Groups */
.form-group[b-fxopxfr1i5] {
    margin-bottom: 16px;
}

.form-group label[b-fxopxfr1i5] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.form-group label i[b-fxopxfr1i5] {
    color: #6b7280;
    font-size: 12px;
}

.message-input[b-fxopxfr1i5] {
    min-height: 80px;
}

/* Urgency Options */
.urgency-options[b-fxopxfr1i5] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.urgency-option[b-fxopxfr1i5] {
    flex: 1;
    min-width: 140px;
    cursor: pointer;
}

.urgency-option input[b-fxopxfr1i5] {
    display: none;
}

.option-content[b-fxopxfr1i5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s;
}

.urgency-option:hover .option-content[b-fxopxfr1i5] {
    border-color: #d1d5db;
    background: #f3f4f6;
}

.urgency-option.selected .option-content[b-fxopxfr1i5] {
    border-color: #d97706;
    background: #fef3c7;
}

.option-content i[b-fxopxfr1i5] {
    font-size: 20px;
    color: #6b7280;
}

.urgency-option.selected .option-content i[b-fxopxfr1i5] {
    color: #d97706;
}

.option-content.urgent i[b-fxopxfr1i5] {
    color: #dc2626;
}

.option-label[b-fxopxfr1i5] {
    font-weight: 600;
    font-size: 13px;
    color: #374151;
}

.option-desc[b-fxopxfr1i5] {
    font-size: 11px;
    color: #6b7280;
}

/* Options Section */
.options-section[b-fxopxfr1i5] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.section-header[b-fxopxfr1i5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header h4[b-fxopxfr1i5] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-header h4 i[b-fxopxfr1i5] {
    color: #d97706;
}

.add-option-btn[b-fxopxfr1i5] {
    --background: #f3f4f6;
    --color: #374151;
}

/* No Options */
.no-options[b-fxopxfr1i5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 30px;
    background: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    color: #6b7280;
    font-size: 13px;
}

.no-options i[b-fxopxfr1i5] {
    font-size: 32px;
    opacity: 0.5;
}

/* Options List */
.options-list[b-fxopxfr1i5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Option Card */
.option-card[b-fxopxfr1i5] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.option-card.recommended[b-fxopxfr1i5] {
    border-color: #22c55e;
    box-shadow: 0 0 0 1px #22c55e;
}

.option-header[b-fxopxfr1i5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.option-card.recommended .option-header[b-fxopxfr1i5] {
    background: #f0fdf4;
}

.option-number[b-fxopxfr1i5] {
    font-weight: 600;
    font-size: 12px;
    color: #4b5563;
    text-transform: uppercase;
}

.option-actions[b-fxopxfr1i5] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.recommend-toggle[b-fxopxfr1i5] {
    cursor: pointer;
}

.recommend-toggle input[b-fxopxfr1i5] {
    display: none;
}

.recommend-toggle i[b-fxopxfr1i5] {
    font-size: 16px;
    color: #d1d5db;
    transition: color 0.2s;
}

.recommend-toggle:hover i[b-fxopxfr1i5] {
    color: #fbbf24;
}

.recommend-toggle input:checked + i[b-fxopxfr1i5] {
    color: #22c55e;
}

.remove-btn[b-fxopxfr1i5] {
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    color: #9ca3af;
    font-size: 14px;
}

.remove-btn:hover[b-fxopxfr1i5] {
    color: #ef4444;
}

/* Option Form */
.option-form[b-fxopxfr1i5] {
    padding: 14px;
}

.form-row[b-fxopxfr1i5] {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.form-row:last-child[b-fxopxfr1i5] {
    margin-bottom: 0;
}

.form-row .form-group[b-fxopxfr1i5] {
    flex: 1;
    margin-bottom: 0;
}

.price-group[b-fxopxfr1i5] {
    max-width: 180px;
}

/* Price Note */
.price-note[b-fxopxfr1i5] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 14px;
    background: #f0f9ff;
    border-radius: 6px;
    font-size: 12px;
    color: #0369a1;
}

.price-note i[b-fxopxfr1i5] {
    color: #0ea5e9;
}

/* Responsive */
@media (max-width: 768px) {
    .urgency-options[b-fxopxfr1i5] {
        flex-direction: column;
    }
    
    .urgency-option[b-fxopxfr1i5] {
        min-width: auto;
    }
    
    .form-row[b-fxopxfr1i5] {
        flex-direction: column;
    }
    
    .price-group[b-fxopxfr1i5] {
        max-width: none;
    }
}

/* /Components/Pages/MainLayout/FlightTicket/DateNegotiation/DateProposalResponsePanel.razor.rz.scp.css */
/* ============================================================================
   Date Proposal Response Panel - FLUENT BLUE THEME
   ============================================================================
   Design: Compact, fast, one-tap date selection
   Theme: Fluent Blue (matching booking dashboard)
   Updated: 2025-12-21
   ============================================================================ */

.proposal-response-panel[b-z9usryt0ka] {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: linear-gradient(135deg, #EFF6FC 0%, #DEECF9 100%);
    border: 2px solid #0078D4;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.proposal-response-panel.expired[b-z9usryt0ka] {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-color: #9ca3af;
}

/* Loading State */
.panel-loading[b-z9usryt0ka] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: #0078D4;
}

.panel-loading .spinner[b-z9usryt0ka],
.chip-spinner[b-z9usryt0ka] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-z9usryt0ka 0.8s linear infinite;
    display: inline-block;
}

.panel-loading .spinner[b-z9usryt0ka] {
    width: 20px;
    height: 20px;
    border-color: #DEECF9;
    border-top-color: #0078D4;
}

@keyframes spin-b-z9usryt0ka {
    to { transform: rotate(360deg); }
}

/* Empty & Expired States */
.panel-empty[b-z9usryt0ka],
.panel-expired[b-z9usryt0ka] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    color: #6b7280;
    font-size: 14px;
}

.panel-empty[b-z9usryt0ka] {
    color: #059669;
    background: #ecfdf5;
    border-radius: 8px;
}

.panel-empty i[b-z9usryt0ka],
.panel-expired i[b-z9usryt0ka] {
    font-size: 18px;
}

/* ===== COMPACT HEADER ===== */
.panel-header-simple[b-z9usryt0ka] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.header-title[b-z9usryt0ka] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #0078D4;
}

.header-title i[b-z9usryt0ka] {
    color: #106EBE;
}

.header-timer[b-z9usryt0ka] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #0078D4;
    background: rgba(255,255,255,0.7);
    padding: 4px 10px;
    border-radius: 12px;
}

.header-timer.urgent[b-z9usryt0ka] {
    background: #fecaca;
    color: #dc2626;
    font-weight: 600;
    animation: pulse-b-z9usryt0ka 2s infinite;
}

@keyframes pulse-b-z9usryt0ka {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ===== VENDOR MESSAGE - COMPACT ===== */
.vendor-message-simple[b-z9usryt0ka] {
    background: rgba(255,255,255,0.7);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #4b5563;
    font-style: italic;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.vendor-message-simple i[b-z9usryt0ka] {
    color: #0078D4;
    font-size: 10px;
    margin-top: 3px;
}

/* ===== ONE-TAP DATE OPTIONS ===== */
.date-options-simple[b-z9usryt0ka] {
    background: white;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}

.options-label[b-z9usryt0ka] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 12px;
}

.options-label i[b-z9usryt0ka] {
    color: #3b82f6;
}

/* ===== DATE CHIPS - ONE TAP ===== */
.date-chips-container[b-z9usryt0ka] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.date-chip[b-z9usryt0ka] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #0ea5e9;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-width: 80px;
}

.date-chip:hover:not(:disabled)[b-z9usryt0ka] {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.3);
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
}

.date-chip:active:not(:disabled)[b-z9usryt0ka] {
    transform: translateY(-1px);
}

.date-chip:disabled[b-z9usryt0ka] {
    opacity: 0.6;
    cursor: not-allowed;
}

.date-chip.recommended[b-z9usryt0ka] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #22c55e;
}

.date-chip.recommended:hover:not(:disabled)[b-z9usryt0ka] {
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3);
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}

.date-chip.processing[b-z9usryt0ka] {
    pointer-events: none;
}

.chip-diff[b-z9usryt0ka] {
    font-size: 14px;
    font-weight: 700;
    color: #0369a1;
}

.date-chip.recommended .chip-diff[b-z9usryt0ka] {
    color: #15803d;
}

.chip-date[b-z9usryt0ka] {
    font-size: 16px;
    font-weight: 600;
    color: #1e40af;
    margin-top: 2px;
}

.date-chip.recommended .chip-date[b-z9usryt0ka] {
    color: #166534;
}

.chip-day[b-z9usryt0ka] {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
}

.chip-badge[b-z9usryt0ka] {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 14px;
}

/* ===== FLIGHT DETAILS TOGGLE ===== */
.flight-details-toggle[b-z9usryt0ka] {
    margin-top: 12px;
    text-align: center;
}

.toggle-btn[b-z9usryt0ka] {
    background: none;
    border: none;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
}

.toggle-btn:hover[b-z9usryt0ka] {
    color: #3b82f6;
}

.flight-details-expanded[b-z9usryt0ka] {
    margin-top: 10px;
    padding: 10px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 12px;
}

.flight-detail-row[b-z9usryt0ka] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #e2e8f0;
}

.flight-detail-row:last-child[b-z9usryt0ka] {
    border-bottom: none;
}

.fdr-date[b-z9usryt0ka] {
    font-weight: 600;
    color: #1e40af;
    min-width: 100px;
}

.fdr-airline[b-z9usryt0ka] {
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 5px;
}

.fdr-airline i[b-z9usryt0ka] {
    color: #0ea5e9;
}

.fdr-time[b-z9usryt0ka] {
    color: #4b5563;
}

/* ===== COUNTER-PROPOSAL SECTION ===== */
.counter-proposal-section[b-z9usryt0ka] {
    margin-top: 4px;
}

.none-work-btn[b-z9usryt0ka] {
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.none-work-btn:hover[b-z9usryt0ka] {
    border-color: #dc2626;
    color: #dc2626;
    background: #fef2f2;
}

/* ===== COUNTER-PROPOSAL PANEL ===== */
.counter-proposal-panel[b-z9usryt0ka] {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
}

.cp-header[b-z9usryt0ka] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.cp-close[b-z9usryt0ka] {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    font-size: 14px;
}

.cp-close:hover[b-z9usryt0ka] {
    color: #64748b;
}

.cp-label[b-z9usryt0ka] {
    font-size: 12px;
    color: #64748b;
    display: block;
    margin-bottom: 8px;
}

/* ===== QUICK DATE CHIPS FOR COUNTER-PROPOSAL ===== */
.cp-quick-dates[b-z9usryt0ka] {
    margin-bottom: 12px;
}

.cp-date-chips[b-z9usryt0ka] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cp-chip[b-z9usryt0ka] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
    min-width: 65px;
}

.cp-chip:hover[b-z9usryt0ka] {
    border-color: #3b82f6;
    background: #eff6ff;
}

.cp-chip.selected[b-z9usryt0ka] {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #1e40af;
}

.cp-chip.selected i[b-z9usryt0ka] {
    color: #22c55e;
    margin-top: 2px;
}

.cp-chip.custom[b-z9usryt0ka] {
    flex-direction: row;
    gap: 5px;
}

.cp-chip.custom.active[b-z9usryt0ka] {
    background: #DEECF9;
    border-color: #0078D4;
}

.cp-chip-date[b-z9usryt0ka] {
    font-size: 10px;
    color: #64748b;
}

.cp-chip.selected .cp-chip-date[b-z9usryt0ka] {
    color: #3b82f6;
}

/* ===== CUSTOM DATE PICKER ===== */
.cp-custom-picker[b-z9usryt0ka] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px;
    background: #EFF6FC;
    border-radius: 8px;
}

.cp-custom-picker input[type="date"][b-z9usryt0ka] {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
}

.cp-add-custom[b-z9usryt0ka] {
    padding: 8px 14px;
    background: #0078D4;
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cp-add-custom:hover:not(:disabled)[b-z9usryt0ka] {
    background: #106EBE;
}

.cp-add-custom:disabled[b-z9usryt0ka] {
    background: #d1d5db;
    cursor: not-allowed;
}

/* ===== SELECTED DATES ===== */
.cp-selected-dates[b-z9usryt0ka] {
    margin-bottom: 12px;
}

.cp-selected-chips[b-z9usryt0ka] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cp-selected-chip[b-z9usryt0ka] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #dbeafe;
    border-radius: 16px;
    font-size: 12px;
    color: #1e40af;
}

.cp-remove[b-z9usryt0ka] {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    font-size: 10px;
    line-height: 1;
}

.cp-remove:hover[b-z9usryt0ka] {
    color: #dc2626;
}

/* ===== REASON TEXTAREA ===== */
.cp-reason[b-z9usryt0ka] {
    margin-bottom: 12px;
    position: relative;
}

.cp-reason textarea[b-z9usryt0ka] {
    width: 100%;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    resize: none;
    font-family: inherit;
}

.cp-reason textarea:focus[b-z9usryt0ka] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.cp-char-count[b-z9usryt0ka] {
    position: absolute;
    bottom: 6px;
    right: 10px;
    font-size: 10px;
    color: #94a3b8;
}

/* ===== SUBMIT BUTTON ===== */
.cp-actions[b-z9usryt0ka] {
    margin-bottom: 10px;
}

.cp-submit[b-z9usryt0ka] {
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.cp-submit:hover:not(.disabled):not(:disabled)[b-z9usryt0ka] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.cp-submit.disabled[b-z9usryt0ka],
.cp-submit:disabled[b-z9usryt0ka] {
    background: #d1d5db;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ===== NOTICE ===== */
.cp-notice[b-z9usryt0ka] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    background: #f0f9ff;
    border-radius: 6px;
    font-size: 11px;
    color: #0369a1;
    line-height: 1.4;
}

.cp-notice i[b-z9usryt0ka] {
    margin-top: 1px;
    flex-shrink: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    .proposal-response-panel[b-z9usryt0ka] {
        padding: 12px;
    }

    .panel-header-simple[b-z9usryt0ka] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .date-chips-container[b-z9usryt0ka] {
        justify-content: center;
    }

    .date-chip[b-z9usryt0ka] {
        min-width: 70px;
        padding: 10px 12px;
    }

    .chip-date[b-z9usryt0ka] {
        font-size: 14px;
    }

    .flight-detail-row[b-z9usryt0ka] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .cp-date-chips[b-z9usryt0ka] {
        justify-content: center;
    }
}
/* /Components/Pages/MainLayout/FlightTicket/DateNegotiation/MessageDialog.razor.rz.scp.css */
/* ============================================================================
   Message Dialog - Microsoft Fluent Design Pattern
   ============================================================================
   A beautiful, centered modal dialog for displaying messages
   Inspired by Microsoft Fluent UI design system
   ============================================================================ */

/* Overlay */
.message-dialog-overlay[b-nf69f7kg7l] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: fadeIn-b-nf69f7kg7l 0.2s ease-out;
}

@keyframes fadeIn-b-nf69f7kg7l {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Dialog Container */
.message-dialog[b-nf69f7kg7l] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
    animation: slideUp-b-nf69f7kg7l 0.3s ease-out;
}

@keyframes slideUp-b-nf69f7kg7l {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================================================
   Icon Header Section
   ============================================================================ */

.dialog-icon-container[b-nf69f7kg7l] {
    display: flex;
    justify-content: center;
    padding: 32px 24px 16px 24px;
}

.dialog-icon[b-nf69f7kg7l] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: iconBounce-b-nf69f7kg7l 0.5s ease-out 0.1s both;
}

@keyframes iconBounce-b-nf69f7kg7l {
    0% { transform: scale(0); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.dialog-icon i[b-nf69f7kg7l] {
    font-size: 36px;
}

/* Error Type */
.message-dialog.type-error .dialog-icon[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #fecaca;
}

.message-dialog.type-error .dialog-icon i[b-nf69f7kg7l] {
    color: #dc2626;
}

/* Success Type */
.message-dialog.type-success .dialog-icon[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #bbf7d0;
}

.message-dialog.type-success .dialog-icon i[b-nf69f7kg7l] {
    color: #16a34a;
}

/* Warning Type */
.message-dialog.type-warning .dialog-icon[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 2px solid #fde68a;
}

.message-dialog.type-warning .dialog-icon i[b-nf69f7kg7l] {
    color: #d97706;
}

/* Info Type */
.message-dialog.type-info .dialog-icon[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid #bfdbfe;
}

.message-dialog.type-info .dialog-icon i[b-nf69f7kg7l] {
    color: #2563eb;
}

/* ============================================================================
   Content Section
   ============================================================================ */

.dialog-content[b-nf69f7kg7l] {
    padding: 0 32px 24px 32px;
    text-align: center;
}

.dialog-title[b-nf69f7kg7l] {
    margin: 0 0 12px 0;
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}

.dialog-message[b-nf69f7kg7l] {
    margin: 0 0 16px 0;
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
}

/* Details Section */
.dialog-details[b-nf69f7kg7l] {
    margin-top: 20px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    text-align: left;
}

.details-header[b-nf69f7kg7l] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}

.details-header i[b-nf69f7kg7l] {
    font-size: 14px;
}

.details-text[b-nf69f7kg7l] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #374151;
    word-break: break-word;
}

/* Suggestions Section */
.dialog-suggestions[b-nf69f7kg7l] {
    margin-top: 20px;
    padding: 16px;
    background: #f0f9ff;
    border-radius: 8px;
    border-left: 3px solid #3b82f6;
    text-align: left;
}

.suggestions-label[b-nf69f7kg7l] {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #1e40af;
}

.suggestions-list[b-nf69f7kg7l] {
    margin: 0;
    padding-left: 20px;
    list-style-type: none;
}

.suggestions-list li[b-nf69f7kg7l] {
    position: relative;
    padding-left: 16px;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: #374151;
}

.suggestions-list li[b-nf69f7kg7l]::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #3b82f6;
    font-weight: 600;
}

.suggestions-list li:last-child[b-nf69f7kg7l] {
    margin-bottom: 0;
}

/* ============================================================================
   Action Buttons Section
   ============================================================================ */

.dialog-actions[b-nf69f7kg7l] {
    display: flex;
    gap: 12px;
    padding: 20px 32px 28px 32px;
    justify-content: center;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.btn-primary[b-nf69f7kg7l],
.btn-secondary[b-nf69f7kg7l] {
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    min-width: 120px;
}

.btn-secondary[b-nf69f7kg7l] {
    background: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
}

.btn-secondary:hover[b-nf69f7kg7l] {
    background: #f3f4f6;
    border-color: #9ca3af;
}

/* Primary Button - Type Specific Colors */
.btn-primary.type-error[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
}

.btn-primary.type-error:hover[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.btn-primary.type-success[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
}

.btn-primary.type-success:hover[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

.btn-primary.type-warning[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: #ffffff;
}

.btn-primary.type-warning:hover[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}

.btn-primary.type-info[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
}

.btn-primary.type-info:hover[b-nf69f7kg7l] {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* ============================================================================
   Responsive Design
   ============================================================================ */

@media (max-width: 480px) {
    .message-dialog-overlay[b-nf69f7kg7l] {
        padding: 16px;
    }

    .message-dialog[b-nf69f7kg7l] {
        max-width: 100%;
        border-radius: 16px;
    }

    .dialog-icon-container[b-nf69f7kg7l] {
        padding: 24px 20px 12px 20px;
    }

    .dialog-icon[b-nf69f7kg7l] {
        width: 64px;
        height: 64px;
    }

    .dialog-icon i[b-nf69f7kg7l] {
        font-size: 30px;
    }

    .dialog-content[b-nf69f7kg7l] {
        padding: 0 20px 20px 20px;
    }

    .dialog-title[b-nf69f7kg7l] {
        font-size: 18px;
    }

    .dialog-message[b-nf69f7kg7l] {
        font-size: 14px;
    }

    .dialog-actions[b-nf69f7kg7l] {
        padding: 16px 20px 24px 20px;
        flex-direction: column;
    }

    .btn-primary[b-nf69f7kg7l],
    .btn-secondary[b-nf69f7kg7l] {
        width: 100%;
        min-width: auto;
    }
}

/* ============================================================================
   Dark Mode Support (Optional - follows system preference)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    .message-dialog[b-nf69f7kg7l] {
        background: #1f2937;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }

    .dialog-title[b-nf69f7kg7l] {
        color: #f9fafb;
    }

    .dialog-message[b-nf69f7kg7l] {
        color: #d1d5db;
    }

    .dialog-details[b-nf69f7kg7l] {
        background: #374151;
    }

    .details-header[b-nf69f7kg7l] {
        color: #9ca3af;
    }

    .details-text[b-nf69f7kg7l] {
        color: #e5e7eb;
    }

    .dialog-suggestions[b-nf69f7kg7l] {
        background: #1e3a5f;
        border-left-color: #3b82f6;
    }

    .suggestions-label[b-nf69f7kg7l] {
        color: #93c5fd;
    }

    .suggestions-list li[b-nf69f7kg7l] {
        color: #e5e7eb;
    }

    .dialog-actions[b-nf69f7kg7l] {
        background: #111827;
        border-top-color: #374151;
    }

    .btn-secondary[b-nf69f7kg7l] {
        background: #374151;
        color: #f9fafb;
        border-color: #4b5563;
    }

    .btn-secondary:hover[b-nf69f7kg7l] {
        background: #4b5563;
        border-color: #6b7280;
    }
}

/* /Components/Pages/MainLayout/FlightTicket/DateNegotiation/TravelerSuggestionResponsePanel.razor.rz.scp.css */
/* ============================================================================
   Traveler Suggestion Response Panel Styles
   ============================================================================ */

.suggestion-response-panel[b-o91u6iogfw] {
    background: linear-gradient(135deg, #FDF4FF 0%, #FAF5FF 100%);
    border: 2px solid #A855F7;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Panel Header */
.panel-header[b-o91u6iogfw] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.header-icon[b-o91u6iogfw] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #A855F7 0%, #9333EA 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.header-content h3[b-o91u6iogfw] {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 600;
    color: #581C87;
}

.header-content p[b-o91u6iogfw] {
    margin: 0;
    font-size: 13px;
    color: #7C3AED;
}

/* Loading State */
.panel-loading[b-o91u6iogfw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px;
    color: #7C3AED;
}

.panel-loading .spinner[b-o91u6iogfw] {
    width: 32px;
    height: 32px;
    border: 3px solid #E9D5FF;
    border-top-color: #A855F7;
    border-radius: 50%;
    animation: spin-b-o91u6iogfw 1s linear infinite;
}

/* Empty State */
.panel-empty[b-o91u6iogfw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px;
    color: #9CA3AF;
}

.panel-empty i[b-o91u6iogfw] {
    font-size: 32px;
    opacity: 0.5;
}

/* Suggestions Grid */
.suggestions-grid[b-o91u6iogfw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

/* Suggestion Card */
.suggestion-card[b-o91u6iogfw] {
    background: white;
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    position: relative;
    transition: all 0.2s ease;
}

.suggestion-card:hover[b-o91u6iogfw] {
    border-color: #A855F7;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15);
}

.suggestion-card.preferred[b-o91u6iogfw] {
    border-color: #F59E0B;
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
}

.suggestion-card.selected[b-o91u6iogfw] {
    border-color: #10B981;
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* Preferred Ribbon */
.preferred-ribbon[b-o91u6iogfw] {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: white;
    padding: 4px 12px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 0 0 8px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Card Date Display */
.card-date[b-o91u6iogfw] {
    margin: 20px 0 12px 0;
}

.card-date .date-value[b-o91u6iogfw] {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: #1F2937;
    line-height: 1;
}

.card-date .date-month[b-o91u6iogfw] {
    font-size: 14px;
    color: #6B7280;
    font-weight: 500;
}

/* Card Meta */
.card-meta[b-o91u6iogfw] {
    margin-bottom: 12px;
}

.card-meta .badge[b-o91u6iogfw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 20px;
}

.card-meta .badge.flexible[b-o91u6iogfw] {
    background: #D1FAE5;
    color: #065F46;
}

.card-meta .badge.fixed[b-o91u6iogfw] {
    background: #FEE2E2;
    color: #991B1B;
}

/* Card Note */
.card-note[b-o91u6iogfw] {
    background: #F3F4F6;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    color: #4B5563;
    text-align: left;
    margin-bottom: 12px;
    font-style: italic;
}

.card-note i[b-o91u6iogfw] {
    color: #9CA3AF;
    margin-right: 4px;
    font-size: 10px;
}

/* Accept Button */
.btn-accept[b-o91u6iogfw] {
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: white;
}

.btn-accept:hover:not(:disabled)[b-o91u6iogfw] {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    transform: translateY(-1px);
}

.btn-accept.confirming[b-o91u6iogfw] {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    animation: pulse-b-o91u6iogfw 1.5s infinite;
}

@keyframes pulse-b-o91u6iogfw {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

.btn-accept:disabled[b-o91u6iogfw] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Confirmation Bar */
.confirmation-bar[b-o91u6iogfw] {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border: 1px solid #10B981;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.confirm-message[b-o91u6iogfw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #065F46;
    margin-bottom: 12px;
}

.confirm-message i[b-o91u6iogfw] {
    color: #10B981;
}

.confirm-actions[b-o91u6iogfw] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-cancel[b-o91u6iogfw] {
    padding: 10px 20px;
    border: 1px solid #D1D5DB;
    background: white;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #4B5563;
    transition: all 0.2s;
}

.btn-cancel:hover:not(:disabled)[b-o91u6iogfw] {
    background: #F9FAFB;
    border-color: #9CA3AF;
}

.btn-confirm[b-o91u6iogfw] {
    padding: 10px 24px;
    border: none;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    transition: all 0.2s;
}

.btn-confirm:hover:not(:disabled)[b-o91u6iogfw] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.btn-confirm:disabled[b-o91u6iogfw],
.btn-cancel:disabled[b-o91u6iogfw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.spinner-sm[b-o91u6iogfw] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-o91u6iogfw 1s linear infinite;
}

/* Panel Footer */
.panel-footer[b-o91u6iogfw] {
    text-align: center;
}

.divider[b-o91u6iogfw] {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.divider[b-o91u6iogfw]::before,
.divider[b-o91u6iogfw]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #D1D5DB;
}

.divider span[b-o91u6iogfw] {
    padding: 0 16px;
    font-size: 12px;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
}

.btn-propose-different[b-o91u6iogfw] {
    padding: 12px 24px;
    border: 2px dashed #9CA3AF;
    background: transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6B7280;
    transition: all 0.2s;
}

.btn-propose-different:hover:not(:disabled)[b-o91u6iogfw] {
    border-color: #A855F7;
    color: #A855F7;
    background: rgba(168, 85, 247, 0.05);
}

.btn-propose-different:disabled[b-o91u6iogfw] {
    opacity: 0.5;
    cursor: not-allowed;
}

.footer-note[b-o91u6iogfw] {
    margin-top: 12px;
    font-size: 12px;
    color: #DC2626;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.footer-note i[b-o91u6iogfw] {
    color: #F59E0B;
}

/* Animations */
@keyframes spin-b-o91u6iogfw {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .suggestions-grid[b-o91u6iogfw] {
        grid-template-columns: 1fr 1fr;
    }
    
    .confirm-actions[b-o91u6iogfw] {
        flex-direction: column;
    }
    
    .btn-confirm[b-o91u6iogfw],
    .btn-cancel[b-o91u6iogfw] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .suggestions-grid[b-o91u6iogfw] {
        grid-template-columns: 1fr;
    }
    
    .panel-header[b-o91u6iogfw] {
        flex-direction: column;
        text-align: center;
    }
}

/* /Components/Pages/MainLayout/FlightTicket/Logistics/LogisticsDashboard.razor.rz.scp.css */
/* ========================================
   LOGISTICS DASHBOARD - V3 BEC DESIGN TOKENS
   Uses --BEC-* design tokens from the design system.
   ======================================== */

/* ========================================
   PAGE LAYOUT & CONTAINER
   ======================================== */
.erp-page-container[b-nv45pxmb3v] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--BEC-colorNeutralBackground1);
    overflow: hidden;
}


/* ========================================
   PAGE HEADER (Sticky)
   ======================================== */
.erp-page-header[b-nv45pxmb3v] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #FFFFFF;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    box-shadow: none;
    height: 40px;
    min-height: 40px;
}

.page-title[b-nv45pxmb3v] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-nv45pxmb3v] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 16px;
    background: none;
    padding: 0;
    border-radius: 0;
}

/* Stats Cards */
.stats-container[b-nv45pxmb3v] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: transparent;
    border: none;
    height: auto;
}

.stat-card[b-nv45pxmb3v] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 0;
}

.stat-value[b-nv45pxmb3v] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-nv45pxmb3v] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    margin-top: 0;
}

.stat-divider[b-nv45pxmb3v] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   LIVE INDICATOR
   ======================================== */
.live-indicator[b-nv45pxmb3v] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-dot[b-nv45pxmb3v] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #107c10;
    animation: pulse-b-nv45pxmb3v 2s infinite;
}

.live-text[b-nv45pxmb3v] {
    font-size: 11px;
    font-weight: 600;
    color: #107c10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes pulse-b-nv45pxmb3v {

    0%,
    100% {
        padding: 0;
    }

    /* Reset */
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(0.85);
    }
}

/* ========================================
   ACTION TOOLBAR (Sticky Floating)
   ======================================== */
[b-nv45pxmb3v] .e-toolbar.e-control {
    position: sticky !important;
    top: 40px !important;
    z-index: 90 !important;
    background: #FAFAF9 !important;
    border: none !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 12px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

/* Toolbar inner wrapper - keep items on one row, vertically centered */
[b-nv45pxmb3v] .e-toolbar .e-toolbar-items {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    height: 36px !important;
    flex-wrap: nowrap !important;
}

[b-nv45pxmb3v] .e-toolbar .e-toolbar-left,
[b-nv45pxmb3v] .e-toolbar .e-toolbar-center,
[b-nv45pxmb3v] .e-toolbar .e-toolbar-right {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
}

/* Toolbar Items - compact height */
[b-nv45pxmb3v] .e-toolbar .e-toolbar-item {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
}

[b-nv45pxmb3v] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    height: 26px !important;
    min-height: 26px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-nv45pxmb3v] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    color: var(--BEC-colorNeutralForeground2) !important;
}

[b-nv45pxmb3v] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorNeutralBackground2) !important;
    color: var(--BEC-colorBrandBackground) !important;
}

[b-nv45pxmb3v] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-nv45pxmb3v] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Primary Button Style in Toolbar */
[b-nv45pxmb3v] .primary-action-btn .e-tbar-btn {
    background: var(--BEC-colorBrandBackground) !important;
    color: white !important;
}

[b-nv45pxmb3v] .primary-action-btn .e-tbar-btn .e-icons,
[b-nv45pxmb3v] .primary-action-btn .e-tbar-btn .e-tbar-btn-text {
    color: white !important;
}

[b-nv45pxmb3v] .primary-action-btn .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorBrandBackgroundHover) !important;
    color: white !important;
}

[b-nv45pxmb3v] .primary-action-btn .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-nv45pxmb3v] .primary-action-btn .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: white !important;
}

/* Separator - vertically centered */
[b-nv45pxmb3v] .e-toolbar .e-separator {
    background-color: var(--BEC-colorNeutralStroke2) !important;
    height: 20px !important;
    margin: 0 8px !important;
    align-self: center !important;
}

/* Search Input - match toolbar row height */
[b-nv45pxmb3v] .e-toolbar .e-input-group,
[b-nv45pxmb3v] .e-toolbar .e-toolbar-item .e-input-group {
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-nv45pxmb3v] .e-toolbar .e-input-group .e-input,
[b-nv45pxmb3v] .e-toolbar .e-toolbar-item .e-input-group .e-input {
    height: 30px !important;
    line-height: 30px !important;
}

/* ========================================
   GRID CONTENT
   ======================================== */
.erp-page-content[b-nv45pxmb3v] {
    flex: 1;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

[b-nv45pxmb3v] .e-grid {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: 'Segoe UI', sans-serif !important;
    background: white !important;
}

/* Grid Header - Neutral */
[b-nv45pxmb3v] .e-grid .e-gridheader {
    background-color: #FAFAF9 !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
}

[b-nv45pxmb3v] .e-headercell {
    background-color: #FAFAF9 !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none;
    letter-spacing: normal;
    padding: 8px 12px !important;
}

/* Grid Rows */
[b-nv45pxmb3v] .e-rowcell {
    font-size: 13px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    padding: 8px 12px !important;
}

/* Font consistency — match BookingDashboard */
[b-nv45pxmb3v] .e-grid .e-rowcell {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    color: #323130;
}

[b-nv45pxmb3v] .e-grid .e-headercell .e-headertext {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #323130;
}

/* Zebra striping */
[b-nv45pxmb3v] .e-grid .e-row:nth-child(even) .e-rowcell {
    background-color: #FAFAFA !important;
}

/* Hover & Selection */
[b-nv45pxmb3v] .e-grid .e-row:hover .e-rowcell {
    background-color: #F5F5F5 !important;
}

[b-nv45pxmb3v] .e-grid .e-row.e-selectionbackground .e-rowcell {
    background-color: #EBF3FC !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* ========================================
   CUSTOM BADGES & ICONS
   ======================================== */
.status-badge[b-nv45pxmb3v] {
    padding: 3px 12px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 11px;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    min-width: 80px;
}

/* Status Colors */
.status-pending[b-nv45pxmb3v] {
    background-color: #FDF6E3;
    color: #9A6603;
    border: 1px solid #FAEBCC;
}

.status-progress[b-nv45pxmb3v] {
    background-color: #E6F5FF;
    color: #0078D4;
    border: 1px solid #c7e0f4;
}

.status-completed[b-nv45pxmb3v] {
    background-color: #E8F5E9;
    color: #1B5E20;
    border: 1px solid #C8E6C9;
}

/* Requirements column: only required icons shown; active = clearly colored */
.requirements-empty[b-nv45pxmb3v] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase200);
}

.req-icon[b-nv45pxmb3v] {
    font-size: var(--BEC-fontSizeBase300);
    margin-right: var(--BEC-spacingHorizontalS);
    color: var(--BEC-colorNeutralForeground3);
}

.req-icon:last-child[b-nv45pxmb3v] {
    margin-right: 0;
}

.req-icon-active[b-nv45pxmb3v] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

.req-icon.active[b-nv45pxmb3v] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

/* ========================================
   SIDE DRAWER — Wireframe v2 tokens
   Flat, compact, matches grid toolbar aesthetic
   ======================================== */
.drawer-overlay[b-nv45pxmb3v] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1050;
    display: flex;
    justify-content: flex-end;
    animation: drawerFadeIn-b-nv45pxmb3v 0.2s ease;
}

.drawer-panel[b-nv45pxmb3v] {
    background: #FFFFFF;
    width: 460px;
    max-width: 90vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #E0E0E0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
    animation: drawerSlideIn-b-nv45pxmb3v 0.25s ease;
}

@keyframes drawerFadeIn-b-nv45pxmb3v {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes drawerSlideIn-b-nv45pxmb3v {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Drawer header — 40px, flat #FAFAF9, matches toolbar */
.drawer-header[b-nv45pxmb3v] {
    display: flex;
    align-items: center;
    height: 40px;
    min-height: 40px;
    padding: 0 12px;
    background: #FAFAF9;
    border-bottom: 1px solid #E0E0E0;
    gap: 8px;
    flex-shrink: 0;
}

.drawer-header-icon[b-nv45pxmb3v] {
    font-size: 14px;
    color: #0078D4;
    flex-shrink: 0;
}

.drawer-header-title[b-nv45pxmb3v] {
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    flex: 1;
    margin: 0;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-close-drawer[b-nv45pxmb3v] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #9E9E9E;
    font-size: 14px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-close-drawer:hover[b-nv45pxmb3v] {
    background: #F5F5F4;
    color: #242424;
}

/* Drawer body */
.drawer-body[b-nv45pxmb3v] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #FFFFFF;
}

/* Drawer footer — 44px flat #FAFAF9 */
.drawer-footer[b-nv45pxmb3v] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 44px;
    padding: 0 12px;
    border-top: 1px solid #E0E0E0;
    background: #FAFAF9;
    gap: 8px;
    flex-shrink: 0;
}

/* Drawer footer buttons — 28px compact */
.btn-drawer-default[b-nv45pxmb3v] {
    height: 28px;
    padding: 0 14px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #E0E0E0;
    background: #FFFFFF;
    color: #616161;
    cursor: pointer;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    display: inline-flex;
    align-items: center;
}

.btn-drawer-default:hover[b-nv45pxmb3v] {
    background: #F5F5F4;
}

.btn-drawer-primary[b-nv45pxmb3v] {
    height: 28px;
    padding: 0 14px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: #0078D4;
    color: #FFFFFF;
    cursor: pointer;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-drawer-primary:hover[b-nv45pxmb3v] {
    background: #106EBE;
}

/* Section headers inside drawer */
.d-section[b-nv45pxmb3v] {
    margin-bottom: 16px;
}

.d-section-hdr[b-nv45pxmb3v] {
    font-size: 12px;
    font-weight: 600;
    color: #616161;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding-bottom: 6px;
    border-bottom: 1px solid #EBEBEB;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.d-section-hdr i[b-nv45pxmb3v] {
    font-size: 12px;
    color: #0078D4;
}

/* Key-value grid */
.kv-grid[b-nv45pxmb3v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

.kv-label[b-nv45pxmb3v] {
    font-size: 11px;
    font-weight: 600;
    color: #9E9E9E;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.kv-value[b-nv45pxmb3v] {
    font-size: 13px;
    font-weight: 500;
    color: #242424;
}

/* Form fields — match wireframe v2 tokens */
.f-group[b-nv45pxmb3v] {
    margin-bottom: 12px;
}

.f-label[b-nv45pxmb3v] {
    font-size: 12px;
    font-weight: 600;
    color: #242424;
    margin-bottom: 4px;
    display: block;
}

.f-row[b-nv45pxmb3v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Syncfusion inputs inside drawer — 32px height */
[b-nv45pxmb3v] .drawer-body .e-input-group,
[b-nv45pxmb3v] .drawer-body .e-input-group.e-control-wrapper {
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 3px !important;
    font-size: 13px !important;
}

[b-nv45pxmb3v] .drawer-body .e-input-group .e-input,
[b-nv45pxmb3v] .drawer-body .e-input-group.e-control-wrapper .e-input {
    height: 30px !important;
    font-size: 13px !important;
}

[b-nv45pxmb3v] .drawer-body .e-input-group.e-multi-line-input,
[b-nv45pxmb3v] .drawer-body .e-input-group.e-multi-line-input.e-control-wrapper {
    height: auto !important;
    min-height: 64px !important;
}

[b-nv45pxmb3v] .drawer-body .e-input-group.e-multi-line-input .e-input {
    height: auto !important;
    min-height: 56px !important;
}



/* Grid action button */
.btn[b-nv45pxmb3v] {
    padding: 4px 12px;
    border-radius: 3px;
    font-weight: 600;
    cursor: pointer;
    font-size: 12px;
    border: none;
    transition: all 0.15s ease;
}

.btn-primary[b-nv45pxmb3v] {
    background: #0078D4;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-primary:hover[b-nv45pxmb3v] {
    background: #106EBE;
}

.btn-sm[b-nv45pxmb3v] {
    padding: 3px 10px;
    font-size: 11px;
}

.loading-container[b-nv45pxmb3v] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* ========================================
   GRID HORIZONTAL LINES
   ======================================== */
[b-nv45pxmb3v] .e-grid.e-gridhorizontallines .e-rowcell {
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

/* ========================================
   NEW COLUMN STYLES
   ======================================== */
.provider-text[b-nv45pxmb3v],
.hotel-text[b-nv45pxmb3v] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   EXPORT DIALOG — Updated tokens
   ======================================== */
.export-dialog-hint[b-nv45pxmb3v] {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: #616161;
}

.export-dialog-dates[b-nv45pxmb3v] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.export-dialog-dates .filter-item[b-nv45pxmb3v] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.export-dialog-dates .filter-item label[b-nv45pxmb3v] {
    font-size: 12px;
    font-weight: 600;
    color: #242424;
}

/* ========================================
   SfDialog overrides — flat, no blur
   Matches BookingDashboard unified pattern
   ======================================== */
[b-nv45pxmb3v] .e-dlg-overlay {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

[b-nv45pxmb3v] .e-dialog {
    border: 1px solid #E0E0E0 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
}

/* Dialog header — 36px, flat #FAFAF9 */
[b-nv45pxmb3v] .e-dialog .e-dlg-header-content {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    background: #FAFAF9 !important;
    border-bottom: 1px solid #E0E0E0 !important;
    display: flex !important;
    align-items: center !important;
}

[b-nv45pxmb3v] .e-dialog .e-dlg-header {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #242424 !important;
    display: flex !important;
    align-items: center !important;
}

[b-nv45pxmb3v] .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 3px !important;
    color: #9E9E9E !important;
    box-shadow: none !important;
}

[b-nv45pxmb3v] .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover {
    background: #F5F5F4 !important;
    color: #242424 !important;
}

/* Dialog body */
[b-nv45pxmb3v] .e-dialog .e-dlg-content {
    padding: 16px !important;
}

/* Dialog footer — flat #FAFAF9 */
[b-nv45pxmb3v] .e-dialog .e-footer-content {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    background: #FAFAF9 !important;
    border-top: 1px solid #E0E0E0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

/* Dialog footer buttons — 28px compact */
[b-nv45pxmb3v] .e-dialog .e-footer-content .e-btn {
    height: 28px !important;
    padding: 0 14px !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
    min-width: auto !important;
    box-shadow: none !important;
}

[b-nv45pxmb3v] .e-dialog .e-footer-content .e-btn.e-flat {
    background: #FFFFFF !important;
    color: #616161 !important;
    border: 1px solid #E0E0E0 !important;
}

[b-nv45pxmb3v] .e-dialog .e-footer-content .e-btn.e-flat:hover {
    background: #F5F5F4 !important;
}

[b-nv45pxmb3v] .e-dialog .e-footer-content .e-btn.e-primary {
    background: #0078D4 !important;
    color: #FFFFFF !important;
    border: none !important;
}

[b-nv45pxmb3v] .e-dialog .e-footer-content .e-btn.e-primary:hover {
    background: #106EBE !important;
}

/* Dialog header title */
.dialog-header-title[b-nv45pxmb3v] {
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #242424;
}

.dialog-header-title i[b-nv45pxmb3v] {
    font-size: 13px;
    color: #0078D4;
}

.dialog-content-inner[b-nv45pxmb3v] {
    padding: 0;
}

.dialog-content-inner p[b-nv45pxmb3v] {
    font-size: 13px;
    color: #242424;
    margin: 0 0 12px 0;
}

/* ========================================
   KV-GRID — Full-width span for email
   ======================================== */
.kv-span-2[b-nv45pxmb3v] {
    grid-column: 1 / -1;
}

.kv-value-email[b-nv45pxmb3v] {
    word-break: break-all;
    color: #0078D4;
    font-size: 12px;
}

/* ========================================
   NOTIFICATION SECTION — Checkbox styling
   ======================================== */
[b-nv45pxmb3v] .drawer-body .e-checkbox-wrapper {
    font-size: 13px !important;
    color: #242424 !important;
}

[b-nv45pxmb3v] .drawer-body .e-checkbox-wrapper .e-label {
    font-size: 12px !important;
    color: #616161 !important;
    font-weight: 500 !important;
}

/* ========================================
   ACTIVITY LOG — Minimal timeline
   ======================================== */
.timeline[b-nv45pxmb3v] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 10px;
}

.timeline-item[b-nv45pxmb3v] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    padding-bottom: 12px;
}

.timeline-item:last-child[b-nv45pxmb3v] {
    padding-bottom: 0;
}

/* Vertical connector line between dots */
.timeline-item:not(:last-child)[b-nv45pxmb3v]::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 10px;
    bottom: 0;
    width: 1px;
    background: #E0E0E0;
}

.timeline-dot[b-nv45pxmb3v] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #0078D4;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 1px #0078D4;
    flex-shrink: 0;
    margin-top: 2px;
}

.timeline-content[b-nv45pxmb3v] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.timeline-label[b-nv45pxmb3v] {
    font-size: 12px;
    font-weight: 600;
    color: #242424;
}

.timeline-date[b-nv45pxmb3v] {
    font-size: 11px;
    color: #9E9E9E;
    font-weight: 400;
}
/* /Components/Pages/MainLayout/FlightTicket/TravelRequest/MyTravelRequests.razor.rz.scp.css */
/* ========================================
   MY TRAVEL REQUESTS - V3 TIMELINE
   Uses BEC_Theme.css Design Tokens (global :root)
   ======================================== */

/* NOTE: --BEC-* tokens are defined globally in BEC_Theme.css.
   Do NOT redefine them here — Blazor CSS isolation scopes :root
   as :root[b-xxx] which never matches <html>. */

.erp-page-container[b-t7sgks9wo5] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--BEC-colorNeutralBackground2);
    overflow: hidden;
}

/* ========================================
   UNIFIED HEADER (Matching BookingDashboard)
   ======================================== */
.erp-page-header[b-t7sgks9wo5] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    min-height: 48px;
}

.page-title[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-t7sgks9wo5] {
    color: var(--BEC-colorBrandBackground);
    font-size: 16px;
}

.breadcrumb[b-t7sgks9wo5] {
    font-weight: normal;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    margin-left: 8px;
}

.header-actions[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ========================================
   SPLIT LAYOUT
   ======================================== */
.page-content[b-t7sgks9wo5] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* TIMELINE PANE — full width (drawer is overlay) */
.timeline-pane[b-t7sgks9wo5] {
    flex: 1;
    background: var(--BEC-colorNeutralBackground2);
    padding: 30px 40px;
    overflow-y: auto;
}

.timeline-wrapper[b-t7sgks9wo5] {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 100px;
    /* Space for scrolling */
}

/* Empty/Loading States for Timeline */
.center-state[b-t7sgks9wo5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--BEC-colorNeutralForeground3);
    text-align: center;
}

.empty-icon[b-t7sgks9wo5] {
    font-size: 48px;
    margin-bottom: 16px;
    color: #e1dfdd;
}


/* TIMELINE ITEMS GRID */
.timeline-item[b-t7sgks9wo5] {
    display: grid;
    grid-template-columns: 100px 40px 1fr;
    /* Date | Line | Card */
    gap: 0;
    margin-bottom: 24px;
    cursor: pointer;
}

/* COL 1: DATE (Single Line) */
.t-date-col[b-t7sgks9wo5] {
    text-align: right;
    padding-right: 16px;
    padding-top: 16px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2);
}

/* COL 2: LINE & DOT */
.t-line-col[b-t7sgks9wo5] {
    position: relative;
    display: flex;
    justify-content: center;
}

.t-line-col[b-t7sgks9wo5]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: -24px;
    /* Extend to next item */
    width: 2px;
    background: #e1dfdd;
    z-index: 0;
}

.timeline-item:last-child .t-line-col[b-t7sgks9wo5]::before {
    height: 100%;
    display: none;
    /* Stop line at last item */
}

.t-dot[b-t7sgks9wo5] {
    width: 14px;
    height: 14px;
    background: white;
    border: 2px solid var(--BEC-colorBrandBackground);
    border-radius: 50%;
    z-index: 1;
    margin-top: 16px;
    /* Align with top of card text */
    box-shadow: 0 0 0 4px var(--BEC-colorNeutralBackground2);
    transition: all 0.2s;
}

/* Selected State */
.timeline-item.selected .t-dot[b-t7sgks9wo5] {
    background: var(--BEC-colorBrandBackground);
    transform: scale(1.3);
    box-shadow: 0 0 0 6px rgba(0, 120, 212, 0.2);
}

/* COL 3: CARD */
.t-card-col[b-t7sgks9wo5] {
    padding-top: 0;
    padding-left: 8px;
}

.time-card[b-t7sgks9wo5] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid transparent;
    padding: 16px 20px;
    transition: all 0.2s ease;
    position: relative;
}

.time-card[b-t7sgks9wo5]::before {
    /* Triangle arrow */
    content: '';
    position: absolute;
    left: -6px;
    top: 20px;
    width: 12px;
    height: 12px;
    background: white;
    transform: rotate(45deg);
    border-left: 1px solid transparent;
    border-bottom: 1px solid transparent;
    z-index: 0;
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.05);
}

.timeline-item.selected .time-card[b-t7sgks9wo5] {
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 8px 16px rgba(0, 120, 212, 0.15);
    transform: translateX(4px);
}

/* CARD CONTENT */
.tc-header[b-t7sgks9wo5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.tc-title[b-t7sgks9wo5] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.tc-route-arrow[b-t7sgks9wo5] {
    color: #bbb;
    font-size: 12px;
}

.tc-meta[b-t7sgks9wo5] {
    font-size: 12px;
    color: #666;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.legs-indicator[b-t7sgks9wo5] {
    color: #8764b8;
    font-weight: 500;
}

.legs-indicator i[b-t7sgks9wo5] {
    margin-right: 3px;
}

/* ========================================
   STATUS TIMELINE
   ======================================== */
.status-timeline[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;
    font-size: 11px;
}

.detail-timeline[b-t7sgks9wo5] {
    margin-top: 12px;
    padding-top: 0;
    border-top: none;
    font-size: 12px;
}

.timeline-step[b-t7sgks9wo5] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.timeline-arrow[b-t7sgks9wo5] {
    margin: 0 2px;
    font-size: 10px;
}

/* Timeline Colors - Completed (Green) */
.step-green[b-t7sgks9wo5] {
    color: #107c10;
}

.arrow-green[b-t7sgks9wo5] {
    color: #107c10;
}

/* Timeline Colors - Current Step Highlight */
.step-current[b-t7sgks9wo5] {
    font-weight: 700;
}

/* Timeline Colors - Pending/Orange */
.step-orange[b-t7sgks9wo5] {
    color: #ca5010;
}

/* Timeline Colors - Blue (Awaiting Quotes) */
.step-blue[b-t7sgks9wo5] {
    color: #0078d4;
}

/* Timeline Colors - Purple (Reviewing Quotes) */
.step-purple[b-t7sgks9wo5] {
    color: #8764b8;
}

/* Timeline Colors - Teal (Selected) */
.step-teal[b-t7sgks9wo5] {
    color: #038387;
}

/* Timeline Colors - Dark Green (Completed) */
.step-darkgreen[b-t7sgks9wo5] {
    color: #0b6a0b;
}

/* Timeline Colors - Gray (Future/Inactive) */
.step-gray[b-t7sgks9wo5] {
    color: #a19f9d;
}

.arrow-gray[b-t7sgks9wo5] {
    color: #d2d0ce;
}

/* Timeline Colors - Red (Rejected/Cancelled) */
.step-red[b-t7sgks9wo5] {
    color: #a80000;
}

/* STATUS BADGES */
.status-pill[b-t7sgks9wo5] {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-status-draft[b-t7sgks9wo5] {
    background: #f3f2f1;
    color: #605e5c;
}

.badge-status-submitted[b-t7sgks9wo5] {
    background: #e6f5ff;
    color: #0078d4;
}

.badge-status-pending[b-t7sgks9wo5] {
    background: #fff4ce;
    color: #5d5a58;
}

/* Warning color */
.badge-status-approved[b-t7sgks9wo5] {
    background: #dff6dd;
    color: #107c10;
}

.badge-status-rejected[b-t7sgks9wo5] {
    background: #fde7e9;
    color: #a80000;
}

.badge-status-cancelled[b-t7sgks9wo5] {
    background: #f3f2f1;
    color: #a19f9d;
    text-decoration: line-through;
}

/* Date Change Re-Approval Pending - Orange/Amber */
.badge-status-reapproval[b-t7sgks9wo5] {
    background: #fff3cd;
    color: #856404;
}


/* ========================================
   DRAWER PANEL — Overlay pattern
   Copied from BulkBookingDashboard (proven working)
   ======================================== */
.drawer-overlay[b-t7sgks9wo5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1050;
    display: flex;
    justify-content: flex-end;
    animation: drawerFadeIn-b-t7sgks9wo5 0.2s ease;
}

.drawer-panel[b-t7sgks9wo5] {
    background: #FFFFFF;
    width: 460px;
    max-width: 90vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #E0E0E0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
    animation: drawerSlideIn-b-t7sgks9wo5 0.25s ease;
}

@keyframes drawerFadeIn-b-t7sgks9wo5 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes drawerSlideIn-b-t7sgks9wo5 {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Drawer header — 40px, flat #FAFAF9, matches toolbar */
.drawer-header[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    height: 40px;
    min-height: 40px;
    padding: 0 12px;
    background: #FAFAF9;
    border-bottom: 1px solid #E0E0E0;
    gap: 8px;
    flex-shrink: 0;
}

.drawer-header-icon[b-t7sgks9wo5] {
    font-size: 14px;
    color: #0078D4;
    flex-shrink: 0;
}

.drawer-header-title[b-t7sgks9wo5] {
    font-size: 13px;
    font-weight: 600;
    color: #242424;
    flex: 1;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-id-badge[b-t7sgks9wo5] {
    display: inline-block;
    background: #f3f2f1;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
    color: #616161;
    flex-shrink: 0;
}

.status-badge[b-t7sgks9wo5] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

.btn-close-drawer[b-t7sgks9wo5] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #9E9E9E;
    font-size: 14px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-close-drawer:hover[b-t7sgks9wo5] {
    background: #F5F5F4;
    color: #242424;
}

/* Drawer body — scrollable */
.drawer-body[b-t7sgks9wo5] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #FFFFFF;
}

/* Drawer footer — flat #FAFAF9 */
.drawer-footer[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    height: 44px;
    min-height: 44px;
    padding: 0 12px;
    border-top: 1px solid #E0E0E0;
    background: #FAFAF9;
    gap: 8px;
    flex-shrink: 0;
}

.dp-footer-spacer[b-t7sgks9wo5] {
    flex: 1;
}

/* ========================================
   DRAWER SECTIONS — flat wireframe pattern
   (matches BulkBookingDashboard .d-section)
   ======================================== */
.d-section[b-t7sgks9wo5] {
    margin-bottom: 16px;
}

.d-section-hdr[b-t7sgks9wo5] {
    font-size: 12px;
    font-weight: 600;
    color: #616161;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding-bottom: 6px;
    border-bottom: 1px solid #EBEBEB;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.d-section-hdr i[b-t7sgks9wo5] {
    font-size: 12px;
    color: #0078D4;
}

.d-section-hdr.clickable[b-t7sgks9wo5] {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: color 0.2s;
}

.d-section-hdr.clickable:hover[b-t7sgks9wo5] {
    color: #0078D4;
}

.d-section-hdr .toggle-icon[b-t7sgks9wo5] {
    margin-left: auto;
    font-size: 11px;
    color: #9E9E9E;
}

/* ========================================
   KEY-VALUE GRID — matches BulkBookingDashboard
   ======================================== */
.kv-grid[b-t7sgks9wo5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

.kv-label[b-t7sgks9wo5] {
    font-size: 11px;
    font-weight: 600;
    color: #9E9E9E;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.kv-value[b-t7sgks9wo5] {
    font-size: 13px;
    font-weight: 500;
    color: #242424;
}

.kv-full-width[b-t7sgks9wo5] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #EBEBEB;
}

.kv-full-width .kv-value[b-t7sgks9wo5] {
    margin-top: 4px;
    line-height: 1.5;
}

/* ========================================
   STATUS STEPS — compact inline
   ======================================== */
.dp-status-steps[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    font-size: 12px;
}

.dp-step[b-t7sgks9wo5] {
    font-weight: 500;
}

.dp-step-arrow[b-t7sgks9wo5] {
    margin: 0 2px;
    font-size: 10px;
}

/* ========================================
   ITINERARY LEGS — compact, 3 lines max
   ======================================== */
.itin-leg[b-t7sgks9wo5] {
    border: 1px solid #EBEBEB;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #FAFAF9;
}

.itin-leg:last-child[b-t7sgks9wo5] {
    margin-bottom: 0;
}

.itin-leg-hdr[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.itin-leg-num[b-t7sgks9wo5] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: white;
    background: #0078D4;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

.itin-leg-route[b-t7sgks9wo5] {
    font-size: 13px;
    font-weight: 600;
    color: #242424;
}

.itin-leg-dates[b-t7sgks9wo5] {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #616161;
    margin-bottom: 4px;
}

.itin-leg-tags[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.itin-tag[b-t7sgks9wo5] {
    font-size: 11px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 3px;
}

.itin-tag.class-tag[b-t7sgks9wo5] {
    color: #616161;
    background: #F0F0F0;
}

.itin-tag.svc-tag[b-t7sgks9wo5] {
    color: #0078D4;
    background: #E6F2FF;
}

/* ========================================
   LIST ROWS — matches BulkBookingDashboard
   ======================================== */
.list-row[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #EBEBEB;
    font-size: 13px;
}

.list-row:last-child[b-t7sgks9wo5] {
    border-bottom: none;
}

.list-row .name[b-t7sgks9wo5] {
    font-weight: 500;
    color: #242424;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-row .mono[b-t7sgks9wo5] {
    font-size: 11px;
    color: #9E9E9E;
    font-family: 'Cascadia Code', 'Consolas', monospace;
}

.doc-icon[b-t7sgks9wo5] {
    font-size: 14px;
    flex-shrink: 0;
}

.doc-icon.fa-file-pdf[b-t7sgks9wo5] { color: #e81123; }
.doc-icon.fa-file-word[b-t7sgks9wo5] { color: #2b579a; }
.doc-icon.fa-file-excel[b-t7sgks9wo5] { color: #217346; }
.doc-icon.fa-file-image[b-t7sgks9wo5] { color: #0078d4; }
.doc-icon.fa-file[b-t7sgks9wo5] { color: #666; }

/* ========================================
   ATTACHMENT ITEMS — requester documents
   ======================================== */
.att-item[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground3);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: 6px;
    margin-bottom: 8px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.att-item:hover[b-t7sgks9wo5] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 2px 6px rgba(0, 120, 212, 0.1);
}

.att-icon[b-t7sgks9wo5] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: white;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    flex-shrink: 0;
}

.att-icon i[b-t7sgks9wo5] {
    font-size: 16px;
}

.att-info[b-t7sgks9wo5] {
    flex: 1;
    min-width: 0;
}

.att-name[b-t7sgks9wo5] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.att-meta[b-t7sgks9wo5] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 2px;
    display: flex;
    gap: 8px;
}

.att-meta span + span[b-t7sgks9wo5]::before {
    content: "·";
    margin-right: 8px;
    color: var(--BEC-colorNeutralForeground3);
}

.att-download-btn[b-t7sgks9wo5] {
    flex-shrink: 0;
    border-radius: 4px !important;
    transition: color 0.2s ease, background 0.2s ease;
}

.att-download-btn:hover[b-t7sgks9wo5] {
    color: var(--BEC-colorBrandBackground) !important;
    background: rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   APPROVAL TIMELINE — vertical steps
   ======================================== */
.approval-timeline[b-t7sgks9wo5] {
    padding: 4px 0 0 0;
}

.atl-step[b-t7sgks9wo5] {
    display: flex;
    gap: 10px;
    position: relative;
}

.atl-step:last-child .atl-line[b-t7sgks9wo5] {
    display: none;
}

.atl-line-col[b-t7sgks9wo5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 20px;
}

.atl-dot[b-t7sgks9wo5] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid #D1D5DB;
    background: #fff;
    z-index: 1;
}

.atl-dot.dot-approved[b-t7sgks9wo5] {
    background: #10b981;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.atl-dot.dot-rejected[b-t7sgks9wo5] {
    background: #ef4444;
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.atl-dot.dot-submitted[b-t7sgks9wo5] {
    background: #3b82f6;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.atl-dot.dot-current[b-t7sgks9wo5] {
    background: #f59e0b;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
    animation: pulse-dot-b-t7sgks9wo5 2s ease-in-out infinite;
}

.atl-dot.dot-pending[b-t7sgks9wo5] {
    background: #fff;
    border-color: #D1D5DB;
}

@keyframes pulse-dot-b-t7sgks9wo5 {
    0%, 100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); }
    50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.25); }
}

.atl-line[b-t7sgks9wo5] {
    width: 2px;
    flex: 1;
    background: #E5E7EB;
    min-height: 16px;
}

.atl-step.step-done .atl-line[b-t7sgks9wo5] {
    background: #10b981;
}

.atl-content[b-t7sgks9wo5] {
    flex: 1;
    padding-bottom: 14px;
}

.atl-header[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.atl-step-name[b-t7sgks9wo5] {
    font-size: 12px;
    font-weight: 600;
    color: #242424;
}

.atl-date[b-t7sgks9wo5] {
    font-size: 11px;
    color: #9E9E9E;
}

.atl-approver[b-t7sgks9wo5] {
    font-size: 12px;
    color: #616161;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.atl-approver i[b-t7sgks9wo5] {
    font-size: 10px;
    color: #9E9E9E;
}

.atl-action[b-t7sgks9wo5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 4px;
}

.atl-action.action-approved[b-t7sgks9wo5] {
    color: #10b981;
    background: #ecfdf5;
}

.atl-action.action-rejected[b-t7sgks9wo5] {
    color: #ef4444;
    background: #fef2f2;
}

.atl-action.action-submitted[b-t7sgks9wo5] {
    color: #3b82f6;
    background: #eff6ff;
}

.atl-action.action-waiting[b-t7sgks9wo5] {
    color: #f59e0b;
    background: #fffbeb;
}

.atl-comment[b-t7sgks9wo5] {
    font-size: 11px;
    font-style: italic;
    color: #616161;
    background: #F5F5F4;
    padding: 4px 8px;
    border-radius: 4px;
    margin-top: 4px;
}

/* ========================================
   NOTES TEXT
   ======================================== */
.notes-text[b-t7sgks9wo5] {
    font-size: 13px;
    color: #616161;
    line-height: 1.5;
}



/* ========================================
   VENDOR DOCUMENTS SECTION
   ======================================== */
.vendor-documents-section[b-t7sgks9wo5] {
    margin-top: 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    padding-top: 12px;
}

.vendor-docs-header[b-t7sgks9wo5] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vendor-docs-header i[b-t7sgks9wo5] {
    color: var(--BEC-colorBrandBackground);
}

.vendor-doc-item[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground3);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: 6px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.vendor-doc-item:hover[b-t7sgks9wo5] {
    background: var(--BEC-colorNeutralBackground2);
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 2px 6px rgba(0, 120, 212, 0.1);
}

.vendor-doc-icon[b-t7sgks9wo5] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: white;
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.vendor-doc-icon i[b-t7sgks9wo5] {
    font-size: 16px;
}

.vendor-doc-icon i.fa-file-pdf[b-t7sgks9wo5] {
    color: #e81123;
}

.vendor-doc-icon i.fa-file-word[b-t7sgks9wo5] {
    color: #2b579a;
}

.vendor-doc-icon i.fa-file-excel[b-t7sgks9wo5] {
    color: #217346;
}

.vendor-doc-icon i.fa-file-image[b-t7sgks9wo5] {
    color: #0078d4;
}

.vendor-doc-icon i.fa-file[b-t7sgks9wo5] {
    color: #666;
}

.vendor-doc-info[b-t7sgks9wo5] {
    flex: 1;
    min-width: 0;
}

.vendor-doc-name[b-t7sgks9wo5] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vendor-doc-meta[b-t7sgks9wo5] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 2px;
}

.vendor-download-btn[b-t7sgks9wo5] {
    flex-shrink: 0;
}

.vendor-download-btn:hover[b-t7sgks9wo5] {
    color: var(--BEC-colorBrandBackground) !important;
    background: rgba(0, 120, 212, 0.1) !important;
}

/* File Icon Colors */
.pdf-icon[b-t7sgks9wo5] {
    color: #e81123 !important;
}

.word-icon[b-t7sgks9wo5] {
    color: #2b579a !important;
}

.excel-icon[b-t7sgks9wo5] {
    color: #217346 !important;
}

.image-icon[b-t7sgks9wo5] {
    color: #0078d4 !important;
}

.archive-icon[b-t7sgks9wo5] {
    color: #7b613c !important;
}

.default-icon[b-t7sgks9wo5] {
    color: #666 !important;
}

/* ========================================
   BOOKING DOCUMENTS SECTION
   ======================================== */

.booking-documents-section[b-t7sgks9wo5] {
    margin-top: 16px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #10b981;
}

.booking-docs-header[b-t7sgks9wo5] {
    font-size: 13px;
    font-weight: 700;
    color: #065f46;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.booking-docs-header i[b-t7sgks9wo5] {
    color: #10b981;
}

.booking-ref-badge[b-t7sgks9wo5] {
    margin-left: auto;
    background: #10b981;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
}

.booking-docs-notice[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: white;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #065f46;
}

.booking-docs-notice i[b-t7sgks9wo5] {
    color: #10b981;
    font-size: 16px;
}

.booking-docs-list[b-t7sgks9wo5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.booking-doc-item[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border-radius: 8px;
    border: 1px solid #d1fae5;
    transition: all 0.2s;
}

.booking-doc-item:hover[b-t7sgks9wo5] {
    border-color: #10b981;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.booking-doc-icon[b-t7sgks9wo5] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 20px;
    flex-shrink: 0;
}

/* Document type specific colors */
.booking-doc-item.eticket .booking-doc-icon[b-t7sgks9wo5] {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #166534;
}

.booking-doc-item.visa .booking-doc-icon[b-t7sgks9wo5] {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    color: #5b21b6;
}

.booking-doc-item.hotel .booking-doc-icon[b-t7sgks9wo5] {
    background: linear-gradient(135deg, #ffedd5, #fed7aa);
    color: #c2410c;
}

.booking-doc-item.transport .booking-doc-icon[b-t7sgks9wo5] {
    background: linear-gradient(135deg, #ccfbf1, #99f6e4);
    color: #0f766e;
}

.booking-doc-item.insurance .booking-doc-icon[b-t7sgks9wo5] {
    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
    color: #be185d;
}

.booking-doc-item.other .booking-doc-icon[b-t7sgks9wo5] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

.booking-doc-info[b-t7sgks9wo5] {
    flex: 1;
    min-width: 0;
}

.booking-doc-type[b-t7sgks9wo5] {
    font-size: 11px;
    font-weight: 600;
    color: #065f46;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.booking-doc-name[b-t7sgks9wo5] {
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking-doc-meta[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.booking-doc-meta .doc-pnr[b-t7sgks9wo5] {
    color: #0078d4;
    font-weight: 500;
}

.booking-download-btn[b-t7sgks9wo5] {
    --accent-fill-rest: #10b981;
    --accent-fill-hover: #059669;
    --accent-fill-active: #047857;
    flex-shrink: 0;
}

/* ========================================
   ON-BEHALF BADGE (traveller identity on cards)
   ======================================== */
.on-behalf-badge[b-t7sgks9wo5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    color: #1d4ed8;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.on-behalf-badge i[b-t7sgks9wo5] {
    font-size: 10px;
    color: #3b82f6;
    flex-shrink: 0;
}

/* ========================================
   DATE NEGOTIATION STYLES
   ======================================== */

/* Badge on timeline cards */
.date-negotiation-badge[b-t7sgks9wo5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
    animation: pulse-badge-b-t7sgks9wo5 2s ease-in-out infinite;
}

.date-negotiation-badge i[b-t7sgks9wo5] {
    font-size: 12px;
    color: #d97706;
}

/* Current approver badge on timeline cards */
.current-approver-badge[b-t7sgks9wo5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #1d4ed8;
}

.current-approver-badge i[b-t7sgks9wo5] {
    font-size: 12px;
    color: #3b82f6;
}

.ac-empcode[b-t7sgks9wo5] {
    margin-left: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
}

@keyframes pulse-badge-b-t7sgks9wo5 {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
    }
}

/* Date confirmed notice */
.date-confirmed-notice[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border: 1px solid #86efac;
    border-radius: 8px;
    color: #166534;
    font-size: 13px;
    font-weight: 500;
}

.date-confirmed-notice i[b-t7sgks9wo5] {
    font-size: 18px;
    color: #22c55e;
}

/* ========================================
   REQUEST OVERVIEW SECTION (LEGACY — replaced by kv-grid)
   ======================================== */

/* ========================================
   ENHANCED DATE CONFIRMED CARD
   ======================================== */
.date-confirmed-card[b-t7sgks9wo5] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #6ee7b7;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}

.confirmed-header[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #a7f3d0;
}

.confirmed-header i[b-t7sgks9wo5] {
    font-size: 24px;
    color: #10b981;
}

.confirmed-header span[b-t7sgks9wo5] {
    font-size: 16px;
    font-weight: 700;
    color: #065f46;
}

.confirmed-details[b-t7sgks9wo5] {
    background: white;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.confirmed-date-row[b-t7sgks9wo5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0fdf4;
}

.confirmed-date-row:last-child[b-t7sgks9wo5] {
    border-bottom: none;
}

.confirmed-label[b-t7sgks9wo5] {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
}

.confirmed-value[b-t7sgks9wo5] {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}

.confirmed-value.highlight-date[b-t7sgks9wo5] {
    color: #059669;
    font-size: 14px;
    background: #d1fae5;
    padding: 4px 10px;
    border-radius: 4px;
}

.confirmed-footer[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #047857;
    font-weight: 500;
}

.confirmed-footer i[b-t7sgks9wo5] {
    color: #10b981;
    font-size: 14px;
}

/* ========================================
   ENHANCED ITINERARY SECTION (LEGACY — replaced by .itin-leg)
   ======================================== */

/* Passport Profile Styles */
.passport-pill[b-t7sgks9wo5] {
    transition: all 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
}

.passport-pill:hover[b-t7sgks9wo5] {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.passport-pill.warning[b-t7sgks9wo5] {
    background: #fff7ed !important;
    color: #c2410c !important;
    border-color: #fdba74 !important;
}

.passport-pill.success[b-t7sgks9wo5] {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border-color: #86efac !important;
}

.passport-form[b-t7sgks9wo5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Dialog z-index: no longer needed — drawer closes before dialogs appear */

/* ========================================
   FOOTER BUTTON STYLES
   ======================================== */
[b-t7sgks9wo5] .btn-edit-blue .e-btn {
    color: #0078D4;
    border-color: #0078D4;
}

[b-t7sgks9wo5] .btn-resubmit-amber .e-btn {
    color: #ca5010;
    border-color: #ca5010;
}

/* ========================================
   LOGISTICS SECTION
   ======================================== */
.logistics-sub-hdr[b-t7sgks9wo5] {
    font-size: 11px;
    font-weight: 600;
    color: #5B5FC7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 16px 2px;
    margin-top: 4px;
}

/* ========================================
   ITINERARY LEG EXTRA DETAILS
   ======================================== */
.itin-leg-extra[b-t7sgks9wo5] {
    border-top: 1px dashed #E8E6E3;
    padding-top: 6px;
    margin-top: 6px;
}

.itin-extra-row[b-t7sgks9wo5] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 1px 0;
}

.itin-extra-label[b-t7sgks9wo5] {
    font-size: 10px;
    font-weight: 600;
    color: #8A8886;
    text-transform: uppercase;
    min-width: 80px;
    flex-shrink: 0;
}

.itin-extra-value[b-t7sgks9wo5] {
    font-size: 12px;
    color: #323130;
}

/* ========================================
   APPROVAL STATUS LINE
   ======================================== */
.approval-status-line[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #856404;
    background: #fff8e1;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #ffe082;
}

.approval-status-line i[b-t7sgks9wo5] {
    font-size: 11px;
    color: #f59e0b;
}

/* ========================================
   APPROVAL CHAIN (compact approver list)
   ======================================== */
.approval-current-step[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #0369a1;
    background: #f0f9ff;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #bae6fd;
    margin-bottom: 10px;
}

.approval-current-step i[b-t7sgks9wo5] {
    font-size: 11px;
    color: #0284c7;
}

.approval-chain[b-t7sgks9wo5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ac-row[b-t7sgks9wo5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    transition: background 0.15s;
}

.ac-row:hover[b-t7sgks9wo5] {
    background: #f5f5f4;
}

.ac-icon[b-t7sgks9wo5] {
    flex-shrink: 0;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.ac-row.ac-approved .ac-icon[b-t7sgks9wo5] { color: #16a34a; }
.ac-row.ac-rejected .ac-icon[b-t7sgks9wo5] { color: #dc2626; }
.ac-row.ac-waiting .ac-icon[b-t7sgks9wo5]  { color: #d97706; }
.ac-row.ac-pending .ac-icon[b-t7sgks9wo5]  { color: #a8a29e; }

.ac-info[b-t7sgks9wo5] {
    flex: 1;
    min-width: 0;
}

.ac-name[b-t7sgks9wo5] {
    font-size: 13px;
    font-weight: 600;
    color: #1c1917;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-step-label[b-t7sgks9wo5] {
    font-size: 11px;
    color: #78716c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-status[b-t7sgks9wo5] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ac-badge[b-t7sgks9wo5] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    line-height: 1.4;
}

.ac-badge-approved[b-t7sgks9wo5] {
    background: #dcfce7;
    color: #15803d;
}

.ac-badge-rejected[b-t7sgks9wo5] {
    background: #fee2e2;
    color: #b91c1c;
}

.ac-badge-waiting[b-t7sgks9wo5] {
    background: #fef3c7;
    color: #92400e;
    animation: pulse-soft 2s ease-in-out infinite;
}

.ac-badge-pending[b-t7sgks9wo5] {
    background: #f5f5f4;
    color: #78716c;
}

.ac-date[b-t7sgks9wo5] {
    font-size: 11px;
    color: #a8a29e;
}

@@keyframes pulse-soft {
    0%[b-t7sgks9wo5], 100%[b-t7sgks9wo5] { opacity: 1; }
    50%[b-t7sgks9wo5] { opacity: 0.6; }
}

/* ========================================
   TRAVEL NOTES
   ======================================== */
.travel-note-block[b-t7sgks9wo5] {
    background: #FAFAF9;
    border: 1px solid #EBEBEB;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.travel-note-block:last-child[b-t7sgks9wo5] {
    margin-bottom: 0;
}

.travel-note-label[b-t7sgks9wo5] {
    font-size: 11px;
    font-weight: 600;
    color: #9E9E9E;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-bottom: 4px;
}

.travel-note-text[b-t7sgks9wo5] {
    font-size: 13px;
    font-style: italic;
    color: #616161;
    line-height: 1.5;
    white-space: pre-line;
}

/* ========================================
   AUDIT TRAIL
   ======================================== */
.audit-trail[b-t7sgks9wo5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    margin-top: 12px;
    border-top: 1px solid #EBEBEB;
}

.audit-line[b-t7sgks9wo5] {
    font-size: 11px;
    color: #9E9E9E;
    display: flex;
    align-items: center;
    gap: 6px;
}

.audit-line i[b-t7sgks9wo5] {
    font-size: 10px;
    color: #BDBDBD;
    width: 14px;
    text-align: center;
}
/* /Components/Pages/MainLayout/FlightTicket/TravelRequest/TravelRequestWizard.razor.rz.scp.css */
/* ========================================
   TRAVEL REQUEST SPLIT-VIEW CSS
   ======================================== */

/* ========================================
   PROJECT SELECTION VALIDATION STYLING
   ======================================== */
/* Inline validation error styling for project selection fields */

.validation-error[b-aui3v7vria] {
    border-color: #d13438 !important;
    box-shadow: 0 0 0 1px #d13438 !important;
}

.validation-error-message[b-aui3v7vria] {
    color: #d13438;
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 400;
    line-height: 1.4;
}

.validation-error-message i[b-aui3v7vria] {
    font-size: 14px;
    flex-shrink: 0;
}

/* Apply validation error styling to Syncfusion components */
[b-aui3v7vria] .validation-error.e-input-group {
    border-color: #d13438 !important;
}

[b-aui3v7vria] .validation-error.e-input-group:focus-within {
    border-color: #d13438 !important;
    box-shadow: 0 0 0 1px #d13438 !important;
}

[b-aui3v7vria] .validation-error.e-input-group .e-input {
    color: var(--BEC-colorNeutralForeground1);
}

[b-aui3v7vria] .validation-error.e-dropdownlist {
    border-color: #d13438 !important;
}

[b-aui3v7vria] .validation-error.e-dropdownlist:focus-within {
    border-color: #d13438 !important;
    box-shadow: 0 0 0 1px #d13438 !important;
}

/* Full-height wrapper: fills layout content area (sidebar open/closed) */
.erp-page-container.full-height[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.wizard-container[b-aui3v7vria] {
    background-color: var(--BEC-colorNeutralBackground2);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Loading Overlay */
.loading-overlay[b-aui3v7vria] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-content[b-aui3v7vria] {
    text-align: center;
}

.loading-spinner[b-aui3v7vria] {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: spin-b-aui3v7vria 0.8s linear infinite;
    margin: 0 auto 16px;
}

.loading-content p[b-aui3v7vria] {
    color: var(--BEC-colorNeutralForeground2);
    font-size: 14px;
    margin: 0;
}

/* Submitting overlay - higher z-index to cover dialogs */
.submitting-overlay[b-aui3v7vria] {
    z-index: 10001;
    background: rgba(255, 255, 255, 0.95);
}

/* 1. TOP BAR - Title + context pills only */
.wizard-header-card[b-aui3v7vria] {
    flex: 0 0 auto;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium) var(--BEC-borderRadiusMedium) 0 0;
    padding: 6px 14px 8px;
    margin: 6px 16px 0;
    display: flex;
    align-items: center;
}

.wizard-header-inner.wizard-header-single-row[b-aui3v7vria] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    width: 100%;
}

.wizard-header-card-title[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.wizard-header-card-title .e-icons[b-aui3v7vria] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 15px;
}



.wizard-header-inner[b-aui3v7vria] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.header-left[b-aui3v7vria] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.header-breadcrumbs[b-aui3v7vria] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    margin-right: 12px;
}

.header-title-text[b-aui3v7vria] {
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

/* User Info Styling - pills wrap; all visible with sidebar open/closed */
.header-user-info[b-aui3v7vria] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    min-width: 0;
}

.user-pill[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 12px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

.user-pill .e-icons[b-aui3v7vria] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.u-text[b-aui3v7vria] {
    font-weight: 500;
}

.date-pill[b-aui3v7vria] {
    padding: 0 8px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.traveller-phone-pill[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 140px;
    max-width: 200px;
}

.traveller-phone-pill .traveller-phone-input[b-aui3v7vria] {
    width: 120px;
    min-width: 90px;
    flex: 1;
}

.traveller-phone-pill[b-aui3v7vria]  .e-input {
    padding: 4px 8px;
    font-size: 12px;
    background: transparent;
}



.traveller-choice-segmented[b-aui3v7vria] {
    display: inline-flex;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 6px;
    overflow: hidden;
    background: var(--BEC-colorNeutralBackground2);
}

.traveller-choice-segmented .choice-btn[b-aui3v7vria] {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.traveller-choice-segmented .choice-btn:hover:not(:disabled)[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.traveller-choice-segmented .choice-btn.active[b-aui3v7vria] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.traveller-choice-segmented .choice-btn:disabled[b-aui3v7vria] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── Traveller Section (below header, above workspace) ─── */
/* Legacy class kept for reference - now uses .traveller-bar + .traveller-panel inside right panel */
.traveller-section[b-aui3v7vria] {
    padding: 10px 16px 12px;
    margin: 0 16px 6px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-top: none;
    border-radius: 0 0 var(--BEC-borderRadiusMedium) var(--BEC-borderRadiusMedium);
}

/* Traveller inline — no box, sits directly on right panel background */
.traveller-inline[b-aui3v7vria] {
    padding: 0 24px 14px;
}

.traveller-inline-header[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.tb-label[b-aui3v7vria] {
    font-size: 12px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground2);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.tb-label .e-icons[b-aui3v7vria] {
    font-size: 13px;
}

/* Company Employee row — 3 fields: search, code (narrow), phone */
.traveller-emp-row[b-aui3v7vria] {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1fr;
    gap: 12px;
}

/* Sub-group labels */
.panel-section-label[b-aui3v7vria] {
    font-size: 10px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}

.panel-section-label:not(:first-child)[b-aui3v7vria] {
    margin-top: 12px;
}

/* 3-column grid for guest fields */
.panel-row[b-aui3v7vria] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

@media (max-width: 900px) {
    .panel-row[b-aui3v7vria],
    .traveller-emp-row[b-aui3v7vria] {
        grid-template-columns: 1fr 1fr;
    }
}

/* Readonly field style */
[b-aui3v7vria] .readonly-field .e-input {
    background: var(--BEC-colorNeutralBackground2) !important;
}

.traveller-section-header[b-aui3v7vria] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.traveller-section-title[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.traveller-section-title .e-icons[b-aui3v7vria] {
    font-size: 14px;
}

.traveller-section-body[b-aui3v7vria] {
    /* container for fields */
}

.traveller-fields-row[b-aui3v7vria] {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.traveller-field[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 180px;
}

.traveller-field.grow[b-aui3v7vria] {
    flex: 1;
}

.traveller-field.phone-field[b-aui3v7vria] {
    width: 220px;
    flex: 0 0 220px;
}

.traveller-field-label[b-aui3v7vria] {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field-required[b-aui3v7vria] {
    color: #d13438;
    font-weight: normal;
}

.field-optional[b-aui3v7vria] {
    font-weight: 400;
    text-transform: none;
    color: var(--BEC-colorNeutralForeground3);
    letter-spacing: 0;
}

/* Guest fields container */
.guest-fields-container[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.guest-group-label[b-aui3v7vria] {
    font-size: 10px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    margin-top: 4px;
}

.guest-fields-row[b-aui3v7vria] {
    display: grid;
    gap: 12px;
}

.guest-fields-row.identity-row[b-aui3v7vria] {
    grid-template-columns: 2fr 2fr 1.5fr;
}

.guest-fields-row.documents-row[b-aui3v7vria] {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 900px) {
    .guest-fields-row.identity-row[b-aui3v7vria],
    .guest-fields-row.documents-row[b-aui3v7vria] {
        grid-template-columns: 1fr 1fr;
    }
    .traveller-fields-row[b-aui3v7vria] {
        flex-wrap: wrap;
    }
    .traveller-field.phone-field[b-aui3v7vria] {
        flex: 1 1 180px;
    }
}


/* Override DatePicker to look flat inside the pill */
[b-aui3v7vria] .borderless-datepicker.e-input-group {
    border: none !important;
    background: transparent !important;
}

[b-aui3v7vria] .borderless-datepicker .e-input {
    font-size: 12px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    padding: 0 !important;
}


/* 2. WORKSPACE (Split View) - takes almost all vertical space; flight form gets the room */
.workspace[b-aui3v7vria] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    margin: 0 16px 10px;
}

/* === LEFT PANEL: Itinerary & Global Actions - flexible width when sidebar open === */
.left-panel[b-aui3v7vria] {
    width: 320px;
    min-width: 280px;
    max-width: 380px;
    background: var(--BEC-colorNeutralBackground2);
    border-right: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.left-panel-header[b-aui3v7vria] {
    padding: 10px 16px;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
}

.panel-title[b-aui3v7vria] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

/* List Area */
.flight-list-container[b-aui3v7vria] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ENRICHED FLIGHT CARD */
.flight-card-item[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}

.flight-card-item:hover[b-aui3v7vria] {
    border-color: var(--BEC-colorNeutralStroke3);
    transform: translateY(-1px);
}

.flight-card-item.active[b-aui3v7vria] {
    border-color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackgroundAlpha);
    box-shadow: 0 0 0 1px var(--BEC-colorBrandForeground1);
}

/* Updated Flight Card Layout */
.flight-route-grid[b-aui3v7vria] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    width: 100%;
}

.route-point[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    max-width: 40%;
}

.point-date[b-aui3v7vria] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 2px;
}

.route-arrow-col[b-aui3v7vria] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
}

.city-name[b-aui3v7vria] {
    font-weight: 600;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.route-arrow[b-aui3v7vria] {
    /* Legacy override or reuse if needed */
    font-size: 14px;
}

/* Remove or hide old detail row since dates are now in grid */
.card-details-row[b-aui3v7vria] {
    display: none;
}

.detail-icon[b-aui3v7vria] {
    display: none;
}

.card-badges-row[b-aui3v7vria] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.class-badge[b-aui3v7vria] {
    font-size: 10px;
    background: var(--BEC-colorNeutralBackground3);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
}

/* Requirement Badges */
.req-badge[b-aui3v7vria] {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 10px;
    color: white;
    font-weight: 600;
}

.req-badge.visa[b-aui3v7vria] {
    background-color: #0ea5e9;
}

/* Sky Blue */
.req-badge.hotel[b-aui3v7vria] {
    background-color: #f59e0b;
}

/* Amber */
/* Emerald */
.req-badge.car[b-aui3v7vria] {
    background-color: #10b981;
}

.req-badge.attach[b-aui3v7vria] {
    background-color: #64748b;
    /* Slate Gray */
    padding: 2px 4px;
    /* Slightly tighter padding for icon */
}

/* ============================================================================
   LEG PROJECT DISPLAY (in My Flights panel)
   ============================================================================ */
.leg-project-display[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorBrandStroke2);
}

.leg-project-display .e-icons[b-aui3v7vria] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.leg-project-display .project-text[b-aui3v7vria] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.leg-project-display .required-badge[b-aui3v7vria] {
    font-size: 9px;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: #d13438;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.active-indicator[b-aui3v7vria] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--BEC-colorBrandForeground1);
}


/* Left Panel Footer - always visible; all buttons in one clear row */
.left-panel-footer[b-aui3v7vria] {
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* === RIGHT PANEL: Editor Canvas === */
.right-panel[b-aui3v7vria] {
    flex: 1;
    min-height: 0;
    background: var(--BEC-colorNeutralBackground1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.right-panel-body[b-aui3v7vria] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.editor-header[b-aui3v7vria] {
    padding: 10px 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-height: 40px;
    margin-bottom: 2px;
}

.editor-title[b-aui3v7vria] {
    font-size: 15px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.editor-subtitle[b-aui3v7vria] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

.editor-content[b-aui3v7vria] {
    padding: 16px 24px 20px;
    max-width: 100%;
    width: 100%;
}

/* Form Layout - two columns; spread out so origin/destination/notes are visible with minimal scroll */
.form-grid-row[b-aui3v7vria] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.form-grid-row.three-col[b-aui3v7vria] {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 640px) {
    .form-grid-row[b-aui3v7vria] {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 12px;
    }
    .form-grid-row.three-col[b-aui3v7vria] {
        grid-template-columns: 1fr;
    }
}

.form-group[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gf-label[b-aui3v7vria] {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2);
}

/* Flight Details section title */
.section-title[b-aui3v7vria] {
    font-size: 13px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 0 24px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.section-title .e-icons[b-aui3v7vria] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
}

/* Schedule & Project row — flex-based for adaptive column count */
.schedule-project-row[b-aui3v7vria] {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
    align-items: flex-start;
}

.schedule-project-row .form-group[b-aui3v7vria] {
    flex: 1;
    min-width: 0;
}

.schedule-project-row .form-group.project-group[b-aui3v7vria] {
    flex: 1.2;
}

.schedule-project-row .form-group.or-btn-group[b-aui3v7vria] {
    flex: 0 0 auto;
    align-self: flex-end;
    padding-bottom: 1px;
}

/* Other / Select toggle button */
.or-btn[b-aui3v7vria] {
    padding: 7px 14px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground2);
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.or-btn:hover:not(:disabled)[b-aui3v7vria] {
    border-color: var(--BEC-colorBrandStroke1);
    color: var(--BEC-colorBrandForeground1);
}

.or-btn:disabled[b-aui3v7vria] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Visa note in footer */
.visa-note[b-aui3v7vria] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.visa-note .e-icons[b-aui3v7vria] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 13px;
}

.visa-note a[b-aui3v7vria] {
    color: var(--BEC-colorBrandForeground1);
    text-decoration: underline;
}

.visa-note a:hover[b-aui3v7vria] {
    text-decoration: none;
}

@media (max-width: 640px) {
    .schedule-project-row[b-aui3v7vria] {
        flex-wrap: wrap;
    }
    .schedule-project-row .form-group[b-aui3v7vria] {
        flex: 1 1 200px;
    }
}

/* Attachments Panel in Right Side */
.attachments-section-panel[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground2);
    border: 1px dashed var(--BEC-colorNeutralStroke2);
    border-radius: 8px;
    padding: 16px;
}

.attach-header-row[b-aui3v7vria] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.hint-text[b-aui3v7vria] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.upload-area-flex[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.uploaded-chips[b-aui3v7vria] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.no-files-text[b-aui3v7vria] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

.file-chip.white[b-aui3v7vria] {
    background: white;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--BEC-colorNeutralForeground1);
}

.pointer[b-aui3v7vria] {
    cursor: pointer;
}


/* Empty State */
.empty-state-panel[b-aui3v7vria] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--BEC-colorNeutralForeground3);
}

/* Additional Services: Fluent 2 checkbox-tag pills */
.req-pills[b-aui3v7vria] {
    display: flex;
    gap: 8px;
}

.req-pill[b-aui3v7vria] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 120px;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    -webkit-user-select: none;
}

.req-pill:hover:not(.disabled)[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground3);
    border-color: var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.req-pill.active[b-aui3v7vria] {
    background: var(--BEC-colorBrandBackground2);
    border-color: var(--BEC-colorBrandStroke1);
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

.req-pill .e-icons[b-aui3v7vria] {
    font-size: 15px;
}

/* Field helper text (for Purpose/Notes alignment) */
.field-helper-text[b-aui3v7vria] {
    display: block;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 4px;
    line-height: 1.4;
}

/* Visa Info Note */
.visa-note-info[b-aui3v7vria] {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    font-size: 12px;
}

.visa-note-info a:hover[b-aui3v7vria] {
    text-decoration: none;
}

.submit-bar[b-aui3v7vria] {
    padding: 10px 24px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--BEC-colorNeutralBackground1);
    flex-shrink: 0;
}

/* Syncfusion Input Overrides for "Clean" Look in Panel */
[b-aui3v7vria] .e-input-group {
    border-radius: 6px !important;
}

/* Uploader Fixes */
[b-aui3v7vria] .compact-uploader-btn {
    display: inline-block;
    width: auto !important;
}

[b-aui3v7vria] .compact-uploader-btn .e-upload {
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    width: auto !important;
    /* Forces button width only */
}

[b-aui3v7vria] .compact-uploader-btn .e-file-select-wrap {
    padding: 0 !important;
    min-height: auto !important;
    border: none !important;
}

[b-aui3v7vria] .compact-uploader-btn .e-upload-browse-btn {
    margin: 0 !important;
}

[b-aui3v7vria] .compact-uploader-btn .e-upload-files {
    display: none !important;
    /* We use custom chips */
}


/* ========================================
   ENHANCED ATTACHMENT SECTION
   Butter-smooth UX with validation
   ======================================== */

.attachments-section-panel[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
}

.attachments-section-panel .attach-header-row[b-aui3v7vria] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.attachments-section-panel .gf-label[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.attach-count[b-aui3v7vria] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: 400;
}

/* Drop Zone */
.attachment-drop-zone[b-aui3v7vria] {
    position: relative;
    border: 2px dashed var(--BEC-colorNeutralStroke3);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    transition: all 0.3s ease;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground2);
}

.attachment-drop-zone:hover[b-aui3v7vria] {
    border-color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackgroundAlpha);
}

.attachment-drop-zone.uploading[b-aui3v7vria] {
    border-color: var(--BEC-colorBrandForeground1);
    opacity: 0.7;
    pointer-events: none;
}

.attachment-drop-zone.drag-over[b-aui3v7vria] {
    border-color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackgroundAlpha);
    transform: scale(1.01);
}

/* Upload trigger area - clickable */
.upload-trigger-area[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    padding: 12px;
    width: 100%;
    min-height: 80px;
    text-align: center;
    color: var(--BEC-colorNeutralForeground3);
}

.upload-trigger-area:hover[b-aui3v7vria] {
    color: var(--BEC-colorBrandForeground1);
}

.upload-trigger-area p[b-aui3v7vria] {
    margin: 0;
    font-size: 13px;
}

.upload-trigger-area small[b-aui3v7vria] {
    font-size: 11px;
    opacity: 0.8;
}

.drop-zone-hint[b-aui3v7vria] {
    text-align: center;
    color: var(--BEC-colorNeutralForeground3);
}

.drop-zone-hint p[b-aui3v7vria] {
    margin: 8px 0 4px 0;
    font-size: 12px;
    font-weight: 500;
}

.drop-zone-hint small[b-aui3v7vria] {
    font-size: 10px;
    opacity: 0.8;
}

/* Attachment Uploader Override */
[b-aui3v7vria] .attachment-uploader {
    width: 100%;
}

[b-aui3v7vria] .attachment-uploader .e-upload {
    border: none !important;
    background: transparent !important;
}

[b-aui3v7vria] .attachment-uploader .e-file-select-wrap {
    border: none !important;
    padding: 0 !important;
    min-height: auto !important;
}

[b-aui3v7vria] .attachment-uploader .e-upload-browse-btn {
    background: var(--BEC-colorBrandBackground) !important;
    color: white !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

[b-aui3v7vria] .attachment-uploader .e-upload-browse-btn:hover {
    background: var(--BEC-colorBrandForeground1) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

[b-aui3v7vria] .attachment-uploader .e-upload-files {
    display: none !important;
}

/* Visually hidden - accessible but invisible */
.visually-hidden[b-aui3v7vria],
[b-aui3v7vria] .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Native InputFile Styling - Hide default input, show custom button */
.file-upload-label[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    width: 100%;
    position: relative;
}

.file-upload-label .browse-button[b-aui3v7vria] {
    background: var(--BEC-colorBrandBackground);
    color: white;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
}

.file-upload-label:hover .browse-button[b-aui3v7vria] {
    background: var(--BEC-colorBrandForeground1);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.file-upload-label .browse-text[b-aui3v7vria] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
}

/* File List */
.attachment-file-list[b-aui3v7vria] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.attachment-file-item[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 6px;
    transition: all 0.2s ease;
    animation: slideIn-b-aui3v7vria 0.3s ease;
}

@keyframes slideIn-b-aui3v7vria {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.attachment-file-item:hover[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground1);
    border-color: var(--BEC-colorNeutralStroke3);
}

.attachment-file-item.invalid[b-aui3v7vria] {
    background: #fef2f2;
    border-color: #fecaca;
}

.attachment-file-item.uploading[b-aui3v7vria] {
    background: #eff6ff;
    border-color: #93c5fd;
}

.attachment-file-item.uploaded[b-aui3v7vria] {
    background: #f0fdf4;
    border-color: #86efac;
}

.attachment-file-item.failed[b-aui3v7vria] {
    background: #fef2f2;
    border-color: #fecaca;
}

.file-icon[b-aui3v7vria] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: 6px;
    font-size: 16px;
}

.file-icon .text-danger[b-aui3v7vria] {
    color: #dc2626;
}

.file-icon .text-primary[b-aui3v7vria] {
    color: #2563eb;
}

.file-icon .text-success[b-aui3v7vria] {
    color: #16a34a;
}

.file-icon .text-warning[b-aui3v7vria] {
    color: #d97706;
}

.file-info[b-aui3v7vria] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-name[b-aui3v7vria] {
    font-size: 12px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-meta[b-aui3v7vria] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.file-error[b-aui3v7vria] {
    color: #dc2626;
    font-weight: 500;
}

.file-uploading[b-aui3v7vria] {
    color: #2563eb;
    font-weight: 500;
}

.file-success[b-aui3v7vria] {
    color: #16a34a;
    font-weight: 500;
}

.file-actions[b-aui3v7vria] {
    display: flex;
    align-items: center;
}

.file-view-btn[b-aui3v7vria],
.file-remove-btn[b-aui3v7vria] {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--BEC-colorNeutralForeground3);
    transition: all 0.2s ease;
}

.file-view-btn:hover[b-aui3v7vria] {
    background: #e0f2fe;
    color: #0284c7;
}

.file-remove-btn:hover[b-aui3v7vria] {
    background: #fee2e2;
    color: #dc2626;
}

.file-actions[b-aui3v7vria] {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Existing Attachments Section (Edit Mode) */
.existing-attachments-section[b-aui3v7vria],
.new-attachments-section[b-aui3v7vria] {
    margin-bottom: 12px;
}

.section-label[b-aui3v7vria] {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 8px;
}

.attachment-file-item.existing[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground1);
    border-color: var(--BEC-colorNeutralStroke1);
}

.attachment-file-item.existing .file-icon[b-aui3v7vria] {
    background: #e0f2fe;
}

.attachment-file-item.existing .file-icon .e-icons[b-aui3v7vria] {
    color: #0284c7;
}

.attachment-file-item.deleting[b-aui3v7vria] {
    opacity: 0.6;
    pointer-events: none;
}

/* Compact Drop Zone Hint (when files exist) */
.drop-zone-hint.compact[b-aui3v7vria] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 12px;
    font-size: 12px;
}

.drop-zone-hint.compact .e-icons[b-aui3v7vria] {
    font-size: 14px;
}

/* Upload Spinner */
.upload-spinner[b-aui3v7vria] {
    width: 18px;
    height: 18px;
    border: 2px solid #e5e7eb;
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: spin-b-aui3v7vria 0.8s linear infinite;
}

@keyframes spin-b-aui3v7vria {
    to {
        transform: rotate(360deg);
    }
}

/* Upload Info Bar */
.upload-info-bar[b-aui3v7vria] {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: center;
}

.upload-info-bar small[b-aui3v7vria] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

/* Progress Bar (for future use) */
.upload-progress[b-aui3v7vria] {
    height: 3px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.upload-progress-bar[b-aui3v7vria] {
    height: 100%;
    background: var(--BEC-colorBrandForeground1);
    transition: width 0.3s ease;
}

/* Responsive */
@media (max-width: 768px) {
    .attachments-section-panel[b-aui3v7vria] {
        padding: 10px;
    }

    .attachment-drop-zone[b-aui3v7vria] {
        padding: 12px;
    }

    .attachment-file-item[b-aui3v7vria] {
        padding: 6px 10px;
    }
}

/* ========================================
   MS DESIGN PATTERN DIALOGS
   Clean, Enterprise-Grade, User-Friendly
   ======================================== */

/* Dialog Header Styles */
.dialog-header[b-aui3v7vria] {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground1);
}

.dialog-header.error[b-aui3v7vria] {
    color: #dc2626;
}

.dialog-header.success[b-aui3v7vria] {
    color: #16a34a;
}

.dialog-header.confirm[b-aui3v7vria] {
    color: #f59e0b;
}

/* Dialog Content Styles */
.dialog-content[b-aui3v7vria] {
    padding: 8px 0;
}

.dialog-content p[b-aui3v7vria] {
    margin: 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
}

/* Dialog Footer Styles */
.dialog-footer[b-aui3v7vria] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Override Syncfusion Dialog for cleaner look */
[b-aui3v7vria] .error-dialog .e-dlg-header-content,
[b-aui3v7vria] .success-dialog .e-dlg-header-content,
[b-aui3v7vria] .confirm-dialog .e-dlg-header-content {
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding-bottom: 12px;
}

[b-aui3v7vria] .error-dialog .e-footer-content,
[b-aui3v7vria] .success-dialog .e-footer-content,
[b-aui3v7vria] .confirm-dialog .e-footer-content {
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    padding-top: 12px;
}

/* Disabled State for Requirement Pills */
.req-pill.disabled[b-aui3v7vria] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* Passport Profile Styles */
.passport-pill[b-aui3v7vria] {
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.passport-pill:hover[b-aui3v7vria] {
    background: var(--BEC-colorBrandForeground1) !important;
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.passport-form[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.passport-form .form-group[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ========================================
   POLICY ACKNOWLEDGMENT DIALOG - ASSET PROTECTION V2 (GRID)
   ======================================== */
[b-aui3v7vria] .policy-dialog.fixed-dialog {
    max-height: 95vh !important;
    border-radius: 8px;
    overflow: hidden;
    /* Prevent dialog itself from scrolling */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Ensure the Syncfusion Dialog content area takes full height */
[b-aui3v7vria] .policy-dialog .e-dlg-content {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* HEADER STYLING */
[b-aui3v7vria] .policy-dialog .e-dlg-header-content {
    background: #1e293b !important;
    /* Authoritative Dark Slate */
    border-bottom: 1px solid #334155;
    padding: 16px 24px !important;
    flex-shrink: 0;
}

[b-aui3v7vria] .policy-dialog .dialog-header {
    display: none;
    /* Hide default wrapper if any */
}

.dialog-header-custom[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-text-en[b-aui3v7vria] {
    color: white;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.header-text-ar[b-aui3v7vria] {
    color: #cbd5e1;
    /* Slate 300 */
    font-size: 15px;
    font-weight: 600;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* MAIN WRAPPER */
.policy-dialog-wrapper[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    /* Pure White - Professional Clean Look */
}

/* SCROLL AREA - The only thing that scrolls */
.policy-scroll-area[b-aui3v7vria] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Gaps handled by padding/border of rows */
    background: #ffffff;
}

/* GRID SYSTEM */
.policy-grid-row[b-aui3v7vria] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Equal split */
    gap: 32px;
    padding: 16px 0;
    border-bottom: 1px solid #e2e8f0;
}

.policy-grid-row:last-child[b-aui3v7vria] {
    border-bottom: none;
}

/* HIGHLIGHTED ROWS */
.highlight-red[b-aui3v7vria] {
    background: #fef2f2;
    /* Red 50 */
    border-left: 4px solid #dc2626;
    border-right: 4px solid #dc2626;
    /* Symmetric border for bilingual */
    border-bottom: 1px solid #fecaca;
    padding: 20px;
    margin: 12px -20px;
    /* Pull out to compensate padding */
    border-radius: 4px;
}

.highlight-amber[b-aui3v7vria] {
    background: #fffbeb;
    /* Amber 50 */
    border-left: 4px solid #d97706;
    border-right: 4px solid #d97706;
    border-bottom: 1px solid #fcd34d;
    padding: 20px;
    margin: 12px -20px;
    border-radius: 4px;
}

/* Airport Reminders — Blue Info Highlight */
.highlight-blue[b-aui3v7vria] {
    background: #eff6ff;
    border-left: 4px solid #2563eb;
    border-right: 4px solid #2563eb;
    border-bottom: 1px solid #93c5fd;
    padding: 20px;
    margin: 12px -20px;
    border-radius: 4px;
}

.highlight-blue h5[b-aui3v7vria] {
    color: #1e40af;
}

.highlight-blue .policy-cell.en[b-aui3v7vria] {
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.highlight-blue .reminder-list[b-aui3v7vria] {
    padding-left: 18px;
    margin: 8px 0 0;
}

.highlight-blue .reminder-list li[b-aui3v7vria] {
    font-size: 13px;
    line-height: 1.8;
    color: #1e3a5f;
    margin-bottom: 4px;
}

.highlight-blue .reminder-list li:last-child[b-aui3v7vria] {
    color: #991b1b;
    margin-top: 4px;
}

/* TYPOGRAPHY IN CELLS */
.policy-cell[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.policy-cell.en[b-aui3v7vria] {
    padding-right: 16px;
    border-right: 1px solid #e2e8f0;
    /* Separator line */
}

.policy-cell.ar[b-aui3v7vria] {
    padding-left: 16px;
    /* Arabic font */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Special Case for Highlighted Rows: Remove internal border if background handles separation */
.highlight-red .policy-cell.en[b-aui3v7vria],
.highlight-amber .policy-cell.en[b-aui3v7vria] {
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}

/* HEADERS & TEXT */
.policy-cell h5[b-aui3v7vria] {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    color: #1e293b;
    /* Brand Dark */
}

.highlight-red h5[b-aui3v7vria] {
    color: #991b1b;
}

.highlight-amber h5[b-aui3v7vria] {
    color: #92400e;
}

.policy-cell p[b-aui3v7vria],
.policy-cell li[b-aui3v7vria] {
    font-size: 13px;
    line-height: 1.6;
    color: #334155;
    margin: 0;
}

.policy-cell ul[b-aui3v7vria] {
    padding-left: 18px;
    margin: 4px 0;
}

.policy-cell a[b-aui3v7vria] {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}

/* OATH BOX */
.oath-box-row[b-aui3v7vria] {
    margin-top: 24px;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.oath-text[b-aui3v7vria] {
    font-style: italic;
    font-weight: 500;
    color: #475569;
    font-size: 13px;
    line-height: 1.7;
}

/* FOOTER ACTIONS */
.policy-footer-actions[b-aui3v7vria] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Checkbox left, Buttons right */
    width: 100%;
}

.policy-error-badge[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fee2e2;
    color: #dc2626;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 12px;
}

[b-aui3v7vria] .policy-checkbox-authoritative label {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

/* SCROLLBAR CUSTOMIZATION */
.policy-scroll-area[b-aui3v7vria]::-webkit-scrollbar {
    width: 10px;
}

.policy-scroll-area[b-aui3v7vria]::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.policy-scroll-area[b-aui3v7vria]::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 6px;
    border: 3px solid #f1f5f9;
}

.policy-scroll-area[b-aui3v7vria]::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .policy-grid-row[b-aui3v7vria] {
        grid-template-columns: 1fr;
        /* Stack vertically on small screens */
        gap: 16px;
    }

    .policy-cell.en[b-aui3v7vria] {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 16px;
        padding-right: 0;
    }

    .policy-cell.ar[b-aui3v7vria] {
        padding-left: 0;
    }
}

/* SAFETY: Ensure Primary Button Text is White */
[b-aui3v7vria] .policy-dialog .e-footer-content .e-btn.e-primary {
    color: #ffffff !important;
    fill: #ffffff !important;
    /* For icons if any */
}

/* ========================================
   COMPACT ATTACHMENT ICON BUTTON
   ======================================== */

.footer-button-row[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Submit button wrapper - fills remaining space after attachment icon */
.footer-button-row .submit-btn-wrapper[b-aui3v7vria] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Ensure the button inside fills the wrapper */
.footer-button-row .submit-btn-wrapper .e-btn[b-aui3v7vria] {
    width: 100%;
}

.attachment-icon-btn[b-aui3v7vria] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 44px;
    height: 38px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.attachment-icon-btn:hover[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandForeground1);
}

.attachment-icon-btn:active[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground1Pressed);
}

.attachment-icon-btn .e-icons[b-aui3v7vria] {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground2);
}

.attachment-icon-btn:hover .e-icons[b-aui3v7vria] {
    color: var(--BEC-colorBrandForeground1);
}

.attachment-badge[b-aui3v7vria] {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    background: var(--BEC-colorBrandBackground);
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
}

/* ========================================
   ATTACHMENTS DIALOG STYLING
   ======================================== */

.attachments-dialog-content[b-aui3v7vria] {
    padding: 16px;
    max-height: 480px;
    overflow-y: auto;
}

/* Bilingual instruction text inside attachments dialog */
.attachment-instructions[b-aui3v7vria] {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 6px;
    border-left: 3px solid var(--BEC-colorBrandForeground1);
}

.attachment-instructions p[b-aui3v7vria] {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground3);
}

.attachment-instructions p[dir="rtl"][b-aui3v7vria] {
    text-align: right;
    margin-bottom: 4px;
}

.attachment-instructions p[lang="en"][b-aui3v7vria] {
    text-align: left;
}

.attachment-dialog-count[b-aui3v7vria] {
    margin-left: auto;
    background: var(--BEC-colorBrandBackground);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

[b-aui3v7vria] .attachments-dialog .e-dlg-header-content {
    padding: 12px 16px !important;
}

[b-aui3v7vria] .attachments-dialog .e-dlg-content {
    padding: 0 !important;
}

.attachments-dialog-content .attachment-drop-zone[b-aui3v7vria] {
    min-height: 80px;
    margin-bottom: 0;
}

.attachments-dialog-content .upload-trigger-area[b-aui3v7vria] {
    padding: 16px;
}

.attachments-dialog-content .section-label[b-aui3v7vria] {
    font-size: 10px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
}

.attachments-dialog-content .attachment-file-list[b-aui3v7vria] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attachments-dialog-content .attachment-file-item[b-aui3v7vria] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 6px;
    transition: background 0.15s ease;
}

.attachments-dialog-content .attachment-file-item:hover[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.attachments-dialog-content .file-icon[b-aui3v7vria] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: 4px;
    flex-shrink: 0;
}

.attachments-dialog-content .file-info[b-aui3v7vria] {
    flex-grow: 1;
    min-width: 0;
}

.attachments-dialog-content .file-name[b-aui3v7vria] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachments-dialog-content .file-meta[b-aui3v7vria] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

.attachments-dialog-content .file-actions[b-aui3v7vria] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.attachments-dialog-content .file-view-btn[b-aui3v7vria],
.attachments-dialog-content .file-remove-btn[b-aui3v7vria] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.attachments-dialog-content .file-view-btn:hover[b-aui3v7vria] {
    background: var(--BEC-colorNeutralBackground1);
}

.attachments-dialog-content .file-remove-btn:hover[b-aui3v7vria] {
    background: #fee2e2;
}

.attachments-dialog-content .file-remove-btn .e-icons[b-aui3v7vria] {
    color: #dc2626;
}

.attachments-dialog-content .file-success[b-aui3v7vria] {
    color: #16a34a;
}

.attachments-dialog-content .file-uploading[b-aui3v7vria] {
    color: var(--BEC-colorBrandForeground1);
}

.attachments-dialog-content .file-error[b-aui3v7vria] {
    color: #dc2626;
}
/* /Components/Pages/MainLayout/FlightTicket/VendorPortal/VendorDashboard.razor.rz.scp.css */
/* ============================================================================
   Vendor Portal - GDS / Flight System Theme
   Uses BEC_Theme.css variables with GDS-specific overrides for this component
   ============================================================================ */

/* ============================================================================
   Outer Layout Structure (Replaces MainLayout)
   Component-scoped GDS design variables referencing BEC_Theme.css
   ============================================================================ */

.vendor-app-container[b-nva36r8d3x] {
    /* === GDS-Specific Design Tokens (Component Scope) === */
    /* These extend BEC_Theme for the GDS flight system aesthetic */

    /* Backgrounds - mapped to BEC theme neutrals */
    --bg-body: var(--BEC-colorNeutralBackground3, #FAF9F8);
    --bg-surface: var(--BEC-colorNeutralBackground1, #ffffff);
    --bg-dark: #1e293b;
    /* GDS dark slate - unique to vendor portal */
    --bg-sidebar: #0f172a;
    /* GDS sidebar - unique to vendor portal */

    /* Text - mapped to BEC theme */
    --text-primary: var(--BEC-colorNeutralForeground1, #323130);
    --text-secondary: var(--BEC-colorNeutralForeground3, #605E5C);
    --text-inverse: var(--BEC-colorNeutralForegroundOnBrand, #ffffff);

    /* Brand - GDS uses sky blue for flight system aesthetic */
    --brand-primary: #0078D4;
    /* Fluent Blue - enterprise theme */
    --brand-secondary: #106EBE;
    /* Blue accent */

    /* Borders - mapped to BEC theme */
    --border-color: var(--BEC-colorNeutralStroke1, #EDEBE9);
    --border-light: var(--BEC-colorNeutralBackground4, #f0f0f0);

    /* GDS Status Colors - Aviation industry standard */
    --status-req-bg: var(--BEC-colorPaletteRedBackground1, #fdf3f4);
    --status-req-text: var(--BEC-colorPaletteRedForeground1, #bc2f32);
    --status-qtd-bg: #e0f2fe;
    /* Sky blue tint - quoted */
    --status-qtd-text: #0284c7;
    --status-tkt-bg: var(--BEC-colorPaletteGreenBackground1, #f1faf1);
    --status-tkt-text: var(--BEC-colorPaletteGreenForeground1, #107c10);
    --status-won-bg: var(--BEC-colorPaletteGreenBackground1, #f1faf1);
    --status-won-text: var(--BEC-colorPaletteGreenForeground1, #107c10);
    --status-lost-bg: var(--BEC-colorNeutralBackground4, #f0f0f0);
    --status-lost-text: var(--BEC-colorNeutralForeground3, #616161);
    --status-warn: #facc15;
    /* Yellow warning color */

    /* Typography - mapped to BEC theme */
    --font-main: var(--BEC-fontFamilyBase, 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif);
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;

    /* Shadows - mapped to BEC theme */
    --shadow-sm: var(--BEC-shadow2, 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14));
    --shadow-md: var(--BEC-shadow4, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14));

    /* === Layout === */
    display: flex;
    height: 100vh;
    font-family: var(--font-main);
    color: var(--text-primary);
    overflow: hidden;
    background: var(--bg-body);
}

/* 1. SIDEBAR (Slim GDS Style) */
.gds-sidebar[b-nva36r8d3x] {
    width: 64px;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    z-index: 50;
    flex-shrink: 0;
}

.sidebar-logo[b-nva36r8d3x] {
    width: 40px;
    height: 40px;
    background: var(--brand-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    margin-bottom: 40px;
}

.nav-item[b-nva36r8d3x] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    border: none;
    background: none;
    font-size: 16px;
}

.nav-item:hover[b-nva36r8d3x] {
    background: #f1f5f9;
    color: var(--brand-primary);
}

.nav-item.active[b-nva36r8d3x] {
    background: #e0f2fe;
    color: var(--brand-primary);
}

/* 2. MAIN CONTENT AREA */
.content-wrapper[b-nva36r8d3x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 3. TOP BAR */
.gds-topbar[b-nva36r8d3x] {
    height: 48px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.topbar-title[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.topbar-title .vendor-greeting[b-nva36r8d3x] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
}

.topbar-title .vendor-portal-title[b-nva36r8d3x] {
    font-size: 11px;
    font-weight: 500;
    margin: 0;
    color: var(--text-secondary);
}

.topbar-title h1.vendor-portal-title[b-nva36r8d3x] {
    display: block;
}

.vendor-initials[b-nva36r8d3x] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0078D4;
    color: var(--text-inverse, #fff);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-main);
}

.command-bar[b-nva36r8d3x] {
    flex: 1;
    max-width: 520px;
    margin: 0 16px;
    position: relative;
}

/* 4. WORKSPACE / GRID AREA - Maximize vertical space */
.workspace-area[b-nva36r8d3x] {
    flex: 1;
    padding: 10px 0 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Vendor Dashboard wrapper - ensure it fills available space */
.vendor-dashboard[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: visible;
}

.flight-board-container[b-nva36r8d3x] {
    background: var(--bg-surface);
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--border-color);
    border-bottom: none;
    border-left: none;
    border-right: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
}

/* Board Header → replaced by .tab-bar */
.board-header[b-nva36r8d3x] {
    display: none;
}

/* Tab Bar — Clean bottom-border style (wireframe) */
.tab-bar[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
    background: var(--bg-surface);
    gap: 0;
    flex-shrink: 0;
}

.tab-bar-tabs[b-nva36r8d3x] {
    display: flex;
    gap: 0;
    flex: 1;
}

.tab[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}

.tab:hover[b-nva36r8d3x] {
    color: var(--text-primary);
}

.tab.active[b-nva36r8d3x] {
    color: #0078D4;
    border-bottom-color: #0078D4;
}

.tab-count[b-nva36r8d3x] {
    font-size: 10px;
    font-weight: 700;
    background: #F3F2F1;
    color: var(--text-secondary);
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.tab.active .tab-count[b-nva36r8d3x] {
    background: #DEECF9;
    color: #0078D4;
}

.tab-badge[b-nva36r8d3x] {
    font-size: 10px;
    font-weight: 700;
    background: #D13438;
    color: #fff;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    margin-inline-start: 4px;
    animation: badge-pop-b-nva36r8d3x 0.25s ease-out;
}

@keyframes badge-pop-b-nva36r8d3x {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.tab-bar-actions[b-nva36r8d3x] {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Grid Info Bar — item count + last refreshed */
.grid-info-bar[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    font-size: 12px;
    color: #605E5C;
}

.grid-info-bar strong[b-nva36r8d3x] {
    color: #323130;
    font-weight: 600;
}

.last-refreshed-text[b-nva36r8d3x] {
    font-size: 11px;
    color: var(--text-secondary, #605E5C);
    font-weight: 400;
    white-space: nowrap;
    margin-right: 4px;
}

/* ============================================================================
   SYNCFUSION PAGER — Compact Fluent Style
   ============================================================================ */
[b-nva36r8d3x] .e-grid .e-gridpager {
    border-top: 1px solid var(--border-color);
    background: #FAF9F8;
    padding: 4px 10px;
    font-size: 12px;
    font-family: var(--font-main);
}

[b-nva36r8d3x] .e-grid .e-pagercontainer {
    background: transparent;
}

[b-nva36r8d3x] .e-grid .e-gridpager .e-numericitem,
[b-nva36r8d3x] .e-grid .e-gridpager .e-first,
[b-nva36r8d3x] .e-grid .e-gridpager .e-prev,
[b-nva36r8d3x] .e-grid .e-gridpager .e-next,
[b-nva36r8d3x] .e-grid .e-gridpager .e-last {
    min-width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    border-radius: 4px;
    margin: 0 2px;
}

[b-nva36r8d3x] .e-grid .e-gridpager .e-currentitem {
    background: #0078D4 !important;
    color: #fff !important;
    border-radius: 4px;
}

[b-nva36r8d3x] .e-grid .e-gridpager .e-numericitem:hover {
    background: #DEECF9;
}

[b-nva36r8d3x] .e-grid .e-gridpager .e-parentmsgbar {
    font-size: 11px;
    color: #605E5C;
}

[b-nva36r8d3x] .e-grid .e-gridpager .e-pagesizes {
    font-size: 11px;
}

.filter-tabs[b-nva36r8d3x] {
    display: none;
}

/* Custom Tab Styling using ::deep for SfTab override if needed, or custom buttons */
.filter-tab-btn[b-nva36r8d3x] {
    display: none;
}

/* ============================================================================
   SYNCFUSION GRID OVERRIDES (The "Hybrid" Approach)
   ============================================================================ */

/* Reset generic grid styles to be flatter */
[b-nva36r8d3x] .e-grid {
    font-family: var(--font-main);
}

[b-nva36r8d3x] .e-grid .e-gridheader {
    border-bottom: 1px solid var(--border-color);
    padding: 0;
}

[b-nva36r8d3x] .e-grid .e-headercell {
    background-color: #F3F2F1 !important;
    color: #605E5C !important;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 10px !important;
}

/* Hide filter icons for clean headers (wireframe) */
[b-nva36r8d3x] .e-grid .e-filtermenudiv,
[b-nva36r8d3x] .e-grid .e-icon-filter {
    display: none !important;
}

[b-nva36r8d3x] .e-grid .e-rowcell {
    font-size: 13px;
    color: var(--text-primary);
    padding: 5px 10px !important;
}

[b-nva36r8d3x] .e-grid .e-row:hover .e-rowcell {
    background-color: #DEECF9 !important;
    cursor: pointer;
}

/* Zebra striping */
[b-nva36r8d3x] .e-grid .e-altrow .e-rowcell {
    background-color: #FAFAFA !important;
}

[b-nva36r8d3x] .e-grid .e-altrow:hover .e-rowcell {
    background-color: #DEECF9 !important;
}

/* Specific Cell Content Styling */
.cell-pnr[b-nva36r8d3x] {
    font-family: inherit;
    font-weight: 600;
    color: #0078D4;
    font-size: 12px;
}

.cell-route[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cell-route .code[b-nva36r8d3x] {
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
}

.cell-route .arrow[b-nva36r8d3x] {
    color: #A19F9D;
    font-size: 11px;
}

.cell-trip-type[b-nva36r8d3x] {
    font-size: 11px;
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: #605E5C;
    font-weight: 600;
    text-transform: uppercase;
}

.cell-trip-type.trip-badge-roundtrip[b-nva36r8d3x] {
    color: #0078D4;
}

/* Status Badges — Wireframe: plain colored text, no pill backgrounds */
/* ============================================================================
   TEXT-ONLY STATUS (Wireframe Style) - No pill backgrounds
   ============================================================================ */
.btn-pill[b-nva36r8d3x] {
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 0;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-transform: none;
    text-decoration: none;
    min-width: auto;
    background: transparent;
    color: #605E5C;
}

/* 1. PRIMARY (Quote - text link style) */
.btn-pill.primary[b-nva36r8d3x] {
    background: transparent;
    color: #0078D4;
    box-shadow: none;
    font-weight: 700;
}

.btn-pill.primary:hover[b-nva36r8d3x] {
    box-shadow: none;
    transform: none;
    text-decoration: underline;
    color: #106EBE;
}

/* 2. INFO / SECONDARY (Propose/View - text link style) */
.btn-pill.info[b-nva36r8d3x] {
    background: transparent;
    color: #0078D4;
    box-shadow: none;
    font-weight: 600;
}

.btn-pill.info:hover[b-nva36r8d3x] {
    box-shadow: none;
    transform: none;
    text-decoration: underline;
    color: #106EBE;
}

/* 3. SUCCESS (Upload - text link style) */
.btn-pill.success[b-nva36r8d3x] {
    background: transparent;
    color: #107C10;
    box-shadow: none;
    font-weight: 600;
}

.btn-pill.success:hover[b-nva36r8d3x] {
    box-shadow: none;
    transform: none;
    text-decoration: underline;
    color: #0B6A0B;
}

/* 4. CLOSED / DISABLED (muted text) */
.btn-pill.closed[b-nva36r8d3x] {
    background-color: transparent;
    color: #A19F9D;
    box-shadow: none;
    cursor: default;
    font-weight: 600;
    border: none;
}

/* 5. OUTLINE (View / secondary action - text link) */
.btn-pill.outline[b-nva36r8d3x] {
    background: transparent;
    color: #605E5C;
    border: none;
    box-shadow: none;
    font-weight: 400;
}

.btn-pill.outline:hover[b-nva36r8d3x] {
    background: transparent;
    border-color: transparent;
    color: #323130;
    text-decoration: underline;
}

/* 6. WITHDRAW (error red text link) */
.btn-pill.withdraw-btn[b-nva36r8d3x] {
    background: transparent;
    color: #D13438;
    box-shadow: none;
    font-weight: 600;
    border: none;
}

.btn-pill.withdraw-btn:hover[b-nva36r8d3x] {
    text-decoration: underline;
    color: #A4262C;
}

/* --- STATUS BADGES (Text-only, no backgrounds) --- */
.status-badge[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge {
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 13px;
    padding: 0;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: transparent;
}

.status-badge.req[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge.req {
    background-color: transparent;
    color: #D13438;
}

.status-badge.qtd[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge.qtd {
    background-color: transparent;
    color: #0078D4;
}

.status-badge.won[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge.won {
    background-color: transparent;
    color: #107C10;
}

.status-badge.rejected[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge.rejected {
    background-color: transparent;
    color: #D13438;
}

.status-badge.closed[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge.closed {
    background-color: transparent;
    color: #A19F9D;
}

/* My Quotes: tickets booked by another vendor - muted text */
.status-text-large.booked[b-nva36r8d3x],
[b-nva36r8d3x] .status-text-large.booked {
    background-color: transparent;
    color: #A19F9D;
    font-weight: 600;
    padding: 0;
    border-radius: 0;
}

.status-badge.waiting[b-nva36r8d3x],
[b-nva36r8d3x] .status-badge.waiting {
    background-color: transparent;
    color: #FFB900;
    border: none;
}

/* Status text for history grid (text-only, no backgrounds) */
.status-text-large[b-nva36r8d3x] {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-text-large.won[b-nva36r8d3x] { color: #107C10; }
.status-text-large.lost[b-nva36r8d3x] { color: #D13438; }
.status-text-large.pend[b-nva36r8d3x] { color: #FFB900; }

/* ============================================================================
   SIDE WIZARD PANEL (Replacing .slide-panel)
   ============================================================================ */

.wizard-overlay[b-nva36r8d3x] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100;
    transition: opacity 0.3s;
}

.wizard-panel[b-nva36r8d3x] {
    position: absolute;
    top: 0;
    right: 0;
    width: 580px;
    height: 100%;
    background: var(--bg-surface);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    animation: slideIn-b-nva36r8d3x 0.25s ease-out;
    display: flex;
    flex-direction: column;
}

@keyframes slideIn-b-nva36r8d3x {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.wizard-header[b-nva36r8d3x] {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F3F2F1;
    min-height: 48px;
}

.wizard-title h2[b-nva36r8d3x] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.wizard-title .sub[b-nva36r8d3x] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.wizard-content[b-nva36r8d3x] {
    flex: 1;
    padding: 12px 16px;
    overflow-y: auto;
    background: #FFFFFF;
}

.wiz-card[b-nva36r8d3x] {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 12px;
}

.wiz-label[b-nva36r8d3x] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wiz-route[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.route-line[b-nva36r8d3x] {
    flex: 1;
    height: 1px;
    background: var(--border-color);
    position: relative;
    margin: 0 8px;
}

/* Form Controls matching GDS */
.form-row[b-nva36r8d3x] {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.gds-input-group[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Prevent flex overflow */
}

.gds-input-group label[b-nva36r8d3x] {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #A19F9D;
    margin-bottom: 4px;
    text-transform: uppercase;
}

[b-nva36r8d3x] .gds-input {
    font-family: var(--font-main);
    font-size: 13px;
    border-radius: 4px;
}

.field-hint[b-nva36r8d3x] {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    display: block;
}

.quote-option-card[b-nva36r8d3x] {
    border-left: 3px solid var(--brand-primary);
}

.add-option-btn[b-nva36r8d3x] { margin-right: 8px; }
.remove-option-btn[b-nva36r8d3x] { font-size: 12px; }

/* ============================================================================
   STATS BAR - Compact Single Row Design
   ============================================================================ */
.stats-grid[b-nva36r8d3x] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 10px;
    padding: 0 20px;
}

.stat-card[b-nva36r8d3x] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 6px 10px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    transition: box-shadow 0.15s;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: none;
}

.stat-card:hover[b-nva36r8d3x] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.stat-icon[b-nva36r8d3x] {
    display: none;
}

/* Specific Card Colors - icons hidden */
.stat-opportunities .stat-icon[b-nva36r8d3x],
.stat-quotes .stat-icon[b-nva36r8d3x],
.stat-wins .stat-icon[b-nva36r8d3x],
.stat-etickets .stat-icon[b-nva36r8d3x],
.stat-revenue .stat-icon[b-nva36r8d3x] {
    display: none;
}

.stat-content[b-nva36r8d3x] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    flex: 1;
}

.stat-value[b-nva36r8d3x] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    flex-shrink: 0;
}

.stat-label[b-nva36r8d3x] {
    font-size: 11px;
    color: #605E5C;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-sub[b-nva36r8d3x] {
    font-size: 10px;
    color: #A19F9D;
    margin-left: auto;
    flex-shrink: 0;
}

.stat-badge.new[b-nva36r8d3x] {
    color: #107C10;
    font-weight: 600;
    font-size: 10px;
    margin-left: auto;
    flex-shrink: 0;
}

.stat-badge.warning[b-nva36r8d3x] {
    color: #FFB900;
    font-weight: 600;
    font-size: 10px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Responsive: Stack stats on smaller screens */
@media (max-width: 1400px) {
    .stats-grid[b-nva36r8d3x] {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .stat-card[b-nva36r8d3x] {
        padding: 6px 10px;
    }
}

@media (max-width: 900px) {
    .stats-grid[b-nva36r8d3x] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* FIX BUTTON BORDERS */
button[b-nva36r8d3x] {
    border-style: solid;
    outline: none !important;
}

/* Toolbar Buttons - Refresh/Export */
[b-nva36r8d3x] .toolbar-btn {
    height: 32px;
    font-size: 12px;
    border: 1px solid #EDEBE9 !important;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-radius: 4px;
    padding: 0 12px;
    gap: 6px;
}

[b-nva36r8d3x] .toolbar-btn:hover {
    background: #f8fafc !important;
    color: var(--brand-primary) !important;
}

[b-nva36r8d3x] .toolbar-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-action-sm[b-nva36r8d3x] {
    border: 1px solid var(--border-color);
}

.btn-action-sm.primary[b-nva36r8d3x] {
    border: 1px solid var(--brand-primary);
}

.btn-action-sm.secondary[b-nva36r8d3x] {
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #0ea5e9;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-action-sm.secondary:hover[b-nva36r8d3x] {
    background: #0ea5e9;
    color: white;
    border-color: #0ea5e9;
}

.btn-action-sm.secondary i[b-nva36r8d3x] {
    font-size: 10px;
}

/* ============================================================================
   ACTION COLUMN - Unified Design
   ============================================================================ */
.action-cell[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

/* Action Buttons (QUOTE, PROPOSE) */
.action-btn[b-nva36r8d3x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    min-width: 70px;
}

.action-btn.primary[b-nva36r8d3x] {
    background: var(--brand-primary);
    color: white;
    border: none;
}

.action-btn.primary:hover[b-nva36r8d3x] {
    background: #0284c7;
    box-shadow: 0 2px 4px rgba(14, 165, 233, 0.3);
}

.action-btn.outline[b-nva36r8d3x] {
    background: transparent;
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
}

.action-btn.outline:hover[b-nva36r8d3x] {
    background: var(--brand-primary);
    color: white;
}

/* Action Text (CLOSED, QUOTED) - No background, just muted text */
.action-text-closed[b-nva36r8d3x] {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.action-text-quoted[b-nva36r8d3x] {
    font-size: 11px;
    font-weight: 600;
    color: #0284c7;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.wizard-header button[b-nva36r8d3x],
.nav-item[b-nva36r8d3x] {
    border: none;
}

.wizard-header button:last-child[b-nva36r8d3x] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

/* ============================================================================
   SEARCH BOX OVERRIDES
   ============================================================================ */
[b-nva36r8d3x] .gds-search-box.e-input-group {
    background: #F3F2F1 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px;
    height: 32px;
    font-family: var(--font-mono);
}

[b-nva36r8d3x] .gds-search-box .e-input::placeholder {
    font-size: 12px;
}

[b-nva36r8d3x] .gds-search-box.e-input-group.e-input-focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.1);
}

[b-nva36r8d3x] .gds-search-box .e-input {
    font-size: 13px !important;
    color: var(--text-primary) !important;
    padding-left: 10px !important;
}

[b-nva36r8d3x] .gds-search-box .e-clear-icon {
    color: var(--text-secondary);
}

/* ============================================================================
   BULK BOOKING STYLES
   ============================================================================ */

/* Bulk Stat Card */
.stat-bulk .stat-icon[b-nva36r8d3x] {
    display: none;
}

.stat-bulk.has-new[b-nva36r8d3x] {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    animation: pulse-border-b-nva36r8d3x 2s ease-in-out infinite;
}

@keyframes pulse-border-b-nva36r8d3x {

    0%,
    100% {
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    }

    50% {
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
    }
}

/* Bulk Tab Button */
.filter-tab-btn.bulk[b-nva36r8d3x] {
    position: relative;
}

.filter-tab-btn.bulk .new-badge[b-nva36r8d3x] {
    background: #ef4444;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;
    font-weight: 700;
}

/* Cell Batch ID */
.cell-batch[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cell-batch .batch-id[b-nva36r8d3x] {
    font-family: inherit;
    font-weight: 700;
    color: #2563eb;
    font-size: 13px;
}

.cell-batch .new-indicator[b-nva36r8d3x] {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse-b-nva36r8d3x 2s infinite;
}

@keyframes pulse-b-nva36r8d3x {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

/* Date Range Display */
.cell-date-range .date-range[b-nva36r8d3x] {
    font-family: inherit;
    font-size: 12px;
    color: var(--text-secondary);
}

.cell-date-range .date-flexible[b-nva36r8d3x] {
    font-size: 12px;
    color: #d97706;
}

.cell-date-range .date-flexible i[b-nva36r8d3x] {
    margin-right: 4px;
}

/* Pax Count */
.pax-count[b-nva36r8d3x] {
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
}

/* Deadline */
.deadline[b-nva36r8d3x] {
    font-family: inherit;
    font-size: 12px;
    color: var(--text-secondary);
}

.deadline.urgent[b-nva36r8d3x] {
    color: #ef4444;
    font-weight: 600;
}

/* Bulk Quote Panel */
.bulk-quote-panel[b-nva36r8d3x] {
    width: 650px;
}

.batch-info-grid[b-nva36r8d3x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.batch-info-grid .info-item[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.batch-info-grid .info-item .label[b-nva36r8d3x] {
    font-size: 10px;
    font-weight: 600;
    color: #A19F9D;
    text-transform: uppercase;
}

.batch-info-grid .info-item .value[b-nva36r8d3x] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.batch-info-grid .info-item .value.highlight[b-nva36r8d3x] {
    color: #2563eb;
    font-size: 18px;
}

.batch-info-grid .info-item .value.urgent[b-nva36r8d3x] {
    color: #ef4444;
}

/* Large Input for Price */
[b-nva36r8d3x] .large-input .e-input {
    font-size: 20px !important;
    font-weight: 700 !important;
    font-family: var(--font-mono) !important;
}

/* Flight Option Row */
.flight-option-row[b-nva36r8d3x] {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    margin-top: 12px;
}

.flight-option-row:first-of-type[b-nva36r8d3x] {
    margin-top: 0;
}

/* GDS Input Style */
input.gds-input[b-nva36r8d3x],
textarea.gds-input[b-nva36r8d3x],
select.gds-input[b-nva36r8d3x] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: var(--font-main);
    font-size: 13px;
    color: var(--text-primary);
    background: white;
    transition: border-color 0.2s;
}

input.gds-input:focus[b-nva36r8d3x],
textarea.gds-input:focus[b-nva36r8d3x],
select.gds-input:focus[b-nva36r8d3x] {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.1);
}

/* Bulk RFQ Details Panel */
.bulk-rfq-details-panel[b-nva36r8d3x] {
    width: 550px;
}

/* Quote Summary Card */
.quote-summary-card[b-nva36r8d3x] {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
}

.quote-summary-card .quote-main[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.quote-summary-card .quote-total[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.quote-summary-card .quote-label[b-nva36r8d3x] {
    font-size: 12px;
    color: var(--text-secondary);
}

.quote-summary-card .quote-value[b-nva36r8d3x] {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.quote-summary-card .quote-value.total[b-nva36r8d3x] {
    font-size: 20px;
    color: #059669;
}

.quote-summary-card .quote-meta[b-nva36r8d3x] {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Status banner success */
.status-banner.success[b-nva36r8d3x] {
    background: #ecfdf5;
    border: 1px solid #10b981;
    color: #065f46;
    padding: 12px 16px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

/* Link Style Action Button (Upload) */
.btn-upload-link[b-nva36r8d3x] {
    background: none;
    border: none;
    color: var(--brand-primary);
    font-weight: 700;
    cursor: pointer;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
}

.btn-upload-link:hover[b-nva36r8d3x] {
    background: #e0f2fe;
    text-decoration: underline;
}

/* Loading Panel Centering */
.loading-panel[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    min-height: 200px;
    gap: 12px;
    color: var(--text-secondary);
}

/* Full-page dashboard loading state */
.dashboard-loading[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 140px);
    gap: 16px;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

.dashboard-loading p[b-nva36r8d3x] {
    font-size: 14px;
    margin: 0;
}

/* Welcome empty state for new vendors */
.welcome-empty-state[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    gap: 8px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    padding: 48px 24px;
}

.welcome-empty-state h3[b-nva36r8d3x] {
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 0;
}

.welcome-empty-state p[b-nva36r8d3x] {
    font-size: 14px;
    margin: 0;
    max-width: 400px;
    line-height: 1.5;
}

/* Bulk Quote Wizard loading state (batch + candidates + pricing options) */
.bulk-quote-wizard-loading[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 24px;
    gap: 16px;
    color: var(--text-secondary);
}

.bulk-quote-loading-spinner[b-nva36r8d3x] {
    font-size: 32px;
    color: var(--brand-primary);
}

.bulk-quote-loading-text[b-nva36r8d3x] {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

/* ============================================================================
   DATE SELECTION CHIPS
   ============================================================================ */

/* Quick Date Chip Button */
.date-chip[b-nva36r8d3x] {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    transition: all 0.2s ease;
    font-family: var(--font-main);
}

.date-chip:hover[b-nva36r8d3x] {
    border-color: var(--brand-primary);
    background: #f0f9ff;
}

.date-chip.selected[b-nva36r8d3x] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

.date-chip.selected:hover[b-nva36r8d3x] {
    background: #0284c7;
    border-color: #0284c7;
}

/* Selected Date Display Chip */
.selected-date-chip[b-nva36r8d3x] {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #0369a1;
    gap: 0;
}

.selected-date-chip .remove-date-btn[b-nva36r8d3x] {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 8px;
    border-radius: 4px;
    font-size: 11px;
    transition: all 0.2s;
}

.selected-date-chip .remove-date-btn:hover[b-nva36r8d3x] {
    background: #fee2e2;
    color: #dc2626;
}

/* Custom Date Picker Override */
[b-nva36r8d3x] .custom-datepicker .e-input-group {
    border: 2px solid var(--border-color) !important;
    border-radius: 6px !important;
    height: 40px;
}

[b-nva36r8d3x] .custom-datepicker .e-input-group.e-input-focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
}

[b-nva36r8d3x] .custom-datepicker .e-input {
    font-size: 13px !important;
    font-family: var(--font-main) !important;
}

/* ============================================================================
   NEGOTIATION STATUS COLUMN
   Shows date negotiation status with action states
   ============================================================================ */

.negotiation-cell[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.negotiation-badge[b-nva36r8d3x] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.negotiation-badge i[b-nva36r8d3x] {
    font-size: 10px;
}

/* Badge Color Variants */
.negotiation-badge.badge-warning[b-nva36r8d3x] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.negotiation-badge.badge-danger[b-nva36r8d3x] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.negotiation-badge.badge-success[b-nva36r8d3x] {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.negotiation-badge.badge-secondary[b-nva36r8d3x] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.negotiation-badge.badge-info[b-nva36r8d3x] {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #7dd3fc;
}

/* Retry Email Button */
.btn-retry-email[b-nva36r8d3x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #dc2626;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 10px;
}

.btn-retry-email:hover[b-nva36r8d3x] {
    background: #dc2626;
    color: white;
    border-color: #dc2626;
    transform: rotate(180deg);
}

.btn-retry-email:active[b-nva36r8d3x] {
    transform: rotate(180deg) scale(0.9);
}

/* Blocked Button (Date negotiation) */
.btn-action-sm.blocked[b-nva36r8d3x] {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    cursor: not-allowed;
    opacity: 0.8;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-action-sm.blocked i[b-nva36r8d3x] {
    font-size: 9px;
}

/* Status Badge Extensions */
.status-badge.blocked[b-nva36r8d3x] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

/* ============================================================================
   CLICKABLE SECTION HEADER (for Negotiation History toggle)
   ============================================================================ */
.section-header.clickable[b-nva36r8d3x] {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.2s;
    border-radius: 6px;
    padding: 8px;
    margin: -8px;
    margin-bottom: 8px;
}

.section-header.clickable:hover[b-nva36r8d3x] {
    background-color: rgba(0, 120, 212, 0.08);
}

.section-header .toggle-icon[b-nva36r8d3x] {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

/* ============================================================================
   SLIDE PANEL - Side Drawer Style
   ============================================================================ */

.slide-panel-overlay[b-nva36r8d3x] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fadeIn-b-nva36r8d3x 0.2s ease-out;
}

@keyframes fadeIn-b-nva36r8d3x {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.slide-panel[b-nva36r8d3x] {
    position: fixed;
    top: 0;
    right: 0;
    width: 580px;
    max-width: 95vw;
    height: 100vh;
    background: #ffffff;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    animation: slideInPanel-b-nva36r8d3x 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInPanel-b-nva36r8d3x {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.slide-panel-header[b-nva36r8d3x] {
    padding: 12px 20px;
    background: #F3F2F1;
    color: #323130;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid #EDEBE9;
    min-height: 48px;
}

.slide-panel-header .panel-title[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slide-panel-header .panel-title i[b-nva36r8d3x] {
    font-size: 16px;
    color: #605E5C;
}

.slide-panel-header .panel-title h2[b-nva36r8d3x] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #323130;
}

.slide-panel-header .request-badge[b-nva36r8d3x] {
    background: #EDEBE9;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    color: #323130;
}

.slide-panel-header .close-btn[b-nva36r8d3x] {
    background: transparent;
    border: none;
    color: #605E5C;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.15s;
}

.slide-panel-header .close-btn:hover[b-nva36r8d3x] {
    background: #EDEBE9;
}

.slide-panel-body[b-nva36r8d3x] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    background: #FAF9F8;
}

.slide-panel-footer[b-nva36r8d3x] {
    padding: 12px 20px;
    background: #F3F2F1;
    border-top: 1px solid #EDEBE9;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* ============================================================================
   BOOKING DOCUMENTS PANEL
   ============================================================================ */

.booking-docs-info-banner[b-nva36r8d3x] {
    display: flex;
    gap: 24px;
    background: #ffffff;
    padding: 16px 20px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.booking-docs-info-banner .info-item[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.booking-docs-info-banner .info-item i[b-nva36r8d3x] {
    font-size: 18px;
    color: #0ea5e9;
    width: 36px;
    height: 36px;
    background: #e0f2fe;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.booking-docs-info-banner .info-item .label[b-nva36r8d3x] {
    display: block;
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.booking-docs-info-banner .info-item .value[b-nva36r8d3x] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.upload-instructions[b-nva36r8d3x] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    padding: 14px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.upload-instructions i[b-nva36r8d3x] {
    color: #3b82f6;
    font-size: 18px;
    margin-top: 2px;
}

.upload-instructions strong[b-nva36r8d3x] {
    display: block;
    color: #1e40af;
    margin-bottom: 4px;
}

.upload-instructions p[b-nva36r8d3x] {
    margin: 0;
    font-size: 13px;
    color: #1e40af;
    line-height: 1.5;
}

.panel-section[b-nva36r8d3x] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
}

.panel-section .section-header[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.panel-section .section-header i[b-nva36r8d3x] {
    color: #0ea5e9;
    font-size: 16px;
}

.panel-section .section-header h3[b-nva36r8d3x] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.panel-section .section-header .count-badge[b-nva36r8d3x] {
    background: #0ea5e9;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: auto;
}

/* Upload Form */
.upload-form .form-row[b-nva36r8d3x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.upload-form .form-group[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
}

.upload-form .form-group label[b-nva36r8d3x] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.upload-form .form-select[b-nva36r8d3x],
.upload-form .form-input[b-nva36r8d3x] {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    background: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.upload-form .form-select:focus[b-nva36r8d3x],
.upload-form .form-input:focus[b-nva36r8d3x] {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.bulk-ticket-size-error[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: #fee2e2;
    border: 1px solid #b91c1c;
    border-radius: 6px;
    color: #b91c1c;
    font-size: 14px;
    font-weight: 500;
}

.bulk-ticket-size-error i[b-nva36r8d3x] {
    flex-shrink: 0;
}

/* Bulk Ticket Upload Panel — Download Section */
.download-section[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.download-section .download-description[b-nva36r8d3x] {
    font-size: 13px;
    color: var(--BEC-text-secondary, #64748b);
    margin: 0;
    line-height: 1.5;
}

/* Bulk Ticket Upload Panel — Info Banner */
.upload-info-banner[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--BEC-info-bg, #e8f4fd);
    border: 1px solid var(--BEC-info-border, #0078d4);
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 16px;
}

.upload-info-banner span[b-nva36r8d3x] {
    font-size: 13px;
    color: var(--BEC-text-primary, #1e293b);
}

/* Bulk Ticket Upload Panel — File List Item */
.file-list-item[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--BEC-surface, #ffffff);
    border: 1px solid var(--BEC-border, #e2e8f0);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: border-color 0.2s;
}

.file-list-item:last-child[b-nva36r8d3x] {
    margin-bottom: 0;
}

.file-list-item:hover[b-nva36r8d3x] {
    border-color: var(--BEC-border-hover, #cbd5e1);
}

.file-list-item .doc-info[b-nva36r8d3x] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-list-item .doc-name[b-nva36r8d3x] {
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size[b-nva36r8d3x] {
    font-size: 12px;
    color: var(--BEC-text-secondary, #94a3b8);
}

.remove-file-btn[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--BEC-text-secondary, #94a3b8);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.remove-file-btn:hover[b-nva36r8d3x] {
    background: var(--BEC-danger-bg, #fee2e2);
    color: var(--BEC-danger, #b91c1c);
}

.upload-zone[b-nva36r8d3x] {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    padding: 32px 24px;
    text-align: center;
    background: #f8fafc;
    transition: all 0.2s;
    cursor: pointer;
}

.upload-zone:hover[b-nva36r8d3x] {
    border-color: #0ea5e9;
    background: #f0f9ff;
}

.upload-zone input[type="file"][b-nva36r8d3x] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-zone-content[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.upload-zone-content i[b-nva36r8d3x] {
    font-size: 32px;
    color: #94a3b8;
}

.upload-zone-content span[b-nva36r8d3x] {
    color: #64748b;
    font-size: 14px;
}

.upload-zone-content .file-types[b-nva36r8d3x] {
    font-size: 12px;
    color: #94a3b8;
}

.upload-progress[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f0f9ff;
    border-radius: 6px;
    margin-top: 12px;
}

.upload-progress span[b-nva36r8d3x] {
    font-size: 13px;
    color: #0369a1;
}

/* Uploaded Documents List */
.uploaded-docs-list[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.doc-item[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    transition: all 0.2s;
}

.doc-item:hover[b-nva36r8d3x] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.doc-item .doc-icon[b-nva36r8d3x] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.doc-item .doc-icon.pdf[b-nva36r8d3x] {
    background: #fee2e2;
    color: #dc2626;
}

.doc-item .doc-icon.doc[b-nva36r8d3x] {
    background: #dbeafe;
    color: #2563eb;
}

.doc-item .doc-icon.image[b-nva36r8d3x] {
    background: #d1fae5;
    color: #059669;
}

.doc-item .doc-icon.default[b-nva36r8d3x] {
    background: #f1f5f9;
    color: #64748b;
}

.doc-item .doc-info[b-nva36r8d3x] {
    flex: 1;
    min-width: 0;
}

.doc-item .doc-info .doc-name[b-nva36r8d3x] {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-item .doc-info .doc-meta[b-nva36r8d3x] {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

.doc-item .doc-type-badge[b-nva36r8d3x] {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    background: #dbeafe;
    color: #1d4ed8;
}

.doc-item .doc-type-badge.eticket[b-nva36r8d3x] {
    background: #d1fae5;
    color: #047857;
}

.doc-item .doc-actions[b-nva36r8d3x] {
    display: flex;
    gap: 6px;
}

.doc-item .doc-actions button[b-nva36r8d3x] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s;
}

.doc-item .doc-actions .btn-view[b-nva36r8d3x] {
    background: #e0f2fe;
    color: #0284c7;
}

.doc-item .doc-actions .btn-view:hover[b-nva36r8d3x] {
    background: #bae6fd;
}

.doc-item .doc-actions .btn-delete[b-nva36r8d3x] {
    background: #fee2e2;
    color: #dc2626;
}

.doc-item .doc-actions .btn-delete:hover[b-nva36r8d3x] {
    background: #fecaca;
}

.no-docs-message[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px;
    color: #94a3b8;
    text-align: center;
}

.no-docs-message i[b-nva36r8d3x] {
    font-size: 32px;
    opacity: 0.5;
}

.no-docs-message span[b-nva36r8d3x] {
    font-size: 13px;
}

/* Loading Section */
.loading-section[b-nva36r8d3x] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px;
    color: #64748b;
}

/* Email Note */
.email-note[b-nva36r8d3x] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 14px 16px;
    border-radius: 8px;
}

.email-note i[b-nva36r8d3x] {
    color: #059669;
    font-size: 16px;
    margin-top: 2px;
}

.email-note strong[b-nva36r8d3x] {
    display: block;
    color: #047857;
    margin-bottom: 6px;
    font-size: 13px;
}

.email-note ul[b-nva36r8d3x] {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    color: #065f46;
    line-height: 1.6;
}

/* Submission Warning */
.submission-warning[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.submission-warning i[b-nva36r8d3x] {
    color: #d97706;
    font-size: 16px;
}

.submission-warning span[b-nva36r8d3x] {
    font-size: 13px;
    color: #92400e;
}

/* Empty Documents State */
.empty-docs-state[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 24px;
    color: #94a3b8;
    text-align: center;
}

.empty-docs-state i[b-nva36r8d3x] {
    font-size: 40px;
    opacity: 0.4;
    color: #cbd5e1;
}

.empty-docs-state span[b-nva36r8d3x] {
    font-size: 14px;
    color: #64748b;
}

.empty-docs-state .hint[b-nva36r8d3x] {
    font-size: 12px;
    color: #94a3b8;
}

/* Uploaded Document Item - Enhanced */
.uploaded-doc-item[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.2s;
    margin-bottom: 10px;
}

.uploaded-doc-item:last-child[b-nva36r8d3x] {
    margin-bottom: 0;
}

.uploaded-doc-item:hover[b-nva36r8d3x] {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.uploaded-doc-item.eticket[b-nva36r8d3x] {
    border-left: 3px solid #059669;
    background: linear-gradient(to right, #f0fdf4, #ffffff);
}

.uploaded-doc-item .doc-icon[b-nva36r8d3x] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    background: #f1f5f9;
    color: #64748b;
}

.uploaded-doc-item.eticket .doc-icon[b-nva36r8d3x] {
    background: #d1fae5;
    color: #059669;
}

.uploaded-doc-item .doc-info[b-nva36r8d3x] {
    flex: 1;
    min-width: 0;
}

.uploaded-doc-item .doc-info .doc-name[b-nva36r8d3x] {
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-bottom: 6px;
}

.uploaded-doc-item .doc-info .doc-meta[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.uploaded-doc-item .doc-meta .doc-type-badge[b-nva36r8d3x] {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    background: #dbeafe;
    color: #1d4ed8;
}

.uploaded-doc-item.eticket .doc-meta .doc-type-badge[b-nva36r8d3x] {
    background: #d1fae5;
    color: #047857;
}

.uploaded-doc-item .doc-meta .booking-ref[b-nva36r8d3x] {
    font-size: 11px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 3px;
}

.uploaded-doc-item .doc-meta .doc-size[b-nva36r8d3x] {
    font-size: 11px;
    color: #94a3b8;
}

.uploaded-doc-item .doc-actions[b-nva36r8d3x] {
    display: flex;
    gap: 8px;
}

.uploaded-doc-item .doc-actions .action-btn[b-nva36r8d3x] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.2s;
}

.uploaded-doc-item .doc-actions .action-btn.download[b-nva36r8d3x] {
    background: #e0f2fe;
    color: #0284c7;
}

.uploaded-doc-item .doc-actions .action-btn.download:hover[b-nva36r8d3x] {
    background: #bae6fd;
}

.uploaded-doc-item .doc-actions .action-btn.delete[b-nva36r8d3x] {
    background: #fee2e2;
    color: #dc2626;
}

.uploaded-doc-item .doc-actions .action-btn.delete:hover[b-nva36r8d3x] {
    background: #fecaca;
}

/* Notes Textarea */
.notes-textarea[b-nva36r8d3x] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    background: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.notes-textarea:focus[b-nva36r8d3x] {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.notes-textarea[b-nva36r8d3x]::placeholder {
    color: #94a3b8;
}

/* Warning Banner */
.warning-banner[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 16px;
}

.warning-banner i[b-nva36r8d3x] {
    color: #d97706;
    font-size: 16px;
}

.warning-banner span[b-nva36r8d3x] {
    font-size: 13px;
    color: #92400e;
    font-weight: 500;
}

/* ============================================================================
   VIEW QUOTE PANEL & REQUEST DETAILS PANEL STYLES
   ============================================================================ */

/* Loading Panel State */
.loading-panel[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 16px;
    color: #64748b;
}

.loading-panel span[b-nva36r8d3x] {
    font-size: 14px;
}

/* Quote Status Banners */
.quote-status-banner[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: 500;
}

.quote-status-banner.winner[b-nva36r8d3x] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #fbbf24;
    color: #92400e;
}

.quote-status-banner.winner i[b-nva36r8d3x] {
    color: #d97706;
    font-size: 18px;
}

.quote-option-card.winning-option[b-nva36r8d3x] {
    border: 1px solid #fbbf24;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
}

.option-winner-badge[b-nva36r8d3x] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #fbbf24;
    color: #92400e;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.option-winner-badge i[b-nva36r8d3x] {
    color: #d97706;
    margin-right: 3px;
}

.quote-status-banner.closed[b-nva36r8d3x] {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.quote-status-banner.closed i[b-nva36r8d3x] {
    color: #94a3b8;
}

/* Info Grid */
.info-grid[b-nva36r8d3x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.info-grid .info-item[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-grid .info-item .info-label[b-nva36r8d3x] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.info-grid .info-item .info-value[b-nva36r8d3x] {
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
}

/* Candidates list in Bulk RFQ details */
.candidates-empty-msg[b-nva36r8d3x] {
    margin: 0;
    padding: var(--BEC-spacingHorizontalM);
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase200);
}

.candidates-list[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.candidate-card[b-nva36r8d3x] {
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}

.candidate-header[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.candidate-num[b-nva36r8d3x] {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    min-width: 28px;
}

.candidate-name[b-nva36r8d3x] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.candidate-meta[b-nva36r8d3x] {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}

.candidate-meta span + span[b-nva36r8d3x]::before {
    content: " · ";
    color: #94a3b8;
}

.candidate-notes[b-nva36r8d3x] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
    font-size: 13px;
    color: #475569;
}

.candidate-notes .notes-label[b-nva36r8d3x] {
    font-weight: 600;
    color: #64748b;
    margin-right: 4px;
}

.candidate-details-grid[b-nva36r8d3x] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px 16px;
    margin-top: 8px;
}

.candidate-detail-item[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.candidate-detail-item .detail-label[b-nva36r8d3x] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.candidate-detail-item .detail-value[b-nva36r8d3x] {
    font-size: 13px;
    color: var(--text-primary, #0f172a);
    font-family: var(--font-mono, monospace);
}

/* Bulk quote: per-seat pricing table */
.seat-prices-table-wrap[b-nva36r8d3x] {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.seat-prices-table[b-nva36r8d3x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.seat-prices-table th[b-nva36r8d3x],
.seat-prices-table td[b-nva36r8d3x] {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.seat-prices-table th[b-nva36r8d3x] {
    background: #f1f5f9;
    font-weight: 600;
    color: #475569;
    position: sticky;
    top: 0;
}

.seat-prices-table tbody tr:hover[b-nva36r8d3x] {
    background: #f8fafc;
}

.seat-prices-table td:first-child[b-nva36r8d3x] {
    width: 40px;
    color: #64748b;
    font-weight: 600;
}

/* Slide Panel Title (alternative class name) */
.slide-panel-title[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slide-panel-title i[b-nva36r8d3x] {
    font-size: 16px;
    color: #605E5C;
}

.slide-panel-title span[b-nva36r8d3x] {
    font-size: 15px;
    font-weight: 600;
    color: #323130;
}

.slide-panel-title .request-badge[b-nva36r8d3x] {
    background: #EDEBE9;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    color: #323130;
}

/* Bulk RFQ & View Quote specific panel widths */
.bulk-rfq-details-panel[b-nva36r8d3x],
.view-quote-panel[b-nva36r8d3x] {
    width: 640px;
}

/* Alternative Close Button Class */
.slide-panel-close[b-nva36r8d3x] {
    background: transparent;
    border: none;
    color: #605E5C;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.15s;
}

.slide-panel-close:hover[b-nva36r8d3x] {
    background: #EDEBE9;
}

/* Alternative Loading State */
.panel-loading[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 16px;
    color: #64748b;
}

.panel-loading p[b-nva36r8d3x] {
    margin: 0;
    font-size: 14px;
}

/* Status Banners */
.status-banner[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 14px;
}

.status-banner.success[b-nva36r8d3x] {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #047857;
}

.status-banner.success i[b-nva36r8d3x] {
    color: #059669;
    font-size: 18px;
}

.status-banner.warning[b-nva36r8d3x] {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
}

.status-banner.warning i[b-nva36r8d3x] {
    color: #d97706;
    font-size: 18px;
}

.status-banner.info[b-nva36r8d3x] {
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    color: #0369a1;
}

.status-banner.info i[b-nva36r8d3x] {
    color: #0284c7;
    font-size: 18px;
}

/* ============================================================================
   REQUEST DETAILS PANEL - FLIGHT LEGS
   ============================================================================ */

/* Panel Header — Wireframe pattern */
.panel-header[b-nva36r8d3x] {
    padding: 0 20px;
    background: #F3F2F1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid #EDEBE9;
    min-height: 48px;
}

.panel-header .panel-title[b-nva36r8d3x] {
    font-size: 14px;
    font-weight: 600;
    color: #323130;
}

.panel-header .panel-close[b-nva36r8d3x] {
    background: transparent;
    border: none;
    color: #605E5C;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.15s;
    line-height: 1;
}

.panel-header .panel-close:hover[b-nva36r8d3x] {
    background: #EDEBE9;
}

/* Panel Section Title — Wireframe pattern */
.panel-section-title[b-nva36r8d3x] {
    font-size: 11px;
    font-weight: 700;
    color: #605E5C;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid #EDEBE9;
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-section-title .count-badge[b-nva36r8d3x] {
    background: #0ea5e9;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: auto;
}

.panel-section-title.clickable[b-nva36r8d3x] {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.2s;
    border-radius: 4px;
    padding: 8px;
    margin: -8px -8px 12px;
}

.panel-section-title.clickable:hover[b-nva36r8d3x] {
    background-color: rgba(0, 120, 212, 0.08);
}

.panel-section-title .toggle-icon[b-nva36r8d3x] {
    margin-left: auto;
    font-size: 11px;
    color: #605E5C;
}

/* Key-Value Grid — Wireframe pattern */
.kv-grid[b-nva36r8d3x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.kv-item[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.kv-item.full-width[b-nva36r8d3x] {
    grid-column: 1 / -1;
}

.kv-label[b-nva36r8d3x] {
    font-size: 10px;
    font-weight: 600;
    color: #A19F9D;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.kv-value[b-nva36r8d3x] {
    font-size: 13px;
    font-weight: 500;
    color: #323130;
}

.kv-value.pre-line[b-nva36r8d3x] {
    white-space: pre-line;
}

/* Leg Section — Wireframe simplified */
.leg-section[b-nva36r8d3x] {
    background: #ffffff;
    border: 1px solid #EDEBE9;
    border-radius: 4px;
    overflow: hidden;
}

.leg-section .leg-header[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #F3F2F1;
}

.leg-section .leg-header .leg-number[b-nva36r8d3x] {
    font-size: 12px;
    font-weight: 700;
    color: #323130;
}

.leg-section .leg-header .flight-class[b-nva36r8d3x] {
    font-size: 11px;
    background: #EDEBE9;
    padding: 3px 8px;
    border-radius: 4px;
    color: #605E5C;
}

.leg-section .kv-grid[b-nva36r8d3x] {
    padding: 12px 16px;
}

/* Panel Footer — Wireframe pattern */
.panel-footer[b-nva36r8d3x] {
    padding: 12px 20px;
    background: #F3F2F1;
    border-top: 1px solid #EDEBE9;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Panel Form Group — Wireframe pattern */
.panel-form-group[b-nva36r8d3x] {
    margin-bottom: 8px;
}

.panel-form-label[b-nva36r8d3x] {
    font-size: 12px;
    font-weight: 600;
    color: #605E5C;
    display: block;
    margin-bottom: 4px;
}

.panel-form-label .required[b-nva36r8d3x] {
    color: #d13438;
}

/* Panel Input Row — side-by-side grid */
.panel-input-row[b-nva36r8d3x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Panel Input — matching wireframe */
.panel-input[b-nva36r8d3x] {
    width: 100%;
    height: 32px;
    border: 1px solid #C8C6C4;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 13px;
    font-family: inherit;
    color: #323130;
    background: #ffffff;
    outline: none;
    transition: border-color 0.15s;
}

.panel-input:focus[b-nva36r8d3x] {
    border-color: #0078D4;
    box-shadow: 0 0 0 1px #0078D4;
}

/* Quote Total — footer summary */
.quote-total[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0, 120, 212, 0.06);
    border-radius: 4px;
}

.quote-total-label[b-nva36r8d3x] {
    font-size: 12px;
    font-weight: 600;
    color: #605E5C;
    text-transform: uppercase;
}

.quote-total-value[b-nva36r8d3x] {
    font-size: 18px;
    font-weight: 700;
    color: #0078D4;
}

.legs-container[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.leg-card-panel[b-nva36r8d3x] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.leg-card-panel .leg-header[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #F3F2F1;
    color: #323130;
}

.leg-card-panel .leg-header .leg-number[b-nva36r8d3x] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.leg-card-panel .leg-header .flight-class[b-nva36r8d3x] {
    font-size: 11px;
    background: #EDEBE9;
    padding: 3px 8px;
    border-radius: 4px;
    color: #605E5C;
}

.leg-card-panel .route-display[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    gap: 16px;
}

.leg-card-panel .route-display .city[b-nva36r8d3x] {
    flex: 1;
    text-align: center;
}

.leg-card-panel .route-display .city.origin[b-nva36r8d3x] {
    text-align: left;
}

.leg-card-panel .route-display .city.destination[b-nva36r8d3x] {
    text-align: right;
}

.leg-card-panel .route-display .city .city-name[b-nva36r8d3x] {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.leg-card-panel .route-display .city .country-name[b-nva36r8d3x] {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.leg-card-panel .route-display .route-line[b-nva36r8d3x] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 150px;
}

.leg-card-panel .route-display .route-line .line[b-nva36r8d3x] {
    flex: 1;
    height: 2px;
    background: #cbd5e1;
}

.leg-card-panel .route-display .route-line i[b-nva36r8d3x] {
    color: #0ea5e9;
    font-size: 14px;
}

.leg-card-panel .leg-details[b-nva36r8d3x] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e2e8f0;
    background: white;
}

.leg-card-panel .leg-details .detail-item[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.leg-card-panel .leg-details .detail-item label[b-nva36r8d3x] {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.leg-card-panel .leg-details .detail-item span[b-nva36r8d3x] {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
}

/* Dates Row */
.dates-row[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    background: white;
    border-top: 1px solid #e2e8f0;
    gap: 16px;
}

/* ============================================================================
   WON BULK BATCHES — Post-Win Workflow
   ============================================================================ */

/* Won Bulk Batches Section */
.won-bulk-section[b-nva36r8d3x] {
    margin-top: 20px;
    border-top: 2px solid #e2e8f0;
    padding-top: 16px;
}

.won-bulk-header[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 10px;
}

.won-bulk-header h3[b-nva36r8d3x] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.won-bulk-header h3 i[b-nva36r8d3x] {
    color: #d4a017;
}

.won-bulk-count[b-nva36r8d3x] {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.batch-link[b-nva36r8d3x] {
    color: #0284c7;
    cursor: pointer;
    font-weight: 600;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 12px;
}

.batch-link:hover[b-nva36r8d3x] {
    text-decoration: underline;
}

/* Won Batch Details Panel */
.won-batch-panel[b-nva36r8d3x] {
    width: 580px;
}

.won-detail-section[b-nva36r8d3x] {
    margin-bottom: 20px;
}

.won-detail-section h4[b-nva36r8d3x] {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 8px;
}

.won-detail-section h4 i[b-nva36r8d3x] {
    color: #0284c7;
    font-size: 13px;
}

.won-detail-grid[b-nva36r8d3x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.won-detail-item[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.won-detail-label[b-nva36r8d3x] {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.won-detail-value[b-nva36r8d3x] {
    font-size: 13px;
    color: #1e293b;
    font-weight: 500;
}

/* SLA Section */
.sla-item[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 12px;
    border-left: 3px solid #e2e8f0;
}

.sla-item.sla-on-time[b-nva36r8d3x] {
    border-left-color: #22c55e;
}

.sla-item.sla-warning[b-nva36r8d3x] {
    border-left-color: #eab308;
}

.sla-item.sla-breached[b-nva36r8d3x] {
    border-left-color: #ef4444;
}

.sla-item.sla-escalated[b-nva36r8d3x] {
    border-left-color: #dc2626;
}

.sla-type[b-nva36r8d3x] {
    font-weight: 600;
    color: #1e293b;
    min-width: 100px;
}

.sla-deadline[b-nva36r8d3x] {
    color: #64748b;
}

.sla-remaining[b-nva36r8d3x] {
    color: #64748b;
    flex: 1;
}

.sla-status-badge[b-nva36r8d3x] {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.sla-badge-on-time[b-nva36r8d3x] {
    background: #dcfce7;
    color: #166534;
}

.sla-badge-warning[b-nva36r8d3x] {
    background: #fef9c3;
    color: #854d0e;
}

.sla-badge-breached[b-nva36r8d3x] {
    background: #fee2e2;
    color: #991b1b;
}

.sla-badge-escalated[b-nva36r8d3x] {
    background: #fee2e2;
    color: #7f1d1d;
}

/* Manifest & Ticket Table */
.manifest-table-wrapper[b-nva36r8d3x] {
    overflow-x: auto;
}

.manifest-table[b-nva36r8d3x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.manifest-table th[b-nva36r8d3x] {
    background: #f8fafc;
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.manifest-table td[b-nva36r8d3x] {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
}

.manifest-table tr:hover td[b-nva36r8d3x] {
    background: #f8fafc;
}

.passport-cell[b-nva36r8d3x] {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 11px;
    letter-spacing: 0.3px;
}

.empty-hint[b-nva36r8d3x] {
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
    padding: 8px 0;
    line-height: 1.5;
}

.loading-center[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: #64748b;
    font-size: 13px;
}

.dates-row .date-item[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
}

.dates-row .date-item i[b-nva36r8d3x] {
    color: #0ea5e9;
    font-size: 12px;
}

/* Services Tags */
.services-tags[b-nva36r8d3x] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border-top: 1px solid #e2e8f0;
}

.service-tag[b-nva36r8d3x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
}

.service-tag.visa[b-nva36r8d3x] {
    background: #fef3c7;
    color: #92400e;
}

.service-tag.hotel[b-nva36r8d3x] {
    background: #dbeafe;
    color: #1e40af;
}

.service-tag.transport[b-nva36r8d3x] {
    background: #d1fae5;
    color: #047857;
}

.service-tag i[b-nva36r8d3x] {
    font-size: 10px;
}

/* Empty Message */
.empty-message[b-nva36r8d3x] {
    text-align: center;
    padding: 24px;
    color: #94a3b8;
    font-size: 14px;
    font-style: italic;
}

/* Attachments List */
.attachments-list[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attachment-item[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s;
}

.attachment-item.clickable[b-nva36r8d3x] {
    cursor: pointer;
}

.attachment-item.clickable:hover[b-nva36r8d3x] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.attachment-item i.fa-file[b-nva36r8d3x] {
    font-size: 20px;
    color: #64748b;
    width: 24px;
    text-align: center;
}

.attachment-item i.fa-file.pdf[b-nva36r8d3x] {
    color: #dc2626;
}

.attachment-item i.fa-file.doc[b-nva36r8d3x] {
    color: #2563eb;
}

.attachment-item i.fa-file.image[b-nva36r8d3x] {
    color: #059669;
}

.attachment-item .file-name[b-nva36r8d3x] {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-item .file-size[b-nva36r8d3x] {
    font-size: 11px;
    color: #94a3b8;
}

.attachment-item .download-btn[b-nva36r8d3x] {
    background: #e0f2fe;
    border: none;
    color: #0284c7;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background 0.2s;
}

.attachment-item .download-btn:hover[b-nva36r8d3x] {
    background: #bae6fd;
}

.attachment-item .download-btn:disabled[b-nva36r8d3x] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading state when opening attachment (eye button) */
.attachments-loading[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    font-size: 13px;
    color: #0284c7;
}

.attachments-list.loading[b-nva36r8d3x] {
    pointer-events: none;
    opacity: 0.7;
}

/* Counter Proposal Section */
.counter-proposal-section[b-nva36r8d3x] {
    border: 2px solid #fbbf24;
    background: linear-gradient(to bottom, #fffbeb, #ffffff);
}

/* ============================================================================
   VIEW QUOTE PANEL - QUOTE DETAILS
   ============================================================================ */

.quote-legs-view[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.quote-leg-view-card[b-nva36r8d3x] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.quote-leg-view-card .leg-view-header[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #F3F2F1;
    color: #323130;
}

.quote-leg-view-card .leg-badge[b-nva36r8d3x] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #323130;
}

.quote-leg-view-card .leg-class-badge[b-nva36r8d3x] {
    font-size: 11px;
    background: #EDEBE9;
    padding: 3px 10px;
    border-radius: 4px;
    color: #605E5C;
}

.quote-leg-view-card .route-display[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 16px 20px;
    background: white;
}

.quote-leg-view-card .route-point[b-nva36r8d3x] {
    text-align: center;
}

.quote-leg-view-card .route-point .city-name[b-nva36r8d3x] {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.quote-leg-view-card .route-arrow[b-nva36r8d3x] {
    color: #0ea5e9;
    font-size: 16px;
}

.quote-leg-view-card .dates-display[b-nva36r8d3x] {
    padding: 12px 20px;
    background: #f1f5f9;
    border-top: 1px solid #e2e8f0;
}

.quote-leg-view-card .dates-display .date-item[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
}

.quote-leg-view-card .dates-display .date-item i[b-nva36r8d3x] {
    color: #0ea5e9;
    font-size: 12px;
}

.quote-costs-grid[b-nva36r8d3x] {
    padding: 16px 20px;
    background: white;
    border-top: 1px solid #e2e8f0;
}

.cost-row[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #e2e8f0;
}

.cost-row:last-child[b-nva36r8d3x] {
    border-bottom: none;
}

.cost-row.total[b-nva36r8d3x] {
    border-bottom: none;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 2px solid #0ea5e9;
}

.cost-label[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
}

.cost-label i[b-nva36r8d3x] {
    font-size: 12px;
    width: 16px;
    text-align: center;
}

.cost-value[b-nva36r8d3x] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.cost-value.total-amount[b-nva36r8d3x] {
    font-size: 16px;
    color: #0078D4;
}

.leg-comment[b-nva36r8d3x] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 20px;
    background: #fffbeb;
    border-top: 1px solid #fcd34d;
    font-size: 13px;
    color: #92400e;
}

.leg-comment i[b-nva36r8d3x] {
    color: #d97706;
    margin-top: 2px;
}

/* Quote Grand Total */
.quote-grand-total[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #DEECF9;
    border-radius: 4px;
    margin-top: 12px;
    color: #323130;
    border: 1px solid #0078D4;
}

.quote-grand-total .total-label[b-nva36r8d3x] {
    font-size: 13px;
    font-weight: 600;
}

.quote-grand-total .total-amount[b-nva36r8d3x] {
    font-size: 18px;
    font-weight: 700;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    color: #0078D4;
}

/* Comments Display */
.comments-display[b-nva36r8d3x] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
}

.comments-display p[b-nva36r8d3x] {
    margin: 0;
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
}

/* Quote Details panel: traveller notes & option blocks */
.notes-block[b-nva36r8d3x] { padding: 12px 0; }
.note-item[b-nva36r8d3x] { margin-bottom: 12px; }
.note-item:last-child[b-nva36r8d3x] { margin-bottom: 0; }
.note-label[b-nva36r8d3x] { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-secondary); display: block; margin-bottom: 4px; }
.note-value[b-nva36r8d3x] { margin: 0; font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.quotation-note-text[b-nva36r8d3x] { margin: 0; padding: 12px 0; font-size: 14px; color: #334155; line-height: 1.6; }
.quote-option-block[b-nva36r8d3x] { border: 1px solid var(--border-color); border-radius: 8px; padding: 14px; margin-bottom: 16px; background: #fafbfc; }
.quote-option-block:last-of-type[b-nva36r8d3x] { margin-bottom: 0; }
.quote-option-header[b-nva36r8d3x] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.quote-option-header .option-title[b-nva36r8d3x] { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.option-airlines[b-nva36r8d3x] { font-size: 12px; color: var(--text-secondary); }
.option-note-block[b-nva36r8d3x] { margin-bottom: 10px; }
.option-note-label[b-nva36r8d3x] { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.option-note-text[b-nva36r8d3x] { margin: 4px 0 0 0; font-size: 13px; line-height: 1.5; }
.option-total-row[b-nva36r8d3x] { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; font-size: 14px; }
.option-total-row strong[b-nva36r8d3x] { color: var(--brand-primary); }

/* ============================================================================
   SUBMIT QUOTE – validation error highlights
   ============================================================================ */
.quote-leg-has-error.wiz-card[b-nva36r8d3x] {
    border: 1px solid var(--status-req-text, #bc2f32);
    background: var(--status-req-bg, #fdf3f4);
}

.quote-field-has-error .quote-field-error-message[b-nva36r8d3x],
.gds-input-group.quote-field-has-error .quote-field-error-message[b-nva36r8d3x] {
    display: block;
    font-size: 12px;
    color: var(--status-req-text, #bc2f32);
    margin-top: 4px;
    font-weight: 500;
}

[b-nva36r8d3x] .quote-field-error.e-input,
[b-nva36r8d3x] .quote-field-error.e-numerictextbox,
[b-nva36r8d3x] input.quote-field-error,
[b-nva36r8d3x] .e-datepicker.quote-field-error {
    border-color: var(--status-req-text, #bc2f32) !important;
    background-color: #fff8f8 !important;
}

/* ============================================================================
   SLIDE PANEL RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
    .slide-panel[b-nva36r8d3x] {
        width: 100%;
        max-width: 100%;
    }

    .booking-docs-info-banner[b-nva36r8d3x] {
        flex-direction: column;
        gap: 12px;
    }

    .upload-form .form-row[b-nva36r8d3x] {
        grid-template-columns: 1fr;
    }

    .info-grid[b-nva36r8d3x] {
        grid-template-columns: 1fr;
    }

    .leg-card-panel .leg-details[b-nva36r8d3x] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Amendment Cards ── */
.amendment-card[b-nva36r8d3x] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
}

.amendment-header[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.amendment-type[b-nva36r8d3x] {
    font-weight: 600;
    font-size: 13px;
    color: #92400e;
}

.amendment-date[b-nva36r8d3x] {
    font-size: 11px;
    color: #78716c;
}

.amendment-candidate[b-nva36r8d3x] {
    font-size: 12px;
    color: #57534e;
    margin: 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.amendment-description[b-nva36r8d3x] {
    font-size: 12px;
    color: #44403c;
    margin: 4px 0 8px;
    line-height: 1.4;
}

.amendment-change[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin: 8px 0;
    padding: 6px 10px;
    background: #f5f5f4;
    border-radius: 6px;
}

.amendment-change .change-from[b-nva36r8d3x] {
    color: #dc2626;
    text-decoration: line-through;
}

.amendment-change .change-to[b-nva36r8d3x] {
    color: #16a34a;
    font-weight: 600;
}

.amendment-actions[b-nva36r8d3x] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* ── Amendment Dialog Styles ── */
.amendment-response-toggle[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}

.radio-label[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #374151;
}

.radio-label input[type="radio"][b-nva36r8d3x] {
    accent-color: #2563eb;
}

.form-group[b-nva36r8d3x] {
    margin-bottom: 12px;
}

.form-group label[b-nva36r8d3x] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.form-input[b-nva36r8d3x] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.form-input:focus[b-nva36r8d3x] {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.form-textarea[b-nva36r8d3x] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.form-textarea:focus[b-nva36r8d3x] {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* ============================================================================
   EDIT QUOTE MODAL
   ============================================================================ */

.edit-quote-panel[b-nva36r8d3x] {
    width: 640px;
    max-width: 95vw;
}

.edit-quote-error-banner[b-nva36r8d3x] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 4px;
    background: #fdf3f4;
    border: 1px solid #d13438;
    color: #d13438;
    font-size: 13px;
    margin-bottom: 12px;
}

.edit-quote-info-note[b-nva36r8d3x] {
    padding: 8px 12px;
    border-radius: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 12px;
    margin-bottom: 12px;
}

.edit-quote-leg-subtotal[b-nva36r8d3x] {
    text-align: right;
    margin-top: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--brand-primary, #0078d4);
}

.edit-quote-option-total[b-nva36r8d3x] {
    text-align: right;
    padding: 8px 16px 12px;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary, #323130);
    border-top: 1px solid #EDEBE9;
}

.edit-quote-summary[b-nva36r8d3x] {
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    padding: 12px;
    margin-bottom: 12px;
}

/* ============================================================================
   VIEW QUOTE PANEL — ADDITIONAL STYLES
   ============================================================================ */

.quote-option-card[b-nva36r8d3x] {
    border: 1px solid #EDEBE9;
    border-radius: 6px;
    padding: 0;
    margin-bottom: 12px;
}

.option-header[b-nva36r8d3x] {
    padding: 10px 16px;
    margin: 0;
    border-bottom: 1px solid #EDEBE9;
}

.option-note[b-nva36r8d3x] {
    padding: 8px 16px;
    font-size: 13px;
    color: #605E5C;
    background: #F3F2F1;
}

.option-note-label[b-nva36r8d3x] {
    font-weight: 600;
}

.option-legs[b-nva36r8d3x] {
    padding: 12px 16px;
}

.leg-comment[b-nva36r8d3x] {
    padding: 6px 16px 10px;
    font-size: 12px;
    color: #605E5C;
}

.fw-bold[b-nva36r8d3x] {
    font-weight: 700;
}

.option-total-row[b-nva36r8d3x] {
    padding: 8px 16px;
    background: #F3F2F1;
    border-top: 1px solid #EDEBE9;
}

.total-flex[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
}

.grand-total-row[b-nva36r8d3x] {
    background: #F3F2F1;
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 8px;
}

.grand-total-label[b-nva36r8d3x],
.grand-total-value[b-nva36r8d3x] {
    font-weight: 700;
    font-size: 14px;
}

.kv-value.muted[b-nva36r8d3x] {
    color: #A19F9D;
    font-size: 12px;
}

.kv-label.muted[b-nva36r8d3x] {
    color: #C8C6C4;
}

.service-flags[b-nva36r8d3x] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.leg-section > .service-flags[b-nva36r8d3x] {
    padding: 4px 16px;
}

.service-flag[b-nva36r8d3x] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.service-flag.visa[b-nva36r8d3x] {
    color: #0078d4;
    background: #eff6ff;
}

.service-flag.hotel[b-nva36r8d3x] {
    color: #7c3aed;
    background: #f5f3ff;
}

.service-flag.transport[b-nva36r8d3x] {
    color: #0d9488;
    background: #f0fdfa;
}

.attachment-meta[b-nva36r8d3x] {
    display: block;
    font-size: 11px;
    color: #A19F9D;
    margin-top: 2px;
}

/* ============================================================================
   DIALOG STYLES — Withdraw, Acknowledge, Confirm Dialogs
   ============================================================================ */

/* Context info block inside dialogs */
.dialog-context-info[b-nva36r8d3x] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.dialog-context-info.acknowledge-context[b-nva36r8d3x] {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

/* Warning message inside withdraw dialogs */
.dialog-warning-message[b-nva36r8d3x] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #991b1b;
    line-height: 1.5;
}

.dialog-warning-message > span:first-child[b-nva36r8d3x] {
    flex-shrink: 0;
    font-size: 16px;
}

/* Required field marker */
.field-required[b-nva36r8d3x] {
    color: #dc2626;
    font-weight: 700;
}

/* Danger action button (withdraw, delete) */
[b-nva36r8d3x] .danger-action-btn {
    --accent-fill-rest: #dc2626;
    --accent-fill-hover: #b91c1c;
    --accent-fill-active: #991b1b;
}

/* Withdraw dialog specific */
.withdraw-dialog[b-nva36r8d3x]  fluent-dialog {
    max-width: 520px;
}

/* Acknowledge dialog specific */
.acknowledge-dialog[b-nva36r8d3x]  fluent-dialog {
    max-width: 520px;
}

/* Email notification banner (Booking Docs panel) */
.email-notification-banner[b-nva36r8d3x] {
    background: #e8f4fd;
    border: 1px solid #0078d4;
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 16px;
    font-size: 13px;
    color: #323130;
    line-height: 1.5;
}

.email-notification-title[b-nva36r8d3x] {
    color: #0078d4;
}

.email-notification-list[b-nva36r8d3x] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

/* ============================================================================
   AUDIT-FIX — Grid & Panel Utility Classes (Panels 8-10, 12-13)
   ============================================================================ */

.grid-action-cell[b-nva36r8d3x] {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.quotes-count[b-nva36r8d3x] {
    color: var(--BEC-colorNeutralForeground3, #64748b);
    font-weight: 600;
}

.mono-text[b-nva36r8d3x] {
    font-family: inherit;
}

.panel-error-container[b-nva36r8d3x] {
    padding: var(--BEC-spacingHorizontalL);
}

.kv-item-full[b-nva36r8d3x] {
    grid-column: 1 / -1;
}

.bulk-quote-total-container[b-nva36r8d3x] {
    background: var(--BEC-success-bg, #ecfdf5);
    border: 1px solid var(--BEC-success-border, #10b981);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.bulk-quote-total-inner[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bulk-quote-total[b-nva36r8d3x] {
    font-size: 24px;
    font-weight: 800;
    color: var(--BEC-colorStatusSuccess, #059669);
    font-family: var(--font-mono);
}

.bulk-quote-total-label[b-nva36r8d3x] {
    font-size: 13px;
    color: var(--BEC-colorStatusSuccess, #065f46);
}

.candidates-scroll-list[b-nva36r8d3x] {
    max-height: 400px;
    overflow-y: auto;
}

/* ============================================================================
   ATTACHMENT CARDS — Microsoft Outlook/Teams Inspired Design
   ============================================================================ */

.attachment-card-list[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attachment-card-list.loading[b-nva36r8d3x] {
    pointer-events: none;
    opacity: 0.7;
}

.attachment-card[b-nva36r8d3x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralStroke1, #e2e8f0);
    border-radius: 6px;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.attachment-card:hover[b-nva36r8d3x] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    border-color: var(--BEC-colorNeutralStroke1Hover, #cbd5e1);
    box-shadow: var(--BEC-shadow2, 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14));
}

.attachment-card.clickable[b-nva36r8d3x] {
    cursor: pointer;
}

/* File type icon — CSS-only, no FontAwesome */
.attachment-card-icon[b-nva36r8d3x] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-main);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1;
}

.attachment-card-icon.file-pdf[b-nva36r8d3x] {
    background: var(--BEC-colorPaletteRedBackground1, #fef2f2);
    color: var(--BEC-colorPaletteRedForeground1, #dc2626);
    border: 1px solid var(--BEC-colorPaletteRedBorder1, #fecaca);
}

.attachment-card-icon.file-pdf[b-nva36r8d3x]::after {
    content: "PDF";
}

.attachment-card-icon.file-doc[b-nva36r8d3x] {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.attachment-card-icon.file-doc[b-nva36r8d3x]::after {
    content: "DOC";
}

.attachment-card-icon.file-xls[b-nva36r8d3x] {
    background: var(--BEC-colorPaletteGreenBackground1, #f0fdf4);
    color: var(--BEC-colorPaletteGreenForeground1, #16a34a);
    border: 1px solid #bbf7d0;
}

.attachment-card-icon.file-xls[b-nva36r8d3x]::after {
    content: "XLS";
}

.attachment-card-icon.file-img[b-nva36r8d3x] {
    background: #faf5ff;
    color: #7c3aed;
    border: 1px solid #e9d5ff;
}

.attachment-card-icon.file-img[b-nva36r8d3x]::after {
    content: "IMG";
}

.attachment-card-icon.file-zip[b-nva36r8d3x] {
    background: #fefce8;
    color: #ca8a04;
    border: 1px solid #fde68a;
}

.attachment-card-icon.file-zip[b-nva36r8d3x]::after {
    content: "ZIP";
}

.attachment-card-icon.file-generic[b-nva36r8d3x] {
    background: var(--BEC-colorNeutralBackground4, #f0f0f0);
    color: var(--BEC-colorNeutralForeground3, #605E5C);
    border: 1px solid var(--BEC-colorNeutralStroke1, #e2e8f0);
}

.attachment-card-icon.file-generic[b-nva36r8d3x]::after {
    content: "FILE";
}

/* Info section */
.attachment-card-info[b-nva36r8d3x] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.attachment-card-name[b-nva36r8d3x] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-card-meta[b-nva36r8d3x] {
    font-size: 11px;
    color: var(--text-secondary, #94a3b8);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Download button */
.attachment-card-download[b-nva36r8d3x] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #e2e8f0);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorBrandForeground1, #0078D4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.attachment-card-download:hover[b-nva36r8d3x] {
    background: #DEECF9;
    border-color: #0078D4;
}

.attachment-card-download:disabled[b-nva36r8d3x] {
    opacity: 0.5;
    cursor: not-allowed;
}

.bulk-pricing-toggle[b-nva36r8d3x] {
    gap: 24px;
    margin-top: 12px;
    align-items: flex-start;
}

.bulk-form-gap-lg[b-nva36r8d3x] {
    gap: 16px;
    margin-top: 12px;
}

.bulk-form-gap-md[b-nva36r8d3x] {
    gap: 12px;
    margin-top: 12px;
}

.bulk-form-gap-sm[b-nva36r8d3x] {
    gap: 12px;
    margin-top: 8px;
}

.bulk-form-mt[b-nva36r8d3x] {
    margin-top: 12px;
}

.bulk-flex-header[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.bulk-footer-total-label[b-nva36r8d3x] {
    font-size: 12px;
    color: var(--text-secondary);
    display: block;
}

.bulk-footer-total-value[b-nva36r8d3x] {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
}

.bulk-footer-total-wrap[b-nva36r8d3x] {
    text-align: right;
    flex: 1;
    margin-right: 20px;
}

/* ============================================================================
   QUOTE GROUPS — Unified pricing + flight per group
   ============================================================================ */

.quote-groups-header[b-nva36r8d3x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.quote-groups-subtitle[b-nva36r8d3x] {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
}

.quote-group-card[b-nva36r8d3x] {
    background: var(--BEC-colorNeutralBackground2, #f8fafc);
    border: 1px solid var(--BEC-colorNeutralStroke1, #e2e8f0);
    border-radius: 8px;
    padding: 16px;
    margin-top: 12px;
    position: relative;
    transition: border-color 0.15s;
}

.quote-group-card:hover[b-nva36r8d3x] {
    border-color: var(--BEC-colorBrandStroke1, #0078D4);
}

.quote-group-card-header[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.quote-group-number[b-nva36r8d3x] {
    font-size: 13px;
    font-weight: 700;
    color: var(--BEC-colorBrandForeground1, #0078D4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quote-group-remove[b-nva36r8d3x] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--BEC-colorNeutralStroke1, #e2e8f0);
    background: var(--BEC-colorNeutralBackground1, #fff);
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    transition: all 0.15s;
}

.quote-group-remove:hover[b-nva36r8d3x] {
    background: var(--BEC-colorPaletteRedBackground1, #fef2f2);
    border-color: var(--BEC-colorPaletteRedBorder1, #fecaca);
    color: var(--BEC-colorPaletteRedForeground1, #dc2626);
}

.quote-group-subtotal[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--BEC-colorNeutralStroke1, #e2e8f0);
    font-size: 13px;
    color: var(--text-secondary, #64748b);
}

.quote-group-subtotal-value[b-nva36r8d3x] {
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    font-family: var(--font-mono, monospace);
}

/* Allocation bar */
.quote-allocation-bar[b-nva36r8d3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: 6px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}

.quote-allocation-bar.valid[b-nva36r8d3x] {
    background: var(--BEC-success-bg, #ecfdf5);
    border: 1px solid var(--BEC-success-border, #10b981);
    color: var(--BEC-colorStatusSuccess, #059669);
}

.quote-allocation-bar.invalid[b-nva36r8d3x] {
    background: var(--BEC-colorPaletteYellowBackground2, #fefce8);
    border: 1px solid var(--BEC-colorPaletteYellowBorder1, #fde68a);
    color: var(--BEC-colorPaletteYellowForeground1, #ca8a04);
}

.quote-allocation-delta[b-nva36r8d3x] {
    font-weight: 600;
}

.quote-allocation-check[b-nva36r8d3x] {
    font-weight: 700;
    font-size: 16px;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Chat/ChatInput.razor.rz.scp.css */
/* =============================================================================
   ChatInput.razor.css — Redesigned Input Area (BEC Design System)
   ==============================================================================
   Centered column (same max-width as message list) with a rounded input box.
   Layout: textarea on top (full width), horizontal toolbar row below.
   Toolbar: future action buttons on the left, send button on the far right.
   Textarea expands up to 10 rows with invisible scrollbar.
   ============================================================================== */

/* ===== Input Container (centered to match message list column) ===== */
.input-area[b-66q58phheb] {
    position: relative;
    padding: 8px 16px 8px 16px;
    background: transparent;
    border-top: none;
    flex-shrink: 0;
    width: 100%;
}

/* ===== Input Box — Vertical layout: textarea on top, toolbar row below ===== */
.input-box[b-66q58phheb] {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px 0 4px 0;
    box-shadow: none;
    transition: none;
}

/* Focus: no blue border — instead a lifted shadow gives a subtle "pop up" feel */
.input-box:focus-within[b-66q58phheb] {
    border-color: transparent;
    box-shadow: none;
}

/* ===== Textarea (full width, expands up to 10 rows, invisible scrollbar) ===== */
.input-textarea[b-66q58phheb] {
    width: 100%;
    min-height: 24px;
    max-height: 220px; /* Safety cap — JS autoResizeTextarea handles dynamic sizing up to MaxTextareaRows */
    padding: 4px 0;
    border: none;
    border-radius: 0;
    font-family: var(--BEC-fontFamilyBase);
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    resize: none;
    overflow-y: auto;
    line-height: 20px;
    background: transparent;
}

/* Invisible scrollbar — content still scrolls, no visible track */
.input-textarea[b-66q58phheb]::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.input-textarea[b-66q58phheb] {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.input-textarea:focus[b-66q58phheb] {
    outline: none;
    border: none;
}

.input-textarea[b-66q58phheb]::placeholder {
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

.input-textarea:disabled[b-66q58phheb] {
    background: transparent;
    cursor: not-allowed;
    opacity: 0.5;
}

/* ===== Attachment Strip — Square cards above textarea, horizontal scroll ===== */
.attachment-strip[b-66q58phheb] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0 0 8px 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.attachment-strip[b-66q58phheb]::-webkit-scrollbar {
    display: none;
}

/* ===== Square Attachment Card ===== */
.att-card[b-66q58phheb] {
    display: flex;
    flex-direction: column;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    border: 1.5px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    background: #fff;
    overflow: hidden;
    cursor: default;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    flex-shrink: 0;
}

.att-card:hover[b-66q58phheb] {
    border-color: var(--BEC-colorBrandForeground1, #0078d4);
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.1);
}

/* Smaller card when >5 files attached */
.att-card.att-card-sm[b-66q58phheb] {
    width: 90px;
    height: 90px;
}

.att-card.att-card-sm .att-card-name[b-66q58phheb] {
    font-size: 10px;
}

.att-card.att-card-sm .att-card-size[b-66q58phheb] {
    font-size: 9px;
}

.att-card.att-card-sm .att-card-status[b-66q58phheb] {
    font-size: 9px;
    padding: 4px 6px;
}

/* Card body: file name + size centered */
.att-card-body[b-66q58phheb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 10px 0 10px;
    text-align: center;
}

.att-card-name[b-66q58phheb] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
    line-height: 1.3;
}

.att-card-size[b-66q58phheb] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    margin-top: 2px;
    display: block;
}

/* Image thumbnail inside card */
.att-card-thumb[b-66q58phheb] {
    padding: 4px;
}

.att-card-thumb-img[b-66q58phheb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* Progress bar inside card body */
.att-card-progress[b-66q58phheb] {
    width: 60%;
    height: 3px;
    background: var(--BEC-colorNeutralBackground5, #e8e8e8);
    border-radius: 2px;
    margin: 6px auto 0 auto;
    overflow: hidden;
}

.att-card-progress-fill[b-66q58phheb] {
    height: 100%;
    width: 0%;
    background: var(--BEC-colorBrandBackground, #0078d4);
    border-radius: 2px;
    transition: width 0.2s ease;
}

/* Bottom status strip */
.att-card-status[b-66q58phheb] {
    padding: 5px 8px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Status variants */
.att-card.status-uploaded[b-66q58phheb] {
    border-color: var(--BEC-colorSuccessBorder1, #107c10);
}

.att-card.status-uploaded .att-card-status[b-66q58phheb] {
    color: var(--BEC-colorSuccessBorder1, #107c10);
}

.att-card.status-uploading[b-66q58phheb] {
    border-color: var(--BEC-colorBrandForeground1, #0078d4);
}

.att-card.status-uploading .att-card-status[b-66q58phheb] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.att-card.status-failed[b-66q58phheb] {
    border-color: var(--BEC-colorErrorBorder1, #a4262c);
    background: rgba(255, 59, 48, 0.04); /* red whisper across the whole card so the failed state reads at a glance, not just on a thin border */
}

.att-card.status-failed .att-card-status[b-66q58phheb] {
    color: var(--BEC-colorErrorBorder1, #a4262c);
}

/* UPLOAD-A1+A5 (2026-05-28, Brain): always-visible error band.
   Previously the only feedback on a failed upload was:
     1. A red border (easy to miss when 5 chips are stacked),
     2. The word "Failed" in red (no reason WHY),
     3. ErrorMessage in `title="..."` — hover only, invisible on first look,
     4. A FluentUI toast that silently swallows itself when the circuit is gone.
   Result: user sees red, panics, removes the file, tries again, same result,
   gives up. Now the actual reason ("File too large", "Session expired",
   "Already in your library — open from workspace instead", etc.) renders
   inline. Apple-class: hairline above, soft red bg, tabular text, accessible. */
.att-card-error-band[b-66q58phheb] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 10px;
    border-top: 1px solid rgba(164, 38, 44, 0.18);
    background: rgba(255, 59, 48, 0.06);
    color: #8b1c20;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    border-radius: 0 0 8px 8px;
    word-break: break-word;
}

.att-card-error-band i[b-66q58phheb] {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 11px;
    color: var(--BEC-colorErrorBorder1, #a4262c);
}

.att-card-error-band .att-card-error-text[b-66q58phheb] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Smaller variant when chips collapse to compact mode */
.att-card.att-card-sm .att-card-error-band[b-66q58phheb] {
    font-size: 10px;
    padding: 5px 8px;
}

@media (prefers-reduced-motion: reduce) {
    .att-card.status-failed[b-66q58phheb] {
        background: rgba(255, 59, 48, 0.08); /* slightly stronger tint so reduced-motion users still get the at-a-glance failure signal without animation */
    }
}

/* Remove button — top-right corner, appears on hover */
.att-card-remove[b-66q58phheb] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.12s ease;
    z-index: 2;
}

.att-card:hover .att-card-remove[b-66q58phheb] {
    opacity: 1;
}

.att-card-remove:hover[b-66q58phheb] {
    background: var(--BEC-colorErrorBorder1, #a4262c);
}

/* ===== Toolbar Row — Single horizontal line: spacer left, buttons right ===== */
.input-toolbar[b-66q58phheb] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    margin-top: 8px;
    min-height: 32px;
}

/* Left side of toolbar — counter, disclaimer, file-limit warning */
.toolbar-left[b-66q58phheb] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Right side: attach + send on the SAME horizontal row, side by side */
.toolbar-actions[b-66q58phheb] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ===== Action Button — Shared circle style for attach & send ===== */
.action-btn[b-66q58phheb] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.1s ease, color 0.15s ease;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.action-btn:disabled[b-66q58phheb] {
    opacity: 0.35;
    cursor: not-allowed;
}

.action-btn i[b-66q58phheb] {
    font-size: 12px;
}

/* ===== Attach Button — No background, gray icon, blue on hover ===== */
.attach-btn[b-66q58phheb] {
    background: transparent;
    color: var(--BEC-colorNeutralForeground3, #8a8886);
}

.attach-btn:hover:not(:disabled)[b-66q58phheb] {
    background: transparent;
    color: var(--BEC-colorBrandBackground, #0078d4);
    transform: none;
}

/* ===== Views Panel Button — bordered pill (matches concept v2) ===== */
.views-panel-btn[b-66q58phheb] {
    width: auto;
    height: auto;
    padding: 5px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    color: #555;
    font-size: 11px;
    font-weight: 500;
}

.views-panel-btn:hover[b-66q58phheb] {
    border-color: #1a1a1a;
    color: #1a1a1a;
    background: #fff;
}

.views-panel-btn.views-panel-active[b-66q58phheb] {
    border-color: #0071e3;
    color: #0071e3;
    background: #fff;
}

.views-btn-label[b-66q58phheb] {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
}

.ws-panel-badge[b-66q58phheb] {\n    position: absolute;\n    top: -5px;\n    right: -5px;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 4px;\n    border-radius: 8px;\n    background: #c4314b;\n    color: #fff;\n    font-size: 0.6rem;\n    font-weight: 700;\n    line-height: 16px;\n    text-align: center;\n    pointer-events: none;\n}\n\n/* ===== Toolbar Separator — visual divider between button groups ===== */
.toolbar-sep[b-66q58phheb] {
    display: block;
    width: 1px;
    height: 20px;
    background: #e0e0e0;
    margin: 0 4px;
    flex-shrink: 0;
}

/* ===== Send Button — Brand-colored circle ===== */
.send-btn[b-66q58phheb] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: var(--BEC-colorNeutralForegroundOnBrand, #fff);
    animation: bec-btn-morph-in-b-66q58phheb 0.2s ease-out;
}

.send-btn:hover:not(:disabled)[b-66q58phheb] {
    background: var(--BEC-colorBrandBackgroundHover, #005a9e);
    transform: scale(1.08);
}

/* "Sending…" — briefly shown after click, before State.IsProcessing flips. */
.send-btn-sending[b-66q58phheb] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    opacity: 0.85;
    cursor: progress;
}
.send-btn-sending:hover[b-66q58phheb] {
    transform: none;
}

/* ===== Stop Button — Same size as send, red background with stop icon ===== */
.stop-btn[b-66q58phheb] {
    background: var(--BEC-colorErrorForeground1, #d13438);
    color: var(--BEC-colorNeutralForegroundOnBrand, #fff);
    animation: bec-btn-morph-in-b-66q58phheb 0.2s ease-out;
    transition: opacity 0.18s ease;
}

.stop-btn:hover:not(:disabled)[b-66q58phheb] {
    background: var(--BEC-colorErrorForeground2, #a4262c);
    transform: scale(1.08);
}

/* Knife-in-butter §6 — Stop is rendered but visually softened during the
   500ms double-click protection window right after Send→Stop morph. The
   .stop-arming class is toggled by ChatInput.razor.cs while !_stopButtonArmed.
   Greying it AND disabling click prevents the user from accidentally
   stopping the reply they just sent with a too-fast second click. */
.stop-btn.stop-arming[b-66q58phheb] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Knife-in-butter §5 — fade-in keyframe for the Send/Stop morph.
   When `@if (IsProcessing)` flips and the buttons swap DOM nodes, the
   incoming one animates in over 200ms instead of snapping. Subtle but
   the difference between "cheap" and "alive" software. */
@keyframes bec-btn-morph-in-b-66q58phheb {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===== Counter + Disclaimer (inside toolbar-left) ===== */
.input-counter[b-66q58phheb] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #999);
    white-space: nowrap;
}

.input-disclaimer[b-66q58phheb] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #999);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================= MIGRATED INLINE STYLES ================= */

.chat-file-hidden[b-66q58phheb] {
    display: none;
}

/* ===== Drop-Zone Overlay ===== */
.drop-overlay[b-66q58phheb] {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 50;
    background: rgba(0, 120, 212, 0.08);
    border: 2px dashed var(--BEC-colorBrandBackground, #0078d4);
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.input-area.drop-active .drop-overlay[b-66q58phheb] {
    display: flex;
}

.drop-overlay-content[b-66q58phheb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--BEC-colorBrandBackground, #0078d4);
    font-size: 14px;
    font-weight: 600;
}

.drop-overlay-content i[b-66q58phheb] {
    font-size: 28px;
}

/* ===== File Counter Badge ===== */
.chip-counter[b-66q58phheb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    background: var(--BEC-colorNeutralBackground4, #e1dfdd);
    border-radius: 10px;
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== Toolbar Limit Warning ===== */
.toolbar-limit-warning[b-66q58phheb] {
    font-size: 11px;
    color: var(--BEC-colorWarningForeground1, #d83b01);
    font-weight: 500;
    white-space: nowrap;
}

/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Chat/ChatPanel.razor.rz.scp.css */
/* =============================================================================
   ChatPanel.razor.css — Message List + Input Layout
   ==============================================================================
   Content is constrained to a centered column (max 760px) with equal whitespace
   on both sides, matching modern AI chat UIs (ChatGPT, Claude, Cursor).
   ============================================================================== */

.chat-panel[b-ddt9ui50al] {
    --agent-content-width: 820px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ===== Scrollable Message Area =====
   Centered column: max-width constrains messages, margin auto centers them.
   Bottom padding bumped to 36px (was 20) so the agent's final word has
   visible breathing room above the composer — no longer feels cramped. */
.message-list[b-ddt9ui50al] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    width: 100%;
    scroll-behavior: auto;
    display: flex;
    flex-direction: column;
}

/* Centered message column INSIDE the full-width scroller. The scroller owns the
   scrollbar (pinned to the far panel edge); this inner column keeps the messages
   centered at max-width, so there's comfortable whitespace between the text and
   the scrollbar — the ChatGPT/Claude layout, instead of the bar hugging the text. */
.message-list-inner[b-ddt9ui50al] {
    flex: 1 0 auto;          /* fill height when content is short (welcome centering); grow when long */
    width: 100%;
    max-width: var(--agent-content-width, 820px);
    margin: 0 auto;
    padding: 20px 24px 36px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Light visible scrollbar for chat messages */
.message-list[b-ddt9ui50al]::-webkit-scrollbar {
    width: 5px;
}

.message-list[b-ddt9ui50al]::-webkit-scrollbar-track {
    background: transparent;
}

.message-list[b-ddt9ui50al]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralForeground3, #c0c0c0);
    border-radius: 3px;
}

.message-list[b-ddt9ui50al] {
    scrollbar-width: thin;                    /* Firefox */
    scrollbar-color: #c0c0c0 transparent;     /* Firefox */
}

/* ===== Welcome Screen (Apple-inspired typewriter) =====
   Centered vertically in the available space, with tight padding and an
   overflow guard so the message-list never grows a scrollbar on the welcome
   surface. The marquee inside still has its own overflow:hidden, so the only
   way to spill out of the message-list would be the container itself —
   capping it here removes the stray scroll handle the user was seeing. */
.welcome-container[b-ddt9ui50al] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 40px;
    overflow: hidden;
    animation: welcomeFadeIn-b-ddt9ui50al 0.4s ease-out;
}

.welcome-greeting[b-ddt9ui50al] {
    font-size: 40px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #1d1d1f);
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin: 0;
    text-align: center;
    min-height: 44px;
}

.welcome-tagline[b-ddt9ui50al] {
    font-size: 17px;
    font-weight: 400;
    /* A11y (Moment-01 F3): explicit accessible grey — Foreground3 (#86868b ≈ 3.5:1)
       fails WCAG AA for 17px body text. #5d5d62 ≈ 5.3:1 on #fff. */
    color: #5d5d62;
    letter-spacing: -0.2px;
    text-align: center;
    margin: 8px 0 14px 0;
    min-height: 24px;
}

/* ===== Capability Auto-Scroll ===== */
.cap-scroll-wrap[b-ddt9ui50al] {
    position: relative;
    height: 180px;
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1.2s ease, transform 1.2s ease;
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

.cap-scroll-wrap.visible[b-ddt9ui50al] {
    opacity: 1;
    transform: translateY(0);
}

.cap-scroll-track[b-ddt9ui50al] {
    display: flex;
    flex-direction: column;
    gap: 0;
    animation: scrollUp-b-ddt9ui50al 28s linear infinite;
    will-change: transform;
}

.cap-line[b-ddt9ui50al] {
    display: block;
    font-size: 16px;
    font-weight: 400;
    /* A11y (Moment-01 F3): #aeaeb2 ≈ 2.4:1 fails WCAG AA badly. #6e6e73 ≈ 4.6:1 on #fff. */
    color: #6e6e73;
    letter-spacing: -0.2px;
    text-align: center;
    padding: 9px 0;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
}

/* Top gradient fade */
.cap-scroll-wrap[b-ddt9ui50al]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(to top, transparent 0%, var(--BEC-colorNeutralBackground1, #fff) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Bottom gradient fade */
.cap-scroll-wrap[b-ddt9ui50al]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90px;
    background: linear-gradient(to bottom, transparent 0%, var(--BEC-colorNeutralBackground1, #fff) 100%);
    pointer-events: none;
    z-index: 1;
}

@keyframes scrollUp-b-ddt9ui50al {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@keyframes blink-b-ddt9ui50al {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

@keyframes welcomeFadeIn-b-ddt9ui50al {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* §37: Honor user motion preference — matches the pattern used elsewhere
   in the app (MessageBubble, WorkspaceFilePreview, etc.). */
@media (prefers-reduced-motion: reduce) {
    .welcome-container[b-ddt9ui50al] {
        animation: none;
    }
    /* Moment-01 F2: freeze the infinite capability marquee + reveal it statically
       (the typewriter is also short-circuited JS-side via matchMedia). */
    .cap-scroll-track[b-ddt9ui50al] {
        animation: none;
    }
    .cap-scroll-wrap[b-ddt9ui50al] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===== Individual Steps (rendered inside expanded status surface) ===== */
.tool-steps-list[b-ddt9ui50al] {
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}

.tool-step[b-ddt9ui50al] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    position: relative;
}

/* Vertical connector line between steps */
.tool-step:not(:last-child)[b-ddt9ui50al]::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 20px;
    bottom: -4px;
    width: 1px;
    background: var(--BEC-colorNeutralBorder1, #e0e0e0);
}

.tool-step-icon[b-ddt9ui50al] {
    font-size: 12px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    z-index: 1;
    margin-top: 2px;
}

.tool-step.completed .tool-step-icon[b-ddt9ui50al] {
    color: var(--BEC-colorStatusSuccessForeground1, #107c10);
}

.tool-step.active .tool-step-icon[b-ddt9ui50al] {
    color: #f5a623;
}

.tool-step.pending .tool-step-icon[b-ddt9ui50al] {
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

/* ===== Queue strip — integrated header of the composer card =====
   Reads as the TOP SECTION of the same white input card (not a floating grey box):
   transparent so it inherits the composer surface, flush (no own border/radius), with a
   single hairline separating it from the input below. Matches the input's feel + look. */
.queue-collapse[b-ddt9ui50al] {
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #efedeb);
    border-radius: 0;
    background: transparent;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    font-size: 12px;
}

.queue-collapse summary[b-ddt9ui50al] {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 18px;            /* aligned with the composer's inner padding */
    cursor: pointer;
    transition: background 0.12s ease;
}

/* Subtle feedback on hover / when expanded — same neutral wash the rest of the card uses. */
.queue-collapse summary:hover[b-ddt9ui50al],
.queue-collapse[open] summary[b-ddt9ui50al] {
    background: var(--BEC-colorNeutralBackground2, #faf9f8);
}

.queue-collapse summary[b-ddt9ui50al]::-webkit-details-marker {
    display: none;
}

.queue-collapse-left[b-ddt9ui50al] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.queue-collapse i[b-ddt9ui50al] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 12px;
}

.queue-collapse-preview[b-ddt9ui50al] {
    color: var(--BEC-colorNeutralForeground3, #8a8886);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}

.queue-collapse-list[b-ddt9ui50al] {
    margin: 0;
    padding: 2px 18px 12px 38px;   /* aligned left edge with the summary text */
    display: grid;
    gap: 6px;
    list-style: decimal;
}

.queue-collapse-item[b-ddt9ui50al] {
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.queue-collapse-text[b-ddt9ui50al] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----- Queued item: body (text + chips) on the left, actions on the right ----- */
.queue-item-row[b-ddt9ui50al] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.queue-item-body[b-ddt9ui50al] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.queue-item-actions[b-ddt9ui50al] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;                         /* reveal on hover (desktop) */
    transition: opacity 0.12s ease;
}

.queue-collapse-item:hover .queue-item-actions[b-ddt9ui50al] {
    opacity: 1;
}

@media (hover: none) {                  /* always visible on touch devices */
    .queue-item-actions[b-ddt9ui50al] { opacity: 1; }
}

.queue-icon-btn[b-ddt9ui50al] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--BEC-colorNeutralForeground3, #8a8886);
    cursor: pointer;
    font-size: 11px;
    transition: background 0.12s ease, color 0.12s ease;
}

.queue-icon-btn:hover[b-ddt9ui50al] {
    background: var(--BEC-colorNeutralBackground4, #f0f0f0);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.queue-remove-btn:hover[b-ddt9ui50al] {
    background: rgba(209, 52, 56, 0.1);
    color: var(--BEC-colorStatusDangerForeground1, #d13438);
}

.queue-save-btn[b-ddt9ui50al],
.queue-save-btn:hover[b-ddt9ui50al] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
    background: rgba(0, 120, 212, 0.1);
}

/* ----- Attachment chips on a queued message ----- */
.queue-chips[b-ddt9ui50al] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.queue-chip[b-ddt9ui50al] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 180px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--BEC-colorNeutralBackground4, #f0f4f8);
    border: 1px solid var(--BEC-colorNeutralStroke2, #e1dfdd);
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    font-size: 11px;
}

.queue-chip i[b-ddt9ui50al] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 10px;
}

.queue-chip-name[b-ddt9ui50al] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----- Inline edit row ----- */
.queue-edit-row[b-ddt9ui50al] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.queue-edit-input[b-ddt9ui50al] {
    flex: 1;
    min-width: 0;
    padding: 5px 10px;
    border: 1px solid var(--BEC-colorBrandForeground1, #0078d4);
    border-radius: 8px;
    background: #fff;
    color: var(--BEC-colorNeutralForeground1, #242424);
    font-size: 12px;
    outline: none;
}

.tool-step.failed .tool-step-icon[b-ddt9ui50al] {
    color: var(--BEC-colorStatusDangerForeground1, #d13438);
}

.tool-step.pending .tool-step-label[b-ddt9ui50al] {
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

.tool-step.failed .tool-step-label[b-ddt9ui50al] {
    color: var(--BEC-colorStatusDangerForeground1, #d13438);
}

.tool-step-label[b-ddt9ui50al] {
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    white-space: normal;
    word-break: break-word;
}

.tool-step.active .tool-step-label[b-ddt9ui50al] {
    color: var(--BEC-colorNeutralForeground1, #242424);
    font-weight: 500;
}

/* ===== ERROR BANNER — sole chat error UI =====
   Lives above the composer, matched to the composer-shell geometry
   (max-width, border-radius, shadow) so the layout reads as one stack. */
.error-banner-strip[b-ddt9ui50al] {
    max-width: var(--agent-content-width, 820px);
    width: 100%;
    margin: 0 auto 10px;
    padding: 0 24px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.agent-error-banner[b-ddt9ui50al] {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Match composer-shell geometry exactly for visual balance */
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorNeutralForeground1, #242424);
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    border-left: 3px solid var(--BEC-colorErrorForeground1, #dc2626);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 450;
    line-height: 1.45;
    animation: errorSlideIn-b-ddt9ui50al 0.25s ease-out;
}

.agent-error-banner i.fa-triangle-exclamation[b-ddt9ui50al] {
    font-size: 16px;
    color: var(--BEC-colorErrorForeground1, #dc2626);
    flex-shrink: 0;
}

.agent-error-banner .agent-error-banner__text[b-ddt9ui50al] {
    flex: 1;
    min-width: 0;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.agent-error-banner .agent-error-banner__retry[b-ddt9ui50al] {
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    color: var(--BEC-colorNeutralForeground1, #242424);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}

.agent-error-banner .agent-error-banner__retry:hover[b-ddt9ui50al] {
    background: var(--BEC-colorNeutralBackground2, #f6f6f6);
    border-color: var(--BEC-colorNeutralStroke1, #cbcbcb);
}

.error-dismiss[b-ddt9ui50al] {
    background: none;
    border: none;
    color: var(--BEC-colorNeutralForeground3, #707070);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    opacity: 0.6;
    transition: opacity 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.error-dismiss:hover[b-ddt9ui50al] {
    opacity: 1;
    background: var(--BEC-colorNeutralBackground2, #f6f6f6);
}

@keyframes errorSlideIn-b-ddt9ui50al {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== AUTO-APPROVED INFO BANNER (reconnect notification) ===== */
.auto-approved-banner[b-ddt9ui50al] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--BEC-colorWarningBackground1, #fff8e1);
    color: var(--BEC-colorWarningForeground1, #8a6d3b);
    border: 1px solid var(--BEC-colorWarningBorder1, #ffe082);
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 450;
    line-height: 1.4;
    animation: errorSlideIn-b-ddt9ui50al 0.25s ease-out;
}

.auto-approved-banner i.fa-circle-info[b-ddt9ui50al] {
    font-size: 15px;
    color: var(--BEC-colorWarningForeground1, #f59e0b);
    flex-shrink: 0;
}

.auto-approved-dismiss[b-ddt9ui50al] {
    background: none;
    border: none;
    color: var(--BEC-colorWarningForeground1, #8a6d3b);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border-radius: 4px;
    opacity: 0.5;
    transition: opacity 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.auto-approved-dismiss:hover[b-ddt9ui50al] {
    opacity: 1;
    background: color-mix(in srgb, var(--BEC-colorWarningForeground1, #8a6d3b) 8%, transparent);
}

/* ===== Unified Composer Dock (strips + input fused into one card) ===== */
.composer-dock[b-ddt9ui50al] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px 8px;
}

.jump-latest-btn[b-ddt9ui50al] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--BEC-colorNeutralStroke2, #d1d1d1);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorNeutralForeground1, #242424);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.jump-latest-btn:hover[b-ddt9ui50al] {
    transform: translateY(-1px);
    background: var(--BEC-colorNeutralBackground2, #f6f6f6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* U-009: Accented style when pill shows unread count */
.jump-latest-btn--unread[b-ddt9ui50al] {
    background: var(--BEC-colorBrandBackground2, #e8f0fe);
    border-color: var(--BEC-colorBrandStroke1, #0f6cbd);
    color: var(--BEC-colorBrandForeground1, #0f6cbd);
}

.jump-latest-btn--unread:hover[b-ddt9ui50al] {
    background: var(--BEC-colorBrandBackground2Hover, #d6e6fc);
}

.composer-shell[b-ddt9ui50al] {
    width: 100%;
    max-width: var(--agent-content-width, 820px);
    background: var(--BEC-colorNeutralBackground1, #fff);
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

.composer-shell:focus-within[b-ddt9ui50al] {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ===== U-013: Archive Cap Banner ===== */
.bec-archive-banner[b-ddt9ui50al] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin: 0 8px 8px;
    border-radius: 8px;
    background: var(--BEC-colorNeutralBackground4, #f0f4f8);
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    font-size: 0.8em;
    color: var(--BEC-colorNeutralForeground2, #616161);
    line-height: 1.4;
}

.bec-archive-banner__icon[b-ddt9ui50al] {
    flex-shrink: 0;
    font-size: 1.1em;
}

.bec-archive-banner__text[b-ddt9ui50al] {
    flex: 1;
    min-width: 0;
}

.bec-archive-banner__text strong[b-ddt9ui50al] {
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* ===== U-014: Time-Bucket Turn Separators ===== */
.bec-turn-separator[b-ddt9ui50al] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 4px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--BEC-colorNeutralBackground1, #fff);
}

.bec-turn-separator[b-ddt9ui50al]::before,
.bec-turn-separator[b-ddt9ui50al]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--BEC-colorNeutralStroke2, #e0e0e0);
}

.bec-turn-separator__label[b-ddt9ui50al] {
    font-size: 0.72em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3, #888);
    white-space: nowrap;
}

/* ===== Responsive — Mobile ===== */
@media (max-width: 480px) {
    .welcome-greeting[b-ddt9ui50al] {
        font-size: 30px;
        letter-spacing: -0.8px;
    }

    .welcome-tagline[b-ddt9ui50al] {
        font-size: 15px;
    }

    .cap-scroll-wrap[b-ddt9ui50al] {
        width: 100%;
    }
}

/* ===== U-015: Edit-Resend Confirmation Dialog ===== */
.edit-confirm-backdrop[b-ddt9ui50al] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: edit-confirm-fadein-b-ddt9ui50al 0.15s ease-out;
}

.edit-confirm-dialog[b-ddt9ui50al] {
    background: var(--BEC-colorNeutralBackground1, #fff);
    border: 1px solid var(--BEC-colorNeutralStroke1, #e0e0e0);
    border-radius: 12px;
    padding: 24px 28px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    animation: edit-confirm-scalein-b-ddt9ui50al 0.15s ease-out;
}

.edit-confirm-title[b-ddt9ui50al] {
    margin: 0 0 12px;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #1a1a1a);
}

.edit-confirm-body[b-ddt9ui50al] {
    margin: 0 0 20px;
    font-size: 0.9em;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2, #4a4a4a);
}

.edit-confirm-actions[b-ddt9ui50al] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.edit-confirm-cancel[b-ddt9ui50al] {
    padding: 8px 16px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d0d0d0);
    border-radius: 6px;
    background: transparent;
    color: var(--BEC-colorNeutralForeground1, #333);
    font-size: 0.85em;
    cursor: pointer;
    font-weight: 500;
}

.edit-confirm-cancel:hover[b-ddt9ui50al] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.edit-confirm-submit[b-ddt9ui50al] {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: var(--BEC-colorStatusDangerBackground3, #dc3545);
    color: #fff;
    font-size: 0.85em;
    cursor: pointer;
    font-weight: 600;
}

.edit-confirm-submit:hover[b-ddt9ui50al] {
    background: var(--BEC-colorStatusDangerBackground3Hover, #c82333);
}

@keyframes edit-confirm-fadein-b-ddt9ui50al {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes edit-confirm-scalein-b-ddt9ui50al {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .edit-confirm-backdrop[b-ddt9ui50al],
    .edit-confirm-dialog[b-ddt9ui50al] { animation: none; }
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Chat/MessageBubble.razor.rz.scp.css */
/* =============================================================================
   MessageBubble.razor.css — Unified Message Layout (BEC Design System)
   ==============================================================================
   Both user and assistant messages use identical left-aligned layout:
   Avatar + Name + Time (header), Content with left padding (body).

   AGENT MARKDOWN CSS: Comprehensive Fluent Design 2 specification (V2)
   covering 35 content types rendered by Markdig.
   Source spec: .cursor/rules/50-ui-design/Agent Reply Format.html
   ============================================================================== */

/* ===== Message Container ===== */
.msg[b-8d9pxpk6hu] {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    /* P9-S (2026-05-21): slowed from 0.2s → 0.32s for a softer, more
       elegant entrance that matches the slowed shimmer timing. */
    animation: messageIn-b-8d9pxpk6hu 0.32s ease-out;
    position: relative;
}

/* ===== Knife-in-butter §1 — Thinking indicator during warmup =====
   Three navy dots breathing in sequence inside the streaming bubble before
   the first chunk arrives. Replaces the silent empty bubble that used to
   appear for 3-8s during memory loading / planner phases. Disappears
   naturally when DisplayContent becomes non-empty (Blazor removes via @if).
   ============================================================================== */
[b-8d9pxpk6hu] .bec-thinking-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 2px 4px;
    height: 18px;
}
/* Trailing variant — shown after first chunk arrives so the user keeps
   seeing visible activity even during silent inter-chunk gaps. Quieter
   than the warmup dots so it doesn't compete with the streaming text. */
[b-8d9pxpk6hu] .bec-thinking-indicator.bec-thinking-trailing {
    margin-top: 2px;
    height: 10px;
    padding: 2px 0 0;
    opacity: 0.55;
}
[b-8d9pxpk6hu] .bec-thinking-trailing .bec-thinking-dot {
    width: 4px;
    height: 4px;
    background: #6b7280;
}
[b-8d9pxpk6hu] .bec-thinking-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0a1f8f;
    opacity: 0.25;
    animation: bec-thinking-breath-b-8d9pxpk6hu 1.2s ease-in-out infinite;
}
[b-8d9pxpk6hu] .bec-thinking-dot:nth-child(1) { animation-delay: 0s; }
[b-8d9pxpk6hu] .bec-thinking-dot:nth-child(2) { animation-delay: 0.18s; }
[b-8d9pxpk6hu] .bec-thinking-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes bec-thinking-breath-b-8d9pxpk6hu {
    0%, 60%, 100% { opacity: 0.20; transform: scale(0.85); }
    30%           { opacity: 1.0;  transform: scale(1); }
}

/* Phase 3.5: Role-based alignment */
.bec-msg-user[b-8d9pxpk6hu] {
    margin-left: auto;
    align-items: flex-end;
    max-width: 85%;
}

.bec-msg-agent[b-8d9pxpk6hu] {
    margin-right: auto;
    align-items: flex-start;
    width: 100%;
}

/* Per-turn spacing handled by ChatPanel .message-list gap: 20px */
.bec-msg[b-8d9pxpk6hu] {
    /* No additional margin — parent flex gap provides spacing */
}

.msg-queued[b-8d9pxpk6hu] {
    opacity: 0.58;
}

@keyframes messageIn-b-8d9pxpk6hu {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Header Row: avatar + name + time ===== */
.msg-header[b-8d9pxpk6hu] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

/* Phase 3.5: Header alignment per role */
.bec-msg-user .msg-header[b-8d9pxpk6hu] { justify-content: flex-end; }
.bec-msg-agent .msg-header[b-8d9pxpk6hu] { justify-content: flex-start; }

.msg-avatar[b-8d9pxpk6hu] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-avatar[b-8d9pxpk6hu] {
    background: transparent;
}

.user-avatar i[b-8d9pxpk6hu] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.ai-avatar[b-8d9pxpk6hu] {
    background: transparent;
}

.ai-avatar i[b-8d9pxpk6hu] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.msg-sender-name[b-8d9pxpk6hu] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
}

.msg-sender-user[b-8d9pxpk6hu] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.msg-time[b-8d9pxpk6hu] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

/* ===== Body: content with left padding aligned under name ===== */
.msg-body[b-8d9pxpk6hu] {
    padding-left: 0;
}

/* =============================================================================
   Phase 3.5 — Bordered User Bubble / Borderless Agent Design
   ============================================================================= */

/* ===== User Bubble (bordered, right-aligned, tail corner bottom-right) ===== */
.bec-user-bubble[b-8d9pxpk6hu] {
    background: #fff;
    border: 1px solid var(--BEC-colorNeutralBorder1, #e5e7eb);
    border-radius: 12px 12px 4px 12px;
    padding: 10px 14px;
    font-size: 0.875rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    text-align: left;
    color: var(--BEC-colorNeutralForeground1, #1d1d1f);
    word-break: break-word;
}

/* ===== Agent Body — NO bubble (borderless, transparent) ===== */
.bec-agent-body[b-8d9pxpk6hu] {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    font-size: 0.875rem;
    color: var(--BEC-colorNeutralForeground1, #1d1d1f);
    width: 100%;
}

/* ===== Status Pill (tool outcome indicator) ===== */
.bec-status-pill[b-8d9pxpk6hu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2, #6e6e73);
    background: var(--BEC-colorNeutralBackground3, #f3f4f6);
    padding: 4px 10px;
    border-radius: 12px;
    margin-bottom: 8px;
}

.bec-pill-icon[b-8d9pxpk6hu] {
    color: #10b981;
    font-weight: 700;
}

.bec-msg-separator[b-8d9pxpk6hu] {
    border: none;
    border-top: 1px solid var(--BEC-colorNeutralStroke2, #f0f0f2);
    margin: 0 0 10px 0;
    width: 100%;
}

/* ===== Action Buttons — hover/focus-within revealed ===== */
.bec-msg-actions[b-8d9pxpk6hu] {
    margin-top: 6px;
    opacity: 0;
    transition: opacity 150ms ease-out;
    display: flex;
    gap: 6px;
}

.bec-msg:hover .bec-msg-actions[b-8d9pxpk6hu],
.bec-msg:focus-within .bec-msg-actions[b-8d9pxpk6hu] {
    opacity: 1;
}

.bec-msg-edit-btn[b-8d9pxpk6hu],
.bec-msg-copy-btn[b-8d9pxpk6hu],
.bec-msg-regenerate-btn[b-8d9pxpk6hu] {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 0.75rem;
    cursor: pointer;
    color: var(--BEC-colorNeutralForeground2, #6e6e73);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    transition: background 120ms ease-out, color 120ms ease-out;
}

.bec-msg-edit-btn:hover[b-8d9pxpk6hu],
.bec-msg-copy-btn:hover[b-8d9pxpk6hu],
.bec-msg-regenerate-btn:hover[b-8d9pxpk6hu] {
    background: rgba(0, 0, 0, 0.08);
    color: var(--BEC-colorNeutralForeground1, #1d1d1f);
}

/* prefers-reduced-motion — disable fade */
@media (prefers-reduced-motion: reduce) {
    .bec-msg-actions[b-8d9pxpk6hu] {
        transition: none;
    }
}

/* Remove left accent from agent body (Phase 3.5 supersedes) */
.msg-assistant .msg-body[b-8d9pxpk6hu] {
    padding-left: 0;
    border-left: none;
}


/* =============================================================================
   AGENT MARKDOWN RENDERING — Complete Fluent Design 2 Specification
   =============================================================================
   Everything below ::deep .msg-content targets Markdig-rendered HTML.
   Covers 35 content types with defensive edge cases.
   All colors use explicit fallbacks (no dependency on CSS variable resolution).
   ============================================================================= */

/* ===== #0 Container ===== */
.msg-content[b-8d9pxpk6hu] {
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
    font-size: 14px;
    line-height: 1.7;
    color: var(--BEC-colorNeutralForeground1, #242424);
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow-x: hidden;
    -webkit-hyphens: auto;
    hyphens: auto;
    letter-spacing: 0.01em;
}

/* RTL support — browser auto-detects direction based on content */
.msg-content[dir="auto"][b-8d9pxpk6hu] {
    unicode-bidi: plaintext;
    text-align: start;
}

/* Prevent first/last child extra margin */
[b-8d9pxpk6hu] .msg-content > *:first-child { margin-top: 0 !important; }
[b-8d9pxpk6hu] .msg-content > *:last-child  { margin-bottom: 0 !important; }

/* ===== #1 Paragraphs ===== */
[b-8d9pxpk6hu] .msg-content p {
    margin: 0 0 14px 0;
    line-height: 1.7;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

[b-8d9pxpk6hu] .msg-content p:last-child {
    margin-bottom: 0;
}

/* ===== #2 Headings (h1–h6) — clean markdown render (VS Code / GitHub style) =====
   Dark neutral text, h1/h2 with a subtle bottom rule. No navy, no left bars,
   no uppercase — render the agent's markdown like a plain .md preview. */
[b-8d9pxpk6hu] .msg-content h1 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    color: #1f2328;
    margin: 28px 0 14px 0;
    padding: 0 0 8px 0;
    border-bottom: 1px solid #d1d9e0;
}

[b-8d9pxpk6hu] .msg-content h2 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: #1f2328;
    margin: 24px 0 10px 0;
    padding: 0 0 6px 0;
    border-bottom: 1px solid #d8dee4;
}

[b-8d9pxpk6hu] .msg-content h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: #1f2328;
    margin: 20px 0 8px 0;
}

[b-8d9pxpk6hu] .msg-content h4 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #1f2328;
    margin: 16px 0 8px 0;
}

[b-8d9pxpk6hu] .msg-content h5 {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #1f2328;
    margin: 16px 0 8px 0;
}

[b-8d9pxpk6hu] .msg-content h6 {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #656d76;
    margin: 12px 0 8px 0;
}

/* ===== #3 Bold — BEC navy emphasis for in-body strong ===== */
[b-8d9pxpk6hu] .msg-content strong {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #1a1a1a);
}

/* Strong inside body paragraphs/lists/blockquotes — emphasis is conveyed by WEIGHT,
   not color. Bold no longer renders in BEC navy (that read like a hyperlink and made
   replies look like a highlighter explosion). It inherits the neutral body text color,
   so a corporate reply stays calm and scannable. Color is reserved for actual links. */
[b-8d9pxpk6hu] .msg-content p strong,
[b-8d9pxpk6hu] .msg-content li strong,
[b-8d9pxpk6hu] .msg-content blockquote strong {
    color: inherit;
    font-weight: 600;
}
[b-8d9pxpk6hu] .msg-content h1 strong,
[b-8d9pxpk6hu] .msg-content h2 strong,
[b-8d9pxpk6hu] .msg-content h3 strong,
[b-8d9pxpk6hu] .msg-content h4 strong,
[b-8d9pxpk6hu] .msg-content h5 strong,
[b-8d9pxpk6hu] .msg-content h6 strong {
    color: inherit;
}

/* ===== #4 Italic ===== */
[b-8d9pxpk6hu] .msg-content em {
    font-style: italic;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

[b-8d9pxpk6hu] .msg-content strong em,
[b-8d9pxpk6hu] .msg-content em strong {
    font-weight: 600;
    font-style: italic;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* ===== #5 Ordered Lists — Enhanced spacing like Gemini ===== */
[b-8d9pxpk6hu] .msg-content ol {
    margin: 10px 0 14px 0;
    padding-left: 24px;
    padding-inline-start: 24px;
    padding-inline-end: 0;
    list-style-type: decimal;
}

[b-8d9pxpk6hu] .msg-content ol li {
    margin-bottom: 6px;
    padding-left: 6px;
    line-height: 1.7;
}

[b-8d9pxpk6hu] .msg-content ol li::marker {
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-weight: 600;
    font-size: 13px;
}

/* ===== #6 Unordered Lists — Enhanced spacing like Gemini ===== */
[b-8d9pxpk6hu] .msg-content ul {
    margin: 10px 0 14px 0;
    padding-left: 22px;
    padding-inline-start: 22px;
    padding-inline-end: 0;
    list-style-type: disc;
}

[b-8d9pxpk6hu] .msg-content ul li {
    margin-bottom: 6px;
    padding-left: 6px;
    line-height: 1.7;
}

[b-8d9pxpk6hu] .msg-content ul li::marker {
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-size: 10px;
}

/* ===== #7 Nested Lists ===== */
[b-8d9pxpk6hu] .msg-content ul ul,
[b-8d9pxpk6hu] .msg-content ol ol,
[b-8d9pxpk6hu] .msg-content ul ol,
[b-8d9pxpk6hu] .msg-content ol ul {
    margin: 4px 0 4px 0;
}

/* Bullet progression: disc → circle → square */
[b-8d9pxpk6hu] .msg-content ul ul          { list-style-type: circle; }
[b-8d9pxpk6hu] .msg-content ul ul ul       { list-style-type: square; }
[b-8d9pxpk6hu] .msg-content ul ul ul ul    { list-style-type: disc; }

/* Number progression: decimal → lower-alpha → lower-roman */
[b-8d9pxpk6hu] .msg-content ol ol          { list-style-type: lower-alpha; }
[b-8d9pxpk6hu] .msg-content ol ol ol       { list-style-type: lower-roman; }
[b-8d9pxpk6hu] .msg-content ol ol ol ol    { list-style-type: decimal; }

/* Mixed nesting */
[b-8d9pxpk6hu] .msg-content ol ul  { list-style-type: disc; }
[b-8d9pxpk6hu] .msg-content ul ol  { list-style-type: decimal; }
[b-8d9pxpk6hu] .msg-content ol ul ul { list-style-type: circle; }
[b-8d9pxpk6hu] .msg-content ul ol ol { list-style-type: lower-alpha; }

/* ===== #8 Tables — BEC editorial style (parity with .bec-document table) =====
   Navy 2px top accent rule + transparent uppercase headers + navy 2px bottom
   closure under the last data row. Matches the document-preview look so a
   table in chat reads like a corporate report table, not a data-app grid. */
[b-8d9pxpk6hu] .msg-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 13px;
    line-height: 1.4;
    border: none;
    border-top: 2px solid #0a1f8f;
    border-radius: 0;
    overflow: hidden;
}

[b-8d9pxpk6hu] .msg-content thead {
    background: transparent;
}

[b-8d9pxpk6hu] .msg-content thead th {
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #555555;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    background: transparent;
    white-space: normal;
    word-break: break-word;
}

/* Markdig alignment via style="text-align: ..." */
[b-8d9pxpk6hu] .msg-content th[style*="text-align: center"],
[b-8d9pxpk6hu] .msg-content td[style*="text-align: center"] {
    text-align: center;
}

[b-8d9pxpk6hu] .msg-content th[style*="text-align: right"],
[b-8d9pxpk6hu] .msg-content td[style*="text-align: right"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

[b-8d9pxpk6hu] .msg-content tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
    color: #1a1a1a;
    vertical-align: top;
    min-width: 40px;
    font-variant-numeric: tabular-nums;
}

/* Navy 2px closure under the final data row — the BEC table "frame closer"
   that says "this is the end of the dataset" (parity with DocumentCSS). */
[b-8d9pxpk6hu] .msg-content tbody tr:last-child td {
    border-bottom: 2px solid #0a1f8f;
}

/* Zebra striping for scannability */
[b-8d9pxpk6hu] .msg-content tbody tr:nth-child(even) {
    background: rgba(244, 244, 244, 0.5);
}

/* Hover row — faint navy tint */
[b-8d9pxpk6hu] .msg-content tbody tr:hover {
    background: rgba(10, 31, 143, 0.04);
    transition: background 0.12s ease;
}

/* Table scroll wrapper — contains horizontal overflow for wide tables */
[b-8d9pxpk6hu] .msg-content .table-scroll-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 520px;
    margin: 12px 0;
    border-radius: 6px;
    max-width: 100%;
}

[b-8d9pxpk6hu] .msg-content .table-scroll-wrapper table {
    margin: 0;
}

/* Sticky table headers — stay visible when scrolling long tables */
[b-8d9pxpk6hu] .msg-content .table-scroll-wrapper thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--BEC-colorNeutralBackground3, #F5F5F5);
    box-shadow: 0 1px 0 0 var(--BEC-colorNeutralStroke1, #D1D1D1);
}

/* ===== #9 Code Blocks (multi-line) — BEC corporate code treatment =====
   Near-black background + thin BEC navy outline as a brand cue.
   Language label remains top-right (modern, github-like). */
[b-8d9pxpk6hu] .msg-content pre {
    background: #1d1d1f;
    color: #d4d4d8;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    line-height: 1.55;
    padding: 16px;
    margin: 16px 0;
    border-radius: 8px;
    overflow-x: auto;
    border: 1px solid rgba(10, 31, 143, 0.35);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(255,255,255,0.02) inset;
    position: relative;
    -moz-tab-size: 4;
    tab-size: 4;
}

[b-8d9pxpk6hu] .msg-content pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    border: none;
    font-size: inherit;
    color: inherit;
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
}

/* ===== Prism.js token palette — Material "Palenight" tuned for BEC dark code bg =====
   Wired in agent-chat.js → injectCopyButtons() which calls Prism.highlightElement
   on each <pre> <code>. Token classes (`.token.keyword`, `.token.string`, etc.)
   are added by Prism. Idempotent via the `bec-prism-done` marker class. */
[b-8d9pxpk6hu] .msg-content pre code .token.comment,
[b-8d9pxpk6hu] .msg-content pre code .token.prolog,
[b-8d9pxpk6hu] .msg-content pre code .token.cdata,
[b-8d9pxpk6hu] .msg-content pre code .token.doctype { color: #6e7280; font-style: italic; }

[b-8d9pxpk6hu] .msg-content pre code .token.keyword,
[b-8d9pxpk6hu] .msg-content pre code .token.boolean,
[b-8d9pxpk6hu] .msg-content pre code .token.constant,
[b-8d9pxpk6hu] .msg-content pre code .token.atrule,
[b-8d9pxpk6hu] .msg-content pre code .token.builtin { color: #82aaff; }

[b-8d9pxpk6hu] .msg-content pre code .token.string,
[b-8d9pxpk6hu] .msg-content pre code .token.char,
[b-8d9pxpk6hu] .msg-content pre code .token.attr-value,
[b-8d9pxpk6hu] .msg-content pre code .token.inserted { color: #c3e88d; }

[b-8d9pxpk6hu] .msg-content pre code .token.number,
[b-8d9pxpk6hu] .msg-content pre code .token.symbol,
[b-8d9pxpk6hu] .msg-content pre code .token.entity,
[b-8d9pxpk6hu] .msg-content pre code .token.url { color: #f78c6c; }

[b-8d9pxpk6hu] .msg-content pre code .token.function,
[b-8d9pxpk6hu] .msg-content pre code .token.class-name,
[b-8d9pxpk6hu] .msg-content pre code .token.namespace { color: #ffcb6b; }

[b-8d9pxpk6hu] .msg-content pre code .token.operator,
[b-8d9pxpk6hu] .msg-content pre code .token.punctuation { color: #89ddff; }

[b-8d9pxpk6hu] .msg-content pre code .token.regex,
[b-8d9pxpk6hu] .msg-content pre code .token.important,
[b-8d9pxpk6hu] .msg-content pre code .token.variable { color: #ff5370; }

[b-8d9pxpk6hu] .msg-content pre code .token.tag,
[b-8d9pxpk6hu] .msg-content pre code .token.deleted { color: #f07178; }

[b-8d9pxpk6hu] .msg-content pre code .token.attr-name,
[b-8d9pxpk6hu] .msg-content pre code .token.property { color: #ffcb6b; }

[b-8d9pxpk6hu] .msg-content pre code .token.selector { color: #c792ea; }

/* Code block scrollbar */
[b-8d9pxpk6hu] .msg-content pre::-webkit-scrollbar {
    height: 6px;
}

[b-8d9pxpk6hu] .msg-content pre::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBorderInverted, #2D2D30);
}

[b-8d9pxpk6hu] .msg-content pre::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 3px;
}

/* Language label — small caps, BEC-tinted grey so it whispers brand */
[b-8d9pxpk6hu] .msg-content pre[data-lang]::before {
    content: attr(data-lang);
    position: absolute;
    top: 8px;
    right: 12px;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', sans-serif);
    font-size: 10px;
    font-weight: 600;
    color: #8a91c9;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    pointer-events: none;
}

/* When a code block has a language label, push it left so it doesn't overlap the copy button */
[b-8d9pxpk6hu] .msg-content pre[data-lang]::before {
    right: 40px;
}

/* ===== #9b Per-Block Copy Buttons (injected by JS) ===== */
[b-8d9pxpk6hu] .msg-content .block-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
    z-index: 2;
    padding: 0;
}

[b-8d9pxpk6hu] .msg-content pre:hover .block-copy-btn,
[b-8d9pxpk6hu] .msg-content .table-scroll-wrapper:hover .block-copy-btn {
    opacity: 1;
}

[b-8d9pxpk6hu] .msg-content .block-copy-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

[b-8d9pxpk6hu] .msg-content .block-copy-btn.copied {
    color: #4ade80;
    opacity: 1;
}

/* Table copy button — light theme variant (tables have white/light background) */
[b-8d9pxpk6hu] .msg-content .block-copy-btn-table {
    background: rgba(0, 0, 0, 0.04);
    color: #999;
}

[b-8d9pxpk6hu] .msg-content .block-copy-btn-table:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #333;
}

[b-8d9pxpk6hu] .msg-content .block-copy-btn-table.copied {
    color: #16a34a;
}

/* ===== #9c Code Block Folding (collapse >400px, injected by JS) ===== */
/* Gradient fade overlay inside collapsed code block */
[b-8d9pxpk6hu] .msg-content .code-fold-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, var(--BEC-colorNeutralBackgroundInverted, #1B1B1F));
    pointer-events: none;
    border-radius: 0 0 6px 6px;
}

/* Toggle button below the code block */
[b-8d9pxpk6hu] .msg-content .code-fold-toggle {
    display: block;
    width: 100%;
    padding: 8px;
    background: var(--BEC-colorNeutralBorderInverted, #2D2D30);
    border: none;
    border-radius: 0 0 6px 6px;
    color: #A0A0A0;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', sans-serif);
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    margin-top: -6px;
    margin-bottom: 12px;
    transition: background 0.15s ease, color 0.15s ease;
}

[b-8d9pxpk6hu] .msg-content .code-fold-toggle:hover {
    background: #3D3D40;
    color: #E0E0E0;
}

/* ===== #10 Inline Code — BEC-tinted chip =====
   Makes paths/identifiers/flags scannable without shouting. */
/* Inline code — NEUTRAL, not a branded blue pill. A normal markdown renderer shows inline
   code as subtle monospace, not blue text on a blue background. This keeps the agent's reply
   clean even when it wraps a term in backticks (no garish blue on every column/file name). */
[b-8d9pxpk6hu] .msg-content code {
    background: var(--BEC-colorNeutralBackground3, #f3f4f6);
    color: var(--BEC-colorNeutralForeground1, #242424);
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'SF Mono', monospace;
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    word-break: break-word;
}

/* Reset for code inside pre */
[b-8d9pxpk6hu] .msg-content pre code {
    white-space: pre;
    word-break: normal;
}

/* ===== #11 Blockquotes — BEC navy accent rule + soft tinted background =====
   Parity with `.bec-document blockquote` in DocumentCSS. */
[b-8d9pxpk6hu] .msg-content blockquote {
    margin: 16px 0;
    padding: 12px 16px;
    background: #f8f9fc;
    border-left: 3px solid #0a1f8f;
    border-radius: 0 6px 6px 0;
    color: #4a4a4a;
    font-size: 13.5px;
    font-style: normal;
}

[b-8d9pxpk6hu] .msg-content blockquote p {
    margin-bottom: 4px;
}

[b-8d9pxpk6hu] .msg-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Nested blockquotes */
[b-8d9pxpk6hu] .msg-content blockquote blockquote {
    margin: 8px 0;
    background: var(--BEC-colorNeutralBackground4, #ebebeb);
}

[b-8d9pxpk6hu] .msg-content blockquote blockquote blockquote {
    background: var(--BEC-colorNeutralBackground5, #e0e0e0);
}

/* ===== #11b GitHub-Flavored Alert Blocks (> [!NOTE], > [!WARNING], etc.) ===== */
/* Markdig AlertBlocks: <div class="markdown-alert markdown-alert-{type}"> */
/* Design: subtle, professional — muted backgrounds, thin left accent, no loud colors */
[b-8d9pxpk6hu] .msg-content .markdown-alert {
    margin: 14px 0;
    padding: 14px 18px;
    border-left: 3px solid;
    border-radius: 4px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

[b-8d9pxpk6hu] .msg-content .markdown-alert p {
    margin-bottom: 6px;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert p:last-child {
    margin-bottom: 0;
}

/* Title row — icon + label */
[b-8d9pxpk6hu] .msg-content .markdown-alert-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Hide Markdig-generated SVG icons (stripped by sanitizer anyway, defense-in-depth) */
[b-8d9pxpk6hu] .msg-content .markdown-alert-title svg {
    display: none;
}

/* CSS-generated icons via ::before — works even after SVG sanitization */
[b-8d9pxpk6hu] .msg-content .markdown-alert-title::before {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

/* ── NOTE (BEC navy — brand-aligned info) ── */
[b-8d9pxpk6hu] .msg-content .markdown-alert-note {
    border-left-color: #0a1f8f;
    background: #eef0ff;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-note .markdown-alert-title {
    color: #0a1f8f;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-note .markdown-alert-title::before {
    content: "ℹ";
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    color: #0a1f8f;
}

/* ── TIP (muted teal) ── */
[b-8d9pxpk6hu] .msg-content .markdown-alert-tip {
    border-left-color: #0D9488;
    background: #F0FDFA;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-tip .markdown-alert-title {
    color: #0F766E;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-tip .markdown-alert-title::before {
    content: "💡";
}

/* ── IMPORTANT (muted indigo) ── */
[b-8d9pxpk6hu] .msg-content .markdown-alert-important {
    border-left-color: #6366F1;
    background: #F5F3FF;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-important .markdown-alert-title {
    color: #4F46E5;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-important .markdown-alert-title::before {
    content: "📌";
}

/* ── WARNING (muted amber) ── */
[b-8d9pxpk6hu] .msg-content .markdown-alert-warning {
    border-left-color: #D97706;
    background: #FFFBEB;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-warning .markdown-alert-title {
    color: #B45309;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-warning .markdown-alert-title::before {
    content: "⚠️";
}

/* ── CAUTION (muted rose) ── */
[b-8d9pxpk6hu] .msg-content .markdown-alert-caution {
    border-left-color: #E11D48;
    background: #FFF1F2;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-caution .markdown-alert-title {
    color: #BE123C;
}

[b-8d9pxpk6hu] .msg-content .markdown-alert-caution .markdown-alert-title::before {
    content: "⛔";
}

/* ===== #11c Collapsible Details/Summary ===== */
/* Agent is instructed to use <details><summary>Title</summary>content</details> */
/* for long optional content. Style them as Fluent disclosure cards. */
[b-8d9pxpk6hu] .msg-content details {
    margin: 12px 0;
    border: 1px solid var(--BEC-colorNeutralBorder1, #E5E7EB);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-8d9pxpk6hu] .msg-content details[open] {
    border-color: var(--BEC-colorNeutralBorder2, #D1D5DB);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[b-8d9pxpk6hu] .msg-content details summary {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2, #374151);
    background: var(--BEC-colorNeutralBackground3, #F9FAFB);
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease;
}

[b-8d9pxpk6hu] .msg-content details summary:hover {
    background: var(--BEC-colorNeutralBackground4, #F3F4F6);
}

[b-8d9pxpk6hu] .msg-content details summary::before {
    content: "▶";
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3, #9CA3AF);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

[b-8d9pxpk6hu] .msg-content details[open] > summary::before {
    transform: rotate(90deg);
}

/* Remove browser default marker */
[b-8d9pxpk6hu] .msg-content details summary::-webkit-details-marker {
    display: none;
}

/* Content inside details gets consistent padding */
[b-8d9pxpk6hu] .msg-content details > *:not(summary) {
    margin-left: 16px;
    margin-right: 16px;
}

[b-8d9pxpk6hu] .msg-content details > p:first-of-type {
    margin-top: 12px;
}

[b-8d9pxpk6hu] .msg-content details > *:last-child {
    margin-bottom: 12px;
}

/* Tables inside details — full width minus padding */
[b-8d9pxpk6hu] .msg-content details > .table-scroll-wrapper,
[b-8d9pxpk6hu] .msg-content details > table {
    margin-left: 16px;
    margin-right: 16px;
    width: calc(100% - 32px);
}

/* ===== #12 Links — BEC navy with subtle underline (parity with DocumentCSS) ===== */
[b-8d9pxpk6hu] .msg-content a {
    color: #0a1f8f;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid rgba(10, 31, 143, 0.30);
    transition: border-color 0.15s ease, color 0.15s ease;
    word-break: break-word;
}

[b-8d9pxpk6hu] .msg-content a:hover {
    color: #0a1f8f;
    border-bottom-color: #0a1f8f;
}

[b-8d9pxpk6hu] .msg-content a:active {
    color: #061767;
}

/* ===== #12b Report Download Links (📄 file.docx) ===== */
[b-8d9pxpk6hu] .msg-content a.report-download-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    margin: 4px 0;
    background: var(--BEC-colorNeutralBackground3, #F5F5F5);
    border: 1px solid var(--BEC-colorNeutralBorder1, #E0E0E0);
    border-radius: 8px;
    color: var(--BEC-colorBrandForeground1, #0F6CBD);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-bottom: none;
    word-break: normal;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

[b-8d9pxpk6hu] .msg-content a.report-download-link:hover {
    background: var(--BEC-colorNeutralBackground4, #EBEBEB);
    border-color: var(--BEC-colorBrandForeground1, #0F6CBD);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    color: var(--BEC-colorBrandForeground2, #115EA3);
    border-bottom: none;
}

[b-8d9pxpk6hu] .msg-content a.report-download-link:active {
    background: var(--BEC-colorNeutralBackground5, #E0E0E0);
}

/* ===== #13 Horizontal Rules — fade-edge gradient (BEC document divider) ===== */
[b-8d9pxpk6hu] .msg-content hr {
    border: none;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        #d0d0d0 30%,
        #d0d0d0 70%,
        transparent 100%
    );
    margin: 28px 0;
}

/* ===== #14 Task Lists (checkboxes) ===== */
[b-8d9pxpk6hu] .msg-content ul:has(> li > input[type="checkbox"]) {
    list-style: none;
    padding-left: 4px;
}

[b-8d9pxpk6hu] .msg-content li:has(> input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    margin-bottom: 0;
}

[b-8d9pxpk6hu] .msg-content li > input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid var(--BEC-colorNeutralStroke1, #D1D1D1);
    border-radius: 4px;
    margin-top: 2px;
    cursor: default;
    position: relative;
    background: var(--BEC-colorNeutralBackground1, #FFFFFF);
    transition: all 0.15s ease;
    flex-shrink: 0;
}

[b-8d9pxpk6hu] .msg-content li > input[type="checkbox"]:checked {
    background: #0a1f8f;
    border-color: #0a1f8f;
}

[b-8d9pxpk6hu] .msg-content li > input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Faded strikethrough on a checked task's text — the visual cue that says
   "done, archived in spirit, still here for the record." */
[b-8d9pxpk6hu] .msg-content li:has(> input[type="checkbox"]:checked) {
    color: #6e6e73;
}
[b-8d9pxpk6hu] .msg-content li:has(> input[type="checkbox"]:checked)::after {
    /* Use a wrapping pseudo so we don't strike through the checkbox itself */
}
[b-8d9pxpk6hu] .msg-content li:has(> input[type="checkbox"]:checked) > *:not(input) {
    text-decoration: line-through;
    text-decoration-color: rgba(110, 110, 115, 0.4);
}

/* ===== #15 Strikethrough ===== */
[b-8d9pxpk6hu] .msg-content del,
[b-8d9pxpk6hu] .msg-content s {
    text-decoration: line-through;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    text-decoration-color: var(--BEC-colorNeutralForeground2, #605e5c);
}

/* ===== #16 Highlighted Text (==highlight==) — amber underline effect ===== */
[b-8d9pxpk6hu] .msg-content mark {
    background: linear-gradient(transparent 60%, rgba(255, 159, 10, 0.32) 60%);
    color: inherit;
    padding: 0 2px;
    border-radius: 1px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ===== #17 Definition Lists ===== */
[b-8d9pxpk6hu] .msg-content dl {
    margin: 12px 0;
}

[b-8d9pxpk6hu] .msg-content dt {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin-top: 12px;
    font-size: 14px;
}

[b-8d9pxpk6hu] .msg-content dt:first-child {
    margin-top: 0;
}

[b-8d9pxpk6hu] .msg-content dd {
    margin: 4px 0 0 16px;
    margin-inline-start: 16px;
    padding-left: 12px;
    padding-inline-start: 12px;
    border-left: 2px solid var(--BEC-colorNeutralBorder1, #E0E0E0);
    border-inline-start: 2px solid var(--BEC-colorNeutralBorder1, #E0E0E0);
    border-inline-end: none;
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-size: 13.5px;
    line-height: 1.6;
}

/* ===== #18 Footnotes ===== */
[b-8d9pxpk6hu] .msg-content .footnote-ref a,
[b-8d9pxpk6hu] .msg-content sup a[href^="#fn"],
[b-8d9pxpk6hu] .msg-content a.footnote-ref {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1, #0F6CBD);
    text-decoration: none;
    vertical-align: super;
    line-height: 0;
    padding: 0 2px;
}

[b-8d9pxpk6hu] .msg-content .footnotes,
[b-8d9pxpk6hu] .msg-content section.footnotes,
[b-8d9pxpk6hu] .msg-content div.footnotes {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--BEC-colorNeutralBorder1, #E0E0E0);
    font-size: 12.5px;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

[b-8d9pxpk6hu] .msg-content .footnotes ol {
    padding-left: 20px;
    padding-inline-start: 20px;
}

[b-8d9pxpk6hu] .msg-content .footnotes li {
    margin-bottom: 4px;
}

[b-8d9pxpk6hu] .msg-content .footnotes li p {
    display: inline;
    margin: 0;
}

[b-8d9pxpk6hu] .msg-content .footnote-backref,
[b-8d9pxpk6hu] .msg-content a[href^="#fnref"],
[b-8d9pxpk6hu] .msg-content a.footnote-backref {
    text-decoration: none;
    color: var(--BEC-colorBrandForeground1, #0F6CBD);
    margin-left: 4px;
    margin-inline-start: 4px;
    font-size: 11px;
}

/* ===== #19 Images ===== */
[b-8d9pxpk6hu] .msg-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 12px 0;
    border: 1px solid var(--BEC-colorNeutralBorder1, #E0E0E0);
    display: block;
}

[b-8d9pxpk6hu] .msg-content img + em,
[b-8d9pxpk6hu] .msg-content figure figcaption {
    display: block;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    text-align: center;
    margin-top: 4px;
    font-style: normal;
}

[b-8d9pxpk6hu] .msg-content figure {
    margin: 12px 0;
}

/* ===== #20 Subscript & Superscript ===== */
[b-8d9pxpk6hu] .msg-content sub {
    font-size: 0.75em;
    vertical-align: sub;
    line-height: 0;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

[b-8d9pxpk6hu] .msg-content sup {
    font-size: 0.75em;
    vertical-align: super;
    line-height: 0;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

/* ===== #23 Abbreviations (<abbr>) ===== */
[b-8d9pxpk6hu] .msg-content abbr,
[b-8d9pxpk6hu] .msg-content abbr[title] {
    text-decoration: underline dotted;
    text-decoration-color: var(--BEC-colorNeutralForeground3, #9e9e9e);
    text-underline-offset: 3px;
    cursor: help;
    font-variant: none;
}

[b-8d9pxpk6hu] .msg-content abbr[title]:hover {
    text-decoration-color: var(--BEC-colorBrandForeground1, #0F6CBD);
}

/* ===== #24 Emoji ===== */
[b-8d9pxpk6hu] .msg-content .emoji,
[b-8d9pxpk6hu] .msg-content img.emoji {
    height: 1.1em;
    width: 1.1em;
    vertical-align: -0.1em;
    display: inline;
    border: none;
    margin: 0;
    border-radius: 0;
}

/* ===== #27 Keyboard Keys (<kbd>) ===== */
[b-8d9pxpk6hu] .msg-content kbd {
    display: inline-block;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', sans-serif);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 4px 8px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    background: var(--BEC-colorNeutralBackground2, #FAFAFA);
    border: 1px solid var(--BEC-colorNeutralStroke1, #D1D1D1);
    border-bottom-width: 2px;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
    white-space: nowrap;
    vertical-align: baseline;
}

[b-8d9pxpk6hu] .msg-content kbd kbd {
    border: none;
    padding: 0;
    box-shadow: none;
    background: none;
    font-weight: 600;
    border-bottom-width: 0;
}

/* ===== #29 Long Unbroken Text (defensive) ===== */
[b-8d9pxpk6hu] .msg-content td,
[b-8d9pxpk6hu] .msg-content th {
    overflow-wrap: break-word;
    word-break: break-word;
}

[b-8d9pxpk6hu] .msg-content a[href*="://"] {
    word-break: break-all;
}

/* ===== #34 Details / Summary (collapsible) ===== */
[b-8d9pxpk6hu] .msg-content details {
    margin: 12px 0;
    border: 1px solid var(--BEC-colorNeutralBorder1, #E0E0E0);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground2, #FAFAFA);
    overflow: hidden;
}

[b-8d9pxpk6hu] .msg-content details summary {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.12s ease;
}

[b-8d9pxpk6hu] .msg-content details summary::-webkit-details-marker {
    display: none;
}

[b-8d9pxpk6hu] .msg-content details summary::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid var(--BEC-colorNeutralForeground3, #616161);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

[b-8d9pxpk6hu] .msg-content details[open] summary::before {
    transform: rotate(90deg);
}

[b-8d9pxpk6hu] .msg-content details summary:hover {
    background: var(--BEC-colorNeutralBackground3, #F5F5F5);
}

[b-8d9pxpk6hu] .msg-content details > *:not(summary) {
    padding: 0 16px;
}

[b-8d9pxpk6hu] .msg-content details > *:not(summary):last-child {
    padding-bottom: 16px;
}

[b-8d9pxpk6hu] .msg-content details > p:first-of-type {
    padding-top: 4px;
}

/* ===== Defensive: Prevent layout-breaking overflow ===== */
[b-8d9pxpk6hu] .msg-content * {
    max-width: 100%;
}

[b-8d9pxpk6hu] .msg-content pre,
[b-8d9pxpk6hu] .msg-content pre code {
    max-width: none; /* Pre needs to scroll, not wrap */
}

/* Selection color */
[b-8d9pxpk6hu] .msg-content ::selection {
    background: #D0E5F7;
    color: var(--BEC-colorNeutralForeground1, #242424);
}


/* =============================================================================
   ATTACHMENT & UI COMPONENTS (non-markdown)
   ============================================================================= */

/* ===== Attachment Container — positioned ABOVE bubble, max 2 rows ===== */
.msg-attachments[b-8d9pxpk6hu] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
    max-height: 256px;
    overflow: hidden;
}

/* ===== Square Attachment Card (bubble variant — no status strip) ===== */
.msg-attachments .att-card[b-8d9pxpk6hu] {
    display: flex;
    flex-direction: column;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    border: 1.5px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    flex-shrink: 0;
}

.msg-attachments .att-card:hover[b-8d9pxpk6hu] {
    border-color: var(--BEC-colorBrandForeground1, #0078d4);
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.1);
}

/* Card body: file name + size centered */
.msg-attachments .att-card-body[b-8d9pxpk6hu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
}

.msg-attachments .att-card-name[b-8d9pxpk6hu] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
    line-height: 1.3;
}

.msg-attachments .att-card-size[b-8d9pxpk6hu] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    margin-top: 2px;
    display: block;
}

/* Image thumbnail inside card */
.msg-attachments .att-card-thumb[b-8d9pxpk6hu] {
    padding: 4px;
}

.msg-attachments .att-card-thumb-img[b-8d9pxpk6hu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* "+N more" dashed pill */
.att-more-pill[b-8d9pxpk6hu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    border: 1.5px dashed var(--BEC-colorNeutralBorder1, #e1dfdd);
    background: #fafafa;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 12px;
    font-weight: 600;
    cursor: default;
    flex-shrink: 0;
}

/* ===== Message Actions (Copy, etc.) — icon-only, no border ===== */
.message-actions[b-8d9pxpk6hu] {
    display: flex;
    gap: 2px;
    margin-top: 6px;
}

    /* ===== Inline Edit Area (user messages) ===== */
    .msg-edit-area[b-8d9pxpk6hu] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 2px;
    }

    .msg-edit-textarea[b-8d9pxpk6hu] {
        width: 100%;
        min-width: 300px;
        max-width: 640px;
        padding: 8px 12px;
        border-radius: 8px;
        border: 1.5px solid var(--BEC-colorBrandStroke1, #0078d4);
        background: var(--BEC-colorNeutralBackground1, #ffffff);
        font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif);
        font-size: 14px;
        line-height: 1.5;
        color: var(--BEC-colorNeutralForeground1, #242424);
        resize: vertical;
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.12);
        box-sizing: border-box;
    }

    .msg-edit-textarea:focus[b-8d9pxpk6hu] {
        border-color: var(--BEC-colorBrandStroke1, #0078d4);
        box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.18);
    }

    .msg-edit-actions[b-8d9pxpk6hu] {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .msg-edit-confirm[b-8d9pxpk6hu] {
        padding: 5px 16px;
        border-radius: 6px;
        border: none;
        background: var(--BEC-colorBrandBackground1, #0078d4);
        color: #ffffff;
        font-size: 13px;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        transition: background 0.12s ease;
    }

    .msg-edit-confirm:hover:not(:disabled)[b-8d9pxpk6hu] {
        background: var(--BEC-colorBrandBackground1Hover, #106ebe);
    }

    .msg-edit-confirm:disabled[b-8d9pxpk6hu] {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .msg-edit-cancel[b-8d9pxpk6hu] {
        padding: 5px 14px;
        border-radius: 6px;
        border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
        background: transparent;
        color: var(--BEC-colorNeutralForeground1, #242424);
        font-size: 13px;
        font-family: inherit;
        cursor: pointer;
        transition: background 0.12s ease, border-color 0.12s ease;
    }

    .msg-edit-cancel:hover[b-8d9pxpk6hu] {
        background: var(--BEC-colorNeutralBackground1Hover, #f3f2f1);
        border-color: var(--BEC-colorNeutralStroke1Hover, #b3b3b3);
    }

.msg-action-btn[b-8d9pxpk6hu] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    transition: color 0.12s ease, background 0.12s ease;
    padding: 0;
    font-family: inherit;
    font-size: 11px;
}

.msg-action-btn:hover[b-8d9pxpk6hu] {
    background: var(--BEC-colorNeutralBackground1Hover, #f3f2f1);
    color: var(--BEC-colorNeutralForeground1, #201f1e);
}

.msg-action-btn i[b-8d9pxpk6hu] {
    font-size: 13px;
}

/* Container */
.utl[b-8d9pxpk6hu] {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 13px;
    line-height: 1.35;
}/* Response segment inside unified timeline */
[b-8d9pxpk6hu] .utl .msg-content {
    padding-top: 2px;
    line-height: 1.5;
}

@keyframes utl-fadeIn-b-8d9pxpk6hu {
    from { opacity: 0; }
    to { opacity: 1; }
}/* Interrupted turn indicator — shown when a streaming response was cut short by disconnect */
.msg-interrupted[b-8d9pxpk6hu] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    background-color: var(--BEC-colorPaletteYellowBackground1, #fff9e6);
    border: 1px solid var(--BEC-colorPaletteYellowBorderActive, #e8b400);
    font-size: 12px;
    color: var(--BEC-colorPaletteYellowForeground2, #7d5a00);
}

.msg-interrupted-icon[b-8d9pxpk6hu] {
    font-size: 12px;
    color: var(--BEC-colorPaletteYellowForeground2, #7d5a00);
}

/* User-initiated stop — neutral grey instead of warning yellow */
.msg-interrupted.msg-stopped[b-8d9pxpk6hu] {
    background-color: var(--BEC-colorNeutralBackground3, #f0f0f0);
    border-color: var(--BEC-colorNeutralStroke2, #d1d1d1);
    color: var(--BEC-colorNeutralForeground2, #616161);
}

.msg-interrupted.msg-stopped .msg-interrupted-icon[b-8d9pxpk6hu] {
    color: var(--BEC-colorNeutralForeground2, #616161);
}

/* ===== Trace ID Badge ===== */
.bec-trace-badge[b-8d9pxpk6hu] {
    font-family: var(--bec-font-mono, 'Cascadia Code', monospace);
    font-size: 0.72rem;
    color: var(--BEC-TextSecondary, #666);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.bec-trace-badge:hover[b-8d9pxpk6hu] {
    opacity: 1;
    text-decoration: underline;
}

/* =============================================================================
   GEMINI-STYLE CONTENT RENDERING ENHANCEMENTS
   =============================================================================
   Animated reveal for assistant content blocks, improved visual hierarchy
   for streamed markdown content, and polished section transitions.
   ============================================================================= */

/* Animated reveal for each block-level element inside assistant messages */
[b-8d9pxpk6hu] .msg-assistant .msg-content > p,
[b-8d9pxpk6hu] .msg-assistant .msg-content > h1,
[b-8d9pxpk6hu] .msg-assistant .msg-content > h2,
[b-8d9pxpk6hu] .msg-assistant .msg-content > h3,
[b-8d9pxpk6hu] .msg-assistant .msg-content > h4,
[b-8d9pxpk6hu] .msg-assistant .msg-content > h5,
[b-8d9pxpk6hu] .msg-assistant .msg-content > h6,
[b-8d9pxpk6hu] .msg-assistant .msg-content > ul,
[b-8d9pxpk6hu] .msg-assistant .msg-content > ol,
[b-8d9pxpk6hu] .msg-assistant .msg-content > blockquote,
[b-8d9pxpk6hu] .msg-assistant .msg-content > table,
[b-8d9pxpk6hu] .msg-assistant .msg-content > pre,
[b-8d9pxpk6hu] .msg-assistant .msg-content > hr,
[b-8d9pxpk6hu] .msg-assistant .msg-content > details {
    animation: contentReveal-b-8d9pxpk6hu 0.3s ease-out both;
}

@keyframes contentReveal-b-8d9pxpk6hu {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered animation delay for sequential blocks (first 8 visible) */
[b-8d9pxpk6hu] .msg-assistant .msg-content > *:nth-child(1) { animation-delay: 0s; }
[b-8d9pxpk6hu] .msg-assistant .msg-content > *:nth-child(2) { animation-delay: 0.04s; }
[b-8d9pxpk6hu] .msg-assistant .msg-content > *:nth-child(3) { animation-delay: 0.08s; }
[b-8d9pxpk6hu] .msg-assistant .msg-content > *:nth-child(4) { animation-delay: 0.12s; }
[b-8d9pxpk6hu] .msg-assistant .msg-content > *:nth-child(5) { animation-delay: 0.16s; }
[b-8d9pxpk6hu] .msg-assistant .msg-content > *:nth-child(6) { animation-delay: 0.2s; }
[b-8d9pxpk6hu] .msg-assistant .msg-content > *:nth-child(7) { animation-delay: 0.24s; }
[b-8d9pxpk6hu] .msg-assistant .msg-content > *:nth-child(8) { animation-delay: 0.28s; }

/* Subtle left accent for the entire assistant content area — removed in Phase 3.5 (borderless agent) */
.msg-assistant .msg-body[b-8d9pxpk6hu] {
    padding-left: 0;
}

/* Enhanced blockquote callout — Gemini-style info/warning boxes */
[b-8d9pxpk6hu] .msg-content blockquote p:first-child strong {
    font-size: 13px;
    letter-spacing: 0.02em;
}

/* =============================================================================
   #35 SEMANTIC COLOR CLASSES — Status Indicators & Value Colors
   =============================================================================
   Usage: LLM outputs <span class="text-good">Good</span> in table cells.
   Allowed by HtmlSanitizer (class attribute on span is whitelisted).
   ============================================================================= */

/* Positive / healthy / on-target */
[b-8d9pxpk6hu] .msg-content .text-good {
    color: #16643a;
    font-weight: 600;
}

/* Moderate / needs attention but not critical */
[b-8d9pxpk6hu] .msg-content .text-moderate {
    color: #7c6a0a;
    font-weight: 500;
}

/* Warning / approaching threshold / attention needed */
[b-8d9pxpk6hu] .msg-content .text-warning {
    color: #b45309;
    font-weight: 600;
}

/* Critical / failure / urgent action required */
[b-8d9pxpk6hu] .msg-content .text-critical {
    color: #be123c;
    font-weight: 600;
}

/* Dead / inactive / zero movement */
[b-8d9pxpk6hu] .msg-content .text-dead {
    color: #991b1b;
    font-weight: 600;
}

/* Muted / secondary / de-emphasized context */
[b-8d9pxpk6hu] .msg-content .text-muted {
    color: #6b7280;
    font-weight: 400;
}

/* Informational / neutral highlight */
[b-8d9pxpk6hu] .msg-content .text-info {
    color: #1d4ed8;
    font-weight: 500;
}

/* Trend indicators — subtle, no excessive weight */
[b-8d9pxpk6hu] .msg-content .text-up {
    color: #16643a;
}

[b-8d9pxpk6hu] .msg-content .text-down {
    color: #be123c;
}

[b-8d9pxpk6hu] .msg-content .text-flat {
    color: #6b7280;
}

/* =============================================================================
   #36 KPI CHIPS — Compact inline metric badges
   =============================================================================
   Usage: <span class="kpi-chip">Turnover <strong>4.2x</strong></span>
          <span class="kpi-chip kpi-good">On Hand <strong>47 days</strong></span>
   ============================================================================= */

[b-8d9pxpk6hu] .msg-content .kpi-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    background: #F3F4F6;
    color: #374151;
    border: 1px solid #E5E7EB;
    white-space: nowrap;
    margin: 2px 4px 2px 0;
}

[b-8d9pxpk6hu] .msg-content .kpi-chip strong {
    font-weight: 700;
    color: #111827;
}

[b-8d9pxpk6hu] .msg-content .kpi-good {
    background: #ECFDF5;
    color: #065F46;
    border-color: #A7F3D0;
}
[b-8d9pxpk6hu] .msg-content .kpi-good strong { color: #065F46; }

[b-8d9pxpk6hu] .msg-content .kpi-warning {
    background: #FFFBEB;
    color: #92400E;
    border-color: #FDE68A;
}
[b-8d9pxpk6hu] .msg-content .kpi-warning strong { color: #92400E; }

[b-8d9pxpk6hu] .msg-content .kpi-critical {
    background: #FFF1F2;
    color: #9F1239;
    border-color: #FECDD3;
}
[b-8d9pxpk6hu] .msg-content .kpi-critical strong { color: #9F1239; }

[b-8d9pxpk6hu] .msg-content .kpi-info {
    background: #EFF6FF;
    color: #1E40AF;
    border-color: #BFDBFE;
}
[b-8d9pxpk6hu] .msg-content .kpi-info strong { color: #1E40AF; }

/* =============================================================================
   #37 MINI PROGRESS BARS — Inline percentage visualization
   =============================================================================
   Usage: <span class="progress-bar" data-value="62">62%</span>
   JS injects the width via inline style on a child element.
   ============================================================================= */

[b-8d9pxpk6hu] .msg-content .progress-bar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 100px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    vertical-align: middle;
}

[b-8d9pxpk6hu] .msg-content .progress-bar .progress-track {
    flex: 1;
    height: 6px;
    background: #E5E7EB;
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}

[b-8d9pxpk6hu] .msg-content .progress-bar .progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Color thresholds applied by JS based on data-value */
[b-8d9pxpk6hu] .msg-content .progress-bar .progress-fill.pv-good    { background: #16a34a; }
[b-8d9pxpk6hu] .msg-content .progress-bar .progress-fill.pv-moderate { background: #ca8a04; }
[b-8d9pxpk6hu] .msg-content .progress-bar .progress-fill.pv-warning  { background: #ea580c; }
[b-8d9pxpk6hu] .msg-content .progress-bar .progress-fill.pv-critical { background: #dc2626; }

/* =============================================================================
   #39 MERMAID DIAGRAMS — Rendered from ```mermaid code blocks
   ============================================================================= */

[b-8d9pxpk6hu] .msg-content .mermaid-container {
    margin: 12px 0;
    padding: 16px;
    background: #FAFAFA;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    overflow-x: auto;
    text-align: center;
}

[b-8d9pxpk6hu] .msg-content .mermaid-container svg {
    max-width: 100%;
    height: auto;
}

[b-8d9pxpk6hu] .msg-content .mermaid-error {
    color: #DC2626;
    font-size: 12px;
    padding: 8px;
    background: #FEF2F2;
    border-radius: 4px;
    text-align: left;
}

/* =============================================================================
   #40 PRINT STYLES — Clean output for reporting
   ============================================================================= */

@media print {
    [b-8d9pxpk6hu] .msg-content .block-copy-btn,
    .message-actions[b-8d9pxpk6hu] {
        display: none !important;
    }

    [b-8d9pxpk6hu] .msg-content pre {
        background: #f5f5f5 !important;
        color: #1a1a1a !important;
        border-color: #ddd !important;
        box-shadow: none !important;
    }

    [b-8d9pxpk6hu] .msg-content .mermaid-container {
        break-inside: avoid;
    }

    [b-8d9pxpk6hu] .msg-content table {
        break-inside: avoid;
    }
}

/* ===== F2: Stream Metadata Footer ===== */
.message-meta-footer[b-8d9pxpk6hu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

.message-meta-footer__sep[b-8d9pxpk6hu] {
    color: var(--BEC-colorNeutralStroke1, #c8c6c4);
    padding: 0 1px;
}

.message-meta-footer__item[b-8d9pxpk6hu] {
    white-space: nowrap;
}

/* ===== Streaming bubble heartbeat (§3.5.4) ===== */

.bec-stream-host[b-8d9pxpk6hu] {
    display: inline; /* keeps heartbeat flush with last paragraph */
}

.bec-bubble-heartbeat[b-8d9pxpk6hu] {
    /* Override the 14px default from the compact-row heartbeat */
    width: 12px;
    height: 12px;
    border-width: 1.5px;
    margin-left: 6px;
    vertical-align: baseline;
}

/* Block-level fade-in for newly arrived streaming content */
.bec-stream-content > .bec-just-arrived[b-8d9pxpk6hu] {
    /* P9-S (2026-05-21): 150ms → 280ms for a softer entrance. */
    animation: bec-fade-in-b-8d9pxpk6hu 280ms ease-out;
}

@keyframes bec-fade-in-b-8d9pxpk6hu {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .bec-stream-content > .bec-just-arrived[b-8d9pxpk6hu] {
        animation: none;
    }
}

/* Thinking-dots indicator — shown in empty streaming bubble until first chunk */
.bec-thinking-dots[b-8d9pxpk6hu] {
    display: inline-flex;
    gap: 4px;
    padding: 6px 0;
    align-items: center;
}

/* P9-S (2026-05-21) — animation killed. The three pulsing thinking-dots
   competed with the streaming-paragraph shimmer for the user's eye while
   the agent was warming up. Dots remain in the markup as a static cluster
   for the brief pre-content moment, but no longer animate. The shimmer on
   the first real paragraph is the sole "I'm working" indicator. */
.bec-thinking-dots > span[b-8d9pxpk6hu] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bec-text-muted, #9ca3af);
    opacity: 0.5;
}

/* ===== In-Bubble Artifact Preview Cards (Phase 3.3) ===== */

.bec-attached-artifacts[b-8d9pxpk6hu] {
    margin: 0.75rem 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bec-artifact-card[b-8d9pxpk6hu] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--BEC-colorNeutralBorder1, #e5e7eb);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 120ms ease-out, border-color 120ms ease-out, transform 120ms ease-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    font-family: inherit;
    text-align: left;
    max-width: 480px;
    width: max-content;
}

.bec-artifact-card:hover[b-8d9pxpk6hu] {
    background: #fafafa;
    border-color: #d1d5db;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.bec-artifact-icon[b-8d9pxpk6hu] {
    font-size: 1.25rem;
    color: var(--BEC-colorBrandForeground1, #3b82f6);
    flex-shrink: 0;
}

.bec-artifact-meta[b-8d9pxpk6hu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.bec-artifact-title[b-8d9pxpk6hu] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #1d1d1f);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bec-artifact-sub[b-8d9pxpk6hu] {
    font-size: 0.6875rem;
    color: var(--BEC-colorNeutralForeground2, #6e6e73);
}

.bec-artifact-open[b-8d9pxpk6hu] {
    font-size: 0.75rem;
    color: var(--BEC-colorNeutralForeground3, #9ca3af);
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .bec-artifact-card[b-8d9pxpk6hu] { transition: none; }
    .bec-artifact-card:hover[b-8d9pxpk6hu] { transform: none; }
}


/* ============================================================================
   P9-H — Streaming UIUX polish (agent's voice as the entire UX surface)
   ============================================================================
   - Warmup placeholder: shown until first ResponseDelta arrives. Soft pulse
     dot + "Working…" label. Honest, no fake narration.
   - Text breathing: while the agent is streaming text, the message body
     subtly pulses opacity so the user feels "live, still going" rather than
     a frozen-looking bubble. CSS animation only, no JS heartbeat needed.
   - Done state: once streaming completes, breathing animation stops and
     the message takes its final, full-opacity look.
   ============================================================================ */

/* Per-message elapsed counter (M:SS). Neutral, no words, no animation.
   Sits next to the message timestamp in the header. Counts live while the
   agent is streaming; freezes at final duration when streaming completes.
   No pulse, no cursor — the agent's text itself is the only "alive" signal,
   and the breathing animation below conveys "still talking" between beats. */
.msg-elapsed[b-8d9pxpk6hu] {
    margin-left: 0.5rem;
    font-size: 0.6875rem;
    color: var(--BEC-colorNeutralForeground3, #9ca3af);
    font-variant-numeric: tabular-nums;
}

/* Smart word shown during the initial think gap (before the agent narrates or answers).
   Brand BLUE with a brighter light sweeping left→right through the letters (text-clipped
   gradient) — the shimmer IS the loading signal, so no dots. The BEC branding moment. */
.bec-thinking-word[b-8d9pxpk6hu] {
    margin-right: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: linear-gradient(
        100deg,
        var(--BEC-colorBrandForeground1, #0078d4) 0%,
        var(--BEC-colorBrandForeground1, #0078d4) 38%,
        #bfe0ff 50%,                                       /* the moving light path */
        var(--BEC-colorBrandForeground1, #0078d4) 62%,
        var(--BEC-colorBrandForeground1, #0078d4) 100%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: bec-word-shimmer-b-8d9pxpk6hu 1.8s linear infinite;
}

@keyframes bec-word-shimmer-b-8d9pxpk6hu {
    0%   { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

/* Reduced-motion: steady brand-blue word, no sweep. */
@media (prefers-reduced-motion: reduce) {
    .bec-thinking-word[b-8d9pxpk6hu] {
        animation: none;
        background: none;
        -webkit-text-fill-color: var(--BEC-colorBrandForeground1, #0078d4);
        color: var(--BEC-colorBrandForeground1, #0078d4);
    }
}

/* Text breathing — applies while the message is streaming.
   The whole content body slowly cycles between 0.78 and 1.0 opacity so the
   user perceives a gentle "alive, talking" rhythm even between paragraphs. */
.bec-msg-breathing[b-8d9pxpk6hu] {
    animation: bec-msg-breathe-b-8d9pxpk6hu 2.2s ease-in-out infinite;
}

@keyframes bec-msg-breathe-b-8d9pxpk6hu {
    0%, 100% { opacity: 0.78; }
    50%      { opacity: 1.00; }
}

.bec-msg-done[b-8d9pxpk6hu] {
    /* No animation — clean, full opacity. The bubble's final state. */
    opacity: 1;
    animation: none;
}

/* ===== Live narration fade-in (used by .bec-live-narration) ===== */
@keyframes bec-narration-fadein-b-8d9pxpk6hu {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== THE single live narration line — one line of text, updates in place ===== */
[b-8d9pxpk6hu] .bec-live-narration {
    margin: 0 0 6px 0;
    animation: bec-narration-fadein-b-8d9pxpk6hu 0.25s ease-out;
}

[b-8d9pxpk6hu] .bec-live-narration__text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--BEC-colorNeutralForeground2, #6b7280);
    word-wrap: break-word;
    overflow-wrap: break-word;
    transition: opacity 0.2s ease;
}

/* ===== Activity row — dots + live timer, ALWAYS on its own line below the content ===== */
[b-8d9pxpk6hu] .bec-activity-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

@media (prefers-reduced-motion: reduce) {
    [b-8d9pxpk6hu] .bec-live-narration { animation: none; }
}

/* Suppress the whole-bubble breathing while streaming — the per-paragraph
   active indicator is now the SOLE "alive" signal. Whole-bubble pulse
   stacked on top of the active ellipsis felt noisy in testing. */
.bec-msg-breathing.msg-streaming[b-8d9pxpk6hu] {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .bec-msg-breathing[b-8d9pxpk6hu] { animation: none; }
    .bec-msg-warmup__pulse[b-8d9pxpk6hu] { animation: none; opacity: 0.7; }
}

/* ===== U-019: Mid-stream skeleton placeholder =====
   Shown while a code fence or table is still being streamed (open but not
   yet closed). Mirrors bec-pause-indicator aesthetic — subtle gray, pulse
   animation, monospace. Disappears when the fence/table closes and the
   real Markdig-rendered block swaps in via finalizeStream. */
[b-8d9pxpk6hu] .bec-stream-skeleton {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 8px 0;
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    font-family: var(--BEC-fontFamilyMonospace, 'Cascadia Code', 'Fira Code', monospace);
    font-size: 0.82em;
    color: var(--BEC-colorNeutralForeground3, #9ca3af);
}
[b-8d9pxpk6hu] .bec-stream-skeleton__pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralForeground3, #9ca3af);
    animation: bec-skeleton-pulse-b-8d9pxpk6hu 1.4s ease-in-out infinite;
}
[b-8d9pxpk6hu] .bec-stream-skeleton__text {
    flex: 1;
}

@keyframes bec-skeleton-pulse-b-8d9pxpk6hu {
    0%, 100% { opacity: 0.3; transform: scale(0.85); }
    50%      { opacity: 0.8; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    [b-8d9pxpk6hu] .bec-stream-skeleton__pulse { animation: none; opacity: 0.5; }
}

/* ─────────────────────────────────────────────────────────────────────
   U3 (2026-05-29) — DocumentReply citation styling.
   Citations like [page 14 §11.3], [rows 47, 102], [image] are wrapped
   in <span class="msg-citation"> by MarkdownHelper.ToHtml. The styling
   here makes them visually distinct as references vs free-form text in
   square brackets (importance markers [Critical]/[High] stay plain).
   Click behavior is intentionally not bound here — full doc-viewer-with-
   anchors is a follow-up; today's value is visual identification +
   hover affordance signaling these are addressable references.
   ───────────────────────────────────────────────────────────────────── */
[b-8d9pxpk6hu] .msg-content .msg-citation {
    color: var(--BEC-colorBrandForeground1, #2563eb);
    background-color: rgba(37, 99, 235, 0.06);
    border-bottom: 1px dotted currentColor;
    padding: 0 2px;
    border-radius: 2px;
    cursor: help;
    transition: background-color 0.15s ease, color 0.15s ease;
    font-variant-numeric: tabular-nums;
}
[b-8d9pxpk6hu] .msg-content .msg-citation:hover {
    background-color: rgba(37, 99, 235, 0.14);
    color: var(--BEC-colorBrandForeground2, #1d4ed8);
}
@media (prefers-color-scheme: dark) {
    [b-8d9pxpk6hu] .msg-content .msg-citation {
        color: var(--BEC-colorBrandForeground1, #60a5fa);
        background-color: rgba(96, 165, 250, 0.10);
    }
    [b-8d9pxpk6hu] .msg-content .msg-citation:hover {
        background-color: rgba(96, 165, 250, 0.18);
    }
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Chat/SessionPreviewPopover.razor.rz.scp.css */
/* =============================================================================
   SessionPreviewPopover.razor.css — matches SessionSidebar's BEC palette
   ==============================================================================
   The popover renders in a fixed-position root outside the sidebar's scope,
   so the BEC tokens are redeclared here (they don't cascade through fixed
   positioning + Blazor CSS isolation). Source-of-truth values mirror
   SessionSidebar.razor.css.
   ============================================================================== */

.session-preview-popover[b-q4s0hiemc6] {
    /* Re-declared design tokens (kept in lockstep with SessionSidebar.razor.css) */
    --primary: #0078d4;
    --primary-light: #e8f4fd;
    --text: #1d1d1f;
    --text-muted: #6e6e73;
    --text-faint: #a19f9d;
    --border: #e1dfdd;
    --bg-hover: #f3f2f1;
    --bg-card: #fff;
    --radius-sm: 10px;
    --shadow-popover: 0 4px 16px rgba(0, 0, 0, .08);
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;

    position: fixed;
    z-index: 9999;
    width: 320px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    box-shadow: var(--shadow-popover);
    font-family: var(--font);
    color: var(--text);
    pointer-events: auto;
    animation: popover-fade-in-b-q4s0hiemc6 120ms ease-out;
}

/* ===== Left-edge anchor arrow ===== */
/* Two pseudo-elements layered: outer triangle = border colour, inner triangle = card background.
   Positioned 14px from the top so it points at the centre of a ~38px row. */

.session-preview-popover[b-q4s0hiemc6]::before,
.session-preview-popover[b-q4s0hiemc6]::after {
    content: '';
    position: absolute;
    top: 14px;
    width: 0;
    height: 0;
    border-style: solid;
}

.session-preview-popover[b-q4s0hiemc6]::before {
    /* Border-coloured outer triangle */
    left: -8px;
    border-width: 7px 8px 7px 0;
    border-color: transparent var(--border) transparent transparent;
}

.session-preview-popover[b-q4s0hiemc6]::after {
    /* Card-coloured inner triangle, offset 1px to leave the border visible */
    left: -7px;
    border-width: 7px 8px 7px 0;
    border-color: transparent var(--bg-card) transparent transparent;
}

@keyframes popover-fade-in-b-q4s0hiemc6 {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ===== Scrollbar (matches sidebar) ===== */
.session-preview-popover[b-q4s0hiemc6]::-webkit-scrollbar {
    width: 4px;
}

.session-preview-popover[b-q4s0hiemc6]::-webkit-scrollbar-track {
    background: transparent;
}

.session-preview-popover[b-q4s0hiemc6]::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

/* ===== Header ===== */
.preview-header[b-q4s0hiemc6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.preview-title[b-q4s0hiemc6] {
    flex: 1;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-pill[b-q4s0hiemc6] {
    font-size: .6rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
}

.pill-streaming[b-q4s0hiemc6] {
    background: #dbeafe;
    color: #1e40af;
}

.pill-hitl[b-q4s0hiemc6] {
    background: #fef3c7;
    color: #92400e;
}

/* ===== Meta line ===== */
.preview-meta[b-q4s0hiemc6] {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: .65rem;
    color: var(--text-faint);
    margin-bottom: 10px;
}

/* ===== Message list ===== */
.preview-messages[b-q4s0hiemc6] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preview-msg[b-q4s0hiemc6] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .75rem;
    line-height: 1.45;
}

.msg-role[b-q4s0hiemc6] {
    flex-shrink: 0;
    min-width: 52px;
    font-size: .62rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .3px;
    padding-top: 1px;
}

.preview-msg-assistant .msg-role[b-q4s0hiemc6] {
    color: var(--primary);
}

.msg-content[b-q4s0hiemc6] {
    color: var(--text);
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.msg-badge[b-q4s0hiemc6] {
    font-size: .7rem;
    flex-shrink: 0;
    opacity: .7;
}

/* ===== Empty state ===== */
.preview-empty[b-q4s0hiemc6] {
    font-size: .75rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
    text-align: center;
    padding: 12px 0;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Chat/SessionSidebar.razor.rz.scp.css */
/* =============================================================================
   SessionSidebar.razor.css — Sidebar styles (BEC Design System)
   ============================================================================== */

/* ----- Rename modal (plain HTML, no Syncfusion) ----- */
.agent-rename-backdrop[b-mofglmmd1w] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 9000;
    animation: agent-rename-fade-in-b-mofglmmd1w 0.12s ease-out;
}
.agent-rename-dialog[b-mofglmmd1w] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 9001;
    display: flex;
    flex-direction: column;
    animation: agent-rename-rise-b-mofglmmd1w 0.14s ease-out;
}
.agent-rename-header[b-mofglmmd1w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 8px;
    border-bottom: 1px solid #eee;
}
.agent-rename-header h3[b-mofglmmd1w] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
}
.agent-rename-close[b-mofglmmd1w] {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #86868b;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
}
.agent-rename-close:hover[b-mofglmmd1w] {
    background: #f3f3f3;
    color: #1d1d1f;
}
.agent-rename-body[b-mofglmmd1w] {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.agent-rename-body .bec-rename-label[b-mofglmmd1w] {
    font-size: 12px;
    color: #6e6e73;
    font-weight: 500;
}
.agent-rename-body .bec-rename-input[b-mofglmmd1w] {
    padding: 8px 10px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease;
}
.agent-rename-body .bec-rename-input:focus[b-mofglmmd1w] {
    border-color: var(--BEC-colorBrandBackground, #0078d4);
}
.agent-rename-dialog .bec-rename-footer[b-mofglmmd1w] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 18px 14px;
    border-top: 1px solid #f3f3f3;
}
.agent-rename-dialog .bec-btn-cancel[b-mofglmmd1w],
.agent-rename-dialog .bec-btn-save[b-mofglmmd1w] {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.agent-rename-dialog .bec-btn-cancel[b-mofglmmd1w] {
    background: #fff;
    border-color: #d2d2d7;
    color: #1d1d1f;
}
.agent-rename-dialog .bec-btn-cancel:hover[b-mofglmmd1w] {
    background: #f5f5f7;
}
.agent-rename-dialog .bec-btn-save[b-mofglmmd1w] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: #fff;
}
.agent-rename-dialog .bec-btn-save:hover:not(:disabled)[b-mofglmmd1w] {
    background: var(--BEC-colorBrandBackgroundHover, #005a9e);
}
.agent-rename-dialog .bec-btn-save:disabled[b-mofglmmd1w] {
    opacity: 0.5;
    cursor: not-allowed;
}
@keyframes agent-rename-fade-in-b-mofglmmd1w {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes agent-rename-rise-b-mofglmmd1w {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* Delete-in-flight visual — the row dims and "Deleting…" replaces the time. */
[b-mofglmmd1w] .bec-session-deleting {
    opacity: 0.55;
    pointer-events: none;
}
[b-mofglmmd1w] .bec-session-deleting-label {
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: .65rem;
    font-style: italic;
    color: var(--BEC-colorErrorForeground1, #b3261e);
    animation: bec-session-deleting-pulse-b-mofglmmd1w 1.2s ease-in-out infinite;
}
@keyframes bec-session-deleting-pulse-b-mofglmmd1w {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}
[b-mofglmmd1w] .session-preview-popover-failed {
    color: #b91c1c;
    background: #fff5f5;
    border-color: #fecaca;
}

/* ===== CSS Variables (scoped to sidebar) ===== */
.bec-sidebar[b-mofglmmd1w] {
    --primary: #0078d4;
    --primary-light: #e8f4fd;
    --text: #1d1d1f;
    --text-muted: #6e6e73;
    --text-faint: #a19f9d;
    --border: #e1dfdd;
    --bg-hover: #f3f2f1;
    --bg-card: #fff;
    --bg-chip: #f3f4f6;
    --radius: 12px;
    --radius-sm: 10px;
    --radius-xs: 8px;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-popover: 0 4px 16px rgba(0, 0, 0, .08);
    --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, .1);
    --danger: #a80000;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

/* ===== Sidebar Container ===== */
.bec-sidebar[b-mofglmmd1w] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    overflow: hidden;
    font-family: var(--font);
}

/* ===== Header ===== */
.bec-sidebar-header[b-mofglmmd1w] {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

/* New Chat button — primary blue override */
.bec-btn-new-chat[b-mofglmmd1w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 5px 12px;
    font-size: .72rem;
    font-weight: 500;
    font-family: var(--font);
    border: none;
    background: var(--primary);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, color .15s;
    user-select: none;
}

.bec-btn-new-chat:hover[b-mofglmmd1w] {
    background: #006cbe;
}

.bec-btn-new-chat i[b-mofglmmd1w] {
    font-size: .7rem;
}

/* ===== Search ===== */
.bec-search-wrap[b-mofglmmd1w] {
    padding: 6px 12px;
    flex-shrink: 0;
}

.bec-search-inner[b-mofglmmd1w] {
    position: relative;
}

.bec-search-bar[b-mofglmmd1w] {
    width: 100%;
    height: 36px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 0 12px;
    font-size: .85rem;
    font-family: var(--font);
    outline: none;
    transition: border-color .15s;
    background: var(--bg-card);
    box-sizing: border-box;
}

.bec-search-bar:focus[b-mofglmmd1w] {
    border-color: var(--primary);
}

.bec-search-bar[b-mofglmmd1w]::placeholder {
    color: var(--text-faint);
}

.bec-search-hint[b-mofglmmd1w] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .65rem;
    color: var(--text-faint);
    background: var(--bg-chip);
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
}

/* ===== Apple Segmented Control ===== */
.bec-segmented-control[b-mofglmmd1w] {
    display: flex;
    margin: 8px 12px 0;
    padding: 2px;
    background: #ebebeb;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.bec-segmented-control[b-mofglmmd1w]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc((100% - 4px) / 3);
    height: calc(100% - 4px);
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    z-index: 0;
}

.bec-segmented-control[data-active="1"][b-mofglmmd1w]::before {
    transform: translateX(100%);
}

.bec-segmented-control[data-active="2"][b-mofglmmd1w]::before {
    transform: translateX(200%);
}

.bec-seg-btn[b-mofglmmd1w] {
    flex: 1;
    padding: 5px 0;
    font-size: .72rem;
    font-weight: 500;
    font-family: var(--font);
    text-align: center;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    position: relative;
    z-index: 1;
    transition: color .2s;
    border-radius: 6px;
    user-select: none;
}

.bec-seg-btn.active[b-mofglmmd1w] {
    color: var(--text);
    font-weight: 600;
}

.bec-seg-btn:hover:not(.active)[b-mofglmmd1w] {
    color: var(--text);
}

/* ===== Session Count ===== */
.bec-session-count[b-mofglmmd1w] {
    text-align: center;
    font-size: .7rem;
    color: var(--text-faint);
    padding: 6px 0 2px;
    flex-shrink: 0;
}

/* ===== Session List ===== */
.bec-session-list[b-mofglmmd1w] {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    position: relative;
}

.bec-session-list[b-mofglmmd1w]::-webkit-scrollbar {
    width: 4px;
}

.bec-session-list[b-mofglmmd1w]::-webkit-scrollbar-track {
    background: transparent;
}

.bec-session-list[b-mofglmmd1w]::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

/* ===== Date Group ===== */
.bec-date-group[b-mofglmmd1w] {
    padding: 0 12px;
}

.bec-date-label[b-mofglmmd1w] {
    font-size: .58rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-faint);
    opacity: .6;
    padding: 7px 4px 2px;
}

/* ===== Session Row (38px, standard) — rendered by SessionRow.razor, needs ::deep ===== */
[b-mofglmmd1w] .bec-session-row {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 8px;
    border-radius: var(--radius-xs);
    margin: 1px 4px;
    cursor: pointer;
    transition: background .15s;
    position: relative;
}

[b-mofglmmd1w] .bec-session-row:hover {
    background: var(--bg-hover);
}

/* ===== Active Row (the open chat) =====
   Mirrors the segmented control's selected tab — a "lifted white pill": white
   surface, soft card shadow + hairline ring, and bolder dark text. Keeps the
   sidebar's selection vocabulary consistent with [Active · Pinned · Archived]. */
[b-mofglmmd1w] .bec-session-row:hover .bec-session-actions {
    background: linear-gradient(to right, transparent 0%, var(--bg-hover) 30%);
}

[b-mofglmmd1w] .bec-session-row.bec-active-row {
    background: var(--bg-card);
    box-shadow: var(--shadow-card), inset 0 0 0 1px var(--border);
}

[b-mofglmmd1w] .bec-session-row.bec-active-row .bec-session-name {
    color: var(--text);
    font-weight: 600;
}

[b-mofglmmd1w] .bec-session-row.bec-active-row .bec-session-actions {
    background: linear-gradient(to right, transparent 0%, var(--bg-card) 30%);
}

/* ===== Session Name (used in SessionRow + pinned row directly) ===== */
[b-mofglmmd1w] .bec-session-name {
    flex: 1;
    font-size: .72rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ===== Metadata Indicators ===== */
[b-mofglmmd1w] .bec-session-indicators {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 6px;
    margin-right: 6px;
}

[b-mofglmmd1w] .bec-session-indicators i {
    font-size: .55rem;
    color: var(--text-faint);
}

/* ===== Pin Icon ===== */
[b-mofglmmd1w] .bec-session-pin {
    font-size: .55rem;
    color: #d97706;
    margin-right: 6px;
    flex-shrink: 0;
}

[b-mofglmmd1w] .bec-pin-active {
    color: var(--primary);
}

/* ===== Kebab Actions (used in SessionRow + pinned row directly) ===== */
[b-mofglmmd1w] .bec-session-actions {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding-right: 8px;
    padding-left: 6px;
    background: linear-gradient(to right, transparent 0%, var(--bg-card) 30%);
    opacity: 0;
    transition: opacity .15s;
}

[b-mofglmmd1w] .bec-session-row:hover .bec-session-actions,
[b-mofglmmd1w] .bec-session-row.menu-open .bec-session-actions,
.bec-pinned-row:hover[b-mofglmmd1w]  .bec-session-actions,
.bec-pinned-row.menu-open[b-mofglmmd1w]  .bec-session-actions {
    opacity: 1;
}

[b-mofglmmd1w] .bec-btn-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: .7rem;
    transition: background .15s;
}

[b-mofglmmd1w] .bec-btn-icon:hover {
    background: var(--bg-hover);
}

/* ===== Dropdown Menu ===== */
[b-mofglmmd1w] .bec-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 180px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-dropdown);
    z-index: 200;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s;
    pointer-events: none;
    padding: 4px 0;
}

[b-mofglmmd1w] .bec-dropdown-menu.open {
    opacity: 1;
    transform: translateY(2px);
    pointer-events: auto;
}

[b-mofglmmd1w] .bec-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: .75rem;
    font-family: var(--font);
    cursor: pointer;
    color: var(--text);
    transition: background .1s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

[b-mofglmmd1w] .bec-dropdown-item:hover {
    background: var(--bg-hover);
}

[b-mofglmmd1w] .bec-dropdown-item i {
    width: 14px;
    text-align: center;
    font-size: .7rem;
    color: var(--text-muted);
}

[b-mofglmmd1w] .bec-dropdown-danger {
    color: var(--danger);
}

[b-mofglmmd1w] .bec-dropdown-danger i {
    color: var(--danger);
}

[b-mofglmmd1w] .bec-dropdown-primary {
    color: var(--primary);
}

[b-mofglmmd1w] .bec-dropdown-primary i {
    color: var(--primary);
}

[b-mofglmmd1w] .bec-dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* ===== Delete Confirmation (inline in dropdown) ===== */
[b-mofglmmd1w] .bec-delete-confirm {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[b-mofglmmd1w] .bec-delete-confirm-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

[b-mofglmmd1w] .bec-delete-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

[b-mofglmmd1w] .bec-delete-confirm-cancel {
    height: 30px;
    padding: 0 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: var(--font);
    font-size: 12px;
    cursor: pointer;
    color: var(--text);
    transition: background .1s;
}

[b-mofglmmd1w] .bec-delete-confirm-cancel:hover {
    background: var(--bg-hover);
}

[b-mofglmmd1w] .bec-delete-confirm-delete {
    height: 30px;
    padding: 0 12px;
    background: var(--danger);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: var(--font);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background .1s, opacity .1s;
}

[b-mofglmmd1w] .bec-delete-confirm-delete:hover {
    opacity: 0.9;
}

[b-mofglmmd1w] .bec-delete-confirm-delete i {
    font-size: 11px;
}

/* ===== Pinned Tab Rich Rows ===== */
.bec-pinned-row[b-mofglmmd1w] {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--radius-xs);
    margin: 1px 4px;
    cursor: pointer;
    transition: background .15s;
    position: relative;
}

.bec-pinned-row:hover[b-mofglmmd1w] {
    background: var(--bg-hover);
}

/* Open pinned chat — same "lifted white pill" selection as standard rows. */
.bec-pinned-row.bec-active-row[b-mofglmmd1w] {
    background: var(--bg-card);
    box-shadow: var(--shadow-card), inset 0 0 0 1px var(--border);
}

.bec-pinned-row.bec-active-row .bec-pinned-row-name[b-mofglmmd1w] {
    color: var(--text);
    font-weight: 600;
}

.bec-pinned-row-content[b-mofglmmd1w] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bec-pinned-row-name[b-mofglmmd1w] {
    font-size: .72rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bec-pinned-row .bec-session-indicators[b-mofglmmd1w] {
    margin-left: 6px;
    margin-right: 6px;
}

.bec-pinned-row .bec-session-actions[b-mofglmmd1w] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding-right: 8px;
    padding-left: 6px;
    background: linear-gradient(to right, transparent 0%, var(--bg-card) 30%);
    opacity: 0;
    transition: opacity .15s;
}

/* ===== Empty State ===== */
[b-mofglmmd1w] .bec-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

[b-mofglmmd1w] .bec-empty-state i {
    font-size: 28px;
    color: var(--text-faint);
    margin-bottom: 12px;
}

[b-mofglmmd1w] .bec-empty-state-title {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

[b-mofglmmd1w] .bec-empty-state-sub {
    font-size: .75rem;
    color: var(--text-muted);
}

/* ===== Loading Skeleton ===== */
.bec-skeleton-row[b-mofglmmd1w] {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    margin: 1px 4px;
}

.bec-skeleton-bar[b-mofglmmd1w] {
    border-radius: 6px;
    height: 11px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .08) 50%, rgba(0, 0, 0, .04) 100%);
    background-size: 200% 100%;
    animation: bec-shimmer-b-mofglmmd1w 1.5s ease-in-out infinite;
}

.bec-skeleton-name[b-mofglmmd1w] {
    flex: 1;
}

@keyframes bec-shimmer-b-mofglmmd1w {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== Click-away Overlay ===== */
.bec-click-away-overlay[b-mofglmmd1w] {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: transparent;
}

/* ===== Rename Dialog ===== */
.bec-rename-form[b-mofglmmd1w] {
    padding: 8px 0;
}

.bec-rename-label[b-mofglmmd1w] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
}

.bec-rename-input[b-mofglmmd1w] {
    width: 100%;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: var(--font);
    font-size: 13px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.bec-rename-input:focus[b-mofglmmd1w] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.bec-rename-footer[b-mofglmmd1w] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.bec-btn-cancel[b-mofglmmd1w] {
    height: 34px;
    padding: 0 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: var(--font);
    font-size: 13px;
    cursor: pointer;
    color: var(--text);
    transition: background .1s;
}

.bec-btn-cancel:hover[b-mofglmmd1w] {
    background: var(--bg-hover);
}

.bec-btn-save[b-mofglmmd1w] {
    height: 34px;
    padding: 0 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 13px;
    cursor: pointer;
    transition: background .1s;
}

.bec-btn-save:hover[b-mofglmmd1w] {
    background: #005a9e;
}

.bec-btn-save:disabled[b-mofglmmd1w] {
    opacity: 0.5;
    cursor: default;
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .bec-session-row[b-mofglmmd1w],
    .bec-pinned-row[b-mofglmmd1w],
    .bec-btn-icon[b-mofglmmd1w],
    .bec-seg-btn[b-mofglmmd1w],
    .bec-session-actions[b-mofglmmd1w],
    .bec-segmented-control[b-mofglmmd1w]::before,
    .bec-dropdown-menu[b-mofglmmd1w],
    .bec-skeleton-bar[b-mofglmmd1w] {
        transition: none !important;
        animation: none !important;
    }
}

/* =============================================================================
   Phase 4.3 — Virtualization, Keyboard Navigation, Accessibility
   ============================================================================= */

/* Virtualize row wrapper — must not add visible box; just carries role="option" + focus ring */
.bec-virt-row-wrap[b-mofglmmd1w] {
    display: block;
    outline: none;
}

/* Placeholder rendered by <Virtualize> while items scroll into view */
.bec-virt-placeholder[b-mofglmmd1w] {
    height: 32px;
    background: transparent;
}

/* Keyboard-focused row: outline on the child SessionRow via ::deep */
[b-mofglmmd1w] .bec-row-focused .bec-session-row {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    border-radius: 8px;
}

/* Screen-reader-only live region */
.bec-sr-only[b-mofglmmd1w] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keyboard focus rings — visible only on :focus-visible (Tab navigation) */
[b-mofglmmd1w] .bec-session-row:focus-visible,
.bec-pinned-row:focus-visible[b-mofglmmd1w],
.bec-seg-btn:focus-visible[b-mofglmmd1w],
.bec-btn-new-chat:focus-visible[b-mofglmmd1w],
.bec-search-bar:focus-visible[b-mofglmmd1w],
.bec-btn-icon:focus-visible[b-mofglmmd1w],
[b-mofglmmd1w] .bec-dropdown-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    border-radius: 4px;
}

/* Hide focus ring for mouse/pointer interactions */
[b-mofglmmd1w] .bec-session-row:focus:not(:focus-visible),
.bec-pinned-row:focus:not(:focus-visible)[b-mofglmmd1w],
.bec-seg-btn:focus:not(:focus-visible)[b-mofglmmd1w],
.bec-btn-new-chat:focus:not(:focus-visible)[b-mofglmmd1w],
.bec-search-bar:focus:not(:focus-visible)[b-mofglmmd1w],
.bec-btn-icon:focus:not(:focus-visible)[b-mofglmmd1w],
[b-mofglmmd1w] .bec-dropdown-item:focus:not(:focus-visible) {
    outline: none;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Interaction/HumanInputPrompt.razor.rz.scp.css */
/* =============================================================================
   HumanInputPrompt.razor.css — Quick-Pick Content (BEC Design System)
   ==============================================================================
   Light-themed quick-pick rendered inside an ActivityStripItem body.
   Numbered option rows, hover highlight, custom answer input.
   Uses --BEC-* design tokens with fallbacks. Scoped CSS only.
   ============================================================================== */

/* ===== Content Container (rendered directly inside ActivityStripZone) ===== */
.qp-content[b-c7vv5nh6tk] {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    animation: qpSlideUp-b-c7vv5nh6tk 0.2s ease-out;
    flex-shrink: 0;
    padding: 10px 14px 8px;
}

@keyframes qpSlideUp-b-c7vv5nh6tk {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Header: question + close ===== */
.qp-header[b-c7vv5nh6tk] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    margin-bottom: 8px;
}

.qp-question[b-c7vv5nh6tk] {
    flex: 1;
    font-size: 12.5px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    line-height: 1.45;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
}

.qp-approval-detail[b-c7vv5nh6tk] {
    margin: 0 0 8px;
    max-height: 176px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    /* no background — matches wireframe white body */
}

/* One-line action subtitle above the detail rows */
.qp-action-title[b-c7vv5nh6tk] {
    margin: 0 0 6px;
    padding-bottom: 6px;
    font-size: 11.5px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    color: var(--BEC-Text-Primary, #323130);
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

/* Key-value rows inside .qp-approval-detail */
.qp-detail-line[b-c7vv5nh6tk] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.qp-detail-key[b-c7vv5nh6tk] {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    color: var(--BEC-Text-Secondary, #605e5c);
    white-space: nowrap;
    min-width: 72px;
}

.qp-detail-val[b-c7vv5nh6tk] {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--BEC-Text-Primary, #323130);
    word-break: break-word;
    /* override any global link/anchor color that may bleed in */
    text-decoration: none;
}

/* Body/content row: stack the label above the rendered markdown so a long message is readable. */
.qp-detail-body[b-c7vv5nh6tk] {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}

/* Rendered markdown body (bullets, bold, paragraphs, tables) — never a flat blob. */
.qp-detail-richtext[b-c7vv5nh6tk] {
    font-size: 11px;
    line-height: 1.55;
    color: var(--BEC-Text-Primary, #323130);
    word-break: break-word;
}

/* The body HTML is injected via MarkupString, so its children need ::deep to be styled. */
.qp-detail-richtext[b-c7vv5nh6tk]  p { margin: 0 0 6px; }
.qp-detail-richtext[b-c7vv5nh6tk]  p:last-child { margin-bottom: 0; }
.qp-detail-richtext[b-c7vv5nh6tk]  ul,
.qp-detail-richtext[b-c7vv5nh6tk]  ol { margin: 4px 0; padding-left: 18px; }
.qp-detail-richtext[b-c7vv5nh6tk]  li { margin: 2px 0; }
.qp-detail-richtext[b-c7vv5nh6tk]  strong { font-weight: var(--BEC-fontWeightSemibold, 600); }
.qp-detail-richtext[b-c7vv5nh6tk]  table { border-collapse: collapse; width: 100%; margin: 6px 0; }
.qp-detail-richtext[b-c7vv5nh6tk]  th,
.qp-detail-richtext[b-c7vv5nh6tk]  td { border: 1px solid #e1dfdd; padding: 3px 6px; text-align: left; }

/* Note row — mirrors the main chat composer: a clean input + a circular send button. */
.qp-note-row[b-c7vv5nh6tk] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 8px;
}

.qp-note-input[b-c7vv5nh6tk] {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 7px 14px;
    font-size: 12.5px;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    border-radius: 18px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qp-note-input:focus[b-c7vv5nh6tk] {
    border-color: var(--BEC-colorBrandBackground, #0078d4);
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground, #0078d4);
}

.qp-note-input[b-c7vv5nh6tk]::placeholder { color: var(--BEC-colorNeutralForeground3, #a19f9d); }
.qp-note-input:disabled[b-c7vv5nh6tk] { opacity: 0.5; cursor: not-allowed; }

/* Circular send button — identical look to the composer's .action-btn.send-btn (blue, arrow-up). */
.qp-note-send[b-c7vv5nh6tk] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: var(--BEC-colorNeutralForegroundOnBrand, #ffffff);
    transition: background 0.15s ease, transform 0.1s ease;
}

.qp-note-send:hover:not(:disabled)[b-c7vv5nh6tk] {
    background: var(--BEC-colorBrandBackgroundHover, #005a9e);
    transform: scale(1.08);
}

.qp-note-send:disabled[b-c7vv5nh6tk] { opacity: 0.35; cursor: not-allowed; }
.qp-note-send i[b-c7vv5nh6tk] { font-size: 12px; }

.qp-close[b-c7vv5nh6tk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    cursor: pointer;
    border-radius: 4px;
    font-size: 13px;
    flex-shrink: 0;
    transition: color 0.12s ease, background 0.12s ease;
}

.qp-close:hover:not(:disabled)[b-c7vv5nh6tk] {
    color: var(--BEC-colorNeutralForeground1, #242424);
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

.qp-close:disabled[b-c7vv5nh6tk] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Options List ===== */
.qp-options[b-c7vv5nh6tk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
}

/* ===== Individual Option Row ===== */
.qp-option[b-c7vv5nh6tk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    border-radius: 8px;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
    transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.qp-option:hover:not(:disabled)[b-c7vv5nh6tk] {
    border-color: var(--BEC-colorNeutralForeground1, #1a1a1a);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
}

.qp-option:disabled[b-c7vv5nh6tk] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary action (Allow / Approve = option 0) — filled blue, matching the composer's send button. */
.qp-option.qp-option-primary[b-c7vv5nh6tk] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    border-color: var(--BEC-colorBrandBackground, #0078d4);
    color: var(--BEC-colorNeutralForegroundOnBrand, #ffffff);
}

.qp-option.qp-option-primary:hover:not(:disabled)[b-c7vv5nh6tk] {
    background: var(--BEC-colorBrandBackgroundHover, #005a9e);
    border-color: var(--BEC-colorBrandBackgroundHover, #005a9e);
}

.qp-option-primary .qp-option-number[b-c7vv5nh6tk] { background: rgba(255, 255, 255, 0.25); color: #ffffff; }
.qp-option-primary .qp-option-label[b-c7vv5nh6tk] { color: #ffffff; }
.qp-option-primary .qp-option-desc[b-c7vv5nh6tk] { color: rgba(255, 255, 255, 0.85); }

/* ===== Selected option — blue accent (matches the composer) ===== */
.qp-option.qp-selected[b-c7vv5nh6tk] {
    border-color: var(--BEC-colorBrandBackground, #0078d4);
    background: #f3f9fd;
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground, #0078d4);
}

.qp-option.qp-selected:hover:not(:disabled)[b-c7vv5nh6tk] {
    border-color: var(--BEC-colorBrandBackgroundHover, #005a9e);
    background: #eaf4fc;
}

/* Primary button keeps its filled-blue look while momentarily selected (pre-submit). */
.qp-option.qp-option-primary.qp-selected[b-c7vv5nh6tk] {
    background: var(--BEC-colorBrandBackgroundHover, #005a9e);
    border-color: var(--BEC-colorBrandBackgroundHover, #005a9e);
    color: #ffffff;
}

/* ===== Option Number Badge ===== */
.qp-option-number[b-c7vv5nh6tk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    background: var(--BEC-colorNeutralBackground4, #edebe9);
    border: none;
    border-radius: 3px;
    flex-shrink: 0;
    color: var(--BEC-colorNeutralForeground1, #323130);
}

.qp-selected .qp-option-number[b-c7vv5nh6tk] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: #ffffff;
}

/* ===== Option Content (label + description) ===== */
.qp-option-content[b-c7vv5nh6tk] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.qp-option-label[b-c7vv5nh6tk] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    white-space: nowrap;
}

.qp-option-desc[b-c7vv5nh6tk] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightRegular, 400);
    color: var(--BEC-colorNeutralForeground3, #8a8886);
    margin-left: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qp-selected .qp-option-desc[b-c7vv5nh6tk] {
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

/* ===== Checkmark on selected ===== */
.qp-option-check[b-c7vv5nh6tk] {
    font-size: 14px;
    flex-shrink: 0;
    margin-left: auto;
}

/* ===== Custom answer label (italic to distinguish) ===== */
.qp-custom-label[b-c7vv5nh6tk] {
    font-weight: var(--BEC-fontWeightRegular, 400);
    font-style: italic;
    opacity: 0.6;
}

.qp-selected .qp-custom-label[b-c7vv5nh6tk] {
    opacity: 1;
}

/* ===== Custom Text Input Area ===== */
.qp-custom-area[b-c7vv5nh6tk] {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px 0 2px;
    animation: qpSlideUp-b-c7vv5nh6tk 0.15s ease-out;
}

.qp-custom-input[b-c7vv5nh6tk] {
    flex: 1;
    padding: 7px 14px;
    font-size: 12.5px;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
    color: var(--BEC-colorNeutralForeground1, #201f1e);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
    border-radius: 18px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qp-custom-input:focus[b-c7vv5nh6tk] {
    border-color: var(--BEC-colorBrandBackground, #0078d4);
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground, #0078d4);
}

.qp-custom-input:disabled[b-c7vv5nh6tk] {
    opacity: 0.5;
}

.qp-custom-input[b-c7vv5nh6tk]::placeholder {
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

/* ===== Custom Send Button ===== */
.qp-custom-send[b-c7vv5nh6tk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 12px;
    color: var(--BEC-colorNeutralForegroundOnBrand, #ffffff);
    background: var(--BEC-colorBrandBackground, #0078d4);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
    flex-shrink: 0;
}

.qp-custom-send:hover:not(:disabled)[b-c7vv5nh6tk] {
    background: var(--BEC-colorBrandBackgroundHover, #005a9e);
    transform: scale(1.08);
}

.qp-custom-send:disabled[b-c7vv5nh6tk] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Focus outline suppression (tabindex for keyboard events) ===== */
.qp-content:focus[b-c7vv5nh6tk] {
    outline: none;
}

/* ===== Structured Input: Question Header ===== */
.qp-question-header[b-c7vv5nh6tk] {
    font-weight: var(--BEC-fontWeightSemibold, 600);
    color: #b45309;
    margin-right: 4px;
    white-space: nowrap;
}

/* ===== Structured Input: Progress Bar ===== */
.qp-progress[b-c7vv5nh6tk] {
    height: 2px;
    background: #f0dcc5;
    overflow: hidden;
    border-radius: 2px;
}

.qp-progress-fill[b-c7vv5nh6tk] {
    height: 100%;
    background: #e8912d;
    transition: width 0.3s ease;
}

/* ===== Structured Input: Back Button ===== */
.qp-back-area[b-c7vv5nh6tk] {
    display: flex;
    padding: 4px 0;
}

.qp-back-button[b-c7vv5nh6tk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
    color: #b45309;
    background: none;
    border: 1px solid #f0dcc5;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.qp-back-button:hover:not(:disabled)[b-c7vv5nh6tk] {
    color: #92400e;
    border-color: #e8912d;
}

.qp-back-button:disabled[b-c7vv5nh6tk] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Submitting Indicator ===== */
.qp-submitting[b-c7vv5nh6tk] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    font-size: 11px;
    color: #b45309;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Views/DashboardLandingView.razor.rz.scp.css */
/* ============================================================================
   DashboardLandingView.razor.css — "Today Brief" hub styles
   ============================================================================
   Design reference: AI-Agent-Testing/my-hub-final.html
   Apple monochromatic. Decorative section dashes. Urgency dot colors.
   ============================================================================ */

/* ─── Container ─── */
.hub-landing[b-27b16uxt6s] {
    display: flex;
    flex-direction: column;
}

/* Inline loader-error banner — when any of the 15 section loaders fails,
   this surfaces the failure instead of leaving the skeleton pulsing forever. */
.hub-loader-banner[b-27b16uxt6s] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 16px 0;
    padding: 10px 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    color: #9a3412;
    font-size: 13px;
}
.hub-loader-banner-icon[b-27b16uxt6s] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f97316;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.hub-loader-banner-body[b-27b16uxt6s] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.hub-loader-banner-body strong[b-27b16uxt6s] { color: #7c2d12; font-weight: 600; }
.hub-loader-banner-body span[b-27b16uxt6s]  { color: #9a3412; opacity: 0.9; font-size: 12.5px; }
.hub-loader-banner-retry[b-27b16uxt6s] {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid #f97316;
    color: #9a3412;
    padding: 5px 12px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 12.5px;
}
.hub-loader-banner-retry:hover[b-27b16uxt6s] { background: #fde6cf; }

/* ─── Birthday Banner ─── */
.hub-birthday[b-27b16uxt6s] {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    background: linear-gradient(135deg, #fff9e6 0%, #fff0f5 100%);
    text-align: center;
}

/* ─── Header zone ─── */
.hub-header[b-27b16uxt6s] {
    padding: 24px 24px 20px;
}

.hub-date[b-27b16uxt6s] {
    font-size: 11px;
    font-weight: 500;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.hub-greeting[b-27b16uxt6s] {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #1d1d1f;
    margin: 0 0 5px 0;
}

.hub-identity[b-27b16uxt6s] {
    font-size: 12px;
    color: #86868b;
    line-height: 1.5;
}

/* ─── Sections ─── */
.hub-section[b-27b16uxt6s] {
    padding: 16px 24px;
    position: relative;
}

.hub-section[b-27b16uxt6s]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    width: 28px;
    height: 1px;
    background: #d2d2d7;
}

.hub-section-label[b-27b16uxt6s] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #86868b;
    margin-bottom: 12px;
}

/* ─── Items ─── */
.hub-item[b-27b16uxt6s] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.12s;
}

.hub-item:hover[b-27b16uxt6s] {
    margin: 0 -10px;
    padding: 10px 10px;
    background: #f5f5f7;
}

.hub-dot[b-27b16uxt6s] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.hub-dot.urgent[b-27b16uxt6s] { background: #ff3b30; }
.hub-dot.action[b-27b16uxt6s] { background: #0071e3; }
.hub-dot.info[b-27b16uxt6s] { background: #34c759; }
.hub-dot.neutral[b-27b16uxt6s] { background: #d2d2d7; }

.hub-item-text[b-27b16uxt6s] {
    flex: 1;
    font-size: 13px;
    color: #333336;
    line-height: 1.4;
}

.hub-item-text strong[b-27b16uxt6s] { font-weight: 600; }

.hub-item-meta[b-27b16uxt6s] {
    font-size: 11px;
    color: #86868b;
    margin-top: 2px;
}

/* ─── All-clear state ─── */
.hub-all-clear[b-27b16uxt6s] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.hub-all-clear-icon[b-27b16uxt6s] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hub-all-clear-icon[b-27b16uxt6s]::after {
    content: '\2713';
    font-size: 12px;
    font-weight: 700;
    color: #34c759;
}

.hub-all-clear-text[b-27b16uxt6s] {
    font-size: 13px;
    color: #6e6e73;
}

/* ─── Empty state ─── */
.hub-empty[b-27b16uxt6s] {
    font-size: 12px;
    color: #86868b;
    font-style: italic;
    padding: 4px 0;
}

/* ─── Loading skeleton ─── */
.hub-skeleton[b-27b16uxt6s] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.hub-skeleton-line[b-27b16uxt6s] {
    display: block;
    height: 12px;
    width: 70%;
    background: #f0f0f2;
    border-radius: 4px;
    animation: hub-pulse-b-27b16uxt6s 1.2s ease-in-out infinite;
}

.hub-skeleton-line.short[b-27b16uxt6s] { width: 40%; }

@keyframes hub-pulse-b-27b16uxt6s {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Views/ViewCommandPalette.razor.rz.scp.css */
/* ============================================================================
   ViewCommandPalette.razor.css — Scoped styles for the command palette
   ============================================================================
   Apple monochromatic. Centered overlay inside the ViewPanel.
   ============================================================================ */

.view-palette-backdrop[b-eq74p8sh3a] {
    position: absolute;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.04);
}

.view-palette[b-eq74p8sh3a] {
    position: absolute;
    top: 64px;
    left: 20px;
    right: 20px;
    z-index: 201;
    background: #fff;
    border: 1px solid var(--BEC-stroke, #e0e0e0);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.view-palette-input[b-eq74p8sh3a] {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-bottom: 1px solid var(--BEC-stroke, #e0e0e0);
    font-size: 14px;
    font-family: inherit;
    color: var(--BEC-dark, #1a1a1a);
    background: transparent;
    outline: none;
}

.view-palette-input[b-eq74p8sh3a]::placeholder {
    color: var(--BEC-light, #999);
}

.view-palette-list[b-eq74p8sh3a] {
    max-height: 240px;
    overflow-y: auto;
}

.view-palette-item[b-eq74p8sh3a] {
    display: block;
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    font-size: 13px;
    font-family: inherit;
    color: var(--BEC-dark, #1a1a1a);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 100ms ease;
}

.view-palette-item:hover[b-eq74p8sh3a],
.view-palette-item--active[b-eq74p8sh3a] {
    background: var(--BEC-surface, #f5f5f7);
}

.view-palette-empty[b-eq74p8sh3a] {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--BEC-light, #999);
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Views/ViewPanel.razor.rz.scp.css */
/* ============================================================================
   ViewPanel.razor.css — Scoped styles for the View Panel overlay
   ============================================================================
   Apple monochromatic design. Fixed 380px. Overlay with left-edge shadow.
   ============================================================================ */

.view-panel[b-92e81k8x5u] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 520px;
    z-index: 100;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 150ms ease-in;
    will-change: transform;
}

.view-panel--open[b-92e81k8x5u] {
    transform: translateX(0);
    transition: transform 200ms ease-out;
}

/* ----- Header ----- */

.view-panel-header[b-92e81k8x5u] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--BEC-stroke, #e0e0e0);
    min-height: 40px;
}

.view-panel-title[b-92e81k8x5u] {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--BEC-dark, #1a1a1a);
    flex: 1;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: default;
    font-family: inherit;
}

.view-panel-title--clickable[b-92e81k8x5u] {
    cursor: pointer;
    transition: opacity 150ms ease;
}

.view-panel-title--clickable:hover[b-92e81k8x5u] {
    opacity: 0.6;
}

.view-panel-back[b-92e81k8x5u] {
    background: none;
    border: none;
    padding: 0 4px;
    font-size: 22px;
    line-height: 1;
    color: var(--BEC-mid, #555);
    cursor: pointer;
    transition: opacity 150ms ease;
}

.view-panel-back:hover[b-92e81k8x5u] {
    opacity: 0.6;
}

.view-panel-close[b-92e81k8x5u] {
    background: none;
    border: none;
    padding: 0 4px;
    font-size: 20px;
    line-height: 1;
    color: var(--BEC-light, #999);
    cursor: pointer;
    margin-left: auto;
    transition: opacity 150ms ease;
}

.view-panel-close:hover[b-92e81k8x5u] {
    opacity: 0.6;
}

/* ----- Content ----- */

.view-panel-content[b-92e81k8x5u] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Workspace/PeoplePicker.razor.rz.scp.css */
/* =============================================================================
   PeoplePicker.razor.css — Autocomplete User Search Component
   ============================================================================= */

.people-picker[b-6hwrthvcc3] {
    position: relative;
    width: 100%;
}

.people-picker-input-wrapper[b-6hwrthvcc3] {
    position: relative;
}

.people-picker-selected[b-6hwrthvcc3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--BEC-colorBrandStroke1, #0f6cbd);
    border-radius: 4px;
    background: var(--BEC-colorBrandBackground2, #ebf3fc);
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.people-picker-selected-name[b-6hwrthvcc3] {
    flex: 1;
    font-weight: 500;
}

.people-picker-clear[b-6hwrthvcc3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--BEC-colorNeutralForeground3, #999);
    cursor: pointer;
    font-size: 10px;
}

.people-picker-clear:hover[b-6hwrthvcc3] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.people-picker-dropdown[b-6hwrthvcc3] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: var(--BEC-colorNeutralBackground1, #fff);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 100;
}

.people-picker-item[b-6hwrthvcc3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
}

.people-picker-item:hover[b-6hwrthvcc3] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

.people-picker-item-main[b-6hwrthvcc3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.people-picker-name[b-6hwrthvcc3] {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.people-picker-dept[b-6hwrthvcc3] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #999);
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--BEC-colorNeutralBackground3, #f0f0f0);
}

.people-picker-email[b-6hwrthvcc3] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #999);
}

.people-picker-loading[b-6hwrthvcc3] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 12px;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Workspace/WorkspaceContextMenu.razor.rz.scp.css */
/* =============================================================================
   WorkspaceContextMenu.razor.css — Right-click Context Menu (Apple-inspired)
   ============================================================================= */

.ws-ctx-backdrop[b-wgf0oqbzgu] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.ws-ctx-menu[b-wgf0oqbzgu] {
    position: fixed;
    z-index: 1000;
    min-width: 180px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: none;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
    padding: 4px;
}

.ws-ctx-item[b-wgf0oqbzgu] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 13px;
    color: #1d1d1f;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
}

.ws-ctx-item:hover[b-wgf0oqbzgu] {
    background: rgba(0, 0, 0, 0.04);
}

.ws-ctx-item i[b-wgf0oqbzgu] {
    width: 16px;
    text-align: center;
    font-size: 13px;
    color: #86868b;
}

.ws-ctx-danger[b-wgf0oqbzgu] {
    color: #ff453a;
}

.ws-ctx-danger i[b-wgf0oqbzgu] {
    color: #ff453a;
}

.ws-ctx-divider[b-wgf0oqbzgu] {
    height: 0.5px;
    margin: 4px;
    background: rgba(0, 0, 0, 0.06);
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Workspace/WorkspaceFileList.razor.rz.scp.css */
/* =============================================================================
   WorkspaceFileList.razor.css — File list (Apple-inspired, single-column)
   Name + inline meta (type · size · date) beneath file name
   ============================================================================= */

.ws-files[b-o0z3ch2ymr] {
    width: 260px;
    min-width: 260px;
    border-right: 0.5px solid rgba(0, 0, 0, 0.06);
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease, min-width 0.2s ease, opacity 0.2s ease;
}

/* ===== Body ===== */
.ws-fl-body[b-o0z3ch2ymr] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ===== File Row ===== */
.ws-fl-row[b-o0z3ch2ymr] {
    display: flex;
    padding: 8px 12px;
    align-items: flex-start;
    cursor: pointer;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.04);
    transition: background 0.15s;
}

.ws-fl-row:hover[b-o0z3ch2ymr] {
    background: rgba(0, 0, 0, 0.02);
}

.ws-fl-row.selected[b-o0z3ch2ymr] {
    background: rgba(0, 113, 227, 0.06);
}

/* ===== Name Column ===== */
.ws-fl-col-name[b-o0z3ch2ymr] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.ws-fl-file-icon[b-o0z3ch2ymr] {
    font-size: 15px;
    color: #86868b;
    flex-shrink: 0;
    margin-top: 1px;
}

.ws-fl-name-block[b-o0z3ch2ymr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.ws-fl-filename[b-o0z3ch2ymr] {
    font-size: 13px;
    font-weight: 500;
    color: #1d1d1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ws-fl-meta[b-o0z3ch2ymr] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Old chip/share/export classes removed:
   - .ws-fl-tag / .ws-fl-tag-ai / .ws-fl-tag-upload  → replaced by .ws-fl-chip-* in §B1
   - .ws-fl-share-badge                                → merged into .ws-fl-meta in §43
   - .ws-fl-export-chip / .ws-fl-export-chip:hover     → exports render in preview now
*/

.ws-fl-shared-by[b-o0z3ch2ymr] {
    font-size: 11px;
    color: #aeaeb2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Inline detail (type · size · date in meta row) ===== */
.ws-fl-inline-detail[b-o0z3ch2ymr] {
    font-size: 10px;
    color: #aeaeb2;
    white-space: nowrap;
}

.ws-fl-meta > .ws-fl-type-lbl[b-o0z3ch2ymr] {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Dot separators between inline meta items */
.ws-fl-meta > .ws-fl-type-lbl[b-o0z3ch2ymr]::before,
.ws-fl-meta > .ws-fl-inline-detail[b-o0z3ch2ymr]::before {
    content: "\00b7";
    margin-right: 4px;
    color: #c7c7cc;
}

/* Old "shared section divider" classes removed (.ws-fl-divider*, .ws-fl-shared,
   .ws-fl-chevron) — date-group headers now use .ws-fl-date-label (§B3/§43). */

/* ===== Empty State ===== */
.ws-fl-empty[b-o0z3ch2ymr] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 8px;
    color: var(--BEC-colorNeutralForeground3, #999);
    font-size: 12px;
}

/* ===== Delete Dialog ===== */
.ws-fl-delete-backdrop[b-o0z3ch2ymr] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws-fl-delete-dialog[b-o0z3ch2ymr] {
    background: var(--BEC-colorNeutralBackground1, #fff);
    border-radius: 8px;
    padding: 16px 20px;
    min-width: 280px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.ws-fl-delete-header[b-o0z3ch2ymr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-colorStatusDangerForeground1, #c4314b);
    margin-bottom: 8px;
}

.ws-fl-delete-msg[b-o0z3ch2ymr] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 0 0 14px;
}

.ws-fl-delete-actions[b-o0z3ch2ymr] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ws-fl-delete-cancel[b-o0z3ch2ymr],
.ws-fl-delete-confirm[b-o0z3ch2ymr] {
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
}

.ws-fl-delete-cancel[b-o0z3ch2ymr] {
    background: var(--BEC-colorNeutralBackground1, #fff);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.ws-fl-delete-confirm[b-o0z3ch2ymr] {
    background: var(--BEC-colorStatusDangerBackground1, #c4314b);
    color: #fff;
    border-color: transparent;
}

/* ===== Rename Overlay ===== */
.ws-fl-rename-overlay[b-o0z3ch2ymr] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws-fl-rename-box[b-o0z3ch2ymr] {
    background: var(--BEC-colorNeutralBackground1, #fff);
    border-radius: 6px;
    padding: 12px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    min-width: 240px;
}

.ws-fl-rename-input[b-o0z3ch2ymr] {
    width: 100%;
    border: 1px solid var(--BEC-colorBrandForeground1, #0078d4);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 13px;
    outline: none;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* ===== Planned Artifact Skeleton ===== */
.ws-fl-skeleton[b-o0z3ch2ymr] {
    opacity: 0.55;
    pointer-events: none;
}

.ws-fl-shimmer[b-o0z3ch2ymr] {
    background: linear-gradient(
        90deg,
        transparent 30%,
        rgba(0, 120, 212, 0.08) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    animation: ws-shimmer-b-o0z3ch2ymr 1.8s ease-in-out infinite;
    border-radius: 3px;
}

@keyframes ws-shimmer-b-o0z3ch2ymr {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ws-fl-shimmer[b-o0z3ch2ymr] {
        animation: none;
        background: rgba(0, 120, 212, 0.06);
    }
}

/* ============================================================================
   v4 — Compact row redesign (B3)
   ─ Single-line ~28px rows, no file-type icons, source-type chip, date-grouped.
   ============================================================================ */

.ws-fl-date-label[b-o0z3ch2ymr] {
    font-size: .58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #a19f9d;
    padding: 12px 14px 4px;
}

/* §43: Two-line file row. Filename top, plain-text meta (Source · Date · Type · Size) below. */
.ws-fl-row[b-o0z3ch2ymr] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 10px;
    margin: 0 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s, box-shadow .12s;
    position: relative;
    overflow: hidden;
}
.ws-fl-row:hover[b-o0z3ch2ymr] { background: #f3f2f1; }

/* §42: selected = subtle elevation, no left bar + no blue background. The row
   "pops" off the list using a soft shadow ring instead of a saturated fill. */
.ws-fl-row.selected[b-o0z3ch2ymr] {
    background: #ffffff;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 1;
}
.ws-fl-row.selected[b-o0z3ch2ymr]::before {
    content: none;
}

/* §43: Inner stack — filename above meta. flex:1 so it occupies all space
   except the ellipsis button on the right. min-width:0 enables ellipsis. */
.ws-fl-row-body[b-o0z3ch2ymr] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ws-fl-row-body .ws-fl-filename[b-o0z3ch2ymr] {
    font-size: 13px;
    font-weight: 500;
    color: #1d1d1f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

/* UPLOAD-A2+A3 (2026-05-28, Brain): extraction-state badge. Sits inline next
   to the filename so it's visible without taking another row of vertical space.
   Two variants — in-flight (blue whisper + spin) and failed (red whisper +
   warning glyph). Reduced-motion respected. Hidden completely when extraction
   is Ready or NotRequired so the row reads clean for the 99% case. */
.ws-fl-extraction-badge[b-o0z3ch2ymr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 1px 7px 1px 6px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1px;
    border-radius: 999px;
    border: 1px solid transparent;
    vertical-align: 1px;
    line-height: 1.4;
    white-space: nowrap;
}

.ws-fl-extraction-badge i[b-o0z3ch2ymr] {
    font-size: 9px;
}

.ws-fl-extraction-in-flight[b-o0z3ch2ymr] {
    background: rgba(0, 113, 227, 0.08);
    border-color: rgba(0, 113, 227, 0.20);
    color: #0561c2;
}

.ws-fl-extraction-failed[b-o0z3ch2ymr] {
    background: rgba(255, 59, 48, 0.08);
    border-color: rgba(255, 59, 48, 0.28);
    color: #8b1c20;
}

@media (prefers-reduced-motion: reduce) {
    .ws-fl-extraction-in-flight i[b-o0z3ch2ymr] {
        animation: none;
    }
}

/* §43: Plain-text meta line — no backgrounds, no pills, no icons. */
.ws-fl-meta[b-o0z3ch2ymr] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: #86868b;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.2;
}

.ws-fl-meta-item[b-o0z3ch2ymr] {
    color: #86868b;
}

.ws-fl-meta-sep[b-o0z3ch2ymr] {
    color: #c7c7cc;
    flex-shrink: 0;
}

/* Source-type chip — Agent / Mine / Export */
.ws-fl-chip[b-o0z3ch2ymr] {
    font-size: .54rem;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 1px 5px;
    border-radius: 4px;
    flex-shrink: 0;
    text-transform: uppercase;
    line-height: 1.4;
}
.ws-fl-chip-agent[b-o0z3ch2ymr]  { background: #dbeafe; color: #1e40af; }
.ws-fl-chip-mine[b-o0z3ch2ymr]   { background: #ecfccb; color: #4d7c0f; }
.ws-fl-chip-export[b-o0z3ch2ymr] { background: #f3f4f6; color: #6e6e73; }
.ws-fl-chip-none[b-o0z3ch2ymr]   { display: none; }

.ws-fl-filename[b-o0z3ch2ymr] {
    flex: 1;
    font-size: .76rem;
    color: #1d1d1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.ws-fl-time[b-o0z3ch2ymr] {
    font-size: .62rem;
    color: #a19f9d;
    flex-shrink: 0;
    white-space: nowrap;
}
.ws-fl-row.selected .ws-fl-time[b-o0z3ch2ymr] { color: #6e6e73; }

.ws-fl-shared-by[b-o0z3ch2ymr] {
    font-size: .62rem;
    color: #6e6e73;
    flex-shrink: 0;
    white-space: nowrap;
}

.ws-fl-row-ellipsis[b-o0z3ch2ymr] {
    width: 22px; height: 22px;
    border: 0; background: transparent;
    color: #6e6e73;
    border-radius: 5px;
    cursor: pointer;
    font-size: .7rem;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ws-fl-row:hover .ws-fl-row-ellipsis[b-o0z3ch2ymr],
.ws-fl-row.selected .ws-fl-row-ellipsis[b-o0z3ch2ymr] { display: inline-flex; }
.ws-fl-row:hover .ws-fl-time[b-o0z3ch2ymr],
.ws-fl-row:hover .ws-fl-shared-by[b-o0z3ch2ymr],
.ws-fl-row.selected .ws-fl-time[b-o0z3ch2ymr],
.ws-fl-row.selected .ws-fl-shared-by[b-o0z3ch2ymr] { display: none; }
.ws-fl-row-ellipsis:hover[b-o0z3ch2ymr] { background: #fff; color: #1d1d1f; }

/* ===== §39 + §43: Date-group header — same 48px as file rows so Virtualize math stays exact. ===== */
.ws-fl-date-label[b-o0z3ch2ymr] {
    height: 48px;
    box-sizing: border-box;
    padding: 22px 14px 6px;
    /* The padding pushes the YESTERDAY / LAST 7 DAYS label visually to the bottom
       of its 48px slot so it reads like a section divider above the rows below. */
}

/* ===== §38: Full-text search status + result rows ===== */
.ws-fl-search-status[b-o0z3ch2ymr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    color: #6e6e73;
    font-size: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.ws-fl-search-status i[b-o0z3ch2ymr] {
    color: #0071e3;
}

/* §43: Search-hit rows match the new 48px row height so Virtualize math stays exact.
   Two-line layout: filename top, snippet bottom — mirrors the regular row. */
.ws-fl-hit-row[b-o0z3ch2ymr] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 10px;
    margin: 0 6px;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
}

.ws-fl-hit-row:hover[b-o0z3ch2ymr] { background: #f3f2f1; }
.ws-fl-hit-row.selected[b-o0z3ch2ymr] { background: #e8f4fd; }

.ws-fl-hit-body[b-o0z3ch2ymr] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.ws-fl-hit-body .ws-fl-filename[b-o0z3ch2ymr] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
}

.ws-fl-hit-snippet[b-o0z3ch2ymr] {
    color: #6e6e73;
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.ws-fl-chip-hit[b-o0z3ch2ymr] {
    background: #fef3c7;
    color: #92400e;
}

/* ===== W-004: Infinite scroll sentinel + loading indicator ===== */
.ws-fl-sentinel[b-o0z3ch2ymr] {
    height: 1px;
    width: 100%;
}

.ws-fl-load-more[b-o0z3ch2ymr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 8px;
    color: #6e6e73;
    font-size: 12px;
}

.ws-fl-load-spinner[b-o0z3ch2ymr] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-top-color: #0071e3;
    border-radius: 50%;
    animation: ws-spin-b-o0z3ch2ymr 0.6s linear infinite;
}

@keyframes ws-spin-b-o0z3ch2ymr {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Workspace/WorkspaceFilePreview.razor.rz.scp.css */
/* =============================================================================
   WorkspaceFilePreview.razor.css — File Preview Pane (Apple-inspired)
   ============================================================================= */

.ws-preview[b-x7vts16pwq] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ws-preview-header[b-x7vts16pwq] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    background: #fafafa;
    min-height: 24px;
}

.ws-preview-hdr-icon[b-x7vts16pwq] {
    font-size: 12px;
    color: #86868b;
    flex-shrink: 0;
}

.ws-preview-title[b-x7vts16pwq] {
    font-size: 12px;
    font-weight: 600;
    color: #1d1d1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}


/* ===== Mode Pills ===== */
.ws-preview-pills[b-x7vts16pwq] {
    display: flex;
    gap: 2px;
    margin: 0 auto;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    padding: 2px;
}

.ws-preview-pill[b-x7vts16pwq] {
    padding: 4px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #86868b;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.ws-preview-pill:hover[b-x7vts16pwq] {
    color: #1d1d1f;
}

.ws-preview-pill.active[b-x7vts16pwq] {
    background: #fff;
    color: #1d1d1f;
    box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.08);
}

/* ===== Focus Button ===== */
.ws-preview-hdr-right[b-x7vts16pwq] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.ws-preview-save-status[b-x7vts16pwq] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: #34c759;
    padding: 0 4px;
    white-space: nowrap;
}

.ws-preview-save-status.error[b-x7vts16pwq] {
    color: #ff453a;
}

.ws-preview-save-btn[b-x7vts16pwq] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 113, 227, 0.08);
    color: #0071e3;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.ws-preview-save-btn:hover[b-x7vts16pwq] {
    background: rgba(0, 113, 227, 0.15);
}

.ws-preview-save-btn:disabled[b-x7vts16pwq] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* §44 / Gap A: Download button in the preview header — visually a secondary
   action (subtle gray pill, no fill). Sits next to Save when present, alone
   for read-only files. Same height + radius as Save so the row stays even. */
.ws-preview-download-btn[b-x7vts16pwq] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    background: #ffffff;
    color: #1d1d1f;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.ws-preview-download-btn:hover[b-x7vts16pwq] {
    background: #f5f5f7;
    border-color: rgba(0, 0, 0, 0.16);
    color: #0071e3;
}

.ws-preview-download-btn i[b-x7vts16pwq] {
    font-size: 11px;
}

/* B15-A: In-flight download chip — replaces the Download button while a PDF
   export is rendering server-side (30-60 s) and bytes stream back. Apple-class
   spec:
     · Same height + radius as the button so the header row doesn't reflow.
     · Subtle navy tint + 1px hairline border — feels alive, not loud.
     · Spinner first, status text middle, thin progress bar at the bottom.
     · Status text reads "Preparing PDF · 14s" / "Downloading · 47%" / "Saved".
   The chip is non-interactive while active (no click target) — the user can't
   start a second download until the first finishes or fails. */
.ws-preview-download-progress[b-x7vts16pwq] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    background: rgba(0, 113, 227, 0.06);
    color: #1d1d1f;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    min-width: 180px;
    max-width: 280px;
    position: relative;
    overflow: hidden;
    cursor: default;
    user-select: none;
}

.ws-preview-download-progress.is-complete[b-x7vts16pwq] {
    background: rgba(52, 199, 89, 0.10);
    border-color: rgba(52, 199, 89, 0.30);
    color: #1f7a34;
}

.ws-preview-download-progress.is-failed[b-x7vts16pwq] {
    background: rgba(255, 59, 48, 0.08);
    border-color: rgba(255, 59, 48, 0.30);
    color: #b3261e;
}

.ws-preview-download-progress .ws-dl-icon[b-x7vts16pwq] {
    font-size: 12px;
    flex-shrink: 0;
}

.ws-preview-download-progress .ws-dl-status[b-x7vts16pwq] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

/* Thin progress bar pinned to the bottom hairline of the chip. Determinate:
   fill width tracks the real percent. Indeterminate: a moving sheen sweeps
   left→right at ~1.4s cadence so the user knows we're still alive. */
.ws-preview-download-progress .ws-dl-bar[b-x7vts16pwq] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.ws-preview-download-progress .ws-dl-bar-fill[b-x7vts16pwq] {
    display: block;
    height: 100%;
    background: #0071e3;
    transition: width 0.18s ease-out;
}

.ws-preview-download-progress .ws-dl-bar.indeterminate .ws-dl-bar-fill[b-x7vts16pwq] {
    width: 40% !important;
    animation: ws-dl-sweep-b-x7vts16pwq 1.4s ease-in-out infinite;
}

@keyframes ws-dl-sweep-b-x7vts16pwq {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(260%); }
}

/* Prefer reduced motion — kill the sweep, leave the spinner + status text
   so the indicator still conveys progress without animation. */
@media (prefers-reduced-motion: reduce) {
    .ws-preview-download-progress .ws-dl-bar.indeterminate .ws-dl-bar-fill[b-x7vts16pwq] {
        animation: none;
        width: 100% !important;
        opacity: 0.4;
    }
}

.ws-preview-body[b-x7vts16pwq] {
    flex: 1;
    overflow: auto;
    min-height: 0;
    background: #fff;
    container-type: inline-size;
    container-name: preview-body;
    /* Breathing room so previews (esp. the spreadsheet's sheet-tab footer) aren't jammed flush
       against the window's bottom edge. Applied on this NON-Syncfusion scroll container so the
       spreadsheet's ResizeObserver re-fits the grid into the smaller box. (Ahmed 2026-06-11) */
    padding-bottom: 10px;
}

/* ── Base Content Styling ────────────────────────────────────────────── */
.ws-preview-content[b-x7vts16pwq] {
    margin: 0;
    background: #fff;
    font-size: 14px;
    line-height: 1.6;
    color: #1d1d1f;
    width: 100%;
    height: 100%;
}

/* B14-FIX4 (2026-05-28, Ahmed): the preview pane was forcing white bg
   underneath every artifact, which made the document look like it was
   sitting on a "page" instead of floating on the artifact preview surface.
   Apple-class corporate documents float on a tonal gray surface with the
   white document as a card. Switch the host bg to #f5f5f7 ONLY for BEC
   documents (markdown/code previews keep their existing #fff background). */

/* ── Markdown / Code Preview ─────────────────────────────────────────
   Comfortable reading layout — no A4 simulation, just clean padding.
   ──────────────────────────────────────────────────────────────────── */
/* Code / email / digest previews (not markdown — those go through .bec-document now).
   markdown-preview.css was retired here; this is the only non-bec text container left. */
[b-x7vts16pwq] .ws-preview-content.ws-code-preview {
    padding: 16px;
    max-width: 100%;
    width: 100%;
    height: 100%;
    overflow: auto;
}

/* ── BEC Document Preview — v6 (2026-05-28, Ahmed) ──────────────────
   Agent-generated reports with BecDocumentTemplate wrapper.
   v6 is fluid responsive: NO JS scaling, NO fixed 842px paper width,
   NO card chrome. The doc fills the preview pane edge-to-edge with
   `max-width: 1400px; margin: 0 auto` for natural centering on wide
   panes. All visual treatment lives INSIDE the doc via DocumentCSS
   block components (.cover / .kpi-grid / .pull-quote / .control-panel).
   ──────────────────────────────────────────────────────────────────── */
/* B14-V6 (2026-05-28, Ahmed): NO MORE BOX-INSIDE-BOX.
   The document fills the preview pane edge-to-edge. No tonal surface
   around the doc, no white card around the content, no shadow, no
   rounded corners pretending to be paper. The doc IS the preview.
   Internal section padding (set by DocumentCSS via clamp()) handles
   all breathing room from the pane edges. */
[b-x7vts16pwq] .ws-preview-content.ws-bec-document {
    max-width: 100%;
    width: 100%;
    height: 100%;
    display: block;            /* no flex centering — doc itself owns layout */
    background: #fff;          /* same as the doc — pane and doc are one surface */
    padding: 0;                /* doc fills 100% */
    overflow: auto;            /* scrolling lives on the host, not the doc */
}

/* The .bec-document itself: fluid, max-width 1400px centered, transparent,
   no card chrome whatsoever. All visual treatment lives INSIDE via the
   DocumentCSS v6 component rules (.cover, .kpi-band, .pull-quote, .section,
   .control-band — each owns its own background and borders). */
[b-x7vts16pwq] .ws-preview-content.ws-bec-document .bec-document {
    width: 100%;
    max-width: 1400px;
    min-width: 0;
    background: transparent;   /* NO card */
    box-shadow: none;          /* NO shadow */
    border-radius: 0;          /* NO rounded edges */
    border: 0;
    margin: 0 auto;            /* centered on wide screens, full-width on narrow */
    box-sizing: border-box;
    overflow: visible;
    /* No transform: scale() — v6 is responsive, not zoom-to-fit-paper. */
}

/* Certificate uses landscape orientation with explicit height */
[b-x7vts16pwq] .ws-preview-content.ws-bec-document .bec-document.page-certificate {
    min-height: 595px;
    padding: 40px 60px;
}

/* ── Container-Query Responsive Breakpoints ──────────────────────────
   Adapts to actual panel width, not viewport width.
   ──────────────────────────────────────────────────────────────────── */

/* B14-V6 (2026-05-28): no host padding at ANY panel width. The doc owns
   its own internal padding via DocumentCSS clamp() rules. */
@container preview-body (max-width: 520px) {
    [b-x7vts16pwq] .ws-preview-content.ws-bec-document { padding: 0; }
}
@container preview-body (min-width: 800px) {
    [b-x7vts16pwq] .ws-preview-content.ws-bec-document { padding: 0; }
}

.ws-preview-loading[b-x7vts16pwq],
.ws-preview-empty[b-x7vts16pwq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    color: #aeaeb2;
    font-size: 14px;
}

/* ── §26: Skeleton loader — layout-aware shimmer that hints at final content ── */
.ws-preview-skeleton[b-x7vts16pwq] {
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    overflow: hidden;
}

.ws-skeleton-line[b-x7vts16pwq],
.ws-skeleton-block[b-x7vts16pwq] {
    background: linear-gradient(90deg,
        rgba(0,0,0,0.04) 25%,
        rgba(0,0,0,0.08) 50%,
        rgba(0,0,0,0.04) 75%);
    background-size: 200% 100%;
    animation: wsSkeletonShimmer-b-x7vts16pwq 1.4s ease-in-out infinite;
    border-radius: 6px;
}

.ws-skeleton-line[b-x7vts16pwq] { height: 14px; width: 100%; }
.ws-skeleton-title[b-x7vts16pwq] { height: 26px; width: 55%; margin-bottom: 4px; }
.ws-skeleton-meta[b-x7vts16pwq] { height: 12px; width: 35%; opacity: 0.7; margin-bottom: 18px; }
.ws-skeleton-block[b-x7vts16pwq] { height: 180px; width: 100%; margin: 6px 0 12px; }
.ws-skeleton-short[b-x7vts16pwq] { width: 70%; }

@keyframes wsSkeletonShimmer-b-x7vts16pwq {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ws-visually-hidden[b-x7vts16pwq] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .ws-skeleton-line[b-x7vts16pwq],
    .ws-skeleton-block[b-x7vts16pwq] { animation: none; opacity: 0.7; }
}

/* ── Syncfusion Component Container ─────────────────────────────────── */
.ws-preview-component[b-x7vts16pwq] {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* ── Image Preview ───────────────────────────────────────────────────── */
.ws-image-preview[b-x7vts16pwq] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 16px;
}

.ws-image-preview img[b-x7vts16pwq] {
    max-width: 100%;
    max-height: 80vh;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
}

/* ── Error Preview ───────────────────────────────────────────────────── */
[b-x7vts16pwq] .ws-preview-error {
    color: #ff453a;
    padding: 16px;
    font-size: 13px;
}

/* ── Syncfusion Spreadsheet — Compact Overrides ──────────────────────
   The workspace preview panel is narrow (~560px). Reduce padding on
   the ribbon, sheet-tab bar, and formula bar so content is king.
   ──────────────────────────────────────────────────────────────────── */

/* --- Hide the Excel RIBBON (File/Home/Insert tabs + icon toolbar) — keep ONLY the formula bar
       + the grid, so the spreadsheet fits the artifact panel. Cells stay fully interactive
       (AllowEditing defaults true). (Ahmed 2026-06-11) --- */
[b-x7vts16pwq] .ws-spreadsheet-compact .e-ribbon,
[b-x7vts16pwq] .ws-spreadsheet-compact .e-spreadsheet-ribbon,
[b-x7vts16pwq] .ws-spreadsheet-compact .e-ribbon-container {
    display: none !important;
}

/* --- Sheet Tab Bar (bottom) — reduce height --- */
[b-x7vts16pwq] .ws-spreadsheet-compact .e-spreadsheet-footer {
    height: 26px !important;
    min-height: 26px !important;
}

[b-x7vts16pwq] .ws-spreadsheet-compact .e-sheet-tab-panel,
[b-x7vts16pwq] .ws-spreadsheet-compact .e-sheet-tab {
    height: 26px !important;
    min-height: 26px !important;
}

[b-x7vts16pwq] .ws-spreadsheet-compact .e-sheet-tab .e-tab-header {
    height: 26px !important;
}

[b-x7vts16pwq] .ws-spreadsheet-compact .e-sheet-tab .e-tab-header .e-toolbar-item {
    height: 24px !important;
    padding: 0 6px !important;
}

[b-x7vts16pwq] .ws-spreadsheet-compact .e-sheet-tab .e-tab-header .e-toolbar-item .e-tab-text {
    font-size: 11px !important;
    line-height: 24px !important;
}

[b-x7vts16pwq] .ws-spreadsheet-compact .e-add-sheet-tab,
[b-x7vts16pwq] .ws-spreadsheet-compact .e-sheets-list {
    height: 24px !important;
    width: 24px !important;
    min-height: 24px !important;
    font-size: 11px !important;
}

/* Sheet tab scroll/nav buttons */
[b-x7vts16pwq] .ws-spreadsheet-compact .e-sheet-tab-panel .e-scroll-nav {
    height: 24px !important;
}

/* NOTE (Ahmed 2026-06-11): the spreadsheet fits the panel DYNAMICALLY — no CSS height math /
   flex hacks here. `becSpreadsheetAutoFit` (wwwroot/js/preview-highlight.js) attaches a
   ResizeObserver that tells the Syncfusion Spreadsheet to re-fit itself whenever the artifact
   panel changes size, so the sheet-tab footer is always fully visible. */

/* (Ribbon-compact rules removed 2026-06-11 — the ribbon is now hidden entirely; see the
    "Hide the Excel RIBBON" + "FOOTER FIT" rules above. Nothing to style on a display:none element.) */

/* --- Horizontal scrollbar at bottom — thinner --- */
[b-x7vts16pwq] .ws-spreadsheet-compact .e-scroller .e-hscroll-bar,
[b-x7vts16pwq] .ws-spreadsheet-compact .e-scrollbar.e-horizontal {
    height: 10px !important;
}

/* =============================================================================
   Spreadsheet Error Fallback — graceful degradation for corrupt/unsupported files
   ============================================================================= */

.ws-preview-error-fallback[b-x7vts16pwq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    padding: 32px;
    text-align: center;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
}

.ws-preview-error-icon[b-x7vts16pwq] {
    font-size: 48px;
    color: #86868b;
    opacity: 0.6;
}

.ws-preview-error-text[b-x7vts16pwq] {
    max-width: 320px;
}

.ws-preview-error-text strong[b-x7vts16pwq] {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 6px;
}

.ws-preview-error-text p[b-x7vts16pwq] {
    font-size: 13px;
    color: #86868b;
    line-height: 1.4;
    margin: 0;
}

.ws-preview-retry-btn[b-x7vts16pwq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #0066cc;
    background: rgba(0, 102, 204, 0.08);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ws-preview-retry-btn:hover[b-x7vts16pwq] {
    background: rgba(0, 102, 204, 0.14);
}

.ws-preview-retry-btn i[b-x7vts16pwq] {
    font-size: 12px;
}

/* ===== New-Section Flash (artifact streaming) ===== */
@keyframes bec-section-flash-b-x7vts16pwq {
    0%   { background-color: rgba(0, 113, 227, 0.12); }
    100% { background-color: transparent; }
}

[b-x7vts16pwq] .bec-new-section-flash {
    animation: bec-section-flash-b-x7vts16pwq 0.8s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    [b-x7vts16pwq] .bec-new-section-flash {
        animation: none;
    }
}

/* ===== Narrative Anchor Flash (Phase 3.3) ===== */
@keyframes bec-anchor-flash-b-x7vts16pwq {
    0%   { background-color: rgba(59, 130, 246, 0.18); }
    100% { background-color: transparent; }
}

[b-x7vts16pwq] .bec-anchor-flash {
    animation: bec-anchor-flash-b-x7vts16pwq 1.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    [b-x7vts16pwq] .bec-anchor-flash {
        animation: none;
    }
}

/* ============================================================================
   v4 — Preview header chips (B5) + conflict banner (B8)
   ============================================================================ */

/* Clickable v{N} chip — opens the Version drawer */
.ws-preview-version-clickable[b-x7vts16pwq] {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s, color 0.15s;
}
.ws-preview-version-clickable:hover:not(:disabled)[b-x7vts16pwq] {
    background: rgba(0, 0, 0, 0.08);
    color: #1d1d1f;
}
.ws-preview-version-clickable:disabled[b-x7vts16pwq] {
    cursor: default;
    opacity: 0.7;
}
.ws-preview-version-clickable i[b-x7vts16pwq] {
    font-size: 9px;
    line-height: 1;
}

/* "🔗 Shared with N" pill — owner view, click → Manage Shares */
.ws-preview-shared-with[b-x7vts16pwq] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border: 0;
    border-radius: 10px;
    background: rgba(0, 113, 227, 0.08);
    color: #0071e3;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
    transition: background 0.15s;
}
.ws-preview-shared-with:hover[b-x7vts16pwq] { background: rgba(0, 113, 227, 0.16); }
.ws-preview-shared-with i[b-x7vts16pwq] {
    font-size: 10px;
    line-height: 1;
}

/* B8 conflict state — "Edited elsewhere · Refresh" banner */
.ws-preview-save-status.conflict[b-x7vts16pwq] {
    color: #b25e00;
    background: rgba(255, 149, 0, 0.10);
    padding: 2px 8px 2px 8px;
    border-radius: 6px;
    gap: 6px;
}
.ws-preview-conflict-refresh[b-x7vts16pwq] {
    border: 0;
    background: transparent;
    color: #b25e00;
    font-size: 11px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 0 2px;
    font-family: inherit;
}
.ws-preview-conflict-refresh:hover[b-x7vts16pwq] { color: #8a4800; }

/* ============================================================================
   v4 — Two-line preview header: filename top, plain-text meta below
   ============================================================================ */

.ws-preview-header[b-x7vts16pwq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    flex-shrink: 0;
}

/* §41: Compact single-row header — name + meta + pills + actions on ONE line.
   Saves ~32px of vertical space vs. the old two-row layout. Items collapse
   left→right when space runs short (long filename truncates first, meta
   wraps to ellipsis next, pills stay, save button always visible). */
.ws-preview-header-compact[b-x7vts16pwq] {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 6px 14px;
    min-height: 36px;
}

.ws-preview-hdr-name[b-x7vts16pwq] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 80px;
    max-width: 40%;
    overflow: hidden;
}

.ws-preview-header-compact .ws-preview-title[b-x7vts16pwq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-preview-hdr-actions[b-x7vts16pwq] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Meta line — plain text only, muted color, "·" separators, no backgrounds.
   In the compact header it sits inline; in the legacy two-row layout it sits
   under the filename. */
.ws-preview-hdr-meta[b-x7vts16pwq] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    font-size: 11px;
    color: #86868b;
    padding-left: 26px;
    line-height: 1.4;
}

/* §41: in the compact header, meta loses its left indent and clips on overflow. */
.ws-preview-header-compact .ws-preview-hdr-meta[b-x7vts16pwq] {
    padding-left: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.ws-preview-meta-item[b-x7vts16pwq] {
    color: #86868b;
    font-weight: 400;
}

.ws-preview-meta-sep[b-x7vts16pwq] {
    color: #c7c7cc;
    user-select: none;
}

/* v{N} link — looks like text, behaves like a button */
.ws-preview-meta-version[b-x7vts16pwq] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 0;
    background: transparent;
    padding: 0;
    color: #86868b;
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s;
}
.ws-preview-meta-version:hover:not(:disabled)[b-x7vts16pwq] { color: #0071e3; }
.ws-preview-meta-version:disabled[b-x7vts16pwq] { cursor: default; opacity: 0.7; }
.ws-preview-meta-version i[b-x7vts16pwq] {
    font-size: 8px;
    line-height: 1;
}

/* "Shared with N" — text link in meta line */
.ws-preview-meta-shared[b-x7vts16pwq] {
    border: 0;
    background: transparent;
    padding: 0;
    color: #0071e3;
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s;
}
.ws-preview-meta-shared:hover[b-x7vts16pwq] { color: #005bb8; text-decoration: underline; }
.ws-preview-meta-shared-by[b-x7vts16pwq] {
    color: #0071e3;
    font-weight: 500;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Workspace/WorkspacePanel.razor.rz.scp.css */
/* =============================================================================
   WorkspacePanel.razor.css — Apple-Inspired Workspace Panel
   3-column layout: FolderNav | FileList | Preview (flex:1)
   Design: #f5f5f7 bg, #0071e3 accent, subtle borders, generous spacing
   ============================================================================= */

/* ===== Panel Shell ===== */
.workspace-panel[b-32fy5em1ec] {
    display: flex;
    flex-direction: column;
    width: 50%;
    min-width: 420px;
    max-width: 65%;
    height: 100%;
    border-left: 0.5px solid rgba(0, 0, 0, 0.08);
    background: #f5f5f7;
    overflow: hidden;
    flex-shrink: 0;
    container-type: inline-size;
    container-name: workspace-panel;
}

.workspace-fullscreen[b-32fy5em1ec] {
    position: fixed;
    inset: 0;
    /* v7b (2026-06-03): !important overrides the INLINE width/max-width the resize
       bar (workspace-resize.js) writes on the panel. Without it, the inline style
       wins and full-screen stays stuck at the dragged width, breaking the layout.
       On exit the class drops and the inline (resized) width returns. inset:0 +
       100% makes it fill any screen size natively. */
    width: 100% !important;
    max-width: 100% !important;
    z-index: 1000;
    border-left: none;
}

/* ===== Unified Toolbar — Tabs + Actions in one row ===== */
.ws-toolbar[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    background: #f5f5f7;
    min-height: 36px;
}

/* --- Segmented Tab Pill --- */
.ws-tab-pill[b-32fy5em1ec] {
    display: flex;
    gap: 1px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 2px;
    flex-shrink: 0;
}

.ws-tab-pill-btn[b-32fy5em1ec] {
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #86868b;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.ws-tab-pill-btn:hover[b-32fy5em1ec] {
    color: #1d1d1f;
}

.ws-tab-pill-btn.active[b-32fy5em1ec] {
    background: #fff;
    color: #1d1d1f;
    box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.08);
    font-weight: 600;
}

.ws-pill-badge[b-32fy5em1ec] {
    font-size: 10px;
    color: #aeaeb2;
    font-weight: 600;
}

.ws-tab-pill-btn.active .ws-pill-badge[b-32fy5em1ec] {
    color: #0071e3;
}

/* --- Toolbar Actions (right side) --- */
.ws-toolbar-actions[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.ws-tb-icon[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #86868b;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.15s, color 0.15s;
}

.ws-tb-icon:hover[b-32fy5em1ec] {
    background: rgba(0, 0, 0, 0.05);
    color: #1d1d1f;
}

.ws-tb-icon:disabled[b-32fy5em1ec] {
    opacity: 0.3;
    cursor: not-allowed;
}

.ws-tb-upload[b-32fy5em1ec] {
    color: #0071e3;
}

.ws-tb-upload:hover[b-32fy5em1ec] {
    background: rgba(0, 113, 227, 0.1);
    color: #0071e3;
}

.ws-tb-download[b-32fy5em1ec] {
    color: #0071e3;
}

.ws-tb-download:hover[b-32fy5em1ec] {
    background: rgba(0, 113, 227, 0.1);
}

/* ===== Download Progress Bar (reuses upload fill style) ===== */
.ws-download-progress-wrap[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 2px;
}

.ws-download-progress-bar[b-32fy5em1ec] {
    width: 72px !important;
}

.ws-download-progress-label[b-32fy5em1ec] {
    font-size: 10px;
    font-weight: 600;
    color: #0078d4;
    min-width: 26px;
    text-align: right;
}

.ws-tb-sep[b-32fy5em1ec] {
    width: 1px;
    height: 14px;
    background: rgba(0, 0, 0, 0.08);
    margin: 0 3px;
    flex-shrink: 0;
}

/* --- Toolbar Pill Button (prominent toggle buttons) --- */
.ws-tb-pill-btn[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    color: #86868b;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.ws-tb-pill-btn:hover[b-32fy5em1ec] {
    background: rgba(0, 0, 0, 0.08);
    color: #1d1d1f;
}

.ws-tb-pill-btn.active[b-32fy5em1ec] {
    background: rgba(0, 113, 227, 0.12);
    color: #0071e3;
}

.ws-tb-pill-btn i[b-32fy5em1ec] {
    font-size: 12px;
}

.ws-tb-pill-label[b-32fy5em1ec] {
    font-size: 11px;
    font-weight: 500;
}

/* §40 removed the collapsible search bar (.ws-search-bar*) — search is now
   the inline `.ws-tb-search` input in the toolbar. */

/* ===== Sort Dropdown ===== */
.ws-sort-dropdown[b-32fy5em1ec] {
    position: relative;
    background: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
    margin: 0 10px;
    z-index: 50;
    flex-shrink: 0;
    padding: 4px;
    backdrop-filter: blur(20px);
}

.ws-sort-item[b-32fy5em1ec] {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    text-align: left;
    font-size: 13px;
    color: #1d1d1f;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
}

.ws-sort-item:hover[b-32fy5em1ec] {
    background: rgba(0, 0, 0, 0.04);
}

.ws-sort-item.active[b-32fy5em1ec] {
    color: #0071e3;
    font-weight: 600;
}

/* ===== Body: 3-Column Layout ===== */
.ws-body[b-32fy5em1ec] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    background: #fff;
}

.ws-preview-section[b-32fy5em1ec] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ===== Collapsible Panel States ===== */
.ws-body.nav-collapsed[b-32fy5em1ec]  .ws-nav {
    width: 0;
    min-width: 0;
    opacity: 0;
    overflow: hidden;
    border-right: none;
    padding: 0;
}

.ws-body.files-collapsed[b-32fy5em1ec]  .ws-files {
    width: 0;
    min-width: 0;
    opacity: 0;
    overflow: hidden;
    border-right: none;
}

/* ===== Floating Re-open Strip ===== */
.ws-reopen[b-32fy5em1ec] {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border: none;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}

.ws-reopen-btn[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #86868b;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s, color 0.2s;
}

.ws-reopen-btn:hover[b-32fy5em1ec] {
    background: rgba(0, 0, 0, 0.04);
    color: #0071e3;
}

/* ===== Empty Preview ===== */
.ws-empty-preview[b-32fy5em1ec] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 10px;
    color: #aeaeb2;
}

.ws-empty-icon[b-32fy5em1ec] {
    font-size: 36px;
    opacity: 0.3;
}

.ws-empty-text[b-32fy5em1ec] {
    font-size: 14px;
    font-weight: 400;
}

/* ===== Storage Footer (compact inline) ===== */
.ws-stor-inline[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-top: 0.5px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    font-size: 10px;
    color: #aeaeb2;
    background: #f5f5f7;
}

.ws-stor-bar-inline[b-32fy5em1ec] {
    flex: 1;
    height: 2px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 1px;
    overflow: hidden;
    min-width: 0;
}

.ws-stor-fill-inline[b-32fy5em1ec] {
    height: 100%;
    background: #0071e3;
    border-radius: 1px;
    transition: width 0.4s ease;
}

.ws-stor-val-inline[b-32fy5em1ec] {
    white-space: nowrap;
}

/* ===== Toast Notifications ===== */
.ws-toast-stack[b-32fy5em1ec] {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    z-index: 1100;
    max-width: 360px;
}

.ws-toast[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
    animation: ws-toast-in-b-32fy5em1ec 0.3s ease-out;
    font-size: 13px;
    color: #1d1d1f;
}

.ws-toast-info[b-32fy5em1ec] { border-left: 3px solid #0071e3; }
.ws-toast-success[b-32fy5em1ec] { border-left: 3px solid #30d158; }
.ws-toast-warning[b-32fy5em1ec] { border-left: 3px solid #ff9f0a; }
.ws-toast-error[b-32fy5em1ec] { border-left: 3px solid #ff453a; }

.ws-toast-icon[b-32fy5em1ec] {
    color: #0071e3;
    font-size: 15px;
    flex-shrink: 0;
}

.ws-toast-msg[b-32fy5em1ec] { flex: 1; min-width: 0; line-height: 1.5; }

.ws-toast-close[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #aeaeb2;
    cursor: pointer;
    font-size: 11px;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.ws-toast-close:hover[b-32fy5em1ec] {
    background: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
}

@keyframes ws-toast-in-b-32fy5em1ec {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Upload Progress Strip (like chat upload chips) ===== */
.ws-upload-progress-strip[b-32fy5em1ec] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}

/* UPLOAD-A1+A5 (2026-05-28, Brain): chip is now a vertical container so the
   always-visible error band can stack under the original single-line layout.
   The `.ws-upload-chip-row` wraps what used to be the entire chip. */
.ws-upload-chip[b-32fy5em1ec] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    font-size: 12px;
    color: #1d1d1f;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.ws-upload-chip-row[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
}

.ws-upload-chip.complete[b-32fy5em1ec] {
    border-color: #30d158;
    background: #f0fdf4;
}

.ws-upload-chip.error[b-32fy5em1ec] {
    border-color: #ff453a;
    background: #fff5f5;
}

/* UPLOAD-A1+A5 (2026-05-28, Brain): inline error reason — always visible.
   Pair to the chat-side att-card-error-band; same visual language. */
.ws-upload-chip-error-band[b-32fy5em1ec] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 10px 6px;
    border-top: 1px solid rgba(164, 38, 44, 0.18);
    background: rgba(255, 59, 48, 0.06);
    color: #8b1c20;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    word-break: break-word;
}

.ws-upload-chip-error-band i[b-32fy5em1ec] {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 11px;
    color: #a4262c;
}

.ws-upload-chip-name[b-32fy5em1ec] {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-upload-progress-bar[b-32fy5em1ec] {
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: #e1dfdd;
    overflow: hidden;
    flex-shrink: 0;
}

.ws-upload-progress-fill[b-32fy5em1ec] {
    height: 100%;
    border-radius: 2px;
    background: #0078d4;
    transition: width 0.2s ease;
}

.ws-upload-chip-done[b-32fy5em1ec] {
    color: #30d158;
    font-size: 10px;
}

.ws-upload-chip-error[b-32fy5em1ec] {
    color: #ff453a;
    font-size: 10px;
}

/* ===== L1: Empty-State Onboarding Card ===== */
.ws-onboarding[b-32fy5em1ec] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 14px;
    padding: 32px;
    text-align: center;
}

.ws-onboarding-icon[b-32fy5em1ec] {
    font-size: 40px;
    color: #0071e3;
    opacity: 0.6;
}

.ws-onboarding-title[b-32fy5em1ec] {
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
}

.ws-onboarding-desc[b-32fy5em1ec] {
    font-size: 14px;
    color: #86868b;
    margin: 0;
    max-width: 320px;
    line-height: 1.5;
}

.ws-onboarding-prompts[b-32fy5em1ec] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 400px;
}

.ws-onboarding-chip[b-32fy5em1ec] {
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(0, 113, 227, 0.06);
    color: #0071e3;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* ===== Responsive Burger Menu for Narrow Toolbar ===== */
.ws-burger-menu[b-32fy5em1ec] {
    display: none;
    position: relative;
}

.ws-burger-btn[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws-burger-dropdown[b-32fy5em1ec] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 180px;
    padding: 6px 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
    z-index: 1200;
}

.ws-burger-item[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: #1d1d1f;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.ws-burger-item:hover[b-32fy5em1ec] {
    background: rgba(0, 0, 0, 0.04);
}

.ws-burger-item:disabled[b-32fy5em1ec] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ws-burger-item i[b-32fy5em1ec] {
    width: 16px;
    color: #86868b;
    text-align: center;
}

.ws-burger-sep[b-32fy5em1ec] {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 4px 10px;
}

.ws-tb-icons-normal[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ws-tb-close[b-32fy5em1ec] {
    color: #ff453a;
}

.ws-tb-close:hover[b-32fy5em1ec] {
    background: rgba(255, 69, 58, 0.1);
    color: #ff453a;
}

/* When panel is narrow, hide normal icons and show burger */
@container workspace-panel (max-width: 500px) {
    .ws-burger-menu[b-32fy5em1ec] {
        display: block;
    }

    .ws-tb-icons-normal[b-32fy5em1ec] {
        display: none;
    }
}

/* Fallback: Use media query if container queries unsupported */
@media (max-width: 600px) {
    .workspace-panel:not(.workspace-fullscreen) .ws-burger-menu[b-32fy5em1ec] {
        display: block;
    }

    .workspace-panel:not(.workspace-fullscreen) .ws-tb-icons-normal[b-32fy5em1ec] {
        display: none;
    }
}

.ws-onboarding-upload[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 20px;
    border: none;
    border-radius: 20px;
    background: #0071e3;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.ws-onboarding-upload:hover[b-32fy5em1ec] {
    background: #005bb5;
}

.ws-onboarding-types[b-32fy5em1ec] {
    font-size: 10px;
    color: #aeaeb2;
    letter-spacing: 0.3px;
}

/* ===== L2: Keyboard Shortcuts Overlay ===== */
.ws-shortcuts-backdrop[b-32fy5em1ec] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws-shortcuts-dialog[b-32fy5em1ec] {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    width: 340px;
    padding: 20px 24px;
}

.ws-shortcuts-header[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
}

.ws-shortcuts-close[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #86868b;
    cursor: pointer;
    font-size: 12px;
}

.ws-shortcuts-close:hover[b-32fy5em1ec] {
    background: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
}

.ws-shortcuts-list[b-32fy5em1ec] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ws-shortcut-row[b-32fy5em1ec] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #1d1d1f;
}

.ws-shortcut-row kbd[b-32fy5em1ec] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 5px;
    background: #fafafa;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    color: #1d1d1f;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.ws-shortcut-row span[b-32fy5em1ec] {
    color: #86868b;
    font-size: 12px;
}

/* ============================================================================
   v4 — Toolbar additions (B1/B4): storage indicator, Upload primary, spacers
   ============================================================================ */

/* Flex spacer between left pill and middle/right groups */
.ws-tb-spacer[b-32fy5em1ec] {
    flex: 1;
}

/* §40: Inline search input in the toolbar — replaces the buried collapsible bar.
   Sits between the List/Preview pill and the storage indicator. Pill-shaped,
   minimal chrome until focused. */
.ws-tb-search[b-32fy5em1ec] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 1 280px;
    min-width: 140px;
    max-width: 360px;
    height: 28px;
    background: #f5f5f7;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 0 8px 0 28px;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.ws-tb-search:hover[b-32fy5em1ec] {
    background: #ececef;
}

.ws-tb-search:focus-within[b-32fy5em1ec] {
    background: #ffffff;
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}

.ws-tb-search-icon[b-32fy5em1ec] {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: #86868b;
    font-size: 11px;
    pointer-events: none;
}

.ws-tb-search-input[b-32fy5em1ec] {
    flex: 1;
    height: 26px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 12px;
    color: #1d1d1f;
    min-width: 0;
}

.ws-tb-search-input[b-32fy5em1ec]::placeholder {
    color: #86868b;
}

.ws-tb-search-clear[b-32fy5em1ec] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.12);
    color: #fff;
    font-size: 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.ws-tb-search-clear:hover[b-32fy5em1ec] {
    background: rgba(0, 0, 0, 0.24);
}

/* Storage indicator — sits between spacer and Upload button */
.ws-storage[b-32fy5em1ec] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    font-size: 11px;
    color: #86868b;
    white-space: nowrap;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    user-select: none;
}
.ws-storage strong[b-32fy5em1ec] {
    color: #1d1d1f;
    font-weight: 600;
}
.ws-storage-warn strong[b-32fy5em1ec] { color: #b25e00; }
.ws-storage-full strong[b-32fy5em1ec] { color: #c62828; }

/* Primary labeled button (Upload) — matches Apple toolbar prominent action */
.ws-tb-btn-primary[b-32fy5em1ec] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 12px;
    border: 0;
    border-radius: 7px;
    background: #0071e3;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}
.ws-tb-btn-primary:hover[b-32fy5em1ec] { background: #006edb; }
.ws-tb-btn-primary:active[b-32fy5em1ec] { background: #005bb8; }
.ws-tb-btn-primary i[b-32fy5em1ec] {
    font-size: 11px;
    line-height: 1;
}

/* Thin vertical separator between actions and chrome (fullscreen / close) */
.ws-tb-chrome-sep[b-32fy5em1ec] {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ── §28: Drag-and-drop overlay ──────────────────────────────────────── */
.workspace-panel.is-drag-over[b-32fy5em1ec] {
    /* Subtle inset ring so the user sees the drop target is "armed"
       without flashing the entire panel a different color. */
    outline: 2px dashed #0071e3;
    outline-offset: -8px;
}

.ws-dropzone-overlay[b-32fy5em1ec] {
    position: absolute;
    inset: 0;
    background: rgba(245, 245, 247, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    /* Pointer-events:none so the underlying div still receives the drop event. */
    pointer-events: none;
}

.ws-dropzone-card[b-32fy5em1ec] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 56px;
    background: #ffffff;
    border: 2px dashed #0071e3;
    border-radius: 16px;
    color: #1d1d1f;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

.ws-dropzone-card i[b-32fy5em1ec] {
    font-size: 40px;
    color: #0071e3;
}

.ws-dropzone-title[b-32fy5em1ec] {
    font-size: 18px;
    font-weight: 600;
}

.ws-dropzone-sub[b-32fy5em1ec] {
    font-size: 12px;
    color: #6e6e73;
    letter-spacing: 0.02em;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Workspace/WorkspaceShareDialog.razor.rz.scp.css */
/* =============================================================================
   WorkspaceShareDialog.razor.css — Share Dialog Modal (Apple-inspired)
   ============================================================================= */

.ws-share-backdrop[b-zyn8a15xfi] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws-share-dialog[b-zyn8a15xfi] {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    width: 420px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ws-share-header[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 14px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}

.ws-share-title[b-zyn8a15xfi] {
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 340px;
}

.ws-share-close[b-zyn8a15xfi] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #86868b;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.ws-share-close:hover[b-zyn8a15xfi] {
    background: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
}

.ws-share-body[b-zyn8a15xfi] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
}

.ws-share-field[b-zyn8a15xfi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ws-share-label[b-zyn8a15xfi] {
    font-size: 12px;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ws-share-type-row[b-zyn8a15xfi] {
    display: flex;
    gap: 6px;
}

.ws-share-type-btn[b-zyn8a15xfi] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.04);
    color: #86868b;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.ws-share-type-btn:hover[b-zyn8a15xfi] {
    background: rgba(0, 0, 0, 0.06);
    color: #1d1d1f;
}

.ws-share-type-btn.active[b-zyn8a15xfi] {
    background: rgba(0, 113, 227, 0.08);
    color: #0071e3;
    font-weight: 600;
}

.ws-share-input[b-zyn8a15xfi] {
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    color: #1d1d1f;
    background: rgba(0, 0, 0, 0.04);
    outline: none;
    transition: background 0.2s, box-shadow 0.2s;
}

.ws-share-input:focus[b-zyn8a15xfi] {
    background: #fff;
    box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.3);
}

.ws-share-warning[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 159, 10, 0.1);
    border-radius: 10px;
    font-size: 13px;
    color: #835b00;
}

.ws-share-error[b-zyn8a15xfi] {
    font-size: 12px;
    color: #ff453a;
    padding: 4px 0;
}

.ws-share-footer[b-zyn8a15xfi] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px 20px;
    border-top: 0.5px solid rgba(0, 0, 0, 0.06);
}

.ws-share-cancel-btn[b-zyn8a15xfi] {
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.05);
    color: #1d1d1f;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.ws-share-cancel-btn:hover[b-zyn8a15xfi] {
    background: rgba(0, 0, 0, 0.08);
}

.ws-share-submit-btn[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 22px;
    border: none;
    border-radius: 8px;
    background: #0071e3;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.ws-share-submit-btn:hover[b-zyn8a15xfi] {
    background: #0077ed;
}

.ws-share-submit-btn:disabled[b-zyn8a15xfi] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ws-share-cancel-btn:disabled[b-zyn8a15xfi] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Group Member UI ===== */
.ws-group-member-input[b-zyn8a15xfi] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ws-group-member-input .ws-share-input[b-zyn8a15xfi] {
    flex: 1;
    min-width: 0;
}

.ws-group-add-btn[b-zyn8a15xfi] {
    width: 34px;
    height: 34px;
    border: 1px solid var(--BEC-colorBrandStroke1, #0078d4);
    border-radius: 6px;
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: #ffffff;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.ws-group-add-btn:hover[b-zyn8a15xfi] {
    background: var(--BEC-colorBrandBackgroundHover, #006cbe);
}

.ws-group-add-btn:disabled[b-zyn8a15xfi] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ws-group-member-list[b-zyn8a15xfi] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    max-height: 140px;
    overflow-y: auto;
}

.ws-group-member-item[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 4px;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
}

.ws-group-member-name[b-zyn8a15xfi] {
    flex: 1;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-group-member-id[b-zyn8a15xfi] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #999);
}

.ws-group-remove-btn[b-zyn8a15xfi] {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--BEC-colorNeutralForeground3, #999);
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ws-group-remove-btn:hover[b-zyn8a15xfi] {
    background: var(--BEC-colorPaletteRedBackground2, #fde7e9);
    color: var(--BEC-colorPaletteRedForeground1, #c4314b);
}

/* ===== Searchable Dropdown (Department / Company Pickers) ===== */
.ws-searchable-dropdown[b-zyn8a15xfi] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ws-dropdown-list[b-zyn8a15xfi] {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
}

.ws-dropdown-item[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
}

.ws-dropdown-item:hover[b-zyn8a15xfi] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

.ws-dropdown-item.selected[b-zyn8a15xfi] {
    background: var(--BEC-colorBrandBackground2, #e8f0fe);
}

.ws-dropdown-item + .ws-dropdown-item[b-zyn8a15xfi] {
    border-top: 1px solid var(--BEC-colorNeutralStroke3, #f0f0f0);
}

.ws-dropdown-item-name[b-zyn8a15xfi] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-dropdown-item-code[b-zyn8a15xfi] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #999);
    flex-shrink: 0;
    margin-left: 8px;
}

.ws-dropdown-empty[b-zyn8a15xfi] {
    padding: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3, #999);
}

.ws-picker-loading[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.ws-picker-empty[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    font-size: 13px;
    color: var(--BEC-colorPaletteYellowForeground2, #835b00);
    background: var(--BEC-colorPaletteYellowBackground2, #fff4ce);
    border-radius: 6px;
}

.ws-selected-target[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--BEC-colorBrandBackground2, #e8f0fe);
    border: 1px solid var(--BEC-colorBrandStroke1, #0078d4);
    border-radius: 6px;
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-weight: 500;
}

.ws-selected-clear[b-zyn8a15xfi] {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
}

.ws-selected-clear:hover[b-zyn8a15xfi] {
    background: var(--BEC-colorBrandBackgroundHover, #006cbe);
    color: #ffffff;
}

/* ===== Multi-select User Chips ===== */
.ws-user-chips[b-zyn8a15xfi] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.ws-user-chip[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--BEC-colorBrandBackground2, #e8f0fe);
    border: 1px solid var(--BEC-colorBrandStroke1, #0078d4);
    border-radius: 16px;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    max-width: 100%;
}

.ws-user-chip i:first-child[b-zyn8a15xfi] {
    font-size: 10px;
    flex-shrink: 0;
}

.ws-user-chip-name[b-zyn8a15xfi] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-user-chip-email[b-zyn8a15xfi] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #999);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-user-chip-remove[b-zyn8a15xfi] {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ws-user-chip-remove:hover[b-zyn8a15xfi] {
    background: var(--BEC-colorPaletteRedBackground2, #fde7e9);
    color: var(--BEC-colorPaletteRedForeground1, #c4314b);
}

/* ===== Expiration Date ===== */
.ws-expiry-label[b-zyn8a15xfi] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.ws-expiry-label input[type="checkbox"][b-zyn8a15xfi] {
    accent-color: var(--BEC-colorBrandBackground, #0078d4);
    cursor: pointer;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Workspace/WorkspaceShareManageDialog.razor.rz.scp.css */
/* =============================================================================
   WorkspaceShareManageDialog.razor.css — Manage Shares Modal (Apple-inspired)
   ============================================================================= */

.ws-manage-backdrop[b-mqiqxewtqk] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
}

.ws-manage-dialog[b-mqiqxewtqk] {
    background: #fff;
    border-radius: 14px;
    width: 580px;
    max-width: 90vw;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.ws-manage-header[b-mqiqxewtqk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}

.ws-manage-title[b-mqiqxewtqk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
}

.ws-manage-title i[b-mqiqxewtqk] {
    color: #0071e3;
}

.ws-manage-close[b-mqiqxewtqk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #aeaeb2;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s, color 0.2s;
}

.ws-manage-close:hover[b-mqiqxewtqk] {
    background: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
}

.ws-manage-body[b-mqiqxewtqk] {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.ws-manage-loading[b-mqiqxewtqk],
.ws-manage-empty[b-mqiqxewtqk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px;
    color: #aeaeb2;
    font-size: 14px;
}

/* ===== Share Table ===== */

.ws-share-table[b-mqiqxewtqk] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ws-share-table th[b-mqiqxewtqk] {
    text-align: left;
    padding: 8px 10px;
    font-weight: 500;
    color: #86868b;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    white-space: nowrap;
}

.ws-share-table td[b-mqiqxewtqk] {
    padding: 10px;
    color: #1d1d1f;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.04);
    vertical-align: middle;
}

.ws-share-table tr:hover td[b-mqiqxewtqk] {
    background: rgba(0, 0, 0, 0.02);
}

.ws-share-target[b-mqiqxewtqk] {
    font-weight: 500;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-share-type-badge[b-mqiqxewtqk] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    color: #86868b;
}

.ws-share-access-select[b-mqiqxewtqk] {
    font-size: 13px;
    padding: 4px 8px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
    cursor: pointer;
    transition: background 0.2s;
}

.ws-share-access-select:hover[b-mqiqxewtqk] {
    background: rgba(0, 0, 0, 0.06);
}

.ws-share-date[b-mqiqxewtqk] {
    white-space: nowrap;
    color: #aeaeb2;
}

.ws-share-revoke-btn[b-mqiqxewtqk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #ff453a;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s;
}

.ws-share-revoke-btn:hover:not(:disabled)[b-mqiqxewtqk] {
    background: rgba(255, 69, 58, 0.1);
}

.ws-share-revoke-btn:disabled[b-mqiqxewtqk] {
    opacity: 0.4;
    cursor: not-allowed;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/Components/Workspace/WorkspaceVersionDrawer.razor.rz.scp.css */
/* ============================================================================
   Workspace Version Drawer (B6) — slides in from the right edge of preview
   Apple-clean, matches BEC palette tokens used by SessionSidebar / popover.
   ============================================================================ */

.ws-vd[b-9w0jy11nka] {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 320px;
    background: #fff;
    border-left: 1px solid #e1dfdd;
    box-shadow: -4px 0 16px rgba(0, 0, 0, .04);
    display: flex;
    flex-direction: column;
    z-index: 50;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    animation: ws-vd-slide-in-b-9w0jy11nka .18s cubic-bezier(.4, 0, .2, 1);
}

@keyframes ws-vd-slide-in-b-9w0jy11nka {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.ws-vd-header[b-9w0jy11nka] {
    height: 44px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e1dfdd;
    font-size: .8rem;
    font-weight: 600;
    color: #1d1d1f;
    flex-shrink: 0;
}

.ws-vd-close[b-9w0jy11nka] {
    width: 26px; height: 26px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #6e6e73;
    cursor: pointer;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ws-vd-close:hover[b-9w0jy11nka] { background: #f3f2f1; color: #1d1d1f; }

.ws-vd-body[b-9w0jy11nka] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.ws-vd-loading[b-9w0jy11nka],
.ws-vd-error[b-9w0jy11nka],
.ws-vd-empty[b-9w0jy11nka] {
    padding: 28px 16px;
    text-align: center;
    font-size: .78rem;
    color: #6e6e73;
}
.ws-vd-error[b-9w0jy11nka] { color: #a80000; }

.ws-vd-row[b-9w0jy11nka] {
    padding: 10px 16px;
    border-bottom: 1px solid #e1dfdd;
}
.ws-vd-row.active[b-9w0jy11nka] { background: #e8f4fd; }

.ws-vd-row-head[b-9w0jy11nka] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}
.ws-vd-version[b-9w0jy11nka] { font-size: .78rem; font-weight: 600; color: #1d1d1f; }
.ws-vd-time[b-9w0jy11nka] { font-size: .62rem; color: #a19f9d; }

.ws-vd-meta[b-9w0jy11nka] {
    font-size: .65rem;
    color: #6e6e73;
    margin-bottom: 6px;
    line-height: 1.4;
}
.ws-vd-summary[b-9w0jy11nka] {
    margin-top: 4px;
    font-style: italic;
    color: #6e6e73;
}

.ws-vd-actions[b-9w0jy11nka] {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.ws-vd-btn[b-9w0jy11nka] {
    height: 26px;
    padding: 0 12px;
    font-size: .68rem;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    font-weight: 500;
    border: 1px solid #e1dfdd;
    background: #fff;
    color: #1d1d1f;
    border-radius: 6px;
    cursor: pointer;
}
.ws-vd-btn:hover[b-9w0jy11nka] { background: #f3f2f1; }
.ws-vd-btn.primary[b-9w0jy11nka] {
    border-color: #0078d4;
    color: #0078d4;
}
.ws-vd-btn.primary:hover[b-9w0jy11nka] { background: #e8f4fd; }
.ws-vd-btn:disabled[b-9w0jy11nka] { opacity: .55; cursor: not-allowed; }

/* Confirmation overlay (sits inside the drawer) */
.ws-vd-confirm-backdrop[b-9w0jy11nka] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.ws-vd-confirm-dialog[b-9w0jy11nka] {
    background: #fff;
    border-radius: 10px;
    padding: 18px;
    width: 260px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .15);
}
.ws-vd-confirm-dialog h4[b-9w0jy11nka] {
    margin: 0 0 6px;
    font-size: .85rem;
    font-weight: 600;
}
.ws-vd-confirm-dialog p[b-9w0jy11nka] {
    margin: 0 0 14px;
    font-size: .72rem;
    line-height: 1.45;
    color: #6e6e73;
}
.ws-vd-confirm-actions[b-9w0jy11nka] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
/* /Components/Pages/MainLayout/GlobalAIAgent/GlobalAIAgent.razor.rz.scp.css */
/* =============================================================================
   GlobalAIAgent.razor.css — Shell Layout Styles (BEC Design System)
   ==============================================================================
   All values use BEC Design Tokens from ERP_Design_System_Master_Comprehensive.
   Layout: two-column body (sidebar + content). No header bar.
   ============================================================================== */

/* ===== SHELL CONTAINER ===== */
.agent-shell[b-kh7xrag7y5] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f5f5f7;
    font-family: var(--BEC-fontFamilyBase);
    position: relative;
}

/* ===== BODY (Sidebar + Content) ===== */
.agent-body[b-kh7xrag7y5] {
    display: flex;
    flex: 1;
    min-height: 0; /* Critical: allows flex children to shrink below content height */
    overflow: hidden;
    position: relative; /* Anchor for overlay sidebar + scrim on small screens */
    /* User-resizable sidebar width — driven by sidebar-resize.js (drag the seam).
       Persisted to localStorage and restored on init. */
    --agent-sidebar-width: 240px;
}

/* ===== SIDEBAR COLLAPSE/EXPAND (controlled at parent level — SSOT for dimensions) ===== */
[b-kh7xrag7y5] .session-sidebar {
    width: var(--agent-sidebar-width);
    min-width: var(--agent-sidebar-width);
    flex-shrink: 0;
    opacity: 1;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease,
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.15s ease;
}

.agent-body.sidebar-collapsed[b-kh7xrag7y5]  .session-sidebar {
    width: 0;
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    border-right-color: transparent;
}

.agent-body.sidebar-open[b-kh7xrag7y5]  .session-sidebar {
    width: var(--agent-sidebar-width);
    min-width: var(--agent-sidebar-width);
    opacity: 1;
}

/* While dragging the seam, kill the width transition so the panel tracks the
   pointer 1:1 instead of easing behind it. */
.agent-body.sidebar-resizing[b-kh7xrag7y5]  .session-sidebar {
    transition: none;
}

/* ===== SIDEBAR RESIZE SEAM (drag handle) ===== */
.agent-sidebar-resizer[b-kh7xrag7y5] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--agent-sidebar-width);
    width: 8px;
    /* Hit area sits just RIGHT of the seam, over the content's left gutter, so it
       never covers the sidebar rows' kebab (⋯) buttons at the sidebar's edge. */
    cursor: col-resize;
    z-index: 25;
    touch-action: none; /* let JS own the gesture on touch devices */
}

/* The visible hairline — sits exactly on the seam, transparent until hover/drag. */
.agent-sidebar-resizer[b-kh7xrag7y5]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    transform: translateX(-1px);
    background: transparent;
    transition: background 0.15s ease;
}

.agent-sidebar-resizer:hover[b-kh7xrag7y5]::before,
.agent-body.sidebar-resizing .agent-sidebar-resizer[b-kh7xrag7y5]::before {
    background: var(--BEC-colorBrandForeground1, #0078d4);
}

/* No seam when the sidebar is collapsed — nothing to resize. */
.agent-body.sidebar-collapsed .agent-sidebar-resizer[b-kh7xrag7y5] {
    display: none;
}

/* ===== SIDEBAR TOGGLE BUTTON ===== */
.sidebar-toggle-btn[b-kh7xrag7y5] {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #86868b;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.sidebar-toggle-btn:hover[b-kh7xrag7y5] {
    background: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
}

/* ===== CONTENT AREA ===== */
/* Default: single column (chat only). When side panel opens, becomes flex-row. */
.agent-content[b-kh7xrag7y5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevent flex child from overflowing */
    overflow: hidden;
    position: relative; /* For absolute sidebar toggle btn */
    background: #fff;
}

/* When workspace panel is open, switch to row layout */
.agent-content.has-workspace-panel[b-kh7xrag7y5] {
    flex-direction: row;
}

/* Chat column: wraps connection bar + plan resume + chat panel as a vertical stack.
   Without this wrapper, the connection bar becomes a horizontal sibling in row mode
   when the workspace panel is open, breaking the layout. */
.agent-chat-column[b-kh7xrag7y5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* ===== CONNECTION STATUS — Enterprise Info Bar ===== */
.connection-status[b-kh7xrag7y5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
    border-radius: 8px;
    margin: 44px auto 0; /* clear the sidebar/workspace toggle buttons, center horizontally */
    width: fit-content;
    border: 1px solid transparent;
    animation: connectionFadeIn-b-kh7xrag7y5 0.25s ease-out;
}

.connection-dot[b-kh7xrag7y5] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.connection-label[b-kh7xrag7y5] {
    line-height: 1.3;
    letter-spacing: 0.01em;
}

/* --- Connecting: soft neutral banner --- */
.connection-status--connecting[b-kh7xrag7y5] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    color: var(--BEC-colorNeutralForeground2, #616161);
    border-color: var(--BEC-colorNeutralStroke2, #e0e0e0);
}

.connection-status--connecting .connection-dot[b-kh7xrag7y5] {
    background: var(--BEC-colorBrandForeground1, #0078d4);
    animation: connectionPulse-b-kh7xrag7y5 1.8s ease-in-out infinite;
}

/* --- Reconnecting: muted warning --- */
.connection-status--reconnecting[b-kh7xrag7y5] {
    background: var(--BEC-colorWarningBackground1, #fff8e1);
    color: var(--BEC-colorWarningForeground1, #7a5900);
    border-color: var(--BEC-colorWarningStroke1, #ffe082);
}

.connection-status--reconnecting .connection-dot[b-kh7xrag7y5] {
    background: var(--BEC-colorWarningForeground1, #7a5900);
    animation: connectionPulse-b-kh7xrag7y5 1.8s ease-in-out infinite;
}

/* --- Disconnected: muted error --- */
.connection-status--disconnected[b-kh7xrag7y5] {
    background: var(--BEC-colorErrorBackground1, #fef2f2);
    color: var(--BEC-colorErrorForeground1, #991b1b);
    border-color: var(--BEC-colorErrorStroke1, #fecaca);
}

.connection-status--disconnected .connection-dot[b-kh7xrag7y5] {
    background: var(--BEC-colorErrorForeground1, #991b1b);
}

/* --- Restored: brief confirmation flash after successful reconnect --- */
.connection-status--restored[b-kh7xrag7y5] {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
    animation: connection-restored-fade-b-kh7xrag7y5 2.5s ease-out forwards;
}
.connection-status--restored .connection-dot[b-kh7xrag7y5] {
    background: #10b981;
}
@keyframes connection-restored-fade-b-kh7xrag7y5 {
    0%   { opacity: 0; transform: translateY(-2px); }
    10%  { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

.reconnect-btn[b-kh7xrag7y5] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 3px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #fff);
    color: var(--BEC-colorBrandForeground1, #0078d4);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.reconnect-btn:hover[b-kh7xrag7y5] {
    background: var(--BEC-colorBrandBackground2, #eff6fc);
    border-color: var(--BEC-colorBrandStroke1, #0078d4);
}

.reconnect-icon[b-kh7xrag7y5] {
    font-size: 10px;
}

@keyframes connectionPulse-b-kh7xrag7y5 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@keyframes connectionFadeIn-b-kh7xrag7y5 {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   WORKSPACE RESIZE HANDLE (draggable splitter between chat and workspace)
   ============================================================================= */

.ws-resize-handle[b-kh7xrag7y5] {
    width: 5px;
    cursor: col-resize;
    background: transparent;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background 0.15s ease;
}

.ws-resize-handle:hover[b-kh7xrag7y5] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

.ws-resize-grip[b-kh7xrag7y5] {
    width: 2px;
    height: 28px;
    border-radius: 1px;
    background: var(--BEC-colorNeutralStroke2, #d1d1d1);
    transition: height 0.15s ease, background 0.15s ease;
}

.ws-resize-handle:hover .ws-resize-grip[b-kh7xrag7y5] {
    background: var(--BEC-colorNeutralForeground3, #616161);
    height: 40px;
}

.ws-resize-handle:active .ws-resize-grip[b-kh7xrag7y5] {
    background: var(--BEC-colorBrandForeground1, #0078d4);
    height: 48px;
}

/* =============================================================================
   RESPONSIVE BREAKPOINTS (P0 #3)
   ============================================================================= */

/* Compact desktop / split-screen — sidebar becomes overlay instead of pushing content */
@media (max-width: 1024px) {
    .agent-body.sidebar-open[b-kh7xrag7y5]  .session-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 20;
        width: 280px;
        min-width: 280px;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
    }

    /* Sidebar is a floating overlay here — fixed width, no inline resize. */
    .agent-sidebar-resizer[b-kh7xrag7y5] {
        display: none;
    }

    /* Scrim behind overlay sidebar on small screens */
    .agent-body.sidebar-open[b-kh7xrag7y5]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 19;
        animation: scrimFadeIn-b-kh7xrag7y5 0.2s ease-out;
    }
}

@keyframes scrimFadeIn-b-kh7xrag7y5 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Hide resize handle on tablet/mobile */
@media (max-width: 768px) {
    .ws-resize-handle[b-kh7xrag7y5] {
        display: none;
    }
}
/* /Components/Pages/MainLayout/Home.razor.rz.scp.css */
/* /Components/Pages/MainLayout/HumanCapital/OnboardingSurvey/OnboardingSurveyAdministration.razor.rz.scp.css */
/* Questions and Responses tabs follow BECAspire.Web/CLAUDE.md's design checklist: --BEC-*
   semantic tokens, side panels for create/edit (BecFormPanel) and read-only detail
   (BecDetailPanel), a centered dialog only for the destructive delete confirm, no toasts,
   density contract, logical CSS properties for RTL. Icons are Font Awesome (Material Symbols
   is not loaded in this app yet).
   The Report, Monthly Report and Settings tabs reproduce the Corporate Communications mockup —
   see wwwroot/css/modules/onboarding-report.css (.osr-*, shared with the Monthly Report view). */

.osa-root[b-skn5uirdv6] {
    padding: 24px 28px;
    max-width: 1100px;
    margin: 0 auto;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
}

.osa-header[b-skn5uirdv6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.osa-title[b-skn5uirdv6] {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--BEC-colorNeutralForeground1);
}

.osa-subtitle[b-skn5uirdv6] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    max-width: 520px;
}

/* ── Buttons ── */
.osa-btn[b-skn5uirdv6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}
.osa-btn--sm[b-skn5uirdv6] { height: 30px; padding: 0 12px; font-size: 12.5px; }
.osa-btn--primary[b-skn5uirdv6] { background: var(--BEC-colorBrandBackground); color: #fff; }
.osa-btn--primary:hover[b-skn5uirdv6] { background: var(--BEC-colorBrandBackgroundHover); }
.osa-btn--outline[b-skn5uirdv6] {
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground1);
    border-color: var(--BEC-colorNeutralStroke1);
}
.osa-btn--outline:hover[b-skn5uirdv6] { background: var(--BEC-colorNeutralBackground2); }
.osa-btn--danger[b-skn5uirdv6] { background: var(--BEC-colorPaletteRedForeground1); color: #fff; }

.osa-icon-btn[b-skn5uirdv6] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    font-size: 12.5px;
}
.osa-icon-btn:hover[b-skn5uirdv6] { background: var(--BEC-colorNeutralBackground2); }
.osa-icon-btn:disabled[b-skn5uirdv6] { opacity: 0.4; cursor: not-allowed; }
.osa-icon-btn:disabled:hover[b-skn5uirdv6] { background: var(--BEC-colorNeutralBackground1); }
.osa-icon-btn--danger:hover[b-skn5uirdv6] { color: var(--BEC-colorPaletteRedForeground1); border-color: var(--BEC-colorPaletteRedForeground1); }
.osa-icon-btn--sm[b-skn5uirdv6] { width: 22px; height: 22px; font-size: 10.5px; }

.osa-reorder[b-skn5uirdv6] { display: flex; align-items: center; gap: 4px; }
.osa-reorder span[b-skn5uirdv6] { min-width: 14px; text-align: center; }

.osa-toolbar[b-skn5uirdv6] { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.osa-toolbar--responses[b-skn5uirdv6] { justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.osa-toolbar__actions[b-skn5uirdv6] { display: flex; gap: 8px; flex-wrap: wrap; }
.osa-filters[b-skn5uirdv6] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.osa-filter[b-skn5uirdv6] { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--BEC-colorNeutralForeground2, #605e5c); }
.osa-filter select[b-skn5uirdv6], .osa-filter input[b-skn5uirdv6] {
    height: 32px; padding: 0 10px; font: inherit; font-size: 13px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d2d0ce); border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #fff); color: var(--BEC-colorNeutralForeground1, #323130);
}
.osa-filter--search input[b-skn5uirdv6] { width: min(260px, 60vw); }
.osa-filter-count[b-skn5uirdv6] { font-size: 12px; color: var(--BEC-colorNeutralForeground3, #a19f9d); }
.osa-emp[b-skn5uirdv6] { display: flex; flex-direction: column; gap: 1px; }
.osa-emp__name[b-skn5uirdv6] { font-weight: 600; }
.osa-emp__email[b-skn5uirdv6] { font-size: 11.5px; color: var(--BEC-colorNeutralForeground3, #a19f9d); }
.osa-response-view__meta[b-skn5uirdv6] { margin: 2px 0 0; font-size: 12.5px; color: var(--BEC-colorNeutralForeground2, #605e5c); }

.osa-retry[b-skn5uirdv6] {
    background: none;
    border: none;
    padding: 0;
    color: var(--BEC-colorBrandBackground);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
}

/* ── Loading / empty / error states ── */
.osa-state[b-skn5uirdv6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 20px;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 13.5px;
}
.osa-state--empty[b-skn5uirdv6], .osa-state--error[b-skn5uirdv6] {
    flex-direction: column;
    text-align: center;
    gap: 8px;
}
.osa-state--empty i[b-skn5uirdv6], .osa-state--error i[b-skn5uirdv6] { font-size: 26px; color: var(--BEC-colorNeutralForeground3); }
.osa-state--error i[b-skn5uirdv6] { color: var(--BEC-colorPaletteRedForeground1); }

.osa-spinner[b-skn5uirdv6] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    animation: osa-spin-b-skn5uirdv6 0.7s linear infinite;
}
@keyframes osa-spin-b-skn5uirdv6 { to { transform: rotate(360deg); } }

/* ── Tabs ── */
.osa-tabs[b-skn5uirdv6] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    margin-bottom: 16px;
    overflow-x: auto; /* six tabs: scroll sideways on narrow screens (mockup .tabs) */
}
.osa-tab[b-skn5uirdv6] {
    white-space: nowrap;
    background: none;
    border: none;
    padding: 10px 4px;
    margin-inline-end: 20px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 6px;
}
.osa-tab--active[b-skn5uirdv6] { color: var(--BEC-colorBrandBackground); border-bottom-color: var(--BEC-colorBrandBackground); font-weight: 600; }
.osa-tab__count[b-skn5uirdv6] {
    font-size: 11px;
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground2);
    border-radius: 10px;
    padding: 1px 7px;
}

/* ── Table (density contract: 36-40px rows, 14px text) ── */
.osa-table-wrap[b-skn5uirdv6] {
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 8px;
    overflow: auto;
}
.osa-table[b-skn5uirdv6] { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.osa-table th[b-skn5uirdv6] {
    text-align: start;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--BEC-colorNeutralForeground2);
    background: var(--BEC-colorNeutralBackground2);
    padding: 10px 14px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}
.osa-table td[b-skn5uirdv6] {
    padding: 9px 14px;
    height: 38px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground1);
    vertical-align: middle;
}
.osa-table tr:last-child td[b-skn5uirdv6] { border-bottom: none; }
.osa-table__num[b-skn5uirdv6] { color: var(--BEC-colorNeutralForeground2); tabular-nums: normal; font-variant-numeric: tabular-nums; }
.osa-table__actions[b-skn5uirdv6] { display: flex; gap: 6px; justify-content: flex-end; }

.osa-status[b-skn5uirdv6] { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; }
.osa-status--active[b-skn5uirdv6] { color: var(--BEC-colorPaletteGreenForeground1); }
.osa-status--inactive[b-skn5uirdv6] { color: var(--BEC-colorNeutralForeground3); }

.osa-sr-only[b-skn5uirdv6] {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Question form (inside BecFormPanel) ── */
.osa-form[b-skn5uirdv6] { display: flex; flex-direction: column; gap: 16px; }
.osa-field[b-skn5uirdv6] { display: flex; flex-direction: column; gap: 6px; }
.osa-field__label[b-skn5uirdv6] { font-size: 12.5px; font-weight: 500; color: var(--BEC-colorNeutralForeground2); }
.osa-field__textarea[b-skn5uirdv6],
.osa-field__select[b-skn5uirdv6],
.osa-field__input[b-skn5uirdv6] {
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--BEC-colorNeutralForeground1);
    background: var(--BEC-colorNeutralBackground1);
}
.osa-field__textarea:focus[b-skn5uirdv6],
.osa-field__select:focus[b-skn5uirdv6],
.osa-field__input:focus[b-skn5uirdv6] {
    outline: 2px solid var(--BEC-colorBrandBackground);
    outline-offset: 1px;
}
.osa-field__input--num[b-skn5uirdv6] { width: 100px; }
.osa-field__error[b-skn5uirdv6] { color: var(--BEC-colorPaletteRedForeground1); font-size: 12.5px; margin: 0; }

.osa-options[b-skn5uirdv6] { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.osa-options__row[b-skn5uirdv6] { display: flex; gap: 8px; align-items: center; }
.osa-options__row .osa-field__input[b-skn5uirdv6] { flex: 1; }

.osa-checkbox[b-skn5uirdv6] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
}
.osa-checkbox input[b-skn5uirdv6] { margin-top: 2px; accent-color: var(--BEC-colorBrandBackground); }

/* ── Response viewer (inside BecDetailPanel) ── */
.osa-response-view__name[b-skn5uirdv6] { font-size: 17px; font-weight: 600; margin: 0 0 2px; }
.osa-response-view__date[b-skn5uirdv6] { font-size: 12.5px; color: var(--BEC-colorNeutralForeground2); margin: 0 0 18px; }

.osa-survey-list--readonly[b-skn5uirdv6] { display: flex; flex-direction: column; gap: 14px; }
.osa-response-q__text[b-skn5uirdv6] { font-size: 13px; font-weight: 500; margin: 0 0 4px; color: var(--BEC-colorNeutralForeground1); }
.osa-response-q__answer[b-skn5uirdv6] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 6px;
    padding: 8px 12px;
    margin: 0;
}

/* ── Report tab: shared states (the tab itself is styled by css/modules/onboarding-report.css) ── */

.osa-spinner--sm[b-skn5uirdv6] { width: 12px; height: 12px; border-width: 2px; }
.osa-state--inline[b-skn5uirdv6] { padding: 10px 14px; margin-bottom: 12px; flex-direction: row; gap: 8px; }
.osa-report--busy[b-skn5uirdv6] { opacity: .55; pointer-events: none; }

/* response viewer additions */
.osa-response-view__actions[b-skn5uirdv6] { display: flex; align-items: center; gap: 10px; margin: -8px 0 16px; flex-wrap: wrap; }
.osa-response-view__hint[b-skn5uirdv6] { font-size: 12px; color: var(--BEC-colorNeutralForeground3, #a19f9d); }
.osa-response-q__num[b-skn5uirdv6] { display: inline-block; font-size: 11px; font-weight: 600; color: var(--BEC-colorBrandBackground); margin-inline-end: 4px; }
.osa-response-q__context[b-skn5uirdv6] { font-size: 12px; color: #0071e3; margin: 4px 0 0; display: flex; gap: 6px; align-items: flex-start; }
.osa-response-q__context i[b-skn5uirdv6] { margin-top: 2px; font-size: 11px; }

@media (max-width: 720px) {
    .osa-root[b-skn5uirdv6] { padding: 16px; }
    .osa-header[b-skn5uirdv6] { flex-direction: column; }
    .osa-table th:nth-child(3)[b-skn5uirdv6], .osa-table td:nth-child(3)[b-skn5uirdv6] { display: none; }
}


/* /Components/Pages/MainLayout/Intranet/AdminServices/AdminServices.razor.rz.scp.css */
/* E-Services page (redesign agreed 30 Sep 2026). White and blue: the handoff tokens of
   .bec-shell (docs/design-system/handoff/tokens.css); derived tints use color-mix of tokens.
   Logical properties only (RTL-safe). Side panels style themselves; shared form styles live in
   AsPageFrame.razor.css. */

.es[b-fqux5p0upg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-inline-size: 0;
    color: var(--bec-ink);
}

.es-crumbs[b-fqux5p0upg] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--bec-slate);
    font-size: 13px;
}

.es-crumbs .material-symbols-outlined[b-fqux5p0upg] {
    font-size: 18px;
}

.es-crumbs h1[b-fqux5p0upg] {
    margin: 0;
    color: var(--bec-ink);
    font-size: 13px;
    font-weight: 600;
}

.es-muted[b-fqux5p0upg] {
    color: var(--bec-slate);
}

.es-sub[b-fqux5p0upg] {
    display: block;
    color: var(--bec-slate);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.es-emblem[b-fqux5p0upg] {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--bec-tint-100);
    color: var(--bec-navy-700);
}

.es-emblem .material-symbols-outlined[b-fqux5p0upg] {
    font-size: 24px;
}

.es-emblem--sm[b-fqux5p0upg] {
    inline-size: 36px;
    block-size: 36px;
    border-radius: 10px;
}

.es-emblem--sm .material-symbols-outlined[b-fqux5p0upg] {
    font-size: 20px;
}

/* ── The three views ─────────────────────────────────────────────────── */

.es-tabs[b-fqux5p0upg] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.es-tab[b-fqux5p0upg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 48px;
    padding-inline: 14px 16px;
    border: 1px solid var(--bec-border);
    border-radius: 12px;
    background: var(--bec-surface);
    color: var(--bec-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.es-tab:hover[b-fqux5p0upg] {
    border-color: var(--bec-navy-700);
}

.es-tab:focus-visible[b-fqux5p0upg] {
    outline: 2px solid var(--bec-navy-700);
    outline-offset: 2px;
}

.es-tab > .material-symbols-outlined[b-fqux5p0upg] {
    color: var(--bec-navy-700);
}

.es-tab[aria-selected="true"][b-fqux5p0upg] {
    border-color: var(--bec-navy-700);
    background: var(--bec-navy-700);
    color: var(--bec-surface);
}

.es-tab[aria-selected="true"] > .material-symbols-outlined[b-fqux5p0upg] {
    color: inherit;
}

.es-count[b-fqux5p0upg] {
    min-inline-size: 22px;
    block-size: 22px;
    padding-inline: 6px;
    border-radius: 11px;
    background: var(--bec-navy-700);
    color: var(--bec-surface);
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.es-tab[aria-selected="true"] .es-count[b-fqux5p0upg] {
    background: var(--bec-surface);
    color: var(--bec-navy-700);
}

.es-tab__flag[b-fqux5p0upg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 6px;
    border-radius: var(--radius-full);
    background: var(--bec-tint-100);
    color: var(--bec-navy-700);
    font-size: 12px;
    font-weight: 600;
}

.es-tab__flag .material-symbols-outlined[b-fqux5p0upg] {
    font-size: 15px;
}

.es-tab[aria-selected="true"] .es-tab__flag[b-fqux5p0upg] {
    background: color-mix(in srgb, var(--bec-surface) 16%, transparent);
    color: var(--bec-surface);
}

@media (max-width: 700px) {
    .es-tab[b-fqux5p0upg] {
        flex: 1 1 100%;
    }
}

.es-view[b-fqux5p0upg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.es-view-head h2[b-fqux5p0upg] {
    margin: 0;
    font-size: 20px;
}

.es-view-head p[b-fqux5p0upg] {
    margin: 2px 0 0;
    max-inline-size: 70ch;
    color: var(--bec-slate);
    font-size: 13px;
}

.es-filters[b-fqux5p0upg] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.es-pill[b-fqux5p0upg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 36px;
    padding-inline: 14px;
    border: 1px solid var(--bec-border);
    border-radius: var(--radius-full);
    background: var(--bec-surface);
    color: var(--bec-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.es-pill span[b-fqux5p0upg] {
    color: var(--bec-slate);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.es-pill:hover[b-fqux5p0upg] {
    border-color: var(--bec-navy-700);
}

.es-pill:focus-visible[b-fqux5p0upg] {
    outline: 2px solid var(--bec-navy-700);
    outline-offset: 2px;
}

.es-pill[aria-pressed="true"][b-fqux5p0upg] {
    border-color: var(--bec-navy-700);
    background: var(--bec-navy-700);
    color: var(--bec-surface);
}

.es-pill[aria-pressed="true"] span[b-fqux5p0upg] {
    color: inherit;
    opacity: 0.85;
}

/* ── Services: the question and one search ───────────────────────────── */

.es-hero[b-fqux5p0upg] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 24px 18px;
    border-radius: var(--radius-lg);
    background: var(--bec-navy-900);
    color: var(--bec-surface);
}

.es-hero__art[b-fqux5p0upg] {
    position: absolute;
    z-index: -1;
    inset-block-start: -64px;
    inset-inline-end: -110px;
    inline-size: 380px;
    max-inline-size: none;
    block-size: 218px;
}

.es-hero__art circle[b-fqux5p0upg] {
    fill: none;
    stroke: var(--bec-indigo-400);
}

.es-hero h2[b-fqux5p0upg] {
    margin: 0;
    font-size: clamp(17px, 1.6vw, 21px);
    font-weight: 600;
    line-height: 1.3;
}

.es-hero__row[b-fqux5p0upg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

.es-search[b-fqux5p0upg] {
    flex: 1 1 380px;
    display: flex;
    align-items: center;
    gap: 8px;
    max-inline-size: 620px;
    block-size: var(--hit-target-min);
    padding-inline: 14px 6px;
    border-radius: var(--radius-md);
    background: var(--bec-surface);
    color: var(--bec-ink);
    box-shadow: var(--shadow-hover);
}

.es-search:focus-within[b-fqux5p0upg] {
    outline: 3px solid color-mix(in srgb, var(--bec-surface) 70%, var(--bec-navy-700));
    outline-offset: 2px;
}

.es-search > .material-symbols-outlined[b-fqux5p0upg] {
    color: var(--bec-slate);
}

.es-search input[b-fqux5p0upg] {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--bec-ink);
    font: inherit;
    font-size: 15px;
}

.es-search input[b-fqux5p0upg]::-webkit-search-cancel-button {
    display: none;
}

.es-icon-btn[b-fqux5p0upg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 34px;
    block-size: 34px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--bec-slate);
    cursor: pointer;
}

.es-icon-btn:hover[b-fqux5p0upg] {
    background: var(--bec-bg-alt);
}

.es-icon-btn:focus-visible[b-fqux5p0upg] {
    outline: 2px solid var(--bec-navy-700);
    outline-offset: 1px;
}

.es-quick[b-fqux5p0upg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.es-quick__label[b-fqux5p0upg] {
    color: color-mix(in srgb, var(--bec-surface) 78%, var(--bec-navy-900));
    font-size: 13px;
}

.es-chip[b-fqux5p0upg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 32px;
    padding-inline: 10px;
    border: 1px solid color-mix(in srgb, var(--bec-surface) 20%, transparent);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--bec-surface) 8%, transparent);
    color: var(--bec-surface);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.es-chip:hover[b-fqux5p0upg] {
    background: color-mix(in srgb, var(--bec-surface) 16%, transparent);
}

.es-chip:focus-visible[b-fqux5p0upg] {
    outline: 2px solid var(--bec-surface);
    outline-offset: 2px;
}

.es-chip .material-symbols-outlined[b-fqux5p0upg] {
    font-size: 18px;
}

@media (max-width: 700px) {
    .es-hero[b-fqux5p0upg] {
        padding: 14px 16px 16px;
    }

    .es-search[b-fqux5p0upg] {
        flex-basis: 100%;
    }
}

.es-notice[b-fqux5p0upg] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bec-bg-alt);
    font-size: 13px;
}

.es-notice .material-symbols-outlined[b-fqux5p0upg] {
    font-size: 18px;
    color: var(--bec-navy-700);
}

/* Awaiting your reply */
.es-attn[b-fqux5p0upg] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 14px;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--bec-navy-700) 25%, var(--bec-surface));
    border-radius: 12px;
    background: var(--bec-tint-100);
    color: var(--bec-navy-900);
}

.es-attn p[b-fqux5p0upg] {
    margin: 0;
    overflow-wrap: anywhere;
}

.es-attn__icon[b-fqux5p0upg] {
    font-size: 26px;
    color: var(--bec-navy-700);
}

@media (max-width: 700px) {
    .es-attn[b-fqux5p0upg] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .es-attn > :last-child[b-fqux5p0upg] {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* Categories (shown once two are live) */
.es-section-head[b-fqux5p0upg] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 12px;
}

.es-section-head h2[b-fqux5p0upg] {
    margin: 0;
    font-size: 18px;
}

.es-section-head p[b-fqux5p0upg] {
    margin: 0;
    color: var(--bec-slate);
    font-size: 13px;
}

.es-cats[b-fqux5p0upg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.es-cats__row[b-fqux5p0upg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.es-cat[b-fqux5p0upg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--bec-border);
    border-radius: 12px;
    background: var(--bec-surface);
    color: var(--bec-ink);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color var(--duration-hover) var(--ease-standard), box-shadow var(--duration-hover) var(--ease-standard);
}

.es-cat:hover[b-fqux5p0upg] {
    border-color: var(--bec-navy-700);
    box-shadow: var(--shadow-hover);
}

.es-cat:focus-visible[b-fqux5p0upg] {
    outline: 2px solid var(--bec-navy-700);
    outline-offset: 2px;
}

.es-cat[aria-pressed="true"][b-fqux5p0upg] {
    border-color: var(--bec-navy-700);
    box-shadow: 0 0 0 1px var(--bec-navy-700), var(--shadow-hover);
}

.es-cat__top[b-fqux5p0upg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.es-cat__check[b-fqux5p0upg] {
    color: var(--bec-navy-700);
    visibility: hidden;
}

.es-cat[aria-pressed="true"] .es-cat__check[b-fqux5p0upg] {
    visibility: visible;
}

.es-cat__name[b-fqux5p0upg] {
    font-size: 16px;
    font-weight: 600;
}

.es-cat__desc[b-fqux5p0upg] {
    color: var(--bec-slate);
    font-size: 13px;
    line-height: 1.4;
}

.es-cat__meta[b-fqux5p0upg] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-block-start: auto;
    color: var(--bec-slate);
    font-size: 12px;
}

.es-cat__meta > span[b-fqux5p0upg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.es-cat__meta .material-symbols-outlined[b-fqux5p0upg] {
    font-size: 16px;
}

@media (max-width: 700px) {
    .es-cats__row[b-fqux5p0upg] {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-block-end: 6px;
    }

    .es-cat[b-fqux5p0upg] {
        flex: 0 0 76%;
        scroll-snap-align: start;
    }
}

/* The catalogue */
.es-catalogue[b-fqux5p0upg] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-inline-size: 0;
    padding: 20px;
    border: 1px solid var(--bec-border);
    border-radius: var(--radius-lg);
    background: var(--bec-surface);
}

@media (max-width: 700px) {
    .es-catalogue[b-fqux5p0upg] {
        padding: 16px;
    }
}

.es-catalogue__head[b-fqux5p0upg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.es-catalogue__title[b-fqux5p0upg] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-inline-size: 0;
}

.es-catalogue__title h2[b-fqux5p0upg] {
    margin: 0;
    font-size: 20px;
}

.es-catalogue__title p[b-fqux5p0upg] {
    margin: 2px 0 0;
    color: var(--bec-slate);
    font-size: 13px;
}

.es-team[b-fqux5p0upg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--bec-slate);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.es-team .material-symbols-outlined[b-fqux5p0upg] {
    font-size: 18px;
}

.es-group[b-fqux5p0upg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.es-group + .es-group[b-fqux5p0upg] {
    margin-block-start: 8px;
}

.es-group__head[b-fqux5p0upg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--bec-slate);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.es-dot[b-fqux5p0upg] {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--bec-navy-700);
}

.es-group__n[b-fqux5p0upg] {
    font-weight: 400;
    letter-spacing: 0;
}

.es-group__ar[b-fqux5p0upg] {
    font-family: "Noto Sans Arabic", var(--font-family-base);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.es-grid[b-fqux5p0upg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap: 10px;
}

.es-svc[b-fqux5p0upg] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-block-size: 86px;
    padding: 12px 14px;
    border: 1px solid var(--bec-border);
    border-radius: 12px;
    background: var(--bec-surface);
    color: var(--bec-ink);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color var(--duration-hover) var(--ease-standard), box-shadow var(--duration-hover) var(--ease-standard);
}

.es-svc:hover[b-fqux5p0upg] {
    border-color: var(--bec-navy-700);
    box-shadow: var(--shadow-hover);
}

.es-svc:focus-visible[b-fqux5p0upg] {
    outline: 2px solid var(--bec-navy-700);
    outline-offset: 2px;
}

.es-svc .es-emblem .material-symbols-outlined[b-fqux5p0upg] {
    font-size: 22px;
}

.es-svc__body[b-fqux5p0upg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.es-svc__name[b-fqux5p0upg] {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.es-svc__desc[b-fqux5p0upg] {
    display: -webkit-box;
    overflow: hidden;
    color: var(--bec-slate);
    font-size: 13px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.es-svc__meta[b-fqux5p0upg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-block-start: 4px;
    color: var(--bec-slate);
    font-size: 12px;
}

.es-svc__meta > span[b-fqux5p0upg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.es-svc__meta .material-symbols-outlined[b-fqux5p0upg] {
    font-size: 16px;
}

.es-svc__ar[b-fqux5p0upg] {
    font-family: "Noto Sans Arabic", var(--font-family-base);
    font-size: 13px;
}

.es-badge[b-fqux5p0upg] {
    padding: 1px 8px;
    border-radius: var(--radius-full);
    background: var(--bec-tint-100);
    color: var(--bec-navy-700);
    font-weight: 600;
}

.es-svc__go[b-fqux5p0upg] {
    color: var(--bec-navy-700);
}

.es-how[b-fqux5p0upg] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 4px 0 0;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--bec-border);
    color: var(--bec-slate);
    font-size: 12px;
}

.es-how > span[b-fqux5p0upg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.es-how .material-symbols-outlined[b-fqux5p0upg] {
    font-size: 16px;
    color: var(--bec-navy-700);
}

.es-empty[b-fqux5p0upg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 12px;
    color: var(--bec-slate);
    text-align: center;
}

.es-empty .material-symbols-outlined[b-fqux5p0upg] {
    font-size: 32px;
}

.es-empty strong[b-fqux5p0upg] {
    color: var(--bec-ink);
}

.es-linkish[b-fqux5p0upg] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--bec-navy-700);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.es-linkish:focus-visible[b-fqux5p0upg] {
    outline: 2px solid var(--bec-navy-700);
    outline-offset: 2px;
}

/* ── My requests: grouped cards ──────────────────────────────────────── */

.es-rq-groups[b-fqux5p0upg] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.es-rq-group[b-fqux5p0upg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.es-rq-list[b-fqux5p0upg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    gap: 12px;
}

.es-rq[b-fqux5p0upg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--bec-border);
    border-radius: var(--radius-lg);
    background: var(--bec-surface);
}

.es-rq:hover[b-fqux5p0upg] {
    box-shadow: var(--shadow-hover);
}

.es-rq--attn[b-fqux5p0upg] {
    padding: 15px 17px;
    border: 2px solid var(--bec-navy-700);
}

.es-rq__top[b-fqux5p0upg] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.es-rq__titles[b-fqux5p0upg] {
    min-inline-size: 0;
}

.es-rq__title[b-fqux5p0upg] {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
}

.es-rq__open[b-fqux5p0upg],
.es-q-open[b-fqux5p0upg] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--bec-ink);
    font: inherit;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
}

.es-rq__open:hover[b-fqux5p0upg],
.es-q-open:hover[b-fqux5p0upg] {
    color: var(--bec-navy-700);
    text-decoration: underline;
}

.es-rq__open:focus-visible[b-fqux5p0upg],
.es-q-open:focus-visible[b-fqux5p0upg] {
    outline: 2px solid var(--bec-navy-700);
    outline-offset: 2px;
}

.es-rq__subject[b-fqux5p0upg] {
    margin: 0;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.es-tag-new[b-fqux5p0upg] {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--bec-navy-700);
    color: var(--bec-surface);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    vertical-align: 1px;
}

.es-track[b-fqux5p0upg] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.es-track li[b-fqux5p0upg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--bec-slate);
    font-size: 12px;
}

.es-track li[b-fqux5p0upg]::before {
    content: "";
    block-size: 6px;
    border-radius: 3px;
    background: var(--bec-border);
}

.es-track li.is-reached[b-fqux5p0upg]::before {
    background: var(--bec-navy-700);
}

.es-track li.is-current[b-fqux5p0upg] {
    color: var(--bec-ink);
    font-weight: 700;
}

/* Awaiting your reply: the middle step says so, and its bar is striped (the timeframe is paused). */
.es-track li.is-waiting[b-fqux5p0upg] {
    color: var(--bec-navy-700);
}

.es-track li.is-waiting[b-fqux5p0upg]::before {
    background: repeating-linear-gradient(-45deg, var(--bec-navy-700) 0 6px, var(--bec-tint-100) 6px 12px);
}

.es-rq__callout[b-fqux5p0upg],
.es-rq__last[b-fqux5p0upg] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.es-rq__callout[b-fqux5p0upg] {
    background: var(--bec-tint-100);
    color: var(--bec-navy-900);
}

.es-rq__last[b-fqux5p0upg] {
    background: var(--bec-bg-alt);
}

.es-rq__callout .material-symbols-outlined[b-fqux5p0upg],
.es-rq__last .material-symbols-outlined[b-fqux5p0upg] {
    font-size: 18px;
}

.es-rq__foot[b-fqux5p0upg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Very narrow phones: the status moves under the title so it cannot squeeze it. */
@media (max-width: 480px) {
    .es-rq__top[b-fqux5p0upg] {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .es-rq__top[b-fqux5p0upg]  .as-status {
        grid-column: 2;
        justify-self: start;
    }
}

/* ── Assigned to me: the agent's queue ───────────────────────────────── */

.es-table-wrap[b-fqux5p0upg] {
    overflow-x: auto;
    border: 1px solid var(--bec-border);
    border-radius: var(--radius-lg);
    background: var(--bec-surface);
}

.es-queue[b-fqux5p0upg] {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.es-queue th[b-fqux5p0upg] {
    padding: 10px 14px;
    border-block-end: 1px solid var(--bec-border);
    background: var(--bec-bg-alt);
    color: var(--bec-slate);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: start;
    text-transform: uppercase;
    white-space: nowrap;
}

.es-queue td[b-fqux5p0upg] {
    padding: 12px 14px;
    border-block-end: 1px solid var(--bec-border);
    vertical-align: middle;
}

.es-queue tbody tr:last-child td[b-fqux5p0upg] {
    border-block-end: 0;
}

.es-queue__row[b-fqux5p0upg] {
    cursor: pointer;
}

.es-queue__row:hover[b-fqux5p0upg],
.es-queue__row.is-open[b-fqux5p0upg] {
    background: var(--bec-bg-alt);
}

.es-q-req[b-fqux5p0upg] {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

@media (max-width: 760px) {
    .es-queue thead[b-fqux5p0upg] {
        display: none;
    }

    .es-queue[b-fqux5p0upg],
    .es-queue tbody[b-fqux5p0upg],
    .es-queue tr[b-fqux5p0upg],
    .es-queue td[b-fqux5p0upg] {
        display: block;
    }

    .es-queue tr[b-fqux5p0upg] {
        padding: 12px 14px;
        border-block-end: 1px solid var(--bec-border);
    }

    .es-queue td[b-fqux5p0upg] {
        padding: 3px 0;
        border: 0;
    }

    .es-queue td[data-label][b-fqux5p0upg]::before {
        content: attr(data-label) ": ";
        color: var(--bec-slate);
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .es-cat[b-fqux5p0upg],
    .es-svc[b-fqux5p0upg] {
        transition: none;
    }
}
/* /Components/Pages/MainLayout/Intranet/AdminServices/AsAgentPanel.razor.rz.scp.css */
/* E-Services - agent / admin team side panel. Shared styles (es-detail, es-meta, es-box,
   es-segmented, es-options, es-switch, es-warn) come from AsPageFrame.razor.css. */

.es-agent[b-31q2nt673u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--bec-ink);
    font-weight: 600;
}

.es-agent .material-symbols-outlined[b-31q2nt673u] {
    color: var(--bec-navy-700);
}

.es-cancel-row[b-31q2nt673u] {
    padding-block-start: 12px;
    border-block-start: 1px solid var(--bec-border);
}
/* /Components/Pages/MainLayout/Intranet/AdminServices/AsAgentReplacePanel.razor.rz.scp.css */
/* Replace-agent panel. Field styles come from AsPageFrame. --BEC-* tokens only. */

.bec-as-form[b-w8ia4bq8w0] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
}

.bec-as-replace__current[b-w8ia4bq8w0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    margin: 0;
    color: var(--BEC-Text-Primary);
    font-size: var(--BEC-fontSizeBase300);
}

.bec-as-replace__current .material-symbols-outlined[b-w8ia4bq8w0] {
    font-size: 18px;
    color: var(--BEC-Text-Secondary);
}

.bec-as-replace__hint[b-w8ia4bq8w0] {
    margin: 0;
    color: var(--BEC-Text-Secondary);
    font-size: var(--BEC-fontSizeBase200);
}
/* /Components/Pages/MainLayout/Intranet/AdminServices/AsDue.razor.rz.scp.css */
.as-due[b-cwffxt6y3y] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    white-space: nowrap;
}

.as-due .material-symbols-outlined[b-cwffxt6y3y] {
    font-size: 17px;
}

.as-due--overdue[b-cwffxt6y3y] {
    color: var(--bec-danger);
    font-weight: 700;
}

.as-due--soon[b-cwffxt6y3y] {
    color: var(--bec-navy-700);
    font-weight: 700;
}

.as-due--ok[b-cwffxt6y3y] {
    color: var(--bec-ink);
}

.as-due--paused[b-cwffxt6y3y],
.as-due--done[b-cwffxt6y3y] {
    color: var(--bec-slate);
}
/* /Components/Pages/MainLayout/Intranet/AdminServices/AsFilePicker.razor.rz.scp.css */
/* Admin Services attachment picker - --BEC-* tokens only, logical properties (RTL-safe). */

.bec-as-files[b-oxk6r2w4si] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.bec-as-files__row[b-oxk6r2w4si] {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--BEC-spacingHorizontalS);
}

/* Visually hidden but focusable: Tab reaches it and Enter/Space opens the picker. */
[b-oxk6r2w4si] .bec-as-files__input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    overflow: hidden;
}

.bec-as-files__button[b-oxk6r2w4si] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    min-block-size: 36px;
    padding-inline: var(--BEC-spacingHorizontalM);
    border: 1px solid var(--BEC-Border-Strong);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-Surface-Base);
    color: var(--BEC-Text-Primary);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: background-color 120ms ease-out;
}

.bec-as-files__button:hover[b-oxk6r2w4si] {
    background: var(--BEC-Surface-Hover);
}

.bec-as-files__row:focus-within .bec-as-files__button[b-oxk6r2w4si] {
    outline: 2px solid var(--BEC-focus-indicator);
    outline-offset: 2px;
}

.bec-as-files__button.is-disabled[b-oxk6r2w4si] {
    opacity: 0.55;
    cursor: not-allowed;
}

.bec-as-files__button .material-symbols-outlined[b-oxk6r2w4si] {
    font-size: 18px;
}

.bec-as-files__hint[b-oxk6r2w4si] {
    color: var(--BEC-Text-Secondary);
    font-size: var(--BEC-fontSizeBase200);
}

.bec-as-files__list[b-oxk6r2w4si] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--BEC-spacingHorizontalS);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bec-as-files__chip[b-oxk6r2w4si] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    max-inline-size: 100%;
    padding-block: var(--BEC-spacingHorizontalXS);
    padding-inline: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalXS);
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-Surface-Alt);
    font-size: var(--BEC-fontSizeBase200);
}

.bec-as-files__chip--failed[b-oxk6r2w4si] {
    border-color: var(--BEC-Error-Main);
    background: var(--BEC-Error-Subtle);
}

.bec-as-files__icon[b-oxk6r2w4si] {
    font-size: 18px;
    color: var(--BEC-colorBrandForeground1);
}

.bec-as-files__chip--failed .bec-as-files__icon[b-oxk6r2w4si] {
    color: var(--BEC-Error-Main);
}

/* Uploading: a still "upload" icon and the "Uploading…" text; nothing spins. */
.bec-as-files__chip--uploading .bec-as-files__icon[b-oxk6r2w4si] {
    color: var(--BEC-Text-Secondary);
}

.bec-as-files__name[b-oxk6r2w4si] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-inline-size: 220px;
    color: var(--BEC-Text-Primary);
    font-weight: var(--BEC-fontWeightSemibold);
}

.bec-as-files__meta[b-oxk6r2w4si] {
    color: var(--BEC-Text-Secondary);
}

.bec-as-files__remove[b-oxk6r2w4si] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 28px;
    block-size: 28px;
    border: 0;
    border-radius: var(--BEC-borderRadiusCircular);
    background: transparent;
    color: var(--BEC-Text-Secondary);
    cursor: pointer;
}

.bec-as-files__remove:hover[b-oxk6r2w4si] {
    background: var(--BEC-Surface-Hover);
}

.bec-as-files__remove:focus-visible[b-oxk6r2w4si] {
    outline: 2px solid var(--BEC-focus-indicator);
    outline-offset: 1px;
}

.bec-as-files__remove .material-symbols-outlined[b-oxk6r2w4si] {
    font-size: 16px;
}

.bec-as-files__error[b-oxk6r2w4si] {
    margin: 0;
    color: var(--BEC-Error-Main);
    font-size: var(--BEC-fontSizeBase200);
}
/* /Components/Pages/MainLayout/Intranet/AdminServices/AsMgmtReports.razor.rz.scp.css */
/* Reports tab. Field, table and tile styles come from AsPageFrame. --BEC-* tokens only. */

.bec-as-report__filters[b-bebg7yaijj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    align-items: end;
    gap: var(--BEC-spacingHorizontalM);
}

.bec-as-report__run[b-bebg7yaijj] {
    display: flex;
    align-items: flex-end;
}

.bec-as-report__open[b-bebg7yaijj] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--BEC-colorBrandForeground1);
    font: inherit;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
}

.bec-as-report__open:hover[b-bebg7yaijj] {
    text-decoration: underline;
}

.bec-as-report__open:focus-visible[b-bebg7yaijj] {
    outline: 2px solid var(--BEC-focus-indicator);
    outline-offset: 2px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.bec-as-report__more[b-bebg7yaijj] {
    display: flex;
    justify-content: center;
}
/* /Components/Pages/MainLayout/Intranet/AdminServices/AsNewRequestPanel.razor.rz.scp.css */
/* E-Services - new request wizard. Shared form styles (es-field, es-option, es-flash) come
   from AsPageFrame.razor.css; handoff tokens (.bec-shell), logical properties (RTL-safe). */

/* Steps strip under the panel header */
.es-stepper[b-2gtcamjyeo] {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 10px var(--space-6);
    list-style: none;
}

.es-step[b-2gtcamjyeo] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-inline-size: 0;
    color: var(--bec-slate);
    font-size: 13px;
}

.es-step + .es-step[b-2gtcamjyeo]::before {
    content: "";
    flex: 0 0 18px;
    block-size: 1px;
    background: var(--bec-border);
}

.es-step__n[b-2gtcamjyeo] {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 26px;
    block-size: 26px;
    flex-shrink: 0;
    border: 1px solid var(--bec-border);
    border-radius: 50%;
    background: var(--bec-surface);
    font-size: 12px;
    font-weight: 700;
}

.es-step__n .material-symbols-outlined[b-2gtcamjyeo] {
    font-size: 16px;
}

.es-step.is-current[b-2gtcamjyeo] {
    color: var(--bec-ink);
    font-weight: 600;
}

.es-step.is-current .es-step__n[b-2gtcamjyeo],
.es-step.is-done .es-step__n[b-2gtcamjyeo] {
    border-color: var(--bec-navy-700);
    background: var(--bec-navy-700);
    color: var(--bec-surface);
}

/* Two columns: the form and "What happens next" */
.es-cols[b-2gtcamjyeo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 28px;
}

/* Steps stay rendered while hidden (the file picker keeps its uploads); the shared .es-form
   display must not override the hidden attribute. */
.es-cols[hidden][b-2gtcamjyeo],
.es-form[hidden][b-2gtcamjyeo] {
    display: none !important;
}

@media (max-width: 780px) {
    .es-cols[b-2gtcamjyeo] {
        grid-template-columns: minmax(0, 1fr);
    }

    .es-step__t[b-2gtcamjyeo] {
        display: none;
    }

    .es-step.is-current .es-step__t[b-2gtcamjyeo] {
        display: inline;
    }
}

.es-emblem[b-2gtcamjyeo] {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--bec-tint-100);
    color: var(--bec-navy-700);
}

.es-emblem .material-symbols-outlined[b-2gtcamjyeo] {
    font-size: 22px;
}

/* Step 1: the services */
.es-choices[b-2gtcamjyeo] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.es-choices__group[b-2gtcamjyeo] {
    margin: 8px 0 0;
    color: var(--bec-slate);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.es-choices__ar[b-2gtcamjyeo] {
    margin-inline-start: 8px;
    font-family: "Noto Sans Arabic", var(--font-family-base);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}

.es-choice[b-2gtcamjyeo] {
    display: grid;
    grid-template-columns: 20px 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--bec-border);
    border-radius: 12px;
    color: var(--bec-ink);
    cursor: pointer;
}

.es-choice:hover[b-2gtcamjyeo] {
    border-color: var(--bec-navy-700);
}

.es-choice:has(input:checked)[b-2gtcamjyeo] {
    border-color: var(--bec-navy-700);
    box-shadow: 0 0 0 1px var(--bec-navy-700);
    background: var(--bec-tint-100);
}

.es-choice:has(input:focus-visible)[b-2gtcamjyeo] {
    outline: 2px solid var(--bec-navy-700);
    outline-offset: 2px;
}

.es-choice input[b-2gtcamjyeo] {
    inline-size: 18px;
    block-size: 18px;
    margin: 0;
    accent-color: var(--bec-navy-700);
}

.es-choice .es-emblem[b-2gtcamjyeo] {
    background: var(--bec-surface);
}

.es-choice strong[b-2gtcamjyeo] {
    display: block;
}

.es-choice__desc[b-2gtcamjyeo] {
    display: block;
    color: var(--bec-slate);
    font-size: 13px;
}

.es-choice__meta[b-2gtcamjyeo] {
    color: var(--bec-slate);
    font-size: 12px;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .es-choice[b-2gtcamjyeo] {
        grid-template-columns: 20px minmax(0, 1fr);
    }

    .es-choice .es-emblem[b-2gtcamjyeo],
    .es-choice__meta[b-2gtcamjyeo] {
        display: none;
    }
}

/* Step 2: the chosen service */
.es-chosen[b-2gtcamjyeo] {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--bec-bg-alt);
}

.es-chosen strong[b-2gtcamjyeo] {
    display: block;
}

.es-chosen__t[b-2gtcamjyeo] {
    color: var(--bec-slate);
    font-size: 13px;
}

/* Step 3: review */
.es-lead[b-2gtcamjyeo] {
    margin: 0;
    font-size: 15px;
}

.es-review[b-2gtcamjyeo] {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 10px 16px;
    margin: 0;
    font-size: 14px;
}

.es-review dt[b-2gtcamjyeo] {
    color: var(--bec-slate);
}

.es-review dd[b-2gtcamjyeo] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .es-review[b-2gtcamjyeo] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .es-review dd[b-2gtcamjyeo] {
        margin-block-end: 10px;
    }
}

/* What happens next */
.es-next h3[b-2gtcamjyeo] {
    margin: 0 0 12px;
    font-size: 15px;
}

.es-next ol[b-2gtcamjyeo] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.es-next li[b-2gtcamjyeo] {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    padding-block-end: 16px;
}

.es-next li[b-2gtcamjyeo]::before {
    content: "";
    position: absolute;
    inset-inline-start: 15px;
    inset-block: 34px 2px;
    inline-size: 2px;
    background: var(--bec-border);
}

.es-next li:last-child[b-2gtcamjyeo]::before {
    display: none;
}

.es-next__icon[b-2gtcamjyeo] {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    border-radius: 50%;
    background: var(--bec-tint-100);
    color: var(--bec-navy-700);
}

.es-next__icon .material-symbols-outlined[b-2gtcamjyeo] {
    font-size: 18px;
}

.es-next strong[b-2gtcamjyeo] {
    display: block;
    font-size: 13px;
}

.es-next__t[b-2gtcamjyeo] {
    display: block;
    color: var(--bec-slate);
    font-size: 12px;
}

.es-next__box[b-2gtcamjyeo] {
    margin: 4px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--bec-bg-alt);
    font-size: 13px;
    overflow-wrap: anywhere;
}

/* Sent */
.es-done[b-2gtcamjyeo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 36px 12px;
    text-align: center;
}

.es-done__icon[b-2gtcamjyeo] {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 72px;
    block-size: 72px;
    border-radius: 50%;
    background: var(--bec-tint-100);
    color: var(--bec-navy-700);
}

.es-done__icon .material-symbols-outlined[b-2gtcamjyeo] {
    font-size: 40px;
    font-variation-settings: "FILL" 1;
}

.es-done h3[b-2gtcamjyeo] {
    margin: 0;
    font-size: 22px;
}

.es-done p[b-2gtcamjyeo] {
    margin: 0;
    max-inline-size: 46ch;
    color: var(--bec-slate);
}

.es-done .es-done__no[b-2gtcamjyeo] {
    color: var(--bec-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Footer */
.es-spacer[b-2gtcamjyeo] {
    flex: 1;
}

.es-confirm[b-2gtcamjyeo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    inline-size: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bec-tint-100);
    color: var(--bec-navy-900);
}

.es-confirm p[b-2gtcamjyeo] {
    flex: 1 1 220px;
    margin: 0;
}
/* /Components/Pages/MainLayout/Intranet/AdminServices/AsPageFrame.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   Frame shared by the E-Services page and the Admin Services management page.
   Every rule reaches the pages' own markup through ::deep, so both pages, their
   child components and their side panels look the same (fields, banners, errors,
   stars, tabs, catalogue). --BEC-* semantic tokens only; logical properties only.
   ══════════════════════════════════════════════════════════════════════════════ */

.bec-as-page[b-eyl4v4h26e] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    /* Fills the content area: with the sidebar collapsed the page uses the extra width. (A 1280px
       cap used to leave an empty band on the right; the grids add columns as the page widens.) */
    inline-size: 100%;
    min-inline-size: 0;
}

@media (max-width: 720px) {
    .bec-as-page[b-eyl4v4h26e] {
        padding-inline: var(--BEC-spacingHorizontalL);
    }
}

[b-eyl4v4h26e] .bec-as-page__header h1 {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    margin: 0;
    color: var(--BEC-Text-Primary);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
}

[b-eyl4v4h26e] .bec-as-page__header h1 .material-symbols-outlined {
    color: var(--BEC-colorBrandForeground1);
}

[b-eyl4v4h26e] .bec-as-page__header p {
    margin: var(--BEC-spacingHorizontalXXS) 0 0;
    color: var(--BEC-Text-Secondary);
    font-size: var(--BEC-fontSizeBase300);
}

/* Loading is AsSkeleton (placeholder shapes); a refresh of data already shown dims it instead. */
[b-eyl4v4h26e] .is-updating {
    opacity: 0.55;
}

@media (prefers-reduced-motion: no-preference) {
    [b-eyl4v4h26e] .is-updating {
        transition: opacity 0.15s ease-out;
    }
}

[b-eyl4v4h26e] .bec-as-page__updating {
    margin: 0;
}

[b-eyl4v4h26e] .bec-as-page__note {
    margin: 0 0 var(--BEC-spacingHorizontalS);
    color: var(--BEC-Text-Secondary);
    font-size: var(--BEC-fontSizeBase200);
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */

[b-eyl4v4h26e] .bec-as-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--BEC-spacingHorizontalXS);
    border-block-end: 1px solid var(--BEC-Border-Subtle);
}

[b-eyl4v4h26e] .bec-as-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    min-block-size: 40px;
    padding-inline: var(--BEC-spacingHorizontalM);
    margin-block-end: -1px;
    border: 0;
    border-block-end: 2px solid transparent;
    background: transparent;
    color: var(--BEC-Text-Secondary);
    font: inherit;
    font-size: var(--BEC-fontSizeBase300);
    cursor: pointer;
}

[b-eyl4v4h26e] .bec-as-tabs__tab .material-symbols-outlined {
    font-size: 18px;
}

[b-eyl4v4h26e] .bec-as-tabs__tab:hover {
    color: var(--BEC-Text-Primary);
    background: var(--BEC-Surface-Hover);
}

[b-eyl4v4h26e] .bec-as-tabs__tab.is-selected {
    border-block-end-color: var(--BEC-Brand-Primary);
    color: var(--BEC-Text-Primary);
    font-weight: var(--BEC-fontWeightSemibold);
}

[b-eyl4v4h26e] .bec-as-tabs__tab:focus-visible {
    outline: 2px solid var(--BEC-focus-indicator);
    outline-offset: -2px;
}

[b-eyl4v4h26e] .bec-as-tabs__count {
    min-inline-size: 20px;
    padding-inline: var(--BEC-spacingHorizontalXS);
    border: 1px solid var(--BEC-Border-Strong);
    border-radius: var(--BEC-borderRadiusCircular);
    color: var(--BEC-Text-Primary);
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    line-height: 18px;
    text-align: center;
}

/* ── Catalogue (design A) ───────────────────────────────────────────────── */

[b-eyl4v4h26e] .bec-as-cat {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXL);
}

[b-eyl4v4h26e] .bec-as-cat__search {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    max-inline-size: 420px;
    min-block-size: 36px;
    padding-inline: var(--BEC-spacingHorizontalS);
    border: 1px solid var(--BEC-Border-Strong);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-Surface-Base);
}

[b-eyl4v4h26e] .bec-as-cat__search:focus-within {
    outline: 2px solid var(--BEC-focus-indicator);
    outline-offset: 1px;
}

[b-eyl4v4h26e] .bec-as-cat__search .material-symbols-outlined {
    font-size: 18px;
    color: var(--BEC-Text-Secondary);
}

[b-eyl4v4h26e] .bec-as-cat__search input {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    background: transparent;
    color: var(--BEC-Text-Primary);
    font: inherit;
    font-size: var(--BEC-fontSizeBase300);
}

[b-eyl4v4h26e] .bec-as-cat__search input:focus {
    outline: none;
}

[b-eyl4v4h26e] .bec-as-cat__empty {
    margin: 0;
    color: var(--BEC-Text-Secondary);
}

[b-eyl4v4h26e] .bec-as-cat__group {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

[b-eyl4v4h26e] .bec-as-cat__group h2 {
    margin: 0;
    color: var(--BEC-Text-Secondary);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[b-eyl4v4h26e] .bec-as-cat__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--BEC-spacingHorizontalS);
    margin: 0;
    padding: 0;
    list-style: none;
}

[b-eyl4v4h26e] .bec-as-cat__tile {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--BEC-spacingHorizontalS);
    row-gap: 2px;
    align-items: center;
    inline-size: 100%;
    min-block-size: 64px;
    padding: var(--BEC-spacingHorizontalM);
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-Surface-Base);
    color: var(--BEC-Text-Primary);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

[b-eyl4v4h26e] .bec-as-cat__tile:hover {
    border-color: var(--BEC-Border-Strong);
    background: var(--BEC-Surface-Hover);
}

[b-eyl4v4h26e] .bec-as-cat__tile:focus-visible {
    outline: 2px solid var(--BEC-focus-indicator);
    outline-offset: 1px;
}

[b-eyl4v4h26e] .bec-as-cat__icon {
    grid-row: span 2;
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
}

[b-eyl4v4h26e] .bec-as-cat__name {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
}

[b-eyl4v4h26e] .bec-as-cat__meta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--BEC-Text-Secondary);
    font-size: var(--BEC-fontSizeBase200);
}

[b-eyl4v4h26e] .bec-as-cat__meta .material-symbols-outlined {
    font-size: 14px;
}

/* ── Shared by every part of the page (child components, side panels) ───── */

[b-eyl4v4h26e] .bec-as-field {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

[b-eyl4v4h26e] .bec-as-field--narrow {
    max-inline-size: 220px;
}

[b-eyl4v4h26e] .bec-as-field label,
[b-eyl4v4h26e] .bec-as-field__label {
    color: var(--BEC-Text-Primary);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
}

[b-eyl4v4h26e] .bec-as-field__req,
[b-eyl4v4h26e] .bec-as-field__opt {
    color: var(--BEC-Text-Secondary);
    font-weight: var(--BEC-fontWeightRegular);
}

[b-eyl4v4h26e] .bec-as-field input,
[b-eyl4v4h26e] .bec-as-field textarea,
[b-eyl4v4h26e] .bec-as-field select {
    min-block-size: 36px;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border: 1px solid var(--BEC-Border-Strong);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-Surface-Base);
    color: var(--BEC-Text-Primary);
    font: inherit;
    font-size: var(--BEC-fontSizeBase300);
}

[b-eyl4v4h26e] .bec-as-field textarea {
    resize: vertical;
    line-height: var(--BEC-lineHeightBase300);
}

[b-eyl4v4h26e] .bec-as-field input:focus-visible,
[b-eyl4v4h26e] .bec-as-field textarea:focus-visible,
[b-eyl4v4h26e] .bec-as-field select:focus-visible {
    outline: 2px solid var(--BEC-focus-indicator);
    outline-offset: 1px;
}

[b-eyl4v4h26e] .bec-as-field [aria-invalid="true"] {
    border-color: var(--BEC-Error-Main);
}

[b-eyl4v4h26e] .bec-as-field__hint {
    color: var(--BEC-Text-Secondary);
    font-size: var(--BEC-fontSizeBase200);
}

[b-eyl4v4h26e] .bec-as-field__error {
    color: var(--BEC-Error-Main);
    font-size: var(--BEC-fontSizeBase200);
}

[b-eyl4v4h26e] .bec-as-error {
    margin: 0;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-Error-Subtle);
    color: var(--BEC-Error-Main);
    font-size: var(--BEC-fontSizeBase200);
}

[b-eyl4v4h26e] .bec-as-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM);
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-Surface-Alt);
    color: var(--BEC-Text-Primary);
    font-size: var(--BEC-fontSizeBase300);
}

[b-eyl4v4h26e] .bec-as-banner > div {
    flex: 1;
}

[b-eyl4v4h26e] .bec-as-banner--success {
    border-color: var(--BEC-Success-Main);
    background: var(--BEC-Success-Subtle);
}

[b-eyl4v4h26e] .bec-as-banner--success > .material-symbols-outlined {
    color: var(--BEC-Success-Main);
}

[b-eyl4v4h26e] .bec-as-banner--warning {
    border-color: var(--BEC-Warning-Main);
    background: var(--BEC-Warning-Subtle);
}

[b-eyl4v4h26e] .bec-as-banner--warning > .material-symbols-outlined {
    color: var(--BEC-Warning-Main);
}

[b-eyl4v4h26e] .bec-as-banner--error {
    border-color: var(--BEC-Error-Main);
    background: var(--BEC-Error-Subtle);
}

[b-eyl4v4h26e] .bec-as-banner--error > .material-symbols-outlined {
    color: var(--BEC-Error-Main);
}

[b-eyl4v4h26e] .bec-as-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

[b-eyl4v4h26e] .bec-as-stars {
    display: inline-flex;
    gap: 2px;
}

[b-eyl4v4h26e] .bec-as-stars .material-symbols-outlined {
    color: var(--BEC-Border-Strong);
    font-size: 18px;
}

[b-eyl4v4h26e] .bec-as-stars .material-symbols-outlined.is-on {
    color: var(--BEC-Warning-Main);
    font-variation-settings: 'FILL' 1;
}

[b-eyl4v4h26e] .bec-as-rating {
    display: flex;
    gap: var(--BEC-spacingHorizontalXXS);
    margin: 0;
    padding: 0;
    border: 0;
}

[b-eyl4v4h26e] .bec-as-rating__star {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-Border-Strong);
    cursor: pointer;
}

[b-eyl4v4h26e] .bec-as-rating__star input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

[b-eyl4v4h26e] .bec-as-rating__star .material-symbols-outlined {
    font-size: 28px;
}

[b-eyl4v4h26e] .bec-as-rating__star.is-on {
    color: var(--BEC-Warning-Main);
}

[b-eyl4v4h26e] .bec-as-rating__star.is-on .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

[b-eyl4v4h26e] .bec-as-rating__star:hover {
    background: var(--BEC-Surface-Hover);
}

[b-eyl4v4h26e] .bec-as-rating__star:has(input:focus-visible) {
    outline: 2px solid var(--BEC-focus-indicator);
    outline-offset: 1px;
}

/* ── Category picker (E-Services, New request) ─────────────────────────── */

[b-eyl4v4h26e] .bec-as-cat__picker {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
    max-inline-size: 420px;
}

[b-eyl4v4h26e] .bec-as-cat__picker label {
    color: var(--BEC-Text-Primary);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
}

[b-eyl4v4h26e] .bec-as-cat__picker select {
    min-block-size: 36px;
    padding-inline: var(--BEC-spacingHorizontalS);
    border: 1px solid var(--BEC-Border-Strong);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-Surface-Base);
    color: var(--BEC-Text-Primary);
    font: inherit;
    font-size: var(--BEC-fontSizeBase300);
}

[b-eyl4v4h26e] .bec-as-cat__picker select:focus-visible {
    outline: 2px solid var(--BEC-focus-indicator);
    outline-offset: 1px;
}

[b-eyl4v4h26e] .bec-as-cat__hint {
    margin: 0;
    color: var(--BEC-Text-Secondary);
    font-size: var(--BEC-fontSizeBase300);
}

/* ── Management: sections, stat tiles, tables, row actions ─────────────── */

[b-eyl4v4h26e] .bec-as-section {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

[b-eyl4v4h26e] .bec-as-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--BEC-spacingHorizontalS);
}

[b-eyl4v4h26e] .bec-as-section h2 {
    margin: 0;
    color: var(--BEC-Text-Primary);
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
}

[b-eyl4v4h26e] .bec-as-stack {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXL);
}

[b-eyl4v4h26e] .bec-as-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

[b-eyl4v4h26e] .bec-as-bar label {
    color: var(--BEC-Text-Secondary);
    font-size: var(--BEC-fontSizeBase200);
}

[b-eyl4v4h26e] .bec-as-bar select {
    min-block-size: 32px;
    padding-inline: var(--BEC-spacingHorizontalS);
    border: 1px solid var(--BEC-Border-Strong);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-Surface-Base);
    color: var(--BEC-Text-Primary);
    font: inherit;
    font-size: var(--BEC-fontSizeBase300);
}

[b-eyl4v4h26e] .bec-as-bar select:focus-visible {
    outline: 2px solid var(--BEC-focus-indicator);
    outline-offset: 1px;
}

[b-eyl4v4h26e] .bec-as-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: var(--BEC-spacingHorizontalS);
    margin: 0;
    padding: 0;
    list-style: none;
}

[b-eyl4v4h26e] .bec-as-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--BEC-spacingHorizontalM);
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-Surface-Base);
}

[b-eyl4v4h26e] .bec-as-tile__label {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    color: var(--BEC-Text-Secondary);
    font-size: var(--BEC-fontSizeBase200);
}

[b-eyl4v4h26e] .bec-as-tile__label .material-symbols-outlined {
    font-size: 16px;
    color: var(--BEC-colorBrandForeground1);
}

[b-eyl4v4h26e] .bec-as-tile--danger .bec-as-tile__label .material-symbols-outlined {
    color: var(--BEC-Error-Main);
}

[b-eyl4v4h26e] .bec-as-tile--warning .bec-as-tile__label .material-symbols-outlined {
    color: var(--BEC-Warning-Main);
}

[b-eyl4v4h26e] .bec-as-tile__value {
    color: var(--BEC-Text-Primary);
    font-size: var(--BEC-fontSizeBase600);
    font-weight: var(--BEC-fontWeightSemibold);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

[b-eyl4v4h26e] .bec-as-tile__sub {
    color: var(--BEC-Text-Secondary);
    font-size: var(--BEC-fontSizeBase200);
}

[b-eyl4v4h26e] .bec-as-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-Surface-Base);
}

[b-eyl4v4h26e] .bec-as-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--BEC-fontSizeBase300);
}

[b-eyl4v4h26e] .bec-as-table th {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border-block-end: 1px solid var(--BEC-Border-Subtle);
    background: var(--BEC-Surface-Alt);
    color: var(--BEC-Text-Secondary);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    text-align: start;
    white-space: nowrap;
}

[b-eyl4v4h26e] .bec-as-table td {
    block-size: 40px;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalM);
    border-block-end: 1px solid var(--BEC-Border-Subtle);
    color: var(--BEC-Text-Primary);
    vertical-align: middle;
}

[b-eyl4v4h26e] .bec-as-table tbody tr:last-child td {
    border-block-end: 0;
}

[b-eyl4v4h26e] .bec-as-table .is-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

[b-eyl4v4h26e] .bec-as-table .is-muted,
[b-eyl4v4h26e] .bec-as-table__sub {
    color: var(--BEC-Text-Secondary);
}

[b-eyl4v4h26e] .bec-as-table__sub {
    display: block;
    font-size: var(--BEC-fontSizeBase200);
}

[b-eyl4v4h26e] .bec-as-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--BEC-spacingHorizontalXS);
}

[b-eyl4v4h26e] .bec-as-link-button {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-block-size: 32px;
    padding-inline: var(--BEC-spacingHorizontalS);
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-Surface-Base);
    color: var(--BEC-colorBrandForeground1);
    font: inherit;
    font-size: var(--BEC-fontSizeBase200);
    cursor: pointer;
}

[b-eyl4v4h26e] .bec-as-link-button:hover {
    background: var(--BEC-Surface-Hover);
}

[b-eyl4v4h26e] .bec-as-link-button:focus-visible {
    outline: 2px solid var(--BEC-focus-indicator);
    outline-offset: 1px;
}

[b-eyl4v4h26e] .bec-as-link-button:disabled {
    color: var(--BEC-Text-Secondary);
    cursor: default;
}

[b-eyl4v4h26e] .bec-as-link-button .material-symbols-outlined {
    font-size: 16px;
}

[b-eyl4v4h26e] .bec-as-link-button--danger {
    color: var(--BEC-Error-Main);
}

[b-eyl4v4h26e] .bec-as-inline-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    color: var(--BEC-Text-Primary);
    font-size: var(--BEC-fontSizeBase200);
}

[b-eyl4v4h26e] .bec-as-check {
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalXS);
    color: var(--BEC-Text-Primary);
    font-size: var(--BEC-fontSizeBase300);
    cursor: pointer;
}

[b-eyl4v4h26e] .bec-as-check input {
    margin-block-start: 3px;
    accent-color: var(--BEC-Brand-Primary);
}

[b-eyl4v4h26e] .bec-as-table tbody th {
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalM);
    background: transparent;
    color: var(--BEC-Text-Primary);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightRegular);
    white-space: normal;
}

[b-eyl4v4h26e] a.bec-as-link-button {
    text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   E-Services redesign (30 Sep 2026): forms, boxes and messages used by the page and
   its side panels (new request, my request, agent). White and blue: the handoff
   tokens of .bec-shell (docs/design-system/handoff/tokens.css), logical properties.
   ══════════════════════════════════════════════════════════════════════════════ */

[b-eyl4v4h26e] .es-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-inline-size: 0;
}

[b-eyl4v4h26e] .es-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-eyl4v4h26e] .es-field--narrow {
    max-inline-size: 240px;
}

[b-eyl4v4h26e] .es-label,
[b-eyl4v4h26e] .es-field > label {
    color: var(--bec-ink);
    font-size: 14px;
    font-weight: 600;
}

[b-eyl4v4h26e] .es-opt {
    color: var(--bec-slate);
    font-weight: 400;
}

[b-eyl4v4h26e] .es-field input[type="text"],
[b-eyl4v4h26e] .es-field input[type="email"],
[b-eyl4v4h26e] .es-field input[type="number"],
[b-eyl4v4h26e] .es-field input[type="date"],
[b-eyl4v4h26e] .es-field textarea,
[b-eyl4v4h26e] .es-field select {
    inline-size: 100%;
    min-block-size: var(--hit-target-min);
    padding: 10px 12px;
    border: 1px solid var(--bec-border);
    border-radius: var(--radius-md);
    background: var(--bec-surface);
    color: var(--bec-ink);
    font: inherit;
    font-size: 14px;
}

[b-eyl4v4h26e] .es-field textarea {
    min-block-size: 88px;
    resize: vertical;
    line-height: 1.5;
}

[b-eyl4v4h26e] .es-field input:focus-visible,
[b-eyl4v4h26e] .es-field textarea:focus-visible,
[b-eyl4v4h26e] .es-field select:focus-visible {
    outline: 2px solid var(--bec-navy-700);
    outline-offset: 1px;
    border-color: var(--bec-navy-700);
}

[b-eyl4v4h26e] .es-field [aria-invalid="true"] {
    border-color: var(--bec-danger);
}

[b-eyl4v4h26e] .es-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--bec-slate);
    font-size: 12px;
}

[b-eyl4v4h26e] .es-hint .material-symbols-outlined {
    font-size: 16px;
}

[b-eyl4v4h26e] .es-error {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    color: var(--bec-danger);
    font-size: 13px;
}

[b-eyl4v4h26e] .es-error .material-symbols-outlined {
    font-size: 16px;
}

[b-eyl4v4h26e] .es-note {
    margin: 0;
    color: var(--bec-slate);
    font-size: 12px;
}

[b-eyl4v4h26e] .es-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

[b-eyl4v4h26e] .es-row--end {
    justify-content: flex-end;
}

[b-eyl4v4h26e] .es-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--bec-border);
    border-radius: 12px;
    background: var(--bec-surface);
}

[b-eyl4v4h26e] .es-box h3,
[b-eyl4v4h26e] .es-section h3 {
    margin: 0;
    color: var(--bec-ink);
    font-size: 15px;
}

[b-eyl4v4h26e] .es-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[b-eyl4v4h26e] .es-callout {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 2px solid var(--bec-navy-700);
    border-radius: 12px;
    background: var(--bec-surface);
}

[b-eyl4v4h26e] .es-callout--quiet {
    border: 1px solid var(--bec-border);
}

[b-eyl4v4h26e] .es-callout__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--bec-navy-700);
    font-size: 15px;
    font-weight: 700;
}

[b-eyl4v4h26e] .es-callout--quiet .es-callout__head {
    color: var(--bec-ink);
}

[b-eyl4v4h26e] .es-callout__text {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

[b-eyl4v4h26e] .es-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bec-bg-alt);
    color: var(--bec-ink);
    font-size: 13px;
}

[b-eyl4v4h26e] .es-warn .material-symbols-outlined {
    font-size: 18px;
    color: var(--bec-navy-700);
}

[b-eyl4v4h26e] .es-flash {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bec-tint-100);
    color: var(--bec-navy-900);
    font-weight: 600;
}

[b-eyl4v4h26e] .es-flash .material-symbols-outlined {
    color: var(--bec-navy-700);
}

[b-eyl4v4h26e] .es-flash:focus {
    outline: none;
}

[b-eyl4v4h26e] .es-flash--error {
    background: var(--bec-danger-bg);
    color: var(--bec-danger);
}

[b-eyl4v4h26e] .es-flash--error .material-symbols-outlined {
    color: var(--bec-danger);
}

/* Label / value list at the top of a request */
[b-eyl4v4h26e] .es-meta {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 6px 14px;
    margin: 0;
    font-size: 13px;
}

[b-eyl4v4h26e] .es-meta dt {
    color: var(--bec-slate);
}

[b-eyl4v4h26e] .es-meta dd {
    margin: 0;
    overflow-wrap: anywhere;
}

[b-eyl4v4h26e] .es-status-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

/* Switch (internal note) */
[b-eyl4v4h26e] .es-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: var(--hit-target-min);
    color: var(--bec-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

[b-eyl4v4h26e] .es-switch input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}

[b-eyl4v4h26e] .es-switch__track {
    position: relative;
    inline-size: 38px;
    block-size: 22px;
    flex-shrink: 0;
    border-radius: 11px;
    background: var(--bec-border);
    transition: background var(--duration-hover) var(--ease-standard);
}

[b-eyl4v4h26e] .es-switch__track::after {
    content: "";
    position: absolute;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    inline-size: 16px;
    block-size: 16px;
    border-radius: 50%;
    background: var(--bec-surface);
    box-shadow: var(--shadow-resting);
    transition: inset-inline-start var(--duration-hover) var(--ease-standard);
}

[b-eyl4v4h26e] .es-switch input:checked + .es-switch__track {
    background: var(--bec-navy-700);
}

[b-eyl4v4h26e] .es-switch input:checked + .es-switch__track::after {
    inset-inline-start: 19px;
}

[b-eyl4v4h26e] .es-switch input:focus-visible + .es-switch__track {
    outline: 2px solid var(--bec-navy-700);
    outline-offset: 2px;
}

/* Two-way choice (Comment | Change status) */
[b-eyl4v4h26e] .es-segmented {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: var(--bec-bg-alt);
}

[b-eyl4v4h26e] .es-segmented button {
    min-block-size: 36px;
    padding-inline: 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--bec-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

[b-eyl4v4h26e] .es-segmented button[aria-pressed="true"] {
    background: var(--bec-surface);
    color: var(--bec-navy-700);
    box-shadow: var(--shadow-resting);
}

[b-eyl4v4h26e] .es-segmented button:focus-visible {
    outline: 2px solid var(--bec-navy-700);
    outline-offset: 1px;
}

/* Radio options (status to set, category) */
[b-eyl4v4h26e] .es-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

[b-eyl4v4h26e] .es-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 42px;
    padding-inline: 12px 14px;
    border: 1px solid var(--bec-border);
    border-radius: 10px;
    color: var(--bec-ink);
    font-weight: 600;
    cursor: pointer;
}

[b-eyl4v4h26e] .es-option input {
    margin: 0;
    accent-color: var(--bec-navy-700);
}

[b-eyl4v4h26e] .es-option .material-symbols-outlined {
    color: var(--bec-navy-700);
}

[b-eyl4v4h26e] .es-option:has(input:checked) {
    border-color: var(--bec-navy-700);
    box-shadow: 0 0 0 1px var(--bec-navy-700);
    background: var(--bec-tint-100);
}

[b-eyl4v4h26e] .es-option:has(input:focus-visible) {
    outline: 2px solid var(--bec-navy-700);
    outline-offset: 2px;
}

/* Rating stars */
[b-eyl4v4h26e] .es-stars {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
}

[b-eyl4v4h26e] .es-star {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--hit-target-min);
    block-size: var(--hit-target-min);
    border-radius: 10px;
    color: var(--bec-slate);
    cursor: pointer;
}

[b-eyl4v4h26e] .es-star input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

[b-eyl4v4h26e] .es-star .material-symbols-outlined {
    font-size: 28px;
}

[b-eyl4v4h26e] .es-star.is-on {
    color: var(--bec-navy-700);
}

[b-eyl4v4h26e] .es-star.is-on .material-symbols-outlined {
    font-variation-settings: "FILL" 1;
}

[b-eyl4v4h26e] .es-star:has(input:focus-visible) {
    outline: 2px solid var(--bec-navy-700);
    outline-offset: 1px;
}

[b-eyl4v4h26e] .es-danger.bec-btn {
    background: var(--bec-danger);
    color: var(--bec-surface);
}

[b-eyl4v4h26e] .es-danger.bec-btn:hover {
    background: var(--bec-danger);
    filter: brightness(0.92);
}

[b-eyl4v4h26e] .es-detail {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@media (max-width: 560px) {
    [b-eyl4v4h26e] .es-meta {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    [b-eyl4v4h26e] .es-meta dd {
        margin-block-end: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [b-eyl4v4h26e] .es-switch__track,
    [b-eyl4v4h26e] .es-switch__track::after {
        transition: none;
    }
}
/* /Components/Pages/MainLayout/Intranet/AdminServices/AsRequestPanel.razor.rz.scp.css */
/* E-Services - the requester's request panel. Shared styles (es-detail, es-meta, es-callout,
   es-box, es-stars, es-flash) come from AsPageFrame.razor.css. */

.es-cancel-row[b-czo96fjcsb] {
    padding-block-start: 12px;
    border-block-start: 1px solid var(--bec-border);
}
/* /Components/Pages/MainLayout/Intranet/AdminServices/AsServiceEditPanel.razor.rz.scp.css */
/* Service edit panel. Field styles come from AsPageFrame. --BEC-* tokens only. */

.bec-as-form[b-6v0mko7oeq] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
}
/* /Components/Pages/MainLayout/Intranet/AdminServices/AsSkeleton.razor.rz.scp.css */
/* Loading placeholders (AsSkeleton): the same sizes as the content they stand in for.
   --BEC-* semantic tokens only; logical properties only. */

.bec-as-skel[b-jg7fcu3i5y] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
}

.bec-as-skel--tabs[b-jg7fcu3i5y] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXL);
    min-block-size: 40px;
    padding-inline: var(--BEC-spacingHorizontalM);
    border-block-end: 1px solid var(--BEC-Border-Subtle);
}

.bec-as-skel__label[b-jg7fcu3i5y] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.bec-as-skel__block[b-jg7fcu3i5y] {
    display: block;
    border-radius: var(--BEC-borderRadiusMedium);
    background-color: var(--BEC-Border-Subtle);
}

@media (prefers-reduced-motion: no-preference) {
    .bec-as-skel__block[b-jg7fcu3i5y] {
        background-image: linear-gradient(90deg, transparent 0%, var(--BEC-Surface-Alt) 50%, transparent 100%);
        background-repeat: no-repeat;
        background-size: 200% 100%;
        animation: bec-as-shimmer-b-jg7fcu3i5y 1.6s ease-in-out infinite;
    }
}

@keyframes bec-as-shimmer-b-jg7fcu3i5y {
    from {
        background-position: 150% 0;
    }

    to {
        background-position: -50% 0;
    }
}

.bec-as-skel__tab[b-jg7fcu3i5y] {
    inline-size: 104px;
    block-size: 16px;
}

.bec-as-skel__label-line[b-jg7fcu3i5y] {
    inline-size: 72px;
    block-size: 14px;
}

.bec-as-skel__input[b-jg7fcu3i5y] {
    inline-size: min(420px, 100%);
    block-size: 36px;
    margin-block-start: calc(-1 * var(--BEC-spacingHorizontalS));
}

.bec-as-skel__heading[b-jg7fcu3i5y] {
    inline-size: 160px;
    block-size: 12px;
    margin-block-start: var(--BEC-spacingHorizontalS);
}

.bec-as-skel__grid[b-jg7fcu3i5y] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--BEC-spacingHorizontalS);
}

.bec-as-skel__grid--tiles[b-jg7fcu3i5y] {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.bec-as-skel__card[b-jg7fcu3i5y] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    min-block-size: 64px;
    padding: var(--BEC-spacingHorizontalM);
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-Surface-Base);
}

.bec-as-skel__card--stack[b-jg7fcu3i5y] {
    flex-direction: column;
    align-items: stretch;
}

.bec-as-skel__icon[b-jg7fcu3i5y] {
    flex: none;
    inline-size: 24px;
    block-size: 24px;
}

.bec-as-skel__lines[b-jg7fcu3i5y] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-inline-size: 0;
}

.bec-as-skel__line[b-jg7fcu3i5y] {
    inline-size: 80%;
    block-size: 12px;
}

.bec-as-skel__line--short[b-jg7fcu3i5y] {
    inline-size: 45%;
}

.bec-as-skel__line--tiny[b-jg7fcu3i5y] {
    inline-size: 20%;
}

.bec-as-skel__value[b-jg7fcu3i5y] {
    inline-size: 40%;
    block-size: 24px;
}

.bec-as-skel__table[b-jg7fcu3i5y],
.bec-as-skel__list[b-jg7fcu3i5y] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-Surface-Base);
}

.bec-as-skel__row[b-jg7fcu3i5y] {
    display: grid;
    grid-template-columns: 3fr 2fr 1fr;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    min-block-size: 40px;
    padding-inline: var(--BEC-spacingHorizontalM);
    border-block-end: 1px solid var(--BEC-Border-Subtle);
}

.bec-as-skel__row--head[b-jg7fcu3i5y] {
    display: flex;
    min-block-size: 36px;
    background: var(--BEC-Surface-Alt);
}

.bec-as-skel__item[b-jg7fcu3i5y] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    min-block-size: 56px;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border-block-end: 1px solid var(--BEC-Border-Subtle);
}

.bec-as-skel__row:last-child[b-jg7fcu3i5y],
.bec-as-skel__item:last-child[b-jg7fcu3i5y] {
    border-block-end: 0;
}

.bec-as-skel__badge[b-jg7fcu3i5y] {
    flex: none;
    inline-size: 88px;
    block-size: 20px;
    border-radius: var(--BEC-borderRadiusCircular);
}

@media (forced-colors: active) {
    .bec-as-skel__block[b-jg7fcu3i5y] {
        background: CanvasText;
        opacity: 0.15;
    }
}
/* /Components/Pages/MainLayout/Intranet/AdminServices/AsStatus.razor.rz.scp.css */
.as-status[b-y0tjwkjmnh] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.as-status .material-symbols-outlined[b-y0tjwkjmnh] {
    font-size: 18px;
}

.as-status--attn[b-y0tjwkjmnh] {
    color: var(--bec-navy-700);
    font-weight: 700;
}

.as-status--attn .material-symbols-outlined[b-y0tjwkjmnh],
.as-status--ok .material-symbols-outlined[b-y0tjwkjmnh] {
    font-variation-settings: "FILL" 1;
}

.as-status--progress[b-y0tjwkjmnh] {
    color: var(--bec-navy-700);
}

.as-status--open[b-y0tjwkjmnh] {
    color: var(--bec-slate);
}

.as-status--ok[b-y0tjwkjmnh] {
    color: var(--bec-navy-900);
}

.as-status--no[b-y0tjwkjmnh] {
    color: var(--bec-ink);
}
/* /Components/Pages/MainLayout/Intranet/AdminServices/AsThread.razor.rz.scp.css */
/* E-Services activity - handoff tokens (.bec-shell), logical properties (RTL-safe). */

.as-thread[b-j8l8mqrk0z] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.as-thread__empty[b-j8l8mqrk0z] {
    margin: 0;
    color: var(--bec-slate);
    font-size: 13px;
}

/* Comments */
.as-msg[b-j8l8mqrk0z] {
    align-self: flex-start;
    max-inline-size: 88%;
    padding: 10px 12px;
    border: 1px solid var(--bec-border);
    border-radius: 12px;
    background: var(--bec-surface);
    color: var(--bec-ink);
    font-size: 14px;
}

.as-msg--mine[b-j8l8mqrk0z] {
    align-self: flex-end;
    border-color: transparent;
    background: var(--bec-tint-100);
}

.as-msg--note[b-j8l8mqrk0z] {
    border: 1px dashed var(--bec-navy-700);
    background: var(--bec-bg-alt);
}

.as-msg__who[b-j8l8mqrk0z] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin-block-end: 4px;
    color: var(--bec-slate);
    font-size: 12px;
}

.as-msg__who strong[b-j8l8mqrk0z] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--bec-ink);
    font-size: 13px;
}

.as-msg__who .material-symbols-outlined[b-j8l8mqrk0z] {
    font-size: 16px;
    color: var(--bec-navy-700);
}

.as-msg p[b-j8l8mqrk0z],
.as-evt p[b-j8l8mqrk0z] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.as-msg__answers[b-j8l8mqrk0z] {
    display: grid;
    gap: 4px;
    margin: 8px 0 0;
    font-size: 13px;
}

.as-msg__answers div[b-j8l8mqrk0z] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.as-msg__answers dt[b-j8l8mqrk0z] {
    color: var(--bec-slate);
}

.as-msg__answers dd[b-j8l8mqrk0z] {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Status changes and system events */
.as-evt[b-j8l8mqrk0z] {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    padding-inline: 4px;
    color: var(--bec-slate);
    font-size: 13px;
}

.as-evt > .material-symbols-outlined[b-j8l8mqrk0z] {
    font-size: 20px;
    color: var(--bec-navy-700);
}

.as-evt strong[b-j8l8mqrk0z] {
    color: var(--bec-ink);
}

.as-evt p[b-j8l8mqrk0z] {
    margin-block-start: 4px;
    color: var(--bec-ink);
    font-size: 14px;
}

.as-sys[b-j8l8mqrk0z] {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    padding-inline: 4px;
    color: var(--bec-slate);
    font-size: 12px;
}

.as-sys .material-symbols-outlined[b-j8l8mqrk0z] {
    font-size: 18px;
}

/* Files */
.as-files[b-j8l8mqrk0z] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.as-file[b-j8l8mqrk0z] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-inline-size: 100%;
    min-block-size: 32px;
    padding: 4px 8px;
    border: 1px solid var(--bec-border);
    border-radius: 8px;
    background: var(--bec-surface);
    color: var(--bec-navy-700);
    font-size: 12px;
    text-decoration: none;
}

.as-file:hover[b-j8l8mqrk0z] {
    border-color: var(--bec-navy-700);
}

.as-file:focus-visible[b-j8l8mqrk0z] {
    outline: 2px solid var(--bec-navy-700);
    outline-offset: 2px;
}

.as-file .material-symbols-outlined[b-j8l8mqrk0z] {
    font-size: 16px;
}

.as-file__name[b-j8l8mqrk0z] {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.as-file__size[b-j8l8mqrk0z] {
    color: var(--bec-slate);
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/MainLayout/Intranet/AdminServices/AsTicketList.razor.rz.scp.css */
/* Admin Services request list. --BEC-* tokens only, logical properties (RTL-safe). */

.bec-as-list[b-eiacwdr8qo] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
}

.bec-as-list__filters[b-eiacwdr8qo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.bec-as-list__search[b-eiacwdr8qo] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    flex: 1 1 260px;
    max-inline-size: 360px;
    min-block-size: 32px;
    padding-inline: var(--BEC-spacingHorizontalS);
    border: 1px solid var(--BEC-Border-Strong);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-Surface-Base);
}

.bec-as-list__search .material-symbols-outlined[b-eiacwdr8qo] {
    font-size: 18px;
    color: var(--BEC-Text-Secondary);
}

.bec-as-list__search input[b-eiacwdr8qo] {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    background: transparent;
    color: var(--BEC-Text-Primary);
    font: inherit;
    font-size: var(--BEC-fontSizeBase300);
}

.bec-as-list__search input:focus[b-eiacwdr8qo] {
    outline: none;
}

.bec-as-list__search:focus-within[b-eiacwdr8qo] {
    outline: 2px solid var(--BEC-focus-indicator);
    outline-offset: 1px;
}

.bec-as-list__filters select[b-eiacwdr8qo] {
    min-block-size: 32px;
    padding-inline: var(--BEC-spacingHorizontalS);
    border: 1px solid var(--BEC-Border-Strong);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-Surface-Base);
    color: var(--BEC-Text-Primary);
    font: inherit;
    font-size: var(--BEC-fontSizeBase300);
}

.bec-as-list__filters select:focus-visible[b-eiacwdr8qo] {
    outline: 2px solid var(--BEC-focus-indicator);
    outline-offset: 1px;
}

.bec-as-list__count[b-eiacwdr8qo] {
    margin-inline-start: auto;
    color: var(--BEC-Text-Secondary);
    font-size: var(--BEC-fontSizeBase200);
}

.bec-as-list__empty[b-eiacwdr8qo] {
    margin: 0;
    padding: var(--BEC-spacingHorizontalXXL) var(--BEC-spacingHorizontalL);
    border: 1px dashed var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-Text-Secondary);
    text-align: center;
}

.bec-as-list__scroll[b-eiacwdr8qo] {
    overflow-x: auto;
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-Surface-Base);
}

.bec-as-list__table[b-eiacwdr8qo] {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--BEC-fontSizeBase300);
}

.bec-as-list__table th[b-eiacwdr8qo] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border-block-end: 1px solid var(--BEC-Border-Subtle);
    background: var(--BEC-Surface-Alt);
    color: var(--BEC-Text-Secondary);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    text-align: start;
    white-space: nowrap;
}

.bec-as-list__table td[b-eiacwdr8qo] {
    block-size: 40px;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalM);
    border-block-end: 1px solid var(--BEC-Border-Subtle);
    color: var(--BEC-Text-Primary);
    vertical-align: middle;
}

.bec-as-list__table tbody tr[b-eiacwdr8qo] {
    cursor: pointer;
}

.bec-as-list__table tbody tr:last-child td[b-eiacwdr8qo] {
    border-block-end: 0;
}

.bec-as-list__table tbody tr:hover td[b-eiacwdr8qo],
.bec-as-list__table tbody tr.is-selected td[b-eiacwdr8qo] {
    background: var(--BEC-Surface-Hover);
}

.bec-as-list__open[b-eiacwdr8qo] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.bec-as-list__open:focus-visible[b-eiacwdr8qo] {
    outline: 2px solid var(--BEC-focus-indicator);
    outline-offset: 2px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.bec-as-list__number[b-eiacwdr8qo] {
    color: var(--BEC-Text-Secondary);
    font-size: var(--BEC-fontSizeBase200);
}

.bec-as-list__subject[b-eiacwdr8qo] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

.bec-as-list__unread[b-eiacwdr8qo] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-block-start: 2px;
    color: var(--BEC-Info-Main);
    font-size: var(--BEC-fontSizeBase100);
}

.bec-as-list__unread .material-symbols-outlined[b-eiacwdr8qo] {
    font-size: 14px;
}

.bec-as-list__date[b-eiacwdr8qo] {
    color: var(--BEC-Text-Secondary);
    white-space: nowrap;
}

.bec-as-list__more[b-eiacwdr8qo] {
    display: flex;
    justify-content: center;
}

.bec-as-list__unassigned[b-eiacwdr8qo] {
    color: var(--BEC-Text-Secondary);
    font-style: italic;
}
/* /Components/Pages/MainLayout/Intranet/AdminServices/AsUserPicker.razor.rz.scp.css */
/* Agent picker. --BEC-* tokens only, logical properties (RTL-safe). */

.bec-as-picker[b-766i8wgz6g] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.bec-as-picker__search[b-766i8wgz6g] {
    display: flex;
    gap: var(--BEC-spacingHorizontalXS);
}

.bec-as-picker__search input[b-766i8wgz6g] {
    flex: 1;
    min-inline-size: 0;
}

.bec-as-picker__note[b-766i8wgz6g] {
    margin: 0;
    color: var(--BEC-Text-Secondary);
    font-size: var(--BEC-fontSizeBase200);
}

.bec-as-picker__list[b-766i8wgz6g] {
    display: flex;
    flex-direction: column;
    max-block-size: 280px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusMedium);
}

.bec-as-picker__option[b-766i8wgz6g] {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--BEC-spacingHorizontalS);
    align-items: center;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border-block-end: 1px solid var(--BEC-Border-Subtle);
    cursor: pointer;
}

.bec-as-picker__option:last-child[b-766i8wgz6g] {
    border-block-end: 0;
}

.bec-as-picker__option:hover[b-766i8wgz6g],
.bec-as-picker__option.is-selected[b-766i8wgz6g] {
    background: var(--BEC-Surface-Hover);
}

.bec-as-picker__option:has(input:focus-visible)[b-766i8wgz6g] {
    outline: 2px solid var(--BEC-focus-indicator);
    outline-offset: -2px;
}

.bec-as-picker__option input[b-766i8wgz6g] {
    grid-row: span 2;
    margin: 0;
    accent-color: var(--BEC-Brand-Primary);
}

.bec-as-picker__name[b-766i8wgz6g] {
    color: var(--BEC-Text-Primary);
    font-size: var(--BEC-fontSizeBase300);
}

.bec-as-picker__email[b-766i8wgz6g] {
    color: var(--BEC-Text-Secondary);
    font-size: var(--BEC-fontSizeBase200);
}
/* /Components/Pages/MainLayout/Intranet/Birthday/BirthdayAdministration.razor.rz.scp.css */
/* ========================================
   BIRTHDAY ADMINISTRATION - 100% SYNCFUSION NATIVE RESPONSIVE
   
   FEATURES:
   ✅ 100% Syncfusion EnableAdaptiveUI (automatic mobile/tablet optimization)
   ✅ 100% Syncfusion HideAtMedia (responsive column hiding)
   ✅ BEC Theme variables only (no hardcoded values)
   ✅ No inline styles (all CSS in this file)
   ✅ NO custom media queries (all responsive via Syncfusion)
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-n3epvjkiv6] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-n3epvjkiv6] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-n3epvjkiv6] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-n3epvjkiv6] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-n3epvjkiv6] {
    display: none;
}

.header-right[b-n3epvjkiv6] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-n3epvjkiv6] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-n3epvjkiv6] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-card-upcoming .stat-value[b-n3epvjkiv6] {
    color: #d97706;
}

.stat-label[b-n3epvjkiv6] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-n3epvjkiv6] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   ACTION TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-n3epvjkiv6] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-n3epvjkiv6] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-n3epvjkiv6] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-n3epvjkiv6] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-n3epvjkiv6] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-n3epvjkiv6] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-n3epvjkiv6] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-n3epvjkiv6] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-n3epvjkiv6] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-n3epvjkiv6] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-n3epvjkiv6] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* SEARCH TEXTBOX IN TOOLBAR */
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-textbox,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input-group,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input.e-control-wrapper,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group.e-control-wrapper {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 0.5px solid var(--BEC-colorNeutralStroke1) !important;
    border-width: 0.5px !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
}

[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group .e-input,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper .e-input,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 22px !important;
    height: 22px !important;
    box-sizing: border-box !important;
    border: none !important;
}

[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox:focus-within,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox.e-input-group:focus-within,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-control-wrapper:focus-within,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-float-input:focus-within {
    border-width: 0.5px !important;
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15) !important;
}

[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-textbox .e-input-group-icon,
[b-n3epvjkiv6] .e-toolbar.e-control .e-toolbar-items .e-toolbar-item .e-input-group .e-input-group-icon {
    border: none !important;
    height: 22px !important;
}

/* ========================================
   TOOLBAR OVERFLOW POPUP
   ======================================== */
[b-n3epvjkiv6] .e-toolbar-pop.e-popup {
    top: 58px !important;
    margin-top: 0 !important;
}

[b-n3epvjkiv6] .e-toolbar-pop.e-popup.e-popup-open {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* ========================================
   PAGE CONTENT - Grid Container
   ======================================== */
.erp-page-content[b-n3epvjkiv6] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    overflow: visible;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-state[b-n3epvjkiv6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 48px 24px;
    color: var(--BEC-colorNeutralForeground3);
}

.error-state i[b-n3epvjkiv6] {
    font-size: 32px;
    color: #dc2626;
}

.error-state p[b-n3epvjkiv6] {
    font-size: 14px;
    margin: 0;
}

.error-state .btn[b-n3epvjkiv6] {
    padding: 6px 16px;
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorBrandBackground);
    background: var(--BEC-colorBrandBackground);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.error-state .btn:hover[b-n3epvjkiv6] {
    opacity: 0.9;
}

/* ========================================
   EMPLOYEE CELL - Avatar + Name Layout
   ======================================== */
.employee-cell[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.avatar-circle[b-n3epvjkiv6] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    line-height: 1;
    flex-shrink: 0;
}

.avatar-initials[b-n3epvjkiv6] {
    background: var(--BEC-colorBrandBackground);
    color: #fff;
}

.avatar-photo[b-n3epvjkiv6] {
    object-fit: cover;
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.employee-name[b-n3epvjkiv6] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   BIRTHDAY BADGES
   ======================================== */
.birthday-badge[b-n3epvjkiv6] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
}

.birthday-today-badge[b-n3epvjkiv6] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.birthday-upcoming-badge[b-n3epvjkiv6] {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

/* ========================================
   BIRTHDAY DATE CELL
   ======================================== */
.birthday-date-cell[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.birthday-icon[b-n3epvjkiv6] {
    color: #d97706;
    font-size: 11px;
}

/* ========================================
   GRID STYLING - COMPACT ROWS (32px)
   ======================================== */

/* Grid Container - Rounded Corners */
[b-n3epvjkiv6] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid Header */
[b-n3epvjkiv6] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

/* Grid Content */
[b-n3epvjkiv6] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* Selected Row Highlighting */
[b-n3epvjkiv6] .e-grid .e-row.e-selectionbackground,
[b-n3epvjkiv6] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-n3epvjkiv6] .e-grid .e-row.e-selectionbackground:hover,
[b-n3epvjkiv6] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent */
[b-n3epvjkiv6] .e-grid .e-row.e-selectionbackground td:first-child,
[b-n3epvjkiv6] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - Compact (32px) */
[b-n3epvjkiv6] .e-grid .e-row {
    height: 32px !important;
}

[b-n3epvjkiv6] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - Compact */
[b-n3epvjkiv6] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid Row Hover */
[b-n3epvjkiv6] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Virtual Scrolling Hardware Acceleration */
[b-n3epvjkiv6] .birthday-admin-grid {
    will-change: scroll-position;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    contain: layout style paint;
    isolation: isolate;
}

[b-n3epvjkiv6] .birthday-admin-grid .e-virtualtrack {
    will-change: height;
    contain: layout;
}

/* Custom Scrollbar */
[b-n3epvjkiv6] .birthday-admin-grid .e-gridcontent::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[b-n3epvjkiv6] .birthday-admin-grid .e-gridcontent::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 6px;
    margin: 2px;
}

[b-n3epvjkiv6] .birthday-admin-grid .e-gridcontent::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2);
    border-radius: 6px;
    border: 2px solid var(--BEC-colorNeutralBackground2);
    transition: background 0.2s ease;
}

[b-n3epvjkiv6] .birthday-admin-grid .e-gridcontent::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorBrandBackground);
}

[b-n3epvjkiv6] .birthday-admin-grid .e-gridcontent::-webkit-scrollbar-thumb:active {
    background: var(--BEC-colorBrandBackgroundPressed);
}

/* ========================================
   MONTHLY POSTER DIALOG
   ======================================== */
[b-n3epvjkiv6] .poster-dialog .e-dlg-header {
    font-size: 14px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

.poster-loading[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    position: relative;
}

.poster-preview-container[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
}

.poster-preview-image[b-n3epvjkiv6] {
    max-width: 100%;
    height: auto;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.poster-form[b-n3epvjkiv6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.poster-form-group[b-n3epvjkiv6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.poster-form-label[b-n3epvjkiv6] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
}

[b-n3epvjkiv6] .poster-input {
    width: 100% !important;
}

[b-n3epvjkiv6] .poster-input-rtl .e-input {
    direction: rtl;
    text-align: right;
}

[b-n3epvjkiv6] .poster-textarea .e-textarea,
[b-n3epvjkiv6] .poster-textarea textarea {
    min-height: 144px;
    line-height: 1.45;
    resize: vertical;
}

[b-n3epvjkiv6] .poster-textarea-rtl .e-textarea,
[b-n3epvjkiv6] .poster-textarea-rtl textarea {
    direction: rtl;
    text-align: right;
}

.poster-input-helper[b-n3epvjkiv6] {
    display: flex;
    justify-content: flex-end;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

.poster-message[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 12px;
    margin-top: 12px;
}

.poster-message-success[b-n3epvjkiv6] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.poster-message-error[b-n3epvjkiv6] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.poster-confirm-text[b-n3epvjkiv6] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    line-height: 1.5;
}

[b-n3epvjkiv6] .poster-dialog .e-footer-content {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px !important;
}

[b-n3epvjkiv6] .poster-dialog .e-footer-content .e-btn {
    font-size: 12px !important;
    padding: 6px 16px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

[b-n3epvjkiv6] .poster-dialog .e-footer-content .e-danger {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}

[b-n3epvjkiv6] .poster-dialog .e-footer-content .e-danger:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}

[b-n3epvjkiv6] .birthday-admin-grid .e-gridcontent::-webkit-scrollbar-corner {
    background: var(--BEC-colorNeutralBackground2);
}

/* Firefox scrollbar */
[b-n3epvjkiv6] .birthday-admin-grid .e-gridcontent {
    scrollbar-width: thin;
    scrollbar-color: var(--BEC-colorNeutralStroke2) var(--BEC-colorNeutralBackground2);
}

/* Smooth selection highlight */
[b-n3epvjkiv6] .birthday-admin-grid .e-selectionbackground {
    transition: background-color 0.15s ease;
}

/* Loading indicator for virtual scrolling */
[b-n3epvjkiv6] .birthday-admin-grid .e-spinner-pane {
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* ========================================
   FILTERED COLUMN INDICATOR
   ======================================== */
[b-n3epvjkiv6] .birthday-admin-grid .e-headercell .e-filtered::before {
    color: var(--BEC-colorBrandForeground1) !important;
}

[b-n3epvjkiv6] .birthday-admin-grid .e-headercell .e-headercelldiv {
    transition: color 0.2s ease;
}

[b-n3epvjkiv6] .birthday-admin-grid .e-filtered~.e-headercelldiv,
[b-n3epvjkiv6] .birthday-admin-grid .e-filtered~.e-headertext,
[b-n3epvjkiv6] .birthday-admin-grid .e-headercell:has(.e-filtered) .e-headercelldiv,
[b-n3epvjkiv6] .birthday-admin-grid .e-headercell:has(.e-filtered) .e-headertext {
    color: var(--BEC-colorBrandForeground1) !important;
    font-weight: 600 !important;
}

[b-n3epvjkiv6] .birthday-admin-grid .e-headercell:has(.e-filtered) .e-sortfilterdiv .e-icon-ascending,
[b-n3epvjkiv6] .birthday-admin-grid .e-headercell:has(.e-filtered) .e-sortfilterdiv .e-icon-descending {
    color: var(--BEC-colorBrandForeground1) !important;
}

/* ========================================
   UNIFIED LOADING SPINNER - Tailwind3 Style
   ======================================== */
[b-n3epvjkiv6] .e-spinner-pane.e-spin-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.97) !important;
    z-index: 50 !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
}

[b-n3epvjkiv6] .e-spinner-pane .e-spin-label {
    font-size: 18px !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    margin-top: 20px !important;
}

[b-n3epvjkiv6] .e-spinner-pane .e-spinner-inner {
    border-color: rgba(0, 120, 212, 0.1) !important;
    border-top-color: var(--BEC-colorBrandBackground) !important;
}

/* ========================================
   EXCEL FILTER DIALOG
   ======================================== */
/* Sizing for this popup now lives in wwwroot/css/overrides/_syncfusion-responsive.css.
   Syncfusion renders .e-excelfilter at BODY level, outside this component, so the
   ::deep rules that used to sit here never matched anything — the popup rendered
   ~560px wide and tall enough to cover the toolbar despite saying 450px. Kept as a
   note rather than deleted silently, because the same dead block exists on Branch,
   Company, Department and Organization administration and will mislead the next
   person who tries to fix it there. */

/* ========================================
   POSTER GALLERY DIALOG
   ======================================== */
[b-n3epvjkiv6] .gallery-dialog .e-dlg-header {
    font-size: 14px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

.gallery-loading[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    position: relative;
}

.gallery-error[b-n3epvjkiv6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--BEC-colorNeutralForeground3);
}

.gallery-error i[b-n3epvjkiv6] {
    font-size: 28px;
    color: #dc2626;
}

.gallery-error p[b-n3epvjkiv6] {
    font-size: 13px;
    margin: 0;
}

.gallery-empty[b-n3epvjkiv6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 24px;
    color: var(--BEC-colorNeutralForeground3);
}

.gallery-empty i[b-n3epvjkiv6] {
    font-size: 36px;
    color: var(--BEC-colorNeutralForeground3);
    opacity: 0.5;
}

.gallery-empty p[b-n3epvjkiv6] {
    font-size: 14px;
    margin: 0;
    font-weight: var(--BEC-fontWeightSemibold);
}

.gallery-empty-hint[b-n3epvjkiv6] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

/* Gallery Grid Layout */
.gallery-grid[b-n3epvjkiv6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 16px 0;
    max-height: 60vh;
    overflow-y: auto;
}

/* Gallery Card */
.gallery-card[b-n3epvjkiv6] {
    position: relative;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.gallery-card:hover[b-n3epvjkiv6] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.gallery-card-image[b-n3epvjkiv6] {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    cursor: pointer;
    background: var(--BEC-colorNeutralBackground2);
}

.gallery-card-image img[b-n3epvjkiv6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-card:hover .gallery-card-image img[b-n3epvjkiv6] {
    transform: scale(1.03);
}

.gallery-card-overlay[b-n3epvjkiv6] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gallery-card-image:hover .gallery-card-overlay[b-n3epvjkiv6] {
    opacity: 1;
}

.gallery-card-overlay i[b-n3epvjkiv6] {
    color: #fff;
    font-size: 20px;
}

.gallery-card-info[b-n3epvjkiv6] {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gallery-card-name[b-n3epvjkiv6] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-card-meta[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gallery-card-date[b-n3epvjkiv6],
.gallery-card-size[b-n3epvjkiv6] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    gap: 4px;
}

.gallery-card-delete[b-n3epvjkiv6] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(220, 38, 38, 0.9);
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 5;
}

.gallery-card:hover .gallery-card-delete[b-n3epvjkiv6] {
    opacity: 1;
}

.gallery-card-delete:hover[b-n3epvjkiv6] {
    background: #b91c1c;
    transform: scale(1.1);
}

/* ========================================
   MONTHLY BIRTHDAYS DIALOG
   ======================================== */
[b-n3epvjkiv6] .monthly-birthdays-dialog .e-dlg-header {
    font-size: 14px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

.monthly-birthdays-container[b-n3epvjkiv6] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.monthly-birthdays-header[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
}

.month-selector[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.month-selector-label[b-n3epvjkiv6] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
}

.month-selector-dropdown[b-n3epvjkiv6] {
    padding: 6px 12px;
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    outline: none;
    min-width: 150px;
}

.month-selector-dropdown:focus[b-n3epvjkiv6] {
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.15);
}

.monthly-birthdays-total[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.total-badge[b-n3epvjkiv6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 14px;
    background: var(--BEC-colorBrandBackground);
    color: #fff;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightBold);
}

.total-label[b-n3epvjkiv6] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
}

.monthly-birthdays-loading[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    position: relative;
}

/* Region Tabs */
.region-tabs[b-n3epvjkiv6] {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    padding-bottom: 0;
}

.region-tab[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
    border-radius: var(--BEC-borderRadiusSmall) var(--BEC-borderRadiusSmall) 0 0;
}

.region-tab:hover[b-n3epvjkiv6] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground2);
}

.region-tab-active[b-n3epvjkiv6] {
    color: var(--BEC-colorBrandForeground1);
    border-bottom-color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
}

.region-tab-name[b-n3epvjkiv6] {
    white-space: nowrap;
}

.region-tab-badge[b-n3epvjkiv6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--BEC-colorNeutralBackground2);
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
}

.region-tab-active .region-tab-badge[b-n3epvjkiv6] {
    background: var(--BEC-colorBrandBackground);
    color: #fff;
}

.region-content[b-n3epvjkiv6] {
    padding-top: 12px;
}

/* Monthly Birthday Grid Styling */
[b-n3epvjkiv6] .monthly-birthday-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
}

[b-n3epvjkiv6] .monthly-birthday-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-n3epvjkiv6] .monthly-birthday-grid .e-row {
    height: 32px !important;
}

[b-n3epvjkiv6] .monthly-birthday-grid .e-row td {
    padding: 4px 8px !important;
    font-size: 12px !important;
}

[b-n3epvjkiv6] .monthly-birthday-grid .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-n3epvjkiv6] .monthly-birthday-grid .e-row:nth-child(even) {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-n3epvjkiv6] .monthly-birthday-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Dialog Footer Styling */
[b-n3epvjkiv6] .gallery-dialog .e-footer-content,
[b-n3epvjkiv6] .monthly-birthdays-dialog .e-footer-content {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px !important;
}

[b-n3epvjkiv6] .gallery-dialog .e-footer-content .e-btn,
[b-n3epvjkiv6] .monthly-birthdays-dialog .e-footer-content .e-btn {
    font-size: 12px !important;
    padding: 6px 16px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

/* ============================================================================
   COLUMN FILTER — SIDE DRAWER
   ============================================================================
   Replaces Syncfusion's Excel filter popup on this grid (AllowFiltering=false).
   The popup rendered at body level and covered the rows being filtered; this
   drawer sits BESIDE the grid, which shrinks to make room, so nothing is hidden.
   Owner's choice from five mocked options, 28 Sep 2026.
   ========================================================================= */

.bf-shell[b-n3epvjkiv6] {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-width: 0;
}

.bf-grid[b-n3epvjkiv6] {
    flex: 1 1 auto;
    min-width: 0;          /* lets the grid actually shrink instead of overflowing */
}

.bf-drawer[b-n3epvjkiv6] {
    flex: 0 0 300px;
    width: 300px;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-inline-start: 3px solid var(--BEC-themePrimary, #1e3c72);
    border-radius: 0 var(--BEC-borderRadiusMedium) var(--BEC-borderRadiusMedium) 0;
    box-shadow: -6px 0 18px rgba(16, 24, 40, 0.08);
    max-block-size: calc(100vh - 215px);
    overflow: hidden;
}

.bf-drawer-head[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-block-end: 1px solid var(--BEC-colorNeutralStroke2);
}

.bf-drawer-title[b-n3epvjkiv6] {
    flex: 1;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.bf-drawer-close[b-n3epvjkiv6] {
    border: 0;
    background: transparent;
    cursor: pointer;
    inline-size: 26px;
    block-size: 26px;
    border-radius: var(--BEC-borderRadiusSmall);
    color: var(--BEC-colorNeutralForeground3);
}

.bf-drawer-close:hover[b-n3epvjkiv6] { background: var(--BEC-colorNeutralBackground3); }

.bf-drawer-search[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 12px;
    padding: 5px 9px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-colorNeutralBackground1);
}

.bf-drawer-search i[b-n3epvjkiv6] { font-size: 11px; color: var(--BEC-colorNeutralForeground3); }

.bf-drawer-search input[b-n3epvjkiv6] {
    border: 0;
    outline: 0;
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    background: transparent;
    color: var(--BEC-colorNeutralForeground1);
}

.bf-list[b-n3epvjkiv6] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 6px 6px;
}

.bf-item[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    font-size: 12.5px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    color: var(--BEC-colorNeutralForeground1);
    word-break: break-all;
}

.bf-item:hover[b-n3epvjkiv6] { background: var(--BEC-colorNeutralBackground3); }

.bf-item--all[b-n3epvjkiv6] {
    margin: 0 12px 4px;
    padding-inline: 6px;
    font-weight: var(--BEC-fontWeightSemibold);
    border-block-end: 1px solid var(--BEC-colorNeutralStroke2);
    padding-block-end: 8px;
    border-radius: 0;
}

.bf-item input[b-n3epvjkiv6] { accent-color: var(--BEC-themePrimary, #1e3c72); flex: none; }

.bf-empty[b-n3epvjkiv6] {
    padding: 10px 8px;
    margin: 0;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.bf-drawer-foot[b-n3epvjkiv6] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-block-start: 1px solid var(--BEC-colorNeutralStroke2);
}

.bf-btn[b-n3epvjkiv6] {
    font-size: 12px;
    padding: 5px 14px;
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
}

.bf-btn:hover[b-n3epvjkiv6] { background: var(--BEC-colorNeutralBackground3); }

.bf-btn--primary[b-n3epvjkiv6] {
    background: var(--BEC-themePrimary, #1e3c72);
    border-color: var(--BEC-themePrimary, #1e3c72);
    color: #fff;
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ---- header: label + our own filter button ---- */
.bf-head[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 6px;
    inline-size: 100%;
    min-width: 0;
}

.bf-head-text[b-n3epvjkiv6] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* stopPropagation on the click means this can never reach the header's sort
   handler -- the mis-click that started all this is structurally impossible now,
   not merely less likely. */
.bf-filter-btn[b-n3epvjkiv6] {
    flex: none;
    inline-size: 24px;
    block-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: var(--BEC-borderRadiusSmall);
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    font-size: 11px;
}

.bf-filter-btn:hover[b-n3epvjkiv6] { background: var(--BEC-colorNeutralBackground3); color: var(--BEC-colorNeutralForeground1); }

.bf-filter-btn--on[b-n3epvjkiv6] {
    color: var(--BEC-themePrimary, #1e3c72);
    background: color-mix(in srgb, var(--BEC-themePrimary, #1e3c72) 12%, transparent);
}

.bf-filter-btn:focus-visible[b-n3epvjkiv6] {
    outline: 2px solid var(--BEC-themePrimary, #1e3c72);
    outline-offset: -2px;
}

/* ---- active filter chips above the grid ---- */
.bf-chips[b-n3epvjkiv6] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 0 0 8px;
}

.bf-chips-label[b-n3epvjkiv6] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightSemibold);
}

.bf-chip[b-n3epvjkiv6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 99px;
    border: 1px solid var(--BEC-themePrimary, #1e3c72);
    background: color-mix(in srgb, var(--BEC-themePrimary, #1e3c72) 10%, transparent);
    color: var(--BEC-themePrimary, #1e3c72);
    cursor: pointer;
}

.bf-chip:hover[b-n3epvjkiv6] { background: color-mix(in srgb, var(--BEC-themePrimary, #1e3c72) 18%, transparent); }

.bf-chip-clear[b-n3epvjkiv6] {
    border-color: var(--BEC-colorNeutralStroke1);
    background: transparent;
    color: var(--BEC-colorNeutralForeground3);
}

/* Narrow screens: the grid has no room to give, so overlay instead of pushing. */
@media (max-width: 900px) {
    .bf-drawer[b-n3epvjkiv6] {
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        z-index: 1200;
        max-block-size: 100vh;
        border-radius: 0;
        box-shadow: -8px 0 28px rgba(16, 24, 40, 0.22);
    }
}
/* /Components/Pages/MainLayout/Intranet/EventsAdministration/EventCreateModal.razor.rz.scp.css */
/* ========================================
   Event Create Modal - Sidebar Wizard
   Used on: EventsAdministration.razor
   
   ✅ COMPLIANT WITH rules.mdc:
   - Uses var(--BEC-*) variables ONLY
   - NO hardcoded colors
   - NO duplicate Syncfusion overrides
   - Professional multi-step wizard design
   - Syncfusion Sidebar + Wizard Pattern
   ======================================== */

/* ========================================
   SIDEBAR WIZARD CONTAINER
   ======================================== */

:global(.event-create-sidebar .e-sidebar)[b-2d3rrx2aw4] {
    width: 650px !important;
    box-shadow: var(--BEC-shadow64);
    background: var(--BEC-colorNeutralBackground1);
}

.sidebar-container[b-2d3rrx2aw4] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   SIDEBAR HEADER
   ======================================== */

.sidebar-header[b-2d3rrx2aw4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: linear-gradient(135deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-2d3rrx2aw4] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: white;
}

.sidebar-title i[b-2d3rrx2aw4] {
    color: white;
    font-size: var(--BEC-fontSizeBase600);
}

.sidebar-close-btn[b-2d3rrx2aw4] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
}

.sidebar-close-btn:hover[b-2d3rrx2aw4] {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-close-btn i[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase400);
}

/* ========================================
   WIZARD PROGRESS BAR
   ======================================== */

.wizard-progress-bar[b-2d3rrx2aw4] {
    display: flex;
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.progress-step[b-2d3rrx2aw4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    position: relative;
    cursor: pointer;
}

.progress-step[b-2d3rrx2aw4]::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--BEC-colorNeutralStroke2);
}

.progress-step:last-child[b-2d3rrx2aw4]::after {
    display: none;
}

.progress-number[b-2d3rrx2aw4] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralBackground1);
    border: 2px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    z-index: 1;
    transition: all 0.3s ease;
}

.progress-step.completed .progress-number[b-2d3rrx2aw4] {
    background: var(--BEC-colorCompoundBrandBackground);
    border-color: var(--BEC-colorCompoundBrandBackground);
    color: white;
}

.progress-step.active .progress-number[b-2d3rrx2aw4] {
    background: var(--BEC-themePrimary);
    border-color: var(--BEC-themePrimary);
    color: white;
    transform: scale(1.1);
}

.progress-label[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    text-align: center;
}

.progress-step.active .progress-label[b-2d3rrx2aw4] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

.progress-step.completed .progress-label[b-2d3rrx2aw4] {
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   SIDEBAR CONTENT (Scrollable)
   ======================================== */

.sidebar-content[b-2d3rrx2aw4] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-step-content[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalXL);
}

/* ========================================
   WIZARD STEP STYLING
   ======================================== */

.wizard-step[b-2d3rrx2aw4] {
    animation: slideIn-b-2d3rrx2aw4 0.3s ease-out;
}

@keyframes slideIn-b-2d3rrx2aw4 {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.step-title[b-2d3rrx2aw4] {
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.step-title i[b-2d3rrx2aw4] {
    color: var(--BEC-themePrimary);
}

.step-description[b-2d3rrx2aw4] {
    margin: 0 0 var(--BEC-spacingHorizontalXL) 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
}

.subsection-title[b-2d3rrx2aw4] {
    margin: var(--BEC-spacingHorizontalXL) 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

.form-group[b-2d3rrx2aw4] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-label[b-2d3rrx2aw4] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.form-label.required[b-2d3rrx2aw4]::after {
    content: ' *';
    color: var(--BEC-colorPaletteRedForeground1);
}

.form-row[b-2d3rrx2aw4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.error-message[b-2d3rrx2aw4] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
}

/* ========================================
   REVIEW SECTION
   ======================================== */

.review-section[b-2d3rrx2aw4] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.review-section-title[b-2d3rrx2aw4] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorBrandStroke1);
}

.review-grid[b-2d3rrx2aw4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.review-item[b-2d3rrx2aw4] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.review-item-full[b-2d3rrx2aw4] {
    grid-column: 1 / -1;
}

.review-image-preview[b-2d3rrx2aw4] {
    margin-top: var(--BEC-spacingHorizontalS);
}

.review-image-preview img[b-2d3rrx2aw4] {
    max-width: 200px;
    max-height: 150px;
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    object-fit: cover;
}

.review-label[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.review-value[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
}

/* ========================================
   SIDEBAR FOOTER
   ======================================== */

.sidebar-footer[b-2d3rrx2aw4] {
    padding: 0 var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    position: sticky;
    bottom: 0;
}

/* ========================================
   SIDEBAR FOOTER BUTTONS (HTML buttons with custom CSS)
   ======================================== */

.btn[b-2d3rrx2aw4] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXL);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-2d3rrx2aw4] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-2d3rrx2aw4] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-2d3rrx2aw4] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-primary[b-2d3rrx2aw4] {
    background: var(--BEC-themePrimary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-2d3rrx2aw4] {
    background: var(--BEC-themeSecondary);
}

.btn-success[b-2d3rrx2aw4] {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-themePrimary);
}

.btn-success:hover:not(:disabled)[b-2d3rrx2aw4] {
    background: var(--BEC-colorPaletteGreenForeground1);
}

.btn i[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   LEGACY DIALOG STYLES (Keeping for compatibility)
   ======================================== */

/* Dialog Container */
:global(.event-create-dialog)[b-2d3rrx2aw4] {
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 1200px;
}

/* Dialog Header */
:global(.branch-create-dialog .e-dlg-header)[b-2d3rrx2aw4] {
    background: linear-gradient(to bottom, var(--BEC-colorNeutralBackground1) 0%, var(--BEC-colorNeutralBackground2) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    padding: var(--BEC-spacingHorizontalXL) var(--BEC-spacingHorizontalXXL);
}

.dialog-header-content[b-2d3rrx2aw4] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.dialog-title[b-2d3rrx2aw4] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase600);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.dialog-title i[b-2d3rrx2aw4] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase500);
}

.dialog-subtitle[b-2d3rrx2aw4] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Dialog Content */
:global(.branch-create-dialog .e-dlg-content)[b-2d3rrx2aw4] {
    padding: 0;
    overflow: hidden;
}

/* Dialog Footer */
:global(.branch-create-dialog .e-footer-content)[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   SYNCFUSION STEPPER CUSTOMIZATION (LABEL ONLY)
   ✅ No icon styling needed - Label Only mode
   ✅ Clean, professional text-only display
   ======================================== */

:global(.event-stepper)[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
}

/* Stepper Labels (Text Only) */
:global(.branch-stepper .e-step .e-step-label-container)[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalM);
}

:global(.branch-stepper .e-step .e-step-text-content)[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    transition: all 0.3s ease;
}

/* Active Step Label */
:global(.branch-stepper .e-step.e-step-selected .e-step-text-content)[b-2d3rrx2aw4] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase400);
}

/* Completed Step Label */
:global(.branch-stepper .e-step.e-step-completed .e-step-text-content)[b-2d3rrx2aw4] {
    color: var(--BEC-colorNeutralForeground2);
}

/* Stepper Connector Lines */
:global(.branch-stepper .e-stepper-progressbar)[b-2d3rrx2aw4] {
    background: var(--BEC-colorNeutralStroke2);
    height: 3px;
    transition: all 0.3s ease;
}

:global(.branch-stepper .e-step.e-step-completed .e-stepper-progressbar)[b-2d3rrx2aw4],
:global(.branch-stepper .e-step.e-step-selected .e-stepper-progressbar)[b-2d3rrx2aw4] {
    background: var(--BEC-themePrimary);
    height: 4px;
}

/* ========================================
   FORM CONTENT AREA
   ======================================== */

.dialog-form-content[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalXXL);
    min-height: 400px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom scrollbar */
.dialog-form-content[b-2d3rrx2aw4]::-webkit-scrollbar {
    width: 8px;
}

.dialog-form-content[b-2d3rrx2aw4]::-webkit-scrollbar-track {
    background: transparent;
}

.dialog-form-content[b-2d3rrx2aw4]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusLarge);
}

.dialog-form-content[b-2d3rrx2aw4]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralStroke3);
}

/* Form Step Container */
.form-step[b-2d3rrx2aw4] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
}

/* Form Row (2-column grid) */
.form-row[b-2d3rrx2aw4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

/* Form Row (3-column grid) - Compact horizontal layout */
.form-row-triple[b-2d3rrx2aw4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--BEC-spacingHorizontalM);
}

/* Form Row (4-column grid) - Ultra-compact for small fields */
.form-row-quad[b-2d3rrx2aw4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--BEC-spacingHorizontalM);
}

/* Form Group */
.form-group[b-2d3rrx2aw4] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.form-group.full-width[b-2d3rrx2aw4] {
    grid-column: span 2;
}

/* Form Label */
.form-label[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.form-label .required[b-2d3rrx2aw4] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-left: var(--BEC-spacingHorizontalXXS);
}

/* Read-only Company/Organization Display */
.input-readonly[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border: 1px solid var(--BEC-colorBrandStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background-color: var(--BEC-colorNeutralBackground3);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
    font-family: inherit;
}

.input-readonly i[b-2d3rrx2aw4] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

/* Loading Company/Organization Display */
.input-loading[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    background-color: var(--BEC-colorNeutralBackground2);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
    font-family: inherit;
}

.input-loading i[b-2d3rrx2aw4] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

/* Field Hint */
.field-hint[b-2d3rrx2aw4] {
    display: block;
    margin-top: calc(var(--BEC-spacingHorizontalXS) * -1);
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   INLINE VALIDATION ERROR
   Displayed directly under each field
   ======================================== */
.error-message[b-2d3rrx2aw4] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: var(--BEC-fontWeightMedium);
    animation: slideDown-b-2d3rrx2aw4 0.2s ease;
}

@keyframes slideDown-b-2d3rrx2aw4 {
    from {
        opacity: 0;
        transform: translateY(calc(var(--BEC-spacingHorizontalXS) * -1));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   SECTION TITLE
   ======================================== */
.section-title[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: var(--BEC-spacingHorizontalM) 0 var(--BEC-spacingHorizontalS) 0;
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   INFO BOX
   ======================================== */
.info-box[b-2d3rrx2aw4] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themeLighter);
    border-left: 4px solid var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: var(--BEC-spacingHorizontalS);
}

.info-box i[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase400);
    flex-shrink: 0;
}

/* ========================================
   TOGGLE SWITCH (Syncfusion SfSwitch)
   ======================================== */
.toggle-wrapper[b-2d3rrx2aw4] {
    display: flex;
    align-items: center;
    padding-top: var(--BEC-spacingHorizontalS);
}

/* ========================================
   SYNCFUSION SWITCH SIZING
   Make toggle wider to fit Active/Inactive text
   ======================================== */
.toggle-wrapper :global(.e-switch-wrapper)[b-2d3rrx2aw4] {
    width: 100px !important;
    min-width: 100px !important;
}

.toggle-wrapper :global(.e-switch-inner)[b-2d3rrx2aw4] {
    width: 100px !important;
}

.toggle-wrapper :global(.e-switch-on)[b-2d3rrx2aw4],
.toggle-wrapper :global(.e-switch-off)[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase300) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
}

/* ========================================
   DIALOG FOOTER (SYNCFUSION BUTTONS)
   ✅ NO custom button classes
   ✅ Uses Syncfusion e-btn classes
   ======================================== */
.dialog-footer-wrapper[b-2d3rrx2aw4] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    width: 100%;
}

.footer-spacer[b-2d3rrx2aw4] {
    flex: 1;
}

/* Syncfusion Button Customization */
:global(.branch-create-dialog .e-footer-content .e-btn)[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalXL);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    min-width: 100px;
}

/* Primary Button Styling */
:global(.branch-create-dialog .e-footer-content .e-btn.e-primary)[b-2d3rrx2aw4] {
    background: var(--BEC-themePrimary);
    border-color: var(--BEC-themePrimary);
}

:global(.branch-create-dialog .e-footer-content .e-btn.e-primary:hover:not(:disabled))[b-2d3rrx2aw4] {
    background: var(--BEC-themeSecondary);
    border-color: var(--BEC-themeSecondary);
}

/* Success Button Styling */
:global(.branch-create-dialog .e-footer-content .e-btn.e-success)[b-2d3rrx2aw4] {
    background: var(--BEC-colorPaletteGreenBackground1);
    border-color: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorNeutralBackground1);
}

:global(.branch-create-dialog .e-footer-content .e-btn.e-success:hover:not(:disabled))[b-2d3rrx2aw4] {
    background: var(--BEC-colorPaletteGreenBackground2);
    border-color: var(--BEC-colorPaletteGreenBackground2);
}

/* Flat Button Styling */
:global(.branch-create-dialog .e-footer-content .e-btn.e-flat)[b-2d3rrx2aw4] {
    background: transparent;
    border-color: transparent;
    color: var(--BEC-colorNeutralForeground2);
}

:global(.branch-create-dialog .e-footer-content .e-btn.e-flat:hover:not(:disabled))[b-2d3rrx2aw4] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
}

/* Button Icons */
:global(.branch-create-dialog .e-footer-content .e-btn .e-btn-icon)[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase300);
}

/* Disabled Button State */
:global(.branch-create-dialog .e-footer-content .e-btn:disabled)[b-2d3rrx2aw4] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   REVIEW SECTION (Step 4)
   ======================================== */
.review-section[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.review-section h4[b-2d3rrx2aw4] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-themePrimary);
}

.review-row[b-2d3rrx2aw4] {
    display: flex;
    padding: var(--BEC-spacingHorizontalS) 0;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.review-row:last-child[b-2d3rrx2aw4] {
    border-bottom: none;
}

.review-label[b-2d3rrx2aw4] {
    flex: 0 0 180px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase200);
}

.review-value[b-2d3rrx2aw4] {
    flex: 1;
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase200);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    :global(.event-create-dialog)[b-2d3rrx2aw4] {
        max-width: 700px;
    }
    
    .dialog-form-content[b-2d3rrx2aw4] {
        padding: var(--BEC-spacingHorizontalL);
        min-height: 350px;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    :global(.event-create-dialog)[b-2d3rrx2aw4] {
        width: 95%;
        max-width: 100%;
        margin: var(--BEC-spacingHorizontalMNudge);
    }
    
    :global(.branch-create-dialog .e-dlg-header)[b-2d3rrx2aw4] {
        padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    }
    
    .dialog-title[b-2d3rrx2aw4] {
        font-size: var(--BEC-fontSizeBase500);
    }
    
    :global(.event-stepper)[b-2d3rrx2aw4] {
        padding: var(--BEC-spacingHorizontalL);
    }
    
    :global(.branch-stepper .e-step .e-step-text-content)[b-2d3rrx2aw4] {
        font-size: var(--BEC-fontSizeBase200);
    }
    
    .dialog-form-content[b-2d3rrx2aw4] {
        padding: var(--BEC-spacingHorizontalXL);
        min-height: 380px;
    }
    
    .form-row[b-2d3rrx2aw4] {
        grid-template-columns: 1fr;
    }
    
    .form-group.full-width[b-2d3rrx2aw4] {
        grid-column: span 1;
    }
    
    .dialog-footer-wrapper[b-2d3rrx2aw4] {
        flex-wrap: wrap;
    }
    
    .footer-spacer[b-2d3rrx2aw4] {
        display: none;
    }
    
    :global(.branch-create-dialog .e-footer-content .e-btn)[b-2d3rrx2aw4] {
        flex: 1;
        min-width: 120px;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {
    :global(.event-create-dialog)[b-2d3rrx2aw4] {
        border-radius: 0;
        max-height: 100vh;
    }

    .dialog-title[b-2d3rrx2aw4] {
        font-size: var(--BEC-fontSizeBase400);
    }
    
    :global(.branch-stepper .e-step .e-step-text-content)[b-2d3rrx2aw4] {
        display: none; /* Hide labels to save space */
    }
}

/* ========================================
   IMAGE UPLOAD SECTION
   ======================================== */

/* Image Preview Container */
.image-preview-container[b-2d3rrx2aw4] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

/* Image Preview */
.image-preview[b-2d3rrx2aw4] {
    width: 100%;
    max-width: 400px;
    max-height: 250px;
    object-fit: cover;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
}

/* Remove Image Button */
.btn-remove-image[b-2d3rrx2aw4] {
    align-self: flex-start;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
    border: 1px solid var(--BEC-colorPaletteRedBorder1);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.btn-remove-image:hover:not(:disabled)[b-2d3rrx2aw4] {
    background: var(--BEC-colorPaletteRedBackground2);
    border-color: var(--BEC-colorPaletteRedForeground2);
    transform: translateY(-1px);
}

.btn-remove-image:disabled[b-2d3rrx2aw4] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Upload Controls */
.upload-controls[b-2d3rrx2aw4] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

/* Upload Button */
.btn-upload-image[b-2d3rrx2aw4] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    justify-content: center;
}

.btn-upload-image:hover:not(:disabled)[b-2d3rrx2aw4] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
}

.btn-upload-image:disabled[b-2d3rrx2aw4] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Field Hint */
.field-hint[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

.targets-list[b-2d3rrx2aw4] {
    background: var(--BEC-colorNeutralBackground2);
    padding: var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-top: var(--BEC-spacingHorizontalL);
}

.targets-list-title[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.target-item[b-2d3rrx2aw4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--BEC-colorNeutralBackground1);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-bottom: var(--BEC-spacingHorizontalS);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.target-name[b-2d3rrx2aw4] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-remove-target[b-2d3rrx2aw4] {
    background: none;
    border: none;
    color: var(--BEC-colorPaletteRedForeground1);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    transition: color 0.2s;
}

    .btn-remove-target:hover[b-2d3rrx2aw4] {
        color: var(--BEC-colorPaletteRedForeground2);
    }

.info-message[b-2d3rrx2aw4] {
    background: var(--BEC-colorBrandBackground2);
    border-left: 4px solid var(--BEC-themePrimary);
    padding: var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusSmall);
    margin: var(--BEC-spacingHorizontalL) 0;
}

    .info-message i[b-2d3rrx2aw4] {
        color: var(--BEC-themePrimary);
        margin-right: var(--BEC-spacingHorizontalS);
    }

.loading-indicator[b-2d3rrx2aw4] {
    text-align: center;
    padding: var(--BEC-spacingHorizontalXXL);
    color: var(--BEC-colorNeutralForeground3);
}
/* /Components/Pages/MainLayout/Intranet/EventsAdministration/EventEditModal.razor.rz.scp.css */
/* ========================================
   Event Edit Modal - Sidebar Wizard
   Used on: EventsAdministration.razor
   
   ✅ COMPLIANT WITH rules.mdc:
   - Uses var(--BEC-*) variables ONLY
   - NO hardcoded colors
   - NO duplicate Syncfusion overrides
   - Professional multi-step wizard design
   - Syncfusion Sidebar + Wizard Pattern
   ======================================== */

/* ========================================
   SIDEBAR WIZARD CONTAINER
   ======================================== */

:global(.event-edit-sidebar .e-sidebar)[b-xn73o1verm] {
    width: 650px !important;
    box-shadow: var(--BEC-shadow64);
    background: var(--BEC-colorNeutralBackground1);
}

.sidebar-container[b-xn73o1verm] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   SIDEBAR HEADER
   ======================================== */

.sidebar-header[b-xn73o1verm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: linear-gradient(135deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-xn73o1verm] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: white;
}

.sidebar-title i[b-xn73o1verm] {
    color: white;
    font-size: var(--BEC-fontSizeBase600);
}

.sidebar-close-btn[b-xn73o1verm] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
}

.sidebar-close-btn:hover[b-xn73o1verm] {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-close-btn i[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase400);
}

/* ========================================
   WIZARD PROGRESS BAR
   ======================================== */

.wizard-progress-bar[b-xn73o1verm] {
    display: flex;
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.progress-step[b-xn73o1verm] {
    flex: 1;
    text-align: center;
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    padding: var(--BEC-spacingHorizontalS);
    position: relative;
}

.progress-step.active[b-xn73o1verm] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   SIDEBAR CONTENT (Scrollable)
   ======================================== */

.sidebar-content[b-xn73o1verm] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-step-content[b-xn73o1verm] {
    padding: var(--BEC-spacingHorizontalXL);
}

/* ========================================
   WIZARD STEP STYLING
   ======================================== */

.wizard-step[b-xn73o1verm] {
    animation: slideIn-b-xn73o1verm 0.3s ease-out;
}

@keyframes slideIn-b-xn73o1verm {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.step-title[b-xn73o1verm] {
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.step-title i[b-xn73o1verm] {
    color: var(--BEC-themePrimary);
}

.step-description[b-xn73o1verm] {
    margin: 0 0 var(--BEC-spacingHorizontalXL) 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
}

.subsection-title[b-xn73o1verm] {
    margin: var(--BEC-spacingHorizontalXL) 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

.form-group[b-xn73o1verm] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-label[b-xn73o1verm] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.form-label.required[b-xn73o1verm]::after {
    content: ' *';
    color: var(--BEC-colorPaletteRedForeground1);
}

.form-row[b-xn73o1verm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.error-message[b-xn73o1verm] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
}

/* ========================================
   REVIEW SECTION
   ======================================== */

.review-section[b-xn73o1verm] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.review-section-title[b-xn73o1verm] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorBrandStroke1);
}

.review-grid[b-xn73o1verm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.review-item[b-xn73o1verm] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.review-item-full[b-xn73o1verm] {
    grid-column: 1 / -1;
}

.review-label[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.review-value[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
}

/* ========================================
   SIDEBAR FOOTER
   ======================================== */

.sidebar-footer[b-xn73o1verm] {
    padding: 0 var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    position: sticky;
    bottom: 0;
}

/* ========================================
   SIDEBAR FOOTER BUTTONS
   ======================================== */

.btn[b-xn73o1verm] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXL);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-xn73o1verm] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-xn73o1verm] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-xn73o1verm] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-primary[b-xn73o1verm] {
    background: var(--BEC-themePrimary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-xn73o1verm] {
    background: var(--BEC-themeSecondary);
}

.btn-success[b-xn73o1verm] {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-themePrimary);
}

.btn-success:hover:not(:disabled)[b-xn73o1verm] {
    background: var(--BEC-colorPaletteGreenForeground1);
}

.btn i[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   FIELD HINT
   ======================================== */

.field-hint[b-xn73o1verm] {
    display: block;
    margin-top: calc(var(--BEC-spacingHorizontalXS) * -1);
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   INLINE VALIDATION ERROR
   ======================================== */

.error-message[b-xn73o1verm] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: var(--BEC-fontWeightMedium);
    animation: slideDown-b-xn73o1verm 0.2s ease;
}

@keyframes slideDown-b-xn73o1verm {
    from {
        opacity: 0;
        transform: translateY(calc(var(--BEC-spacingHorizontalXS) * -1));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   IMAGE UPLOAD SECTION
   ======================================== */

.image-preview-container[b-xn73o1verm] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.image-preview[b-xn73o1verm] {
    width: 100%;
    max-width: 400px;
    max-height: 250px;
    object-fit: cover;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
}

.btn-remove-image[b-xn73o1verm] {
    align-self: flex-start;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
    border: 1px solid var(--BEC-colorPaletteRedStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.btn-remove-image:hover:not(:disabled)[b-xn73o1verm] {
    background: var(--BEC-colorPaletteRedBackground2);
    transform: translateY(-1px);
}

.btn-remove-image:disabled[b-xn73o1verm] {
    opacity: 0.5;
    cursor: not-allowed;
}

.upload-controls[b-xn73o1verm] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.btn-upload-image[b-xn73o1verm] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    justify-content: center;
}

.btn-upload-image:hover:not(:disabled)[b-xn73o1verm] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
}

.btn-upload-image:disabled[b-xn73o1verm] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   TARGET AUDIENCE
   ======================================== */

.targets-list[b-xn73o1verm] {
    background: var(--BEC-colorNeutralBackground2);
    padding: var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-top: var(--BEC-spacingHorizontalL);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.targets-list-title[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.target-item[b-xn73o1verm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--BEC-colorNeutralBackground1);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-bottom: var(--BEC-spacingHorizontalS);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.target-name[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-remove-target[b-xn73o1verm] {
    background: none;
    border: none;
    color: var(--BEC-colorPaletteRedForeground1);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    transition: color 0.2s;
}

.btn-remove-target:hover[b-xn73o1verm] {
    color: var(--BEC-colorPaletteRedForeground2);
}

.info-message[b-xn73o1verm] {
    background: var(--BEC-themeLighter);
    border-left: 4px solid var(--BEC-themePrimary);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: var(--BEC-spacingHorizontalL) 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorBrandForeground1);
}

.info-message i[b-xn73o1verm] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase400);
    flex-shrink: 0;
}

.loading-indicator[b-xn73o1verm] {
    text-align: center;
    padding: var(--BEC-spacingHorizontalXXL);
    color: var(--BEC-colorNeutralForeground3);
}

.loading-indicator i[b-xn73o1verm] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase600);
}

.loading-box[b-xn73o1verm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalXXL);
    color: var(--BEC-colorNeutralForeground3);
}

.loading-box i[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase600);
    color: var(--BEC-themePrimary);
}

.error-box[b-xn73o1verm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalXXL);
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-box i[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase600);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    :global(.event-edit-sidebar .e-sidebar)[b-xn73o1verm] {
        width: 100% !important;
    }
    
    .form-row[b-xn73o1verm] {
        grid-template-columns: 1fr;
    }
    
    .review-grid[b-xn73o1verm] {
        grid-template-columns: 1fr;
    }
}

/* Form Sections */
.form-section[b-xn73o1verm] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.section-header[b-xn73o1verm] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-themePrimary);
}

/* Form Rows */
.form-row-single[b-xn73o1verm] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.form-row-double[b-xn73o1verm] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--BEC-spacingHorizontalL);
}

.form-row-triple[b-xn73o1verm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--BEC-spacingHorizontalL);
}

/* Form Groups */
.form-group[b-xn73o1verm] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalSNudge);
}

.form-label[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.required[b-xn73o1verm] {
    color: #dc2626;
    margin-left: var(--BEC-spacingHorizontalXXS);
}

.checkbox-label[b-xn73o1verm] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalM);
    background: white;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    transition: all 0.2s ease;
}

.checkbox-label:hover[b-xn73o1verm] {
    border-color: var(--BEC-themePrimary);
    background: #f9fafb;
}

.checkbox-label input[type="checkbox"][b-xn73o1verm] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Multiline Input */
[b-xn73o1verm] .multiline-input textarea {
    min-height: 100px !important;
}

/* Dialog Footer */
.dialog-footer-content[b-xn73o1verm] {
    display: flex;
    gap: var(--BEC-spacingHorizontalM);
    justify-content: flex-end;
}

/* Loading State */
.spinner-border[b-xn73o1verm] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-xn73o1verm 0.75s linear infinite;
}

.spinner-border-sm[b-xn73o1verm] {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

@keyframes spinner-border-b-xn73o1verm {
    to {
        transform: rotate(360deg);
    }
}

/* Loading Box */
.loading-box[b-xn73o1verm] {
    padding: var(--BEC-spacingHorizontalXXL);
    background: white;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalM);
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase400);
}

.loading-box i[b-xn73o1verm] {
    font-size: 32px;
}

/* ========================================
   IMAGE UPLOAD SECTION
   ======================================== */

/* Image Preview Container */
.image-preview-container[b-xn73o1verm] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

/* Image Preview */
.image-preview[b-xn73o1verm] {
    width: 100%;
    max-width: 400px;
    max-height: 250px;
    object-fit: cover;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
}

/* Remove Image Button */
.btn-remove-image[b-xn73o1verm] {
    align-self: flex-start;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.btn-remove-image:hover:not(:disabled)[b-xn73o1verm] {
    background: #fecaca;
    border-color: #f87171;
    transform: translateY(-1px);
}

.btn-remove-image:disabled[b-xn73o1verm] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Upload Controls */
.upload-controls[b-xn73o1verm] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

/* Upload Button */
.btn-upload-image[b-xn73o1verm] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    justify-content: center;
}

.btn-upload-image:hover:not(:disabled)[b-xn73o1verm] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
}

.btn-upload-image:disabled[b-xn73o1verm] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Field Hint */
.field-hint[b-xn73o1verm] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .form-row-double[b-xn73o1verm],
    .form-row-triple[b-xn73o1verm] {
        grid-template-columns: 1fr;
    }
    
    .image-preview[b-xn73o1verm] {
        max-width: 100%;
    }
}

/* /Components/Pages/MainLayout/Intranet/EventsAdministration/EventsAdministration.razor.rz.scp.css */
/* ========================================
   EVENTS ADMINISTRATION - REDESIGNED
   Following Department Administration CSS pattern
   
   FEATURES:
   ✅ Department-style action toolbar
   ✅ Compact grid with sticky headers
   ✅ Empty state illustration
   ✅ Professional Microsoft Fluent Design
   
   NOTE: Tabs are in parent component (IntranetAdministration)
   
   STICKY POSITIONING STRATEGY:
   📌 Tabs (Parent):   top: 0px,    z-index: 95
   📌 Action Toolbar:  top: 42px,   z-index: 90
   📌 Grid Headers:    top: 86px,   z-index: 80
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-jm2q7aof1q] {
    scroll-behavior: smooth;
}


/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-jm2q7aof1q] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* Note: Tabs are in parent component (IntranetAdministration.razor) */

/* ========================================
   ACTION TOOLBAR - DEPARTMENT STYLE
   STICKY: Stays below tabs while scrolling
   ======================================== */

/* Toolbar Container - COMPACT INLINE */
[b-jm2q7aof1q] .e-toolbar.e-control {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: none !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 6px 16px !important;
    min-height: 32px !important;
    margin: 0 !important;
}

/* Toolbar Items - Reduced Spacing */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

/* Right-aligned items (Search) - Add spacing from right edge */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: var(--BEC-spacingHorizontalS) !important;
}

/* Toolbar button base styling - Clean & Uniform */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 4px 10px !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 4px !important;
    min-height: 26px !important;
    box-shadow: none !important;
}

/* Button Icons - Uniform */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
}

/* Button Text - Uniform */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
}

/* ======= SIMPLE COLOR HOVER EFFECT - ALL BUTTONS ======= */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* ======= ACTIVE/PRESSED STATE ======= */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) {
    opacity: 0.7 !important;
    transition: opacity 0.1s ease !important;
}

[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-icons,
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackgroundPressed) !important;
}

/* ======= DANGER BUTTON (Delete) - Red Color Hover ======= */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-icons,
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-tbar-btn-text {
    color: #dc2626 !important;
}

[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-icons,
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-tbar-btn-text {
    color: #b91c1c !important;
}

/* ======= DISABLED BUTTON STATE - Simple and Clean ======= */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
}

[b-jm2q7aof1q] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
    cursor: not-allowed;
    background: var(--BEC-colorNeutralBackground3);
}

[b-jm2q7aof1q] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn * {
    color: #aaaaaa;
}

/* ======= TOOLBAR SEPARATOR - Blue Accent ======= */
[b-jm2q7aof1q] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: var(--BEC-spacingHorizontalL) !important;
    margin: 0 var(--BEC-spacingHorizontalXS) !important;
    border-radius: 0.5px !important;
    opacity: 0.6 !important;
}

/* ======= BUTTON FOCUS STATE - NO BORDER ======= */
[b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
    outline: none !important;
    border: none !important;
}

/* ========================================
   PAGE CONTENT - COMPACT GRID
   ======================================== */
.erp-page-content[b-jm2q7aof1q] {
    flex: 1;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Loading Overlay */
.loading-overlay[b-jm2q7aof1q] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
}

.loading-spinner[b-jm2q7aof1q] {
    font-size: 32px;
    color: var(--BEC-colorBrandBackground);
}

.loading-overlay p[b-jm2q7aof1q] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
    margin: 0;
}

/* ========================================
   EMPTY STATE - CUSTOM MESSAGE & ILLUSTRATION
   ======================================== */
.empty-state[b-jm2q7aof1q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalXXXL);
    text-align: center;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    border: 2px dashed var(--BEC-colorNeutralStroke2);
    margin: 40px auto;
    max-width: 600px;
}

.empty-state-icon[b-jm2q7aof1q] {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--BEC-colorBrandBackground) 0%, var(--BEC-colorBrandBackgroundPressed) 100%);
    border-radius: 50%;
    margin-bottom: var(--BEC-spacingHorizontalXL);
    box-shadow: var(--BEC-shadow8);
}

.empty-state-icon i[b-jm2q7aof1q] {
    font-size: 64px;
    color: white;
}

.empty-state-title[b-jm2q7aof1q] {
    font-size: 24px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
}

.empty-state-message[b-jm2q7aof1q] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 var(--BEC-spacingHorizontalXXL) 0;
    line-height: 1.6;
}

/* ========================================
   GRID STYLING - COMPACT MODE
   ======================================== */

/* Grid Container */
[b-jm2q7aof1q] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    overflow: hidden !important;
}

/* NOTE: Column headers, rows, and pager styles are in a global <style>
   block in IntranetAdministration.razor using CssClass="intranet-admin-grid".
   Syncfusion grid internals have no Blazor scope attribute, so scoped
   CSS (::deep, :global()) cannot reach them. */

/* Code Badge in Grid — Wireframe Matched */
[b-jm2q7aof1q] .code-badge {
    display: inline-block;
    padding: 1px 7px;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border: none;
}

/* Type Badges in Grid — Wireframe Matched */
[b-jm2q7aof1q] .type-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    border: none;
}

[b-jm2q7aof1q] .type-internal {
    background: #F0FFF0;
    color: #107C10;
}

[b-jm2q7aof1q] .type-external {
    background: #F0F6FC;
    color: #0F6CBD;
}

/* Status Badges in Grid — Wireframe Matched (dot + text) */
.status-badge[b-jm2q7aof1q] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    font-size: 10px;
    font-weight: 600;
    background: none;
    border: none;
}

.status-badge i[b-jm2q7aof1q] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

.status-active[b-jm2q7aof1q] {
    color: #16a34a;
}

.status-active i[b-jm2q7aof1q] {
    background: #16a34a;
    color: #16a34a;
}

.status-inactive[b-jm2q7aof1q] {
    color: var(--BEC-colorNeutralForeground3);
}

.status-inactive i[b-jm2q7aof1q] {
    background: var(--BEC-colorNeutralForeground3);
    color: var(--BEC-colorNeutralForeground3);
}

/* Event Status Badges in Grid — Wireframe Matched (pills with bg) */
.event-status-badge[b-jm2q7aof1q] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    border: none;
}

.event-status-published[b-jm2q7aof1q] {
    background: #F0FFF0;
    color: #16a34a;
}

.event-status-draft[b-jm2q7aof1q] {
    background: #FFFBF0;
    color: #9A6700;
}

.event-status-cancelled[b-jm2q7aof1q] {
    background: #FDE7E9;
    color: #dc2626;
}

.event-status-completed[b-jm2q7aof1q] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.event-status-ongoing[b-jm2q7aof1q] {
    background: #F0FFF0;
    color: #16a34a;
}

.event-status-upcoming[b-jm2q7aof1q] {
    background: #F0F6FC;
    color: #0F6CBD;
}

.event-status-unknown[b-jm2q7aof1q] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

/* Event Thumbnail in Grid — Wireframe Matched */
.event-thumbnail[b-jm2q7aof1q] {
    width: 40px;
    height: 28px;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground3);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.event-thumbnail img[b-jm2q7aof1q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-image-icon[b-jm2q7aof1q] {
    width: 36px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 3px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground3);
    font-size: 11px;
}

/* Registration Info in Grid */
.registration-info[b-jm2q7aof1q] {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.registration-info.registration-full[b-jm2q7aof1q] {
    color: #dc2626;
}

.registration-info.registration-available[b-jm2q7aof1q] {
    color: #10b981;
}

.registration-count[b-jm2q7aof1q] {
    font-weight: var(--BEC-fontWeightBold);
}

.badge-danger-small[b-jm2q7aof1q] {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: #dc2626;
    color: white;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 10px;
    font-weight: var(--BEC-fontWeightBold);
    margin-left: 4px;
}

.text-muted[b-jm2q7aof1q] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
}

/* ========================================
   MODAL DIALOGS
   ======================================== */

/* Modal Overlay */
.modal-overlay[b-jm2q7aof1q] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-jm2q7aof1q 0.2s ease-out;
}

@keyframes fadeIn-b-jm2q7aof1q {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Container */
.modal-container[b-jm2q7aof1q] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-jm2q7aof1q 0.3s ease-out;
}

.modal-container.modal-sm[b-jm2q7aof1q] {
    max-width: 500px;
}

.modal-container.modal-xl[b-jm2q7aof1q] {
    max-width: 1400px;
    max-height: 95vh;
}

@keyframes slideUp-b-jm2q7aof1q {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal Header */
.modal-header[b-jm2q7aof1q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge) 0 0;
}

.modal-title[b-jm2q7aof1q] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-title i[b-jm2q7aof1q] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
}

.modal-close[b-jm2q7aof1q] {
    background: transparent;
    border: none;
    font-size: 20px;
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.modal-close:hover[b-jm2q7aof1q] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

/* Modal Content */
.modal-content[b-jm2q7aof1q] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Modal Footer */
.modal-footer[b-jm2q7aof1q] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 0 0 var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge);
}

/* Buttons */
.btn[b-jm2q7aof1q] {
    padding: 8px 16px;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn:disabled[b-jm2q7aof1q] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-jm2q7aof1q] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-jm2q7aof1q] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-secondary[b-jm2q7aof1q] {
    background: var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-jm2q7aof1q] {
    background: #d1d1d1;
}

.btn-danger[b-jm2q7aof1q] {
    background: #dc2626;
    color: white;
}

.btn-danger:hover:not(:disabled)[b-jm2q7aof1q] {
    background: #b91c1c;
}

.btn-warning[b-jm2q7aof1q] {
    background: #ff8c00;
    color: white;
}

.btn-warning:hover:not(:disabled)[b-jm2q7aof1q] {
    background: #e67e00;
}

.btn-success[b-jm2q7aof1q] {
    background: #10b981;
    color: white;
}

.btn-success:hover:not(:disabled)[b-jm2q7aof1q] {
    background: #059669;
}

/* Warning Messages */
.warning-message[b-jm2q7aof1q] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.warning-message strong[b-jm2q7aof1q] {
    color: #dc2626;
}

.warning-note[b-jm2q7aof1q] {
    padding: 12px 16px;
    background: #fff3cd;
    border-left: 3px solid #ffc107;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.warning-note i[b-jm2q7aof1q] {
    color: #ffc107;
    margin-top: 2px;
    font-size: 14px;
    flex-shrink: 0;
}

.warning-note-info[b-jm2q7aof1q] {
    background: var(--BEC-colorSubtleBackground);
    border-left-color: var(--BEC-colorBrandBackground);
}

.warning-note-info i[b-jm2q7aof1q] {
    color: var(--BEC-colorBrandBackground);
}

.warning-note-success[b-jm2q7aof1q] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left-color: #10b981;
}

.warning-note-success i[b-jm2q7aof1q] {
    color: #10b981;
}

.error-message[b-jm2q7aof1q] {
    margin: 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet */
@media (max-width: 1024px) {
    .page-header[b-jm2q7aof1q] {
        padding: 16px 24px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .page-header[b-jm2q7aof1q] {
        padding: 12px 16px;
    }
    
    .page-header-icon[b-jm2q7aof1q] {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .page-header-title[b-jm2q7aof1q] {
        font-size: 18px;
    }
    
    .page-header-subtitle[b-jm2q7aof1q] {
        font-size: 12px;
    }
    
    .erp-page-content[b-jm2q7aof1q] {
        padding: 10px 16px 0px 16px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .page-header[b-jm2q7aof1q] {
        gap: 12px;
    }
    
    .page-header-icon[b-jm2q7aof1q] {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    
    .page-header-title[b-jm2q7aof1q] {
        font-size: 16px;
    }
    
    .page-header-subtitle[b-jm2q7aof1q] {
        display: none;
    }
    
    [b-jm2q7aof1q] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }
}

/* /Components/Pages/MainLayout/Intranet/EventsAdministration/EventViewModal.razor.rz.scp.css */
/* ========================================
   Event View Modal - Fullscreen Wizard
   ======================================== */

/* ========================================
   DIALOG OVERRIDES (FULLSCREEN)
   ======================================== */
:global(.media-viewer-dialog-fullscreen .e-dlg-content)[b-e6andswgz4] {
    padding: 0 !important;
    overflow: hidden !important;
    height: 100vh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
}

:global(.media-viewer-dialog-fullscreen .e-dialog)[b-e6andswgz4] {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: var(--BEC-colorNeutralBackground1);
}

:global(.media-viewer-dialog-fullscreen .e-dlg-overlay)[b-e6andswgz4] {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* ========================================
   MAIN CONTAINER
   ======================================== */
.media-viewer-fullscreen[b-e6andswgz4] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
    overflow: hidden;
}

/* ========================================
   CLOSE BUTTON
   ======================================== */
.media-close-btn[b-e6andswgz4] {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1050; /* High z-index */
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.2s ease;
}

.media-close-btn:hover[b-e6andswgz4] {
    background: rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   WIZARD HEADER
   ======================================== */
.sidebar-header[b-e6andswgz4] {
    padding: 15px 25px;
    background-color: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
}

.sidebar-title[b-e6andswgz4] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: 15px;
}

.sidebar-title i[b-e6andswgz4] {
    color: var(--BEC-themePrimary);
}

/* ========================================
   WIZARD CONTENT
   ======================================== */
.sidebar-content[b-e6andswgz4] {
    padding: 20px;
    overflow-y: auto;
    height: calc(100vh - 150px); /* Adjusted for header and footer */
    flex: 1;
}

/* ========================================
   WIZARD PROGRESS BAR
   ======================================== */
.wizard-progress-bar[b-e6andswgz4] {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    background: var(--BEC-colorNeutralBackground2);
    padding: 10px;
    border-radius: var(--BEC-borderRadiusMedium);
}

.progress-step[b-e6andswgz4] {
    flex: 1;
    text-align: center;
    padding: 10px;
    background-color: var(--BEC-colorNeutralBackground3);
    border-radius: 5px;
    margin: 0 5px;
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    user-select: none;
    outline: none;
}

.progress-step.active[b-e6andswgz4] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    background-color: var(--BEC-themeLighter);
}

.progress-step:hover[b-e6andswgz4] {
    background-color: var(--BEC-colorNeutralBackground3Hover, var(--BEC-colorNeutralBackground3));
}

.progress-step:focus-visible[b-e6andswgz4] {
    outline: 2px solid var(--BEC-colorBrandForeground1);
    outline-offset: 2px;
}

/* ========================================
   WIZARD STEP STYLING
   ======================================== */
.wizard-step[b-e6andswgz4] {
    animation: slideIn-b-e6andswgz4 0.3s ease-out;
    max-width: 900px;
    margin: 0 auto;
}

@keyframes slideIn-b-e6andswgz4 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.step-title[b-e6andswgz4] {
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.step-title i[b-e6andswgz4] {
    color: var(--BEC-themePrimary);
}

/* ========================================
   VIEW FIELD STYLING (Read-Only)
   ======================================== */
.view-field-group[b-e6andswgz4] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.view-label[b-e6andswgz4] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.view-value[b-e6andswgz4] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.view-field-row[b-e6andswgz4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

/* ========================================
   FOOTER
   ======================================== */
.sidebar-footer[b-e6andswgz4] {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px 25px;
    background-color: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}

/* Other styles from EventViewModal.razor.css can be merged here */
/* ... (status badges, info messages, etc.) ... */
.status-badge[b-e6andswgz4] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
}

.status-badge.status-success[b-e6andswgz4] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.status-badge.status-warning[b-e6andswgz4] {
    background: var(--BEC-colorPaletteYellowBackground1);
    color: var(--BEC-colorPaletteYellowForeground1);
}

.status-badge.status-danger[b-e6andswgz4] {
    background: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
}

.status-badge.status-secondary[b-e6andswgz4] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

.status-badge.status-active[b-e6andswgz4] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.status-badge.status-inactive[b-e6andswgz4] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.type-badge[b-e6andswgz4] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    background: var(--BEC-themeLighter);
    color: var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
}

.btn[b-e6andswgz4] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXL);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-e6andswgz4] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-e6andswgz4] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-e6andswgz4] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-primary[b-e6andswgz4] {
    background: var(--BEC-themePrimary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-e6andswgz4] {
    background: var(--BEC-themeSecondary);
}

/* /Components/Pages/MainLayout/Intranet/FeedbackAdministration/FeedbackAdministration.razor.rz.scp.css */
.fb-admin[b-y7oy3xwhjo] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

/* ── Toolbar ── */
.fb-admin__toolbar[b-y7oy3xwhjo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.fb-admin__toolbar-right[b-y7oy3xwhjo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fb-admin__count[b-y7oy3xwhjo] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
}

.fb-admin__filter[b-y7oy3xwhjo] {
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 4px;
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground1);
    font-size: 12px;
    cursor: pointer;
}

/* ── Buttons ── */
.fb-admin__btn[b-y7oy3xwhjo] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 30px;
    padding: 0 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.fb-admin__btn--ghost[b-y7oy3xwhjo] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.fb-admin__btn--ghost:hover:not(:disabled)[b-y7oy3xwhjo] {
    background: var(--BEC-colorNeutralBackground3);
}

.fb-admin__btn--ghost:disabled[b-y7oy3xwhjo] {
    opacity: 0.5;
    cursor: not-allowed;
}

.fb-admin__btn--primary[b-y7oy3xwhjo] {
    background: var(--BEC-colorBrandBackground);
    color: #fff;
}

.fb-admin__btn--primary:hover:not(:disabled)[b-y7oy3xwhjo] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.fb-admin__btn--primary:disabled[b-y7oy3xwhjo] {
    opacity: 0.6;
    cursor: not-allowed;
}

.fb-admin__btn--icon[b-y7oy3xwhjo] {
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 4px;
}

/* ── Loading / Empty ── */
.fb-admin__loading[b-y7oy3xwhjo], .fb-admin__empty[b-y7oy3xwhjo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
}

.fb-admin__spinner[b-y7oy3xwhjo] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: fb-spin-b-y7oy3xwhjo 0.7s linear infinite;
}

@keyframes fb-spin-b-y7oy3xwhjo { to { transform: rotate(360deg); } }

/* ── Table ── */
.fb-admin__table-wrap[b-y7oy3xwhjo] {
    overflow-x: auto;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 6px;
}

.fb-admin__table[b-y7oy3xwhjo] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.fb-admin__table thead tr[b-y7oy3xwhjo] {
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.fb-admin__table th[b-y7oy3xwhjo] {
    padding: 7px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.fb-admin__table td[b-y7oy3xwhjo] {
    padding: 6px 10px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    vertical-align: middle;
    color: var(--BEC-colorNeutralForeground1);
}

.fb-admin__row:last-child td[b-y7oy3xwhjo] { border-bottom: none; }
.fb-admin__row:hover td[b-y7oy3xwhjo] { background: var(--BEC-colorNeutralBackground2); }
.fb-admin__row--expanded td[b-y7oy3xwhjo] { background: var(--BEC-colorNeutralBackground2); }

.fb-admin__td--id[b-y7oy3xwhjo] { width: 48px; color: var(--BEC-colorNeutralForeground3); }
.fb-admin__td--name[b-y7oy3xwhjo] { width: 160px; font-weight: 500; }
.fb-admin__td--msg[b-y7oy3xwhjo] { max-width: 300px; color: var(--BEC-colorNeutralForeground2); }
.fb-admin__td--center[b-y7oy3xwhjo] { text-align: center; width: 80px; }
.fb-admin__td--date[b-y7oy3xwhjo] { white-space: nowrap; color: var(--BEC-colorNeutralForeground3); }
.fb-admin__td--actions[b-y7oy3xwhjo] { width: 48px; text-align: center; }
.fb-admin__none[b-y7oy3xwhjo] { color: var(--BEC-colorNeutralForeground4, #bbb); }

/* ── Status badges ── */
.fb-admin__badge[b-y7oy3xwhjo] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.fb-admin__badge--0[b-y7oy3xwhjo] { background: #dbeafe; color: #1d4ed8; }
.fb-admin__badge--1[b-y7oy3xwhjo] { background: #d1fae5; color: #065f46; }
.fb-admin__badge--2[b-y7oy3xwhjo] { background: #f3f4f6; color: #6b7280; }

/* ── Attach chip ── */
.fb-admin__attach-chip[b-y7oy3xwhjo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

/* ── Detail row ── */
.fb-admin__detail-row td[b-y7oy3xwhjo] {
    padding: 0;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.fb-admin__detail[b-y7oy3xwhjo] {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fb-admin__detail-label[b-y7oy3xwhjo] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0.35rem;
}

.fb-admin__attach-list[b-y7oy3xwhjo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.fb-admin__attach-link[b-y7oy3xwhjo] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 3px 10px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 4px;
    font-size: 11px;
    color: var(--BEC-colorBrandForeground);
    text-decoration: none;
}

.fb-admin__attach-link:hover[b-y7oy3xwhjo] { text-decoration: underline; }

.fb-admin__update-form[b-y7oy3xwhjo] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fb-admin__note-input[b-y7oy3xwhjo] {
    flex: 1;
    min-width: 200px;
    padding: 5px 8px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 4px;
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground1);
    font-size: 12px;
    resize: vertical;
}

.fb-admin__prev-note[b-y7oy3xwhjo] {
    margin-top: 0.35rem;
    padding: 5px 10px;
    background: #fef3c7;
    border-radius: 4px;
    font-size: 12px;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ── Pagination ── */
.fb-admin__pagination[b-y7oy3xwhjo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.fb-admin__page-info[b-y7oy3xwhjo] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}
/* /Components/Pages/MainLayout/Intranet/GalleryAdministration/FeaturedMediaPanel.razor.rz.scp.css */
/* Featured on Home panel.

   The shell below (.sidebar-container / .sidebar-header / .sidebar-title /
   .sidebar-close-btn) is duplicated from GalleryCreateModal.razor.css, which is
   this folder's established panel pattern.

   It has to be duplicated. An earlier version of this file carried a comment
   saying these "come from this folder's shared sidebar styling" and defined none
   of them — there is no such shared styling. Blazor CSS isolation rewrites every
   selector in a .razor.css with that component's OWN scope attribute, so
   GalleryCreateModal's rules match only GalleryCreateModal's elements. Borrowing
   the class names here inherited nothing: the header lost its gradient and its
   flex layout, and the close button fell back to a default browser button in the
   corner. That is why this panel rendered unstyled while its siblings did not.

   Keep these in sync with GalleryCreateModal/GalleryEditModal by hand, or lift
   all three onto BecSidePanel when this folder is next revisited. */

/* No rule here targets the sidebar root. The siblings each carry one of the form
   :global(.<their-css-class> .e-sidebar) { box-shadow; z-index } — those are dead
   code: SfSidebar's CssClass parameter never reaches the DOM in this Syncfusion
   version, verified in the browser (no .e-sidebar on the Gallery Administration
   page carries gallery-create-sidebar, gallery-edit-sidebar, or this panel's own
   class). Syncfusion writes z-index and width as INLINE styles instead, so a
   stylesheet rule could not override them anyway.
   The panel's width cap therefore lives on the SfSidebar's Width parameter — see
   FeaturedMediaPanel.razor. */

.sidebar-container[b-q1yljofc3n] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
}

.sidebar-header[b-q1yljofc3n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: linear-gradient(135deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.sidebar-title[b-q1yljofc3n] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: white;
}

.sidebar-title i[b-q1yljofc3n] {
    color: white;
    font-size: var(--BEC-fontSizeBase600);
}

.sidebar-close-btn[b-q1yljofc3n] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
    flex-shrink: 0;
}

.sidebar-close-btn:hover[b-q1yljofc3n] {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-close-btn i[b-q1yljofc3n] {
    font-size: var(--BEC-fontSizeBase400);
}

.fm-body[b-q1yljofc3n] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--BEC-spacingVerticalL, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingVerticalM, 12px);
}

.fm-intro[b-q1yljofc3n] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.fm-state[b-q1yljofc3n] {
    padding: 24px 0;
    text-align: center;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.fm-state--error[b-q1yljofc3n] { color: var(--BEC-colorPaletteRedForeground1, #a4262c); }

.fm-section-head[b-q1yljofc3n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2, #e1dfdd);
}

.fm-section-head:first-of-type[b-q1yljofc3n] { border-top: none; padding-top: 0; }

.fm-section-head h3[b-q1yljofc3n] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #323130);
}

/* The count is the cap made visible — an admin should never have to discover the
   limit by being rejected on save. Turns amber at the cap. */
.fm-count[b-q1yljofc3n] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--BEC-colorNeutralBackground3, #f3f2f1);
}

.fm-count--full[b-q1yljofc3n] {
    color: #8a5700;
    background: #fff4ce;
}

.fm-empty[b-q1yljofc3n],
.fm-notice[b-q1yljofc3n] {
    font-size: 12.5px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    background: var(--BEC-colorNeutralBackground3, #f3f2f1);
    border-radius: 6px;
    padding: 12px;
}

.fm-notice[b-q1yljofc3n] {
    background: #fff4ce;
    color: #8a5700;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Selection ─────────────────────────────────────────────────────────── */

.fm-selected[b-q1yljofc3n] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fm-selected__row[b-q1yljofc3n] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border: 1px solid var(--BEC-colorNeutralStroke2, #e1dfdd);
    border-radius: 8px;
    background: var(--BEC-colorNeutralBackground1, #fff);
}

/* The position number IS the feature — it is what the reader sees as slide order
   on the home page, so it leads the row rather than hiding in a tooltip. */
.fm-selected__pos[b-q1yljofc3n] {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--BEC-themePrimary, #1e3c72);
}

.fm-selected__text[b-q1yljofc3n] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.fm-selected__caption[b-q1yljofc3n] {
    font-size: 12.5px;
    color: var(--BEC-colorNeutralForeground1, #323130);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fm-selected__gallery[b-q1yljofc3n] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fm-selected__actions[b-q1yljofc3n] {
    flex: none;
    display: flex;
    gap: 2px;
}

.fm-icon-btn[b-q1yljofc3n] {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    cursor: pointer;
    font-size: 12px;
    transition: background 0.15s ease, color 0.15s ease;
}

.fm-icon-btn:hover:not(:disabled)[b-q1yljofc3n] { background: var(--BEC-colorNeutralBackground3, #f3f2f1); }
.fm-icon-btn:disabled[b-q1yljofc3n] { opacity: 0.35; cursor: not-allowed; }
.fm-icon-btn--danger:hover:not(:disabled)[b-q1yljofc3n] { background: #fde7e9; color: #a4262c; }

/* ── Thumbnails ────────────────────────────────────────────────────────── */

.fm-thumb[b-q1yljofc3n] {
    position: relative;
    flex: none;
    width: 44px;
    height: 34px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--BEC-colorNeutralBackground3, #f3f2f1);
    display: block;
}

.fm-thumb--lg[b-q1yljofc3n] {
    width: 100%;
    height: 78px;
    border-radius: 6px 6px 0 0;
}

.fm-thumb img[b-q1yljofc3n] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fm-thumb__play[b-q1yljofc3n] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    background: rgba(31, 37, 102, 0.32);
    pointer-events: none;
}

/* ── Picker ────────────────────────────────────────────────────────────── */

.fm-section-head--picker[b-q1yljofc3n] { flex-wrap: wrap; }

.fm-search[b-q1yljofc3n] {
    flex: 1;
    min-width: 140px;
    height: 30px;
    padding: 0 10px;
    font-size: 12.5px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d2d0ce);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #fff);
    color: var(--BEC-colorNeutralForeground1, #323130);
}

.fm-search:focus-visible[b-q1yljofc3n] {
    outline: 2px solid var(--BEC-themePrimary, #1e3c72);
    outline-offset: -1px;
}

.fm-grid[b-q1yljofc3n] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 8px;
}

.fm-card[b-q1yljofc3n] {
    padding: 0;
    border: 1px solid var(--BEC-colorNeutralStroke2, #e1dfdd);
    border-radius: 7px;
    background: var(--BEC-colorNeutralBackground1, #fff);
    cursor: pointer;
    overflow: hidden;
    text-align: start;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fm-card:hover:not(:disabled)[b-q1yljofc3n] {
    border-color: var(--BEC-themePrimary, #1e3c72);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Disabled at the cap rather than hidden: the media is still there and still
   relevant, it just cannot be added until something is removed. Hiding it would
   read as the search being broken. */
.fm-card:disabled[b-q1yljofc3n] { opacity: 0.45; cursor: not-allowed; }

.fm-card__add[b-q1yljofc3n] {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--BEC-themePrimary, #1e3c72);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.fm-card__caption[b-q1yljofc3n] {
    padding: 6px 8px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--BEC-colorNeutralForeground1, #323130);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.fm-footer[b-q1yljofc3n] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px var(--BEC-spacingVerticalL, 16px);
    border-top: 1px solid var(--BEC-colorNeutralStroke2, #e1dfdd);
    background: var(--BEC-colorNeutralBackground1, #fff);
}

.fm-footer__spacer[b-q1yljofc3n] { flex: 1; }

.fm-status[b-q1yljofc3n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.fm-status--ok[b-q1yljofc3n] { color: #0f7b3f; }
.fm-status--error[b-q1yljofc3n] { color: #a4262c; }

.fm-btn[b-q1yljofc3n] {
    height: 32px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.fm-btn--ghost[b-q1yljofc3n] {
    background: transparent;
    border-color: var(--BEC-colorNeutralStroke1, #d2d0ce);
    color: var(--BEC-colorNeutralForeground1, #323130);
}

.fm-btn--ghost:hover:not(:disabled)[b-q1yljofc3n] { background: var(--BEC-colorNeutralBackground3, #f3f2f1); }

.fm-btn--primary[b-q1yljofc3n] {
    background: var(--BEC-themePrimary, #1e3c72);
    color: #fff;
}

.fm-btn--primary:hover:not(:disabled)[b-q1yljofc3n] { background: var(--BEC-themeDark, #16305c); }

.fm-btn:disabled[b-q1yljofc3n] { opacity: 0.5; cursor: not-allowed; }

/* Gallery filter + paging (21 Sep 2026: the picker now receives every active item) */
.fm-select[b-q1yljofc3n] {
    height: 30px; max-width: 220px; padding: 0 8px; font-size: 12.5px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d2d0ce); border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #fff); color: var(--BEC-colorNeutralForeground1, #323130);
}
.fm-count[b-q1yljofc3n] { font-size: 11px; font-weight: 500; color: var(--BEC-colorNeutralForeground3, #a19f9d); margin-inline-start: 6px; }
.fm-more[b-q1yljofc3n] { display: flex; justify-content: center; padding: 12px 0 4px; }
.fm-more__btn[b-q1yljofc3n] {
    height: 32px; padding: 0 16px; font: inherit; font-size: 12.5px; cursor: pointer;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d2d0ce); border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #fff); color: var(--BEC-colorNeutralForeground1, #323130);
}
.fm-more__btn:hover[b-q1yljofc3n] { background: var(--BEC-colorNeutralBackground2, #f5f5f7); }
/* /Components/Pages/MainLayout/Intranet/GalleryAdministration/GalleryAdministration.razor.rz.scp.css */
/* ========================================
   GALLERY ADMINISTRATION - FOLDER/ALBUM CARD VIEW
   Modern card-based layout for gallery management
   
   FEATURES:
   ✅ Folder/Album card grid layout
   ✅ Cover image previews
   ✅ Quick action buttons
   ✅ Selection checkboxes
   ✅ Loading states
   ✅ Responsive design
   ✅ Lazy-loaded gallery items in view dialog
   ======================================== */

/* Smooth scrolling */
:global(html)[b-xh8b5apoh3] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER
   Fixed height to prevent page scrolling
   Only content scrolls internally
   ======================================== */
.erp-page-container[b-xh8b5apoh3] {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    position: relative;
}
/* ========================================
   ACTION TOOLBAR - CLEAN UNDERLINE DESIGN
   STICKY: Stays below header while scrolling
   DESIGN: Simple underline hover with visible rounded edges
   MATCHES: Events/News/Hero Administration tabs
   ======================================== */

/* Toolbar Container - COMPACT INLINE */
[b-xh8b5apoh3] .e-toolbar.e-control {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: none !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 6px 16px !important;
    min-height: 32px !important;
    margin: 0 !important;
}

/* Toolbar Items - Reduced Spacing */
[b-xh8b5apoh3] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

/* Right-aligned items (Search) - Add spacing from right edge */
[b-xh8b5apoh3] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: var(--BEC-spacingHorizontalS) !important;
}

/* Toolbar button base styling - Clean & Uniform - 20% Smaller */
[b-xh8b5apoh3] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 4px 10px !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 4px !important;
    min-height: 26px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Button Icons - Uniform (Active buttons are bright) */
[b-xh8b5apoh3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Text - Uniform */
[b-xh8b5apoh3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Hover Effect */
[b-xh8b5apoh3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-xh8b5apoh3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-xh8b5apoh3] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-themePrimary) !important;
}

/* Disabled State */
[b-xh8b5apoh3] .e-toolbar .e-toolbar-item .e-tbar-btn.e-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ========================================
   PAGE CONTENT - FOLDER/ALBUM CARD VIEW
   Fixed height - prevents page scrolling
   Content scrolls internally only
   ======================================== */
.erp-page-content[b-xh8b5apoh3] {
    flex: 1;
    padding: var(--BEC-spacingHorizontalXS) 16px 16px 16px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    height: calc(100vh - var(--BEC-dashboard-header-height) - 50px - 50px - 20px);
    max-height: calc(100vh - var(--BEC-dashboard-header-height) - 50px - 50px - 20px);
}

/* Loading Overlay */
.gallery-loading-overlay[b-xh8b5apoh3] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
}

.loading-spinner[b-xh8b5apoh3] {
    font-size: 32px;
    color: var(--BEC-themePrimary);
}

.gallery-loading-overlay p[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
    margin: 0;
}

/* Error State */
.gallery-error-state[b-xh8b5apoh3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: 60px 20px;
    text-align: center;
}

.gallery-error-state i[b-xh8b5apoh3] {
    font-size: 48px;
    color: var(--BEC-errorText);
    opacity: 0.7;
}

.gallery-error-state p[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.btn-retry[b-xh8b5apoh3] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    transition: all 0.2s ease;
}

.btn-retry:hover[b-xh8b5apoh3] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
}

/* Empty State */
.gallery-empty-state[b-xh8b5apoh3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: 80px 20px;
    text-align: center;
}

.gallery-empty-state i[b-xh8b5apoh3] {
    font-size: 64px;
    color: var(--BEC-colorNeutralForeground3);
    opacity: 0.3;
}

.gallery-empty-state p[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   FOLDER/ALBUM CARD GRID
   ======================================== */
.gallery-folder-grid[b-xh8b5apoh3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: var(--BEC-spacingHorizontalS) 0;
}

.gallery-folder-card[b-xh8b5apoh3] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    overflow: hidden;
    transition: all 0.15s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: none;
}

.gallery-folder-card:hover[b-xh8b5apoh3] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: var(--BEC-colorNeutralStroke1);
}

.gallery-folder-card.selected[b-xh8b5apoh3] {
    border-color: var(--BEC-themePrimary);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
}

/* Card Checkbox */
.card-checkbox[b-xh8b5apoh3] {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--BEC-borderRadiusSmall);
    padding: 2px;
    box-shadow: var(--BEC-shadow4);
}

.card-checkbox input[type="checkbox"][b-xh8b5apoh3] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--BEC-themePrimary);
}

/* Card Cover Image */
.card-cover[b-xh8b5apoh3] {
    width: 100%;
    height: 100px;
    position: relative;
    background: linear-gradient(135deg, var(--BEC-colorPaletteLightBlueBorder2) 0%, var(--BEC-colorPaletteBlueBorder2) 100%);
    overflow: hidden;
}

.cover-image[b-xh8b5apoh3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-folder-card:hover .cover-image[b-xh8b5apoh3] {
    transform: scale(1.05);
}

.video-cover[b-xh8b5apoh3] {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-play-overlay[b-xh8b5apoh3] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    transition: all 0.3s ease;
    z-index: 2;
}

.gallery-folder-card:hover .video-play-overlay[b-xh8b5apoh3] {
    background: var(--BEC-themePrimary);
    transform: translate(-50%, -50%) scale(1.1);
}

.video-duration-badge[b-xh8b5apoh3] {
    position: absolute;
    bottom: var(--BEC-spacingHorizontalS);
    right: var(--BEC-spacingHorizontalS);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    z-index: 2;
}

.no-cover-placeholder[b-xh8b5apoh3] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 28px;
    opacity: 0.3;
}

/* Status Badge */
.status-badge[b-xh8b5apoh3] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: var(--BEC-shadow4);
}

.status-badge.active[b-xh8b5apoh3] {
    background: var(--BEC-successBackground);
    color: var(--BEC-successText);
}

.status-badge.inactive[b-xh8b5apoh3] {
    background: var(--BEC-errorBackground);
    color: var(--BEC-errorText);
}

.status-badge i[b-xh8b5apoh3] {
    font-size: 12px;
}

/* Card Info */
.card-info[b-xh8b5apoh3] {
    padding: 6px 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-title[b-xh8b5apoh3] {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 0;
    line-height: 1.3;
}

.card-description[b-xh8b5apoh3] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 0;
}

/* Card Stats */
.card-stats[b-xh8b5apoh3] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

.stat-item[b-xh8b5apoh3] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.stat-item i[b-xh8b5apoh3] {
    font-size: 10px;
    color: var(--BEC-themePrimary);
}

/* Card Actions */
.card-actions[b-xh8b5apoh3] {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

.action-btn[b-xh8b5apoh3] {
    flex: 1;
    padding: 3px;
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 11px;
}

.action-btn:hover[b-xh8b5apoh3] {
    background: var(--BEC-colorNeutralBackground1);
    border-color: var(--BEC-themePrimary);
    color: var(--BEC-themePrimary);
    transform: translateY(-1px);
}

.view-btn:hover[b-xh8b5apoh3] {
    background: var(--BEC-themeLighterAlt);
    border-color: var(--BEC-themePrimary);
    color: var(--BEC-themePrimary);
}

.edit-btn:hover[b-xh8b5apoh3] {
    background: var(--BEC-warningBackground);
    border-color: var(--BEC-warningText);
    color: var(--BEC-warningText);
}

/* ========================================
   MODAL DIALOGS
   ======================================== */
.modal-overlay[b-xh8b5apoh3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-xh8b5apoh3 0.2s ease-out;
}

@keyframes fadeIn-b-xh8b5apoh3 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-container[b-xh8b5apoh3] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-xh8b5apoh3 0.3s ease-out;
}

.modal-container.modal-sm[b-xh8b5apoh3] {
    max-width: 500px;
}

.modal-container.modal-xlg[b-xh8b5apoh3] {
    max-width: 1400px;
}

@keyframes slideUp-b-xh8b5apoh3 {
    from {
        opacity: 0;
        transform: translateY(var(--BEC-spacingHorizontalXL));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-xh8b5apoh3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXL) 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: linear-gradient(to bottom, var(--BEC-colorNeutralBackground1) 0%, var(--BEC-colorNeutralBackground2) 100%);
}

.modal-title[b-xh8b5apoh3] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
}

.modal-title i[b-xh8b5apoh3] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase500);
}

.modal-close[b-xh8b5apoh3] {
    background: transparent;
    border: none;
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.modal-close:hover[b-xh8b5apoh3] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.modal-content[b-xh8b5apoh3] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    position: relative;
}

/* Dialog Loading Overlay */
.dialog-loading-overlay[b-xh8b5apoh3] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
}

.dialog-loading-overlay .loading-spinner[b-xh8b5apoh3] {
    font-size: 32px;
    color: var(--BEC-themePrimary);
}

.dialog-loading-overlay p[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
    margin: 0;
}

.modal-footer[b-xh8b5apoh3] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL) 24px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground2);
}

/* ========================================
   BUTTONS
   ======================================== */
.btn[b-xh8b5apoh3] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    transition: all 0.2s ease;
}

.btn:disabled[b-xh8b5apoh3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-xh8b5apoh3] {
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-primary:hover:not(:disabled)[b-xh8b5apoh3] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 120, 212, 0.2);
}

.btn-secondary[b-xh8b5apoh3] {
    background: var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-xh8b5apoh3] {
    background: var(--BEC-colorNeutralBackground3);
}

.btn-danger[b-xh8b5apoh3] {
    background: var(--BEC-errorText);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-danger:hover:not(:disabled)[b-xh8b5apoh3] {
    background: var(--BEC-themeDark);
}

.btn-warning[b-xh8b5apoh3] {
    background: var(--BEC-warningText);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-warning:hover:not(:disabled)[b-xh8b5apoh3] {
    background: var(--BEC-themeDark);
}

.btn-success[b-xh8b5apoh3] {
    background: var(--BEC-successText);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-success:hover:not(:disabled)[b-xh8b5apoh3] {
    background: var(--BEC-themeDark);
}

.btn-outline[b-xh8b5apoh3] {
    background: transparent;
    color: var(--BEC-themePrimary);
    border: 2px solid var(--BEC-themePrimary);
}

.btn-outline:hover:not(:disabled)[b-xh8b5apoh3] {
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   GALLERY INFO BAR (View Dialog)
   ======================================== */
.gallery-info-bar[b-xh8b5apoh3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-themeLighterAlt);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-themeLighter);
    margin-bottom: 24px;
}

.info-item[b-xh8b5apoh3] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.info-item i[b-xh8b5apoh3] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase400);
}

.gallery-description[b-xh8b5apoh3] {
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: 24px;
}

.gallery-description h3[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-themePrimary);
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.gallery-description p[b-xh8b5apoh3] {
    margin: 0;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   GALLERY ITEMS SECTION (Lazy Loaded)
   ======================================== */
.gallery-items-section[b-xh8b5apoh3] {
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.section-title[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.section-title i[b-xh8b5apoh3] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase500);
}

/* Empty Gallery State */
.empty-gallery[b-xh8b5apoh3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: var(--BEC-spacingHorizontalL);
    color: var(--BEC-colorNeutralForeground3);
}

.empty-gallery i[b-xh8b5apoh3] {
    font-size: 64px;
    opacity: 0.3;
}

.empty-gallery p[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase400);
    margin: 0;
}

/* ========================================
   ITEMS GRID - RESPONSIVE CARDS
   ======================================== */
.items-grid[b-xh8b5apoh3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: 24px;
}

.gallery-item-card[b-xh8b5apoh3] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.gallery-item-card:hover[b-xh8b5apoh3] {
    transform: translateY(-4px);
    box-shadow: var(--BEC-shadow8);
    border-color: var(--BEC-themePrimary);
}

/* Item Thumbnail */
.item-thumbnail[b-xh8b5apoh3] {
    width: 100%;
    height: 160px;
    position: relative;
    background: var(--BEC-colorNeutralBackground2);
    overflow: hidden;
}

.item-thumbnail img[b-xh8b5apoh3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-thumbnail.video[b-xh8b5apoh3] {
    position: relative;
}

/* Video preview element (for videos without thumbnails) */
.item-video-preview[b-xh8b5apoh3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--BEC-colorNeutralBackground2);
}

/* Cover image video element */
.card-cover video.cover-image[b-xh8b5apoh3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--BEC-colorNeutralBackground2);
}

.video-placeholder[b-xh8b5apoh3] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-themeLighterAlt);
}

.video-placeholder i[b-xh8b5apoh3] {
    font-size: 48px;
    color: var(--BEC-themePrimary);
    opacity: 0.3;
}

.video-overlay-badge[b-xh8b5apoh3] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    transition: all 0.3s ease;
}

.gallery-item-card:hover .video-overlay-badge[b-xh8b5apoh3] {
    background: var(--BEC-themePrimary);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Item Details */
.item-details[b-xh8b5apoh3] {
    padding: var(--BEC-spacingHorizontalM);
}

.item-caption[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: var(--BEC-spacingHorizontalS);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 40px;
}

.item-meta[b-xh8b5apoh3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

.media-type-badge[b-xh8b5apoh3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
}

.media-type-badge.type-image[b-xh8b5apoh3] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.media-type-badge.type-video[b-xh8b5apoh3] {
    background: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-errorText);
}

.item-date[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase100);
}

/* ========================================
   LOAD MORE SECTION (Lazy Loading)
   ======================================== */
.load-more-section[b-xh8b5apoh3] {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

.loading-more[b-xh8b5apoh3] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: 24px;
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
}

.loading-more i[b-xh8b5apoh3] {
    font-size: 20px;
}

/* ========================================
   WARNING MESSAGES (Delete Dialog)
   ======================================== */
.warning-message[b-xh8b5apoh3] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
}

.warning-message strong[b-xh8b5apoh3] {
    color: var(--BEC-warningText);
}

.warning-note[b-xh8b5apoh3] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-warningBackground);
    border-left: 3px solid var(--BEC-warningText);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.warning-note i[b-xh8b5apoh3] {
    color: var(--BEC-warningText);
    margin-top: var(--BEC-spacingHorizontalXXS);
    flex-shrink: 0;
}

.warning-note-info[b-xh8b5apoh3] {
    background: var(--BEC-themeLighterAlt);
    border-left-color: var(--BEC-themePrimary);
}

.warning-note-info i[b-xh8b5apoh3] {
    color: var(--BEC-themePrimary);
}

.warning-note-success[b-xh8b5apoh3] {
    background: var(--BEC-successBackground);
    border-left-color: var(--BEC-successText);
}

.warning-note-success i[b-xh8b5apoh3] {
    color: var(--BEC-successText);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .gallery-folder-grid[b-xh8b5apoh3] {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: var(--BEC-spacingHorizontalL);
    }
    
    .items-grid[b-xh8b5apoh3] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--BEC-spacingHorizontalM);
    }
    
    [b-xh8b5apoh3] .e-toolbar.e-control {
        top: 50px !important;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    .erp-page-header[b-xh8b5apoh3] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }
    
    .stats-container[b-xh8b5apoh3] {
        width: 100%;
        justify-content: space-around;
    }
    
    .gallery-folder-grid[b-xh8b5apoh3] {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: var(--BEC-spacingHorizontalM);
    }
    
    .items-grid[b-xh8b5apoh3] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--BEC-spacingHorizontalS);
    }
    
    .item-thumbnail[b-xh8b5apoh3] {
        height: 120px;
    }
    
    .modal-container.modal-xlg[b-xh8b5apoh3] {
        max-width: 95vw;
        width: 95vw;
    }
    
    [b-xh8b5apoh3] .e-toolbar.e-control {
        top: 90px !important;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {
    .gallery-folder-grid[b-xh8b5apoh3] {
        grid-template-columns: 1fr;
    }
    
    .items-grid[b-xh8b5apoh3] {
        grid-template-columns: 1fr;
    }
    
    .gallery-info-bar[b-xh8b5apoh3] {
        flex-direction: column;
        gap: var(--BEC-spacingHorizontalM);
    }
    
    [b-xh8b5apoh3] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }
}

/* ========================================
   MEDIA VIEWER (LIGHTBOX)
   Full-size image/video viewer
   ======================================== */

.media-viewer-dialog[b-xh8b5apoh3] {
    max-width: 95vw !important;
    max-height: 95vh !important;
}

.media-viewer-header[b-xh8b5apoh3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--BEC-spacingHorizontalL);
}

.media-info[b-xh8b5apoh3] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
}

.media-info i[b-xh8b5apoh3] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase500);
}

.modal-close[b-xh8b5apoh3] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.modal-close:hover[b-xh8b5apoh3] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
}

.modal-close i[b-xh8b5apoh3] {
    font-size: var(--BEC-fontSizeBase400);
}

.media-viewer-content[b-xh8b5apoh3] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalXL);
    min-height: 60vh;
    background: var(--BEC-colorNeutralBackground2);
}

.media-viewer-image[b-xh8b5apoh3] {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.media-viewer-video[b-xh8b5apoh3] {
    max-width: 100%;
    max-height: 80vh;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ========================================
   CLICKABLE GALLERY ITEMS
   Hover effects and clickable indicators
   ======================================== */

.gallery-item-card[b-xh8b5apoh3] {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-item-card:hover[b-xh8b5apoh3] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.item-thumbnail.clickable[b-xh8b5apoh3] {
    position: relative;
    overflow: hidden;
}

.item-thumbnail.clickable img[b-xh8b5apoh3] {
    transition: transform 0.3s ease;
}

.gallery-item-card:hover .item-thumbnail.clickable img[b-xh8b5apoh3] {
    transform: scale(1.05);
}

.item-overlay[b-xh8b5apoh3] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item-card:hover .item-overlay[b-xh8b5apoh3] {
    opacity: 1;
}

.item-overlay i[b-xh8b5apoh3] {
    color: white;
    font-size: 32px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
/* /Components/Pages/MainLayout/Intranet/GalleryAdministration/GalleryCreateModal.razor.rz.scp.css */
/* ========================================
   GALLERY CREATE WIZARD - SIDEBAR PATTERN
   Following NewsCreateModal Design
   ======================================== */

/* ========================================
   SIDEBAR CONTAINER
   ======================================== */

:global(.gallery-create-sidebar .e-sidebar)[b-r3yr2b56oa] {
    box-shadow: var(--BEC-shadow64);
    z-index: 1000;
}

.sidebar-container[b-r3yr2b56oa] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   SIDEBAR HEADER
   ======================================== */

.sidebar-header[b-r3yr2b56oa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: linear-gradient(135deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-r3yr2b56oa] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: white;
}

.sidebar-title i[b-r3yr2b56oa] {
    color: white;
    font-size: var(--BEC-fontSizeBase600);
}

.sidebar-close-btn[b-r3yr2b56oa] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
}

.sidebar-close-btn:hover[b-r3yr2b56oa] {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-close-btn i[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase400);
}

/* ========================================
   WIZARD PROGRESS BAR
   ======================================== */

.wizard-progress-bar[b-r3yr2b56oa] {
    display: flex;
    justify-content: space-around;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    position: relative;
}

.wizard-progress-bar[b-r3yr2b56oa]::before {
    content: '';
    position: absolute;
    top: calc(var(--BEC-spacingHorizontalL) + 15px);
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--BEC-colorNeutralStroke2);
    z-index: 0;
}

.progress-step[b-r3yr2b56oa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    position: relative;
    z-index: 1;
}

.progress-number[b-r3yr2b56oa] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralBackground1);
    border: 2px solid var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase300);
    transition: all 0.3s ease;
}

.progress-step.active .progress-number[b-r3yr2b56oa] {
    background: var(--BEC-themePrimary);
    border-color: var(--BEC-themePrimary);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.1);
}

.progress-step.completed .progress-number[b-r3yr2b56oa] {
    background: var(--BEC-colorPaletteGreenBackground3);
    border-color: var(--BEC-colorPaletteGreenForeground2);
    color: white;
}

.progress-step.completed .progress-number[b-r3yr2b56oa]::after {
    content: '\e73e';
    font-family: 'e-icons';
    position: absolute;
}

.progress-label[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    text-align: center;
    transition: all 0.3s ease;
}

.progress-step.active .progress-label[b-r3yr2b56oa] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   SIDEBAR CONTENT
   ======================================== */

.sidebar-content[b-r3yr2b56oa] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-step-content[b-r3yr2b56oa] {
    padding: var(--BEC-spacingHorizontalXL);
}

/* ========================================
   WIZARD STEP
   ======================================== */

.wizard-step[b-r3yr2b56oa] {
    max-width: 100%;
}

.step-title[b-r3yr2b56oa] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
}

.step-title i[b-r3yr2b56oa] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.step-description[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 var(--BEC-spacingHorizontalXL) 0;
}

.subsection-title[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    margin: var(--BEC-spacingHorizontalXL) 0 var(--BEC-spacingHorizontalL) 0;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

.form-group[b-r3yr2b56oa] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-label[b-r3yr2b56oa] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.form-label.required[b-r3yr2b56oa]::after {
    content: ' *';
    color: var(--BEC-colorPaletteRedForeground1);
}

.form-row[b-r3yr2b56oa] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.error-message[b-r3yr2b56oa] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
}

.field-hint[b-r3yr2b56oa] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Info Box */
.info-box[b-r3yr2b56oa] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, var(--BEC-colorNeutralBackground2) 0%, var(--BEC-colorNeutralBackground3) 100%);
    border-left: 4px solid var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.info-box i[b-r3yr2b56oa] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.info-box span[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

/* Toggle Wrapper */
.toggle-wrapper[b-r3yr2b56oa] {
    padding: var(--BEC-spacingHorizontalS) 0;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.toggle-hint[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   UPLOAD SECTION
   ======================================== */

.upload-section[b-r3yr2b56oa] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.upload-controls[b-r3yr2b56oa] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.btn-upload[b-r3yr2b56oa] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    justify-content: center;
}

.btn-upload:hover:not(:disabled)[b-r3yr2b56oa] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
}

.btn-upload:disabled[b-r3yr2b56oa] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-upload i[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase300);
}

/* Upload Progress Section */
.upload-progress-section[b-r3yr2b56oa] {
    margin-top: var(--BEC-spacingHorizontalXL);
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.upload-progress-item[b-r3yr2b56oa] {
    margin-bottom: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.upload-progress-item:last-child[b-r3yr2b56oa] {
    margin-bottom: 0;
}

.progress-file-info[b-r3yr2b56oa] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    margin-bottom: var(--BEC-spacingHorizontalS);
}

.progress-file-info i[b-r3yr2b56oa] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

.progress-file-name[b-r3yr2b56oa] {
    flex: 1;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress-status[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    white-space: nowrap;
}

.progress-bar-container[b-r3yr2b56oa] {
    width: 100%;
    height: 8px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusSmall);
    overflow: hidden;
    margin-bottom: var(--BEC-spacingHorizontalXS);
    position: relative;
}

.progress-bar[b-r3yr2b56oa] {
    height: 100%;
    background: linear-gradient(90deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.progress-bar[b-r3yr2b56oa]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer-b-r3yr2b56oa 1.5s infinite;
}

@keyframes shimmer-b-r3yr2b56oa {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.progress-percentage[b-r3yr2b56oa] {
    text-align: right;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
}

/* Uploaded Items Preview */
.uploaded-items-preview[b-r3yr2b56oa] {
    margin-top: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.uploaded-items-list[b-r3yr2b56oa] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--BEC-spacingHorizontalM);
    margin-top: var(--BEC-spacingHorizontalM);
}

.uploaded-item-card[b-r3yr2b56oa] {
    position: relative;
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    transition: all 0.2s ease;
}

.uploaded-item-card:hover[b-r3yr2b56oa] {
    box-shadow: var(--BEC-shadow8);
    transform: translateY(-2px);
}

.item-preview[b-r3yr2b56oa] {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.video-preview[b-r3yr2b56oa] {
    width: 100%;
    height: 120px;
    background: var(--BEC-colorNeutralBackground2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--BEC-colorNeutralForeground3);
}

.video-preview i[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase600);
}

.item-info[b-r3yr2b56oa] {
    padding: var(--BEC-spacingHorizontalS);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--BEC-colorNeutralBackground1);
}

.item-type[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
    text-transform: uppercase;
}

.btn-remove[b-r3yr2b56oa] {
    background: none;
    border: none;
    color: var(--BEC-colorPaletteRedForeground1);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remove:hover:not(:disabled)[b-r3yr2b56oa] {
    background: var(--BEC-colorPaletteRedBackground2);
    transform: scale(1.1);
}

.btn-remove:disabled[b-r3yr2b56oa] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   REVIEW SECTION
   ======================================== */

.review-section[b-r3yr2b56oa] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.review-section-title[b-r3yr2b56oa] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorBrandStroke1);
}

.review-grid[b-r3yr2b56oa] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.review-item[b-r3yr2b56oa] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.review-item-full[b-r3yr2b56oa] {
    grid-column: 1 / -1;
}

.review-label[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.review-value[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
}

/* ========================================
   SIDEBAR FOOTER
   ======================================== */

.sidebar-footer[b-r3yr2b56oa] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    position: sticky;
    bottom: 0;
}

/* ========================================
   SIDEBAR FOOTER BUTTONS (HTML buttons with custom CSS)
   ======================================== */

.btn[b-r3yr2b56oa] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXL);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-r3yr2b56oa] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-r3yr2b56oa] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-r3yr2b56oa] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-primary[b-r3yr2b56oa] {
    background: var(--BEC-themePrimary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-r3yr2b56oa] {
    background: var(--BEC-themeSecondary);
}

.btn-success[b-r3yr2b56oa] {
    background: var(--BEC-themePrimary);
    color: white;
}

.btn-success:hover:not(:disabled)[b-r3yr2b56oa] {
    background: var(--BEC-colorPaletteGreenForeground1);
}

.btn i[b-r3yr2b56oa] {
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    :global(.gallery-create-sidebar .e-sidebar)[b-r3yr2b56oa] {
        width: 90% !important;
    }

    .sidebar-header[b-r3yr2b56oa],
    .sidebar-footer[b-r3yr2b56oa] {
        padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    }

    .sidebar-step-content[b-r3yr2b56oa] {
        padding: var(--BEC-spacingHorizontalL);
    }

    .form-row[b-r3yr2b56oa] {
        grid-template-columns: 1fr;
    }

    .review-grid[b-r3yr2b56oa] {
        grid-template-columns: 1fr;
    }

    .uploaded-items-list[b-r3yr2b56oa] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}
/* /Components/Pages/MainLayout/Intranet/GalleryAdministration/GalleryEditModal.razor.rz.scp.css */
/* ========================================
   GALLERY EDIT WIZARD - SIDEBAR PATTERN
   Following NewsCreateModal Design
   ======================================== */

/* ========================================
   SIDEBAR CONTAINER
   ======================================== */

:global(.gallery-edit-sidebar .e-sidebar)[b-rtmfettkab] {
    box-shadow: var(--BEC-shadow64);
    z-index: 1000;
}

.sidebar-container[b-rtmfettkab] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   SIDEBAR HEADER
   ======================================== */

.sidebar-header[b-rtmfettkab] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: linear-gradient(135deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-rtmfettkab] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: white;
}

.sidebar-title i[b-rtmfettkab] {
    color: white;
    font-size: var(--BEC-fontSizeBase600);
}

.sidebar-close-btn[b-rtmfettkab] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
}

.sidebar-close-btn:hover[b-rtmfettkab] {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-close-btn i[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase400);
}

/* ========================================
   WIZARD PROGRESS BAR
   ======================================== */

.wizard-progress-bar[b-rtmfettkab] {
    display: flex;
    justify-content: space-around;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    position: relative;
}

.wizard-progress-bar[b-rtmfettkab]::before {
    content: '';
    position: absolute;
    top: calc(var(--BEC-spacingHorizontalL) + 15px);
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--BEC-colorNeutralStroke2);
    z-index: 0;
}

.progress-step[b-rtmfettkab] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    position: relative;
    z-index: 1;
}

.progress-number[b-rtmfettkab] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralBackground1);
    border: 2px solid var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase300);
    transition: all 0.3s ease;
}

.progress-step.active .progress-number[b-rtmfettkab] {
    background: var(--BEC-themePrimary);
    border-color: var(--BEC-themePrimary);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.1);
}

.progress-step.completed .progress-number[b-rtmfettkab] {
    background: var(--BEC-colorPaletteGreenBackground3);
    border-color: var(--BEC-colorPaletteGreenForeground2);
    color: white;
}

.progress-step.completed .progress-number[b-rtmfettkab]::after {
    content: '\e73e';
    font-family: 'e-icons';
    position: absolute;
}

.progress-label[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    text-align: center;
    transition: all 0.3s ease;
}

.progress-step.active .progress-label[b-rtmfettkab] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   SIDEBAR CONTENT
   ======================================== */

.sidebar-content[b-rtmfettkab] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-step-content[b-rtmfettkab] {
    padding: var(--BEC-spacingHorizontalXL);
}

/* ========================================
   WIZARD STEP
   ======================================== */

.wizard-step[b-rtmfettkab] {
    max-width: 100%;
}

.step-title[b-rtmfettkab] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
}

.step-title i[b-rtmfettkab] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.step-description[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 var(--BEC-spacingHorizontalXL) 0;
}

.subsection-title[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    margin: var(--BEC-spacingHorizontalXL) 0 var(--BEC-spacingHorizontalL) 0;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

.form-group[b-rtmfettkab] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-label[b-rtmfettkab] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.form-label.required[b-rtmfettkab]::after {
    content: ' *';
    color: var(--BEC-colorPaletteRedForeground1);
}

.form-row[b-rtmfettkab] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.error-message[b-rtmfettkab] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
}

.field-hint[b-rtmfettkab] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Info Box */
.info-box[b-rtmfettkab] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, var(--BEC-colorNeutralBackground2) 0%, var(--BEC-colorNeutralBackground3) 100%);
    border-left: 4px solid var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.info-box i[b-rtmfettkab] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.info-box span[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

/* Toggle Wrapper */
.toggle-wrapper[b-rtmfettkab] {
    padding: var(--BEC-spacingHorizontalS) 0;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.toggle-hint[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   UPLOAD SECTION
   ======================================== */

.upload-section[b-rtmfettkab] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.upload-controls[b-rtmfettkab] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.btn-upload[b-rtmfettkab] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    justify-content: center;
}

.btn-upload:hover:not(:disabled)[b-rtmfettkab] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
}

.btn-upload:disabled[b-rtmfettkab] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-upload i[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase300);
}

/* Upload Progress Section */
.upload-progress-section[b-rtmfettkab] {
    margin-top: var(--BEC-spacingHorizontalXL);
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.upload-progress-item[b-rtmfettkab] {
    margin-bottom: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.upload-progress-item:last-child[b-rtmfettkab] {
    margin-bottom: 0;
}

.progress-file-info[b-rtmfettkab] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    margin-bottom: var(--BEC-spacingHorizontalS);
}

.progress-file-info i[b-rtmfettkab] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

.progress-file-name[b-rtmfettkab] {
    flex: 1;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress-status[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    white-space: nowrap;
}

.progress-bar-container[b-rtmfettkab] {
    width: 100%;
    height: 8px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusSmall);
    overflow: hidden;
    margin-bottom: var(--BEC-spacingHorizontalXS);
    position: relative;
}

.progress-bar[b-rtmfettkab] {
    height: 100%;
    background: linear-gradient(90deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.progress-bar[b-rtmfettkab]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer-b-rtmfettkab 1.5s infinite;
}

@keyframes shimmer-b-rtmfettkab {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.progress-percentage[b-rtmfettkab] {
    text-align: right;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
}

/* Uploaded Items Preview */
.uploaded-items-preview[b-rtmfettkab] {
    margin-top: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.uploaded-items-list[b-rtmfettkab] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--BEC-spacingHorizontalM);
    margin-top: var(--BEC-spacingHorizontalM);
}

.uploaded-item-card[b-rtmfettkab] {
    position: relative;
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    transition: all 0.2s ease;
}

.uploaded-item-card:hover[b-rtmfettkab] {
    box-shadow: var(--BEC-shadow8);
    transform: translateY(-2px);
}

.item-preview[b-rtmfettkab] {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.video-preview[b-rtmfettkab] {
    width: 100%;
    height: 120px;
    background: var(--BEC-colorNeutralBackground2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--BEC-colorNeutralForeground3);
}

.video-preview i[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase600);
}

.item-info[b-rtmfettkab] {
    padding: var(--BEC-spacingHorizontalS);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--BEC-colorNeutralBackground1);
}

.item-type[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
    text-transform: uppercase;
}

.btn-remove[b-rtmfettkab] {
    background: none;
    border: none;
    color: var(--BEC-colorPaletteRedForeground1);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remove:hover:not(:disabled)[b-rtmfettkab] {
    background: var(--BEC-colorPaletteRedBackground2);
    transform: scale(1.1);
}

.btn-remove:disabled[b-rtmfettkab] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   REVIEW SECTION
   ======================================== */

.review-section[b-rtmfettkab] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.review-section-title[b-rtmfettkab] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorBrandStroke1);
}

.review-grid[b-rtmfettkab] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.review-item[b-rtmfettkab] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.review-item-full[b-rtmfettkab] {
    grid-column: 1 / -1;
}

.review-label[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.review-value[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
}

/* ========================================
   SIDEBAR FOOTER
   ======================================== */

.sidebar-footer[b-rtmfettkab] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    position: sticky;
    bottom: 0;
}

/* ========================================
   SIDEBAR FOOTER BUTTONS (HTML buttons with custom CSS)
   ======================================== */

.btn[b-rtmfettkab] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXL);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-rtmfettkab] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-rtmfettkab] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-rtmfettkab] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-primary[b-rtmfettkab] {
    background: var(--BEC-themePrimary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-rtmfettkab] {
    background: var(--BEC-themeSecondary);
}

.btn-success[b-rtmfettkab] {
    background: var(--BEC-themePrimary);
    color: white;
}

.btn-success:hover:not(:disabled)[b-rtmfettkab] {
    background: var(--BEC-colorPaletteGreenForeground1);
}

.btn i[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    :global(.gallery-edit-sidebar .e-sidebar)[b-rtmfettkab] {
        width: 90% !important;
    }

    .sidebar-header[b-rtmfettkab],
    .sidebar-footer[b-rtmfettkab] {
        padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    }

    .sidebar-step-content[b-rtmfettkab] {
        padding: var(--BEC-spacingHorizontalL);
    }

    .form-row[b-rtmfettkab] {
        grid-template-columns: 1fr;
    }

    .review-grid[b-rtmfettkab] {
        grid-template-columns: 1fr;
    }

    .uploaded-items-list[b-rtmfettkab] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .existing-items-grid[b-rtmfettkab] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   EXISTING ITEMS MANAGEMENT
   ======================================== */

.existing-items-section[b-rtmfettkab] {
    margin-bottom: var(--BEC-spacingVerticalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.section-header[b-rtmfettkab] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--BEC-spacingVerticalL);
    flex-wrap: wrap;
    gap: var(--BEC-spacingHorizontalM);
}

.bulk-actions[b-rtmfettkab] {
    display: flex;
    gap: var(--BEC-spacingHorizontalM);
    align-items: center;
}

.btn-select-all[b-rtmfettkab] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    transition: all 0.2s ease;
}

.btn-select-all:hover:not(:disabled)[b-rtmfettkab] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-themePrimary);
}

.btn-select-all:disabled[b-rtmfettkab] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-select-all input[type="checkbox"][b-rtmfettkab] {
    cursor: pointer;
}

.btn-delete-selected[b-rtmfettkab] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorPaletteRedBackground3);
    border: 1px solid var(--BEC-colorPaletteRedBorder2);
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    font-size: var(--BEC-fontSizeBase300);
    color: white;
    transition: all 0.2s ease;
}

.btn-delete-selected:hover:not(:disabled)[b-rtmfettkab] {
    background: var(--BEC-colorPaletteRedForeground3);
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow4);
}

.btn-delete-selected:disabled[b-rtmfettkab] {
    opacity: 0.5;
    cursor: not-allowed;
}

.loading-items[b-rtmfettkab] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingVerticalXXL);
    color: var(--BEC-colorNeutralForeground2);
}

.existing-items-grid[b-rtmfettkab] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--BEC-spacingHorizontalM);
}

.existing-item-card[b-rtmfettkab] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground1);
    border: 2px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
    position: relative;
}

.existing-item-card:hover[b-rtmfettkab] {
    border-color: var(--BEC-themePrimary);
    box-shadow: var(--BEC-shadow4);
}

.existing-item-card.selected[b-rtmfettkab] {
    border-color: var(--BEC-themePrimary);
    background: var(--BEC-colorBrandBackground2Selected);
}

.item-checkbox[b-rtmfettkab] {
    display: flex;
    align-items: center;
}

.item-checkbox input[type="checkbox"][b-rtmfettkab] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.item-preview[b-rtmfettkab] {
    width: 60px;
    height: 60px;
    border-radius: var(--BEC-borderRadiusSmall);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--BEC-colorNeutralBackground3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-preview img[b-rtmfettkab] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-preview-icon[b-rtmfettkab] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

.video-preview-icon i[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase600);
}

.item-details[b-rtmfettkab] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingVerticalXXS);
    overflow: hidden;
}

.item-type[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    text-transform: uppercase;
}

.item-caption[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-delete-single[b-rtmfettkab] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--BEC-colorPaletteRedBackground3);
    border: none;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    color: white;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-delete-single:hover:not(:disabled)[b-rtmfettkab] {
    background: var(--BEC-colorPaletteRedForeground3);
    transform: scale(1.05);
}

.btn-delete-single:disabled[b-rtmfettkab] {
    opacity: 0.5;
    cursor: not-allowed;
}

.upload-new-items-section[b-rtmfettkab] {
    margin-top: var(--BEC-spacingVerticalL);
}

/* ========================================
   DELETE CONFIRMATION DIALOG
   ======================================== */

:global(.delete-confirmation-dialog .e-dlg-header-content)[b-rtmfettkab] {
    background: var(--BEC-colorPaletteRedBackground2);
    border-bottom: 2px solid var(--BEC-colorPaletteRedBorder2);
}

.dialog-header-delete[b-rtmfettkab] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    color: var(--BEC-colorPaletteRedForeground3);
    font-weight: var(--BEC-fontWeightSemibold);
}

.dialog-header-delete i[b-rtmfettkab] {
    font-size: var(--BEC-fontSizeBase500);
}

.dialog-content-delete[b-rtmfettkab] {
    padding: var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalL);
}

.dialog-content-delete p[b-rtmfettkab] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.5;
}

.dialog-footer[b-rtmfettkab] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingVerticalM) var(--BEC-spacingHorizontalL);
}

.btn-danger[b-rtmfettkab] {
    background: var(--BEC-colorPaletteRedBackground3);
    border: 1px solid var(--BEC-colorPaletteRedBorder2);
    color: white;
}

.btn-danger:hover:not(:disabled)[b-rtmfettkab] {
    background: var(--BEC-colorPaletteRedForeground3);
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow4);
}

.btn-danger:disabled[b-rtmfettkab] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Pages/MainLayout/Intranet/GalleryViewer/GalleryItemsView.razor.rz.scp.css */
/* ========================================
   GALLERY ITEMS VIEW PAGE
   Shows all items in a specific gallery
   ======================================== */

/* ========================================
   PAGE CONTAINER
   ======================================== */
.gallery-items-view-container[b-dfpwxb8vk1] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--BEC-colorNeutralBackground2);
}

/* ========================================
   PAGE HEADER (No Bar, Just Title & Back)
   ======================================== */
.items-view-header[b-dfpwxb8vk1] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.btn-back[b-dfpwxb8vk1] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    padding: 0;
}

.btn-back:hover[b-dfpwxb8vk1] {
    background: var(--BEC-colorNeutralBackground3);
    border-color: var(--BEC-themePrimary);
    color: var(--BEC-themePrimary);
    transform: translateX(-2px);
}

.btn-back i[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300);
}

.header-title-section[b-dfpwxb8vk1] {
    flex: 1;
}

.items-view-title[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    color: var(--BEC-colorNeutralForeground1);
}

.items-view-title i[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-themePrimary);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.items-view-content[b-dfpwxb8vk1] {
    flex: 1;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    position: relative;
    min-height: calc(100vh - 100px);
}

/* Loading Overlay - Unified Pattern */
.loading-overlay[b-dfpwxb8vk1] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
}

.loading-spinner[b-dfpwxb8vk1] {
    font-size: 32px;
    color: var(--BEC-themePrimary);
}

.loading-overlay p[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
    margin: 0;
}

/* Error State */
.items-error[b-dfpwxb8vk1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: 60px 20px;
    text-align: center;
}

.items-error i[b-dfpwxb8vk1] {
    font-size: 48px;
    color: #dc2626;
    opacity: 0.7;
}

.items-error p[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.btn-retry[b-dfpwxb8vk1] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    transition: all 0.2s ease;
}

.btn-retry:hover[b-dfpwxb8vk1] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
}

/* Empty State */
.items-empty[b-dfpwxb8vk1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: 60px 20px;
    text-align: center;
}

.items-empty i[b-dfpwxb8vk1] {
    font-size: 64px;
    color: var(--BEC-colorNeutralForeground4);
    opacity: 0.5;
}

.items-empty p[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   ITEMS GRID
   ======================================== */
.items-grid[b-dfpwxb8vk1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--BEC-spacingHorizontalL);
}

.item-card[b-dfpwxb8vk1] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: visible;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.item-card:hover[b-dfpwxb8vk1] {
    transform: translateY(-2px);
    box-shadow: var(--BEC-shadow8);
    border-color: var(--BEC-themePrimary);
}

.item-image-container[b-dfpwxb8vk1],
.item-video-container[b-dfpwxb8vk1] {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--BEC-colorNeutralBackground2);
    cursor: pointer;
    border-radius: var(--BEC-borderRadiusMedium) var(--BEC-borderRadiusMedium) 0 0;
}

.item-image[b-dfpwxb8vk1],
.item-thumbnail[b-dfpwxb8vk1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.item-card:hover .item-image[b-dfpwxb8vk1],
.item-card:hover .item-thumbnail[b-dfpwxb8vk1] {
    transform: scale(1.1);
}

.item-video-preview[b-dfpwxb8vk1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--BEC-colorNeutralBackground2);
}

.item-overlay[b-dfpwxb8vk1] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: var(--BEC-colorNeutralBackground1);
}

.item-card:hover .item-overlay[b-dfpwxb8vk1] {
    opacity: 1;
}

.item-overlay i[b-dfpwxb8vk1] {
    font-size: 32px;
}

.video-duration[b-dfpwxb8vk1] {
    position: absolute;
    bottom: var(--BEC-spacingHorizontalS);
    right: var(--BEC-spacingHorizontalS);
    background: rgba(0, 0, 0, 0.75);
    color: var(--BEC-colorNeutralBackground1);
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
}

.item-caption[b-dfpwxb8vk1] {
    padding: var(--BEC-spacingHorizontalS);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

.item-caption p[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   MEDIA VIEWER (Full Screen, No Scroll)
   ======================================== */
:global(.media-viewer-dialog-fullscreen .e-dlg-content)[b-dfpwxb8vk1] {
    padding: 0 !important;
    overflow: hidden !important;
    height: 100vh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
}

:global(.media-viewer-dialog-fullscreen .e-dialog)[b-dfpwxb8vk1] {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

:global(.media-viewer-dialog-fullscreen .e-dlg-overlay)[b-dfpwxb8vk1] {
    background: rgba(0, 0, 0, 0.95) !important;
}

.media-viewer-fullscreen[b-dfpwxb8vk1] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.95);
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.media-close-btn[b-dfpwxb8vk1] {
    position: absolute;
    top: var(--BEC-spacingHorizontalL);
    right: var(--BEC-spacingHorizontalL);
    z-index: 10;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: var(--BEC-colorNeutralBackground1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.2s ease;
}

.media-close-btn:hover[b-dfpwxb8vk1] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.media-nav-btn[b-dfpwxb8vk1] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: var(--BEC-colorNeutralBackground1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.2s ease;
}

.media-nav-btn:hover[b-dfpwxb8vk1] {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.media-nav-btn.prev[b-dfpwxb8vk1] {
    left: var(--BEC-spacingHorizontalL);
}

.media-nav-btn.next[b-dfpwxb8vk1] {
    right: var(--BEC-spacingHorizontalL);
}

.media-display-fullscreen[b-dfpwxb8vk1] {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 60px 80px 80px 80px; /* Space for buttons and info */
    box-sizing: border-box;
}

.media-image-fullscreen[b-dfpwxb8vk1] {
    max-width: calc(100vw - 160px);
    max-height: calc(100vh - 140px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0;
}

.media-video-fullscreen[b-dfpwxb8vk1] {
    max-width: calc(100vw - 160px);
    max-height: calc(100vh - 140px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0;
}

.media-info-fullscreen[b-dfpwxb8vk1] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--BEC-spacingHorizontalL);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    color: var(--BEC-colorNeutralBackground1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.media-caption[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0;
}

.media-counter[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300);
    opacity: 0.8;
    margin: 0;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .items-view-header[b-dfpwxb8vk1] {
        padding: var(--BEC-spacingHorizontalM);
    }

    .items-grid[b-dfpwxb8vk1] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--BEC-spacingHorizontalS);
    }

    .media-display-fullscreen[b-dfpwxb8vk1] {
        padding: 50px 60px 70px 60px;
    }

    .media-nav-btn[b-dfpwxb8vk1] {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .media-nav-btn.prev[b-dfpwxb8vk1] {
        left: var(--BEC-spacingHorizontalS);
    }

    .media-nav-btn.next[b-dfpwxb8vk1] {
        right: var(--BEC-spacingHorizontalS);
    }
}

/* ========================================
   MANAGE MODE & DELETE FUNCTIONALITY
   ======================================== */

.items-view-header[b-dfpwxb8vk1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingVerticalXL);
}

/* ========================================
   TOOLBAR STYLES
   ======================================== */
:global(.gallery-items-toolbar)[b-dfpwxb8vk1] {
    margin: 0 var(--BEC-spacingHorizontalL) var(--BEC-spacingVerticalL) var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow2);
}

/* Toolbar Button Styling */
:global(.gallery-items-toolbar .e-toolbar-items .e-toolbar-item .e-btn)[b-dfpwxb8vk1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingVerticalM) var(--BEC-spacingHorizontalM);
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: var(--BEC-borderRadiusSmall);
}

:global(.gallery-items-toolbar .e-toolbar-items .e-toolbar-item .e-btn:hover:not(:disabled))[b-dfpwxb8vk1] {
    background: var(--BEC-colorNeutralBackground1Hover);
    color: var(--BEC-themePrimary);
}

:global(.gallery-items-toolbar .e-toolbar-items .e-toolbar-item .e-btn:disabled)[b-dfpwxb8vk1] {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--BEC-colorNeutralForeground4);
}

:global(.gallery-items-toolbar .e-toolbar-items .e-toolbar-item .e-btn i)[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300);
}

/* Selection Info Display in Toolbar */
.selection-info[b-dfpwxb8vk1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: 0 var(--BEC-spacingHorizontalL);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
}

.selection-count[b-dfpwxb8vk1] {
    color: var(--BEC-themePrimary);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.selection-count i[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase400);
}

.total-count[b-dfpwxb8vk1] {
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

/* ========================================
   SELECTION MODE GRID (Always Active)
   ======================================== */
.items-grid.with-selection .item-card[b-dfpwxb8vk1] {
    cursor: default;
    user-select: none;
}

.items-grid.with-selection .item-card:hover[b-dfpwxb8vk1] {
    transform: translateY(-2px);
    box-shadow: var(--BEC-shadow8);
}

.items-grid.with-selection .item-card.selected[b-dfpwxb8vk1] {
    border: 3px solid var(--BEC-themePrimary);
    background: var(--BEC-colorBrandBackground2Selected);
}

.item-checkbox[b-dfpwxb8vk1] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--BEC-borderRadiusSmall);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    opacity: 1 !important;
    visibility: visible !important;
}

.item-checkbox input[type="checkbox"][b-dfpwxb8vk1] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--BEC-themePrimary);
    margin: 0;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Delete Confirmation Dialog */
:global(.delete-confirmation-dialog .e-dlg-header-content)[b-dfpwxb8vk1] {
    background: var(--BEC-colorPaletteRedBackground2);
    border-bottom: 2px solid var(--BEC-colorPaletteRedBorder2);
}

.dialog-header-delete[b-dfpwxb8vk1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    color: var(--BEC-colorPaletteRedForeground3);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase400);
}

.dialog-header-delete i[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase500);
}

.dialog-content-delete[b-dfpwxb8vk1] {
    padding: var(--BEC-spacingVerticalXL) var(--BEC-spacingHorizontalL);
}

.dialog-content-delete p[b-dfpwxb8vk1] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
}

.dialog-footer[b-dfpwxb8vk1] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingVerticalM) var(--BEC-spacingHorizontalL);
}

.btn-danger[b-dfpwxb8vk1] {
    background: #dc2626;
    border: 1px solid #b91c1c;
    color: white;
    padding: var(--BEC-spacingVerticalM) var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
    cursor: pointer;
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase300);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.btn-danger:hover:not(:disabled)[b-dfpwxb8vk1] {
    background: #b91c1c;
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow4);
}

.btn-danger:disabled[b-dfpwxb8vk1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger i[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   BUTTONS - MATCHING APP DESIGN SYSTEM
   ======================================== */
.btn-primary[b-dfpwxb8vk1] {
    background: var(--BEC-themePrimary) !important;
    border: 1px solid var(--BEC-themePrimary) !important;
    color: var(--BEC-colorNeutralBackground1) !important;
    padding: var(--BEC-spacingVerticalM) var(--BEC-spacingHorizontalL) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    cursor: pointer !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    font-size: var(--BEC-fontSizeBase300) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--BEC-spacingHorizontalS) !important;
    box-shadow: 0 2px 4px rgba(0, 120, 212, 0.2) !important;
    min-height: 36px !important;
}

.btn-primary:hover:not(:disabled)[b-dfpwxb8vk1] {
    background: var(--BEC-themeSecondary) !important;
    border-color: var(--BEC-themeSecondary) !important;
    box-shadow: 0 4px 8px rgba(0, 120, 212, 0.3) !important;
    transform: translateY(-1px) !important;
}

.btn-primary:active:not(:disabled)[b-dfpwxb8vk1] {
    background: var(--BEC-themeDark) !important;
    transform: translateY(0) !important;
}

.btn-primary:disabled[b-dfpwxb8vk1] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background: var(--BEC-colorNeutralStroke1) !important;
    border-color: var(--BEC-colorNeutralStroke1) !important;
}

.btn-primary i[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300) !important;
    color: var(--BEC-colorNeutralBackground1) !important;
}

.btn-secondary[b-dfpwxb8vk1] {
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    padding: var(--BEC-spacingVerticalM) var(--BEC-spacingHorizontalL) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    cursor: pointer !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    font-size: var(--BEC-fontSizeBase300) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--BEC-spacingHorizontalS) !important;
    min-height: 36px !important;
}

.btn-secondary:hover:not(:disabled)[b-dfpwxb8vk1] {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-color: var(--BEC-colorNeutralStroke2) !important;
}

.btn-secondary:disabled[b-dfpwxb8vk1] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.btn-secondary i[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300) !important;
}

/* ========================================
   UPLOAD SIDEBAR WIZARD STYLES
   ======================================== */
:global(.upload-wizard-sidebar)[b-dfpwxb8vk1] {
    z-index: 1000 !important;
}

:global(.upload-wizard-sidebar .e-sidebar)[b-dfpwxb8vk1] {
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15) !important;
}

.sidebar-header[b-dfpwxb8vk1] {
    padding: var(--BEC-spacingHorizontalXL) var(--BEC-spacingHorizontalL);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.sidebar-title[b-dfpwxb8vk1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase500);
}

.sidebar-title i[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase600);
    color: var(--BEC-themePrimary);
}

.sidebar-close-btn[b-dfpwxb8vk1] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.sidebar-close-btn:hover[b-dfpwxb8vk1] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-content[b-dfpwxb8vk1] {
    flex: 1;
    overflow-y: auto;
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground1);
}

.sidebar-step-content[b-dfpwxb8vk1] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingVerticalXL);
}

.sidebar-footer[b-dfpwxb8vk1] {
    padding: var(--BEC-spacingHorizontalL);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    flex-shrink: 0;
}

/* Selected Files List */
.selected-files-list[b-dfpwxb8vk1] {
    margin-top: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
}

.selected-files-title[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalXS) 0;
}

.selected-files-hint[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
    font-style: italic;
}

.selected-file-item[b-dfpwxb8vk1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalXS) 0;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.selected-file-item:last-child[b-dfpwxb8vk1] {
    border-bottom: none;
}

.selected-file-item i[b-dfpwxb8vk1] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase300);
}

.selected-file-item .file-name[b-dfpwxb8vk1] {
    flex: 1;
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground1);
}

.selected-file-item .file-size[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
}

/* Upload Confirmation */
.upload-confirmation[b-dfpwxb8vk1] {
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
}

.confirmation-header[b-dfpwxb8vk1] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.confirmation-header i[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase600);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.confirmation-header h3[b-dfpwxb8vk1] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.confirmation-message[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: var(--BEC-spacingHorizontalL);
    line-height: 1.5;
}

.confirmation-files[b-dfpwxb8vk1] {
    margin-top: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.confirmation-files h4[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
}

.confirmation-files ul[b-dfpwxb8vk1] {
    margin: 0;
    padding-left: var(--BEC-spacingHorizontalL);
    list-style: disc;
}

.confirmation-files li[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: var(--BEC-spacingHorizontalXS);
    line-height: 1.4;
}

/* Upload Progress Section */
.upload-progress-section[b-dfpwxb8vk1] {
    margin-top: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
}

.progress-title[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
}

.upload-section[b-dfpwxb8vk1] {
    margin-bottom: var(--BEC-spacingVerticalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.upload-section:last-child[b-dfpwxb8vk1] {
    margin-bottom: 0;
}

.upload-label[b-dfpwxb8vk1] {
    display: block;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.upload-controls[b-dfpwxb8vk1] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.btn-upload[b-dfpwxb8vk1] {
    padding: var(--BEC-spacingVerticalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    transition: all 0.2s ease;
    width: 100%;
    justify-content: center;
}

.btn-upload:hover:not(:disabled)[b-dfpwxb8vk1] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
    box-shadow: var(--BEC-shadow4);
}

.btn-upload:disabled[b-dfpwxb8vk1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.field-hint[b-dfpwxb8vk1] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin-top: var(--BEC-spacingHorizontalXS);
}

.upload-progress-list[b-dfpwxb8vk1] {
    margin-top: var(--BEC-spacingHorizontalL);
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
}

.upload-progress-item[b-dfpwxb8vk1] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.progress-info[b-dfpwxb8vk1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--BEC-fontSizeBase200);
}

.file-name[b-dfpwxb8vk1] {
    color: var(--BEC-colorNeutralForeground2);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress-text[b-dfpwxb8vk1] {
    color: var(--BEC-themePrimary);
    font-weight: var(--BEC-fontWeightMedium);
    margin-left: var(--BEC-spacingHorizontalS);
}

.progress-bar[b-dfpwxb8vk1] {
    width: 100%;
    height: 8px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusSmall);
    overflow: hidden;
}

.progress-fill[b-dfpwxb8vk1] {
    height: 100%;
    background: var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: width 0.3s ease;
}

/* /Components/Pages/MainLayout/Intranet/GalleryViewer/GalleryViewer.razor.rz.scp.css */
/* ========================================
   GALLERY VIEWER - VIEW ONLY PAGE
   Compact, performant design for browsing galleries
   
   FEATURES:
   ✅ Folder/Album card grid layout
   ✅ Cover image previews
   ✅ Gallery items grid view
   ✅ Media viewer (lightbox)
   ✅ Search functionality
   ✅ Responsive design
   ✅ Lazy loading
   ======================================== */

/* ========================================
   PAGE CONTAINER
   ======================================== */
.gallery-viewer-container[b-gkp4hqb884] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--BEC-colorNeutralBackground2);
}

/* ========================================
   PAGE HEADER (No Bar, Just Title & Back)
   ======================================== */
.viewer-header[b-gkp4hqb884] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.header-content[b-gkp4hqb884] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

/* Back Button */
.btn-back[b-gkp4hqb884] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    padding: 0;
}

.btn-back:hover[b-gkp4hqb884] {
    background: var(--BEC-colorNeutralBackground3);
    border-color: var(--BEC-themePrimary);
    color: var(--BEC-themePrimary);
    transform: translateX(-2px);
}

.btn-back:active[b-gkp4hqb884] {
    transform: translateX(-1px);
}

.btn-back i[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase300);
}

.header-title-section[b-gkp4hqb884] {
    flex: 1;
}

.viewer-title[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0 0 var(--BEC-spacingHorizontalXS) 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    color: var(--BEC-colorNeutralForeground1);
}

.viewer-title i[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-themePrimary);
}

.viewer-subtitle[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

.header-actions[b-gkp4hqb884] {
    flex-shrink: 0;
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.viewer-content[b-gkp4hqb884] {
    flex: 1;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    position: relative;
    min-height: calc(100vh - 120px);
}

/* Loading Overlay - Unified Pattern */
.loading-overlay[b-gkp4hqb884] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
}

.loading-spinner[b-gkp4hqb884] {
    font-size: 32px;
    color: var(--BEC-themePrimary);
}

.loading-overlay p[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
    margin: 0;
}

/* Error State */
.viewer-error[b-gkp4hqb884] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: 60px 20px;
    text-align: center;
}

.viewer-error i[b-gkp4hqb884] {
    font-size: 48px;
    color: #dc2626;
    opacity: 0.7;
}

.viewer-error p[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.btn-retry[b-gkp4hqb884] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    transition: all 0.2s ease;
}

.btn-retry:hover[b-gkp4hqb884] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
}

/* Empty State */
.viewer-empty[b-gkp4hqb884] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: 60px 20px;
    text-align: center;
}

.viewer-empty i[b-gkp4hqb884] {
    font-size: 64px;
    color: var(--BEC-colorNeutralForeground4);
    opacity: 0.5;
}

.viewer-empty p[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   GALLERY FOLDERS GRID
   ======================================== */
.gallery-folders-grid[b-gkp4hqb884] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalS) 0;
}

.gallery-folder-card[b-gkp4hqb884] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusLarge);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.gallery-folder-card:hover[b-gkp4hqb884] {
    transform: translateY(-4px);
    box-shadow: var(--BEC-shadow16);
    border-color: var(--BEC-themePrimary);
}

/* Cover Image/Video */
.folder-cover[b-gkp4hqb884] {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--BEC-colorNeutralBackground2);
}

.cover-image[b-gkp4hqb884] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-folder-card:hover .cover-image[b-gkp4hqb884] {
    transform: scale(1.05);
}

.cover-video[b-gkp4hqb884] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--BEC-colorNeutralBackground2);
}

.cover-placeholder[b-gkp4hqb884] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground4);
}

.cover-placeholder i[b-gkp4hqb884] {
    font-size: 48px;
    opacity: 0.5;
}

.folder-overlay[b-gkp4hqb884] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalS);
    opacity: 0;
    transition: opacity 0.3s ease;
    color: var(--BEC-colorNeutralBackground1);
}

.gallery-folder-card:hover .folder-overlay[b-gkp4hqb884] {
    opacity: 1;
}

.folder-overlay i[b-gkp4hqb884] {
    font-size: 32px;
}

.folder-overlay span[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* Folder Info */
.folder-info[b-gkp4hqb884] {
    padding: var(--BEC-spacingHorizontalL);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.folder-title[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1.4;
}

.folder-description[b-gkp4hqb884] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.folder-stats[b-gkp4hqb884] {
    display: flex;
    gap: var(--BEC-spacingHorizontalL);
    margin-top: auto;
    padding-top: var(--BEC-spacingHorizontalS);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

.stat-item[b-gkp4hqb884] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

.stat-item i[b-gkp4hqb884] {
    color: var(--BEC-themePrimary);
}


/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 1024px) {
    .gallery-folders-grid[b-gkp4hqb884] {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: var(--BEC-spacingHorizontalM);
    }

    .items-grid[b-gkp4hqb884] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--BEC-spacingHorizontalM);
    }
}

@media (max-width: 768px) {
    .viewer-header[b-gkp4hqb884] {
        flex-direction: column;
        gap: var(--BEC-spacingHorizontalM);
        align-items: flex-start;
    }

    .gallery-folders-grid[b-gkp4hqb884] {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: var(--BEC-spacingHorizontalS);
    }

    .items-grid[b-gkp4hqb884] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--BEC-spacingHorizontalS);
    }

    .media-nav-btn[b-gkp4hqb884] {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .media-nav-btn.prev[b-gkp4hqb884] {
        left: var(--BEC-spacingHorizontalS);
    }

    .media-nav-btn.next[b-gkp4hqb884] {
        right: var(--BEC-spacingHorizontalS);
    }
}

@media (max-width: 480px) {
    .gallery-folders-grid[b-gkp4hqb884] {
        grid-template-columns: 1fr;
    }

    .items-grid[b-gkp4hqb884] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* /Components/Pages/MainLayout/Intranet/HeroAdministration/HeroAdministration.razor.rz.scp.css */
/* ========================================
   HERO ADMINISTRATION
   Following BranchAdministration CSS pattern 100%
   
   FEATURES:
   ✅ Sticky Page Header (stays at top)
   ✅ Sticky Action Toolbar (stays below header with 8px gap)
   ✅ Sticky Grid Headers (stays below toolbar)
   ✅ Minimal CSS - Structure Only
   ✅ Syncfusion handles component styling
   ✅ Smooth scroll behavior
   ✅ Professional shadows & elevation
   ✅ Compact 20% smaller design
   ✅ Clear visual distinction: Active buttons (bright) vs Disabled (dimmed gray)
   
   STICKY POSITIONING STRATEGY:
   📌 Page Header:    top: 0px,    z-index: 100
   📌 Action Toolbar: top: 58px,   z-index: 90  (with 8px margin-top for spacing)
   📌 Grid Headers:   top: 110px,  z-index: 80  (adjusted for compact toolbar)
   
   This creates a layered sticky effect where each
   element sticks below the previous one while scrolling.
   
   IMPORTANT: Container must NOT have overflow-y,
   let the browser's default scroll work for sticky!
   ======================================== */

/* Smooth scrolling for the entire page */
:global(html)[b-1ycp8e6kg0] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   Let browser handle scrolling for sticky to work
   Pin to viewport height for pager bottom positioning
   ======================================== */
.erp-page-container[b-1ycp8e6kg0] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* ========================================
   ACTION TOOLBAR - CLEAN UNDERLINE DESIGN
   STICKY: Stays below header while scrolling
   DESIGN: Simple underline hover with visible rounded edges
   ======================================== */

/* Toolbar Container - COMPACT INLINE */
[b-1ycp8e6kg0] .e-toolbar.e-control {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: none !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 6px 16px !important;
    min-height: 32px !important;
    margin: 0 !important;
}

/* Toolbar Items - Reduced Spacing */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

/* Right-aligned items (Search) - Add spacing from right edge */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: var(--BEC-spacingHorizontalS) !important;
}

/* Toolbar button base styling - Clean & Uniform - 20% Smaller */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 4px 10px !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 4px !important;
    min-height: 26px !important;
    box-shadow: none !important;
}

/* Button Icons - Uniform (Active buttons are bright) */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
}

/* Button Text - Uniform (Active buttons are bright) */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
}

/* ======= SIMPLE COLOR HOVER EFFECT - ALL BUTTONS ======= */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons {
    color: var(--BEC-themePrimary) !important;
}

[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-themePrimary) !important;
}

/* ======= ACTIVE/PRESSED STATE ======= */
/* OPTION 5: Opacity Only (Simplest & Lightest) - ACTIVE */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) {
    opacity: 0.7 !important;
    transition: opacity 0.1s ease !important;
}

[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-icons,
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-themeDark) !important;
}

/* ======= DANGER BUTTON (Delete) - Red Color Hover ======= */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-icons,
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-tbar-btn-text {
    color: #dc2626 !important;
}

[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-icons,
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-tbar-btn-text {
    color: #b91c1c !important;
}

/* ======= DISABLED BUTTON STATE - Simple and Clean ======= */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
}

[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
    cursor: not-allowed;
    background: var(--BEC-colorNeutralBackground3);
}

[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn * {
    color: #aaaaaa;
}

/* ======= TOOLBAR SEPARATOR - Blue Accent (20% Smaller) ======= */
[b-1ycp8e6kg0] .e-toolbar .e-separator {
    background: var(--BEC-themePrimary) !important;
    width: 1px !important;
    height: var(--BEC-spacingHorizontalL) !important;
    margin: 0 var(--BEC-spacingHorizontalXS) !important;
    border-radius: 0.5px !important;
    opacity: 0.6 !important;
}

/* ======= BUTTON FOCUS STATE - NO BORDER (User Preference) ======= */
[b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   PAGE CONTENT
   No overflow here - let page scroll naturally
   Grid auto-sizes based on content
   ======================================== */
.erp-page-content[b-1ycp8e6kg0] {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.loading-overlay[b-1ycp8e6kg0] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
}

.loading-spinner[b-1ycp8e6kg0] {
    font-size: 32px;
    color: var(--BEC-themePrimary);
}

.loading-overlay p[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
    margin: 0;
}

/* ========================================
   GRID CUSTOMIZATION
   STICKY HEADERS: Column headers stay below toolbar
   Natural page scrolling with paging enabled
   ======================================== */

/* NOTE: Column headers, rows, and pager styles are in a global <style>
   block in IntranetAdministration.razor using CssClass="intranet-admin-grid".
   Syncfusion grid internals have no Blazor scope attribute. */

/* Code Badge in Grid — Wireframe Matched */
[b-1ycp8e6kg0] .code-badge {
    display: inline-block;
    padding: 1px 7px;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border: none;
}

/* Type Badges in Grid — Wireframe Matched */
[b-1ycp8e6kg0] .type-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    border: none;
}

[b-1ycp8e6kg0] .type-branch {
    background: #F0FFF0;
    color: #107C10;
}

[b-1ycp8e6kg0] .type-project {
    background: #F0F6FC;
    color: #0F6CBD;
}

/* Status Badges in Grid — Wireframe Matched (dot + text) */
[b-1ycp8e6kg0] .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    font-size: 10px;
    font-weight: 600;
    background: none;
    border: none;
}

[b-1ycp8e6kg0] .status-badge i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

[b-1ycp8e6kg0] .status-active {
    color: #16a34a;
}

[b-1ycp8e6kg0] .status-active i {
    background: #16a34a;
}

[b-1ycp8e6kg0] .status-inactive {
    color: var(--BEC-colorNeutralForeground3);
}

[b-1ycp8e6kg0] .status-inactive i {
    background: var(--BEC-colorNeutralForeground3);
}

/* RTL Text Support */
[b-1ycp8e6kg0] .rtl-text {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

[b-1ycp8e6kg0] .rtl-input {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

/* ========================================
   MODAL DIALOGS
   ======================================== */

/* Modal Overlay */
.modal-overlay[b-1ycp8e6kg0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-1ycp8e6kg0 0.2s ease-out;
}

@keyframes fadeIn-b-1ycp8e6kg0 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Container */
.modal-container[b-1ycp8e6kg0] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-1ycp8e6kg0 0.3s ease-out;
}

.modal-container.modal-sm[b-1ycp8e6kg0] {
    max-width: 500px;
}

@keyframes slideUp-b-1ycp8e6kg0 {
    from {
        opacity: 0;
        transform: translateY(var(--BEC-spacingHorizontalXL));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal Header */
.modal-header[b-1ycp8e6kg0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXL) 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: linear-gradient(to bottom, var(--BEC-colorNeutralBackground1) 0%, #f9fafb 100%);
    border-radius: var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge) 0 0;
}

.modal-title[b-1ycp8e6kg0] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
}

.modal-title i[b-1ycp8e6kg0] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase500);
}

.modal-close[b-1ycp8e6kg0] {
    background: transparent;
    border: none;
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.modal-close:hover[b-1ycp8e6kg0] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

/* Modal Content */
.modal-content[b-1ycp8e6kg0] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Modal Footer */
.modal-footer[b-1ycp8e6kg0] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL) 24px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: #f9fafb;
    border-radius: 0 0 var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge);
}

/* Buttons */
.btn[b-1ycp8e6kg0] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    transition: all 0.2s ease;
}

.btn:disabled[b-1ycp8e6kg0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-1ycp8e6kg0] {
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-primary:hover:not(:disabled)[b-1ycp8e6kg0] {
    background: var(--BEC-themeSecondary);
}

.btn-secondary[b-1ycp8e6kg0] {
    background: var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-1ycp8e6kg0] {
    background: #d1d1d1;
}

.btn-danger[b-1ycp8e6kg0] {
    background: #dc2626;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-danger:hover:not(:disabled)[b-1ycp8e6kg0] {
    background: #b91c1c;
}

.btn-warning[b-1ycp8e6kg0] {
    background: #ff8c00;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-warning:hover:not(:disabled)[b-1ycp8e6kg0] {
    background: #e67e00;
}

.btn-success[b-1ycp8e6kg0] {
    background: #10b981;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-success:hover:not(:disabled)[b-1ycp8e6kg0] {
    background: #059669;
}

/* Info Grid (View Dialog) */
.info-grid[b-1ycp8e6kg0] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.info-section[b-1ycp8e6kg0] {
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.section-title[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-themePrimary);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.section-title i[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase400);
}

.info-row[b-1ycp8e6kg0] {
    display: flex;
    padding: var(--BEC-spacingHorizontalS) 0;
    border-bottom: 1px solid #e5e7eb;
}

.info-row:last-child[b-1ycp8e6kg0] {
    border-bottom: none;
}

.info-label[b-1ycp8e6kg0] {
    flex: 0 0 180px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase300);
}

.info-value[b-1ycp8e6kg0] {
    flex: 1;
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase300);
}

/* Form Grid (Edit Dialog) */
.form-grid[b-1ycp8e6kg0] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.form-section[b-1ycp8e6kg0] {
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.form-group[b-1ycp8e6kg0] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-group:last-child[b-1ycp8e6kg0] {
    margin-bottom: 0;
}

.form-label[b-1ycp8e6kg0] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalSNudge);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.form-input[b-1ycp8e6kg0] {
    width: 100%;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border: 1px solid #d1d1d1;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-family: 'Segoe UI', sans-serif;
    transition: border-color 0.2s ease;
}

.form-input:focus[b-1ycp8e6kg0] {
    outline: none;
    border-color: var(--BEC-themePrimary);
    box-shadow: var(--BEC-shadow4);
}

.form-input:disabled[b-1ycp8e6kg0] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
    cursor: not-allowed;
}

.checkbox-label[b-1ycp8e6kg0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-1ycp8e6kg0] {
    width: var(--BEC-spacingHorizontalL);
    height: var(--BEC-spacingHorizontalL);
    cursor: pointer;
}

/* Warning Messages in Confirmation Dialogs */
.warning-message[b-1ycp8e6kg0] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
}

.warning-message strong[b-1ycp8e6kg0] {
    color: var(--BEC-warningText);
}

.warning-note[b-1ycp8e6kg0] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-warningBackground);
    border-left: 3px solid var(--BEC-warningText);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.warning-note i[b-1ycp8e6kg0] {
    color: var(--BEC-warningText);
    margin-top: var(--BEC-spacingHorizontalXXS);
    font-size: var(--BEC-fontSizeBase300);
    flex-shrink: 0;
}

.warning-note-info[b-1ycp8e6kg0] {
    background: var(--BEC-themeLighterAlt);
    border-left-color: var(--BEC-themePrimary);
}

.warning-note-info i[b-1ycp8e6kg0] {
    color: var(--BEC-themePrimary);
}

.warning-note-success[b-1ycp8e6kg0] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left-color: #10b981;
}

.warning-note-success i[b-1ycp8e6kg0] {
    color: #10b981;
}

/* ========================================
   GRID PAGER STYLES
   ⚠️ Pager styles now in BEC_Theme.css (Global)
   ⚠️ DO NOT duplicate Syncfusion overrides here
   ======================================== */

/* ========================================
   PAGE-SPECIFIC RESPONSIVE LAYOUT
   Syncfusion component styles handled by BEC_Theme.css
   Only page layout positioning here
   ======================================== */

/* Tablet (768px - 1024px) - Layout Positioning Only */
@media (max-width: 1024px) {
    /* Sticky Toolbar Positioning */
    [b-1ycp8e6kg0] .e-toolbar.e-control {
        top: 50px !important; /* Below compact header */
    }
    
    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-1ycp8e6kg0] {
        top: 100px !important; /* Below header + toolbar */
    }
}

/* Mobile (< 768px) - Layout Adjustments */
@media (max-width: 768px) {
    /* Page Header - Stack Vertically */
    .erp-page-header[b-1ycp8e6kg0] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }
    
    /* Stats - Full Width */
    .stats-container[b-1ycp8e6kg0] {
        width: 100%;
        justify-content: space-around;
    }

    /* Sticky Toolbar Positioning - Adjusted for taller header */
    [b-1ycp8e6kg0] .e-toolbar.e-control {
        top: 90px !important; /* Below taller mobile header */
    }

    /* Sticky Grid Headers Positioning */
    :global(.e-grid .e-gridheader)[b-1ycp8e6kg0] {
        top: 140px !important; /* Below header + toolbar */
    }
}

/* Small Mobile (< 480px) - Icon-Only Toolbar */
@media (max-width: 480px) {
    /* Hide button text, show icons only to save space */
    [b-1ycp8e6kg0] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }
    
    /* Column Chooser - Responsive on Mobile */
    [b-1ycp8e6kg0] .e-grid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-1ycp8e6kg0] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-1ycp8e6kg0] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   ======================================== */
[b-1ycp8e6kg0] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Column Chooser Dialog Header */
[b-1ycp8e6kg0] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Content */
[b-1ycp8e6kg0] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Footer (OK button) */
[b-1ycp8e6kg0] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ========================================
   HERO-SPECIFIC STYLING
   Additional styles for Hero image preview
   ======================================== */

/* Hero Image Preview in View Dialog */
.hero-preview[b-1ycp8e6kg0] {
    width: 100%;
    max-width: 800px;
    margin: var(--BEC-spacingVerticalL) 0;
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    box-shadow: var(--BEC-shadow8);
    background: var(--BEC-colorNeutralBackground2);
}

.hero-preview img[b-1ycp8e6kg0] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 400px;
}

.text-muted[b-1ycp8e6kg0] {
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Full width section for image */
.info-section.full-width[b-1ycp8e6kg0] {
    grid-column: 1 / -1;
}

/* ========================================
   HERO VIEW, EDIT & CREATE WIZARD SIDEBARS
   Following NewsAdministration Pattern
   ======================================== */

/* Sidebar Container */
:global(.hero-view-sidebar .e-sidebar)[b-1ycp8e6kg0],
:global(.hero-edit-sidebar .e-sidebar)[b-1ycp8e6kg0],
:global(.hero-create-sidebar .e-sidebar)[b-1ycp8e6kg0] {
    box-shadow: var(--BEC-shadow64);
    z-index: 1000;
}

.sidebar-container[b-1ycp8e6kg0] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
}

/* Sidebar Header */
.sidebar-header[b-1ycp8e6kg0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: linear-gradient(135deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-1ycp8e6kg0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: white;
}

.sidebar-title i[b-1ycp8e6kg0] {
    color: white;
    font-size: var(--BEC-fontSizeBase600);
}

.sidebar-close-btn[b-1ycp8e6kg0] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
}

.sidebar-close-btn:hover[b-1ycp8e6kg0] {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-close-btn i[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase400);
}


/* Sidebar Content */
.sidebar-content[b-1ycp8e6kg0] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-step-content[b-1ycp8e6kg0] {
    padding: var(--BEC-spacingHorizontalXL);
}

/* Wizard Step */
.wizard-step[b-1ycp8e6kg0] {
    max-width: 100%;
}

.step-title[b-1ycp8e6kg0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
}

.step-title i[b-1ycp8e6kg0] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.step-description[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 var(--BEC-spacingHorizontalXL) 0;
}

/* View Info Grid (Read-Only Display) */
.view-info-grid[b-1ycp8e6kg0] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
}

.view-info-row[b-1ycp8e6kg0] {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: var(--BEC-spacingHorizontalM);
    align-items: start;
}

.view-info-row.full-width[b-1ycp8e6kg0] {
    grid-template-columns: 1fr;
    flex-direction: column;
}

.view-info-label[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
}

.view-info-value[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    word-break: break-word;
}

.view-info-value i[b-1ycp8e6kg0] {
    margin-right: var(--BEC-spacingHorizontalXS);
    color: var(--BEC-colorBrandForeground1);
}

/* Status Badge in View */
.status-badge[b-1ycp8e6kg0] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalMNudge);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-badge.status-active[b-1ycp8e6kg0] {
    background: var(--BEC-successBackground);
    color: var(--BEC-successText);
}

.status-badge.status-inactive[b-1ycp8e6kg0] {
    background: var(--BEC-errorBackground);
    color: var(--BEC-errorText);
}

.status-badge i[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase100);
}

/* Hero Preview in View */
.hero-preview-view[b-1ycp8e6kg0] {
    width: 100%;
    max-width: 100%;
    margin-top: var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    box-shadow: var(--BEC-shadow8);
    background: var(--BEC-colorNeutralBackground2);
}

.hero-preview-view img[b-1ycp8e6kg0] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 400px;
}

.external-link-view[b-1ycp8e6kg0] {
    color: var(--BEC-colorBrandForeground1);
    text-decoration: none;
    font-size: var(--BEC-fontSizeBase200);
    word-break: break-all;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.external-link-view:hover[b-1ycp8e6kg0] {
    text-decoration: underline;
}

.external-link-view i[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase200);
}

/* Form Elements (Edit/Create Wizard) */
.form-group[b-1ycp8e6kg0] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-label[b-1ycp8e6kg0] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.form-label.required[b-1ycp8e6kg0]::after {
    content: ' *';
    color: var(--BEC-colorPaletteRedForeground1);
}

.form-row[b-1ycp8e6kg0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.error-message[b-1ycp8e6kg0] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
}

.field-hint[b-1ycp8e6kg0] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Info Box */
.info-box[b-1ycp8e6kg0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, var(--BEC-colorNeutralBackground2) 0%, var(--BEC-colorNeutralBackground3) 100%);
    border-left: 4px solid var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.info-box i[b-1ycp8e6kg0] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.info-box span[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.context-note-card[b-1ycp8e6kg0] {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalXL);
    background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
    border: 1px solid #c9ddff;
    border-radius: var(--BEC-borderRadiusMedium);
}

.context-note-icon[b-1ycp8e6kg0] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-themePrimary);
    color: white;
    box-shadow: var(--BEC-shadow4);
}

.context-note-copy[b-1ycp8e6kg0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.context-note-copy strong[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
}

.context-note-copy span[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase200);
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
}

/* Subsection Title */
.subsection-title[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    margin: var(--BEC-spacingHorizontalXL) 0 var(--BEC-spacingHorizontalL) 0;
}

/* Toggle Wrapper */
.toggle-wrapper[b-1ycp8e6kg0] {
    padding: var(--BEC-spacingHorizontalS) 0;
}

/* Read-only Input Display */
.input-readonly[b-1ycp8e6kg0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.input-readonly i[b-1ycp8e6kg0] {
    color: var(--BEC-colorBrandForeground1);
}

.input-loading[b-1ycp8e6kg0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorPaletteYellowBackground2);
    border: 1px solid var(--BEC-colorPaletteYellowForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorPaletteYellowForeground2);
}

.input-loading i[b-1ycp8e6kg0] {
    color: var(--BEC-colorPaletteYellowForeground2);
}

/* Image Upload Area */
.image-upload-area[b-1ycp8e6kg0] {
    position: relative;
    width: 100%;
}

.image-upload-area input[type="file"][b-1ycp8e6kg0] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
}

.compact-upload-row[b-1ycp8e6kg0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground2);
}

.btn-compact-upload[b-1ycp8e6kg0] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border: 1px solid var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-compact-upload-icon[b-1ycp8e6kg0] {
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: var(--BEC-borderRadiusLarge);
}

.btn-compact-upload:hover[b-1ycp8e6kg0] {
    background: var(--BEC-themeSecondary);
    border-color: var(--BEC-themeSecondary);
}

.btn-compact-upload i[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
}

.compact-upload-copy[b-1ycp8e6kg0] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXXS);
    min-width: 0;
}

.compact-upload-copy strong[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.4;
}

.compact-upload-copy small[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

.upload-progress[b-1ycp8e6kg0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    margin-top: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.upload-progress i[b-1ycp8e6kg0] {
    color: var(--BEC-colorBrandForeground1);
    animation: spin-b-1ycp8e6kg0 1s linear infinite;
}

@keyframes spin-b-1ycp8e6kg0 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Image Preview Container */
.image-preview-container[b-1ycp8e6kg0] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: var(--BEC-spacingHorizontalM);
    align-items: flex-start;
}

.image-preview[b-1ycp8e6kg0] {
    width: min(100%, 320px);
    aspect-ratio: 16 / 5;
    max-height: 160px;
    object-fit: cover;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
}

.btn-remove-image[b-1ycp8e6kg0] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorPaletteRedBackground1);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: flex-start;
}

.btn-remove-image:hover[b-1ycp8e6kg0] {
    background: var(--BEC-colorPaletteRedBackground2);
}

.btn-remove-image i[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase200);
}

/* Review Section */
.review-section[b-1ycp8e6kg0] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.review-section-title[b-1ycp8e6kg0] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorBrandStroke1);
}

.review-grid[b-1ycp8e6kg0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.review-item[b-1ycp8e6kg0] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.review-item.full-width[b-1ycp8e6kg0] {
    grid-column: 1 / -1;
}

.review-label[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.review-value[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
}

.review-image[b-1ycp8e6kg0] {
    width: 100%;
    max-width: 100%;
    max-height: 250px;
    object-fit: cover;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
    margin-top: var(--BEC-spacingHorizontalS);
}

/* Sidebar Footer */
.sidebar-footer[b-1ycp8e6kg0] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    position: sticky;
    bottom: 0;
}

/* Sidebar Footer Buttons */
.sidebar-footer .btn[b-1ycp8e6kg0] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXL);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.sidebar-footer .btn:disabled[b-1ycp8e6kg0] {
    opacity: 0.6;
    cursor: not-allowed;
}

.sidebar-footer .btn-secondary[b-1ycp8e6kg0] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-footer .btn-secondary:hover:not(:disabled)[b-1ycp8e6kg0] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.sidebar-footer .btn-primary[b-1ycp8e6kg0] {
    background: var(--BEC-themePrimary);
    color: white;
}

.sidebar-footer .btn-primary:hover:not(:disabled)[b-1ycp8e6kg0] {
    background: var(--BEC-themeSecondary);
}

.sidebar-footer .btn i[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
}

/* Loading Box */
.loading-box[b-1ycp8e6kg0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalXL);
    gap: var(--BEC-spacingHorizontalM);
    color: var(--BEC-colorNeutralForeground3);
}

.loading-box i[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase600);
    color: var(--BEC-colorBrandForeground1);
}

.loading-box p[b-1ycp8e6kg0] {
    font-size: var(--BEC-fontSizeBase300);
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    :global(.hero-view-sidebar .e-sidebar)[b-1ycp8e6kg0],
    :global(.hero-edit-sidebar .e-sidebar)[b-1ycp8e6kg0],
    :global(.hero-create-sidebar .e-sidebar)[b-1ycp8e6kg0] {
        width: 90% !important;
    }

    .sidebar-header[b-1ycp8e6kg0],
    .sidebar-footer[b-1ycp8e6kg0] {
        padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    }

    .sidebar-step-content[b-1ycp8e6kg0] {
        padding: var(--BEC-spacingHorizontalL);
    }

    .form-row[b-1ycp8e6kg0],
    .review-grid[b-1ycp8e6kg0],
    .view-info-row[b-1ycp8e6kg0] {
        grid-template-columns: 1fr;
    }
}
        /* Compact Upload Trigger */
        .upload-compact[b-1ycp8e6kg0] {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: #f8fafc;
            border: 1px dashed var(--BEC-colorNeutralStroke1);
            border-radius: var(--BEC-borderRadiusMedium);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .upload-compact:hover[b-1ycp8e6kg0] {
            border-color: var(--BEC-brandBackground);
            background: #eff6ff;
        }

        .upload-compact-icon[b-1ycp8e6kg0] {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: rgba(37, 99, 235, 0.1);
            color: var(--BEC-brandBackground);
            border-radius: 50%;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .upload-compact-content[b-1ycp8e6kg0] {
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .upload-compact-text[b-1ycp8e6kg0] {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--BEC-colorNeutralForeground1);
        }

        .upload-compact-subtext[b-1ycp8e6kg0] {
            font-size: 0.75rem;
            color: var(--BEC-colorNeutralForeground3);
        }

        /* Image Grid */
        .image-preview-section[b-1ycp8e6kg0] {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 10px;
        }

        .image-grid[b-1ycp8e6kg0] {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .image-card[b-1ycp8e6kg0] {
            position: relative;
            border-radius: var(--BEC-borderRadiusMedium);
            overflow: hidden;
            border: 1px solid var(--BEC-colorNeutralStroke1);
            background: #fff;
            aspect-ratio: 16/9;
        }

        .image-card img[b-1ycp8e6kg0] {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Hover overlay for actions */
        .image-overlay[b-1ycp8e6kg0] {
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.4);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 8px;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .image-card:hover .image-overlay[b-1ycp8e6kg0] {
            opacity: 1;
        }

        .image-actions[b-1ycp8e6kg0] {
            display: flex;
            justify-content: flex-end;
        }

        .action-icon[b-1ycp8e6kg0] {
            background: rgba(255,255,255,0.9);
            color: #ef4444;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
        }
        .action-icon:hover[b-1ycp8e6kg0] {
            background: #fff;
            transform: scale(1.1);
        }

        .image-meta[b-1ycp8e6kg0] {
            color: white;
            font-size: 0.75rem;
            font-weight: 500;
            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Status Badge inside Image Cards only */
        .image-card .status-badge[b-1ycp8e6kg0] {
            position: absolute;
            top: 8px;
            left: 8px;
            background: #10b981;
            color: white;
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
/* /Components/Pages/MainLayout/Intranet/HeroAdministration/HeroCreateModal.razor.rz.scp.css */
/* ========================================
   Hero Create Modal - Syncfusion Components
   Used on: HeroAdministration.razor
   
   ✅ COMPLIANT WITH rules.mdc:
   - Uses var(--BEC-*) variables ONLY
   - NO hardcoded colors
   - NO duplicate Syncfusion overrides
   - Professional multi-step wizard design
   - Syncfusion Dialog + Stepper + Toast
   ======================================== */

/* ========================================
   SYNCFUSION DIALOG CUSTOMIZATION
   ======================================== */

/* Dialog Container */
:global(.hero-create-dialog)[b-2bao1q74pp] {
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 1200px;
}

/* Dialog Header */
:global(.hero-create-dialog .e-dlg-header)[b-2bao1q74pp] {
    background: linear-gradient(to bottom, var(--BEC-colorNeutralBackground1) 0%, var(--BEC-colorNeutralBackground2) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    padding: var(--BEC-spacingHorizontalXL) var(--BEC-spacingHorizontalXXL);
}

.dialog-header-content[b-2bao1q74pp] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.dialog-title[b-2bao1q74pp] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase600);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.dialog-title i[b-2bao1q74pp] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase500);
}

.dialog-subtitle[b-2bao1q74pp] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Dialog Content */
:global(.hero-create-dialog .e-dlg-content)[b-2bao1q74pp] {
    padding: 0;
    overflow: hidden;
}

/* Dialog Footer */
:global(.hero-create-dialog .e-footer-content)[b-2bao1q74pp] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   SYNCFUSION STEPPER CUSTOMIZATION (LABEL ONLY)
   ✅ No icon styling needed - Label Only mode
   ✅ Clean, professional text-only display
   ======================================== */

:global(.hero-stepper)[b-2bao1q74pp] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
}

/* Stepper Labels (Text Only) */
:global(.branch-stepper .e-step .e-step-label-container)[b-2bao1q74pp] {
    padding: var(--BEC-spacingHorizontalM);
}

:global(.branch-stepper .e-step .e-step-text-content)[b-2bao1q74pp] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    transition: all 0.3s ease;
}

/* Active Step Label */
:global(.branch-stepper .e-step.e-step-selected .e-step-text-content)[b-2bao1q74pp] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase400);
}

/* Completed Step Label */
:global(.branch-stepper .e-step.e-step-completed .e-step-text-content)[b-2bao1q74pp] {
    color: var(--BEC-colorNeutralForeground2);
}

/* Stepper Connector Lines */
:global(.branch-stepper .e-stepper-progressbar)[b-2bao1q74pp] {
    background: var(--BEC-colorNeutralStroke2);
    height: 3px;
    transition: all 0.3s ease;
}

:global(.branch-stepper .e-step.e-step-completed .e-stepper-progressbar)[b-2bao1q74pp],
:global(.branch-stepper .e-step.e-step-selected .e-stepper-progressbar)[b-2bao1q74pp] {
    background: var(--BEC-themePrimary);
    height: 4px;
}

/* ========================================
   FORM CONTENT AREA
   ======================================== */

.dialog-form-content[b-2bao1q74pp] {
    padding: var(--BEC-spacingHorizontalXXL);
    min-height: 400px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom scrollbar */
.dialog-form-content[b-2bao1q74pp]::-webkit-scrollbar {
    width: 8px;
}

.dialog-form-content[b-2bao1q74pp]::-webkit-scrollbar-track {
    background: transparent;
}

.dialog-form-content[b-2bao1q74pp]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusLarge);
}

.dialog-form-content[b-2bao1q74pp]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralStroke3);
}

/* Form Step Container */
.form-step[b-2bao1q74pp] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
}

/* Form Row (2-column grid) */
.form-row[b-2bao1q74pp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

/* Form Row (3-column grid) - Compact horizontal layout */
.form-row-triple[b-2bao1q74pp] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--BEC-spacingHorizontalM);
}

/* Form Row (4-column grid) - Ultra-compact for small fields */
.form-row-quad[b-2bao1q74pp] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--BEC-spacingHorizontalM);
}

/* Form Group */
.form-group[b-2bao1q74pp] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.form-group.full-width[b-2bao1q74pp] {
    grid-column: span 2;
}

/* Form Label */
.form-label[b-2bao1q74pp] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.form-label .required[b-2bao1q74pp] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-left: var(--BEC-spacingHorizontalXXS);
}

/* Read-only Company/Organization Display */
.input-readonly[b-2bao1q74pp] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border: 1px solid var(--BEC-colorBrandStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background-color: var(--BEC-colorNeutralBackground3);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
    font-family: inherit;
}

.input-readonly i[b-2bao1q74pp] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

/* Loading Company/Organization Display */
.input-loading[b-2bao1q74pp] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    background-color: var(--BEC-colorNeutralBackground2);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
    font-family: inherit;
}

.input-loading i[b-2bao1q74pp] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase400);
}

/* Field Hint */
.field-hint[b-2bao1q74pp] {
    display: block;
    margin-top: calc(var(--BEC-spacingHorizontalXS) * -1);
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   INLINE VALIDATION ERROR
   Displayed directly under each field
   ======================================== */
.error-message[b-2bao1q74pp] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: var(--BEC-fontWeightMedium);
    animation: slideDown-b-2bao1q74pp 0.2s ease;
}

@keyframes slideDown-b-2bao1q74pp {
    from {
        opacity: 0;
        transform: translateY(calc(var(--BEC-spacingHorizontalXS) * -1));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   SECTION TITLE
   ======================================== */
.section-title[b-2bao1q74pp] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: var(--BEC-spacingHorizontalM) 0 var(--BEC-spacingHorizontalS) 0;
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   INFO BOX
   ======================================== */
.info-box[b-2bao1q74pp] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themeLighter);
    border-left: 4px solid var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: var(--BEC-spacingHorizontalS);
}

.info-box i[b-2bao1q74pp] {
    font-size: var(--BEC-fontSizeBase400);
    flex-shrink: 0;
}

/* ========================================
   TOGGLE SWITCH (Syncfusion SfSwitch)
   ======================================== */
.toggle-wrapper[b-2bao1q74pp] {
    display: flex;
    align-items: center;
    padding-top: var(--BEC-spacingHorizontalS);
}

/* ========================================
   SYNCFUSION SWITCH SIZING
   Make toggle wider to fit Active/Inactive text
   ======================================== */
.toggle-wrapper :global(.e-switch-wrapper)[b-2bao1q74pp] {
    width: 100px !important;
    min-width: 100px !important;
}

.toggle-wrapper :global(.e-switch-inner)[b-2bao1q74pp] {
    width: 100px !important;
}

.toggle-wrapper :global(.e-switch-on)[b-2bao1q74pp],
.toggle-wrapper :global(.e-switch-off)[b-2bao1q74pp] {
    font-size: var(--BEC-fontSizeBase300) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
}

/* ========================================
   DIALOG FOOTER (SYNCFUSION BUTTONS)
   ✅ NO custom button classes
   ✅ Uses Syncfusion e-btn classes
   ======================================== */
.dialog-footer-wrapper[b-2bao1q74pp] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    width: 100%;
}

.footer-spacer[b-2bao1q74pp] {
    flex: 1;
}

/* Syncfusion Button Customization */
:global(.hero-create-dialog .e-footer-content .e-btn)[b-2bao1q74pp] {
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalXL);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    min-width: 100px;
}

/* Primary Button Styling */
:global(.hero-create-dialog .e-footer-content .e-btn.e-primary)[b-2bao1q74pp] {
    background: var(--BEC-themePrimary);
    border-color: var(--BEC-themePrimary);
}

:global(.hero-create-dialog .e-footer-content .e-btn.e-primary:hover:not(:disabled))[b-2bao1q74pp] {
    background: var(--BEC-themeSecondary);
    border-color: var(--BEC-themeSecondary);
}

/* Success Button Styling */
:global(.hero-create-dialog .e-footer-content .e-btn.e-success)[b-2bao1q74pp] {
    background: var(--BEC-colorPaletteGreenBackground1);
    border-color: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorNeutralBackground1);
}

:global(.hero-create-dialog .e-footer-content .e-btn.e-success:hover:not(:disabled))[b-2bao1q74pp] {
    background: var(--BEC-colorPaletteGreenBackground2);
    border-color: var(--BEC-colorPaletteGreenBackground2);
}

/* Flat Button Styling */
:global(.hero-create-dialog .e-footer-content .e-btn.e-flat)[b-2bao1q74pp] {
    background: transparent;
    border-color: transparent;
    color: var(--BEC-colorNeutralForeground2);
}

:global(.hero-create-dialog .e-footer-content .e-btn.e-flat:hover:not(:disabled))[b-2bao1q74pp] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
}

/* Button Icons */
:global(.hero-create-dialog .e-footer-content .e-btn .e-btn-icon)[b-2bao1q74pp] {
    font-size: var(--BEC-fontSizeBase300);
}

/* Disabled Button State */
:global(.hero-create-dialog .e-footer-content .e-btn:disabled)[b-2bao1q74pp] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   REVIEW SECTION (Step 4)
   ======================================== */
.review-section[b-2bao1q74pp] {
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.review-section h4[b-2bao1q74pp] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-themePrimary);
}

.review-row[b-2bao1q74pp] {
    display: flex;
    padding: var(--BEC-spacingHorizontalS) 0;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.review-row:last-child[b-2bao1q74pp] {
    border-bottom: none;
}

.review-label[b-2bao1q74pp] {
    flex: 0 0 180px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase200);
}

.review-value[b-2bao1q74pp] {
    flex: 1;
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase200);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    :global(.event-create-dialog)[b-2bao1q74pp] {
        max-width: 700px;
    }
    
    .dialog-form-content[b-2bao1q74pp] {
        padding: var(--BEC-spacingHorizontalL);
        min-height: 350px;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    :global(.event-create-dialog)[b-2bao1q74pp] {
        width: 95%;
        max-width: 100%;
        margin: var(--BEC-spacingHorizontalMNudge);
    }
    
    :global(.hero-create-dialog .e-dlg-header)[b-2bao1q74pp] {
        padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    }
    
    .dialog-title[b-2bao1q74pp] {
        font-size: var(--BEC-fontSizeBase500);
    }
    
    :global(.hero-stepper)[b-2bao1q74pp] {
        padding: var(--BEC-spacingHorizontalL);
    }
    
    :global(.branch-stepper .e-step .e-step-text-content)[b-2bao1q74pp] {
        font-size: var(--BEC-fontSizeBase200);
    }
    
    .dialog-form-content[b-2bao1q74pp] {
        padding: var(--BEC-spacingHorizontalXL);
        min-height: 380px;
    }
    
    .form-row[b-2bao1q74pp] {
        grid-template-columns: 1fr;
    }
    
    .form-group.full-width[b-2bao1q74pp] {
        grid-column: span 1;
    }
    
    .dialog-footer-wrapper[b-2bao1q74pp] {
        flex-wrap: wrap;
    }
    
    .footer-spacer[b-2bao1q74pp] {
        display: none;
    }
    
    :global(.hero-create-dialog .e-footer-content .e-btn)[b-2bao1q74pp] {
        flex: 1;
        min-width: 120px;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {
    :global(.hero-create-dialog)[b-2bao1q74pp] {
        border-radius: 0;
        max-height: 100vh;
    }

    .dialog-title[b-2bao1q74pp] {
        font-size: var(--BEC-fontSizeBase400);
    }
    
    :global(.hero-stepper .e-step .e-step-text-content)[b-2bao1q74pp] {
        display: none; /* Hide labels to save space */
    }
}

/* ========================================
   HERO-SPECIFIC STYLING
   Image preview components
   ======================================== */

/* Hero Preview - Small (during input) */
.hero-preview-small[b-2bao1q74pp] {
    width: 100%;
    max-width: 600px;
    margin-top: var(--BEC-spacingVerticalM);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    box-shadow: var(--BEC-shadow4);
    background: var(--BEC-colorNeutralBackground2);
}

.hero-preview-small img[b-2bao1q74pp] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 200px;
}

/* Hero Preview - Review Step */
.hero-preview-review[b-2bao1q74pp] {
    width: 100%;
    max-width: 800px;
    margin-top: var(--BEC-spacingVerticalL);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    box-shadow: var(--BEC-shadow8);
    background: var(--BEC-colorNeutralBackground2);
}

.hero-preview-review img[b-2bao1q74pp] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 300px;
}

/* Preview Error Message */
.preview-error[b-2bao1q74pp] {
    padding: var(--BEC-spacingVerticalXL);
    text-align: center;
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingVerticalM);
}

.preview-error i[b-2bao1q74pp] {
    font-size: var(--BEC-fontSizeHero900);
    opacity: 0.5;
}

/* ========================================
   CENTERED STATUS DIALOG
   ======================================== */
.status-dialog-overlay[b-2bao1q74pp] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--BEC-colorNeutralBackgroundScrim) 65%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalXL);
    z-index: 1200;
}

.status-dialog[b-2bao1q74pp] {
    width: min(460px, 100%);
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusXLarge);
    box-shadow: var(--BEC-shadow16);
    padding: var(--BEC-spacingHorizontalXL);
}

.status-dialog-header[b-2bao1q74pp] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--BEC-spacingHorizontalL);
    align-items: start;
}

.status-dialog-icon[b-2bao1q74pp] {
    width: 48px;
    height: 48px;
    border-radius: var(--BEC-borderRadiusLarge);
    background: var(--BEC-colorNeutralBackground3);
    display: grid;
    place-items: center;
    font-size: var(--BEC-fontSizeBase500);
}

.status-dialog h3[b-2bao1q74pp] {
    margin: 0 0 var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorNeutralForeground1);
}

.status-dialog p[b-2bao1q74pp] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    line-height: 1.6;
}

.status-dialog-actions[b-2bao1q74pp] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--BEC-spacingHorizontalXL);
}

.status-dialog-button[b-2bao1q74pp] {
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    min-width: 108px;
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalXL);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralBackground1);
}

.status-dialog-button-success[b-2bao1q74pp],
.status-dialog.status-dialog-success .status-dialog-icon[b-2bao1q74pp] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorNeutralBackground1);
}

.status-dialog-button-warning[b-2bao1q74pp],
.status-dialog.status-dialog-warning .status-dialog-icon[b-2bao1q74pp] {
    background: var(--BEC-colorPaletteYellowBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.status-dialog-button-error[b-2bao1q74pp],
.status-dialog.status-dialog-error .status-dialog-icon[b-2bao1q74pp] {
    background: var(--BEC-colorPaletteRedBackground3);
    color: var(--BEC-colorNeutralBackground1);
}

.status-dialog-button-info[b-2bao1q74pp],
.status-dialog.status-dialog-info .status-dialog-icon[b-2bao1q74pp] {
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
}
/* /Components/Pages/MainLayout/Intranet/HighlightsAdministration/HighlightsAdministration.razor.rz.scp.css */
/* ═══ HIGHLIGHTS ADMINISTRATION ══════════════════════════════════════════════ */
.hl-admin[b-67183zvfar] {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Toolbar ── */
.hl-admin__toolbar[b-67183zvfar] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hl-admin__count[b-67183zvfar] {
    font-size: 0.8125rem;
    color: #6b7280;
    font-weight: 500;
}

.hl-admin__toolbar-right[b-67183zvfar] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hl-admin__filter-select[b-67183zvfar] {
    font-size: 0.8rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    padding: 0.3125rem 0.625rem;
    background: #fff;
    color: #374151;
    cursor: pointer;
}

/* ── Buttons ── */
.hl-admin__btn[b-67183zvfar] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
    white-space: nowrap;
}

.hl-admin__btn:disabled[b-67183zvfar] { opacity: 0.5; cursor: not-allowed; }

.hl-admin__btn--ghost[b-67183zvfar] { background: #f3f4f6; color: #374151; }
.hl-admin__btn--ghost:hover:not(:disabled)[b-67183zvfar] { background: #e5e7eb; }

.hl-admin__btn--publish[b-67183zvfar] { background: #dcfce7; color: #16a34a; }
.hl-admin__btn--publish:hover:not(:disabled)[b-67183zvfar] { background: #bbf7d0; }

.hl-admin__btn--deactivate[b-67183zvfar] { background: #fef3c7; color: #b45309; }
.hl-admin__btn--deactivate:hover:not(:disabled)[b-67183zvfar] { background: #fde68a; }

.hl-admin__btn--delete[b-67183zvfar] { background: #fee2e2; color: #b91c1c; }
.hl-admin__btn--delete:hover:not(:disabled)[b-67183zvfar] { background: #fecaca; }

/* ── Table ── */
.hl-admin__table-wrap[b-67183zvfar] {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.hl-admin__table[b-67183zvfar] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    color: #374151;
    background: #fff;
}

.hl-admin__table thead tr[b-67183zvfar] {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.hl-admin__table th[b-67183zvfar] {
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    white-space: nowrap;
}

.hl-admin__table td[b-67183zvfar] {
    padding: 0.5625rem 0.75rem;
    vertical-align: top;
    border-bottom: 1px solid #f3f4f6;
}

.hl-admin__row:last-child td[b-67183zvfar] { border-bottom: none; }
.hl-admin__row:hover td[b-67183zvfar] { background: #f9fafb; }

.hl-admin__row--pending td[b-67183zvfar] { background: #fffbeb; }
.hl-admin__row--pending:hover td[b-67183zvfar] { background: #fef3c7; }

.hl-admin__td--id[b-67183zvfar] { color: #9ca3af; font-size: 0.75rem; width: 3.5rem; }
.hl-admin__td--text[b-67183zvfar] { max-width: 260px; word-break: break-word; line-height: 1.5; }
.hl-admin__td--center[b-67183zvfar] { text-align: center; }
.hl-admin__td--date[b-67183zvfar] { white-space: nowrap; font-size: 0.75rem; color: #6b7280; }

.hl-admin__td--actions[b-67183zvfar] {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    flex-wrap: wrap;
    min-width: 160px;
}

/* ── Author cell ── */
.hl-admin__author-cell[b-67183zvfar] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 120px;
}

.hl-admin__author-name[b-67183zvfar] { font-weight: 600; font-size: 0.8125rem; color: #111827; }
.hl-admin__author-title[b-67183zvfar] { font-size: 0.6875rem; color: #6b7280; }

/* ── Status badges ── */
.hl-admin__status-badge[b-67183zvfar] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.hl-admin__status-badge--pending[b-67183zvfar]    { background: #fef3c7; color: #d97706; border: 1px solid #fde68a; }
.hl-admin__status-badge--published[b-67183zvfar]  { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }
.hl-admin__status-badge--deactivated[b-67183zvfar]{ background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
.hl-admin__status-badge--removed[b-67183zvfar]    { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }

/* ── Media chip ── */
.hl-admin__media-chip[b-67183zvfar] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.6875rem;
    font-weight: 700;
    border: 1px solid #bfdbfe;
}

.hl-admin__none[b-67183zvfar] { color: #d1d5db; }

/* ── Loading / Empty ── */
.hl-admin__loading[b-67183zvfar] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 2rem 0;
    color: #6b7280;
    font-size: 0.875rem;
}

.hl-admin__spinner[b-67183zvfar] {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid #e5e7eb;
    border-top-color: var(--BEC-primary, #1d4ed8);
    border-radius: 50%;
    animation: hl-admin-spin-b-67183zvfar 0.6s linear infinite;
}

@keyframes hl-admin-spin-b-67183zvfar {
    to { transform: rotate(360deg); }
}

.hl-admin__empty[b-67183zvfar] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 0;
    color: #9ca3af;
    font-size: 0.875rem;
}

/* ── Pagination ── */
.hl-admin__pagination[b-67183zvfar] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
    font-size: 0.8125rem;
    color: #6b7280;
}

.hl-admin__page-btn[b-67183zvfar] {
    padding: 0.25rem 0.625rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    background: #fff;
    cursor: pointer;
    font-size: 1rem;
    color: #374151;
    transition: background 0.15s;
}

.hl-admin__page-btn:hover:not(:disabled)[b-67183zvfar] { background: #f3f4f6; }
.hl-admin__page-btn:disabled[b-67183zvfar] { opacity: 0.4; cursor: not-allowed; }

/* ── Action message ── */
.hl-admin__action-msg[b-67183zvfar] {
    padding: 0.5rem 0.875rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    animation: hl-admin-fadein-b-67183zvfar 0.2s ease;
}

@keyframes hl-admin-fadein-b-67183zvfar {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hl-admin__action-msg--ok[b-67183zvfar]  { background: #dcfce7; color: #16a34a; }
.hl-admin__action-msg--err[b-67183zvfar] { background: #fee2e2; color: #b91c1c; }
/* /Components/Pages/MainLayout/Intranet/Intranet-EmployeeHighlights/Intranet-EmployeeHighlights.razor.rz.scp.css */
/* ═══ PAGE ══════════════════════════════════════════════════════════════════ */
.hl-page[b-3h7hjlg194] {
    width: 100%;
    max-width: 100%;
    padding: 0 0 3rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hl-page__header[b-3h7hjlg194] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px 16px;
    border-bottom: 1px solid var(--BEC-layoutGray100, #f0f2f5);
    background: var(--BEC-white, #fff);
    position: sticky;
    top: 0;
    z-index: 10;
}

.hl-page__header-left[b-3h7hjlg194] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--BEC-primary, #003087);
}

.hl-page__title-block[b-3h7hjlg194] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hl-page__header-left h1[b-3h7hjlg194] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.hl-back-btn[b-3h7hjlg194] {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--BEC-layoutGray200, #e2e6ea);
    border-radius: 8px;
    padding: 6px 13px;
    color: var(--BEC-layoutGray600, #5a6780);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.hl-back-btn:hover[b-3h7hjlg194] {
    background: var(--BEC-layoutGray50, #f8f9fb);
    border-color: var(--BEC-layoutGray300, #cbd2dc);
    color: var(--BEC-layoutGray800, #1a202c);
}

/* ═══ BUTTONS ════════════════════════════════════════════════════════════════ */
.hl-btn[b-3h7hjlg194] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1;
}

.hl-btn:disabled[b-3h7hjlg194] { opacity: 0.5; cursor: not-allowed; }

.hl-btn--primary[b-3h7hjlg194] {
    background: var(--BEC-primary, #1d4ed8);
    color: #fff;
}

.hl-btn--primary:hover:not(:disabled)[b-3h7hjlg194] { background: #1e40af; }

.hl-btn--ghost[b-3h7hjlg194] {
    background: #f3f4f6;
    color: #374151;
}

.hl-btn--ghost:hover:not(:disabled)[b-3h7hjlg194] { background: #e5e7eb; }

.hl-btn--danger[b-3h7hjlg194] {
    background: #fee2e2;
    color: #b91c1c;
}

.hl-btn--danger:hover:not(:disabled)[b-3h7hjlg194] { background: #fecaca; }

.hl-btn--warn[b-3h7hjlg194] {
    background: #fef3c7;
    color: #b45309;
}

.hl-btn--warn:hover:not(:disabled)[b-3h7hjlg194] { background: #fde68a; }

.hl-icon-btn[b-3h7hjlg194] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    transition: background 0.15s ease, color 0.15s ease;
}

.hl-icon-btn:hover[b-3h7hjlg194] { background: #f3f4f6; color: #374151; }
.hl-icon-btn--danger:hover[b-3h7hjlg194] { background: #fee2e2; color: #b91c1c; }

.hl-mod-btn[b-3h7hjlg194] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    background: #ede9fe;
    color: #6d28d9;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.hl-mod-btn:hover[b-3h7hjlg194] { background: #ddd6fe; }

/* ═══ CREATE CARD ════════════════════════════════════════════════════════════ */
.hl-create-card[b-3h7hjlg194] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem;
    margin: 20px 32px 0;
}

.hl-create-card__avatar[b-3h7hjlg194] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--BEC-primary, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
}
.hl-create-card__avatar img[b-3h7hjlg194] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hl-create-card__input-area[b-3h7hjlg194] { flex: 1; min-width: 0; }

.hl-create-card__placeholder[b-3h7hjlg194] {
    width: 100%;
    text-align: left;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    color: #9ca3af;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.hl-create-card__placeholder:hover[b-3h7hjlg194] { border-color: #d1d5db; background: #f3f4f6; }

.hl-create-card__textarea[b-3h7hjlg194] {
    width: 100%;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    color: #111827;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.hl-create-card__textarea:focus[b-3h7hjlg194] { outline: none; border-color: var(--BEC-primary, #1d4ed8); }

.hl-create-card__footer[b-3h7hjlg194] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.hl-create-card__char-count[b-3h7hjlg194] {
    font-size: 0.6875rem;
    color: #9ca3af;
}

.hl-create-card__char-count--warn[b-3h7hjlg194] { color: #f59e0b; }

.hl-create-card__error[b-3h7hjlg194] {
    font-size: 0.75rem;
    color: #b91c1c;
}

.hl-create-card__actions[b-3h7hjlg194] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

/* ═══ FEED ════════════════════════════════════════════════════════════════════ */
.hl-feed[b-3h7hjlg194] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 20px 32px 0;
}

.hl-card[b-3h7hjlg194] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem;
}

.hl-card--skeleton[b-3h7hjlg194] { pointer-events: none; }

.hl-card__avatar[b-3h7hjlg194] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--BEC-primary, #1d4ed8);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.hl-card__avatar img[b-3h7hjlg194] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hl-card__body[b-3h7hjlg194] { flex: 1; min-width: 0; }

.hl-card__header-row[b-3h7hjlg194] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.hl-card__author-info[b-3h7hjlg194] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
}

.hl-card__name[b-3h7hjlg194] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

.hl-card__job-title[b-3h7hjlg194] {
    font-size: 0.75rem;
    color: #6b7280;
}

.hl-card__time[b-3h7hjlg194] {
    font-size: 0.6875rem;
    color: #9ca3af;
}

.hl-card__actions[b-3h7hjlg194] { display: flex; gap: 0.25rem; }

.hl-card__text[b-3h7hjlg194] {
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.6;
    margin: 0 0 0.625rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.hl-card__engage[b-3h7hjlg194] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Skeleton elements */
.hl-card__avatar--sk[b-3h7hjlg194] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: #e5e7eb;
    animation: hl-sk-pulse-b-3h7hjlg194 1.4s ease-in-out infinite;
}

.hl-card__name--sk[b-3h7hjlg194] {
    height: 0.75rem;
    width: 8rem;
    border-radius: 0.25rem;
    background: #e5e7eb;
    animation: hl-sk-pulse-b-3h7hjlg194 1.4s ease-in-out infinite;
    margin-bottom: 0.5rem;
}

.hl-card__text--sk[b-3h7hjlg194] {
    height: 0.6875rem;
    border-radius: 0.25rem;
    background: #e5e7eb;
    animation: hl-sk-pulse-b-3h7hjlg194 1.4s ease-in-out infinite;
    margin-bottom: 0.375rem;
}

@keyframes hl-sk-pulse-b-3h7hjlg194 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ═══ ENGAGE BUTTONS ══════════════════════════════════════════════════════════ */
.hl-engage-btn[b-3h7hjlg194] {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.8125rem;
    color: #6b7280;
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.hl-engage-btn:hover[b-3h7hjlg194] { color: var(--BEC-primary, #1d4ed8); background: #eff6ff; }
.hl-engage-btn--active[b-3h7hjlg194] { color: var(--BEC-primary, #1d4ed8); }

/* ═══ COMMENT THREAD ══════════════════════════════════════════════════════════ */
.hl-comment-thread[b-3h7hjlg194] {
    margin-top: 0.75rem;
    padding-top: 0.625rem;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.hl-comment-list[b-3h7hjlg194] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hl-comment[b-3h7hjlg194] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.hl-comment__avatar[b-3h7hjlg194] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}

.hl-comment__avatar--img[b-3h7hjlg194] {
    object-fit: cover;
    display: block;
}

.hl-comment__bubble[b-3h7hjlg194] {
    flex: 1;
    min-width: 0;
    background: var(--BEC-layoutGray50, #f8f9fb);
    border-radius: 12px;
    padding: 8px 12px;
}

.hl-comment__header[b-3h7hjlg194] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}

.hl-comment__author[b-3h7hjlg194] {
    font-weight: 600;
    font-size: 12.5px;
    color: #111827;
}

.hl-comment__time[b-3h7hjlg194] {
    font-size: 11.5px;
    color: #9ca3af;
}

.hl-comment__text[b-3h7hjlg194] {
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
    margin: 0;
    word-break: break-word;
}

.hl-comment__delete[b-3h7hjlg194] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 2px 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
}

.hl-comment__delete:hover[b-3h7hjlg194] {
    color: #b91c1c;
    background: #fee2e2;
}

.hl-comment-empty[b-3h7hjlg194] { font-size: 0.8125rem; color: #9ca3af; padding: 4px 0; }
.hl-comment-loading[b-3h7hjlg194] {
    font-size: 0.8125rem;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hl-comment-load-more[b-3h7hjlg194] {
    background: none;
    border: none;
    font-size: 0.75rem;
    color: var(--BEC-primary, #1d4ed8);
    cursor: pointer;
    padding: 0.125rem 0;
    text-align: left;
    text-decoration: underline;
}

.hl-add-comment[b-3h7hjlg194] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.hl-add-comment__input[b-3h7hjlg194] {
    flex: 1;
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-family: inherit;
    color: #111827;
    background: #f9fafb;
    transition: border-color 0.15s ease;
}

.hl-add-comment__input:focus[b-3h7hjlg194] { outline: none; border-color: var(--BEC-primary, #1d4ed8); background: #fff; }

.hl-add-comment__send[b-3h7hjlg194] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    background: var(--BEC-primary, #1d4ed8);
    border: none;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.hl-add-comment__send:hover:not(:disabled)[b-3h7hjlg194] { background: #1e40af; }
.hl-add-comment__send:disabled[b-3h7hjlg194] { opacity: 0.5; cursor: not-allowed; }

/* ═══ LOAD MORE ══════════════════════════════════════════════════════════════ */
.hl-load-more-row[b-3h7hjlg194] {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

/* ═══ EMPTY ══════════════════════════════════════════════════════════════════ */
.hl-empty[b-3h7hjlg194] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    text-align: center;
    color: #d1d5db;
    gap: 0.75rem;
}

.hl-empty p[b-3h7hjlg194] { font-size: 0.9375rem; font-weight: 600; color: #6b7280; margin: 0; }
.hl-empty__sub[b-3h7hjlg194] { font-size: 0.8125rem; color: #9ca3af !important; }

/* ═══ DIALOG ══════════════════════════════════════════════════════════════════ */
.hl-dialog-overlay[b-3h7hjlg194] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.hl-dialog[b-3h7hjlg194] {
    background: #fff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    width: 100%;
    max-width: 28rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hl-dialog--wide[b-3h7hjlg194] { max-width: 48rem; }

.hl-dialog__title[b-3h7hjlg194] { font-size: 1rem; font-weight: 700; color: #111827; margin: 0; }
.hl-dialog__sub[b-3h7hjlg194] { font-size: 0.8125rem; color: #6b7280; margin: 0; }
.hl-dialog__error[b-3h7hjlg194] { font-size: 0.75rem; color: #b91c1c; margin: 0; }

.hl-dialog__textarea[b-3h7hjlg194] {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    font-family: inherit;
    color: #111827;
    resize: none;
    box-sizing: border-box;
}

.hl-dialog__textarea:focus[b-3h7hjlg194] { outline: none; border-color: var(--BEC-primary, #1d4ed8); }

.hl-dialog__footer[b-3h7hjlg194] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* ═══ MOD LIST ═══════════════════════════════════════════════════════════════ */
.hl-mod-list[b-3h7hjlg194] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    max-height: 60vh;
    overflow-y: auto;
}

.hl-mod-item[b-3h7hjlg194] {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.hl-mod-item__meta[b-3h7hjlg194] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.75rem;
    color: #6b7280;
}

.hl-mod-item__type[b-3h7hjlg194] {
    background: #e0e7ff;
    color: #4338ca;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
}

.hl-mod-item__preview[b-3h7hjlg194] {
    font-size: 0.8125rem;
    color: #374151;
    margin: 0;
    font-style: italic;
}

.hl-mod-item__reason[b-3h7hjlg194] { font-size: 0.75rem; color: #6b7280; margin: 0; }

.hl-mod-item__actions[b-3h7hjlg194] {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

/* ═══ SPINNER ═════════════════════════════════════════════════════════════════ */
.hl-spinner[b-3h7hjlg194] {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid #e5e7eb;
    border-top-color: var(--BEC-primary, #1d4ed8);
    border-radius: 50%;
    animation: hl-spin-b-3h7hjlg194 0.6s linear infinite;
}

@keyframes hl-spin-b-3h7hjlg194 {
    to { transform: rotate(360deg); }
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .hl-page__header[b-3h7hjlg194] { padding: 14px 16px 12px; }
    .hl-create-card[b-3h7hjlg194] { margin: 12px 16px 0; }
    .hl-feed[b-3h7hjlg194] { padding: 12px 16px 0; }
    .hl-dialog[b-3h7hjlg194] { padding: 1.25rem; }
}

/* ═══ STATUS BADGES ══════════════════════════════════════════════════════════ */
.hl-badge[b-3h7hjlg194] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.hl-badge--pending[b-3h7hjlg194] {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fde68a;
}

.hl-badge--deactivated[b-3h7hjlg194] {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

/* ═══ MODERATOR INLINE ACTIONS ════════════════════════════════════════════════ */
.hl-mod-actions[b-3h7hjlg194] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #e5e7eb;
}

.hl-mod-action-btn[b-3h7hjlg194] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.hl-mod-action-btn:disabled[b-3h7hjlg194] { opacity: 0.5; cursor: not-allowed; }

.hl-mod-action-btn--publish[b-3h7hjlg194] {
    background: #dcfce7;
    color: #16a34a;
}
.hl-mod-action-btn--publish:hover:not(:disabled)[b-3h7hjlg194] { background: #bbf7d0; }

.hl-mod-action-btn--deactivate[b-3h7hjlg194] {
    background: #fef3c7;
    color: #b45309;
}
.hl-mod-action-btn--deactivate:hover:not(:disabled)[b-3h7hjlg194] { background: #fde68a; }

.hl-mod-action-btn--delete[b-3h7hjlg194] {
    background: #fee2e2;
    color: #b91c1c;
}
.hl-mod-action-btn--delete:hover:not(:disabled)[b-3h7hjlg194] { background: #fecaca; }

/* ═══ POSTING GUIDELINES PANEL ═══════════════════════════════════════════════ */
.hl-posting-tips[b-3h7hjlg194] {
    display: block;
    visibility: visible;
    margin-bottom: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    font-size: 0.78rem;
    background: #fff;
}

.hl-posting-tips__header[b-3h7hjlg194] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.45rem 0.75rem;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    font-size: 0.775rem;
    color: #374151;
}

.hl-posting-tips__body[b-3h7hjlg194] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.hl-posting-tips__col[b-3h7hjlg194] {
    padding: 0.6rem 0.75rem;
}

.hl-posting-tips__col + .hl-posting-tips__col[b-3h7hjlg194] {
    border-left: 1px solid #e5e7eb;
}

.hl-posting-tips__col strong[b-3h7hjlg194] {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hl-posting-tips__col--ok strong[b-3h7hjlg194] { color: #059669; }
.hl-posting-tips__col--no strong[b-3h7hjlg194] { color: #dc2626; }

.hl-posting-tips__col ul[b-3h7hjlg194] {
    margin: 0;
    padding-left: 1.1rem;
    color: #6b7280;
    line-height: 1.65;
}

.hl-posting-tips__notice[b-3h7hjlg194] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.75rem;
    background: #fffbeb;
    border-top: 1px solid #fde68a;
    color: #92400e;
    font-size: 0.72rem;
    font-weight: 500;
}

/* ═══ MEDIA ATTACHMENT IN CREATE FORM ════════════════════════════════════════ */
.hl-attach-btn[b-3h7hjlg194] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.hl-attach-btn:hover[b-3h7hjlg194] { background: #e5e7eb; color: #374151; }

.hl-media-preview-list[b-3h7hjlg194] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.375rem;
    margin-bottom: 0.25rem;
}

.hl-media-preview-item[b-3h7hjlg194] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.375rem;
    padding: 0.1875rem 0.375rem 0.1875rem 0.5rem;
    font-size: 0.6875rem;
    color: #1d4ed8;
    max-width: 180px;
}

.hl-media-preview-item__name[b-3h7hjlg194] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.hl-media-preview-item__remove[b-3h7hjlg194] {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0 0.125rem;
    flex-shrink: 0;
    transition: color 0.15s;
}
.hl-media-preview-item__remove:hover[b-3h7hjlg194] { color: #b91c1c; }

/* ═══ INLINE MEDIA GRID ═══════════════════════════════════════════════════════ */
/* Capped so attachments render as a compact preview instead of scaling up to
   the full width of .hl-card, which has no max-width of its own — without this,
   a single image's height (driven by aspect-ratio below) blows up to whatever
   the card happens to be wide, easily 1000px+ tall on a wide desktop screen. */
.hl-media-grid[b-3h7hjlg194] {
    display: grid;
    gap: 4px;
    margin: 0.5rem 0 0.625rem;
    border-radius: 0.5rem;
    overflow: hidden;
    max-width: 420px;
}

.hl-media-grid--1[b-3h7hjlg194] { grid-template-columns: 1fr; }
.hl-media-grid--2[b-3h7hjlg194] { grid-template-columns: 1fr 1fr; }
.hl-media-grid--3[b-3h7hjlg194] { grid-template-columns: 1fr 1fr; }
.hl-media-grid--4[b-3h7hjlg194] { grid-template-columns: 1fr 1fr; }

.hl-media-grid--3 .hl-media-grid__item:first-child[b-3h7hjlg194] {
    grid-row: 1 / 3;
    aspect-ratio: unset;
}

.hl-media-grid__item[b-3h7hjlg194] {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: #111;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hl-media-grid__item:hover[b-3h7hjlg194]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.12);
    transition: background 0.15s ease;
}

.hl-media-grid__img[b-3h7hjlg194],
.hl-media-grid__video[b-3h7hjlg194] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.hl-media-grid__download[b-3h7hjlg194] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #e5e7eb;
    text-decoration: none;
    padding: 1rem;
    width: 100%;
    height: 100%;
    font-size: 0.8rem;
    text-align: center;
    word-break: break-all;
}
.hl-media-grid__download:hover[b-3h7hjlg194] { background: rgba(255,255,255,0.08); }

.hl-media-grid__play-icon[b-3h7hjlg194] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    pointer-events: none;
}

/* ═══ LIGHTBOX ═══════════════════════════════════════════════════════════════ */
.hl-lightbox[b-3h7hjlg194] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.hl-lightbox__inner[b-3h7hjlg194] {
    position: relative;
    max-width: min(90vw, 1100px);
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hl-lightbox__img[b-3h7hjlg194] {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 0.5rem;
    display: block;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
    object-fit: contain;
}

.hl-lightbox__video[b-3h7hjlg194] {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 0.5rem;
    display: block;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
}

.hl-lightbox__close[b-3h7hjlg194] {
    position: absolute;
    top: -2.5rem;
    right: -0.5rem;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.hl-lightbox__close:hover[b-3h7hjlg194] { background: rgba(255,255,255,0.3); }
/* /Components/Pages/MainLayout/Intranet/Intranet-MainPage/Intranet-MainPage.razor.rz.scp.css */
/* ========================================
   Intranet Main Page Scoped Styles (Cleaned)
   ======================================== */

/* Lato, not Inter — the Rev-4 design is a single-family Lato layout, and
   --font-family-display (tokens.css) already resolves to Lato, so the stat
   numerals were rendering in a different family from every label beside them.
   Lato is loaded once, globally, in App.razor; the two extra families this
   page used to request in its own <HeadContent> (Inter, Plus Jakarta Sans)
   are gone with it — three families were being downloaded for a one-family
   design. Segoe UI stays as the fallback stack, matching --font-family-base. */
[b-9qrq7oltca] body { font-family: 'Lato', 'Segoe UI', -apple-system, Helvetica, Arial, sans-serif; background-color: var(--bec-canvas, #DFE5E4); }
[b-9qrq7oltca] html { scroll-behavior: smooth; }

.intranet-page-root[b-9qrq7oltca] {
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* The mirror's --canvas. This root — not <body> — is what the reader
       actually sees: MainLayoutMS paints .main-content white for every page in
       the app, so the body colour never shows through. min-height:100% keeps
       the canvas under the whole scroll box on short pages, where the content
       alone would leave the shell's white below the footer. */
    background-color: var(--bec-canvas, #DFE5E4);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    color: #4b5563;
    /* The real scroll container is MainLayoutMS's .erp-page-container
       (overflow-y:auto), an ancestor of this root — it has no padding of
       its own, so this root's last child (the footer, including its
       .ftr-bottom-bar copyright/links row) sits flush against its
       scrollable edge with nothing reserved past it. Small/universal here
       — the larger value that actually fixes the narrow-screen clipping
       lives in the max-width:768px block below, scoped to only the
       screens where it's needed. A flat large padding here showed up as
       dead white space on wide screens that never needed to scroll. */
    padding-bottom: 16px;

    /* ── One brand color for this page ──
       The app's shared --BEC-colorBrandBackground/--BEC-Brand-Primary tokens
       resolve to Fluent's default blue (#0078d4 — see wwwroot/css/tokens/
       _primitives.css), while this homepage's own hardcoded buttons (New Hire
       Orientation, View All/Go-to pills, RSVP) were built against the navy
       #2B3484 used across Quick Access/branding. Every var(--BEC-colorBrand...)
       consumer on this page — this file and every Bec* child component under
       it (BecResourceList, BecMediaGrid, BecAnnouncementList, etc.) — reads
       through these same token names, so redeclaring them once here recolors
       every one of those buttons/icon badges to match in a single place
       instead of hunting down each hardcoded fallback individually. Genuinely
       semantic colors (green Join/Register, red errors) are hardcoded
       separately and are intentionally NOT touched by this override. */
    --BEC-colorBrandBackground: #2B3484;
    --BEC-colorBrandBackgroundHover: #1e2460;
    --BEC-colorBrandForeground1: #2B3484;
    --BEC-Brand-Primary: #2B3484;
    --BEC-colorBrandBackground1: rgba(43, 52, 132, 0.08);
}

/* Scrollbar */
[b-9qrq7oltca] ::-webkit-scrollbar { width: 6px; height: 6px; }
[b-9qrq7oltca] ::-webkit-scrollbar-track { background: transparent; }
[b-9qrq7oltca] ::-webkit-scrollbar-thumb { background: var(--BEC-colorNeutralStroke1, #E5E7EB); border-radius: 3px; }
[b-9qrq7oltca] ::-webkit-scrollbar-thumb:hover { background: var(--BEC-colorNeutralStroke2, #D1D5DB); }

/* Cursor safety net — Chrome (unlike anchors) doesn't give native <button>
   elements a pointer cursor by default. Several homepage controls used to be
   <a> tags and got the pointer cursor "for free"; converting them to
   <button> (Share, etc.) silently lost it since nothing here ever set it
   explicitly. ::deep so it also reaches buttons rendered by child components
   (BecAnnouncementList, BecMediaGrid, BecQuickAccessRow, etc.), not just
   this page's own markup. A more specific rule elsewhere (e.g. a disabled
   state's own cursor) still wins normally — this only fills in the gaps. */
[b-9qrq7oltca] button:not(:disabled) { cursor: pointer; }
[b-9qrq7oltca] button:disabled { cursor: not-allowed; }

/* Page Loader */
.page-loader[b-9qrq7oltca] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    z-index: 9999;
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--BEC-durationNormal, 0.2s) ease;
}
.page-loader-hidden[b-9qrq7oltca] { opacity: 0; pointer-events: none; }


.shadow-banner[b-9qrq7oltca] { box-shadow: 0 0 0 1px rgba(0,0,0,0.05); }

.wizard-panel[b-9qrq7oltca] { box-shadow: 0 10px 40px -5px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.05); }
@keyframes fadeScale-b-9qrq7oltca { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:scale(1); } }
@keyframes slide-in-b-9qrq7oltca { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.animate-slide-in[b-9qrq7oltca] { animation: slide-in-b-9qrq7oltca 0.3s ease-out; }
@keyframes gallery-scroll-b-9qrq7oltca {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- SIDEBAR WIZARD OVERLAY PATCH — FULL VIEWPORT COVERAGE --- */
.sidebar-overlay[b-9qrq7oltca],
.yt-viewer-backdrop[b-9qrq7oltca] {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

.sidebar-overlay > div[b-9qrq7oltca] {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.sidebar-overlay > .wizard-panel[b-9qrq7oltca],
.sidebar-overlay > .sidebar-panel[b-9qrq7oltca] {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.wizard-panel[b-9qrq7oltca],
.yt-viewer-container[b-9qrq7oltca] {
    max-height: 100vh;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.sidebar-backdrop[b-9qrq7oltca] {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* NEWS & EVENT DETAILS COVER IMAGE */
.sidebar-overlay--z85 .wizard-cover-media[b-9qrq7oltca] {
    aspect-ratio: 16 / 9;
    max-height: 340px;
    cursor: zoom-in;
}

.sidebar-overlay--z85 .wizard-cover-media + *[b-9qrq7oltca] {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.sidebar-overlay--z85 .wizard-cover-media img[b-9qrq7oltca] {
    object-fit: contain !important;
    background: #111827;
}

/* Dynamic Styles (Acceptable Exceptions) */
/* These use C# calculations and must remain inline */
/* - width: @(progressScore)% */
/* - transform: translateX(calc(-@(currentNewsSlide) * 296px)) */
/* - transform: translateX(-@(currentNewsletterSlide * 25)%) */
/* - width: @(registrationPercentage)% with dynamic background color */

/* ========================================
   TAILWIND → SCOPED CSS MIGRATION
   ======================================== */

/* --- Spin Keyframe --- */
@keyframes spin-b-9qrq7oltca {
    to { transform: rotate(360deg); }
}

/* --- Loader Spinner --- */
.loader-spinner[b-9qrq7oltca] {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    border: 4px solid #e5e7eb;
    border-top-color: #2563eb;
    animation: spin-b-9qrq7oltca 1s linear infinite;
}

/* --- Error State --- */
.error-container[b-9qrq7oltca] {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.error-alert[b-9qrq7oltca] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 0.75rem;
    padding: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.error-retry-btn[b-9qrq7oltca] {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    text-decoration: underline;
}

/* --- Main Content --- */
.intranet-main-page[b-9qrq7oltca] {
    width: 100%;
    flex-grow: 1;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    max-width: 100%;
    min-width: 0;
}
@media (min-width: 640px) {
    .intranet-main-page[b-9qrq7oltca] { padding-left: 1rem; padding-right: 1rem; }}
@media (min-width: 1024px) {
    .intranet-main-page[b-9qrq7oltca] { padding-left: 1.5rem; padding-right: 1.5rem; }}

/* Full-bleed breakout for the Quick Access strip (mockup's ".strip") — negative
   margins exactly matching .intranet-main-page's own responsive padding above,
   at the same breakpoints, so the strip spans edge-to-edge regardless of
   viewport width instead of sitting inset like every other section on this
   page. Kept as a wrapper around BecQuickAccessRow rather than inside the
   component itself since the breakout amount is specific to THIS page's own
   padding, not something the component can know on its own. */
/* The breakout amount is shared by the Quick Access strip and the priority banner
   directly above it, in ONE rule, so the two can never drift out of alignment —
   they are stacked and share an edge, and a mismatch would be immediately visible.

   NEGATIVE MARGINS, deliberately, not width:100vw. These cancel
   .intranet-main-page's own padding, so the element spans the SCROLL CONTAINER's
   content box. .intranet-page-root is the scroller (overflow-y:auto) and its
   vertical scrollbar takes a gutter out of that box, so a negative-margin
   breakout stops cleanly at the scrollbar. 100vw is measured against the
   viewport instead, which INCLUDES the gutter — that would slide both bands
   under the scrollbar and force a horizontal one.

   --bec-priority-inline hands the page's own side padding down to
   BecPriorityBanner, which is full-bleed but insets its text to match the
   content below. Custom properties cross the CSS-isolation boundary, so the
   component needs no ::deep and no knowledge of this page. */
.home-priority-breakout[b-9qrq7oltca],
.home-qa-strip-breakout[b-9qrq7oltca] {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}
.home-priority-breakout[b-9qrq7oltca] { --bec-priority-inline: 0.75rem; }

@media (min-width: 640px) {
    .home-priority-breakout[b-9qrq7oltca],
    .home-qa-strip-breakout[b-9qrq7oltca] { margin-left: -1rem; margin-right: -1rem; }
    .home-priority-breakout[b-9qrq7oltca] { --bec-priority-inline: 1rem; }}

@media (min-width: 1024px) {
    .home-priority-breakout[b-9qrq7oltca],
    .home-qa-strip-breakout[b-9qrq7oltca] { margin-left: -1.5rem; margin-right: -1.5rem; }
    .home-priority-breakout[b-9qrq7oltca] { --bec-priority-inline: 1.5rem; }}

/* Only the strip carries a bottom margin. The banner deliberately has none — it
   shares an edge with the strip below it, which is the whole point of Option A. */
.home-qa-strip-breakout[b-9qrq7oltca] { margin-bottom: 0.75rem; }
.avatar-circle[b-9qrq7oltca] {
    height: 2rem;
    width: 2rem;
    border-radius: 9999px;
    background: linear-gradient(to bottom right, #3b82f6, #9333ea);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.avatar-initials[b-9qrq7oltca] { color: white; font-weight: 700; font-size: 0.6875rem; line-height: 1; }
.user-info[b-9qrq7oltca] { min-width: 0; }
.user-name[b-9qrq7oltca] {
    font-size: 0.6875rem;
    line-height: 1;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.025em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stat-box[b-9qrq7oltca] {
    background: #f9fafb;
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.stat-box:hover[b-9qrq7oltca] { background: #f3f4f6; }
.content-section-header__icon[b-9qrq7oltca] {
    height: 2rem;
    width: 2rem;
    border-radius: 0.5rem;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* --- Unified Divider --- */
.content-section-divider[b-9qrq7oltca] {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 0 0 0.2rem 0;
}


/* --- Empty State --- */
.empty-state[b-9qrq7oltca] { background: white; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1rem; font-size: 0.75rem; line-height: 1rem; color: #6b7280; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.birthday-item[b-9qrq7oltca] {
    position: relative; display: flex; align-items: center; gap: 0.625rem;
    background-color: #f9fafb; border-radius: 0.5rem;
    padding: 0.5rem 0.75rem; border: 1px solid #e5e7eb;
    transition: all 0.2s ease; cursor: pointer;
}
.birthday-item:hover[b-9qrq7oltca] { background-color: #f3f4f6; border-color: #f9a8d4; }
.birthday-item:hover .birthday-item__avatar[b-9qrq7oltca] { box-shadow: 0 0 0 2px #f9a8d4; }


/* --- Footer (compact) --- */
/* footer is a sibling of .intranet-main-page (not nested inside it), so it
   doesn't inherit that element's responsive left/right padding — without
   its own copy here it renders edge-to-edge while the card grid above it
   stays inset, visibly misaligned. Values/breakpoints mirrored 1:1 from
   .intranet-main-page above so the two always line up. */
footer[b-9qrq7oltca] {
    margin-top: 8px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
@media (min-width: 640px) {
    footer[b-9qrq7oltca] { padding-left: 1rem; padding-right: 1rem; }}
@media (min-width: 1024px) {
    footer[b-9qrq7oltca] { padding-left: 1.5rem; padding-right: 1.5rem; }}

/* Matches the Rev-4 mockup's ".foot" exactly: a single bordered/shadowed row
   (logo, name+tagline, social icons, contact) with a separate plain
   ".foot-bar" copyright row underneath — the real app's existing two-tier
   structure already matched the mockup's own two-tier layout, this just
   replaces the previous unrelated indigo/slate palette (#4f46e5 etc., no
   --bec-* tokens at all) with the real accent tokens (DESIGN_SYSTEM.md §11). */
.ftr-compact[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5, 20px);
    padding: var(--space-5, 20px) var(--space-4, 16px);
    background: var(--bec-surface, #fff);
    border: 1px solid var(--bec-border, #E4E8EF);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-resting, 0 1px 2px rgba(16,24,40,.05));
}
.ftr-compact__left[b-9qrq7oltca]  { display: flex; align-items: center; gap: var(--space-3, 12px); flex-wrap: wrap; min-width: 0; }
.ftr-compact__right[b-9qrq7oltca] { display: flex; align-items: center; gap: var(--space-3, 12px); flex-wrap: wrap; flex-shrink: 0; min-width: 0; }
/* BEC Connect wordmark (assets/logo-bec-connect-blue.png, ~6:1 → ~122px wide at 20px). */
.ftr-compact__logo[b-9qrq7oltca]  { height: 20px; width: auto; flex-shrink: 0; }
.ftr-compact__title-wrap[b-9qrq7oltca] { display: flex; flex-direction: column; gap: 4px; line-height: 1.3; max-width: 420px; min-width: 0; }
.ftr-compact__name[b-9qrq7oltca]  { font-size: 13px; font-weight: 700; color: var(--bec-ink, #24272A); white-space: nowrap; }
.ftr-compact__tagline[b-9qrq7oltca] { font-size: 11.5px; font-weight: 400; line-height: 1.55; color: var(--bec-slate, #5A6168); white-space: normal; }
.ftr-compact__sep[b-9qrq7oltca]   { color: var(--bec-border, #E4E8EF); font-size: 11px; }
.ftr-compact__social[b-9qrq7oltca] { display: flex; gap: 7px; }

.ftr-social__link[b-9qrq7oltca] {
    width: 31px; height: 31px;
    border-radius: var(--radius-sm, 6px);
    background: var(--bec-accent-blue-tint, #EAEBF3);
    border: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--bec-accent-blue, var(--bec-navy-700));
    font-size: 12px;
    transition: background var(--duration-hover, 150ms) var(--ease-standard, ease-out), color var(--duration-hover, 150ms) var(--ease-standard, ease-out);
    text-decoration: none;
}
.ftr-social__link:hover[b-9qrq7oltca] { background: var(--bec-accent-blue, var(--bec-navy-700)); color: #fff; }

.ftr-compact__contact[b-9qrq7oltca],
.ftr-compact__addr[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--bec-slate, #5A6168);
    white-space: nowrap;
}
.ftr-compact__contact a[b-9qrq7oltca]   { color: var(--bec-ink, #24272A); text-decoration: none; }
.ftr-compact__contact a:hover[b-9qrq7oltca] { text-decoration: underline; }
.ftr-compact__contact i[b-9qrq7oltca],
.ftr-compact__addr i[b-9qrq7oltca]      { flex-shrink: 0; color: var(--bec-accent-blue, var(--bec-navy-700)); font-size: 12px; }

.ftr-bottom-bar[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    padding: var(--space-1, 4px) 0 6px;
    font-size: 11px;
    color: var(--bec-gray, #7A828C);
}
.ftr-bottom-bar a[b-9qrq7oltca]         { color: var(--bec-gray, #7A828C); text-decoration: none; transition: color var(--duration-hover, 150ms) var(--ease-standard, ease-out); }
.ftr-bottom-bar a:hover[b-9qrq7oltca]   { color: var(--bec-accent-blue, var(--bec-navy-700)); }
.ftr-bottom-bar__dot[b-9qrq7oltca]      { color: var(--bec-border, #E4E8EF); -webkit-user-select: none; user-select: none; }
.ftr-bottom-bar__ver[b-9qrq7oltca]      { color: var(--bec-border, #E4E8EF); font-weight: 500; letter-spacing: 0.03em; }

/* Narrow widths: stack the two halves, let every nowrap piece wrap, and never let
   the right-hand contact block push the row wider than the card (was flex-shrink: 0
   + nowrap, which clipped the address on phones). */
@media (max-width: 768px) {
    .ftr-compact[b-9qrq7oltca]       { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ftr-compact__sep[b-9qrq7oltca]  { display: none; }
    .ftr-compact__left[b-9qrq7oltca],
    .ftr-compact__right[b-9qrq7oltca] { width: 100%; flex-shrink: 1; }
    .ftr-compact__title-wrap[b-9qrq7oltca] { max-width: 100%; }
    .ftr-compact__name[b-9qrq7oltca],
    .ftr-compact__contact[b-9qrq7oltca],
    .ftr-compact__addr[b-9qrq7oltca]  { white-space: normal; overflow-wrap: anywhere; }
    .ftr-bottom-bar[b-9qrq7oltca]     { padding-left: 8px; padding-right: 8px; text-align: center; }}

.home-orient-skeleton[b-9qrq7oltca] {
    height: 62px;
    border-radius: 8px;
    background: #f3f4f6;
    animation: shimmer 1.4s ease infinite;
    position: relative;
    overflow: hidden;
}
.home-orient-skeleton[b-9qrq7oltca]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
    animation: puv-shimmer 1.4s ease infinite;
}

/* min-height was 96px + flex:1; inside the now-fixed 224px upper row that
   floor is what would push the card (and therefore nothing else, since the
   row no longer flexes) into overflow, so it shrinks with the card instead. */
/* Compacted for the 160px row: the card body is 102px and the button takes 34
   of it, so this had ~68px to live in and needed exactly 68 — no slack at all,
   which is why it ended up painting over the button. A 44px icon disc was a
   lot of ceremony for "nothing scheduled" in a 280px card anyway. */
.home-orient-empty[b-9qrq7oltca] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #9ca3af;
    font-size: 11.5px;
    line-height: 1.35;
    text-align: center;
    overflow: hidden;
}
.home-orient-empty i[b-9qrq7oltca] {
    width: 26px;
    height: 26px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f3f4f6;
    font-size: 12px;
    color: #9ca3af;
}

/* justify-content:flex-start (was center) — centering made a single session
   float mid-card instead of reading as a list; a real list stacks from the
   top regardless of how much space is left below it. Any leftover space
   before the program button is now a plain gap, not a layout trick. */
.home-orient-list[b-9qrq7oltca] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding-bottom: var(--space-2, 10px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--bec-border, #D5D6E6) transparent;
    min-height: 0;
}

/* .home-orient-item* removed — orientation sessions now render through
   BecEventListItem (Compact variant, same component the Events card's
   Upcoming panel uses), so the two lists are visually identical by
   construction rather than hand-matched CSS. See Intranet-MainPage.razor. */

/* Sessions stack flush edge-to-edge (no per-row inset chip/background),
   separated by hairline dividers, instead of floating rounded rows with
   their own horizontal padding on top of the card's — the card's own
   padding is the only inset, matching the title/divider width exactly.
   Scoped to this card only (::deep pierces BecEventListItem's own CSS
   isolation) so the shared component's look elsewhere (mini-calendar
   Events panel) is untouched. */
/* padding-block 10px -> 6px and a 32px date badge (was 40px): a row was 60px
   tall inside a 68px list box, so the second session was a 8px sliver with no
   scrollbar wide enough to notice. At 44px a full row clears the box with the
   next one visibly cut, which is what tells the reader to scroll. */
.home-orient-list[b-9qrq7oltca]  .bec-event-item--compact {
    padding-inline: 0;
    padding-block: 6px;
    border-radius: 0;
    border-bottom: 1px solid var(--bec-border, #E4E8EF);
}

.home-orient-list[b-9qrq7oltca]  .bec-event-item--compact .bec-event-item__date {
    width: 32px;
    height: 32px;
    font-size: 9.5px;
}

.home-orient-list[b-9qrq7oltca]  .bec-event-item--compact .bec-event-item__title {
    font-size: 12px;
}

.home-orient-list[b-9qrq7oltca]  .bec-event-item--compact .bec-event-item__time {
    font-size: 11px;
}
.home-orient-list[b-9qrq7oltca]  .bec-event-item--compact:last-of-type {
    border-bottom: none;
}

/* flex:none — the CTA is pinned; the sessions list above it (or the empty
   state) is the part that scrolls inside the fixed-height card, so the button
   must never be the element that shrinks. */
.home-orient-program-btn[b-9qrq7oltca] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
    margin-top: auto;
    letter-spacing: 0.01em;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.home-orient-program-btn i[b-9qrq7oltca] { font-size: 13px; }

/* Default / all other users — greyed out, non-interactive look */
.home-orient-program-btn:disabled[b-9qrq7oltca] {
    border: 1px dashed #d1d5db;
    background: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Allowlisted preview users only — active, clickable look */
.home-orient-program-btn:not(:disabled)[b-9qrq7oltca] {
    border: 1px solid var(--bec-navy-700, #2B3484);
    background: var(--bec-navy-700, #2B3484);
    color: #fff;
    cursor: pointer;
}
.home-orient-program-btn:not(:disabled):hover[b-9qrq7oltca] {
    background: var(--bec-navy-900, #1e2460);
    transform: translateY(-1px);
}

/* --- YouTube-Style Fullscreen Viewers --- */
.yt-viewer-backdrop[b-9qrq7oltca] { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.yt-viewer-container[b-9qrq7oltca] { max-width: 64rem; width: 100%; padding: 1rem; border-radius: 0.75rem; overflow: hidden; animation: fadeScale-b-9qrq7oltca .25s ease; }
.yt-viewer-player[b-9qrq7oltca] { position: relative; background: #000; border-radius: 0.75rem 0.75rem 0 0; overflow: hidden; }
.yt-viewer-top-gradient[b-9qrq7oltca] { position: absolute; top: 0; left: 0; right: 0; height: 80px; background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent); display: flex; align-items: flex-start; justify-content: flex-end; padding: 12px 16px; z-index: 10; }
.yt-viewer-close-btn[b-9qrq7oltca] { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.5); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; transition: background 0.15s ease; }
.yt-viewer-close-btn:hover[b-9qrq7oltca] { background: rgba(255,255,255,0.2); }
.yt-viewer-esc-hint[b-9qrq7oltca] { position: absolute; top: 14px; left: 16px; display: flex; align-items: center; gap: 6px; z-index: 10; opacity: 0.5; transition: opacity 0.3s ease; }
.yt-viewer-esc-hint:hover[b-9qrq7oltca] { opacity: 0.9; }
.yt-viewer-esc-key[b-9qrq7oltca] { padding: 2px 8px; border-radius: 4px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); font-size: 0.625rem; font-weight: 500; color: rgba(255,255,255,0.7); font-family: 'Roboto', sans-serif; }
.yt-viewer-esc-label[b-9qrq7oltca] { font-size: 0.625rem; color: rgba(255,255,255,0.5); font-family: 'Roboto', sans-serif; }
.yt-viewer-image[b-9qrq7oltca] { width: 100%; height: auto; object-fit: contain; max-height: 80vh; display: block; }
.yt-viewer-image-caption[b-9qrq7oltca] { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.3), transparent); padding: 3rem 16px 14px; z-index: 5; }
.yt-viewer-image-caption__text[b-9qrq7oltca] { font-size: 0.85rem; color: #fff; font-weight: 400; font-family: 'Roboto', sans-serif; }
.yt-viewer-info[b-9qrq7oltca] { padding: 12px 16px 14px; background: #0f0f0f; border-radius: 0 0 0.75rem 0.75rem; }
.yt-viewer-info__title[b-9qrq7oltca] { font-size: 1rem; font-weight: 500; color: #fff; margin: 0; line-height: 1.4; font-family: 'Roboto', sans-serif; }
.yt-viewer-info__meta[b-9qrq7oltca] { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.375rem; }
.yt-viewer-info__badge[b-9qrq7oltca] { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.625rem; font-weight: 500; }
.yt-viewer-info__badge--image[b-9qrq7oltca] { background: rgba(79,70,229,0.15); color: #818cf8; }
.yt-viewer-info__source[b-9qrq7oltca] { font-size: 0.75rem; color: #aaa; font-family: 'Roboto', sans-serif; }

/* --- Sidebar Panels --- */
.sidebar-overlay[b-9qrq7oltca] { position: fixed; inset: 0; display: flex; }
.sidebar-overlay--z85[b-9qrq7oltca] { z-index: 1085; }
.sidebar-backdrop[b-9qrq7oltca] { position: absolute; inset: 0; background: rgba(0,0,0,0.2); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sidebar-panel[b-9qrq7oltca] { margin-left: auto; height: 100%; width: 100%; background: white; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); display: flex; flex-direction: column; position: relative; z-index: 10; }
.sidebar-panel--md[b-9qrq7oltca] { max-width: 48rem; }
.sidebar-header[b-9qrq7oltca] { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid #f3f4f6; }
.sidebar-content[b-9qrq7oltca] { flex: 1; overflow-y: auto; padding: 1.5rem; background-color: #f9fafb; }
.wizard-cover-media[b-9qrq7oltca] { aspect-ratio: 16/9; width: 100%; }

/* --- Toast --- */
.toast-container[b-9qrq7oltca] { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100; }
.toast[b-9qrq7oltca] { border: 1px solid; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); padding: 1rem; max-width: 28rem; }
.toast--success[b-9qrq7oltca] { background-color: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.toast--error[b-9qrq7oltca] { background-color: #fef2f2; border-color: #fecaca; color: #991b1b; }
.toast__body[b-9qrq7oltca] { display: flex; align-items: flex-start; gap: 0.75rem; }
.toast__icon--success[b-9qrq7oltca] { flex-shrink: 0; color: #16a34a; }
.toast__icon--error[b-9qrq7oltca] { flex-shrink: 0; color: #dc2626; }
.toast__content[b-9qrq7oltca] { flex: 1; }
.toast__title[b-9qrq7oltca] { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.toast__message[b-9qrq7oltca] { font-size: 0.75rem; line-height: 1rem; margin-top: 0.25rem; }
.toast__close[b-9qrq7oltca] { flex-shrink: 0; color: #9ca3af; }
.toast__close:hover[b-9qrq7oltca] { color: #4b5563; }

/* --- Events List Wizard --- */
/* Back button shown when a BecListPanel swaps its own content from list to
   detail view (Events/News "view all" panels) — returns to the list without
   closing/reopening the panel. */
/* Floats at the same top offset and uses the same dark-translucent treatment
   as BecListPanel/BecDetailPanel's .sp-float-close (see those files), so the
   back control and the close control read as one aligned, standard pair
   instead of two different button styles. .sp-panel--headerless (the only
   context this renders in — see the two BecListPanel usages in
   Intranet-MainPage.razor) already establishes the positioning context. */
.bec-panel-back-btn[b-9qrq7oltca] {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 8px 14px;
    border: none; border-radius: 20px;
    background: rgba(0, 0, 0, 0.5); color: #fff;
    font-size: var(--BEC-fontSizeBase300, 0.8125rem); font-weight: var(--BEC-fontWeightMedium, 500);
    cursor: pointer; transition: background 0.15s ease;
}
.bec-panel-back-btn:hover[b-9qrq7oltca] {
    background: rgba(0, 0, 0, 0.7);
}

/* ═══ "View All" row — Announcements & Events share this exact structure
   (Option A from the design review): one visual anchor (the thumbnail, date
   folded into it as a corner badge) instead of a separate calendar tile
   competing with the photo. Same classes, same layout for both list types —
   only the category label and the two meta-row items differ per type. ═══ */
.va-list[b-9qrq7oltca] { display: flex; flex-direction: column; gap: 0.625rem; }

.va-row[b-9qrq7oltca] {
    background: white; border: 1px solid #e5e7eb; border-radius: 0.625rem;
    padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.875rem;
    text-align: left; width: 100%; transition: all 0.2s ease;
}
.va-row:hover[b-9qrq7oltca] { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); border-color: #93c5fd; }

.va-row__thumb[b-9qrq7oltca] {
    position: relative; width: 4.75rem; height: 4.75rem; border-radius: 0.5rem;
    overflow: hidden; background-color: #f3f4f6; flex-shrink: 0;
}
.va-row__thumb img[b-9qrq7oltca] { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.va-row:hover .va-row__thumb img[b-9qrq7oltca] { transform: scale(1.06); }
.va-row__datebadge[b-9qrq7oltca] {
    position: absolute; bottom: 5px; left: 5px;
    background: rgba(0,0,0,0.6); color: #fff;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 5px; line-height: 1.3;
}

.va-row__body[b-9qrq7oltca] { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.va-row__cat[b-9qrq7oltca] {
    display: inline-block; align-self: flex-start;
    font-size: 10px; font-weight: 600; color: #2B3484;
    background: rgba(43, 52, 132, 0.08); border-radius: 4px;
    padding: 1px 7px; margin-bottom: 4px;
}
.va-row__title[b-9qrq7oltca] {
    font-size: 0.875rem; line-height: 1.3rem; font-weight: 600; color: #111827;
    margin: 0 0 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.va-row:hover .va-row__title[b-9qrq7oltca] { color: #2563eb; }
.va-row__meta[b-9qrq7oltca] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.75rem; line-height: 1rem; color: #6b7280; }
.va-row__meta-item[b-9qrq7oltca] { display: flex; align-items: center; gap: 0.25rem; }

.va-row__arrow[b-9qrq7oltca] { display: flex; align-items: center; flex-shrink: 0; color: #9ca3af; transition: color 0.2s ease; }
.va-row:hover .va-row__arrow[b-9qrq7oltca] { color: #2563eb; }

/* === Additional panel variants === */

/* ============================================================
   Tailwind ➜ scoped utility replacements for wizard inner content
   These replicate common Tailwind utility classes used inside
   wizard/sidebar panels (News Detail, Event Detail, etc.).
   ============================================================ */

/* Layout */
[b-9qrq7oltca] .flex { display: flex; }
[b-9qrq7oltca] .flex-1 { flex: 1 1 0%; }
[b-9qrq7oltca] .flex-col { flex-direction: column; }
[b-9qrq7oltca] .flex-wrap { flex-wrap: wrap; }
[b-9qrq7oltca] .items-center { align-items: center; }
[b-9qrq7oltca] .items-start { align-items: flex-start; }
[b-9qrq7oltca] .justify-center { justify-content: center; }
[b-9qrq7oltca] .justify-between { justify-content: space-between; }
[b-9qrq7oltca] .gap-1 { gap: 0.25rem; }
[b-9qrq7oltca] .gap-1\.5 { gap: 0.375rem; }
[b-9qrq7oltca] .gap-2 { gap: 0.5rem; }
[b-9qrq7oltca] .gap-3 { gap: 0.75rem; }
[b-9qrq7oltca] .gap-4 { gap: 1rem; }
[b-9qrq7oltca] .gap-6 { gap: 1.5rem; }
[b-9qrq7oltca] .grid { display: grid; }
[b-9qrq7oltca] .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Spacing */
[b-9qrq7oltca] .space-y-2 > * + * { margin-top: 0.5rem; }
[b-9qrq7oltca] .space-y-3 > * + * { margin-top: 0.75rem; }
[b-9qrq7oltca] .space-y-6 > * + * { margin-top: 1.5rem; }
[b-9qrq7oltca] .p-3 { padding: 0.75rem; }
[b-9qrq7oltca] .p-4 { padding: 1rem; }
[b-9qrq7oltca] .p-6 { padding: 1.5rem; }
[b-9qrq7oltca] .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
[b-9qrq7oltca] .px-4 { padding-left: 1rem; padding-right: 1rem; }
[b-9qrq7oltca] .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
[b-9qrq7oltca] .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
[b-9qrq7oltca] .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
[b-9qrq7oltca] .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
[b-9qrq7oltca] .py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
[b-9qrq7oltca] .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
[b-9qrq7oltca] .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
[b-9qrq7oltca] .mb-1 { margin-bottom: 0.25rem; }
[b-9qrq7oltca] .mb-1\.5 { margin-bottom: 0.375rem; }
[b-9qrq7oltca] .mb-2 { margin-bottom: 0.5rem; }
[b-9qrq7oltca] .mb-3 { margin-bottom: 0.75rem; }
[b-9qrq7oltca] .mb-4 { margin-bottom: 1rem; }
[b-9qrq7oltca] .mt-0\.5 { margin-top: 0.125rem; }
[b-9qrq7oltca] .mt-1 { margin-top: 0.25rem; }
[b-9qrq7oltca] .mt-2 { margin-top: 0.5rem; }
[b-9qrq7oltca] .mt-4 { margin-top: 1rem; }
[b-9qrq7oltca] .pb-3 { padding-bottom: 0.75rem; }
[b-9qrq7oltca] .pt-1 { padding-top: 0.25rem; }

/* Sizing */
[b-9qrq7oltca] .w-full { width: 100%; }
[b-9qrq7oltca] .h-2\.5 { height: 0.625rem; }
[b-9qrq7oltca] .h-9 { height: 2.25rem; }
[b-9qrq7oltca] .h-10 { height: 2.5rem; }
[b-9qrq7oltca] .h-16 { height: 4rem; }
[b-9qrq7oltca] .w-3 { width: 0.75rem; }
[b-9qrq7oltca] .w-4 { width: 1rem; }
[b-9qrq7oltca] .w-10 { width: 2.5rem; }
[b-9qrq7oltca] .w-12 { width: 3rem; }
[b-9qrq7oltca] .w-16 { width: 4rem; }
[b-9qrq7oltca] .h-3 { height: 0.75rem; }
[b-9qrq7oltca] .h-4 { height: 1rem; }
[b-9qrq7oltca] .h-12 { height: 3rem; }
[b-9qrq7oltca] .max-w-none { max-width: none; }
[b-9qrq7oltca] .max-w-4xl { max-width: 56rem; }
[b-9qrq7oltca] .max-h-\[80vh\] { max-height: 80vh; }
[b-9qrq7oltca] .max-h-\[85vh\] { max-height: 85vh; }
[b-9qrq7oltca] .min-w-0 { min-width: 0; }
[b-9qrq7oltca] .shrink-0 { flex-shrink: 0; }

/* Typography */
[b-9qrq7oltca] .text-\[10px\] { font-size: 10px; }
[b-9qrq7oltca] .text-xs { font-size: 0.75rem; line-height: 1rem; }
[b-9qrq7oltca] .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
[b-9qrq7oltca] .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
[b-9qrq7oltca] .font-medium { font-weight: 500; }
[b-9qrq7oltca] .font-semibold { font-weight: 600; }
[b-9qrq7oltca] .font-bold { font-weight: 700; }
[b-9qrq7oltca] .text-center { text-align: center; }
[b-9qrq7oltca] .text-left { text-align: left; }
[b-9qrq7oltca] .leading-relaxed { line-height: 1.625; }
[b-9qrq7oltca] .tracking-tight { letter-spacing: -0.025em; }
[b-9qrq7oltca] .uppercase { text-transform: uppercase; }
[b-9qrq7oltca] .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[b-9qrq7oltca] .break-all { word-break: break-all; }

/* Colors */
[b-9qrq7oltca] .text-white { color: white; }
[b-9qrq7oltca] .text-gray-400 { color: #9ca3af; }
[b-9qrq7oltca] .text-gray-500 { color: #6b7280; }
[b-9qrq7oltca] .text-gray-900 { color: #111827; }
[b-9qrq7oltca] .bg-white { background-color: white; }
[b-9qrq7oltca] .bg-black { background-color: black; }
[b-9qrq7oltca] .bg-gray-50 { background-color: #f9fafb; }
[b-9qrq7oltca] .bg-gray-100 { background-color: #f3f4f6; }

/* Borders & Rounded */
[b-9qrq7oltca] .border { border-width: 1px; border-style: solid; }
[b-9qrq7oltca] .border-2 { border-width: 2px; border-style: solid; }
[b-9qrq7oltca] .border-b { border-bottom-width: 1px; border-bottom-style: solid; }
[b-9qrq7oltca] .border-gray-100 { border-color: #f3f4f6; }
[b-9qrq7oltca] .border-gray-200 { border-color: #e5e7eb; }
[b-9qrq7oltca] .border-current { border-color: currentColor; }
[b-9qrq7oltca] .border-t-transparent { border-top-color: transparent; }
[b-9qrq7oltca] .border-white { border-color: white; }
[b-9qrq7oltca] .rounded { border-radius: 0.25rem; }
[b-9qrq7oltca] .rounded-lg { border-radius: 0.5rem; }
[b-9qrq7oltca] .rounded-xl { border-radius: 0.75rem; }
[b-9qrq7oltca] .rounded-full { border-radius: 9999px; }

/* Shadows & Effects */
[b-9qrq7oltca] .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
[b-9qrq7oltca] .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }

/* Position & Overflow */
[b-9qrq7oltca] .relative { position: relative; }
[b-9qrq7oltca] .absolute { position: absolute; }
[b-9qrq7oltca] .inset-0 { inset: 0; }
[b-9qrq7oltca] .overflow-hidden { overflow: hidden; }
[b-9qrq7oltca] .overflow-y-auto { overflow-y: auto; }
[b-9qrq7oltca] .z-10 { z-index: 10; }
[b-9qrq7oltca] .object-cover { object-fit: cover; }
[b-9qrq7oltca] .object-contain { object-fit: contain; }

/* Transitions & Animations */
[b-9qrq7oltca] .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
[b-9qrq7oltca] .transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
[b-9qrq7oltca] .animate-spin { animation: spin-b-9qrq7oltca 1s linear infinite; }

/* Responsive */
@media (min-width: 640px) {
    [b-9qrq7oltca] .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }}

/* Prose (Markdown content) */
[b-9qrq7oltca] .prose { max-width: 65ch; }
[b-9qrq7oltca] .prose-sm { font-size: 0.875rem; line-height: 1.7; }
[b-9qrq7oltca] .prose.max-w-none { max-width: none; }

/* Cursor */
[b-9qrq7oltca] .cursor-not-allowed { cursor: not-allowed; }

/* Inline-flex */
[b-9qrq7oltca] .inline-flex { display: inline-flex; }
[b-9qrq7oltca] .inline-block { display: inline-block; }
[b-9qrq7oltca] .block { display: block; }
[b-9qrq7oltca] .hidden { display: none; }

/* Opacity */
[b-9qrq7oltca] .opacity-0 { opacity: 0; }

/* Hover states */
[b-9qrq7oltca] .hover\:text-gray-600:hover { color: #4b5563; }
[b-9qrq7oltca] .hover\:text-gray-800:hover { color: #1f2937; }
[b-9qrq7oltca] .hover\:bg-gray-100:hover { background-color: #f3f4f6; }

/* Auto margins */
[b-9qrq7oltca] .mx-auto { margin-left: auto; margin-right: auto; }

/* ═══════════════════════════════════════════════════════
   UNIFIED SIDEBAR HEADER
   ═══════════════════════════════════════════════════════ */
[b-9qrq7oltca] .uni-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    flex-shrink: 0;
}

[b-9qrq7oltca] .uni-header__group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

[b-9qrq7oltca] .uni-header__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-9qrq7oltca] .uni-header__icon--indigo {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #4f46e5;
}

[b-9qrq7oltca] .uni-header__title {
    /* Was 'Plus Jakarta Sans','Inter' — the only rule that referenced either,
       and neither is loaded any more (see ::deep body at the top of this
       file). Inherits the page family rather than silently falling back to
       the generic sans-serif. */
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.025em;
    margin: 0;
}

[b-9qrq7oltca] .uni-header__subtitle {
    font-size: 0.7rem;
    color: #6b7280;
    margin: 0.125rem 0 0 0;
}

[b-9qrq7oltca] .uni-header__close {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #6b7280;
    padding: 0;
}

[b-9qrq7oltca] .uni-header__close:hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: #dc2626;
}

/* ═══════════════════════════════════════════════════════
   UNIFIED LOADING STATE
   ═══════════════════════════════════════════════════════ */
[b-9qrq7oltca] .uni-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 1.5rem;
}

[b-9qrq7oltca] .uni-loading__spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: uni-spin-b-9qrq7oltca 0.8s linear infinite;
}

@keyframes uni-spin-b-9qrq7oltca {
    to { transform: rotate(360deg); }
}

[b-9qrq7oltca] .uni-loading__text {
    margin-top: 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
}

/* ═══════════════════════════════════════════════════════
   UNIFIED EMPTY / ERROR STATE
   ═══════════════════════════════════════════════════════ */
[b-9qrq7oltca] .uni-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 1.5rem;
    text-align: center;
}

[b-9qrq7oltca] .uni-empty__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    margin-bottom: 1rem;
}

[b-9qrq7oltca] .uni-empty__icon--error {
    background: #fef2f2;
    color: #dc2626;
}

[b-9qrq7oltca] .uni-empty__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.375rem 0;
}

[b-9qrq7oltca] .uni-empty__text {
    font-size: 0.8rem;
    color: #9ca3af;
    font-weight: 500;
    margin: 0;
    max-width: 280px;
    line-height: 1.5;
}

[b-9qrq7oltca] .uni-empty__button {
    margin-top: 1rem;
    padding: 0.5rem 1.25rem;
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
}

[b-9qrq7oltca] .uni-empty__button:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

@keyframes popup-fade-in-b-9qrq7oltca {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes popup-slide-up-b-9qrq7oltca {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.popup-tab.active[b-9qrq7oltca] {
    color: #2563eb;
    border-bottom-color: #2563eb;
    font-weight: 600;
}

.popup-tab .tab-icon[b-9qrq7oltca] {
    font-size: 15px;
}

.popup-tab .tab-badge[b-9qrq7oltca] {
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 18px;
    letter-spacing: 0.02em;
}

@keyframes panel-fade-b-9qrq7oltca {
    from { opacity: 0; }
    to { opacity: 1; }
}

.popup-panel.active[b-9qrq7oltca] {
    display: flex;
}

/* ═══════════════════════════════════════════
   BIRTHDAY PANEL
   ═══════════════════════════════════════════ */

/* Applied to .intranet-page-root while the birthday overlay (below) is up —
   inert (set alongside this class, see the .razor) blocks all interaction
   with the real page; the blur is purely visual, same "still visible but
   clearly not the active layer" treatment NewHireOrientationWizard uses via
   its own overlay's backdrop-filter. */
.intranet-page-root--dimmed[b-9qrq7oltca] {
    filter: blur(2px);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.bday-overlay[b-9qrq7oltca] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 20, 30, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: bday-overlay-fade-in-b-9qrq7oltca 0.2s ease;
}

@keyframes bday-overlay-fade-in-b-9qrq7oltca {
    from { opacity: 0; }
    to { opacity: 1; }
}

.bday-modal[b-9qrq7oltca] {
    /* Warm celebratory gold, used sparingly (icon, wish-button outline,
       the soft header band) — the previous coral/pink pass, then a brand
       blue pass, both replaced per the reference design. */
    --bday-accent: #d97706;
    --bday-accent-dark: #b45309;
    --bday-accent-soft: linear-gradient(180deg, #fff8ec 0%, #fef3e0 100%);
    position: relative;
    width: 100%;
    max-width: 460px;
    /* Taller than the original min(52vh, 460px) cap so more of the
       birthday list is visible before scrolling. */
    max-height: min(75vh, 640px);
    background: var(--BEC-Surface-Base, #fff);
    border: 0.5px solid var(--BEC-Border-Subtle, #e2e4e8);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(15, 20, 30, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bday-modal-rise-in-b-9qrq7oltca 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bday-modal-rise-in-b-9qrq7oltca {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bday-icon-pop-b-9qrq7oltca {
    0% { opacity: 0; transform: scale(0.4) rotate(-20deg); }
    60% { opacity: 1; transform: scale(1.12) rotate(6deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes bday-row-in-b-9qrq7oltca {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes bday-result-pop-b-9qrq7oltca {
    from { opacity: 0; transform: scale(0.7); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .bday-overlay[b-9qrq7oltca], .bday-modal[b-9qrq7oltca], .bday-icon-badge[b-9qrq7oltca], .bday-row[b-9qrq7oltca], .bday-wish-result[b-9qrq7oltca] {
        animation: none !important;
    }}

.bday-modal__close[b-9qrq7oltca] {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--BEC-Text-Secondary, #605e5c);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
    z-index: 1;
}
.bday-modal__close:hover[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground4, #f0f0f0);
}

.bday-modal__title[b-9qrq7oltca] {
    font-size: 19px;
    font-weight: 700;
    color: var(--BEC-Text-Primary, #1a1a2e);
    text-align: center;
    margin: 0;
    padding: 22px 38px 2px;
    background: var(--bday-accent-soft);
}

.bday-header[b-9qrq7oltca] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.2rem 1rem 1.1rem;
    flex-shrink: 0;
    text-align: center;
    background: var(--bday-accent-soft);
}

.bday-icon-badge[b-9qrq7oltca] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: transparent;
    color: var(--bday-accent, #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: bday-icon-pop-b-9qrq7oltca 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

.bday-icon-badge svg[b-9qrq7oltca] {
    width: 26px;
    height: 26px;
}

.bday-header-sub[b-9qrq7oltca] {
    font-size: 12.5px;
    color: var(--BEC-Text-Secondary, #6b7280);
    margin: 0;
    font-weight: 500;
}

.bday-list[b-9qrq7oltca] {
    padding: 2px 1rem 8px;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--BEC-colorNeutralStroke1, #e5e7eb) transparent;
}

.bday-list[b-9qrq7oltca]::-webkit-scrollbar {
    width: 3px;
}

.bday-list[b-9qrq7oltca]::-webkit-scrollbar-track {
    background: transparent;
}

.bday-list[b-9qrq7oltca]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke1, #e5e7eb);
    border-radius: 4px;
}

.bday-list[b-9qrq7oltca]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralForeground4, #a19f9d);
}

.bday-row[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    border-radius: 0;
    transition: background 0.15s ease;
    cursor: default;
    animation: bday-row-in-b-9qrq7oltca 0.3s ease both;
}

/* Stagger the first several rows in on mount; beyond that it's not worth
   the accumulating delay, so later rows just appear with the rest. */
.bday-row:nth-child(1)[b-9qrq7oltca] { animation-delay: 0.08s; }
.bday-row:nth-child(2)[b-9qrq7oltca] { animation-delay: 0.13s; }
.bday-row:nth-child(3)[b-9qrq7oltca] { animation-delay: 0.18s; }
.bday-row:nth-child(4)[b-9qrq7oltca] { animation-delay: 0.23s; }
.bday-row:nth-child(5)[b-9qrq7oltca] { animation-delay: 0.28s; }
.bday-row:nth-child(n+6)[b-9qrq7oltca] { animation-delay: 0.32s; }

.bday-row:hover[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground4, #fafafa);
}

.bday-row + .bday-row[b-9qrq7oltca] {
    border-top: 1px solid var(--BEC-Border-Subtle, #f0f0f0);
}

/* Reference design has no avatar circle — kept in the markup (initial-letter
   fallback), just not shown, so the DOM/logic here stays untouched. */
.bday-avatar[b-9qrq7oltca] {
    display: none;
}

/* ——— Info block ——— */
.bday-info[b-9qrq7oltca] {
    flex: 1;
    min-width: 0;
}

.bday-name[b-9qrq7oltca] {
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #1a1a2e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.bday-detail[b-9qrq7oltca] {
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #888);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    line-height: 1.3;
}

/* ——— Wish button — outlined pill in the warm accent, echoing the
   reference design rather than a solid-filled chip. ——— */
.bday-wish-btn[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding-inline: 14px;
    border-radius: 999px;
    border: 1px solid var(--bday-accent, #d97706);
    background: var(--BEC-Surface-Base, #fff);
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #1a1a2e);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.bday-wish-btn svg[b-9qrq7oltca] {
    color: var(--bday-accent, #d97706);
}

.bday-wish-btn:hover[b-9qrq7oltca] {
    background: #fff8ec;
    border-color: var(--bday-accent-dark, #b45309);
    transform: translateY(-1px);
}

.bday-wish-btn:active[b-9qrq7oltca] {
    transform: translateY(0);
}

.bday-wish-btn:disabled[b-9qrq7oltca] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* ——— Wish result — icon + text, not color alone, per the "status = text +
   icon, never color-only" rule; solid tokenized radius instead of a fully
   rounded pill. ——— */
.bday-wish-result[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusMedium, 6px);
    flex-shrink: 0;
    animation: bday-result-pop-b-9qrq7oltca 0.2s ease both;
}

.bday-wish-result.wish-sent[b-9qrq7oltca] {
    color: var(--BEC-successText, #107c10);
    background: var(--BEC-successBackground, #dff6dd);
}

.bday-wish-result.wish-error[b-9qrq7oltca] {
    color: var(--BEC-errorText, #d13438);
    background: var(--BEC-errorBackground, #fde7e9);
}
@keyframes join-pulse-b-9qrq7oltca { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* ═══════════════════════════════════════════════════════════
   SHARED FLAT DETAIL BODY — News & Event detail panels
   One layout for both: hero → meta line → title → facts → body
   → (type-specific extras); the sticky action bar lives in
   BecDetailPanel/BecListPanel's Footer slot (.sp-footer — see
   .bdb-footer below). Same 560px width (set where <BecDetailPanel>
   is declared) and same class names for both types, so a fix here
   fixes both. Replaces the old, unrelated .wizard-card (News) and
   .d1-* (Event) systems.
   ═══════════════════════════════════════════════════════════ */

/* .sp-content (shared _wizard-panel.css) has its own 20px/24px padding —
   without counteracting it here, the hero sat inset from the panel's true
   edges while the floating close/back buttons (positioned relative to the
   panel itself) sat closer to the real corner, so the two never lined up.
   Negative margins pull the hero flush to the same edges the buttons use,
   so both share one coordinate frame and the hero genuinely starts at the
   panel's top edge as intended. */
.bdb-hero[b-9qrq7oltca] {
    width: calc(100% + 48px);
    margin: -20px -24px 0;
    height: 220px;
    overflow: hidden;
    background: #111827;
    flex-shrink: 0;
}

.bdb-hero img[b-9qrq7oltca] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bdb-hero--contain img[b-9qrq7oltca] {
    object-fit: contain;
    background: var(--BEC-colorNeutralBackground2, #f9f9fb);
}

.bdb-content[b-9qrq7oltca] {
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bdb-metaline[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Outline chip, not a filled/gradient pill — status stays text (+ icon, where
   one exists) rather than color-only, per this app's own design checklist. */
.bdb-badge[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--BEC-Text-Secondary, #605e5c);
    border: 1px solid var(--BEC-Border-Subtle, #e2e5ef);
    border-radius: 6px;
    padding: 3px 9px;
    white-space: nowrap;
}

.bdb-dot[b-9qrq7oltca] {
    color: var(--BEC-Border-Subtle, #d1d5db);
    font-size: 10px;
}

.bdb-status[b-9qrq7oltca] {
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.bdb-meta-row[b-9qrq7oltca] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.bdb-title[b-9qrq7oltca] {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--BEC-Text-Primary, #242424);
    margin: 0;
    letter-spacing: -0.005em;
}

.bdb-facts[b-9qrq7oltca] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bdb-fact-chip[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--BEC-Text-Primary, #242424);
    border: 1px solid var(--BEC-Border-Subtle, #e2e5ef);
    border-radius: 7px;
    padding: 6px 10px;
    background: var(--BEC-Surface-Alt, #f9fafb);
}

.bdb-fact-chip svg[b-9qrq7oltca] {
    color: var(--BEC-Text-Secondary, #9ca3af);
    flex-shrink: 0;
}

.bdb-summary[b-9qrq7oltca] {
    font-size: 14px;
    line-height: 1.6;
    color: var(--BEC-Text-Secondary, #4b5563);
    margin: 0;
}

.bdb-body[b-9qrq7oltca] {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--BEC-Text-Primary, #242424);
    word-break: break-word;
}

.bdb-body p[b-9qrq7oltca] { margin: 0 0 0.75em; }
.bdb-body p:last-child[b-9qrq7oltca] { margin-bottom: 0; }

.bdb-section-label[b-9qrq7oltca] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--BEC-Text-Secondary, #9ca3af);
    margin: 4px 0 2px;
}

/* Attachments */
.bdb-attachments[b-9qrq7oltca] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bdb-attach-thumbs[b-9qrq7oltca] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bdb-attach-thumb[b-9qrq7oltca] {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: var(--BEC-colorNeutralBackground3, #f3f4f6);
    flex-shrink: 0;
}

.bdb-attach-thumb img[b-9qrq7oltca] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.bdb-attach-thumb:hover img[b-9qrq7oltca] {
    transform: scale(1.08);
}

.bdb-attach-row[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--BEC-Border-Subtle, #e2e5ef);
    border-radius: 7px;
    font-size: 12.5px;
    color: var(--BEC-Text-Primary, #242424);
    text-decoration: none;
    transition: background 0.15s ease;
}

.bdb-attach-row:hover[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.bdb-attach-row svg[b-9qrq7oltca],
.bdb-attach-row i[b-9qrq7oltca] {
    color: var(--BEC-Text-Secondary, #9ca3af);
    flex-shrink: 0;
}

.bdb-attach-row__name[b-9qrq7oltca] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bdb-attach-row__size[b-9qrq7oltca] {
    font-size: 11px;
    color: var(--BEC-Text-Secondary, #9ca3af);
    flex-shrink: 0;
}

.bdb-view-count[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--BEC-Text-Secondary, #9ca3af);
    margin-left: auto;
}

/* ── Sticky footer content ──
   .sp-footer (shared _wizard-panel.css) is display:flex/justify-content:flex-end
   by default (built for a Cancel/Submit pair). .bdb-footer takes the row as
   flex:1 and lays its own content out left-aligned, wrapping to a second row
   for the expanded who-liked list instead of fighting that outer flex.

   <Footer> must always be declared (Razor doesn't allow conditionally omitting
   a named child-content section — RZ9996), so RenderNewsFooter/RenderEventFooter
   render nothing at all when there's no action to show (loading, or a purely
   informational event). This collapses the resulting empty .sp-footer (which
   would otherwise still show its padding + top border as a dead strip) —
   ::deep because .sp-footer belongs to the child BecDetailPanel/BecListPanel. */
[b-9qrq7oltca] .sp-footer:empty {
    display: none;
}

.bdb-footer[b-9qrq7oltca] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bdb-footer__row[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Expanded who-liked/comments region — capped and independently scrollable so
   a long thread grows this region only, not the whole panel; the button row
   above stays put. */
.bdb-footer__expand[b-9qrq7oltca] {
    max-height: min(45vh, 380px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bdb-join-row[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.bdb-join-row__label[b-9qrq7oltca] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #242424);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-dot[b-9qrq7oltca] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0e7a0d;
    flex-shrink: 0;
    animation: bdb-pulse-dot-b-9qrq7oltca 1.5s infinite;
}

@keyframes bdb-pulse-dot-b-9qrq7oltca {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.btn-join[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    color: #fff;
    flex-shrink: 0;
}

.btn-join--primary[b-9qrq7oltca] {
    background: var(--BEC-colorBrandBackground, #1e3c72);
}

.btn-join--primary:hover[b-9qrq7oltca] {
    background: var(--BEC-colorBrandBackgroundHover, #16305c);
}

.btn-join--outline[b-9qrq7oltca] {
    background: transparent;
    border: 1.5px solid var(--BEC-Border-Strong, #c8c6c4);
    color: var(--BEC-Text-Secondary, #605e5c);
    cursor: not-allowed;
    opacity: 0.8;
}

/* "Join now" is a distinct green — matches the live-dot/registered semantics
   used elsewhere on this page — overriding .btn-join--primary's brand fill. */
.bdb-join-btn.btn-join--primary[b-9qrq7oltca] {
    background: #0e7a0d;
}

.bdb-join-btn.btn-join--primary:hover[b-9qrq7oltca] {
    background: #0a6b0a;
}

.bdb-reg-link[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.bdb-reg-link svg[b-9qrq7oltca] {
    color: var(--BEC-colorBrandForeground1, #1e3c72);
    flex-shrink: 0;
}

.bdb-reg-link a[b-9qrq7oltca] {
    color: var(--BEC-colorBrandForeground1, #1e3c72);
    text-decoration: none;
    font-weight: 500;
}

.bdb-reg-link a:hover[b-9qrq7oltca] {
    text-decoration: underline;
}

.bdb-registration[b-9qrq7oltca] {
    border: 1px solid var(--BEC-Border-Subtle, #e2e5ef);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bdb-registration__header[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bdb-registration__badge[b-9qrq7oltca] {
    font-size: 11px;
    font-weight: 600;
    color: #0e7a0d;
    background: #e6f5e6;
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid #0e7a0d;
    white-space: nowrap;
}

.bdb-registration__stats[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}

.bdb-registration__count[b-9qrq7oltca] {
    font-weight: 600;
    color: var(--BEC-Text-Primary, #242424);
}

.bdb-registration__seats[b-9qrq7oltca] {
    font-weight: 600;
    font-size: 11px;
    color: #0e7a0d;
}

.bdb-registration__full[b-9qrq7oltca] {
    font-weight: 600;
    font-size: 11px;
    color: var(--BEC-colorPaletteRedForeground1, #d13438);
}

.bdb-progress-track[b-9qrq7oltca] {
    width: 100%;
    height: 4px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border-radius: 2px;
    overflow: hidden;
}

.bdb-progress-bar[b-9qrq7oltca] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.bdb-reg-btn[b-9qrq7oltca] {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
}

.bdb-reg-btn--primary[b-9qrq7oltca] {
    background: #0e7a0d;
    color: #fff;
}

.bdb-reg-btn--primary:hover[b-9qrq7oltca] {
    background: #0a6b0a;
}

.bdb-reg-btn--disabled[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground4, #f0f0f0);
    color: var(--BEC-colorNeutralForegroundDisabled, #bdbdbd);
    cursor: not-allowed;
}

.bdb-reg-btn--loading[b-9qrq7oltca] {
    background: #0e7a0d;
    color: #fff;
    cursor: wait;
}

.bdb-reg-spinner[b-9qrq7oltca] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-9qrq7oltca 0.6s linear infinite;
}

/* ── Responsive ──
   BecDetailPanel/BecListPanel already collapse the SfSidebar itself to 100vw
   (≤480px) / 90vw (481–768px) — see BecDetailPanel.razor.css. This only
   tightens the flat body's own spacing/type-scale at those same breakpoints
   so it doesn't feel oversized on a phone-width panel. */
@media (max-width: 480px) {
    .bdb-hero[b-9qrq7oltca] { height: 150px; }
    .bdb-content[b-9qrq7oltca] { padding: 14px 16px 18px; gap: 10px; }
    .bdb-title[b-9qrq7oltca] { font-size: 18px; }
    .bdb-body[b-9qrq7oltca] { font-size: 14px; }
    .bdb-attach-thumb[b-9qrq7oltca] { width: 56px; height: 56px; }
    .bdb-footer__row[b-9qrq7oltca] { gap: 6px; }
    .bdb-join-row__label[b-9qrq7oltca] { display: none; }}

@media (min-width: 481px) and (max-width: 768px) {
    .bdb-hero[b-9qrq7oltca] { height: 180px; }}

/* ================================================
   HOME PAGE REDESIGN — Track 2
   ================================================ */

/* Shared card surface */
.card-surface[b-9qrq7oltca] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.stat-box[b-9qrq7oltca] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.5rem 0.625rem;
    border-right: 1px solid #e5e7eb;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    gap: 0.125rem;
    border-top: 3px solid transparent;
    position: relative;
}

.stat-box:nth-child(1)[b-9qrq7oltca] { border-top-color: #f59e0b; }
.stat-box:nth-child(2)[b-9qrq7oltca] { border-top-color: #6366f1; }
.stat-box:nth-child(3)[b-9qrq7oltca] { border-top-color: #06b6d4; }

.stat-box:last-child[b-9qrq7oltca] {
    border-right: none;
}

.stat-box:hover[b-9qrq7oltca] {
    background: #f9fafb;
}

/* ===== MAIN CONTENT LAYOUT (QA + Content Strip LEFT, Events RIGHT) ===== */
.home-main-layout[b-9qrq7oltca] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 0.5rem;
}

/* Upper layout: (profile row + QA) left | New Hire right.
   height is DEFINITE (the mockup's --row1-h:224px, .grid's first
   grid-template-rows track) rather than auto. With an auto height the row
   sized to its tallest flex item — New Hire, whose empty-state + program
   button ran ~330px — and align-items:stretch then stretched the identity
   card to match, leaving the centred avatar/name/facts block marooned in
   the middle with a large dead band above and below it (the two areas
   circled in the reported screenshot). Fixing the track makes New Hire
   scroll inside its own card (.home-orient-list already owns
   flex:1/min-height:0/overflow-y:auto) instead of dictating the row, exactly
   as the mockup's `.new-hire .card-b{overflow-y:auto}` does.
   Reset back to auto at <=1200px below, where the row stacks vertically. */
/* ONE grid for the whole upper row: identity, the three stat cards and New Hire
   are all direct children, so a single `gap` is the ONLY spacing between any two
   of them. The old shape nested a 2-track grid inside a flex column inside a flex
   row, which is why the spacing was inconsistent — identity-to-stats was 10px,
   the "gaps" between the three stats were 1px hairline dividers, and
   stats-to-New-Hire was 12px again.

   Track sizing is measured, not guessed. The identity card needs ~372px to hold
   its 2 x 2 fact grid beside a 48px avatar; below that its own container query
   collapses the facts to one column. At the narrowest the row ever gets —
   1228px, sidebar open — 372px of the 900px available leaves 176px per stat
   card, which is exactly enough for "PERFORMANCE" once padding and the
   reveal-button gutter are paid. That is the 2.1 : 1 ratio. New Hire stays fixed
   at the mirror's 280px rail width. */
.home-upper-layout[b-9qrq7oltca] {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) repeat(3, minmax(0, 1fr)) 280px;
    gap: 12px;
    margin-bottom: 0.75rem;
    align-items: stretch;
}

/* 160px, down from 224px. Measured against the real component stylesheets, the
   tallest card in this row needs 143px of content (Last Attendance — the two-line
   label, the In/Out pair, the rule and the caption); the profile card needs 119px,
   or ~141px when a long name wraps to its second line. 224px was therefore ~80px
   of nothing in every one of the five cards, which is what made the row read as
   oversized next to the received design's own first row.

   160px is the tallest card plus a small allowance, so nothing is clipped at any
   width the fixed height applies to — verified down to a 112px tile (a 1201px
   viewport with the sidebar open, the narrowest this rule ever sees) and up with
   a 2-line name. Below 1201px the height is auto and the cards stack. */
@media (min-width: 1201px) {
    .home-upper-layout[b-9qrq7oltca] { height: 160px; }}

/* ::deep — .bec-emp-summary/.bec-stat-tile are rendered by child components
   (BecEmployeeSummary/BecStatTile), each carrying their OWN Blazor CSS
   isolation scope attribute, not this page's. Without ::deep here, the
   scope attribute Blazor appends to this selector would never match those
   elements and these rules would silently apply to nothing. */
/* container-type:inline-size — same reasoning as the stats card below: the
   avatar and fact columns inside BecEmployeeSummary size against THIS card's
   width, not the viewport's. */
.home-upper-layout[b-9qrq7oltca]  > .bec-emp-summary {
    container-type: inline-size;
    container-name: identity;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--bec-surface, #fff);
    border: 1px solid var(--bec-border, #E4E8EF);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-resting, 0 1px 2px rgba(16,24,40,.05));
    padding: 15px 20px;   /* the mirror's .prof padding */
}

/* New Hire Orientation — fixed right column spanning full upper height.
   Card chrome (border/shadow/header/divider) now comes from BecSectionCard
   nested inside; this wrapper only owns the column's sizing. ::deep — the
   nested element carries BecSectionCard's own CSS-isolation scope, not this
   page's, so a plain (non-::deep) selector would silently match nothing. */
/* 280px is the mockup's --rail-w. Was 300px — the 20px goes to the two cards
   on its left, which are the ones that run out of room. */
.home-new-hire[b-9qrq7oltca] {
    flex: 0 0 280px;
    width: 280px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* overflow:hidden — the backstop. Everything below is sized so the content fits
   the row honestly, but this card's content is server data (an orientation title
   can be any length), and without a clip on the card itself an overrun paints
   straight over the button underneath instead of being contained. */
.home-new-hire[b-9qrq7oltca]  > .bec-section-card {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.home-new-hire__body[b-9qrq7oltca] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

/* ===== 2-COLUMN CONTENT STRIP ===== */
/* align-items:stretch — Announcements/Media Center/Top Resources/Events now
   all finish on the same baseline. Each card is still a flex column with its
   own internal overflow handling (.ann-list scrolls, the media carousel
   fills via flex, the mini-cal event panel has its own max-height, resource
   rows use flex:1), so stretching the row doesn't reintroduce the old fixed-
   360px problem of clipped/dead content — it just aligns real content
   heights instead of a hardcoded number. */
.home-content-strip[b-9qrq7oltca] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 300px;
    gap: 12px;
    align-items: stretch;
}

.home-col[b-9qrq7oltca] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Row height target = Events' own 420px (.home-col--events below) — without
   a definite height here, Announcements'/Media Center's height:100% carousel
   frames resolve against an indefinite ancestor, so the *photo's own aspect
   ratio* (not the layout) was setting the row's real height, ballooning it
   well past Events/Top Resources' actual content and leaving Events looking
   short by comparison. Fixing the row at 420px makes those percentages
   resolve properly, so each carousel's flex:1/min-height:0 frame (and Top
   Resources' flex:1 list) shrinks to fit instead — same mechanism the old
   360px cap used, just reusing Events' already-vetted number and pairing it
   with components that already know how to shrink into a bounded height
   (object-fit:cover crops the photo rather than distorting it; the resource
   list's overflow-y:auto/justify-content:space-evenly still holds). Scoped
   to `.home-content-strip .home-col` (2-class specificity) so the shared
   `.home-col` base class used by the social strip below is unaffected. */
.home-content-strip .home-col[b-9qrq7oltca] {
    height: 420px;
}

/* BecSectionCard now provides ALL visual card chrome (background/border/
   radius/shadow) for cards that used to also carry .card-surface on this
   same wrapper — removed from the markup (see Intranet-MainPage.razor) to
   avoid a double-nested-box look. This makes it stretch-fill the wrapper
   the way the old single-div .home-col.card-surface used to size itself.
   ::deep — BecSectionCard's root carries ITS OWN CSS-isolation scope, not
   this page's, so a plain selector wouldn't match it. */
.home-col[b-9qrq7oltca]  > .bec-section-card {
    flex: 1;
    min-height: 0;
    height: 100%;
}

.news-engage-btn[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #6b7280;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
}

.news-engage-btn:hover[b-9qrq7oltca] {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4f46e5;
}

.news-engage-btn--active[b-9qrq7oltca] {
    background: #eef2ff;
    border-color: #a5b4fc;
    color: #4f46e5;
}
.news-engage-btn--active svg[b-9qrq7oltca] { fill: #4f46e5; }

@keyframes skeleton-pulse-b-9qrq7oltca {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ── Employee Highlights: header actions & add button ── */

.home-highlights-add-btn[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    background: var(--BEC-colorBrandBackground, #0f6cbd);
    border: 0;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    text-decoration: none;
    line-height: 1.6;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.home-highlights-add-btn:hover[b-9qrq7oltca] {
    background: var(--BEC-colorBrandBackgroundHover, #115ea3);
    text-decoration: none;
    color: #fff;
}

/* .home-highlight-pending-badge removed 2026-08 — dead since BecPostCard's
   StatusText now renders via BecStatusBadge. */

/* Empty state */
.empty-state[b-9qrq7oltca] {
    padding: 1rem 1.25rem;
    font-size: 0.8125rem;
    color: #9ca3af;
    text-align: center;
}

.news-carousel__dot:hover:not(.news-carousel__dot--active)[b-9qrq7oltca] {
    background: #9ca3af;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {

    .home-content-strip[b-9qrq7oltca] {
        grid-template-columns: 1fr 1fr;
    }

    .home-col--events[b-9qrq7oltca] {
        grid-column: span 2;
    }

    /* THE bug behind the crushed first row on phones and tablets.

       This said `flex-direction: column`, which is a no-op: .home-upper-layout
       is `display: grid`, not flex (it was flex when this rule was written, and
       the rule was not updated when it changed). So the desktop track list —
       `minmax(0,2.1fr) repeat(3, minmax(0,1fr)) 280px` — stayed in force at
       every width. On a 375px screen that is a 280px fixed rail plus four more
       columns sharing what is left, which is why the profile card and the three
       stat tiles rendered as unreadable vertical slivers.

       Three tracks here: the identity card and New Hire each span the row, and
       the three stat tiles sit in one tidy row of equal thirds. */
    .home-upper-layout[b-9qrq7oltca] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        height: auto;
    }

    .home-upper-layout[b-9qrq7oltca]  > .bec-emp-summary,
    .home-new-hire[b-9qrq7oltca] {
        grid-column: 1 / -1;
    }

    .home-new-hire[b-9qrq7oltca] {
        width: 100%;
        min-height: 200px;
    }

    /* Narrow-screen-only: this is where the footer clipping actually
       happened (see .intranet-page-root's base rule at the top of this
       file). Scoped to this breakpoint instead of a flat value so wide
       screens — where content already fits without scrolling — don't get
       a chunk of dead white space below the footer for no reason. */
    .intranet-page-root[b-9qrq7oltca] {
        padding-bottom: 64px;
    }

    .home-social-strip[b-9qrq7oltca] {
        grid-template-columns: 1fr 1fr;
    }

    .home-col--social[b-9qrq7oltca] {
        grid-column: auto;
    }}

@media (max-width: 768px) {

    /* One card per row on phones. Three stat tiles across still read at ~109px
       each (their own container queries go down to 165px and then 190px), but a
       phone is a single-column reading surface and mixing a full-width identity
       card with a 3-up tile strip under it is the layout that looked broken in
       the first place. Every card in this row is now the same shape. */
    .home-upper-layout[b-9qrq7oltca] {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-content-strip[b-9qrq7oltca] {
        grid-template-columns: 1fr;
    }

    .home-col--events[b-9qrq7oltca],
    .home-col--wide[b-9qrq7oltca] {
        grid-column: span 1;
    }

    .home-content-strip .home-col[b-9qrq7oltca] {
        height: auto;
        min-height: 280px;
    }

    /* Events card: .home-mini-cal__event-panel's flex:1 was sized against
       the desktop fixed 420px card height (see comment at its rule). Under
       the generic height:auto/min-height:280px above, the calendar (flex:0
       0 auto, ~200px) plus header leaves flex:1 almost nothing to grow
       into, so the events list collapsed to an unusable sliver. Give the
       card enough room for calendar + a real list, and floor the list
       itself so it never shrinks below a usable, scrollable size.
       Qualified as ".home-content-strip .home-col--events" (not just
       ".home-col--events") on purpose — the generic ".home-content-strip
       .home-col" rule above is a 2-class selector, which beats a 1-class
       ".home-col--events" selector on specificity regardless of source
       order, so an unqualified override here was silently losing to the
       280px generic floor no matter what value was set. This previously
       shipped with that exact bug (was 480/220/160 and never took visual
       effect for that reason) — values bumped up now that they'll actually
       apply. */
    .home-content-strip .home-col--events[b-9qrq7oltca] {
        min-height: 560px;
    }

    .home-social-strip[b-9qrq7oltca] {
        grid-template-columns: 1fr;
    }

    .home-col--social[b-9qrq7oltca] {
        grid-column: auto;
    }

    .home-social-strip .home-col[b-9qrq7oltca] {
        height: auto;
        min-height: 220px;
    }

    .stat-box[b-9qrq7oltca] {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        padding: 0.875rem 1rem;
    }

    .stat-box:last-child[b-9qrq7oltca] {
        border-bottom: none;
    }

    .home-main-layout[b-9qrq7oltca] {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }}


/* ═══════════════════════════════════════════════════
   NEWS ENGAGEMENT SECTION (likes, comments, reactions)
   ═══════════════════════════════════════════════════ */

/* Spinner utility (used in engagement section) */
.spinner[b-9qrq7oltca] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #e5e7eb;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-b-9qrq7oltca 0.8s linear infinite;
    flex-shrink: 0;
}
.spinner--sm[b-9qrq7oltca] {
    width: 0.75rem;
    height: 0.75rem;
    border-width: 1.5px;
}

/* Chevron for dropdowns */
.nvall-chevron[b-9qrq7oltca] {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    color: currentColor;
    transition: transform 0.2s ease;
}
.nvall-chevron--open[b-9qrq7oltca] {
    transform: rotate(180deg);
}

/* Split like pill: [👍 icon | count ▼] */
.nvall-engage-split[b-9qrq7oltca] {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    background: #f9fafb;
    transition: border-color 0.15s;
}
.nvall-engage-split:hover[b-9qrq7oltca] {
    border-color: #c7d2fe;
}
.nvall-engage-split--active[b-9qrq7oltca] {
    border-color: #a5b4fc;
    background: #eef2ff;
}

.nvall-engage-split__like[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.4rem 0.25rem 0.55rem;
    border: none;
    border-right: 1px solid #e5e7eb;
    background: transparent;
    cursor: pointer;
    color: #6b7280;
    transition: background 0.15s, color 0.15s;
}
.nvall-engage-split__like:hover[b-9qrq7oltca] { background: #eef2ff; color: #4f46e5; }
.nvall-engage-split--active .nvall-engage-split__like[b-9qrq7oltca] { color: #4f46e5; }
.nvall-engage-split--active .nvall-engage-split__like svg[b-9qrq7oltca] { fill: #4f46e5; }

.nvall-engage-split__count[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.25rem 0.5rem 0.25rem 0.4rem;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.nvall-engage-split__count:hover[b-9qrq7oltca] { background: #eef2ff; color: #4f46e5; }
.nvall-engage-split__count--open[b-9qrq7oltca] { color: #4f46e5; }

.nvall-engage-split__count--zero[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem 0.25rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #9ca3af;
    line-height: 1;
    cursor: default;
}

/* Action bar row: 👍 count  · 💬 count */
.nvall-engagement[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
}

.nvall-engage-btn[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f9fafb;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
}
.nvall-engage-btn:hover[b-9qrq7oltca] {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4f46e5;
}
.nvall-engage-btn--active[b-9qrq7oltca] {
    background: #eef2ff;
    border-color: #a5b4fc;
    color: #4f46e5;
}
.nvall-engage-btn--active svg[b-9qrq7oltca] { fill: #4f46e5; }

/* Who liked expandable panel */
.nvall-who-liked[b-9qrq7oltca] {
    margin-top: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    background: #f5f3ff;
    border: 1px solid #e0e7ff;
    animation: whoLikedFadeIn-b-9qrq7oltca 0.15s ease;
}

.nvall-who-liked[b-9qrq7oltca]::before {
    content: "Liked by";
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7c3aed;
    margin-bottom: 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid #ddd6fe;
}

@keyframes whoLikedFadeIn-b-9qrq7oltca {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nvall-who-liked__loading[b-9qrq7oltca] {
    display: flex;
    justify-content: center;
    padding: 0.5rem;
}

.nvall-who-liked__empty[b-9qrq7oltca] {
    font-size: 0.75rem;
    color: #9ca3af;
    text-align: center;
    padding: 0.25rem 0;
    margin: 0;
}

.nvall-who-liked__list[b-9qrq7oltca] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 160px;
    overflow-y: auto;
}

.nvall-who-liked__item[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nvall-who-liked__avatar[b-9qrq7oltca] {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
}
.nvall-who-liked__avatar--img[b-9qrq7oltca] {
    background: transparent;
}
.nvall-who-liked__avatar--img img[b-9qrq7oltca],
img.nvall-who-liked__avatar--img[b-9qrq7oltca] {
    width: 26px;
    height: 26px;
    object-fit: cover;
    border-radius: 50%;
}

.nvall-who-liked__name[b-9qrq7oltca] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Comments section */
.nvall-comments[b-9qrq7oltca] {
    margin-top: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    animation: whoLikedFadeIn-b-9qrq7oltca 0.15s ease;
}

.nvall-comments[b-9qrq7oltca]::before {
    content: "Comments";
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid #e5e7eb;
}

.nvall-comments__loading[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #9ca3af;
    padding: 0.5rem 0;
}

.nvall-comments__empty[b-9qrq7oltca] {
    font-size: 0.75rem;
    color: #9ca3af;
    padding: 0.5rem 0 0.25rem;
    margin: 0;
}

.nvall-comments__list[b-9qrq7oltca] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 0.25rem;
    margin-bottom: 0.75rem;
}

.nvall-comment[b-9qrq7oltca] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.nvall-comment__avatar[b-9qrq7oltca] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.nvall-comment__content[b-9qrq7oltca] {
    flex: 1;
    min-width: 0;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 0.5rem;
    padding: 0.4rem 0.6rem;
}

.nvall-comment__header[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.nvall-comment__name[b-9qrq7oltca] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #111827;
}

.nvall-comment__time[b-9qrq7oltca] {
    font-size: 0.65rem;
    color: #9ca3af;
    margin-left: auto;
    white-space: nowrap;
}

.nvall-comment__text[b-9qrq7oltca] {
    font-size: 0.75rem;
    color: #374151;
    line-height: 1.5;
    margin: 0;
    word-break: break-word;
}

/* Add comment input row */
.nvall-add-comment[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.625rem;
    border-top: 1px solid #f3f4f6;
}

.nvall-add-comment__avatar[b-9qrq7oltca] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    object-fit: cover;
}
.nvall-add-comment__avatar--img[b-9qrq7oltca] {
    background: transparent;
    object-fit: cover;
}

.nvall-add-comment__input-wrap[b-9qrq7oltca] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 0 0.5rem 0 0.75rem;
    transition: border-color 0.15s;
}
.nvall-add-comment__input-wrap:focus-within[b-9qrq7oltca] {
    border-color: #a5b4fc;
    background: #fff;
}

.nvall-add-comment__input[b-9qrq7oltca] {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.75rem;
    color: #374151;
    padding: 0.45rem 0;
    min-width: 0;
}
.nvall-add-comment__input[b-9qrq7oltca]::placeholder { color: #9ca3af; }
.nvall-add-comment__input:disabled[b-9qrq7oltca] { opacity: 0.6; }

.nvall-add-comment__send[b-9qrq7oltca] {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    border: none;
    background: #4f46e5;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    padding: 0;
    flex-shrink: 0;
}
.nvall-add-comment__send:hover:not(:disabled)[b-9qrq7oltca] { background: #4338ca; }
.nvall-add-comment__send:disabled[b-9qrq7oltca] { background: #d1d5db; cursor: not-allowed; }
.nvall-add-comment__send.loading[b-9qrq7oltca] { background: #e0e7ff; }

/* ═══ HIGHLIGHT DETAIL PANEL ══════════════════════════════════════════════════
   Shell (backdrop/close button/header/sizing) is now the shared BecDetailPanel
   (SfSidebar-based) — see Intranet-MainPage.razor. .hl-detail-overlay/
   .hl-detail-panel/__header/__close/__body are gone; everything below is just
   the content that renders inside BecDetailPanel's ChildContent. */
.hl-detail-panel__author-row[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.hl-detail-panel__avatar[b-9qrq7oltca] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #4f46e5;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    overflow: hidden;
}

.hl-detail-panel__avatar img[b-9qrq7oltca] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hl-detail-panel__author-info[b-9qrq7oltca] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.hl-detail-panel__author-name[b-9qrq7oltca] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hl-detail-panel__author-title[b-9qrq7oltca] {
    font-size: 0.75rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hl-detail-panel__date[b-9qrq7oltca] {
    font-size: 0.7rem;
    color: #9ca3af;
}

.hl-detail-panel__text[b-9qrq7oltca] {
    font-size: 0.9375rem;
    color: #1f2937;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

/* ═══ DETAIL PANEL MEDIA GRID ═══════════════════════════════════════════════ */
.hl-detail-media-grid[b-9qrq7oltca] {
    display: grid;
    gap: 4px;
    border-radius: 0.5rem;
    overflow: hidden;
}

.hl-detail-media-grid--1[b-9qrq7oltca] { grid-template-columns: 1fr; }
.hl-detail-media-grid--2[b-9qrq7oltca] { grid-template-columns: 1fr 1fr; }
.hl-detail-media-grid--3[b-9qrq7oltca] { grid-template-columns: 1fr 1fr; }
.hl-detail-media-grid--4[b-9qrq7oltca] { grid-template-columns: 1fr 1fr; }

.hl-detail-media-grid--3 .hl-detail-media-item:first-child[b-9qrq7oltca] {
    grid-row: 1 / 3;
}

.hl-detail-media-item[b-9qrq7oltca] {
    background: #111;
    overflow: hidden;
    position: relative;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hl-detail-media-grid--3 .hl-detail-media-item:first-child[b-9qrq7oltca] {
    aspect-ratio: unset;
}

.hl-detail-media-img[b-9qrq7oltca] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    cursor: zoom-in;
}

.hl-detail-media-video[b-9qrq7oltca] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
}

.hl-detail-media-download[b-9qrq7oltca] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #e5e7eb;
    text-decoration: none;
    padding: 1rem;
    width: 100%;
    height: 100%;
    font-size: 0.8rem;
    text-align: center;
    word-break: break-all;
}
.hl-detail-media-download:hover[b-9qrq7oltca] { background: rgba(255,255,255,0.08); }

/* ═══ HOME LIGHTBOX (for detail panel image expand) ════════════════════════ */
.hl-home-lightbox[b-9qrq7oltca] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.hl-home-lightbox__inner[b-9qrq7oltca] {
    position: relative;
    max-width: min(90vw, 1200px);
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hl-home-lightbox__img[b-9qrq7oltca] {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 0.5rem;
    object-fit: contain;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
}

.hl-home-lightbox__video[b-9qrq7oltca] {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 0.5rem;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
}

.hl-home-lightbox__close[b-9qrq7oltca] {
    position: absolute;
    top: -2.5rem;
    right: -0.5rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}
.hl-home-lightbox__close:hover[b-9qrq7oltca] { background: rgba(255,255,255,0.3); }
.skel-block[b-9qrq7oltca] {
    position: relative;
    overflow: hidden;
    border-radius: 0.25rem;
    background: #e5e7eb;
}
.skel-block[b-9qrq7oltca]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: skel-shimmer-b-9qrq7oltca 1.4s ease-in-out infinite;
    will-change: transform;
}
@keyframes skel-shimmer-b-9qrq7oltca {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.nvall-add-comment__send.loading .spinner[b-9qrq7oltca] { border-top-color: #4f46e5; }

.fb-modal__btn--ghost:hover:not(:disabled)[b-9qrq7oltca] { background: var(--BEC-colorNeutralBackground3); }

.fb-modal__btn--primary:hover:not(:disabled)[b-9qrq7oltca] { background: var(--BEC-colorBrandBackgroundHover); }

@keyframes pu-spin-b-9qrq7oltca { to { transform: rotate(360deg); } }

    .pu-pager__btn:hover:not(:disabled)[b-9qrq7oltca] { background: var(--BEC-colorNeutralBackground3); }
    .pu-detail__thumb.active[b-9qrq7oltca] { border-color: var(--BEC-colorBrandBackground); }

/* ══════════════════════════════════════════════════════════
   TOP RESOURCES — Col C of content strip
   ══════════════════════════════════════════════════════════ */

.home-col--resources[b-9qrq7oltca] { display: flex; flex-direction: column; }

/* ══════════════════════════════════════════════════════════
   EVENTS CARD (Col D in content strip) — mini calendar
   ══════════════════════════════════════════════════════════ */

.home-col--events[b-9qrq7oltca] {
    display: flex;
    flex-direction: column;
    height: 420px;
}

/* Events/Birthdays tab buttons inside header */
/* Underline text tabs, matching the design-system handoff mockup (was a
   segmented-pill control — grey track + raised white pill for the selected
   tab). Selected tab: bold ink text + navy underline bar; unselected: plain
   grey text, no track/background. */
.tabs[b-9qrq7oltca] {
    display: flex;
    gap: var(--space-4, 16px);
    margin-left: var(--space-2, 6px);
}

.tab[b-9qrq7oltca] {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 2px 0 4px;
    font: var(--type-meta-weight, 500) var(--type-meta-size, 12px)/1.4 var(--font-family-base, inherit);
    color: var(--bec-slate, #6b7280);
    cursor: pointer;
}

.tab[aria-selected="true"][b-9qrq7oltca] {
    font-weight: 700;
    color: var(--bec-ink, #24272A);
    border-bottom-color: var(--bec-navy-900, #1F2566);
}

/* .home-mini-cal (base grid/nav/event-panel/list/item rules) removed 2026-08
   — dead since the Events tab now renders via BecMiniCalendar (its own
   scoped .bec-mini-cal__* CSS). __event-empty/__event-sk below are kept —
   the Birthdays tab (still inline, not part of BecMiniCalendar) reuses
   them for its own loading/empty states. */

/* Centers within whatever space .home-mini-cal__event-panel/__birthdays now
   has available (flex:1, see those rules) instead of sitting as one small
   line at the top with dead space stretching below it. */
.home-mini-cal__event-empty[b-9qrq7oltca] {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 10.5px;
    color: var(--BEC-colorNeutralForeground3, #9ca3af);
    text-align: center;
}

.home-mini-cal__event-sk[b-9qrq7oltca] {
    height: 12px;
    background: var(--BEC-colorNeutralBackground3, #f3f4f6);
    border-radius: 3px;
    margin-bottom: 5px;
    animation: shimmer 1.4s ease infinite;
}

/* Birthdays scroll list */
/* flex:1 (not the old max-height:240px cap) — the Birthdays tab has no
   calendar above it, so this is the ONLY content in the fixed-420px
   .home-col--events card; capping it at 240px both cropped a full list of
   birthdays into a small scroll box AND left the rest of the 420px card
   empty below it. Matches the same fix applied to .home-mini-cal__event-panel
   for the Events tab, for the same reason. */
.home-mini-cal__birthdays[b-9qrq7oltca] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 4px 8px 6px;
    scrollbar-width: thin;
}

    .home-mini-cal__birthdays[b-9qrq7oltca]::-webkit-scrollbar { width: 3px; }
    .home-mini-cal__birthdays[b-9qrq7oltca]::-webkit-scrollbar-track { background: transparent; }
    .home-mini-cal__birthdays[b-9qrq7oltca]::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }

.home-mini-cal__birthday-item[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke3, #f3f4f6);
}

    .home-mini-cal__birthday-item:last-child[b-9qrq7oltca] { border: none; }

.home-mini-cal__birthday-av[b-9qrq7oltca] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground1, #deecf9);
    color: var(--BEC-Brand-Primary, #0078d4);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
    flex-shrink: 0;
}

.home-mini-cal__birthday-info[b-9qrq7oltca] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.home-mini-cal__birthday-name[b-9qrq7oltca] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-mini-cal__birthday-dept[b-9qrq7oltca] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════
   SOCIAL STRIP — Row below content strip
   ══════════════════════════════════════════════════════════ */

/* align-items:start (not stretch) so a card with genuinely more content
   (e.g. a long highlights feed) can grow past its neighbors rather than
   forcing them all taller — but Feedback, now just a compact trigger, was
   left looking short/half-empty next to its two neighbors as a result.
   min-height gives all three the same floor (280px, the row's old fixed
   height before this became align-items:start) without clipping anything
   that legitimately needs to grow beyond it. */
/* align-items:stretch (was start) — start let each card size to its own
   natural content height with no relation to its row-mates, so Highlights
   (4 posts), Project Updates (a carousel) and Feedback (a compact form)
   ended up with staggered bottoms. stretch matches .home-content-strip's
   row above it: all 3 cards now share the row's height (set by whichever
   is naturally tallest — Highlights), with the shorter ones filling the
   rest via their own flex:1 body content. */
.home-social-strip[b-9qrq7oltca] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 300px;
    gap: 12px;
    align-items: stretch;
}

.home-col--social[b-9qrq7oltca] {
    grid-column: span 2;
}

/* A DEFINITE height, not a min-height. min-height let the tallest column (the
   highlights feed) set the row, which is exactly the problem: five posts with
   photos pushed Project Updates and Feedback to ~700px alongside them. With a
   fixed track every column resolves its own internal overflow instead — the feed
   scrolls, the carousel fits its frame, the feedback box sizes its textarea.

   320px (was 380px). The row was the tallest thing on the page and pushed the
   footer below the fold on a 1080p screen for no content reason: Highlights was
   showing 3 rows and a half-row of dead scroll, and Project Updates was padding
   ~60px of nothing between its dots and the card edge. 320px is the honest floor
   — Highlights still clears 3 full BecPostCard rows (320 - 46 header - 8 padding
   = 266 / ~84), Feedback still fits prompt + a ~150px textarea + submit, and
   Project Updates fits exactly: 46 header + 28 body padding + a 150px image band
   + ~96px of meta. Everything below is what makes that last sum hold.
   Same mechanism as .home-content-strip's row above. */
.home-col--social[b-9qrq7oltca],
.home-col--projects[b-9qrq7oltca],
.home-col--feedback[b-9qrq7oltca] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 320px;
}

@media (max-width: 1200px) {
    .home-col--social[b-9qrq7oltca],
    .home-col--projects[b-9qrq7oltca],
    .home-col--feedback[b-9qrq7oltca] { height: auto; min-height: 260px; }}

/* Re-assert responsive overrides: the unguarded rules above are declared
   later in this file than the @media blocks near .home-content-strip, so
   without repeating them here they'd win the cascade at every viewport
   width and the strip would never collapse below 4 fixed tracks on mobile. */
@media (max-width: 1200px) {
    .home-social-strip[b-9qrq7oltca] {
        grid-template-columns: 1fr 1fr;
    }

    .home-col--social[b-9qrq7oltca] {
        grid-column: auto;
    }}

@media (max-width: 768px) {
    .home-social-strip[b-9qrq7oltca] {
        grid-template-columns: 1fr;
    }

    .home-col--social[b-9qrq7oltca] {
        grid-column: auto;
    }

    .home-social-strip .home-col[b-9qrq7oltca] {
        height: auto;
        min-height: 220px;
    }}

/* ── Social / Highlights feed ─────────────────────────── */

/* overflow-y:auto (not hidden) — with a fixed 2-column grid, an odd item
   count (5, going forward, instead of the previous fixed 4) leaves a partial
   third row. overflow:hidden had no scroll affordance at all, so that row
   — or a taller post's text — would just be silently clipped with nothing
   to indicate more content exists. Same pattern already used for
   .home-mini-cal__birthdays below for the identical reason. */
/* A single-column scrolling LIST, not a two-column grid of cards.

   The grid is what made this card dominate the page: two columns of
   content-sized cards, no height cap, no internal scroll — so five posts with
   photos set the height of the whole social row and Project Updates and Feedback
   stretched alongside them. Each row is now a fixed shape (BecPostCard), the
   column is capped (.home-col--social below), and the overflow scrolls here.

   ~3 rows visible; the remaining loaded posts scroll. The card header carries the
   total so the reader knows how many more are behind "Go to Highlights". */
.home-social-feed[b-9qrq7oltca] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--bec-border, #D5D6E6) transparent;
}

.home-social-feed[b-9qrq7oltca]::-webkit-scrollbar { width: 5px; }
.home-social-feed[b-9qrq7oltca]::-webkit-scrollbar-thumb { background: var(--bec-border, #D5D6E6); border-radius: 3px; }
.home-social-feed[b-9qrq7oltca]::-webkit-scrollbar-track { background: transparent; }

.home-social-post[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 7px;
    padding: 8px;
    display: flex;
    gap: 7px;
    cursor: pointer;
    transition: background .15s;
}

    .home-social-post:hover[b-9qrq7oltca] { background: var(--BEC-colorNeutralBackground3, #f0f0f0); }

/* __avatar/__body/__top/__name/__text/__footer/__date (real post content)
   removed 2026-08 — dead since real posts now render via BecPostCard (its
   own scoped .bec-post-card__* CSS). Base .home-social-post + the skeleton
   rules below are kept — the loading skeleton still uses them directly. */

/* Skeletons */
.home-social-post--skeleton[b-9qrq7oltca] { background: var(--BEC-colorNeutralBackground2); animation: shimmer 1.4s ease infinite; }
.home-social-post__avatar--sk[b-9qrq7oltca] { width: 28px; height: 28px; border-radius: 50%; background: var(--BEC-colorNeutralStroke2); flex-shrink: 0; }
.home-social-post__lines[b-9qrq7oltca] { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.home-social-post__line--sk[b-9qrq7oltca] { height: 10px; border-radius: 4px; background: var(--BEC-colorNeutralStroke2); }
.home-social-post__line--sk-wide[b-9qrq7oltca] { width: 75%; }
.home-social-post__line--sk-narrow[b-9qrq7oltca] { width: 45%; }

/* ── Project Updates home card ────────────────────────── */

.home-col--projects[b-9qrq7oltca] { display: flex; flex-direction: column; }

.home-pu-skeleton[b-9qrq7oltca] {
    aspect-ratio: 16 / 9;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 4px;
    margin: 8px;
    animation: shimmer 1.4s ease infinite;
}

/* ── Project Updates media preview carousel ──
   .home-pu-frame owns the fixed position/overflow that .home-pu-media-preview
   (the clickable link) used to own itself — now that prev/next nav buttons
   need to sit as its SIBLINGS (not descendants of the <a>, so clicking them
   doesn't also trigger navigation), they need a shared positioned parent.
   flex:1/min-height:0 — it fills whatever height the card actually has,
   matching BecMediaGrid's .media-frame exactly. */
/* flex:1, not a fixed aspect ratio. The band used to be 16:9 with a max-height,
   sized off its own WIDTH — in a ~285px column that is ~150px of picture inside
   a 240px card body, so the photo read as a small tile with a block of white
   under it. The card height is the fixed thing here, so the frame should take
   all of it that is going spare and let object-fit:cover pick the crop; the
   title and caption now overlay the image (.home-pu-cap) and cost no height at
   all, leaving only the dots row below. */
/* Wrapper introduced so the frame AND the dots sit inside one [data-carousel]
   root — the shared JS looks for its slides, arrows, counter and dots within a
   single element. The dots used to be a sibling of the frame, outside it. */
.home-pu-carousel[b-9qrq7oltca] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.home-pu-frame[b-9qrq7oltca] {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-md, 10px);
    background: var(--bec-bg-alt, #F6F8FC);
}

/* Every slide is stacked in the same box; only the active one is painted. The
   images are therefore all fetched when the card first renders, and changing
   slide is a class toggle with no network at all — which is what makes it
   instant. Opacity rather than display:none so the browser cannot skip
   decoding the inactive ones. */
.home-pu-slide[b-9qrq7oltca] {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

/* .is-active, not .home-pu-slide--active — the generic class the shared JS
   carousel toggles, so Media Center and Project Updates share one
   implementation instead of each needing their own modifier name. */
.home-pu-slide.is-active[b-9qrq7oltca] {
    opacity: 1;
    pointer-events: auto;
}

.home-pu-slide img[b-9qrq7oltca] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bottom-anchored caption ON the image, over a gradient scrim — deliberately
   the same treatment as the Media Center's tiles (.media-mosaic__cap in
   BecMediaGrid.razor.css), so the two picture cards on this page read as the
   same kind of object.

   pointer-events:none so the scrim never intercepts a click meant for the slide
   link underneath it; z-index 1 keeps it over the slides but under the nav
   buttons and counter, which are at 2 and must stay clickable. */
.home-pu-cap[b-9qrq7oltca] {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 26px 12px 10px;
    background: linear-gradient(to top, rgba(31, 37, 102, .85), rgba(31, 37, 102, .55) 45%, transparent);
}

.home-pu-cap__project[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--type-caption-size, 11px);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Two lines then ellipsis — a caption is free text an admin types, and it is
   sitting on a photo, so an unbounded one would climb the whole image. */
.home-pu-cap__caption[b-9qrq7oltca] {
    font-size: var(--type-meta-size, 12.5px);
    line-height: 1.4;
    color: rgba(255, 255, 255, .92);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-pu-nav[b-9qrq7oltca] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    font-size: 11px;
    z-index: 2;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: background 0.15s ease;
}

.home-pu-nav:hover[b-9qrq7oltca] { background: #fff; }
.home-pu-nav--prev[b-9qrq7oltca] { left: 8px; }
.home-pu-nav--next[b-9qrq7oltca] { right: 8px; }

.home-pu-counter[b-9qrq7oltca] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    z-index: 2;
}

/* The only thing left below the image. flex:none so the frame above it (flex:1)
   takes every other pixel of the card body. */
.home-pu-carousel-dots[b-9qrq7oltca] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 8px 0 0;
    flex: none;
}

.home-pu-carousel-dot[b-9qrq7oltca] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralStroke2, #d1d5db);
    border: 0;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s ease;
}

.home-pu-carousel-dot.is-active[b-9qrq7oltca] {
    background: var(--BEC-colorBrandBackground);
    width: 16px;
    border-radius: 3px;
}

.home-pu-media-preview__no-thumb[b-9qrq7oltca] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 2rem;
    background: var(--BEC-colorNeutralBackground3);
}

.home-pu-media-preview__play[b-9qrq7oltca] {
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,.55);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    pointer-events: none;
}

/* ── Inline Feedback card ─────────────────────────────── */

.home-col--feedback[b-9qrq7oltca] { display: flex; flex-direction: column; }

/* Fully inline (was a centered icon/heading/trigger that opened a side
   panel) — textarea + submit button sit directly in the card, matching the
   mockup. Top-aligned/stretched, not centered, now that it holds a form. */
.home-feedback-body[b-9qrq7oltca] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.home-feedback-prompt[b-9qrq7oltca] {
    font-size: var(--type-meta-size, 12px);
    color: var(--bec-slate, #5A6168);
    margin: 0;
    line-height: 1.5;
}

.home-feedback-textarea[b-9qrq7oltca] {
    flex: 1;
    min-height: 80px;
    resize: none;
    font: var(--type-body-size, 13px)/1.5 var(--font-family-base, inherit);
    color: var(--bec-ink, #24272A);
    background: var(--bec-bg-alt, #F6F8FC);
    border: 1px solid var(--bec-border, #E4E8EF);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-2, 10px);
    width: 100%;
    box-sizing: border-box;
}

.home-feedback-textarea:focus[b-9qrq7oltca] {
    outline: none;
    border-color: var(--bec-indigo-400, #6F7FAF);
    background: var(--bec-surface, #fff);
}

[b-9qrq7oltca] .home-feedback-submit {
    width: 100%;
    flex-shrink: 0;
}

.home-feedback-again[b-9qrq7oltca] {
    border: 0;
    background: none;
    color: var(--bec-navy-700, #2B3484);
    font: 600 var(--type-meta-size, 12px)/1.4 var(--font-family-base, inherit);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

/* Form panel content (authored here so it keeps this page's own CSS scope —
   same reasoning as the FilterBar/ChildContent slots passed into BecListPanel). */
.form-row[b-9qrq7oltca] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-row label[b-9qrq7oltca] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.form-row textarea[b-9qrq7oltca] {
    font-size: 14px;
    font-family: inherit;
    color: var(--BEC-Text-Primary, #323130);
    background: var(--BEC-Surface-Base, #fff);
    border: 1px solid var(--BEC-Border-Strong, #c8c6c4);
    border-radius: var(--BEC-borderRadiusMedium, 6px);
    padding: 9px 10px;
    width: 100%;
    resize: vertical;
}

    .form-row textarea:focus[b-9qrq7oltca] { outline: none; border-color: var(--BEC-focusRing, #0078d4); }

.charcount[b-9qrq7oltca] {
    font-size: 11px;
    color: var(--BEC-Text-Secondary, #605e5c);
    text-align: end;
}

/* "Share" composer (BecFormPanel ChildContent) — pending attachments + attach
   trigger, authored here for the same CSS-scope reason as .form-row above. */
.hl-compose-media-list[b-9qrq7oltca] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.hl-compose-media-item[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: var(--BEC-borderRadiusMedium, 6px);
    background: var(--BEC-Surface-Alt, #faf9f8);
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.hl-compose-media-item__name[b-9qrq7oltca] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hl-compose-media-item__remove[b-9qrq7oltca] {
    border: 0;
    background: transparent;
    color: var(--BEC-Text-Secondary, #605e5c);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.hl-compose-media-item__remove:hover[b-9qrq7oltca] {
    color: var(--BEC-Error-Main, #d13438);
}

.hl-compose-attach-row[b-9qrq7oltca] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.hl-compose-attach-btn[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    cursor: pointer;
    transition: background 0.15s ease;
}

.hl-compose-attach-btn:hover[b-9qrq7oltca] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.hl-compose-upload-status[b-9qrq7oltca] {
    font-size: 11.5px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.home-feedback-success[b-9qrq7oltca] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 12px;
}

    .home-feedback-success i[b-9qrq7oltca] { font-size: 28px; color: var(--bec-success, #2E8B57); }
    .home-feedback-success p[b-9qrq7oltca] { font-size: 13px; color: var(--bec-slate, #5A6168); margin: 0; }

.home-feedback-error[b-9qrq7oltca] {
    background: var(--bec-danger-bg, #FBEAE8); color: var(--bec-danger, #C0392B);
    font-size: 11px; padding: 6px 10px;
    border-radius: var(--radius-sm, 5px); border: 1px solid var(--bec-danger, #C0392B);
}


/* ── Highlight detail: who liked / who commented ───────────────────────── */
/* Two stacked blocks under the post's media in the detail panel. Sits inside
   the panel's scrolling body, so neither list needs its own scroll box —
   nesting one inside the other is what makes a panel feel unnavigable. */
.hl-engagement[b-9qrq7oltca] {
    margin-top: var(--space-4, 16px);
    padding-top: var(--space-4, 16px);
    border-top: 1px solid var(--bec-border-soft, #EEF1F5);
}

.hl-engagement__title[b-9qrq7oltca] {
    margin: 0 0 10px;
    font-size: var(--type-h3-size, 13px);
    font-weight: 600;
    color: var(--bec-ink, #24272A);
}

/* Reactors wrap as chips rather than stacking as rows: a name and a face is
   all there is to say per person, and 30 likes would otherwise be 30 rows
   between the post and its comments. */
.hl-engagement__people[b-9qrq7oltca] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.hl-engagement__person[b-9qrq7oltca] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 3px;
    border-radius: var(--radius-pill, 999px);
    background: var(--bec-bg-alt, #F6F8FC);
    max-width: 100%;
}

.hl-engagement__person-name[b-9qrq7oltca] {
    font-size: var(--type-caption-size, 12px);
    color: var(--bec-slate, #5A6168);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.hl-engagement__comment[b-9qrq7oltca] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
}

.hl-engagement__comment + .hl-engagement__comment[b-9qrq7oltca] {
    border-top: 1px solid var(--bec-border-soft, #EEF1F5);
}

.hl-engagement__comment-body[b-9qrq7oltca] { flex: 1; min-width: 0; }

.hl-engagement__comment-top[b-9qrq7oltca] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.hl-engagement__comment-author[b-9qrq7oltca] {
    font-size: var(--type-meta-size, 12.5px);
    font-weight: 600;
    color: var(--bec-ink, #24272A);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hl-engagement__comment-date[b-9qrq7oltca] {
    margin-inline-start: auto;
    flex: none;
    font-size: var(--type-caption-size, 11px);
    color: var(--bec-gray, #7A828C);
}

/* Comments wrap freely — unlike the feed row, this is where the full text is
   supposed to be readable, so nothing is clamped here. */
.hl-engagement__comment-text[b-9qrq7oltca] {
    margin: 2px 0 0;
    font-size: var(--type-meta-size, 12.5px);
    line-height: 1.5;
    color: var(--bec-slate, #5A6168);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.hl-engagement__loading[b-9qrq7oltca],
.hl-engagement__empty[b-9qrq7oltca] {
    margin-top: var(--space-4, 16px);
    padding-top: var(--space-4, 16px);
    border-top: 1px solid var(--bec-border-soft, #EEF1F5);
    font-size: var(--type-meta-size, 12.5px);
    color: var(--bec-gray, #7A828C);
}
/* ── Carousel swipe (see initSwipe in wwwroot/js/intranet-mainpage.js) ────── */

/* pan-y tells the browser this element handles horizontal gestures itself while
   vertical ones still scroll the page. Without it a horizontal drag that starts
   on an <img> is claimed by the UA as an image drag / overscroll gesture and
   touchend never reports the travel.

   user-select/-webkit-touch-callout: a slow horizontal drag over a photo
   otherwise starts a text selection or pops iOS's "Save Image" sheet mid-swipe. */
[data-swipe][b-9qrq7oltca] {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
/* /Components/Pages/MainLayout/Intranet/Intranet-NewsViewAll/Intranet-NewsViewAll.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   News View All — Scoped CSS
   Route: /mainlayout/Intranet/News
   ═══════════════════════════════════════════════════════ */

/* ─── Page Container ─── */
.news-viewall-page[b-lp0k9uf4fp] {
    padding: 0 0 48px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ─── Header ─── */
.nvall-header[b-lp0k9uf4fp] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 32px 16px;
    border-bottom: 1px solid var(--BEC-layoutGray100, #f0f2f5);
    margin-bottom: 0;
    background: var(--BEC-white, #fff);
    position: sticky;
    top: 0;
    z-index: 10;
}

.nvall-back-btn[b-lp0k9uf4fp] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--BEC-layoutGray200, #e2e6ea);
    border-radius: 8px;
    padding: 7px 14px;
    color: var(--BEC-layoutGray600, #5a6780);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.nvall-back-btn:hover[b-lp0k9uf4fp] {
    background: var(--BEC-layoutGray50, #f8f9fb);
    border-color: var(--BEC-layoutGray300, #cbd2dc);
    color: var(--BEC-layoutGray800, #2d3748);
}

.nvall-title-block[b-lp0k9uf4fp] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nvall-title-icon[b-lp0k9uf4fp] {
    color: var(--BEC-primary, #003087);
    flex-shrink: 0;
}

.nvall-title[b-lp0k9uf4fp] {
    font-size: 18px;
    font-weight: 700;
    color: var(--BEC-layoutGray800, #1a202c);
    margin: 0;
    line-height: 1.2;
}

.nvall-subtitle[b-lp0k9uf4fp] {
    font-size: 12px;
    color: var(--BEC-layoutGray500, #718096);
    display: block;
    margin-top: 1px;
}

/* ─── News List ─── */
.nvall-list[b-lp0k9uf4fp] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ─── News Item ─── */
.nvall-item[b-lp0k9uf4fp] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 20px 32px;
    border-bottom: 1px solid var(--BEC-layoutGray100, #f0f2f5);
    background: var(--BEC-white, #fff);
    transition: background 0.12s;
}

.nvall-item:hover[b-lp0k9uf4fp] {
    background: var(--BEC-layoutGray50, #f8f9fb);
}

.nvall-item--expanded[b-lp0k9uf4fp] {
    background: var(--BEC-layoutGray50, #f8f9fb);
}

/* ─── Thumbnail ─── */
.nvall-item__thumb[b-lp0k9uf4fp] {
    width: 120px;
    height: 90px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 20px;
    background: var(--BEC-layoutGray100, #f0f2f5);
}

.nvall-item__thumb img[b-lp0k9uf4fp] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nvall-item__thumb--placeholder[b-lp0k9uf4fp] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--BEC-layoutGray400, #a0aec0);
}

.nvall-item__thumb--clickable[b-lp0k9uf4fp] {
    cursor: pointer;
}
.nvall-item__thumb--clickable:hover img[b-lp0k9uf4fp] {
    opacity: 0.92;
}

.nvall-item__title--clickable[b-lp0k9uf4fp] {
    cursor: pointer;
}
.nvall-item__title--clickable:hover[b-lp0k9uf4fp] {
    color: var(--BEC-primary, #003087);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ─── Body ─── */
.nvall-item__body[b-lp0k9uf4fp] {
    flex: 1;
    min-width: 0;
}

.nvall-item__meta-row[b-lp0k9uf4fp] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.nvall-badge[b-lp0k9uf4fp] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(0, 48, 135, 0.08);
    color: var(--BEC-primary, #003087);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.nvall-date[b-lp0k9uf4fp] {
    font-size: 12px;
    color: var(--BEC-layoutGray500, #718096);
}

.nvall-author[b-lp0k9uf4fp] {
    font-size: 12px;
    color: var(--BEC-layoutGray400, #a0aec0);
}

.nvall-item__title[b-lp0k9uf4fp] {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-layoutGray800, #1a202c);
    margin: 0 0 6px;
    line-height: 1.4;
    white-space: normal;
}

.nvall-item__summary[b-lp0k9uf4fp] {
    font-size: 13px;
    color: var(--BEC-layoutGray600, #4a5568);
    margin: 0 0 12px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Chevron ─── */
.nvall-chevron[b-lp0k9uf4fp] {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    color: currentColor;
    transition: transform 0.2s ease;
}
.nvall-chevron--open[b-lp0k9uf4fp] {
    transform: rotate(180deg);
}

/* ─── Split like pill ─── */
.nvall-engage-split[b-lp0k9uf4fp] {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    background: #f9fafb;
    transition: border-color 0.15s;
}
.nvall-engage-split:hover[b-lp0k9uf4fp] { border-color: #c7d2fe; }
.nvall-engage-split--active[b-lp0k9uf4fp] { border-color: #a5b4fc; background: #eef2ff; }

.nvall-engage-split__like[b-lp0k9uf4fp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.4rem 0.25rem 0.55rem;
    border: none;
    border-right: 1px solid #e5e7eb;
    background: transparent;
    cursor: pointer;
    color: #6b7280;
    transition: background 0.15s, color 0.15s;
}
.nvall-engage-split__like:hover[b-lp0k9uf4fp] { background: #eef2ff; color: #4f46e5; }
.nvall-engage-split--active .nvall-engage-split__like[b-lp0k9uf4fp] { color: #4f46e5; }
.nvall-engage-split--active .nvall-engage-split__like svg[b-lp0k9uf4fp] { fill: #4f46e5; }

.nvall-engage-split__count[b-lp0k9uf4fp] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.25rem 0.5rem 0.25rem 0.4rem;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.nvall-engage-split__count:hover[b-lp0k9uf4fp] { background: #eef2ff; color: #4f46e5; }
.nvall-engage-split__count--open[b-lp0k9uf4fp] { color: #4f46e5; }

.nvall-engage-split__count--zero[b-lp0k9uf4fp] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem 0.25rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #9ca3af;
    line-height: 1;
    cursor: default;
}

/* ─── Engagement Row ─── */
.nvall-engagement[b-lp0k9uf4fp] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.nvall-engage-btn[b-lp0k9uf4fp] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #6b7280;
    font-size: 0.6875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
}

.nvall-engage-btn:hover[b-lp0k9uf4fp] {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4f46e5;
}

.nvall-engage-btn--active[b-lp0k9uf4fp] {
    background: #eef2ff;
    border-color: #a5b4fc;
    color: #4f46e5;
}

.nvall-engage-btn--active svg[b-lp0k9uf4fp] { fill: #4f46e5; }

.nvall-engage-btn--active:hover[b-lp0k9uf4fp] {
    background: #e0e7ff;
}

/* ─── Who Liked ─── */
.nvall-who-liked-btn[b-lp0k9uf4fp] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.4rem;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s, background 0.15s;
    border-radius: 4px;
}

.nvall-who-liked-btn:hover[b-lp0k9uf4fp],
.nvall-who-liked-btn--active[b-lp0k9uf4fp] {
    color: #4f46e5;
    background: #f5f3ff;
    text-decoration: none;
}

.nvall-who-liked[b-lp0k9uf4fp] {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f5f3ff;
    border: 1px solid #e0e7ff;
    animation: fadeInDown-b-lp0k9uf4fp 0.15s ease;
}

.nvall-who-liked[b-lp0k9uf4fp]::before {
    content: "Liked by";
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7c3aed;
    margin-bottom: 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid #ddd6fe;
}

@keyframes fadeInDown-b-lp0k9uf4fp {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nvall-who-liked__loading[b-lp0k9uf4fp] {
    display: flex;
    justify-content: center;
    padding: 8px;
}

.nvall-who-liked__empty[b-lp0k9uf4fp] {
    font-size: 12px;
    color: var(--BEC-layoutGray400, #a0aec0);
    text-align: center;
    padding: 4px 0;
    margin: 0;
}

.nvall-who-liked__list[b-lp0k9uf4fp] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 200px;
    overflow-y: auto;
}

.nvall-who-liked__item[b-lp0k9uf4fp] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nvall-who-liked__avatar[b-lp0k9uf4fp] {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
}

.nvall-who-liked__avatar--img[b-lp0k9uf4fp] {
    background: transparent;
}

img.nvall-who-liked__avatar--img[b-lp0k9uf4fp] {
    width: 26px;
    height: 26px;
    object-fit: cover;
    border-radius: 50%;
}

.nvall-who-liked__name[b-lp0k9uf4fp] {
    font-size: 12px;
    font-weight: 500;
    color: var(--BEC-layoutGray700, #2d3748);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Comments Panel ─── */
.nvall-comments[b-lp0k9uf4fp] {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f9fafb;
    border: 1px solid #f0f2f5;
}

.nvall-comments[b-lp0k9uf4fp]::before {
    content: "Comments";
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid #e5e7eb;
}

.nvall-comments__loading[b-lp0k9uf4fp] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-layoutGray500, #718096);
    padding: 8px 0;
}

.nvall-comments__empty[b-lp0k9uf4fp] {
    font-size: 13px;
    color: var(--BEC-layoutGray400, #a0aec0);
    padding: 4px 0 10px;
    margin: 0;
}

.nvall-comments__list[b-lp0k9uf4fp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

/* ─── Single Comment ─── */
.nvall-comment[b-lp0k9uf4fp] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.nvall-comment__avatar[b-lp0k9uf4fp] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.nvall-comment__avatar--img[b-lp0k9uf4fp] {
    object-fit: cover;
    display: block;
}

.nvall-comment__content[b-lp0k9uf4fp] {
    flex: 1;
    background: var(--BEC-white, #fff);
    border: 1px solid var(--BEC-layoutGray100, #f0f2f5);
    border-radius: 10px;
    padding: 8px 12px;
}

.nvall-comment__header[b-lp0k9uf4fp] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.nvall-comment__name[b-lp0k9uf4fp] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-layoutGray700, #2d3748);
}

.nvall-comment__time[b-lp0k9uf4fp] {
    font-size: 11px;
    color: var(--BEC-layoutGray400, #a0aec0);
}

.nvall-comment__delete[b-lp0k9uf4fp] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--BEC-layoutGray400, #a0aec0);
    padding: 2px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: color 0.12s, background 0.12s;
}

.nvall-comment__delete:hover[b-lp0k9uf4fp] {
    color: #e53e3e;
    background: rgba(229, 62, 62, 0.08);
}

.nvall-comment__text[b-lp0k9uf4fp] {
    font-size: 13px;
    color: var(--BEC-layoutGray700, #2d3748);
    margin: 0;
    line-height: 1.5;
    white-space: pre-wrap;
}

.nvall-load-more[b-lp0k9uf4fp] {
    background: none;
    border: none;
    color: var(--BEC-primary, #003087);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 10px;
    text-decoration: underline;
}

.nvall-load-more:hover[b-lp0k9uf4fp] {
    color: var(--BEC-primaryDark, #00246a);
}

/* ─── Add Comment Input ─── */
.nvall-add-comment[b-lp0k9uf4fp] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.nvall-add-comment__avatar[b-lp0k9uf4fp] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.nvall-add-comment__input-wrap[b-lp0k9uf4fp] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--BEC-layoutGray200, #e2e6ea);
    border-radius: 24px;
    padding: 5px 6px 5px 14px;
    background: var(--BEC-white, #fff);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.nvall-add-comment__input-wrap:focus-within[b-lp0k9uf4fp] {
    border-color: #a5b4fc;
    background: #fff;
    box-shadow: none;
}

.nvall-add-comment__input[b-lp0k9uf4fp] {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 13px;
    color: var(--BEC-layoutGray800, #1a202c);
    min-width: 0;
}

.nvall-add-comment__input[b-lp0k9uf4fp]::placeholder {
    color: var(--BEC-layoutGray400, #a0aec0);
}

.nvall-add-comment__avatar[b-lp0k9uf4fp] {
    min-width: 28px;
    min-height: 28px;
    overflow: hidden;
}

img.nvall-add-comment__avatar--img[b-lp0k9uf4fp] {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 50%;
}

.nvall-add-comment__send[b-lp0k9uf4fp] {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    border: none;
    background: #4f46e5;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.15s;
}

.nvall-add-comment__send:hover:not(:disabled)[b-lp0k9uf4fp] {
    background: #4338ca;
}

.nvall-add-comment__send:disabled[b-lp0k9uf4fp] {
    background: #d1d5db;
    cursor: not-allowed;
}

.nvall-add-comment__send.loading[b-lp0k9uf4fp] {
    background: #e0e7ff;
}

/* ─── Load More Pages ─── */
.nvall-load-more-wrap[b-lp0k9uf4fp] {
    display: flex;
    justify-content: center;
    padding: 24px 32px;
}

.nvall-load-more-btn[b-lp0k9uf4fp] {
    padding: 9px 28px;
    border-radius: 24px;
    border: 1.5px solid var(--BEC-primary, #003087);
    background: transparent;
    color: var(--BEC-primary, #003087);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.nvall-load-more-btn:hover[b-lp0k9uf4fp] {
    background: var(--BEC-primary, #003087);
    color: #fff;
}

/* ─── Empty / Error State ─── */
.nvall-empty[b-lp0k9uf4fp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 60px 32px;
    color: var(--BEC-layoutGray400, #a0aec0);
    text-align: center;
}

.nvall-empty p[b-lp0k9uf4fp] {
    margin: 0;
    font-size: 14px;
    color: var(--BEC-layoutGray500, #718096);
}

.nvall-retry-btn[b-lp0k9uf4fp] {
    padding: 8px 22px;
    border-radius: 8px;
    border: 1px solid var(--BEC-layoutGray200, #e2e6ea);
    background: var(--BEC-white, #fff);
    font-size: 13px;
    cursor: pointer;
    color: var(--BEC-layoutGray700, #2d3748);
    transition: background 0.15s;
}

.nvall-retry-btn:hover[b-lp0k9uf4fp] {
    background: var(--BEC-layoutGray50, #f8f9fb);
}

/* ─── Skeleton Loading ─── */
.nvall-item--skeleton[b-lp0k9uf4fp] {
    pointer-events: none;
}

.skeleton-box[b-lp0k9uf4fp] {
    background: linear-gradient(90deg, #f0f2f5 25%, #e2e6ea 50%, #f0f2f5 75%);
    background-size: 200% 100%;
    animation: shimmer-b-lp0k9uf4fp 1.4s infinite;
    border-radius: 10px;
}

.skeleton-line[b-lp0k9uf4fp] {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0f2f5 25%, #e2e6ea 50%, #f0f2f5 75%);
    background-size: 200% 100%;
    animation: shimmer-b-lp0k9uf4fp 1.4s infinite;
    margin-bottom: 8px;
}

.skeleton-line--short[b-lp0k9uf4fp] {
    width: 80px;
    height: 20px;
    border-radius: 20px;
}

.skeleton-line--title[b-lp0k9uf4fp] {
    width: 65%;
    height: 16px;
}

.skeleton-line--half[b-lp0k9uf4fp] {
    width: 40%;
}

@keyframes shimmer-b-lp0k9uf4fp {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── Spinner ─── */
.spinner[b-lp0k9uf4fp] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--BEC-layoutGray200, #e2e6ea);
    border-top-color: var(--BEC-primary, #003087);
    border-radius: 50%;
    animation: spin-b-lp0k9uf4fp 0.7s linear infinite;
}

.spinner--sm[b-lp0k9uf4fp] {
    width: 12px;
    height: 12px;
    border-width: 1.5px;
}

@keyframes spin-b-lp0k9uf4fp {
    to { transform: rotate(360deg); }
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .nvall-header[b-lp0k9uf4fp] {
        padding: 14px 16px 12px;
        flex-wrap: wrap;
    }

    .nvall-item[b-lp0k9uf4fp] {
        padding: 16px;
        flex-direction: column;
    }

    .nvall-item__thumb[b-lp0k9uf4fp] {
        width: 100%;
        height: 160px;
        margin-right: 0;
        margin-bottom: 14px;
    }
}
/* /Components/Pages/MainLayout/Intranet/IntranetAdministration.razor.rz.scp.css */
/* ========================================
   INTRANET ADMINISTRATION — v2 REDESIGN
   Dense, muted, full-width, content-first
   ======================================== */

/* ── LOADING OVERLAY ── */
.intranet-admin-loading-overlay[b-d2tntwujpj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn-b-d2tntwujpj 0.2s ease-in;
}

@keyframes fadeIn-b-d2tntwujpj {
    from { opacity: 0; }
    to { opacity: 1; }
}

.intranet-admin-loading-content[b-d2tntwujpj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.intranet-admin-spinner[b-d2tntwujpj] {
    position: relative;
    width: 48px;
    height: 48px;
}

.spinner-ring[b-d2tntwujpj] {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top-color: var(--BEC-colorBrandBackground, #0078D4);
    border-radius: 50%;
    animation: spin-b-d2tntwujpj 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spinner-ring:nth-child(1)[b-d2tntwujpj] { animation-delay: -0.45s; }
.spinner-ring:nth-child(2)[b-d2tntwujpj] { animation-delay: -0.3s; border-top-color: var(--BEC-colorBrandBackgroundHover, #106EBE); }
.spinner-ring:nth-child(3)[b-d2tntwujpj] { animation-delay: -0.15s; border-top-color: var(--BEC-colorBrandForeground1, #005A9E); }
.spinner-ring:nth-child(4)[b-d2tntwujpj] { border-top-color: var(--BEC-colorBrandBackground, #0078D4); opacity: 0.6; }

@keyframes spin-b-d2tntwujpj {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.intranet-admin-loading-text[b-d2tntwujpj] {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #323130);
    margin: 0;
}

.intranet-admin-loading-subtext[b-d2tntwujpj] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3, #605e5c);
    margin: 0;
}

.content-loading[b-d2tntwujpj] {
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* ── MAIN CONTENT SHELL ── */
.intranet-admin-content[b-d2tntwujpj] {
    flex: 1;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    list-style: none;
}

.intranet-admin-content[b-d2tntwujpj]::before,
.intranet-admin-content[b-d2tntwujpj]::after {
    display: none !important;
    content: none !important;
}

/* ── PAGE HEADER — compact inline ── */
.page-head[b-d2tntwujpj] {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    gap: 16px;
    flex-shrink: 0;
}

.page-head .title-block[b-d2tntwujpj] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.page-head-title[b-d2tntwujpj] {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap;
}

.page-head-sub[b-d2tntwujpj] {
    font-size: 11px !important;
    color: var(--BEC-colorNeutralForeground3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* ── TABS — dense underline with icons ── */
.tabs-container[b-d2tntwujpj] {
    display: flex;
    align-items: stretch;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 0 16px;
    gap: 0;
    flex-shrink: 0;
    margin: 0;
    list-style: none;
    min-height: 0;
}

.tabs-container[b-d2tntwujpj]::before,
.tabs-container[b-d2tntwujpj]::after {
    display: none !important;
    content: none !important;
}

.tabs-wrapper[b-d2tntwujpj] {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.tab-button[b-d2tntwujpj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    font-size: 12px !important;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1;
}

.tab-button i[b-d2tntwujpj] {
    font-size: 11px;
    transition: color 0.15s ease;
}

.tab-button:hover[b-d2tntwujpj] {
    color: var(--BEC-colorNeutralForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
}

.tab-button:hover i[b-d2tntwujpj] {
    color: var(--BEC-colorNeutralForeground1);
}

.tab-button.active[b-d2tntwujpj] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
    border-bottom-color: var(--BEC-colorBrandForeground1);
}

.tab-button.active i[b-d2tntwujpj] {
    color: var(--BEC-colorBrandForeground1);
}

.tab-button:active[b-d2tntwujpj] {
    transform: scale(0.98);
}

.tab-button:disabled[b-d2tntwujpj] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── TAB CONTENT ── */
.tab-content[b-d2tntwujpj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}


/* /Components/Pages/MainLayout/Intranet/LinksAdministration/LinksAdministration.razor.rz.scp.css */
/* ── Loading ─────────────────────────────────────────────────────── */
.la-loading[b-77gcnig04y] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 40px;
    color: var(--text-muted, #888);
    font-size: 14px;
}
.la-spinner[b-77gcnig04y] {
    width: 20px; height: 20px;
    border: 2px solid #e2e8f0;
    border-top-color: var(--primary, #1d4ed8);
    border-radius: 50%;
    animation: la-spin-b-77gcnig04y .7s linear infinite;
}
@keyframes la-spin-b-77gcnig04y { to { transform: rotate(360deg); } }

/* ── Section ─────────────────────────────────────────────────────── */
.la-section[b-77gcnig04y] {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}
.la-section-header[b-77gcnig04y] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.la-section-header .la-btn[b-77gcnig04y] { margin-left: auto; flex-shrink: 0; }
.la-section-icon[b-77gcnig04y] {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.la-section-icon--policies[b-77gcnig04y]  { background: #eff6ff; color: #2563eb; }
.la-section-icon--resources[b-77gcnig04y] { background: #f0fdf4; color: #16a34a; }
.la-section-header-text[b-77gcnig04y] { flex: 1; min-width: 0; }
.la-section-title[b-77gcnig04y] { font-size: 15px; font-weight: 600; color: var(--text-primary, #1e293b); }
.la-section-sub[b-77gcnig04y]   { font-size: 12px; color: var(--text-muted, #64748b); margin-top: 2px; }

/* ── Feedback messages ───────────────────────────────────────────── */
.la-msg[b-77gcnig04y] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 14px;
}
.la-msg--success[b-77gcnig04y] { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.la-msg--error[b-77gcnig04y]   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

/* ── Inline form ─────────────────────────────────────────────────── */
.la-inline-form[b-77gcnig04y] {
    background: var(--surface-alt, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 14px;
}
.la-inline-form-fields[b-77gcnig04y] {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.la-inline-form-actions[b-77gcnig04y] { display: flex; gap: 8px; margin-top: 12px; }

.la-form-group[b-77gcnig04y]         { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
.la-form-group--url[b-77gcnig04y]    { flex: 2; min-width: 200px; }
.la-form-group--narrow[b-77gcnig04y] { flex: 0 0 auto; }
.la-form-group label[b-77gcnig04y]   { font-size: 12px; font-weight: 500; color: var(--text-muted, #64748b); }
.la-req[b-77gcnig04y] { color: #ef4444; }

.la-input[b-77gcnig04y] {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-primary, #1e293b);
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .15s;
}
.la-input:focus[b-77gcnig04y] { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.08); }

/* ── Toggle ──────────────────────────────────────────────────────── */
.la-toggle-wrap[b-77gcnig04y] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin-top: 4px;
}
.la-toggle-wrap input[type="checkbox"][b-77gcnig04y] { display: none; }
.la-toggle[b-77gcnig04y] {
    width: 34px; height: 18px;
    background: #cbd5e1;
    border-radius: 9px;
    position: relative;
    transition: background .2s;
    flex-shrink: 0;
}
.la-toggle[b-77gcnig04y]::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    background: #fff;
    border-radius: 50%;
    top: 2px; left: 2px;
    transition: transform .2s;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.la-toggle-wrap input:checked ~ .la-toggle[b-77gcnig04y] { background: #2563eb; }
.la-toggle-wrap input:checked ~ .la-toggle[b-77gcnig04y]::after { transform: translateX(16px); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.la-btn[b-77gcnig04y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.la-btn:disabled[b-77gcnig04y] { opacity: .5; cursor: not-allowed; }
.la-btn--primary[b-77gcnig04y] { background: #2563eb; color: #fff; }
.la-btn--primary:not(:disabled):hover[b-77gcnig04y] { background: #1d4ed8; }
.la-btn--ghost[b-77gcnig04y]   { background: transparent; color: var(--text-muted, #64748b); border: 1px solid var(--border-color, #d1d5db); }
.la-btn--ghost:not(:disabled):hover[b-77gcnig04y] { background: var(--surface-alt, #f8fafc); }
.la-btn--sm[b-77gcnig04y] { padding: 5px 10px; font-size: 12px; }

.la-icon-btn[b-77gcnig04y] {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 6px;
    background: transparent;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: all .15s;
    font-size: 13px;
}
.la-icon-btn:hover[b-77gcnig04y]          { background: var(--surface-alt, #f1f5f9); color: #2563eb; }
.la-icon-btn--danger:hover[b-77gcnig04y]  { background: #fee2e2; color: #dc2626; }

/* ── Empty ───────────────────────────────────────────────────────── */
.la-empty[b-77gcnig04y] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    color: var(--text-muted, #94a3b8);
    font-size: 13px;
    background: var(--surface-alt, #f8fafc);
    border-radius: 8px;
}

/* ── Policy list ─────────────────────────────────────────────────── */
.la-policy-list[b-77gcnig04y] { display: flex; flex-direction: column; gap: 2px; }

.la-policy-row[b-77gcnig04y] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background .15s;
}
.la-policy-row:hover[b-77gcnig04y] { background: var(--surface-alt, #f8fafc); }
.la-policy-row--editing[b-77gcnig04y] {
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}
.la-policy-row--editing .la-form-group[b-77gcnig04y] { flex: 1; min-width: 120px; }

.la-policy-dot[b-77gcnig04y] {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.la-policy-dot--on[b-77gcnig04y]  { background: #22c55e; }
.la-policy-dot--off[b-77gcnig04y] { background: #cbd5e1; }

.la-policy-label[b-77gcnig04y] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    flex: 0 0 200px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.la-policy-url[b-77gcnig04y] {
    flex: 1;
    font-size: 12px;
    color: #2563eb;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.la-policy-url:hover[b-77gcnig04y] { text-decoration: underline; }
.la-policy-url-icon[b-77gcnig04y]  { font-size: 10px; opacity: .6; flex-shrink: 0; }
.la-policy-actions[b-77gcnig04y]   { display: flex; gap: 2px; margin-left: auto; flex-shrink: 0; }

/* ── Resource grid ───────────────────────────────────────────────── */
.la-resource-grid[b-77gcnig04y] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.la-resource-card[b-77gcnig04y] {
    position: relative;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f4c75 100%);
    border-radius: 10px;
    padding: 16px;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}
.la-resource-card:not(.la-resource-card--editing):not(.la-resource-card--empty):hover[b-77gcnig04y] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.la-resource-card--inactive[b-77gcnig04y] { opacity: .65; }
.la-resource-card--empty[b-77gcnig04y] {
    background: var(--surface-alt, #f8fafc);
    border: 2px dashed var(--border-color, #e2e8f0);
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 90px;
}
.la-resource-card--editing[b-77gcnig04y] {
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
}

.la-resource-card-inner[b-77gcnig04y] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.la-resource-card-icon[b-77gcnig04y] {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
}
.la-resource-card-body[b-77gcnig04y]  { flex: 1; min-width: 0; }
.la-resource-card-title[b-77gcnig04y] {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}
.la-resource-card-url[b-77gcnig04y] {
    font-size: 10px;
    color: rgba(255,255,255,.5);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.la-resource-card-actions[b-77gcnig04y] {
    position: absolute;
    top: 10px; right: 10px;
    display: flex;
    gap: 6px;
}
.la-resource-edit-btn[b-77gcnig04y] {
    width: 28px; height: 28px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    transition: background .15s;
}
.la-resource-edit-btn:hover[b-77gcnig04y] { background: rgba(255,255,255,.3); }
.la-resource-edit-btn--danger:hover[b-77gcnig04y] { background: #dc2626; border-color: #dc2626; }

.la-resource-inactive-badge[b-77gcnig04y] {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 8px;
    background: rgba(255,255,255,.15);
    border-radius: 4px;
    font-size: 10px;
    color: rgba(255,255,255,.7);
}

.la-resource-empty-icon[b-77gcnig04y] { font-size: 20px; color: #cbd5e1; }
.la-resource-empty-text[b-77gcnig04y] { font-size: 12px; color: var(--text-muted, #94a3b8); font-weight: 500; }
.la-resource-empty-hint[b-77gcnig04y] { font-size: 10px; color: #c0c9d5; }

.la-resource-edit-body[b-77gcnig04y] { display: flex; flex-direction: column; gap: 10px; }
.la-resource-edit-body .la-form-group label[b-77gcnig04y] { color: var(--text-muted, #64748b); }
.la-resource-edit-actions[b-77gcnig04y] { display: flex; gap: 8px; margin-top: 10px; }

/* ── Tile image: read-only card thumbnail ────────────────────────── */
/* Same 32px slot the icon swatch occupies, so a card with artwork and a card
   without stay the same shape in the grid. */
.la-resource-card-thumb[b-77gcnig04y] {
    width: 32px; height: 32px;
    border-radius: 8px;
    background-color: rgba(255,255,255,.15);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

/* ── Tile image: edit-form preview ───────────────────────────────── */
/* Mirrors BecResourceTile on the homepage — 76px row, artwork bleeding 52%
   in from the trailing edge under a transparent->opaque mask, title on top.
   Values are duplicated from BecResourceTile.razor.css rather than shared:
   CSS isolation cannot reach across the component boundary, and this is a
   preview of that component, so it has to restate the treatment. Keep the
   two in step if the tile geometry changes. */
.la-res-img-preview[b-77gcnig04y] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    height: 76px;
    padding-inline: 16px;
    border-radius: 12px;
    overflow: hidden;
    background: #EAEBF3;
    color: #1F2566;
}

.la-res-img-preview--empty[b-77gcnig04y] {
    border: 1px dashed var(--border-color, #d1d5db);
    background: var(--surface-alt, #f8fafc);
}

.la-res-img-preview__bleed[b-77gcnig04y] {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 52%;
    background-size: cover;
    background-position: center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 42%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 42%, #000 100%);
}

.la-res-img-preview__title[b-77gcnig04y] {
    position: relative;
    z-index: 1;
    max-width: 62%;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.la-res-img-preview__hint[b-77gcnig04y] {
    position: relative;
    z-index: 1;
    font-size: 11px;
    color: var(--text-muted, #64748b);
}

.la-res-img-actions[b-77gcnig04y] { display: flex; gap: 8px; margin-top: 8px; }

/* The <label> IS the button — the real <InputFile> sits inside it and is
   visually removed, so clicking anywhere on the button opens the picker
   without any JS click-forwarding. */
.la-res-img-upload[b-77gcnig04y] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.la-res-img-upload input[type="file"][b-77gcnig04y] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.la-field-hint[b-77gcnig04y] {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted, #64748b);
}

/* ── Language versions ───────────────────────────────────────────────── */
/* Counterpart to .la-req: marks a field as safe to leave blank, so "Arabic
   URL" does not read as something the admin forgot to fill in. */
.la-optional[b-77gcnig04y] {
    margin-inline-start: 4px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #94a3b8);
}

/* Same sage chip the homepage tile uses (.bec-res-tile__lang), so "this item
   has two versions" reads identically in the admin list and on the page. */
.la-lang-chip[b-77gcnig04y] {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #596D6D;
    background: #D9E1E1;
    vertical-align: middle;
}

/* On the dark resource card the sage chip has too little contrast — same
   shape, on-navy colours. */
.la-resource-card-title .la-lang-chip[b-77gcnig04y] {
    color: #fff;
    background: rgba(255, 255, 255, 0.22);
}

.la-res-img-preview__lang[b-77gcnig04y] {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #596D6D;
    background: #D9E1E1;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .la-resource-grid[b-77gcnig04y]       { grid-template-columns: 1fr; }
    .la-policy-label[b-77gcnig04y]        { flex: 0 0 130px; }
    .la-inline-form-fields[b-77gcnig04y]  { flex-direction: column; }
}

/* ── Add / placeholder resource slots ──────────────────────────────────────
   The empty slot used to be inert with the hint "Add data via SQL seed". There
   is now exactly one live add slot (always immediately after the last card, so a
   new item lands at the end of the homepage list rather than in a gap), and any
   further empties are inert padding that keeps the 3x2 grid shape.

   Two add affordances would raise the question of which slot you are adding to,
   when the answer is simply "next" — hence one live, the rest quiet. */

.la-resource-card--add[b-77gcnig04y] {
    display: flex;
    flex-direction: column;
    width: 100%;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.la-resource-card--add:hover[b-77gcnig04y],
.la-resource-card--add:focus-visible[b-77gcnig04y] {
    border-color: var(--primary, #1e3c72);
    background: var(--surface, #fff);
    color: var(--primary, #1e3c72);
}

.la-resource-card--add:focus-visible[b-77gcnig04y] {
    outline: 2px solid var(--primary, #1e3c72);
    outline-offset: 2px;
}

.la-resource-card--add:hover .la-resource-empty-icon[b-77gcnig04y],
.la-resource-card--add:focus-visible .la-resource-empty-icon[b-77gcnig04y] {
    color: var(--primary, #1e3c72);
}

/* Padding tiles — visibly quieter than the add slot so the one actionable
   affordance in the grid is unambiguous. */
.la-resource-card--placeholder[b-77gcnig04y] {
    opacity: 0.45;
    cursor: default;
}

.la-resource-card--placeholder .la-resource-empty-text[b-77gcnig04y] {
    font-size: 12px;
}
/* /Components/Pages/MainLayout/Intranet/NewsAdministration/NewsAdministration.razor.rz.scp.css */
/* ========================================
   NEWS ADMINISTRATION
   Following BranchAdministration CSS pattern 100%
   
   FEATURES:
   ✅ Sticky Page Header (stays at top)
   ✅ Sticky Action Toolbar (stays below header with 8px gap)
   ✅ Sticky Grid Headers (stays below toolbar)
   ✅ Minimal CSS - Structure Only
   ✅ Syncfusion handles component styling
   ✅ Smooth scroll behavior
   ✅ Professional shadows & elevation
   ✅ Compact 20% smaller design
   ✅ Clear visual distinction: Active buttons (bright) vs Disabled (dimmed gray)
   
   STICKY POSITIONING STRATEGY:
   📌 Page Header:    top: 0px,    z-index: 100
   📌 Action Toolbar: top: 58px,   z-index: 90  (with 8px margin-top for spacing)
   📌 Grid Headers:   top: 110px,  z-index: 80  (adjusted for compact toolbar)
   
   This creates a layered sticky effect where each
   element sticks below the previous one while scrolling.
   
   IMPORTANT: Container must NOT have overflow-y,
   let the browser's default scroll work for sticky!
   ======================================== */

/* Smooth scrolling for the entire page */
html[b-cecy957xxy] {
    scroll-behavior: smooth;
}

/* ========================================
   PAGE CONTAINER - Main Wrapper
   Let browser handle scrolling for sticky to work
   Pin to viewport height for pager bottom positioning
   ======================================== */
.erp-page-container[b-cecy957xxy] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* ========================================
   ACTION TOOLBAR - CLEAN UNDERLINE DESIGN
   STICKY: Stays below header while scrolling
   DESIGN: Simple underline hover with visible rounded edges
   ======================================== */

/* Toolbar Container - COMPACT INLINE */
[b-cecy957xxy] .e-toolbar.e-control {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: none !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 6px 16px !important;
    min-height: 32px !important;
    margin: 0 !important;
}

/* Toolbar Items - Reduced Spacing */
[b-cecy957xxy] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

/* Right-aligned items (Search) - Add spacing from right edge */
[b-cecy957xxy] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: var(--BEC-spacingHorizontalS) !important;
}

/* Toolbar button base styling - Clean & Uniform - 20% Smaller */
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 4px 10px !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 11px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 4px !important;
    min-height: 26px !important;
    box-shadow: none !important;
}

/* Button Icons - Uniform (Active buttons are bright) */
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
}

/* Button Text - Uniform (Active buttons are bright) */
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
}

/* ======= SIMPLE COLOR HOVER EFFECT - ALL BUTTONS ======= */
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons {
    color: var(--BEC-themePrimary) !important;
}

[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-themePrimary) !important;
}

/* ======= ACTIVE/PRESSED STATE ======= */
/* OPTION 5: Opacity Only (Simplest & Lightest) - ACTIVE */
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) {
    opacity: 0.7 !important;
    transition: opacity 0.1s ease !important;
}

[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-icons,
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-themeDark) !important;
}

/* ======= DANGER BUTTON (Delete) - Red Color Hover ======= */
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-icons,
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"] .e-tbar-btn-text {
    color: #dc2626 !important;
}

[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-icons,
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn[title*="Delete"]:hover:not(.e-disabled) .e-tbar-btn-text {
    color: #b91c1c !important;
}

/* ======= DISABLED BUTTON STATE - Simple and Clean ======= */
[b-cecy957xxy] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
}

[b-cecy957xxy] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
    cursor: not-allowed;
    background: var(--BEC-colorNeutralBackground3);
}

[b-cecy957xxy] .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn * {
    color: #aaaaaa;
}

/* ======= TOOLBAR SEPARATOR - Blue Accent (20% Smaller) ======= */
[b-cecy957xxy] .e-toolbar .e-separator {
    background: var(--BEC-themePrimary) !important;
    width: 1px !important;
    height: var(--BEC-spacingHorizontalL) !important;
    margin: 0 var(--BEC-spacingHorizontalXS) !important;
    border-radius: 0.5px !important;
    opacity: 0.6 !important;
}

/* ======= BUTTON FOCUS STATE - NO BORDER (User Preference) ======= */
[b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   PAGE CONTENT
   No overflow here - let page scroll naturally
   Grid auto-sizes based on content
   ======================================== */
.erp-page-content[b-cecy957xxy] {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.loading-overlay[b-cecy957xxy] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
}

.loading-spinner[b-cecy957xxy] {
    font-size: 32px;
    color: var(--BEC-themePrimary);
}

.loading-overlay p[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase400);
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
    margin: 0;
}

/* Error Dialog Message */
.modal-content .error-message[b-cecy957xxy] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
}

/* ========================================
   GRID CUSTOMIZATION
   STICKY HEADERS: Column headers stay below toolbar
   Natural page scrolling with paging enabled
   ======================================== */

/* NOTE: Column headers, rows, and pager styles are in a global <style>
   block in IntranetAdministration.razor using CssClass="intranet-admin-grid".
   Syncfusion grid internals have no Blazor scope attribute. */

/* Code Badge in Grid — Wireframe Matched */
.code-badge[b-cecy957xxy] {
    display: inline-block;
    padding: 1px 7px;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border: none;
}

/* Type Badges in Grid — Wireframe Matched */
.type-badge[b-cecy957xxy] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    border: none;
}

.type-branch[b-cecy957xxy] {
    background: #F0FFF0;
    color: #107C10;
}

.type-project[b-cecy957xxy] {
    background: #F0F6FC;
    color: #0F6CBD;
}

/* Status Badges in Grid — Wireframe Matched (dot + text) */
.status-badge[b-cecy957xxy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    font-size: 10px;
    font-weight: 600;
    background: none;
    border: none;
}

.status-badge i[b-cecy957xxy] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

.status-active[b-cecy957xxy] {
    color: #16a34a;
}

.status-active i[b-cecy957xxy] {
    background: #16a34a;
}

.status-inactive[b-cecy957xxy] {
    color: var(--BEC-colorNeutralForeground3);
}

.status-inactive i[b-cecy957xxy] {
    background: var(--BEC-colorNeutralForeground3);
}

/* Publish Status Badges in Grid — Wireframe Matched (pills with bg) */
.publish-badge[b-cecy957xxy] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    border: none;
}

.publish-published[b-cecy957xxy] {
    background: #F0FFF0;
    color: #16a34a;
}

.publish-draft[b-cecy957xxy] {
    background: #FFFBF0;
    color: #9A6700;
}

.publish-expired[b-cecy957xxy] {
    background: #FDE7E9;
    color: #dc2626;
}

/* ========================================
   GRID IMAGE THUMBNAIL
   ======================================== */
.grid-image-container[b-cecy957xxy] {
    width: 40px;
    height: 28px;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground3);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.grid-image-container img[b-cecy957xxy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.no-image-icon[b-cecy957xxy] {
    width: 36px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 3px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground3);
    font-size: 11px;
}

/* RTL Text Support */
.rtl-text[b-cecy957xxy] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

.rtl-input[b-cecy957xxy] {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

/* ========================================
   MODAL DIALOGS
   ======================================== */

/* Modal Overlay */
.modal-overlay[b-cecy957xxy] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-cecy957xxy 0.2s ease-out;
}

@keyframes fadeIn-b-cecy957xxy {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Container */
.modal-container[b-cecy957xxy] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: var(--BEC-shadow16);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-cecy957xxy 0.3s ease-out;
}

.modal-container.modal-sm[b-cecy957xxy] {
    max-width: 500px;
}

.modal-container.modal-lg[b-cecy957xxy] {
    max-width: 1000px;
}

@keyframes slideUp-b-cecy957xxy {
    from {
        opacity: 0;
        transform: translateY(var(--BEC-spacingHorizontalXL));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal Header */
.modal-header[b-cecy957xxy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXL) 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    background: linear-gradient(to bottom, var(--BEC-colorNeutralBackground1) 0%, #f9fafb 100%);
    border-radius: var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge) 0 0;
}

.modal-title[b-cecy957xxy] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalMNudge);
}

.modal-title i[b-cecy957xxy] {
    color: var(--BEC-themePrimary);
    font-size: var(--BEC-fontSizeBase500);
}

.modal-close[b-cecy957xxy] {
    background: transparent;
    border: none;
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: all 0.2s ease;
}

.modal-close:hover[b-cecy957xxy] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

/* Modal Content */
.modal-content[b-cecy957xxy] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Modal Footer */
.modal-footer[b-cecy957xxy] {
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL) 24px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: #f9fafb;
    border-radius: 0 0 var(--BEC-borderRadiusLarge) var(--BEC-borderRadiusLarge);
}

/* Buttons */
.btn[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    transition: all 0.2s ease;
}

.btn:disabled[b-cecy957xxy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-cecy957xxy] {
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-primary:hover:not(:disabled)[b-cecy957xxy] {
    background: var(--BEC-themeSecondary);
}

.btn-secondary[b-cecy957xxy] {
    background: var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-cecy957xxy] {
    background: #d1d1d1;
}

.btn-danger[b-cecy957xxy] {
    background: #dc2626;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-danger:hover:not(:disabled)[b-cecy957xxy] {
    background: #b91c1c;
}

.btn-warning[b-cecy957xxy] {
    background: #ff8c00;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-warning:hover:not(:disabled)[b-cecy957xxy] {
    background: #e67e00;
}

.btn-success[b-cecy957xxy] {
    background: #10b981;
    color: var(--BEC-colorNeutralBackground1);
}

.btn-success:hover:not(:disabled)[b-cecy957xxy] {
    background: #059669;
}

/* Info Grid (View Dialog) */
.info-grid[b-cecy957xxy] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.info-section[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.section-title[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-themePrimary);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.section-title i[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase400);
}

.info-row[b-cecy957xxy] {
    display: flex;
    padding: var(--BEC-spacingHorizontalS) 0;
    border-bottom: 1px solid #e5e7eb;
}

.info-row:last-child[b-cecy957xxy] {
    border-bottom: none;
}

.info-label[b-cecy957xxy] {
    flex: 0 0 180px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase300);
}

.info-value[b-cecy957xxy] {
    flex: 1;
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase300);
}

/* Form Grid (Edit Dialog) */
.form-grid[b-cecy957xxy] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.form-section[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.form-group[b-cecy957xxy] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-group:last-child[b-cecy957xxy] {
    margin-bottom: 0;
}

.form-label[b-cecy957xxy] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalSNudge);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.form-input[b-cecy957xxy] {
    width: 100%;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    border: 1px solid #d1d1d1;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-family: 'Segoe UI', sans-serif;
    transition: border-color 0.2s ease;
}

.form-input:focus[b-cecy957xxy] {
    outline: none;
    border-color: var(--BEC-themePrimary);
    box-shadow: var(--BEC-shadow4);
}

.form-input:disabled[b-cecy957xxy] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
    cursor: not-allowed;
}

.checkbox-label[b-cecy957xxy] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-cecy957xxy] {
    width: var(--BEC-spacingHorizontalL);
    height: var(--BEC-spacingHorizontalL);
    cursor: pointer;
}

/* Warning Messages in Confirmation Dialogs */
.warning-message[b-cecy957xxy] {
    font-size: 15px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalL) 0;
}

.warning-message strong[b-cecy957xxy] {
    color: var(--BEC-warningText);
}

.warning-note[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-warningBackground);
    border-left: 3px solid var(--BEC-warningText);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--BEC-spacingHorizontalS);
}

.warning-note i[b-cecy957xxy] {
    color: var(--BEC-warningText);
    margin-top: var(--BEC-spacingHorizontalXXS);
    font-size: var(--BEC-fontSizeBase300);
    flex-shrink: 0;
}

.warning-note-info[b-cecy957xxy] {
    background: var(--BEC-themeLighterAlt);
    border-left-color: var(--BEC-themePrimary);
}

.warning-note-info i[b-cecy957xxy] {
    color: var(--BEC-themePrimary);
}

.warning-note-success[b-cecy957xxy] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left-color: #10b981;
}

.warning-note-success i[b-cecy957xxy] {
    color: #10b981;
}

/* ========================================
   GRID PAGER STYLES
   ⚠️ Pager styles now in BEC_Theme.css (Global)
   ⚠️ DO NOT duplicate Syncfusion overrides here
   ======================================== */

/* ========================================
   PAGE-SPECIFIC RESPONSIVE LAYOUT
   Syncfusion component styles handled by BEC_Theme.css
   Only page layout positioning here
   ======================================== */

/* Tablet (768px - 1024px) - Layout Positioning Only */
@media (max-width: 1024px) {
    /* Sticky Toolbar Positioning */
    [b-cecy957xxy] .e-toolbar.e-control {
        top: 50px !important; /* Below compact header */
    }
    
    /* Sticky Grid Headers Positioning */
    .e-grid .e-gridheader[b-cecy957xxy] {
        top: 100px !important; /* Below header + toolbar */
    }
}

/* Mobile (< 768px) - Layout Adjustments */
@media (max-width: 768px) {
    /* Page Header - Stack Vertically */
    .erp-page-header[b-cecy957xxy] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalM);
    }
    
    /* Stats - Full Width */
    .stats-container[b-cecy957xxy] {
        width: 100%;
        justify-content: space-around;
    }

    /* Sticky Toolbar Positioning - Adjusted for taller header */
    [b-cecy957xxy] .e-toolbar.e-control {
        top: 90px !important; /* Below taller mobile header */
    }

    /* Sticky Grid Headers Positioning */
    .e-grid .e-gridheader[b-cecy957xxy] {
        top: 140px !important; /* Below header + toolbar */
    }
}

/* Small Mobile (< 480px) - Icon-Only Toolbar */
@media (max-width: 480px) {
    /* Hide button text, show icons only to save space */
    [b-cecy957xxy] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
        display: none;
    }
    
    /* Column Chooser - Responsive on Mobile */
    [b-cecy957xxy] .e-grid .e-dialog.e-ccdlg {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
    }
}

/* ========================================
   EXCEL FILTER DIALOG - Responsive Sizing
   ======================================== */
[b-cecy957xxy] .e-grid .e-excelfilter.e-popup.e-popup-open {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

[b-cecy957xxy] .e-grid .e-excelfilter .e-checkboxlist {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Compact Size
   ======================================== */
[b-cecy957xxy] .e-grid .e-dialog.e-ccdlg {
    max-width: 450px !important;
    width: 450px !important;
    max-height: 80vh !important;
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: var(--BEC-shadow16) !important;
}

/* Column Chooser Dialog Header */
[b-cecy957xxy] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Content */
[b-cecy957xxy] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: 450px !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
}

/* Column Chooser Dialog Footer (OK button) */
[b-cecy957xxy] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ========================================
   ENHANCED VIEW DIALOG STYLES
   ======================================== */

/* Full-width info sections */
.info-section.full-width[b-cecy957xxy] {
    grid-column: 1 / -1;
}

/* Content box for text content */
.content-box[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground2);
    font-size: var(--BEC-fontSizeBase300);
}

/* Image preview section */
.image-preview[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.news-cover-img[b-cecy957xxy] {
    max-width: 100%;
    max-height: 400px;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow8);
}

/* ========================================
   ATTACHMENTS GRID (Image, Link, File Support)
   ======================================== */
.attachments-grid[b-cecy957xxy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--BEC-spacingHorizontalL);
}

.attachment-card[b-cecy957xxy] {
    display: flex;
    flex-direction: column;
    padding: var(--BEC-spacingHorizontalL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusLarge);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    transition: all 0.2s ease;
}

.attachment-card:hover[b-cecy957xxy] {
    background: var(--BEC-colorNeutralBackground1);
    box-shadow: var(--BEC-shadow8);
    transform: translateY(-2px);
}

/* Image Attachment Card */
.attachment-card.image-attachment .attachment-image[b-cecy957xxy] {
    width: 100%;
    height: 200px;
    margin-bottom: var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    background: #e0e0e0;
}

.attachment-card.image-attachment .attachment-image img[b-cecy957xxy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Link and File Attachment Icon */
.attachment-icon-large[b-cecy957xxy] {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--BEC-spacingHorizontalM);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 28px;
}

.attachment-card.link-attachment .attachment-icon-large[b-cecy957xxy] {
    background: var(--BEC-themePrimary);
}

.attachment-card.file-attachment .attachment-icon-large[b-cecy957xxy] {
    background: #5c2d91;
}

/* Attachment Details */
.attachment-details[b-cecy957xxy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.attachment-name[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    word-break: break-word;
}

.attachment-caption[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    font-style: italic;
}

.attachment-size[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

.attachment-type[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    font-family: 'Courier New', monospace;
}

/* Attachment Action Buttons */
.btn-view-attachment[b-cecy957xxy],
.btn-download-attachment[b-cecy957xxy] {
    margin-top: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-themePrimary);
    color: var(--BEC-colorNeutralBackground1);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.btn-view-attachment:hover[b-cecy957xxy],
.btn-download-attachment:hover[b-cecy957xxy] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 120, 212, 0.3);
}

/* External Link in Link Attachment */
.attachment-card .external-link[b-cecy957xxy] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    color: var(--BEC-themePrimary);
    text-decoration: none;
    font-size: var(--BEC-fontSizeBase200);
    word-break: break-all;
    margin-top: var(--BEC-spacingHorizontalXS);
}

.attachment-card .external-link:hover[b-cecy957xxy] {
    text-decoration: underline;
}

/* Responsive Attachments Grid */
@media (max-width: 768px) {
    .attachments-grid[b-cecy957xxy] {
        grid-template-columns: 1fr;
    }
}

/* Loading and Empty States */
.loading-box[b-cecy957xxy],
.empty-box[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalXL);
    background: #f9fafb;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalM);
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase300);
}

.loading-box i[b-cecy957xxy] {
    font-size: 24px;
    color: var(--BEC-themePrimary);
}

.empty-box i[b-cecy957xxy] {
    font-size: 32px;
    color: var(--BEC-colorNeutralForeground3);
}

/* Audit Section */
.audit-section[b-cecy957xxy] {
    background: var(--BEC-colorNeutralBackground2);
}

.audit-grid[b-cecy957xxy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--BEC-spacingHorizontalL);
}

.audit-item[b-cecy957xxy] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.audit-label[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
}

.audit-label i[b-cecy957xxy] {
    color: var(--BEC-themePrimary);
}

.audit-value[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.audit-date[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   NEWS VIEW & EDIT WIZARD SIDEBARS
   Following NewsCreateModal Pattern
   ======================================== */

/* Sidebar Container */
:global(.news-view-sidebar .e-sidebar)[b-cecy957xxy],
:global(.news-edit-sidebar .e-sidebar)[b-cecy957xxy] {
    box-shadow: var(--BEC-shadow64);
    z-index: 1000;
}

.sidebar-container[b-cecy957xxy] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
}

/* Sidebar Header */
.sidebar-header[b-cecy957xxy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: linear-gradient(135deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-cecy957xxy] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: white;
}

.sidebar-title i[b-cecy957xxy] {
    color: white;
    font-size: var(--BEC-fontSizeBase600);
}

.sidebar-close-btn[b-cecy957xxy] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
}

.sidebar-close-btn:hover[b-cecy957xxy] {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-close-btn i[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase400);
}

/* Wizard Progress Bar (Simple Text Labels) */
.wizard-progress-bar[b-cecy957xxy] {
    display: flex;
    justify-content: space-around;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.progress-step[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.3s ease;
}

.progress-step.active[b-cecy957xxy] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    background: var(--BEC-colorNeutralBackground1);
}

/* Sidebar Content */
.sidebar-content[b-cecy957xxy] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-step-content[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalXL);
}

/* Wizard Step */
.wizard-step[b-cecy957xxy] {
    max-width: 100%;
}

.step-title[b-cecy957xxy] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
}

.step-title i[b-cecy957xxy] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.step-description[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 var(--BEC-spacingHorizontalXL) 0;
}

/* View Info Grid (Read-Only Display) */
.view-info-grid[b-cecy957xxy] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
}

.view-info-row[b-cecy957xxy] {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: var(--BEC-spacingHorizontalM);
    align-items: start;
}

.view-info-row.full-width[b-cecy957xxy] {
    grid-template-columns: 1fr;
    flex-direction: column;
}

.view-info-label[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
}

.view-info-value[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    word-break: break-word;
}

.view-info-value i[b-cecy957xxy] {
    margin-right: var(--BEC-spacingHorizontalXS);
    color: var(--BEC-colorBrandForeground1);
}

.content-box[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-top: var(--BEC-spacingHorizontalS);
}

.news-cover-img-view[b-cecy957xxy] {
    max-width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
}

/* Attachments Grid (View) */
.attachments-grid-view[b-cecy957xxy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--BEC-spacingHorizontalL);
    margin-top: var(--BEC-spacingHorizontalM);
}

.attachment-card-view[b-cecy957xxy] {
    display: flex;
    flex-direction: column;
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    gap: var(--BEC-spacingHorizontalS);
}

.attachment-image-view[b-cecy957xxy] {
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-radius: var(--BEC-borderRadiusSmall);
}

.attachment-image-view img[b-cecy957xxy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attachment-icon-view[b-cecy957xxy] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusSmall);
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.attachment-details-view[b-cecy957xxy] {
    flex: 1;
}

.attachment-name-view[b-cecy957xxy] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: var(--BEC-spacingHorizontalXS);
}

.attachment-caption-view[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: var(--BEC-spacingHorizontalXS);
}

.attachment-size-view[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

.btn-view-attachment-view[b-cecy957xxy],
.btn-download-attachment-view[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-themePrimary);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusSmall);
    text-decoration: none;
    font-size: var(--BEC-fontSizeBase200);
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
    transition: all 0.2s ease;
}

.btn-view-attachment-view:hover[b-cecy957xxy],
.btn-download-attachment-view:hover[b-cecy957xxy] {
    background: var(--BEC-themeSecondary);
}

.external-link-view[b-cecy957xxy] {
    color: var(--BEC-colorBrandForeground1);
    text-decoration: none;
    font-size: var(--BEC-fontSizeBase200);
    word-break: break-all;
}

.external-link-view:hover[b-cecy957xxy] {
    text-decoration: underline;
}

/* Audit Section (View) */
.audit-section-view[b-cecy957xxy] {
    margin-top: var(--BEC-spacingHorizontalL);
    padding-top: var(--BEC-spacingHorizontalL);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

.audit-item-view[b-cecy957xxy] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.audit-item-view i[b-cecy957xxy] {
    color: var(--BEC-colorBrandForeground1);
}

.audit-date-view[b-cecy957xxy] {
    margin-left: auto;
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

/* Form Elements (Edit Wizard) */
.form-group[b-cecy957xxy] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-label[b-cecy957xxy] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.form-label.required[b-cecy957xxy]::after {
    content: ' *';
    color: var(--BEC-colorPaletteRedForeground1);
}

.form-row[b-cecy957xxy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.error-message[b-cecy957xxy] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
}

.field-hint[b-cecy957xxy] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Info Box */
.info-box[b-cecy957xxy] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, var(--BEC-colorNeutralBackground2) 0%, var(--BEC-colorNeutralBackground3) 100%);
    border-left: 4px solid var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.info-box i[b-cecy957xxy] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.info-box span[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

/* Subsection Title */
.subsection-title[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    margin: var(--BEC-spacingHorizontalXL) 0 var(--BEC-spacingHorizontalL) 0;
}

/* Toggle Wrapper */
.toggle-wrapper[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalS) 0;
}

/* Read-only Input Display */
.input-readonly[b-cecy957xxy] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.input-readonly i[b-cecy957xxy] {
    color: var(--BEC-colorBrandForeground1);
}

.input-loading[b-cecy957xxy] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorPaletteYellowBackground2);
    border: 1px solid var(--BEC-colorPaletteYellowForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorPaletteYellowForeground2);
}

.input-loading i[b-cecy957xxy] {
    color: var(--BEC-colorPaletteYellowForeground2);
}

/* Review Section */
.review-section[b-cecy957xxy] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.review-section-title[b-cecy957xxy] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorBrandStroke1);
}

.review-grid[b-cecy957xxy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.review-item[b-cecy957xxy] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.review-item.full-width[b-cecy957xxy] {
    grid-column: 1 / -1;
}

.review-label[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.review-value[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
}

/* Sidebar Footer */
.sidebar-footer[b-cecy957xxy] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    position: sticky;
    bottom: 0;
}

/* Sidebar Footer Buttons */
.sidebar-footer .btn[b-cecy957xxy] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXL);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.sidebar-footer .btn:disabled[b-cecy957xxy] {
    opacity: 0.6;
    cursor: not-allowed;
}

.sidebar-footer .btn-secondary[b-cecy957xxy] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-footer .btn-secondary:hover:not(:disabled)[b-cecy957xxy] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.sidebar-footer .btn-primary[b-cecy957xxy] {
    background: var(--BEC-themePrimary);
    color: white;
}

.sidebar-footer .btn-primary:hover:not(:disabled)[b-cecy957xxy] {
    background: var(--BEC-themeSecondary);
}

.sidebar-footer .btn i[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase300);
}

/* Loading Box */
.loading-box[b-cecy957xxy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--BEC-spacingHorizontalXL);
    gap: var(--BEC-spacingHorizontalM);
    color: var(--BEC-colorNeutralForeground3);
}

.loading-box i[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase600);
    color: var(--BEC-colorBrandForeground1);
}

.loading-box p[b-cecy957xxy] {
    font-size: var(--BEC-fontSizeBase300);
    margin: 0;
}

/* Image Preview Container */
.image-preview-container[b-cecy957xxy] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.image-preview[b-cecy957xxy] {
    width: 100%;
    max-width: 400px;
    max-height: 250px;
    object-fit: cover;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
}

/* Responsive Design */
@media (max-width: 768px) {
    :global(.news-view-sidebar .e-sidebar)[b-cecy957xxy],
    :global(.news-edit-sidebar .e-sidebar)[b-cecy957xxy] {
        width: 90% !important;
    }

    .sidebar-header[b-cecy957xxy],
    .sidebar-footer[b-cecy957xxy] {
        padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    }

    .sidebar-step-content[b-cecy957xxy] {
        padding: var(--BEC-spacingHorizontalL);
    }

    .form-row[b-cecy957xxy],
    .review-grid[b-cecy957xxy],
    .view-info-row[b-cecy957xxy] {
        grid-template-columns: 1fr;
    }

    .attachments-grid-view[b-cecy957xxy] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/MainLayout/Intranet/NewsAdministration/NewsCreateModal.razor.rz.scp.css */
/* ========================================
   NEWS CREATE WIZARD - SIDEBAR PATTERN
   Following SystemModuleAdministration Design
   ======================================== */

/* ========================================
   SIDEBAR CONTAINER
   ======================================== */

:global(.news-create-sidebar .e-sidebar)[b-un25rei7r7] {
    box-shadow: var(--BEC-shadow64);
    z-index: 1000;
}

.sidebar-container[b-un25rei7r7] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   SIDEBAR HEADER
   ======================================== */

.sidebar-header[b-un25rei7r7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: linear-gradient(135deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-un25rei7r7] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: white;
}

.sidebar-title i[b-un25rei7r7] {
    color: white;
    font-size: var(--BEC-fontSizeBase600);
}

.sidebar-close-btn[b-un25rei7r7] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
}

.sidebar-close-btn:hover[b-un25rei7r7] {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-close-btn i[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase400);
}

/* ========================================
   WIZARD PROGRESS BAR
   ======================================== */

.wizard-progress-bar[b-un25rei7r7] {
    display: flex;
    justify-content: space-around;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    position: relative;
}

.wizard-progress-bar[b-un25rei7r7]::before {
    content: '';
    position: absolute;
    top: calc(var(--BEC-spacingHorizontalL) + 15px);
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--BEC-colorNeutralStroke2);
    z-index: 0;
}

.progress-step[b-un25rei7r7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    position: relative;
    z-index: 1;
}

.progress-number[b-un25rei7r7] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralBackground1);
    border: 2px solid var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase300);
    transition: all 0.3s ease;
}

.progress-step.active .progress-number[b-un25rei7r7] {
    background: var(--BEC-themePrimary);
    border-color: var(--BEC-themePrimary);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.1);
}

.progress-step.completed .progress-number[b-un25rei7r7] {
    background: var(--BEC-colorPaletteGreenBackground3);
    border-color: var(--BEC-colorPaletteGreenForeground2);
    color: white;
}

.progress-step.completed .progress-number[b-un25rei7r7]::after {
    content: '\e73e';
    font-family: 'e-icons';
    position: absolute;
}

.progress-label[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    text-align: center;
    transition: all 0.3s ease;
}

.progress-step.active .progress-label[b-un25rei7r7] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   SIDEBAR CONTENT
   ======================================== */

.sidebar-content[b-un25rei7r7] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-step-content[b-un25rei7r7] {
    padding: var(--BEC-spacingHorizontalXL);
}

/* ========================================
   WIZARD STEP
   ======================================== */

.wizard-step[b-un25rei7r7] {
    max-width: 100%;
}

.step-title[b-un25rei7r7] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
}

.step-title i[b-un25rei7r7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.step-description[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 var(--BEC-spacingHorizontalXL) 0;
}

.subsection-title[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    margin: var(--BEC-spacingHorizontalXL) 0 var(--BEC-spacingHorizontalL) 0;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

.form-group[b-un25rei7r7] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-label[b-un25rei7r7] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.form-label.required[b-un25rei7r7]::after {
    content: ' *';
    color: var(--BEC-colorPaletteRedForeground1);
}

.form-row[b-un25rei7r7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.error-message[b-un25rei7r7] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
}

.field-hint[b-un25rei7r7] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Info Box */
.info-box[b-un25rei7r7] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, var(--BEC-colorNeutralBackground2) 0%, var(--BEC-colorNeutralBackground3) 100%);
    border-left: 4px solid var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.info-box i[b-un25rei7r7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.info-box span[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

/* Toggle Wrapper */
.toggle-wrapper[b-un25rei7r7] {
    padding: var(--BEC-spacingHorizontalS) 0;
}

/* Read-only Input Display */
.input-readonly[b-un25rei7r7] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

.input-readonly i[b-un25rei7r7] {
    color: var(--BEC-colorBrandForeground1);
}

.input-loading[b-un25rei7r7] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorPaletteYellowBackground2);
    border: 1px solid var(--BEC-colorPaletteYellowForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorPaletteYellowForeground2);
}

.input-loading i[b-un25rei7r7] {
    color: var(--BEC-colorPaletteYellowForeground2);
}

/* ========================================
   REVIEW SECTION
   ======================================== */

.review-section[b-un25rei7r7] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.review-section-title[b-un25rei7r7] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorBrandStroke1);
}

.review-grid[b-un25rei7r7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.review-item[b-un25rei7r7] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.review-item-full[b-un25rei7r7] {
    grid-column: 1 / -1;
}

.review-label[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.review-value[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
}

/* ========================================
   SIDEBAR FOOTER
   ======================================== */

.sidebar-footer[b-un25rei7r7] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    position: sticky;
    bottom: 0;
}

/* ========================================
   SIDEBAR FOOTER BUTTONS (HTML buttons with custom CSS)
   ======================================== */

.btn[b-un25rei7r7] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXL);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-un25rei7r7] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-un25rei7r7] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-un25rei7r7] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-primary[b-un25rei7r7] {
    background: var(--BEC-themePrimary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-un25rei7r7] {
    background: var(--BEC-themeSecondary);
}

.btn-success[b-un25rei7r7] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: white;
}

.btn-success:hover:not(:disabled)[b-un25rei7r7] {
    background: var(--BEC-colorPaletteGreenForeground1);
}

.btn i[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    :global(.news-create-sidebar .e-sidebar)[b-un25rei7r7] {
        width: 90% !important;
    }

    .sidebar-header[b-un25rei7r7],
    .sidebar-footer[b-un25rei7r7] {
        padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    }

    .sidebar-step-content[b-un25rei7r7] {
        padding: var(--BEC-spacingHorizontalL);
    }

    .form-row[b-un25rei7r7] {
        grid-template-columns: 1fr;
    }

    .review-grid[b-un25rei7r7] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   IMAGE UPLOAD SECTION
   ======================================== */

/* Image Preview Container */
.image-preview-container[b-un25rei7r7] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

/* Image Preview */
.image-preview[b-un25rei7r7] {
    width: 100%;
    max-width: 400px;
    max-height: 250px;
    object-fit: cover;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
}

/* Remove Image Button */
.btn-remove-image[b-un25rei7r7] {
    align-self: flex-start;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

    .btn-remove-image:hover:not(:disabled)[b-un25rei7r7] {
        background: #fecaca;
        border-color: #f87171;
        transform: translateY(-1px);
    }

    .btn-remove-image:disabled[b-un25rei7r7] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Upload Controls */
.upload-controls[b-un25rei7r7] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

/* Upload Button */
.btn-upload-image[b-un25rei7r7] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    justify-content: center;
}

    .btn-upload-image:hover:not(:disabled)[b-un25rei7r7] {
        background: var(--BEC-themeSecondary);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
    }

    .btn-upload-image:disabled[b-un25rei7r7] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Field Hint */
.field-hint[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ========================================
   ATTACHMENTS SECTION
   ======================================== */

.attachment-controls[b-un25rei7r7] {
    margin-top: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.input-with-button[b-un25rei7r7] {
    display: flex;
    gap: var(--BEC-spacingHorizontalM);
    align-items: flex-end;
}

.input-with-button .form-group[b-un25rei7r7] {
    flex: 1;
}

.attachments-list[b-un25rei7r7] {
    margin-top: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.attachments-list-title[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.attachments-grid[b-un25rei7r7] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
}

.attachment-item[b-un25rei7r7] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    transition: all 0.2s ease;
}

.attachment-item:hover[b-un25rei7r7] {
    border-color: var(--BEC-themePrimary);
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.1);
}

.attachment-icon[b-un25rei7r7] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-themePrimary);
    color: white;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase400);
}

.attachment-info[b-un25rei7r7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.attachment-name[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

.attachment-caption[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

.attachment-type[b-un25rei7r7] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    text-transform: uppercase;
    font-weight: var(--BEC-fontWeightMedium);
}

.btn-remove-attachment[b-un25rei7r7] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-remove-attachment:hover[b-un25rei7r7] {
    background: #fee2e2;
    border-color: #dc2626;
    color: #dc2626;
}

/* Review Section Attachments */
.review-attachments-list[b-un25rei7r7] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.review-attachment-item[b-un25rei7r7] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
}

.review-attachment-item i[b-un25rei7r7] {
    color: var(--BEC-themePrimary);
}

.review-attachment-caption[b-un25rei7r7] {
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* /Components/Pages/MainLayout/Intranet/NewsAdministration/NewsEditModal.razor.rz.scp.css */
/* ========================================
   NEWS EDIT WIZARD - SIDEBAR PATTERN
   Following NewsCreateModal Design
   ======================================== */

/* ========================================
   SIDEBAR CONTAINER
   ======================================== */

:global(.news-edit-sidebar .e-sidebar)[b-k5o7dllqn8] {
    box-shadow: var(--BEC-shadow64);
    z-index: 1000;
}

.sidebar-container[b-k5o7dllqn8] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   SIDEBAR HEADER
   ======================================== */

.sidebar-header[b-k5o7dllqn8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: linear-gradient(135deg, var(--BEC-themePrimary) 0%, var(--BEC-themeSecondary) 100%);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-k5o7dllqn8] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: white;
}

.sidebar-title i[b-k5o7dllqn8] {
    color: white;
    font-size: var(--BEC-fontSizeBase600);
}

.sidebar-close-btn[b-k5o7dllqn8] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
}

.sidebar-close-btn:hover[b-k5o7dllqn8] {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-close-btn i[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase400);
}

/* ========================================
   WIZARD PROGRESS BAR
   ======================================== */

.wizard-progress-bar[b-k5o7dllqn8] {
    display: flex;
    justify-content: space-around;
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    position: relative;
}

.wizard-progress-bar[b-k5o7dllqn8]::before {
    content: '';
    position: absolute;
    top: calc(var(--BEC-spacingHorizontalL) + 15px);
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--BEC-colorNeutralStroke2);
    z-index: 0;
}

.progress-step[b-k5o7dllqn8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    position: relative;
    z-index: 1;
}

.progress-number[b-k5o7dllqn8] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralBackground1);
    border: 2px solid var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: var(--BEC-fontSizeBase300);
    transition: all 0.3s ease;
}

.progress-step.active .progress-number[b-k5o7dllqn8] {
    background: var(--BEC-themePrimary);
    border-color: var(--BEC-themePrimary);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.1);
}

.progress-step.completed .progress-number[b-k5o7dllqn8] {
    background: var(--BEC-colorPaletteGreenBackground3);
    border-color: var(--BEC-colorPaletteGreenForeground2);
    color: white;
}

.progress-step.completed .progress-number[b-k5o7dllqn8]::after {
    content: '\e73e';
    font-family: 'e-icons';
    position: absolute;
}

.progress-label[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    text-align: center;
    transition: all 0.3s ease;
}

.progress-step.active .progress-label[b-k5o7dllqn8] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   SIDEBAR CONTENT
   ======================================== */

.sidebar-content[b-k5o7dllqn8] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-step-content[b-k5o7dllqn8] {
    padding: var(--BEC-spacingHorizontalXL);
}

/* Loading Container */
.loading-container[b-k5o7dllqn8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalXL);
    min-height: 300px;
}

.loading-container i[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase600);
    color: var(--BEC-themePrimary);
}

.loading-container span[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   WIZARD STEP
   ======================================== */

.wizard-step[b-k5o7dllqn8] {
    max-width: 100%;
}

.step-title[b-k5o7dllqn8] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
}

.step-title i[b-k5o7dllqn8] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.step-description[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 var(--BEC-spacingHorizontalXL) 0;
}

.subsection-title[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    margin: var(--BEC-spacingHorizontalXL) 0 var(--BEC-spacingHorizontalL) 0;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

.form-group[b-k5o7dllqn8] {
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.form-label[b-k5o7dllqn8] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
}

.form-label.required[b-k5o7dllqn8]::after {
    content: ' *';
    color: var(--BEC-colorPaletteRedForeground1);
}

.form-row[b-k5o7dllqn8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.error-message[b-k5o7dllqn8] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorPaletteRedForeground1);
}

.field-hint[b-k5o7dllqn8] {
    display: block;
    margin-top: var(--BEC-spacingHorizontalXS);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Info Box */
.info-box[b-k5o7dllqn8] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: linear-gradient(135deg, var(--BEC-colorNeutralBackground2) 0%, var(--BEC-colorNeutralBackground3) 100%);
    border-left: 4px solid var(--BEC-themePrimary);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.info-box i[b-k5o7dllqn8] {
    color: var(--BEC-colorBrandForeground1);
    font-size: var(--BEC-fontSizeBase500);
}

.info-box span[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
}

/* Toggle Wrapper */
.toggle-wrapper[b-k5o7dllqn8] {
    padding: var(--BEC-spacingHorizontalS) 0;
}

/* ========================================
   REVIEW SECTION
   ======================================== */

.review-section[b-k5o7dllqn8] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.review-section-title[b-k5o7dllqn8] {
    margin: 0 0 var(--BEC-spacingHorizontalM) 0;
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding-bottom: var(--BEC-spacingHorizontalS);
    border-bottom: 2px solid var(--BEC-colorBrandStroke1);
}

.review-grid[b-k5o7dllqn8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.review-item[b-k5o7dllqn8] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalXS);
}

.review-item-full[b-k5o7dllqn8] {
    grid-column: 1 / -1;
}

.review-label[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.review-value[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightRegular);
}

/* ========================================
   SIDEBAR FOOTER
   ======================================== */

.sidebar-footer[b-k5o7dllqn8] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXL);
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
    position: sticky;
    bottom: 0;
}

/* ========================================
   SIDEBAR FOOTER BUTTONS (HTML buttons with custom CSS)
   ======================================== */

.btn[b-k5o7dllqn8] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXL);
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-k5o7dllqn8] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-k5o7dllqn8] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-k5o7dllqn8] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-primary[b-k5o7dllqn8] {
    background: var(--BEC-themePrimary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-k5o7dllqn8] {
    background: var(--BEC-themeSecondary);
}

.btn-success[b-k5o7dllqn8] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: white;
}

.btn-success:hover:not(:disabled)[b-k5o7dllqn8] {
    background: var(--BEC-colorPaletteGreenForeground1);
}

.btn i[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    :global(.news-edit-sidebar .e-sidebar)[b-k5o7dllqn8] {
        width: 90% !important;
    }

    .sidebar-header[b-k5o7dllqn8],
    .sidebar-footer[b-k5o7dllqn8] {
        padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    }

    .sidebar-step-content[b-k5o7dllqn8] {
        padding: var(--BEC-spacingHorizontalL);
    }

    .form-row[b-k5o7dllqn8] {
        grid-template-columns: 1fr;
    }

    .review-grid[b-k5o7dllqn8] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   IMAGE UPLOAD SECTION
   ======================================== */

/* Image Preview Container */
.image-preview-container[b-k5o7dllqn8] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

/* Image Preview */
.image-preview[b-k5o7dllqn8] {
    width: 100%;
    max-width: 400px;
    max-height: 250px;
    object-fit: cover;
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow4);
}

/* Remove Image Button */
.btn-remove-image[b-k5o7dllqn8] {
    align-self: flex-start;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.btn-remove-image:hover:not(:disabled)[b-k5o7dllqn8] {
    background: #fecaca;
    border-color: #f87171;
    transform: translateY(-1px);
}

.btn-remove-image:disabled[b-k5o7dllqn8] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Upload Controls */
.upload-controls[b-k5o7dllqn8] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

/* Upload Button */
.btn-upload-image[b-k5o7dllqn8] {
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalL);
    background: var(--BEC-themePrimary);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    justify-content: center;
}

.btn-upload-image:hover:not(:disabled)[b-k5o7dllqn8] {
    background: var(--BEC-themeSecondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
}

.btn-upload-image:disabled[b-k5o7dllqn8] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   ATTACHMENTS SECTION
   ======================================== */

.attachment-controls[b-k5o7dllqn8] {
    margin-top: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.input-with-button[b-k5o7dllqn8] {
    display: flex;
    gap: var(--BEC-spacingHorizontalM);
    align-items: flex-end;
}

.input-with-button .form-group[b-k5o7dllqn8] {
    flex: 1;
}

.attachments-list[b-k5o7dllqn8] {
    margin-top: var(--BEC-spacingHorizontalL);
    padding: var(--BEC-spacingHorizontalL);
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.attachments-list-title[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.attachments-grid[b-k5o7dllqn8] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
}

.attachment-item[b-k5o7dllqn8] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    transition: all 0.2s ease;
}

.attachment-item:hover[b-k5o7dllqn8] {
    border-color: var(--BEC-themePrimary);
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.1);
}

.attachment-icon[b-k5o7dllqn8] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-themePrimary);
    color: white;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase400);
}

.attachment-info[b-k5o7dllqn8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.attachment-name[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

.attachment-caption[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

.attachment-type[b-k5o7dllqn8] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    text-transform: uppercase;
    font-weight: var(--BEC-fontWeightMedium);
}

.btn-remove-attachment[b-k5o7dllqn8] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-remove-attachment:hover[b-k5o7dllqn8] {
    background: #fee2e2;
    border-color: #dc2626;
    color: #dc2626;
}

/* Review Section Attachments */
.review-attachments-list[b-k5o7dllqn8] {
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalS);
}

.review-attachment-item[b-k5o7dllqn8] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
}

.review-attachment-item i[b-k5o7dllqn8] {
    color: var(--BEC-themePrimary);
}

.review-attachment-caption[b-k5o7dllqn8] {
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* /Components/Pages/MainLayout/Intranet/OrientationAdministration/OrientationAdministration.razor.rz.scp.css */
/* ── Root ── */
.oa-root[b-f9fqekhb9k] { padding: 16px; }

.oa-toolbar[b-f9fqekhb9k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.oa-toolbar__title[b-f9fqekhb9k] { font-size: 15px; font-weight: 600; color: #1e293b; display: flex; align-items: center; gap: 8px; }
.oa-toolbar__title i[b-f9fqekhb9k] { color: #4f46e5; }

.oa-status[b-f9fqekhb9k] { text-align: center; padding: 40px 0; color: #6b7280; font-size: 14px; }

/* ── Table ── */
.oa-table[b-f9fqekhb9k] { width: 100%; border-collapse: collapse; font-size: 13px; }
.oa-table th[b-f9fqekhb9k] { background: #f8fafc; color: #6b7280; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 12px; text-align: left; border-bottom: 1px solid #e5e7eb; }
.oa-table td[b-f9fqekhb9k] { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.oa-table tr:last-child td[b-f9fqekhb9k] { border-bottom: none; }
.oa-row--inactive td[b-f9fqekhb9k] { opacity: 0.55; }

.oa-col--date[b-f9fqekhb9k]  { white-space: nowrap; font-weight: 500; color: #374151; }
.oa-col--title[b-f9fqekhb9k] { color: #1e293b; }
.oa-col--time[b-f9fqekhb9k]  { white-space: nowrap; color: #6b7280; }
.oa-col--url[b-f9fqekhb9k]   { }
.oa-col--active[b-f9fqekhb9k] { }
.oa-col--audit[b-f9fqekhb9k] { font-size: 12px; color: #6b7280; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-col--audit span[title][b-f9fqekhb9k] { cursor: default; }
.oa-col--actions[b-f9fqekhb9k] { white-space: nowrap; text-align: right; }

.oa-link[b-f9fqekhb9k] { color: #4f46e5; text-decoration: none; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.oa-link:hover[b-f9fqekhb9k] { text-decoration: underline; }
.oa-none[b-f9fqekhb9k] { color: #d1d5db; }

/* ── Badges ── */
.oa-badge[b-f9fqekhb9k] { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.oa-badge--on[b-f9fqekhb9k]  { background: #dcfce7; color: #166534; }
.oa-badge--off[b-f9fqekhb9k] { background: #f1f5f9; color: #94a3b8; }

/* ── Buttons ── */
.oa-btn[b-f9fqekhb9k] { display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; padding: 7px 14px; transition: all 0.15s; line-height: 1; }
.oa-btn:disabled[b-f9fqekhb9k] { opacity: 0.5; cursor: not-allowed; }
.oa-btn--primary[b-f9fqekhb9k] { background: #4f46e5; color: #fff; }
.oa-btn--primary:hover:not(:disabled)[b-f9fqekhb9k] { background: #4338ca; }
.oa-btn--ghost[b-f9fqekhb9k] { background: #f8fafc; color: #374151; border: 1px solid #e5e7eb; }
.oa-btn--ghost:hover:not(:disabled)[b-f9fqekhb9k] { background: #f1f5f9; }
.oa-btn--danger[b-f9fqekhb9k] { background: #fee2e2; color: #dc2626; }
.oa-btn--danger:hover:not(:disabled)[b-f9fqekhb9k] { background: #fecaca; }
.oa-btn--sm[b-f9fqekhb9k] { padding: 4px 10px; font-size: 12px; }

/* ── Modal ── */
.oa-overlay[b-f9fqekhb9k] { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.oa-modal[b-f9fqekhb9k] { background: #fff; border-radius: 12px; width: 100%; max-width: 480px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); display: flex; flex-direction: column; }
.oa-modal__header[b-f9fqekhb9k] { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #f1f5f9; font-size: 15px; font-weight: 600; color: #1e293b; }
.oa-modal__close[b-f9fqekhb9k] { background: none; border: none; cursor: pointer; color: #9ca3af; font-size: 16px; display: flex; align-items: center; }
.oa-modal__close:hover[b-f9fqekhb9k] { color: #374151; }
.oa-modal__body[b-f9fqekhb9k] { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.oa-modal__body label[b-f9fqekhb9k] { font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 2px; display: block; }
.oa-modal__footer[b-f9fqekhb9k] { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid #f1f5f9; }

.oa-input[b-f9fqekhb9k] { width: 100%; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 13px; color: #1e293b; outline: none; box-sizing: border-box; }
.oa-input:focus[b-f9fqekhb9k] { border-color: #a5b4fc; box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }

.oa-row[b-f9fqekhb9k] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.oa-toggle[b-f9fqekhb9k] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; cursor: pointer; }
.oa-required[b-f9fqekhb9k] { color: #dc2626; }
.oa-optional[b-f9fqekhb9k] { color: #9ca3af; font-weight: 400; }

.oa-error[b-f9fqekhb9k] { background: #fee2e2; color: #dc2626; border-radius: 6px; padding: 8px 12px; font-size: 12px; }

/* ── Confirm dialog ── */
.oa-confirm[b-f9fqekhb9k] { background: #fff; border-radius: 10px; padding: 24px; max-width: 360px; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
.oa-confirm p[b-f9fqekhb9k] { margin: 0 0 16px; font-size: 14px; color: #374151; }
.oa-confirm__actions[b-f9fqekhb9k] { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Spinner ── */
.oa-spinner[b-f9fqekhb9k] { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: oa-spin-b-f9fqekhb9k 0.6s linear infinite; }
@keyframes oa-spin-b-f9fqekhb9k { to { transform: rotate(360deg); } }
/* /Components/Pages/MainLayout/Intranet/ProjectUpdatesAdministration/ProjectUpdatesAdministration.razor.rz.scp.css */
/* ── Layout ──────────────────────────────────────────────── */
.pua-root[b-h0ezsp15ul] {
    display: flex;
    gap: 0;
    height: calc(100vh - 180px);
    min-height: 400px;
    overflow: hidden;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 8px;
    background: var(--BEC-colorNeutralBackground1);
}

/* ── Sidebar ─────────────────────────────────────────────── */
.pua-sidebar[b-h0ezsp15ul] {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pua-sidebar__header[b-h0ezsp15ul] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground2);
    flex-shrink: 0;
}

.pua-sidebar__title[b-h0ezsp15ul] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--BEC-colorNeutralForeground3);
}

.pua-project-list[b-h0ezsp15ul] {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

.pua-project-item[b-h0ezsp15ul] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke3, #f0f0f0);
    transition: background 0.15s;
}

    .pua-project-item:hover[b-h0ezsp15ul] { background: var(--BEC-colorNeutralBackground2); }
    .pua-project-item.active[b-h0ezsp15ul] {
        background: color-mix(in srgb, var(--BEC-colorBrandBackground) 8%, transparent);
        border-left: 3px solid var(--BEC-colorBrandBackground);
    }

.pua-project-item__cover[b-h0ezsp15ul] {
    width: 34px;
    height: 34px;
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--BEC-colorNeutralBackground3, #f0f0f0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--BEC-colorNeutralForeground4, #bbb);
    font-size: 16px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

    .pua-project-item__cover img[b-h0ezsp15ul] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.pua-project-item__info[b-h0ezsp15ul] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    flex: 1;
}

.pua-project-item__title[b-h0ezsp15ul] {
    font-size: 12px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pua-project-item__meta[b-h0ezsp15ul] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

    .pua-project-item__meta span[b-h0ezsp15ul] { font-size: 10px; color: var(--BEC-colorNeutralForeground3); }

/* ── Right Panel ─────────────────────────────────────────── */
.pua-panel[b-h0ezsp15ul] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.pua-panel__header[b-h0ezsp15ul] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground2);
    flex-shrink: 0;
    min-height: 54px;
}

.pua-panel__header-left[b-h0ezsp15ul] {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    flex: 1;
}

.pua-panel__cover-thumb[b-h0ezsp15ul] {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.pua-panel__title[b-h0ezsp15ul] {
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pua-panel__desc[b-h0ezsp15ul] {
    display: block;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pua-panel__actions[b-h0ezsp15ul] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Panel body (scrollable media area) ──────────────────── */
.pua-panel__body[b-h0ezsp15ul] {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
}

/* ── Media grid ──────────────────────────────────────────── */
.pua-media-grid[b-h0ezsp15ul] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}

.pua-media-thumb[b-h0ezsp15ul] {
    width: 110px;
    height: 110px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: box-shadow 0.15s;
}

    .pua-media-thumb:hover[b-h0ezsp15ul] { box-shadow: 0 2px 8px rgba(0,0,0,.12); }

    .pua-media-thumb img[b-h0ezsp15ul] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .pua-media-thumb:hover .pua-media-thumb__del[b-h0ezsp15ul] { opacity: 1; }

.pua-media-thumb--skeleton[b-h0ezsp15ul] {
    background: #f0f0f0;
    overflow: hidden;
    cursor: default;
}

    .pua-media-thumb--skeleton[b-h0ezsp15ul]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent 0%, #e0e0e0 50%, transparent 100%);
        transform: translateX(-100%);
        animation: pua-shimmer-b-h0ezsp15ul 1.4s infinite;
    }

.pua-media-thumb__video-wrap[b-h0ezsp15ul] {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pua-media-thumb__video-wrap img[b-h0ezsp15ul] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.pua-media-thumb__no-thumb[b-h0ezsp15ul] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--BEC-colorNeutralForeground4, #bbb);
}

.pua-media-thumb__play[b-h0ezsp15ul] {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    pointer-events: none;
}

.pua-media-thumb__del[b-h0ezsp15ul] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(192,57,43,.9);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    opacity: 0;
    transition: opacity .15s;
    z-index: 2;
}

/* ── Upload label (button that opens file dialog) ─────────── */
.pua-upload-label[b-h0ezsp15ul] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 5px;
    background: var(--BEC-colorBrandBackground);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    border: none;
    transition: opacity .15s;
    -webkit-user-select: none;
    user-select: none;
}

    .pua-upload-label:hover[b-h0ezsp15ul] { opacity: .85; }

.pua-file-input--hidden[b-h0ezsp15ul] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Cover image upload in modal */
.pua-cover-upload-label[b-h0ezsp15ul] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px dashed var(--BEC-colorNeutralStroke2);
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    background: var(--BEC-colorNeutralBackground2);
    position: relative;
    overflow: hidden;
    transition: border-color .15s, background .15s;
}

    .pua-cover-upload-label:hover[b-h0ezsp15ul] {
        border-color: var(--BEC-colorBrandBackground);
        background: color-mix(in srgb, var(--BEC-colorBrandBackground) 5%, transparent);
    }

    .pua-cover-upload-label i[b-h0ezsp15ul] { color: var(--BEC-colorBrandBackground); }

/* ── Upload queue (pending files bar) ────────────────────── */
.pua-upload-queue[b-h0ezsp15ul] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground2);
    flex-shrink: 0;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

.pua-upload-queue__icon[b-h0ezsp15ul] {
    color: var(--BEC-colorBrandBackground);
    font-size: 13px;
}

.pua-upload-queue__status[b-h0ezsp15ul] {
    font-weight: 500;
    flex-shrink: 0;
}

.pua-upload-queue__names[b-h0ezsp15ul] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
}

.pua-upload-queue__chip[b-h0ezsp15ul] {
    background: var(--BEC-colorNeutralBackground3, #f0f0f0);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2);
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pua-upload-queue__chip--more[b-h0ezsp15ul] {
    background: #e8f0fe;
    color: var(--BEC-colorBrandBackground);
    border-color: #b3c8fb;
}

.pua-upload-queue__actions[b-h0ezsp15ul] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.pua-error-inline[b-h0ezsp15ul] {
    font-size: 11px;
    color: #c0392b;
    background: #fef0ee;
    border: 1px solid #f5c6c0;
    border-radius: 4px;
    padding: 2px 8px;
}

/* ── Badges ───────────────────────────────────────────────── */
.pua-badge[b-h0ezsp15ul] {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.badge--active[b-h0ezsp15ul]   { background: #e6f4ea; color: #1a7f37; }
.badge--inactive[b-h0ezsp15ul] { background: #fef0cd; color: #7a5400; }

/* ── Buttons ──────────────────────────────────────────────── */
.pua-btn[b-h0ezsp15ul] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: opacity .15s, background .15s;
    white-space: nowrap;
}

    .pua-btn:disabled[b-h0ezsp15ul] { opacity: .55; cursor: not-allowed; }

.pua-btn--primary[b-h0ezsp15ul] { background: var(--BEC-colorBrandBackground); color: #fff; padding: 5px 10px; }
    .pua-btn--primary:hover:not(:disabled)[b-h0ezsp15ul] { opacity: .85; }

.pua-btn--ghost[b-h0ezsp15ul] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
    padding: 5px 10px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
}
    .pua-btn--ghost:hover:not(:disabled)[b-h0ezsp15ul] { background: var(--BEC-colorNeutralBackground3); }

.pua-btn--danger[b-h0ezsp15ul] { background: #c0392b; color: #fff; padding: 5px 10px; }
    .pua-btn--danger:hover:not(:disabled)[b-h0ezsp15ul] { opacity: .85; }

.pua-btn--sm[b-h0ezsp15ul]  { padding: 4px 9px; font-size: 12px; }
.pua-btn--xs[b-h0ezsp15ul]  { padding: 2px 6px; font-size: 11px; }

/* ── Empty / Loading ─────────────────────────────────────── */
.pua-empty[b-h0ezsp15ul] {
    padding: 24px 16px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    text-align: center;
}

.pua-empty--center[b-h0ezsp15ul] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    text-align: center;
    min-height: 180px;
}

/* ── Overlay / Modal ─────────────────────────────────────── */
.pua-overlay[b-h0ezsp15ul] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pua-modal[b-h0ezsp15ul] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: 10px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    overflow: hidden;
}

.pua-modal__header[b-h0ezsp15ul] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.pua-modal__close[b-h0ezsp15ul] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    color: var(--BEC-colorNeutralForeground3);
    padding: 4px;
    line-height: 1;
}

.pua-modal__body[b-h0ezsp15ul] {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .pua-modal__body label[b-h0ezsp15ul] {
        font-size: 12px;
        font-weight: 600;
        color: var(--BEC-colorNeutralForeground2);
        margin-bottom: -2px;
    }

.pua-modal__footer[b-h0ezsp15ul] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    flex-shrink: 0;
}

/* ── Form controls ───────────────────────────────────────── */
.pua-input[b-h0ezsp15ul], .pua-textarea[b-h0ezsp15ul] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 5px;
    font-size: 13px;
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground1);
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color .15s;
}

    .pua-input:focus[b-h0ezsp15ul], .pua-textarea:focus[b-h0ezsp15ul] { border-color: var(--BEC-colorBrandBackground); }

.pua-textarea[b-h0ezsp15ul] { resize: vertical; min-height: 70px; }

.pua-toggle[b-h0ezsp15ul] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
}

.pua-cover-preview[b-h0ezsp15ul] {
    width: 100%;
    max-height: 130px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

/* ── Error ───────────────────────────────────────────────── */
.pua-error[b-h0ezsp15ul] {
    background: #fef0ee;
    color: #c0392b;
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 5px;
    border: 1px solid #f5c6c0;
}

/* ── Delete confirm ──────────────────────────────────────── */
.pua-confirm[b-h0ezsp15ul] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: 10px;
    padding: 22px;
    max-width: 360px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}

    .pua-confirm p[b-h0ezsp15ul] { font-size: 14px; margin: 0 0 16px; color: var(--BEC-colorNeutralForeground1); }

.pua-confirm__actions[b-h0ezsp15ul] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Lightbox ────────────────────────────────────────────── */
.pua-lightbox[b-h0ezsp15ul] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pua-lightbox__content[b-h0ezsp15ul] {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 90vw;
    max-height: 90vh;
    background: #111;
    border-radius: 10px;
    overflow: hidden;
}

.pua-lightbox__close[b-h0ezsp15ul] {
    position: absolute;
    top: 10px;
    right: 12px;
    background: rgba(0,0,0,.6);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    z-index: 10;
}

.pua-lightbox__nav[b-h0ezsp15ul] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.55);
    border: none;
    color: #fff;
    width: 40px;
    height: 60px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    z-index: 10;
    transition: background .15s;
}

    .pua-lightbox__nav:hover[b-h0ezsp15ul] { background: rgba(0,0,0,.8); }
    .pua-lightbox__nav--prev[b-h0ezsp15ul] { left: 8px; }
    .pua-lightbox__nav--next[b-h0ezsp15ul] { right: 8px; }

.pua-lightbox__media[b-h0ezsp15ul] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 200px;
    overflow: hidden;
}

.pua-lightbox__img[b-h0ezsp15ul] {
    max-width: 80vw;
    max-height: 72vh;
    object-fit: contain;
    display: block;
}

.pua-lightbox__video[b-h0ezsp15ul] {
    max-width: 80vw;
    max-height: 72vh;
    display: block;
}

.pua-lightbox__footer[b-h0ezsp15ul] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(0,0,0,.6);
    flex-shrink: 0;
}

.pua-lightbox__caption[b-h0ezsp15ul] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.pua-lightbox__caption-text[b-h0ezsp15ul] {
    font-size: 13px;
    color: #d1d5db;
    cursor: pointer;
}

    .pua-lightbox__caption-text:hover[b-h0ezsp15ul] { color: #fff; }

.pua-lightbox__caption-input[b-h0ezsp15ul] {
    flex: 1;
    padding: 5px 8px;
    border-radius: 4px;
    border: 1px solid #4b5563;
    background: #1f2937;
    color: #f9fafb;
    font-size: 13px;
    outline: none;
}

.pua-lightbox__caption-edit[b-h0ezsp15ul] {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 12px;
}

    .pua-lightbox__caption-edit:hover[b-h0ezsp15ul] { color: #fff; }

.pua-lightbox__counter[b-h0ezsp15ul] {
    font-size: 12px;
    color: #9ca3af;
    flex-shrink: 0;
}

/* ── Spinner ─────────────────────────────────────────────── */
.pua-spinner[b-h0ezsp15ul] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pua-spin-b-h0ezsp15ul .7s linear infinite;
}

.pua-spinner--dark[b-h0ezsp15ul] {
    border-color: rgba(0,0,0,.15);
    border-top-color: var(--BEC-colorBrandBackground);
}

@keyframes pua-spin-b-h0ezsp15ul { to { transform: rotate(360deg); } }

@keyframes pua-shimmer-b-h0ezsp15ul {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
/* /Components/Pages/MainLayout/Intranet/ProjectUpdatesViewer/ProjectUpdatesViewer.razor.rz.scp.css */
/* ── Root layout ── */
.puv-root[b-wglworwsd0] {
    display: flex;
    height: calc(100vh - 60px);
    overflow: hidden;
    background: #f9fafb;
    gap: 0;
}

/* ── Sidebar ── */
.puv-sidebar[b-wglworwsd0] {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    overflow: hidden;
}

.puv-sidebar__header[b-wglworwsd0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.puv-back-btn[b-wglworwsd0] {
    width: 28px;
    height: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.puv-back-btn:hover[b-wglworwsd0] { background: #f3f4f6; color: #111827; border-color: #d1d5db; }

.puv-sidebar__title[b-wglworwsd0] {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
}

.puv-sidebar__list[b-wglworwsd0] {
    list-style: none;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
    flex: 1;
}

/* ── Project list item ── */
.puv-project-item[b-wglworwsd0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    margin-bottom: 2px;
}
.puv-project-item:hover[b-wglworwsd0] { background: #f3f4f6; }
.puv-project-item.active[b-wglworwsd0] { background: #eef2ff; }

.puv-project-item__cover[b-wglworwsd0] {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 16px;
}
.puv-project-item__cover img[b-wglworwsd0] { width: 100%; height: 100%; object-fit: cover; }

.puv-project-item__info[b-wglworwsd0] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.puv-project-item__title[b-wglworwsd0] {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.puv-project-item.active .puv-project-item__title[b-wglworwsd0] { color: #4f46e5; }
.puv-project-item__meta[b-wglworwsd0] {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

/* ── Right panel ── */
.puv-panel[b-wglworwsd0] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* fallback header when no cover image */
.puv-panel__header[b-wglworwsd0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.puv-panel__title[b-wglworwsd0] {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
}
.puv-panel__desc[b-wglworwsd0] {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}
.puv-panel__count[b-wglworwsd0] {
    margin-left: auto;
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
    flex-shrink: 0;
}

/* cover banner */
.puv-panel__banner[b-wglworwsd0] {
    position: relative;
    width: 100%;
    height: 180px;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
    border-bottom: 1px solid #e5e7eb;
}
.puv-panel__banner img[b-wglworwsd0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}
.puv-panel__banner:hover img[b-wglworwsd0] {
    transform: scale(1.03);
}
.puv-panel__banner-overlay[b-wglworwsd0] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 14px 16px;
    transition: background 0.2s ease;
}
.puv-panel__banner:hover .puv-panel__banner-overlay[b-wglworwsd0] {
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
}
.puv-panel__banner-info[b-wglworwsd0] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.puv-panel__banner-title[b-wglworwsd0] {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.puv-panel__banner-desc[b-wglworwsd0] {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 500px;
}
.puv-panel__banner-expand[b-wglworwsd0] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}
.puv-panel__banner:hover .puv-panel__banner-expand[b-wglworwsd0] {
    opacity: 1;
}
.puv-panel__banner-expand:hover[b-wglworwsd0] {
    background: rgba(255,255,255,0.3);
}

.puv-panel__body[b-wglworwsd0] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

/* ── Media grid ── */
.puv-media-grid[b-wglworwsd0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.puv-media-thumb[b-wglworwsd0] {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f4f6;
    cursor: pointer;
    border: 1px solid #e5e7eb;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.puv-media-thumb:hover[b-wglworwsd0] {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.puv-media-thumb img[b-wglworwsd0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.puv-media-thumb__video-wrap[b-wglworwsd0] {
    position: relative;
    width: 100%;
    height: 100%;
}
.puv-media-thumb__video-wrap img[b-wglworwsd0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.puv-media-thumb__no-thumb[b-wglworwsd0] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1f2937;
    color: #6b7280;
    font-size: 24px;
}
.puv-media-thumb__play[b-wglworwsd0] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.25);
    color: #fff;
    font-size: 14px;
}

/* skeleton — uses transform:translateX on ::after to avoid paint triggers */
@keyframes puv-shimmer-b-wglworwsd0 {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.puv-media-thumb--skeleton[b-wglworwsd0] {
    background: #f3f4f6;
    position: relative;
    overflow: hidden;
    cursor: default;
}
.puv-media-thumb--skeleton:hover[b-wglworwsd0] { transform: none; box-shadow: none; }
.puv-media-thumb--skeleton[b-wglworwsd0]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
    animation: puv-shimmer-b-wglworwsd0 1.4s ease infinite;
}

/* sidebar skeleton */
.puv-project-item--skeleton[b-wglworwsd0] { cursor: default; pointer-events: none; }
.puv-sk[b-wglworwsd0] {
    background: #f3f4f6;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.puv-sk[b-wglworwsd0]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
    animation: puv-shimmer-b-wglworwsd0 1.4s ease infinite;
}
.puv-project-item--skeleton .puv-project-item__cover[b-wglworwsd0] {
    background: #f3f4f6;
    position: relative;
    overflow: hidden;
    border: none;
}
.puv-project-item--skeleton .puv-project-item__cover[b-wglworwsd0]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
    animation: puv-shimmer-b-wglworwsd0 1.4s ease infinite;
}

/* ── Pagination ── */
.puv-pagination[b-wglworwsd0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 0 0;
}
.puv-page-btn[b-wglworwsd0] {
    width: 32px;
    height: 32px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.15s ease;
}
.puv-page-btn:hover:not(:disabled)[b-wglworwsd0] { background: #f3f4f6; border-color: #c7d2fe; color: #4f46e5; }
.puv-page-btn:disabled[b-wglworwsd0] { opacity: 0.4; cursor: not-allowed; }
.puv-page-info[b-wglworwsd0] { font-size: 13px; color: #6b7280; font-weight: 500; }

/* ── Empty state ── */
.puv-empty[b-wglworwsd0] {
    padding: 20px 16px;
    font-size: 13px;
    color: #9ca3af;
    text-align: center;
}
.puv-empty--center[b-wglworwsd0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 8px;
    font-size: 14px;
    color: #9ca3af;
}

/* ── Lightbox ── */
.puv-lightbox[b-wglworwsd0] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.puv-lightbox__content[b-wglworwsd0] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 92vw;
    max-height: 92vh;
}
.puv-lightbox__close[b-wglworwsd0] {
    position: absolute;
    top: -44px;
    right: 0;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.15s;
}
.puv-lightbox__close:hover[b-wglworwsd0] { background: rgba(255,255,255,0.25); }

.puv-lightbox__nav[b-wglworwsd0] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: background 0.15s;
}
.puv-lightbox__nav:hover[b-wglworwsd0] { background: rgba(255,255,255,0.3); }
.puv-lightbox__nav--prev[b-wglworwsd0] { left: -56px; }
.puv-lightbox__nav--next[b-wglworwsd0] { right: -56px; }

.puv-lightbox__media[b-wglworwsd0] {
    display: flex;
    align-items: center;
    justify-content: center;
}
.puv-lightbox__img[b-wglworwsd0] {
    max-width: 88vw;
    max-height: 80vh;
    border-radius: 8px;
    object-fit: contain;
}
.puv-lightbox__video[b-wglworwsd0] {
    max-width: 88vw;
    max-height: 80vh;
    border-radius: 8px;
}

.puv-lightbox__footer[b-wglworwsd0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 4px 0;
    gap: 12px;
}
.puv-lightbox__footer--counter-only[b-wglworwsd0] { justify-content: center; }
.puv-lightbox__caption[b-wglworwsd0] {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    flex: 1;
}
.puv-lightbox__counter[b-wglworwsd0] {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .puv-root[b-wglworwsd0] { flex-direction: column; height: auto; }
    .puv-sidebar[b-wglworwsd0] { width: 100%; height: auto; border-right: none; border-bottom: 1px solid #e5e7eb; }
    .puv-sidebar__list[b-wglworwsd0] { max-height: 220px; }
    .puv-panel[b-wglworwsd0] { height: auto; min-height: 400px; }
    .puv-lightbox__nav--prev[b-wglworwsd0] { left: -44px; }
    .puv-lightbox__nav--next[b-wglworwsd0] { right: -44px; }
}
/* /Components/Pages/MainLayout/Inventory/InventoryCatalog/InventoryCatalog.razor.rz.scp.css */
/* ========================================
   INVENTORY CATALOG — CATALOG IMAGES GALLERY
   Virtualized (row-based) grid over ~18k catalog images.
   ======================================== */

.catalog-toolbar[b-w7mf1nshi5] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    padding: var(--BEC-spacingHorizontalS) 0 var(--BEC-spacingHorizontalM);
}

.catalog-search-box[b-w7mf1nshi5] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    flex: 1;
    max-width: 360px;
    padding: 8px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground1);
}

.catalog-search-box i[b-w7mf1nshi5] {
    color: var(--BEC-colorNeutralForeground3);
}

.catalog-search-box input[b-w7mf1nshi5] {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground1);
}

.catalog-extension-filter[b-w7mf1nshi5] {
    padding: 8px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase300);
}

.catalog-gallery-scroll[b-w7mf1nshi5] {
    height: calc(100vh - 240px);
    overflow-y: auto;
    padding-right: 4px;
}

.catalog-image-row[b-w7mf1nshi5] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--BEC-spacingHorizontalM);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.catalog-image-card[b-w7mf1nshi5] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.catalog-image-card:hover[b-w7mf1nshi5] {
    transform: translateY(-2px);
    box-shadow: var(--BEC-shadow8);
    border-color: var(--BEC-themePrimary);
}

.catalog-image-card .item-image-container[b-w7mf1nshi5] {
    height: 150px;
}

.catalog-image-meta[b-w7mf1nshi5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
}

.catalog-image-name[b-w7mf1nshi5] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.catalog-image-ext[b-w7mf1nshi5] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
}

.catalog-image-card-skeleton[b-w7mf1nshi5] {
    height: 190px;
    background: linear-gradient(90deg, var(--BEC-colorNeutralBackground2) 25%, var(--BEC-colorNeutralBackground3) 37%, var(--BEC-colorNeutralBackground2) 63%);
    background-size: 400% 100%;
    animation: catalog-skeleton-pulse-b-w7mf1nshi5 1.4s ease infinite;
}

@keyframes catalog-skeleton-pulse-b-w7mf1nshi5 {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.catalog-lightbox-overlay[b-w7mf1nshi5] {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalog-lightbox-content[b-w7mf1nshi5] {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.catalog-lightbox-content img[b-w7mf1nshi5] {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--BEC-borderRadiusMedium);
}

.catalog-lightbox-caption[b-w7mf1nshi5] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    color: #fff;
}

/* Visual column count is CSS-only — Virtualize measures each row's real rendered
   height, so responsive reflow here doesn't affect the row-batching in code-behind. */
@media (max-width: 1200px) {
    .catalog-image-row[b-w7mf1nshi5] { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 700px) {
    .catalog-image-row[b-w7mf1nshi5] { grid-template-columns: repeat(2, 1fr); }
}
/* /Components/Pages/MainLayout/ITSupport/ITConsole/ITConsole.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────────
   ITConsole.razor.css - IT Admin Console
   BEC Design System Compliant (Immersive Redesign)
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Page Layout ── */
.BEC-Immersive-Layout[b-zyf9oadj6d] {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* No padding, content spreads to edges */
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    gap: 0;
    overflow: hidden;
}

/* ── Header Section ── */
.BEC-Header[b-zyf9oadj6d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 16px 24px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    box-shadow: var(--BEC-shadow2, 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14));
}

.BEC-Header-Left[b-zyf9oadj6d] {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* ── Cross-Navigation Link ── */
.BEC-CrossNav-Link[b-zyf9oadj6d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 6px;
    background: transparent;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    text-decoration: none;
    white-space: nowrap;
}

.BEC-CrossNav-Link:hover[b-zyf9oadj6d] {
    background: var(--BEC-colorBrandBackground2, #e8ebf9);
    border-color: var(--BEC-colorBrandStroke1, #0078d4);
}

.BEC-CrossNav-Link:focus-visible[b-zyf9oadj6d] {
    outline: 2px solid var(--BEC-colorBrandStroke1, #0078d4);
    outline-offset: 2px;
}

/* ── Success Toast ── */
.BEC-Success-Toast[b-zyf9oadj6d] {
    padding: 0 24px;
    animation: slideDown-b-zyf9oadj6d var(--BEC-durationSlow, 300ms) var(--BEC-curveDecelerateMin, cubic-bezier(0.33, 0, 0.1, 1));
}

@keyframes slideDown-b-zyf9oadj6d {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Attachment Upload Progress ── */
.BEC-Upload-Progress[b-zyf9oadj6d] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 24px;
    background: var(--BEC-colorBrandBackground2, #e8ebf9);
    border-bottom: 1px solid var(--BEC-colorBrandStroke1, #0078d4);
    animation: slideDown-b-zyf9oadj6d var(--BEC-durationSlow, 300ms) var(--BEC-curveDecelerateMin, cubic-bezier(0.33, 0, 0.1, 1));
}

.BEC-Upload-Progress-Header[b-zyf9oadj6d] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.BEC-Upload-Progress-Text[b-zyf9oadj6d] {
    font-size: 13px;
    font-weight: 400;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.BEC-Upload-Progress-Text strong[b-zyf9oadj6d] {
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

[b-zyf9oadj6d] .BEC-Upload-Progress .fluent-progress-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--BEC-colorNeutralStroke2, #c7c7c7);
}

[b-zyf9oadj6d] .BEC-Upload-Progress fluent-progress-bar {
    --progress-bar-height: 4px;
}

.BEC-Title[b-zyf9oadj6d] {
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 0;
    line-height: 1.4;
}

/* ── Stats Group ── */
.BEC-Stat-Group[b-zyf9oadj6d] {
    display: flex;
    gap: 16px;
    margin-left: auto;
}

.BEC-Header-Actions[b-zyf9oadj6d] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.BEC-Header-Right[b-zyf9oadj6d] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

[b-zyf9oadj6d] .BEC-Header-Actions .e-btn.e-primary {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    height: 32px;
    line-height: 1;
}

.BEC-Stat[b-zyf9oadj6d] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
}

.BEC-Stat-Value[b-zyf9oadj6d] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.BEC-Stat-Label[b-zyf9oadj6d] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.BEC-Stat--accent .BEC-Stat-Value[b-zyf9oadj6d] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.BEC-Stat--warning .BEC-Stat-Value[b-zyf9oadj6d] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
}

.BEC-Stat--danger .BEC-Stat-Value[b-zyf9oadj6d] {
    color: var(--BEC-colorPaletteRedForeground1, #bc2f32);
}

.BEC-Stat--critical .BEC-Stat-Value[b-zyf9oadj6d] {
    color: var(--BEC-colorPaletteDarkOrangeForeground1, #da3b01);
}

.BEC-Stat--success .BEC-Stat-Value[b-zyf9oadj6d] {
    color: var(--BEC-colorPaletteGreenForeground1, #107c10);
}

/* ── Header Refresh Button (Dashboard tab) ── */
[b-zyf9oadj6d] .BEC-Header-Refresh {
    min-width: auto !important;
    height: 28px !important;
    padding: 0 8px !important;
    font-size: 12px;
    border-radius: 4px;
    margin-left: 4px;
}

/* ── Tabs Container ── */
.BEC-Tabs-Container[b-zyf9oadj6d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Grid/Tabs sit directly on background */
}

/* ── Immersive Tabs ── */
[b-zyf9oadj6d] .BEC-Tabs-Immersive .e-tab-header {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    padding: 0 16px;
}

[b-zyf9oadj6d] .BEC-Tabs-Immersive .e-tab-header .e-tab-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

[b-zyf9oadj6d] .BEC-Tabs-Immersive .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

[b-zyf9oadj6d] .BEC-Tabs-Immersive {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-zyf9oadj6d] .BEC-Tabs-Immersive .e-content {
    background: transparent !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-zyf9oadj6d] .BEC-Tabs-Immersive .e-content > .e-item.e-active {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* ── Tab Content Immersive ── */
.BEC-Tab-Content-Immersive[b-zyf9oadj6d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 8px 16px;
    gap: 8px;
    overflow: hidden;
    min-height: 0;
}

/* ── Filter Bar ── */
.BEC-Filter-Bar[b-zyf9oadj6d] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 8px; /* Spacing before grid */
}

.BEC-Chip-Group[b-zyf9oadj6d] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.BEC-Chip[b-zyf9oadj6d] {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 16px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorNeutralForeground2, #424242);
    cursor: pointer;
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    min-height: 32px;
}

.BEC-Chip:hover[b-zyf9oadj6d] {
    border-color: var(--BEC-colorBrandForeground1, #0078d4);
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.BEC-Chip:focus-visible[b-zyf9oadj6d] {
    outline: 2px solid var(--BEC-colorBrandStroke1, #0078d4);
    outline-offset: 2px;
}

.BEC-Chip-Active[b-zyf9oadj6d] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    border-color: var(--BEC-colorBrandBackground, #0078d4);
    color: var(--BEC-colorNeutralForegroundOnBrand, #ffffff);
}

.BEC-Chip-Danger.BEC-Chip-Active[b-zyf9oadj6d] {
    background: var(--BEC-colorPaletteRedBackground3, #d13438);
    border-color: var(--BEC-colorPaletteRedBackground3, #d13438);
}

.BEC-Search-Box[b-zyf9oadj6d] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 6px;
    min-width: 220px;
    margin-left: auto;
}

.BEC-Search-Box input[b-zyf9oadj6d] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    outline: none;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

[b-zyf9oadj6d] .BEC-Icon-Button {
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

/* ── Immersive Grid Wrapper ── */
.BEC-Grid-Immersive-Wrapper[b-zyf9oadj6d] {
    background: var(--BEC-colorNeutralBackground1);
    box-shadow: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── SfGrid flex chain: make the grid fill its container ── */
[b-zyf9oadj6d] .BEC-Grid-Immersive-Wrapper .e-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

[b-zyf9oadj6d] .BEC-Grid-Immersive-Wrapper .e-grid .e-gridcontent {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

[b-zyf9oadj6d] .BEC-Grid-Immersive-Wrapper .e-grid .e-gridcontent .e-content {
    overflow: auto !important;
}

/* ── Loading State ── */
.BEC-Loading-State[b-zyf9oadj6d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    min-height: 300px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    font-size: 14px;
}

/* ── Skeleton Shimmer Loading (Queue tab) ── */
.BEC-Skeleton-Grid[b-zyf9oadj6d] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
}

.BEC-Skeleton-Header[b-zyf9oadj6d] {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

.BEC-Skeleton-Row[b-zyf9oadj6d] {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

.BEC-Skeleton-Cell[b-zyf9oadj6d] {
    height: 16px;
}

.BEC-Skeleton-Cell--xs[b-zyf9oadj6d] { width: 60px; }
.BEC-Skeleton-Cell--sm[b-zyf9oadj6d] { width: 80px; }
.BEC-Skeleton-Cell--md[b-zyf9oadj6d] { width: 120px; }
.BEC-Skeleton-Cell--lg[b-zyf9oadj6d] { width: 180px; }

/* ── Empty State ── */
.BEC-Empty-State[b-zyf9oadj6d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    min-height: 400px;
    padding: 48px 24px;
    text-align: center;
}

.BEC-Empty-Icon[b-zyf9oadj6d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.BEC-Empty-Title[b-zyf9oadj6d] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.BEC-Empty-Text[b-zyf9oadj6d] {
    margin: 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    line-height: 1.5;
}

/* ── Grid / Cell / SLA / Badge / Progress styles ──
   SSOT: css/modules/it-support-grid.css (scoped via .bec-its)
   ─────────────────────────────────────────────── */

.BEC-Badge[b-zyf9oadj6d] {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.BEC-Badge-Success[b-zyf9oadj6d] { background: var(--BEC-colorPaletteGreenBackground1, #f1faf1); color: var(--BEC-colorPaletteGreenForeground1, #107c10); }
.BEC-Badge-Neutral[b-zyf9oadj6d] { background: var(--BEC-colorNeutralBackground3, #f5f5f5); color: var(--BEC-colorNeutralForeground2, #424242); }

/* ── Load More (cursor pagination) ── */
.its-load-more-container[b-zyf9oadj6d] {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

.its-load-more[b-zyf9oadj6d] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)),
                border-color var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.its-load-more:hover:not(:disabled)[b-zyf9oadj6d] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    border-color: var(--BEC-colorBrandStroke1, #0078d4);
}

.its-load-more:disabled[b-zyf9oadj6d] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Small Progress Ring (replaces inline style) ── */
.its-progress-sm[b-zyf9oadj6d] {
    width: 16px;
    height: 16px;
}

/* ── Action Group (Category grid) ── */
[b-zyf9oadj6d] .BEC-Action-Group {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive Breakpoints
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet Landscape: ≤ 1024px ── */
@media (max-width: 1024px) {
    .BEC-Header[b-zyf9oadj6d] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .BEC-Header-Left[b-zyf9oadj6d] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .BEC-Stat-Group[b-zyf9oadj6d] {
        margin-left: auto;
        flex-wrap: wrap;
        gap: 8px;
    }

    .BEC-Chip-Group[b-zyf9oadj6d] {
        flex-wrap: wrap;
    }

    .BEC-Tab-Content-Immersive[b-zyf9oadj6d] {
        padding: 8px 12px;
    }

    [b-zyf9oadj6d] .BEC-Tabs-Immersive .e-tab-header .e-tab-text {
        font-size: 13px;
    }

    .BEC-Stat-Value[b-zyf9oadj6d] {
        font-size: 15px;
    }

    .BEC-Stat-Label[b-zyf9oadj6d] {
        font-size: 12px;
    }
}

/* ── Tablet Portrait: ≤ 768px ── */
@media (max-width: 768px) {
    .BEC-Header[b-zyf9oadj6d] {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
        gap: 12px;
    }

    .BEC-Header-Left[b-zyf9oadj6d] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }

    .BEC-Title[b-zyf9oadj6d] {
        font-size: 18px;
    }

    .BEC-Stat-Group[b-zyf9oadj6d] {
        margin-left: 0;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .BEC-Stat[b-zyf9oadj6d] {
        font-size: 12px;
    }

    .BEC-Stat-Value[b-zyf9oadj6d] {
        font-size: 14px;
    }

    .BEC-Header-Actions[b-zyf9oadj6d] {
        width: 100%;
        justify-content: stretch;
    }

    [b-zyf9oadj6d] .BEC-Header-Actions .e-btn {
        flex: 1;
    }

    .BEC-Filter-Bar[b-zyf9oadj6d] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .BEC-Search-Box[b-zyf9oadj6d] {
        width: 100%;
        margin-left: 0;
        min-width: unset;
    }

    .BEC-Chip-Group[b-zyf9oadj6d] {
        width: 100%;
    }

    .BEC-Tab-Content-Immersive[b-zyf9oadj6d] {
        padding: 8px;
    }

    .BEC-Empty-State[b-zyf9oadj6d] {
        min-height: 240px;
        padding: 24px 16px;
    }

    .BEC-Empty-Title[b-zyf9oadj6d] {
        font-size: 16px;
    }

    .BEC-Empty-Text[b-zyf9oadj6d] {
        font-size: 13px;
    }

    /* Reduce grid row height for denser display */
    [b-zyf9oadj6d] .BEC-Grid-Immersive-Wrapper .e-grid .e-row td {
        padding: 6px 8px;
        font-size: 12px;
    }

    [b-zyf9oadj6d] .BEC-Grid-Immersive-Wrapper .e-grid .e-headercell {
        font-size: 12px;
        padding: 6px 8px;
    }

    .BEC-Skeleton-Header[b-zyf9oadj6d],
    .BEC-Skeleton-Row[b-zyf9oadj6d] {
        gap: 8px;
        padding: 8px 16px;
    }
}

/* ── Mobile: ≤ 480px ── */
@media (max-width: 480px) {
    .BEC-Immersive-Layout[b-zyf9oadj6d] {
        overflow-x: hidden;
    }

    .BEC-Header[b-zyf9oadj6d] {
        padding: 8px 12px;
    }

    .BEC-Title[b-zyf9oadj6d] {
        font-size: 16px;
    }

    .BEC-Stat-Group[b-zyf9oadj6d] {
        display: none;
    }

    .BEC-Chip-Group[b-zyf9oadj6d] {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .BEC-Chip[b-zyf9oadj6d] {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .BEC-Chip-Group[b-zyf9oadj6d]::after {
        content: '';
        position: sticky;
        right: 0;
        width: 24px;
        background: linear-gradient(to right, transparent, var(--BEC-colorNeutralBackground2, #fafafa));
        pointer-events: none;
        flex-shrink: 0;
    }

    .BEC-Search-Box[b-zyf9oadj6d] {
        min-width: unset;
    }

    [b-zyf9oadj6d] .BEC-Header-Actions .e-btn {
        font-size: 13px;
        padding: 8px 8px;
    }

    .BEC-Empty-State[b-zyf9oadj6d] {
        min-height: 200px;
        padding: 16px 12px;
    }

    .BEC-Grid-Immersive-Wrapper[b-zyf9oadj6d] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .its-load-more[b-zyf9oadj6d] {
        width: 100%;
        justify-content: center;
    }

    .BEC-Tab-Content-Immersive[b-zyf9oadj6d] {
        padding: 4px 8px;
        gap: 4px;
    }

    [b-zyf9oadj6d] .BEC-Tabs-Immersive .e-tab-header {
        padding: 0 8px;
    }

    [b-zyf9oadj6d] .BEC-Tabs-Immersive .e-tab-header .e-tab-text {
        font-size: 12px;
    }
}
/* /Components/Pages/MainLayout/ITSupport/SharedComponents/CategoryFormDialog.razor.rz.scp.css */
/* ============================================================================
   CategoryFormDialog.razor.css
   IT Support — Category Create/Edit Dialog Scoped Styles
   Relies on shared sp-* classes from BEC_Theme.css for structure.
   Only adds module-specific refinements.
   ============================================================================ */

/* ── Focus Visible (WCAG 2.1 AA) ── */
button:focus-visible[b-2ph3ie2zmc],
input:focus-visible[b-2ph3ie2zmc],
select:focus-visible[b-2ph3ie2zmc],
[tabindex]:focus-visible[b-2ph3ie2zmc] {
    outline: 2px solid var(--BEC-colorBrandStroke1, #0078d4);
    outline-offset: 2px;
}

/* ── Loading Button Spinner ── */
[b-2ph3ie2zmc] .sp-footer .e-btn fluent-progress-ring {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

[b-2ph3ie2zmc] .sp-footer .e-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    font-size: 13px;
    padding: 6px 16px;
}

/* ── Sidebar Wrapper (CSS isolation bridge for Syncfusion SfSidebar) ── */
.its-sidebar-wrap[b-2ph3ie2zmc] {
    display: contents;
}

/* ── Responsive: Sidebar & Form Layout ── */
@media (max-width: 480px) {
    .its-sidebar-wrap[b-2ph3ie2zmc]  .e-sidebar {
        width: 100% !important;
        max-width: 100vw !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .its-sidebar-wrap[b-2ph3ie2zmc]  .e-sidebar {
        width: 90% !important;
        max-width: 90vw !important;
    }
}

/* ── Discard Confirmation Bar ── */
.its-discard-bar[b-2ph3ie2zmc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--BEC-colorStatusWarningBackground1, #fff4ce);
    border-bottom: 1px solid var(--BEC-colorStatusWarningBorder1, #fce100);
    flex-shrink: 0;
}

.its-discard-text[b-2ph3ie2zmc] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.its-discard-btn[b-2ph3ie2zmc] {
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)),
                color var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    line-height: 1.5;
}

.its-discard-btn--discard[b-2ph3ie2zmc] {
    background: var(--BEC-colorStatusDangerBackground1, #fde7e9);
    color: var(--BEC-colorStatusDangerForeground1, #a80000);
}

.its-discard-btn--discard:hover[b-2ph3ie2zmc] {
    background: var(--BEC-colorStatusDangerBackground2, #f9c5ca);
}

.its-discard-btn--keep[b-2ph3ie2zmc] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.its-discard-btn--keep:hover[b-2ph3ie2zmc] {
    background: var(--BEC-colorNeutralBackground4, #f0f0f0);
}
/* /Components/Pages/MainLayout/ITSupport/SharedComponents/CreateTicketWizard.razor.rz.scp.css */
/* ============================================================================
   CreateTicketWizard.razor.css
   IT Support — polished side panel wizard
   Relies on shared sp-* classes from BEC_Theme.css for structure.
   Only adds module-specific refinements.
   ============================================================================ */

/* ── Panel ── */
.sp-panel[b-lm0ypadcvj] {
    box-shadow: var(--BEC-shadow16, 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14));
}

/* ── Header — clean white, NOT gradient ── */
.sp-header[b-lm0ypadcvj] {
    padding: 16px 24px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

.sp-title[b-lm0ypadcvj] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 0;
    line-height: 1.3;
}

.sp-close-btn[b-lm0ypadcvj] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    cursor: pointer;
    transition: background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.sp-close-btn:hover[b-lm0ypadcvj] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

/* ── Section Intro ── */
.its-section-intro[b-lm0ypadcvj] {
    margin-bottom: 24px;
}

.its-section-intro h4[b-lm0ypadcvj] {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 0 0 4px 0;
}

.its-section-intro p[b-lm0ypadcvj] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    margin: 0;
    line-height: 1.5;
}

/* ── Body / Content ── */
.sp-body[b-lm0ypadcvj] {
    flex: 1;
    overflow: hidden;
}

.sp-content[b-lm0ypadcvj] {
    padding: 24px;
    overflow-y: auto;
    height: 100%;
}

/* ── Form ── */
.sp-form[b-lm0ypadcvj] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Form Groups — generous spacing ── */
.sp-form-group[b-lm0ypadcvj] {
    margin-bottom: 24px;
}

.sp-label[b-lm0ypadcvj] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin-bottom: 8px;
}

.sp-required[b-lm0ypadcvj] {
    color: var(--BEC-colorErrorForeground1, #dc2626);
    margin-left: 2px;
}

/* ── Syncfusion Field Overrides ── */
[b-lm0ypadcvj] .e-outline .e-input-group,
[b-lm0ypadcvj] .e-outline.e-input-group {
    border-radius: 6px !important;
    border-color: var(--BEC-colorNeutralStroke2, #c7c7c7) !important;
    transition: border-color var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)),
               box-shadow var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

[b-lm0ypadcvj] .e-outline .e-input-group:hover,
[b-lm0ypadcvj] .e-outline.e-input-group:hover {
    border-color: var(--BEC-colorBrandForeground1, #0078d4) !important;
}

[b-lm0ypadcvj] .e-outline .e-input-group.e-input-focus,
[b-lm0ypadcvj] .e-outline.e-input-group.e-input-focus {
    border-color: var(--BEC-colorBrandForeground1, #0078d4) !important;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandForeground1, #0078d4) !important;
}

/* Only one textarea in this wizard (Description field) — safe to scope globally */
[b-lm0ypadcvj] .e-outline textarea {
    min-height: 140px;
    resize: vertical;
}

/* ── Character Count ── */
.its-char-count[b-lm0ypadcvj] {
    margin-top: 8px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-align: right;
}

/* ── Loading State ── */
.its-loading-inline[b-lm0ypadcvj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border-radius: 6px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

/* ── Footer — subtle alt background ── */
.sp-footer[b-lm0ypadcvj] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border-top: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

/* ── Validation Messages ── */
[b-lm0ypadcvj] .validation-message {
    font-size: 12px;
    color: var(--BEC-colorErrorForeground1, #dc2626);
    margin-top: 4px;
}

/* ── Attachment Zone (compact) ── */
.its-attach-zone[b-lm0ypadcvj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1.5px dashed var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    transition: border-color var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)),
               background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.its-attach-zone:hover[b-lm0ypadcvj] {
    border-color: var(--BEC-colorBrandForeground1, #0078d4);
    background: rgba(0, 120, 212, 0.04);
}

.its-attach-hint[b-lm0ypadcvj] {
    color: var(--BEC-colorNeutralForeground2, #424242);
    font-size: 11px;
}

[b-lm0ypadcvj] .its-file-input {
    display: none !important;
}

/* ── File Chips ── */
.its-file-list[b-lm0ypadcvj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* .its-file-chip — SSOT: css/modules/it-support-grid.css */
/* .its-file-ext  — SSOT: css/modules/it-support-grid.css */

.its-file-name[b-lm0ypadcvj] {
    color: var(--BEC-colorNeutralForeground1, #242424);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.its-file-size[b-lm0ypadcvj] {
    color: var(--BEC-colorNeutralForeground2, #424242);
    font-size: 11px;
    white-space: nowrap;
}

.its-file-remove[b-lm0ypadcvj] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--BEC-colorNeutralForeground2, #424242);
    font-size: 10px;
    transition: background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)),
               color var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    padding: 0;
    flex-shrink: 0;
    position: relative;
}

.its-file-remove[b-lm0ypadcvj]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
}

.its-file-remove:hover[b-lm0ypadcvj] {
    background: #fde8e8;
    color: var(--BEC-colorErrorForeground1, #dc2626);
}

/* ── Progress Ring Sizes ── */
/* .its-progress-xs — SSOT: css/modules/it-support-grid.css */

[b-lm0ypadcvj] .its-progress-sm {
    width: 16px;
    height: 16px;
}

/* ── Loading Button — constrain spinner inside Syncfusion buttons ── */
[b-lm0ypadcvj] .sp-footer .e-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}

[b-lm0ypadcvj] .sp-footer .e-btn fluent-progress-ring {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── AI Suggestion Banner ── */
.its-suggestion-banner[b-lm0ypadcvj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--BEC-colorPalettePurpleBackground1, #f0eaff) 0%, var(--BEC-colorBrandBackground2, #e8ebf9) 100%);
    border: 1px solid var(--BEC-colorPalettePurpleBorder1, #d4c4f9);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.its-suggestion-banner.its-suggestion-loading[b-lm0ypadcvj] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border-color: var(--BEC-colorNeutralStroke2, #c7c7c7);
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.its-suggestion-apply[b-lm0ypadcvj] {
    margin-left: auto;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: var(--BEC-colorNeutralForegroundOnBrand, #ffffff);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.its-suggestion-apply:hover[b-lm0ypadcvj] {
    background: var(--BEC-colorBrandBackgroundHover, #106ebe);
}

.its-suggestion-dismiss[b-lm0ypadcvj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--BEC-colorNeutralForeground2, #424242);
    cursor: pointer;
    font-size: 10px;
}

.its-suggestion-dismiss:hover[b-lm0ypadcvj] {
    background: rgba(0, 0, 0, 0.06);
}

/* ── Focus Visible (E14: WCAG 2.1 AA) ── */
.its-file-remove:focus-visible[b-lm0ypadcvj],
.sp-alert-dismiss:focus-visible[b-lm0ypadcvj],
.its-suggestion-dismiss:focus-visible[b-lm0ypadcvj],
.its-suggestion-apply:focus-visible[b-lm0ypadcvj] {
    outline: 2px solid var(--BEC-colorBrandStroke1, #0078d4);
    outline-offset: 2px;
}

/* ── Sidebar Wrapper (CSS isolation bridge for Syncfusion SfSidebar) ── */
.its-sidebar-wrap[b-lm0ypadcvj] {
    display: contents;
}

/* ── Responsive: Sidebar & Form Layout ── */
@media (max-width: 480px) {
    .its-sidebar-wrap[b-lm0ypadcvj]  .e-sidebar {
        width: 100% !important;
        max-width: 100vw !important;
    }

    .sp-header[b-lm0ypadcvj] {
        padding: 12px 16px;
    }

    .sp-title[b-lm0ypadcvj] {
        font-size: 16px;
    }

    .sp-content[b-lm0ypadcvj] {
        padding: 16px;
    }

    .sp-footer[b-lm0ypadcvj] {
        padding: 12px 16px;
    }

    .sp-form-group[b-lm0ypadcvj] {
        margin-bottom: 16px;
    }

    .its-file-list[b-lm0ypadcvj] {
        flex-direction: column;
    }

    .its-file-chip[b-lm0ypadcvj] {
        max-width: 100%;
    }

    .its-suggestion-banner[b-lm0ypadcvj] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .its-suggestion-apply[b-lm0ypadcvj] {
        margin-left: 0;
        align-self: flex-end;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .its-sidebar-wrap[b-lm0ypadcvj]  .e-sidebar {
        width: 90% !important;
        max-width: 90vw !important;
    }

    .sp-content[b-lm0ypadcvj] {
        padding: 20px;
    }
}

/* ── Discard Confirmation Bar ── */
.its-discard-bar[b-lm0ypadcvj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--BEC-colorStatusWarningBackground1, #fff4ce);
    border-bottom: 1px solid var(--BEC-colorStatusWarningBorder1, #fce100);
    flex-shrink: 0;
}

.its-discard-text[b-lm0ypadcvj] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.its-discard-btn[b-lm0ypadcvj] {
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)),
               color var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    line-height: 1.5;
}

.its-discard-btn--discard[b-lm0ypadcvj] {
    background: var(--BEC-colorStatusDangerBackground1, #fde7e9);
    color: var(--BEC-colorStatusDangerForeground1, #a80000);
}

.its-discard-btn--discard:hover[b-lm0ypadcvj] {
    background: var(--BEC-colorStatusDangerBackground2, #f9c5ca);
}

.its-discard-btn--keep[b-lm0ypadcvj] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.its-discard-btn--keep:hover[b-lm0ypadcvj] {
    background: var(--BEC-colorNeutralBackground4, #f0f0f0);
}
/* /Components/Pages/MainLayout/ITSupport/SharedComponents/OperationsDashboard.razor.rz.scp.css */
/* [UID: OPS_DASHBOARD] — Operations Dashboard Scoped Styles */
/* ─────────────────────────────────────────────────────────────────────────────
   OperationsDashboard.razor.css — 60-KPI Operations Dashboard
   BEC Design System Compliant — All tokens from BEC_Theme.css (SSOT)
   8px grid, no hardcoded colors, no :root, no inline styles
   ───────────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   Root Container (CSS isolation boundary)
   ══════════════════════════════════════════════════════════════ */

.ops-root[b-qws5ft1yzv] {
    /* Brand color decomposed to RGB channels for heatmap alpha compositing */
    --ops-brand-rgb: 0, 120, 212;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden; /* Establish scroll containment for .ops-dashboard */
}

/* ══════════════════════════════════════════════════════════════
   Loading / Error / Empty States
   ══════════════════════════════════════════════════════════════ */

/* .skeleton + @keyframes shimmer — SSOT: css/modules/it-support-grid.css */

.skeleton-row[b-qws5ft1yzv] {
    height: 16px;
    margin-bottom: 8px;
    border-radius: var(--BEC-borderRadiusSmall, 2px);
}

.ops-loading[b-qws5ft1yzv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    padding: 24px;
}

.ops-loading .skeleton-card[b-qws5ft1yzv] {
    height: 120px;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
}

.ops-empty[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 24px;
    border: 2px dashed var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-align: center;
}

.ops-empty h3[b-qws5ft1yzv] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.ops-empty p[b-qws5ft1yzv] {
    margin: 0;
    font-size: 14px;
    max-width: 400px;
}

.ops-error[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 24px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    flex: 1;
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   Dashboard Container
   ══════════════════════════════════════════════════════════════ */

.ops-dashboard[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 16px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;        /* Fill parent flex container (replaces fragile height:100%) */
    min-height: 0;  /* Allow shrinking below content height to enable scrolling */
}

/* ══════════════════════════════════════════════════════════════
   Hero Section (Summary KPIs — toolbar moved to page header)
   ══════════════════════════════════════════════════════════════ */

.ops-hero-section[b-qws5ft1yzv] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Hero KPI Strip (single scrollable row, no side borders) ── */

.ops-hero-strip[b-qws5ft1yzv] {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    flex: 1;
    min-width: 0;
}

.ops-hero-card[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-bottom: 3px solid transparent;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    box-shadow: var(--BEC-shadow4, 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14));
    transition: box-shadow var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    min-height: 72px;
    min-width: 120px;
    flex: 1 1 0;
}

.ops-hero-card:hover[b-qws5ft1yzv] {
    box-shadow: var(--BEC-shadow8, 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14));
}

.ops-hero-card.success[b-qws5ft1yzv] { border-bottom-color: var(--BEC-colorSuccessForeground1, #107c10); }
.ops-hero-card.warning[b-qws5ft1yzv] { border-bottom-color: var(--BEC-colorWarningForeground1, #d83b01); }
.ops-hero-card.danger[b-qws5ft1yzv]  { border-bottom-color: var(--BEC-colorErrorForeground1, #bc2f32); }

.ops-hero-val[b-qws5ft1yzv] {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.ops-hero-lbl[b-qws5ft1yzv] {
    font-size: 11px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-align: center;
    margin-top: 4px;
    white-space: nowrap;
}

/* Hero-specific: colored text only, NO border-left */
.ops-hero-primary .ops-hero-val[b-qws5ft1yzv] {
    color: var(--BEC-colorBrandBackground, #0078d4);
}

/* ══════════════════════════════════════════════════════════════
   KPI Health Color Classes (SSOT — reused everywhere)
   ══════════════════════════════════════════════════════════════ */

.ops-kpi-success .ops-hero-val[b-qws5ft1yzv],
.ops-kpi-success .ops-metric-val[b-qws5ft1yzv] {
    color: var(--BEC-colorSuccessForeground1, #107c10);
}

.ops-kpi-warning .ops-hero-val[b-qws5ft1yzv],
.ops-kpi-warning .ops-metric-val[b-qws5ft1yzv] {
    color: var(--BEC-colorWarningForeground1, #d83b01);
}

.ops-kpi-danger .ops-hero-val[b-qws5ft1yzv],
.ops-kpi-danger .ops-metric-val[b-qws5ft1yzv] {
    color: var(--BEC-colorErrorForeground1, #bc2f32);
}

/* Metric cards inside sections get colored left border */
.ops-section-body .ops-kpi-success[b-qws5ft1yzv] {
    border-left: 3px solid var(--BEC-colorSuccessForeground1, #107c10);
}

.ops-section-body .ops-kpi-warning[b-qws5ft1yzv] {
    border-left: 3px solid var(--BEC-colorWarningForeground1, #d83b01);
}

.ops-section-body .ops-kpi-danger[b-qws5ft1yzv] {
    border-left: 3px solid var(--BEC-colorErrorForeground1, #bc2f32);
}

.ops-section-body .ops-kpi-neutral[b-qws5ft1yzv] {
    border-left: 3px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
}

/* ── Growth Indicators ── */
.ops-growth-up .ops-hero-val[b-qws5ft1yzv],
.ops-growth-up .ops-metric-val[b-qws5ft1yzv] {
    color: var(--BEC-colorErrorForeground1, #bc2f32);
}

.ops-growth-down .ops-hero-val[b-qws5ft1yzv],
.ops-growth-down .ops-metric-val[b-qws5ft1yzv] {
    color: var(--BEC-colorSuccessForeground1, #107c10);
}

.ops-growth-flat .ops-hero-val[b-qws5ft1yzv],
.ops-growth-flat .ops-metric-val[b-qws5ft1yzv] {
    color: var(--BEC-colorNeutralForeground2, #424242);
}

/* ══════════════════════════════════════════════════════════════
   Section Containers (Collapsible)
   ══════════════════════════════════════════════════════════════ */

.ops-section[b-qws5ft1yzv] {
    margin-bottom: 24px;
    overflow: hidden;
    flex-shrink: 0;
}

.ops-section-header[b-qws5ft1yzv] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
}

.ops-section-title[b-qws5ft1yzv] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 0;
    flex: 1;
}

.ops-section-badge[b-qws5ft1yzv] {
    font-size: 10px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2, #424242);
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

.ops-section-body[b-qws5ft1yzv] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ══════════════════════════════════════════════════════════════
   Grid Row Layouts (8px grid)
   ══════════════════════════════════════════════════════════════ */

.ops-row[b-qws5ft1yzv] {
    display: grid;
    gap: 8px;
}

.ops-row--1col[b-qws5ft1yzv] { grid-template-columns: 1fr; }
.ops-row--2col[b-qws5ft1yzv] { grid-template-columns: repeat(2, 1fr); }
.ops-row--3col[b-qws5ft1yzv] { grid-template-columns: repeat(3, 1fr); }
.ops-row--4col[b-qws5ft1yzv] { grid-template-columns: repeat(4, 1fr); }

/* Responsive breakpoints consolidated at end of file */

/* ══════════════════════════════════════════════════════════════
   Metric Cards
   ══════════════════════════════════════════════════════════════ */

.ops-metric-card[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    min-height: 80px;
    transition: box-shadow var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.ops-metric-card:hover[b-qws5ft1yzv] {
    box-shadow: var(--BEC-shadow4, 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14));
}

.ops-metric-card--inline[b-qws5ft1yzv] {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px;
    min-height: auto;
}

.ops-metric-val[b-qws5ft1yzv] {
    font-size: 20px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1, #242424);
    line-height: 1.2;
}

.ops-metric-unit[b-qws5ft1yzv] {
    font-size: 13px;
    font-weight: 400;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.ops-metric-lbl[b-qws5ft1yzv] {
    font-size: 11px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-align: center;
    margin-top: 4px;
}

/* ── Period Grid (Created/Resolved/Closed T/W/M) ── */
.ops-period-grid[b-qws5ft1yzv] {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px 8px;
    align-items: baseline;
}

.ops-period-val[b-qws5ft1yzv] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    text-align: right;
}

.ops-period-lbl[b-qws5ft1yzv] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

/* ══════════════════════════════════════════════════════════════
   Panels (wrapper for charts & tables)
   ══════════════════════════════════════════════════════════════ */

.ops-panel[b-qws5ft1yzv] {
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    padding: 16px;
    overflow: hidden;
}

.ops-panel--chart[b-qws5ft1yzv] {
    padding: 16px 8px 8px;
}

.ops-panel-title[b-qws5ft1yzv] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

.ops-nodata[b-qws5ft1yzv] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    padding: 16px 0;
    text-align: center;
    display: block;
}

/* ══════════════════════════════════════════════════════════════
   Horizontal Bar Charts (CSS-only — SSOT pattern)
   ══════════════════════════════════════════════════════════════ */

.ops-bar-chart[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ops-bar-row[b-qws5ft1yzv] {
    display: grid;
    grid-template-columns: 72px 1fr 40px;
    gap: 8px;
    align-items: center;
}

.ops-bar-label[b-qws5ft1yzv] {
    font-size: 11px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-bar-track[b-qws5ft1yzv] {
    height: 16px;
    background: var(--BEC-colorNeutralBackground5, #ebebeb);
    border-radius: 8px;
    overflow: hidden;
}

.ops-bar-fill[b-qws5ft1yzv] {
    height: 100%;
    width: var(--bar-width, 0%);
    border-radius: 8px;
    transition: width var(--BEC-durationSlower, 400ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    min-width: 2px;
}

.ops-bar-val[b-qws5ft1yzv] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    text-align: right;
}

/* ── Aging Bucket Fill Colors (SSOT) ── */
.ops-aging-fresh[b-qws5ft1yzv]  { background: var(--BEC-colorSuccessForeground1, #107c10); }
.ops-aging-mild[b-qws5ft1yzv]   { background: var(--BEC-colorSuccessForeground1, #107c10); }
.ops-aging-warm[b-qws5ft1yzv]   { background: var(--BEC-colorWarningForeground1, #d83b01); }
.ops-aging-hot[b-qws5ft1yzv]    { background: var(--BEC-colorErrorForeground1, #bc2f32); }
.ops-aging-critical[b-qws5ft1yzv] { background: var(--BEC-colorErrorForeground1, #bc2f32); }
.ops-aging-stale[b-qws5ft1yzv]  { background: var(--BEC-colorNeutralForeground3, #616161); }

.ops-bar-brand[b-qws5ft1yzv] { background: var(--BEC-colorBrandBackground, #0078d4); }

/* ══════════════════════════════════════════════════════════════
   Mini KPI List (vertical stack of small KPIs)
   ══════════════════════════════════════════════════════════════ */

.ops-mini-kpi-list[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ops-mini-kpi[b-qws5ft1yzv] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

.ops-mini-kpi:last-child[b-qws5ft1yzv] {
    border-bottom: none;
}

.ops-mini-val[b-qws5ft1yzv] {
    font-size: 18px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.ops-mini-lbl[b-qws5ft1yzv] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.ops-val-danger[b-qws5ft1yzv] {
    color: var(--BEC-colorErrorForeground1, #bc2f32);
}

.ops-val-warning[b-qws5ft1yzv] {
    color: var(--BEC-colorWarningForeground1, #d83b01);
}

/* ══════════════════════════════════════════════════════════════
   Engineer Performance Bars
   ══════════════════════════════════════════════════════════════ */

.ops-engineer-bars[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ops-eng-row[b-qws5ft1yzv] {
    display: grid;
    grid-template-columns: 140px 1fr 48px;
    gap: 8px;
    align-items: center;
}

.ops-eng-name[b-qws5ft1yzv] {
    font-size: 12px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1, #242424);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-eng-track[b-qws5ft1yzv] {
    height: 14px;
    background: var(--BEC-colorNeutralBackground5, #ebebeb);
    border-radius: 7px;
    overflow: hidden;
}

.ops-eng-fill[b-qws5ft1yzv] {
    height: 100%;
    width: var(--bar-width, 0%);
    border-radius: 7px;
    transition: width var(--BEC-durationSlower, 400ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

/* Reuse ITSupportFormatHelper utilization classes */
[b-qws5ft1yzv] .BEC-Utilization-Fill--success { background: var(--BEC-colorSuccessForeground1, #107c10); }
[b-qws5ft1yzv] .BEC-Utilization-Fill--warning { background: var(--BEC-colorWarningForeground1, #d83b01); }
[b-qws5ft1yzv] .BEC-Utilization-Fill--danger  { background: var(--BEC-colorErrorForeground1, #bc2f32); }

.ops-eng-val[b-qws5ft1yzv] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    text-align: right;
}

/* ══════════════════════════════════════════════════════════════
   Rank Lists (Top 5 / Bottom 5)
   ══════════════════════════════════════════════════════════════ */

.ops-rank-list[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ops-rank-row[b-qws5ft1yzv] {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border-radius: var(--BEC-borderRadiusSmall, 2px);
    transition: background var(--BEC-durationFaster, 100ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.ops-rank-row:hover[b-qws5ft1yzv] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.ops-rank-num[b-qws5ft1yzv] {
    font-size: 12px;
    font-weight: 700;
    color: var(--BEC-colorBrandBackground, #0078d4);
    text-align: center;
}

.ops-rank-name[b-qws5ft1yzv] {
    font-size: 12px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1, #242424);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-rank-val[b-qws5ft1yzv] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* ══════════════════════════════════════════════════════════════
   Peak Analysis Heatmap
   ══════════════════════════════════════════════════════════════ */

.ops-heatmap-row[b-qws5ft1yzv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 4px;
}

.ops-heatmap-row--days[b-qws5ft1yzv] {
    grid-template-columns: repeat(7, 1fr);
}

.ops-heat-cell[b-qws5ft1yzv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    border-radius: var(--BEC-borderRadiusSmall, 2px);
    /* Heatmap tint: uses --ops-brand-rgb (defined on .ops-root) for theme alignment.
       CSS cannot decompose a custom-property hex into RGB channels, so the component
       defines a local --ops-brand-rgb token kept in sync with --BEC-colorBrandBackground. */
    background: rgba(var(--ops-brand-rgb, 0, 120, 212), var(--heat-opacity, 0));
    transition: background var(--BEC-durationNormal, 200ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    min-height: 48px;
}

.ops-heat-cell--day[b-qws5ft1yzv] {
    min-height: 56px;
}

.ops-heat-label[b-qws5ft1yzv] {
    font-size: 9px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.ops-heat-val[b-qws5ft1yzv] {
    font-size: 12px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* ══════════════════════════════════════════════════════════════
   Syncfusion Chart Overrides (scoped via ::deep)
   ══════════════════════════════════════════════════════════════ */

[b-qws5ft1yzv] .e-chart {
    background: transparent;
    font-family: inherit;
}

[b-qws5ft1yzv] .e-chart .e-chart-title {
    font-size: 12px;
    font-weight: 600;
    fill: var(--BEC-colorNeutralForeground1, #242424);
}

[b-qws5ft1yzv] .e-grid .e-headercell {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

[b-qws5ft1yzv] .e-grid .e-rowcell {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive Breakpoints
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet Landscape: ≤ 1024px ── */
@media (max-width: 1024px) {
    .ops-row--4col[b-qws5ft1yzv] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ops-row--3col[b-qws5ft1yzv] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ops-row--2col stays 2 columns */

    .ops-dashboard[b-qws5ft1yzv] {
        padding: 12px 12px 20px;
    }

    .ops-hero-card[b-qws5ft1yzv] {
        padding: 12px;
        min-height: 64px;
        min-width: 100px;
    }

    .ops-hero-val[b-qws5ft1yzv] {
        font-size: 20px;
    }

    .ops-section-body[b-qws5ft1yzv] {
        padding: 12px;
    }

    /* Charts: reduce height slightly */
    [b-qws5ft1yzv] .e-chart {
        max-height: 260px;
    }

    .ops-eng-row[b-qws5ft1yzv] {
        grid-template-columns: 120px 1fr 44px;
    }

    .ops-bar-row[b-qws5ft1yzv] {
        grid-template-columns: 64px 1fr 36px;
    }
}

/* ── Tablet Portrait: ≤ 768px ── */
@media (max-width: 768px) {
    .ops-row--4col[b-qws5ft1yzv] {
        grid-template-columns: repeat(2, 1fr);
    }

    .ops-row--3col[b-qws5ft1yzv] {
        grid-template-columns: 1fr;
    }

    .ops-row--2col[b-qws5ft1yzv] {
        grid-template-columns: 1fr;
    }

    .ops-hero-section[b-qws5ft1yzv] {
        flex-direction: column;
    }

    .ops-hero-strip[b-qws5ft1yzv] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .ops-hero-card[b-qws5ft1yzv] {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        padding: 10px;
        min-height: 56px;
    }

    .ops-hero-val[b-qws5ft1yzv] {
        font-size: 18px;
    }

    .ops-hero-lbl[b-qws5ft1yzv] {
        font-size: 10px;
    }

    .ops-dashboard[b-qws5ft1yzv] {
        padding: 8px 8px 16px;
        gap: 6px;
    }

    .ops-section[b-qws5ft1yzv] {
        margin-bottom: 16px;
    }

    .ops-section-body[b-qws5ft1yzv] {
        padding: 8px;
        gap: 12px;
    }

    .ops-section-header[b-qws5ft1yzv] {
        padding: 12px 8px;
    }

    .ops-metric-card[b-qws5ft1yzv] {
        padding: 12px;
        min-height: 64px;
    }

    .ops-metric-val[b-qws5ft1yzv] {
        font-size: 18px;
    }

    .ops-metric-lbl[b-qws5ft1yzv] {
        font-size: 10px;
    }

    /* Charts: reduce height further */
    [b-qws5ft1yzv] .e-chart {
        max-height: 220px;
    }

    /* Heatmap: horizontal scroll if overflow */
    .ops-heatmap-row[b-qws5ft1yzv] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        min-width: 0;
    }

    .ops-heat-cell[b-qws5ft1yzv] {
        min-width: 40px;
        padding: 6px 3px;
    }

    .ops-eng-row[b-qws5ft1yzv] {
        grid-template-columns: 100px 1fr 40px;
    }

    .ops-bar-row[b-qws5ft1yzv] {
        grid-template-columns: 56px 1fr 32px;
    }

    .ops-bar-label[b-qws5ft1yzv] {
        font-size: 10px;
    }

    .ops-panel[b-qws5ft1yzv] {
        padding: 12px;
    }

    .ops-panel--chart[b-qws5ft1yzv] {
        padding: 12px 6px 6px;
    }

    .ops-rank-row[b-qws5ft1yzv] {
        padding: 6px;
    }

    .ops-rank-name[b-qws5ft1yzv] {
        font-size: 11px;
    }

    .ops-rank-val[b-qws5ft1yzv] {
        font-size: 11px;
    }

    /* Grid tables: horizontal scroll */
    [b-qws5ft1yzv] .e-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Mobile: ≤ 480px ── */
@media (max-width: 480px) {
    .ops-root[b-qws5ft1yzv] {
        overflow-x: hidden;
    }

    .ops-row--4col[b-qws5ft1yzv],
    .ops-row--3col[b-qws5ft1yzv],
    .ops-row--2col[b-qws5ft1yzv] {
        grid-template-columns: 1fr;
    }

    .ops-dashboard[b-qws5ft1yzv] {
        padding: 4px 4px 12px;
        gap: 4px;
    }

    .ops-hero-section[b-qws5ft1yzv] {
        flex-direction: column;
    }

    .ops-hero-strip[b-qws5ft1yzv] {
        flex-direction: column;
        gap: 4px;
    }

    .ops-hero-card[b-qws5ft1yzv] {
        flex: 1 1 100%;
        min-width: 0;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 12px;
        min-height: auto;
    }

    .ops-hero-val[b-qws5ft1yzv] {
        font-size: 18px;
    }

    .ops-hero-lbl[b-qws5ft1yzv] {
        font-size: 10px;
        margin-top: 0;
        margin-left: 8px;
    }

    .ops-section[b-qws5ft1yzv] {
        margin-bottom: 8px;
    }

    .ops-section-header[b-qws5ft1yzv] {
        padding: 8px;
    }

    .ops-section-title[b-qws5ft1yzv] {
        font-size: 13px;
    }

    .ops-section-body[b-qws5ft1yzv] {
        padding: 4px;
        gap: 8px;
    }

    .ops-metric-card[b-qws5ft1yzv] {
        padding: 10px;
        min-height: auto;
    }

    .ops-metric-card--inline[b-qws5ft1yzv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .ops-metric-val[b-qws5ft1yzv] {
        font-size: 16px;
    }

    /* Charts: minimal height */
    [b-qws5ft1yzv] .e-chart {
        max-height: 180px;
    }

    .ops-panel[b-qws5ft1yzv] {
        padding: 8px;
    }

    .ops-panel--chart[b-qws5ft1yzv] {
        padding: 8px 4px 4px;
    }

    .ops-panel-title[b-qws5ft1yzv] {
        font-size: 12px;
        margin: 0 0 8px;
        padding-bottom: 4px;
    }

    /* Heatmap: horizontal scroll */
    .ops-heatmap-row[b-qws5ft1yzv] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ops-heat-cell[b-qws5ft1yzv] {
        min-width: 36px;
        padding: 4px 2px;
        min-height: 40px;
    }

    .ops-heat-cell--day[b-qws5ft1yzv] {
        min-height: 44px;
    }

    /* Bar chart: tighter layout */
    .ops-bar-row[b-qws5ft1yzv] {
        grid-template-columns: 48px 1fr 28px;
        gap: 4px;
    }

    .ops-bar-label[b-qws5ft1yzv] {
        font-size: 9px;
    }

    .ops-bar-val[b-qws5ft1yzv] {
        font-size: 10px;
    }

    /* Engineer bars: tighter */
    .ops-eng-row[b-qws5ft1yzv] {
        grid-template-columns: 80px 1fr 36px;
        gap: 4px;
    }

    .ops-eng-name[b-qws5ft1yzv] {
        font-size: 10px;
    }

    .ops-eng-val[b-qws5ft1yzv] {
        font-size: 10px;
    }

    /* Rank list */
    .ops-rank-row[b-qws5ft1yzv] {
        grid-template-columns: 24px 1fr auto;
        padding: 4px;
        gap: 4px;
    }

    .ops-rank-name[b-qws5ft1yzv] {
        font-size: 10px;
    }

    .ops-rank-val[b-qws5ft1yzv] {
        font-size: 10px;
    }

    /* Grid tables: horizontal scroll */
    [b-qws5ft1yzv] .e-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ops-loading[b-qws5ft1yzv] {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 12px;
    }

    .ops-empty[b-qws5ft1yzv] {
        padding: 32px 16px;
    }

    .ops-mini-kpi[b-qws5ft1yzv] {
        padding: 6px 0;
    }

    .ops-mini-val[b-qws5ft1yzv] {
        font-size: 16px;
    }

    .ops-mini-lbl[b-qws5ft1yzv] {
        font-size: 10px;
    }

    .ops-period-val[b-qws5ft1yzv] {
        font-size: 14px;
    }
}
/* /Components/Pages/MainLayout/ITSupport/SharedComponents/TeamManagementPanel.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────────
   TeamManagementPanel.razor.css - Category Team Management Side Panel
   BEC Design System Compliant — sp-* shared classes + scoped overrides
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Panel Override ── */
.team-panel[b-5n229srwnv] {
    min-width: 0;
}

/* ── Summary Strip ── */
.team-summary-strip[b-5n229srwnv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.team-summary-card[b-5n229srwnv] {
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.team-summary-value[b-5n229srwnv] {
    font-size: 24px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    line-height: 1.2;
}

.team-summary-value--accent[b-5n229srwnv] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.team-summary-label[b-5n229srwnv] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ── Section Header ── */
.team-section-header[b-5n229srwnv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.team-section-title[b-5n229srwnv] {
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Grid Wrapper ── */
.team-grid-wrapper[b-5n229srwnv] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

[b-5n229srwnv] .team-grid-wrapper .e-grid {
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7) !important;
    border-radius: 8px;
}

[b-5n229srwnv] .team-grid-wrapper .e-grid .e-gridheader {
    background-color: var(--BEC-colorNeutralBackground2, #fafafa) !important;
}

[b-5n229srwnv] .team-grid-wrapper .e-grid .e-headercell {
    background-color: var(--BEC-colorNeutralBackground2, #fafafa) !important;
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Engineer Cell ── */
.team-engineer-cell[b-5n229srwnv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
}

.team-engineer-name[b-5n229srwnv] {
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    line-height: 1.3;
}

.team-engineer-email[b-5n229srwnv] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    line-height: 1.2;
}

.team-engineer--at-capacity[b-5n229srwnv] {
    opacity: 0.6;
}

/* ── Icon Buttons (in grid cells) ── */
.team-icon-btn[b-5n229srwnv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--BEC-colorNeutralForeground3, #616161);
    cursor: pointer;
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    position: relative;
}

.team-icon-btn[b-5n229srwnv]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
}

.team-icon-btn:hover[b-5n229srwnv] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    border-color: var(--BEC-colorNeutralStroke2, #c7c7c7);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.team-icon-btn:disabled[b-5n229srwnv] {
    opacity: 0.4;
    cursor: not-allowed;
}

.team-icon-btn--active[b-5n229srwnv] {
    color: var(--BEC-colorWarningForeground1, #9a6700);
}

.team-icon-btn--active:hover[b-5n229srwnv] {
    color: var(--BEC-colorWarningForeground1, #9a6700);
}

.team-action-btns[b-5n229srwnv] {
    display: flex;
    gap: 4px;
    justify-content: center;
}

/* ── Section Header Actions ── */
.team-section-actions[b-5n229srwnv] {
    display: flex;
    gap: 8px;
}

/* ── Add Engineer Inline Bar ── */
.team-add-bar[b-5n229srwnv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 8px;
    margin-bottom: 16px;
}

.team-add-field[b-5n229srwnv] {
    flex: 1;
    min-width: 0;
}

[b-5n229srwnv] .team-add-field .e-outline .e-input-group {
    height: 36px;
}

/* ── Bulk Assign Bar ── */
.team-bulk-bar[b-5n229srwnv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 8px;
    margin-bottom: 16px;
}

.team-bulk-field[b-5n229srwnv] {
    width: 100%;
}

[b-5n229srwnv] .team-bulk-field .e-outline .e-input-group {
    min-height: 36px;
}

.team-bulk-actions[b-5n229srwnv] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ── Empty State Icon ── */
.team-empty-icon[b-5n229srwnv] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    margin-bottom: 8px;
}

/* .skeleton + @keyframes shimmer — SSOT: css/modules/it-support-grid.css */

.skeleton-card[b-5n229srwnv] {
    border: none;
}

.skeleton-value[b-5n229srwnv] {
    width: 48px;
    height: 24px;
}

.skeleton-label[b-5n229srwnv] {
    width: 72px;
    height: 12px;
    margin-top: 4px;
}

.skeleton-rows[b-5n229srwnv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}

.skeleton-row[b-5n229srwnv] {
    width: 100%;
    height: 48px;
}

/* @keyframes + prefers-reduced-motion — SSOT: css/modules/it-support-grid.css */

/* ── Responsive: Full overlay on smaller screens ── */
@media (max-width: 1023px) {
    .team-summary-strip[b-5n229srwnv] {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .team-summary-value[b-5n229srwnv] {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .team-summary-strip[b-5n229srwnv] {
        grid-template-columns: 1fr;
    }

    .team-add-bar[b-5n229srwnv] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Engineer Picker Dropdown Item Template ── */
[b-5n229srwnv] .engineer-picker-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
    line-height: 1.3;
}

[b-5n229srwnv] .engineer-picker-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

[b-5n229srwnv] .engineer-picker-detail {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Focus Visible (E14: WCAG 2.1 AA) ── */
.team-icon-btn:focus-visible[b-5n229srwnv] {
    outline: 2px solid var(--BEC-colorBrandStroke1, #0078d4);
    outline-offset: 2px;
}

/* ── Sidebar Wrapper (CSS isolation bridge for Syncfusion SfSidebar) ── */
.its-sidebar-wrap[b-5n229srwnv] {
    display: contents;
}

/* ── Responsive: Sidebar Width ── */
@media (max-width: 480px) {
    .its-sidebar-wrap[b-5n229srwnv]  .e-sidebar {
        width: 100% !important;
        max-width: 100vw !important;
    }

    .team-section-header[b-5n229srwnv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .team-bulk-bar[b-5n229srwnv] {
        padding: 8px 12px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .its-sidebar-wrap[b-5n229srwnv]  .e-sidebar {
        width: 90% !important;
        max-width: 90vw !important;
    }
}
/* /Components/Pages/MainLayout/ITSupport/SharedComponents/TicketDetailWizard.razor.rz.scp.css */
/* ============================================================================
   Ticket Detail Wizard - Aligned to BEC Design System
   ============================================================================
   Pattern: [UID: SIDE_PANEL / WIZARD_SIDE] + [UID: TIMELINE]
   ============================================================================ */

/* ── Panel Override ── */
.its-wizard[b-jox42r3r0k] {
    font-size: 13px;
    border-left: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

/* ── Header ── */
.its-header-left[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.its-header-right[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.its-ticket-id[b-jox42r3r0k] {
    font-weight: 600;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* ── Content Area ── */
.its-wizard[b-jox42r3r0k]  .sp-content {
    padding: 24px;
}

/* ── Loading / Empty States ── */
.its-loading[b-jox42r3r0k],
.its-empty[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    font-size: 13px;
}

/* ── Subject Row ── */
.its-subject-row[b-jox42r3r0k] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.its-subject[b-jox42r3r0k] {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--BEC-colorNeutralForeground1, #242424);
    line-height: 1.3;
    flex: 1;
}

/* ── Meta Row ── */
.its-meta-row[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
}

.its-meta-item[b-jox42r3r0k] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.its-meta-ai[b-jox42r3r0k] {
    color: var(--BEC-colorPalettePurpleForeground1, #7c3aed);
    font-weight: 600;
}

/* ── Sections ── */
.its-section[b-jox42r3r0k] {
    margin-bottom: 16px;
}

.its-section-title[b-jox42r3r0k] {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.its-section-title .its-count[b-jox42r3r0k] {
    font-weight: 400;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.its-description[b-jox42r3r0k] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground1, #242424);
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    max-height: 120px;
    overflow-y: auto;
}

/* ── Beneficiary Label ── */
.its-beneficiary-label[b-jox42r3r0k] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

/* ── Flags Row ── */
.its-flags-row[b-jox42r3r0k] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.its-flag[b-jox42r3r0k] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.its-flag-presence[b-jox42r3r0k] {
    background: var(--BEC-colorPaletteYellowBackground1, #fffef5);
    color: var(--BEC-colorWarningForeground1, #d97706);
}

.its-flag-approval[b-jox42r3r0k] {
    background: var(--BEC-colorPaletteBlueLightBackground1, #deecf9);
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

/* ── AI Summary ── */
.its-ai-section[b-jox42r3r0k] {
    margin-bottom: 12px;
}

.its-ai-summary[b-jox42r3r0k] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground1, #242424);
    background: linear-gradient(135deg, var(--BEC-colorPalettePurpleBackground1, #f0eaff) 0%, var(--BEC-colorBrandBackground2, #e8ebf9) 100%);
    padding: 8px 16px;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    border-left: 3px solid var(--BEC-colorPalettePurpleForeground1, #7c3aed);
}

/* ── SLA Bar ── */
.its-sla-bar[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 11px;
    margin-bottom: 12px;
}

.its-sla-bar.bec-sla-ontrack[b-jox42r3r0k] {
    background: var(--BEC-colorSuccessBackground, #dff6dd);
    color: var(--BEC-colorSuccessForeground1, #107c10);
}

.its-sla-bar.bec-sla-atrisk[b-jox42r3r0k] {
    background: var(--BEC-colorWarningBackground, #fff4ce);
    color: var(--BEC-colorWarningForeground1, #795548);
}

.its-sla-bar.bec-sla-breached[b-jox42r3r0k] {
    background: var(--BEC-colorErrorBackground, #fde7e9);
    color: var(--BEC-colorErrorForeground1, #a80000);
}

.its-sla-bar.bec-sla-none[b-jox42r3r0k] {
    background: var(--BEC-colorInfoBackground, #f3f2f1);
    color: var(--BEC-colorInfoForeground1, #323130);
}

.its-sla-badge[b-jox42r3r0k] {
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    margin-left: auto;
}

.bec-sla-ontrack .its-sla-badge[b-jox42r3r0k] {
    background: var(--BEC-colorSuccessForeground1, #107c10);
    color: var(--BEC-colorNeutralForegroundOnBrand, #fff);
}

.bec-sla-atrisk .its-sla-badge[b-jox42r3r0k] {
    background: var(--BEC-colorWarningForeground1, #795548);
    color: var(--BEC-colorNeutralForegroundOnBrand, #fff);
}

.bec-sla-breached .its-sla-badge[b-jox42r3r0k] {
    background: var(--BEC-colorErrorForeground1, #a80000);
    color: var(--BEC-colorNeutralForegroundOnBrand, #fff);
}

/* ── Resolution ── */
.its-resolution-section[b-jox42r3r0k] {
    margin-bottom: 12px;
}

.its-resolution[b-jox42r3r0k] {
    background: var(--BEC-colorPaletteGreenBackground1, #f1faf1);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    padding: 12px;
    border-left: 3px solid var(--BEC-colorSuccessForeground1, #107c10);
}

.its-resolution-notes[b-jox42r3r0k] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.its-resolution-meta[b-jox42r3r0k] {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

/* ── Conversation Timeline (matches [UID: TIMELINE]) ── */
.its-conversation-section[b-jox42r3r0k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.its-conversation-timeline[b-jox42r3r0k] {
    position: relative;
    padding-left: 28px;
    margin-left: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.its-conversation-timeline[b-jox42r3r0k]::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--BEC-colorNeutralBorder1, #e1dfdd);
    pointer-events: none;
}

.its-no-messages[b-jox42r3r0k] {
    text-align: center;
    padding: 16px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-size: 12px;
    margin-left: -28px;
}

/* ── Timeline Item ── */
.its-tl-item[b-jox42r3r0k] {
    position: relative;
    margin-bottom: 20px;
}

.its-tl-item:last-child[b-jox42r3r0k] {
    margin-bottom: 0;
}

/* ── Timeline Marker (matches design system .timeline-marker) ── */
.its-tl-marker[b-jox42r3r0k] {
    position: absolute;
    left: -22px;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralBackground1, #fff);
    border: 2px solid var(--BEC-colorBrandBackground, #0078d4);
    z-index: 1;
}

.its-tl-marker-staff[b-jox42r3r0k] {
    border-color: var(--BEC-colorBrandBackground, #0078d4);
}

.its-tl-marker-user[b-jox42r3r0k] {
    border-color: var(--BEC-colorBrandBackground, #0078d4);
}

.its-tl-marker-system[b-jox42r3r0k] {
    border-color: var(--BEC-colorNeutralForeground3, #616161);
}

.its-tl-marker-ai[b-jox42r3r0k] {
    border-color: var(--BEC-colorPalettePurpleForeground1, #7c3aed);
    background: var(--BEC-colorPalettePurpleBackground1, #f0eaff);
}

/* ── Timeline Content (matches design system layout) ── */
.its-tl-content[b-jox42r3r0k] {
    padding-left: 4px;
}

.its-tl-title[b-jox42r3r0k] {
    font-weight: 600;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    line-height: 1.4;
}

.its-tl-subtitle[b-jox42r3r0k] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    margin-top: 2px;
}

.its-tl-body[b-jox42r3r0k] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground1, #242424);
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    padding: 8px;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
}
/* ── Reply Box ── */
.its-reply-box[b-jox42r3r0k] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--BEC-colorNeutralBorder1, #e1dfdd);
}

.its-reply-input-group[b-jox42r3r0k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.its-reply-box[b-jox42r3r0k]  .its-reply-input {
    flex: 1;
}

.its-reply-box[b-jox42r3r0k]  .its-reply-input textarea {
    min-height: 36px;
    max-height: 80px;
    font-size: 13px;
    padding: 8px 12px;
}

/* ── Override Syncfusion for Compact ── */
.its-wizard[b-jox42r3r0k]  .e-btn.e-small {
    height: 32px;
    padding: 0 16px;
    font-size: 13px;
}

/* ── Attachments ── */
.its-attachments-list[b-jox42r3r0k] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.its-attachment-row[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.its-attachment-delete[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)), background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.its-attachment-delete:hover[b-jox42r3r0k] {
    opacity: 1;
    background: var(--BEC-colorErrorBackground, #fde7e9);
}

.its-attachment-delete:disabled[b-jox42r3r0k] {
    opacity: 0.3;
    cursor: not-allowed;
}

.its-attachment-item[b-jox42r3r0k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 4px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    text-decoration: none;
    transition: border-color var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)), background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    max-width: 280px;
}

.its-attachment-item:hover[b-jox42r3r0k] {
    border-color: var(--BEC-colorBrandForeground1, #0078d4);
    background: rgba(43, 87, 154, 0.04);
}

/* .its-file-ext — SSOT: css/modules/it-support-grid.css */

.its-attachment-name[b-jox42r3r0k] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.its-attachment-size[b-jox42r3r0k] {
    color: var(--BEC-colorNeutralForeground2, #424242);
    font-size: 11px;
    white-space: nowrap;
}

/* ── Progress Ring & Icon Sizes ── */
/* .its-progress-xs — SSOT: css/modules/it-support-grid.css */
/* .its-icon-sm     — SSOT: css/modules/it-support-grid.css */

[b-jox42r3r0k] .its-progress-md {
    width: 24px;
    height: 24px;
}

/* ── Loading Button — constrain spinner inside Syncfusion buttons ── */
[b-jox42r3r0k] .e-btn fluent-progress-ring {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

[b-jox42r3r0k] .e-btn.e-small {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ── Reassign Panel ── */
.its-reassign-panel[b-jox42r3r0k] {
    padding: 8px 16px 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.its-reassign-row[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-jox42r3r0k] .its-reassign-dropdown {
    flex: 1;
    min-width: 0;
}

[b-jox42r3r0k] .its-btn-reassign {
    border-color: var(--BEC-colorNeutralStroke1, #d1d1d1);
    color: var(--BEC-colorNeutralForeground2, #424242);
}

/* ── Edit Mode ── */
.its-edit-form[b-jox42r3r0k] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.its-edit-group[b-jox42r3r0k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.its-edit-label[b-jox42r3r0k] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.its-edit-row[b-jox42r3r0k] {
    display: flex;
    gap: 12px;
}

.its-edit-half[b-jox42r3r0k] {
    flex: 1;
    min-width: 0;
}

.its-edit-check[b-jox42r3r0k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    cursor: pointer;
}

.its-edit-error[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: var(--BEC-colorErrorBackground, #fde7e9);
    border: 1px solid var(--BEC-colorErrorBorder1, #f1bbbc);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    font-size: 13px;
    color: var(--BEC-colorErrorForeground1, #a80000);
}

.its-action-error[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: var(--BEC-colorErrorBackground, #fde7e9);
    border: 1px solid var(--BEC-colorErrorBorder1, #f1bbbc);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    font-size: 13px;
    color: var(--BEC-colorErrorForeground1, #a80000);
    animation: its-action-error-fadein-b-jox42r3r0k var(--BEC-durationGentle, 250ms) var(--BEC-curveDecelerateMin, cubic-bezier(0.33, 0, 0.1, 1));
}

.its-action-error span[b-jox42r3r0k] {
    flex: 1;
}

.its-action-error-dismiss[b-jox42r3r0k] {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    color: var(--BEC-colorErrorForeground1, #a80000);
    border-radius: var(--BEC-borderRadiusSmall, 2px);
    opacity: 0.7;
    transition: opacity var(--BEC-durationFast, 150ms);
}

.its-action-error-dismiss:hover[b-jox42r3r0k] {
    opacity: 1;
}

@keyframes its-action-error-fadein-b-jox42r3r0k {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Feedback Section ── */
.its-feedback-section[b-jox42r3r0k] {
    margin-bottom: 12px;
}

.its-feedback-display[b-jox42r3r0k] {
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium, 4px);
}

.its-feedback-stars[b-jox42r3r0k] {
    display: flex;
    gap: 2px;
    margin-bottom: 4px;
}

.its-star[b-jox42r3r0k] {
    font-size: 18px;
    color: var(--BEC-colorNeutralStroke2, #c7c7c7);
}

.its-star-filled[b-jox42r3r0k] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
}

.its-feedback-comment[b-jox42r3r0k] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 4px 0;
    line-height: 1.4;
}

.its-feedback-date[b-jox42r3r0k] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

.its-feedback-form[b-jox42r3r0k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.its-feedback-stars-input[b-jox42r3r0k] {
    gap: 4px;
}

.its-star-btn[b-jox42r3r0k] {
    font-size: 24px;
    background: none;
    border: none;
    color: var(--BEC-colorNeutralStroke2, #c7c7c7);
    cursor: pointer;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    transition: color var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)), transform var(--BEC-durationFaster, 100ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.its-star-btn:hover[b-jox42r3r0k] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
    transform: scale(1.15);
}

.its-star-btn.its-star-filled[b-jox42r3r0k] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
}

[b-jox42r3r0k] .its-feedback-input textarea {
    min-height: 36px;
    max-height: 60px;
    font-size: 13px;
}

.its-feedback-none[b-jox42r3r0k] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    font-style: italic;
}

/* ── AI Email Conversations ── */
.its-ai-conversations-section[b-jox42r3r0k] {
    border-top: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    padding-top: 16px;
}

.its-conv-list[b-jox42r3r0k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.its-conv-card[b-jox42r3r0k] {
    padding: 12px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1)), box-shadow var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.its-conv-card:hover[b-jox42r3r0k] {
    border-color: var(--BEC-colorBrandStroke1, #0078d4);
    box-shadow: var(--BEC-shadow4);
}

.its-conv-card-top[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.its-conv-sender[b-jox42r3r0k] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.its-conv-status[b-jox42r3r0k] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-transform: capitalize;
}

.its-conv-card-subject[b-jox42r3r0k] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.its-conv-card-meta[b-jox42r3r0k] {
    display: flex;
    gap: 12px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #616161);
}

.its-conv-safety-badge[b-jox42r3r0k] {
    background: var(--BEC-colorPaletteRedBackground1, #fdf3f4);
    color: var(--BEC-colorPaletteRedForeground1, #bc2f32);
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

/* Detail view */
.its-conv-detail[b-jox42r3r0k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.its-conv-detail-header[b-jox42r3r0k] {
    display: flex;
    align-items: center;
}

.its-conv-back-btn[b-jox42r3r0k] {
    background: none;
    border: none;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.its-conv-back-btn:hover[b-jox42r3r0k] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

.its-conv-detail-body[b-jox42r3r0k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.its-conv-detail-row[b-jox42r3r0k] {
    display: flex;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
}

.its-conv-label[b-jox42r3r0k] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2, #424242);
    min-width: 90px;
    flex-shrink: 0;
}

.its-conv-safety-alert[b-jox42r3r0k] {
    color: var(--BEC-colorPaletteRedForeground1, #bc2f32);
}

.its-conv-email-body[b-jox42r3r0k] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.its-conv-pre[b-jox42r3r0k] {
    font-size: 12px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 4px;
    padding: 8px;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

.its-conv-loading[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3, #616161);
    padding: 8px 0;
}

/* ── Inline Action Forms (Resolve / Reopen) ── */
.its-action-form[b-jox42r3r0k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    animation: its-action-form-slidein-b-jox42r3r0k var(--BEC-durationNormal, 200ms) var(--BEC-curveDecelerateMin, cubic-bezier(0.33, 0, 0.1, 1));
}

.its-resolve-form[b-jox42r3r0k] {
    border-left: 3px solid var(--BEC-colorSuccessForeground1, #107c10);
}

.its-reopen-form[b-jox42r3r0k] {
    border-left: 3px solid var(--BEC-colorWarningForeground1, #d97706);
}

.its-action-form-label[b-jox42r3r0k] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2, #424242);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

[b-jox42r3r0k] .its-action-form-textarea {
    width: 100%;
}

[b-jox42r3r0k] .its-action-form-textarea textarea {
    min-height: 60px;
    max-height: 140px;
    font-size: 13px;
    resize: vertical;
}

.its-action-form-buttons[b-jox42r3r0k] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

@keyframes its-action-form-slidein-b-jox42r3r0k {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Delete Confirmation ── */
.its-footer-spacer[b-jox42r3r0k] {
    flex: 1;
}

.its-delete-confirm-text[b-jox42r3r0k] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-colorPaletteRedForeground1, #bc2f32);
}

/* ── Attachment Inline Delete Confirmation ── */
.its-attachment-delete-confirm[b-jox42r3r0k] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.its-attachment-delete-confirm-text[b-jox42r3r0k] {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorPaletteRedForeground1, #bc2f32);
}

.its-attachment-confirm-btn[b-jox42r3r0k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 28px;
    min-height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: background var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

.its-attachment-confirm-btn[b-jox42r3r0k]::before {
    content: '';
    position: absolute;
    inset: -8px;
    min-width: 44px;
    min-height: 44px;
}

.its-attachment-confirm-yes:hover[b-jox42r3r0k] {
    background: var(--BEC-colorErrorBackground, #fde7e9);
}

.its-attachment-confirm-no:hover[b-jox42r3r0k] {
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
}

.its-attachment-confirm-btn:disabled[b-jox42r3r0k] {
    opacity: 0.3;
    cursor: not-allowed;
}

.its-attachment-confirm-btn:focus-visible[b-jox42r3r0k] {
    outline: 2px solid var(--BEC-colorBrandStroke1, #0078d4);
    outline-offset: 2px;
}

/* ── Focus Visible (E14: WCAG 2.1 AA) ── */
.its-star-btn:focus-visible[b-jox42r3r0k],
.its-attachment-delete:focus-visible[b-jox42r3r0k],
.its-conv-back-btn:focus-visible[b-jox42r3r0k] {
    outline: 2px solid var(--BEC-colorBrandStroke1, #0078d4);
    outline-offset: 2px;
}

/* ── Sidebar Wrapper (CSS isolation bridge for Syncfusion SfSidebar) ── */
.its-sidebar-wrap[b-jox42r3r0k] {
    display: contents;
}

/* ── Responsive: Sidebar & Detail Layout ── */
@media (max-width: 480px) {
    .its-sidebar-wrap[b-jox42r3r0k]  .e-sidebar {
        width: 100% !important;
        max-width: 100vw !important;
    }

    .its-subject[b-jox42r3r0k] {
        font-size: 14px;
    }

    .its-meta-row[b-jox42r3r0k] {
        flex-direction: column;
        gap: 8px;
    }

    .its-edit-row[b-jox42r3r0k] {
        flex-direction: column;
        gap: 12px;
    }

    .its-reassign-row[b-jox42r3r0k] {
        flex-direction: column;
        align-items: stretch;
    }

    .its-conversation-timeline[b-jox42r3r0k] {
        max-height: 240px;
    }

    .its-reply-box[b-jox42r3r0k] {
        flex-direction: column;
        align-items: stretch;
    }

    .its-action-form-buttons[b-jox42r3r0k] {
        flex-direction: column;
        align-items: stretch;
    }

    .its-conv-detail-row[b-jox42r3r0k] {
        flex-direction: column;
        gap: 4px;
    }

    .its-conv-label[b-jox42r3r0k] {
        min-width: unset;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .its-sidebar-wrap[b-jox42r3r0k]  .e-sidebar {
        width: 90% !important;
        max-width: 90vw !important;
    }

    .its-edit-row[b-jox42r3r0k] {
        flex-direction: column;
        gap: 12px;
    }
}

/* ── Accessibility: screen-reader-only live region ── */
.visually-hidden[b-jox42r3r0k] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* /Components/Pages/MainLayout/ITSupport/SharedComponents/TicketPriorityIndicator.razor.rz.scp.css */
/* ============================================================================
   Ticket Priority Indicator Component Styles
   ============================================================================ */

.BEC-Priority-Indicator[b-6m38qi02d5] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS, 4px);
}

.BEC-Priority-Label[b-6m38qi02d5] {
    font-size: var(--BEC-fontSizeBase200, 12px);
    font-weight: var(--BEC-fontWeightMedium, 500);
}

/* Priority: Critical */
.BEC-Priority-Critical[b-6m38qi02d5] {
    color: var(--BEC-colorPaletteRedForeground1, #bc2f32);
}

/* Priority: High */
.BEC-Priority-High[b-6m38qi02d5] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
}

/* Priority: Medium */
.BEC-Priority-Medium[b-6m38qi02d5] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

/* Priority: Low */
.BEC-Priority-Low[b-6m38qi02d5] {
    color: var(--BEC-colorNeutralForeground3, #616161);
}

/* Priority: Default */
.BEC-Priority-Default[b-6m38qi02d5] {
    color: var(--BEC-colorNeutralForeground2, #424242);
}

/* .its-icon-sm — SSOT: css/modules/it-support-grid.css */
/* /Components/Pages/MainLayout/ITSupport/SharedComponents/TicketStatusBadge.razor.rz.scp.css */
/* ============================================================================
   Ticket Status Badge Component Styles
   ============================================================================ */

.bec-status-badge[b-s2t1mh9fhf] {
    display: inline-flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS, 4px);
    padding: var(--BEC-spacingHorizontalXXS, 2px) var(--BEC-spacingHorizontalS, 8px);
    border-radius: var(--BEC-borderRadiusMedium, 4px);
    font-size: var(--BEC-fontSizeBase200, 12px);
    font-weight: var(--BEC-fontWeightSemibold, 600);
    white-space: nowrap;
    line-height: var(--BEC-lineHeightBase200, 16px);
}

/* Open - New/Fresh */
.bec-status-open[b-s2t1mh9fhf] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
    background: var(--BEC-colorBrandBackground2, #e8ebf9);
}

/* In Progress - Active Work (teal to distinguish from Open) */
.bec-status-inprogress[b-s2t1mh9fhf] {
    /* No teal token in _primitives.css — using Microsoft Fluent teal */
    color: #038387;
    background: #e0f5f5;
}

/* Pending - Waiting (amber/warning) */
.bec-status-pending[b-s2t1mh9fhf] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
    background: var(--BEC-colorPaletteYellowBackground2, #fff8df);
}

/* Resolved - Success */
.bec-status-resolved[b-s2t1mh9fhf] {
    color: var(--BEC-colorPaletteGreenForeground1, #107c10);
    background: var(--BEC-colorPaletteGreenBackground1, #f1faf1);
}

/* Closed - Done/Archived */
.bec-status-closed[b-s2t1mh9fhf] {
    color: var(--BEC-colorNeutralForeground2, #424242);
    background: var(--BEC-colorNeutralBackground4, #f0f0f0);
}

/* Reopened - Attention needed */
.bec-status-reopened[b-s2t1mh9fhf] {
    color: var(--BEC-colorPaletteRedForeground1, #bc2f32);
    background: var(--BEC-colorPaletteRedBackground1, #fdf3f4);
}

/* Fallback */
.bec-status-unknown[b-s2t1mh9fhf] {
    color: var(--BEC-colorNeutralForeground2, #424242);
    background: var(--BEC-colorNeutralBackground4, #f0f0f0);
}


/* /Components/Pages/MainLayout/ITSupport/UserPortal/UserPortal.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────────
   UserPortal.razor.css - My IT Support Tickets
   BEC Design System Compliant
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Page Layout (edge-to-edge, no card box) ── */
.BEC-Layout[b-lhitorj6ok] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    gap: 0;
    overflow: hidden;
}

/* ── Header Section ── */
.BEC-Header[b-lhitorj6ok] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    box-shadow: var(--BEC-shadow2, 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14));
    flex-shrink: 0;
}

.BEC-Header-Left[b-lhitorj6ok] {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* ── Cross-Navigation Link ── */
.BEC-CrossNav-Link[b-lhitorj6ok] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
    border-radius: 6px;
    background: transparent;
    color: var(--BEC-colorBrandForeground1, #0078d4);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
    text-decoration: none;
    white-space: nowrap;
}

.BEC-CrossNav-Link:hover[b-lhitorj6ok] {
    background: var(--BEC-colorBrandBackground2, #e8ebf9);
    border-color: var(--BEC-colorBrandStroke1, #0078d4);
}

.BEC-CrossNav-Link:focus-visible[b-lhitorj6ok] {
    outline: 2px solid var(--BEC-colorBrandStroke1, #0078d4);
    outline-offset: 2px;
}

.BEC-Title[b-lhitorj6ok] {
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    margin: 0;
    line-height: 1.4;
}

/* ── Stats Group ── */
.BEC-Stat-Group[b-lhitorj6ok] {
    display: flex;
    gap: 16px;
    margin-left: auto;
}

.BEC-Stat[b-lhitorj6ok] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.BEC-Stat-Value[b-lhitorj6ok] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.BEC-Stat-Highlight .BEC-Stat-Value[b-lhitorj6ok] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.BEC-Stat--accent .BEC-Stat-Value[b-lhitorj6ok] {
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

.BEC-Stat--warning .BEC-Stat-Value[b-lhitorj6ok] {
    color: var(--BEC-colorWarningForeground1, #d97706);
}

.BEC-Stat--critical .BEC-Stat-Value[b-lhitorj6ok] {
    color: var(--BEC-colorPalettePurpleForeground1, #7c3aed);
}

.BEC-Stat--danger .BEC-Stat-Value[b-lhitorj6ok] {
    color: var(--BEC-colorPaletteRedForeground1, #bc2f32);
}

.BEC-Stat--success .BEC-Stat-Value[b-lhitorj6ok] {
    color: var(--BEC-colorPaletteGreenForeground1, #107c10);
}

.BEC-Stat-Label[b-lhitorj6ok] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

/* ── Header Actions ── */
.BEC-Header-Actions[b-lhitorj6ok] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.its-export-text[b-lhitorj6ok] {
    margin-inline-start: 4px;
}

[b-lhitorj6ok] .BEC-Header-Actions .e-btn.e-primary {
    background: var(--BEC-colorBrandBackground, #0078d4);
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

[b-lhitorj6ok] .BEC-Header-Actions .e-btn.e-primary:hover {
    background: var(--BEC-colorBrandBackgroundHover, #106ebe);
}

/* ── Success Toast ── */
.BEC-Success-Toast[b-lhitorj6ok] {
    padding: 0 24px;
    animation: slideDown-b-lhitorj6ok var(--BEC-durationSlow, 300ms) var(--BEC-curveDecelerateMin, cubic-bezier(0.33, 0, 0.1, 1));
}

@keyframes slideDown-b-lhitorj6ok {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Attachment Upload Progress ── */
.BEC-Upload-Progress[b-lhitorj6ok] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 24px;
    background: var(--BEC-colorBrandBackground2, #e8ebf9);
    border-bottom: 1px solid var(--BEC-colorBrandStroke1, #0078d4);
    animation: slideDown-b-lhitorj6ok var(--BEC-durationSlow, 300ms) var(--BEC-curveDecelerateMin, cubic-bezier(0.33, 0, 0.1, 1));
}

.BEC-Upload-Progress-Header[b-lhitorj6ok] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.BEC-Upload-Progress-Text[b-lhitorj6ok] {
    font-size: 13px;
    font-weight: 400;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.BEC-Upload-Progress-Text strong[b-lhitorj6ok] {
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1, #0078d4);
}

[b-lhitorj6ok] .BEC-Upload-Progress .fluent-progress-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--BEC-colorNeutralStroke2, #c7c7c7);
}

[b-lhitorj6ok] .BEC-Upload-Progress fluent-progress-bar {
    --progress-bar-height: 4px;
}

/* ── Grid Container — flush edge-to-edge ── */
.BEC-Grid-Container[b-lhitorj6ok] {
    background: var(--BEC-colorNeutralBackground1);
    box-shadow: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

/* ── Loading State ── */
.BEC-Loading-State[b-lhitorj6ok] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    min-height: 300px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    font-size: 14px;
}

/* ── Empty State (no bg – sits directly on page background) ── */
.BEC-Empty-State[b-lhitorj6ok] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    min-height: 400px;
    padding: 48px 24px;
    text-align: center;
    background: transparent;
}

.BEC-Empty-Icon[b-lhitorj6ok] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    color: var(--BEC-colorNeutralForeground3, #616161);
}

.BEC-Empty-Title[b-lhitorj6ok] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.BEC-Empty-Text[b-lhitorj6ok] {
    margin: 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2, #424242);
    max-width: 320px;
    line-height: 1.5;
}

/* ── Grid / Cell / SLA / Badge / Progress styles ──
   SSOT: css/modules/it-support-grid.css (scoped via .bec-its)
   ─────────────────────────────────────────────── */

/* ── Skeleton Cell Sizes (C6: replaces inline style widths) ── */
.BEC-Skeleton-Cell--xs[b-lhitorj6ok] { width: 60px; }
.BEC-Skeleton-Cell--sm[b-lhitorj6ok] { width: 80px; }
.BEC-Skeleton-Cell--md[b-lhitorj6ok] { width: 120px; }
.BEC-Skeleton-Cell--lg[b-lhitorj6ok] { width: 180px; }

/* ── Skeleton Shimmer Loading ── */
.BEC-Skeleton-Grid[b-lhitorj6ok] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
}

.BEC-Skeleton-Header[b-lhitorj6ok] {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground3, #f5f5f5);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

.BEC-Skeleton-Row[b-lhitorj6ok] {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #c7c7c7);
}

/* .BEC-Skeleton-Cell shimmer + @keyframes shimmer — SSOT: css/modules/it-support-grid.css */
.BEC-Skeleton-Cell[b-lhitorj6ok] {
    height: 16px;
}

/* ── Refresh Button Styling ── */
[b-lhitorj6ok] .BEC-Header-Actions .e-btn.e-outline {
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    color: var(--BEC-colorNeutralForeground1, #242424);
    transition: all var(--BEC-durationFast, 150ms) var(--BEC-curveEasyEase, cubic-bezier(0.33, 0, 0.67, 1));
}

[b-lhitorj6ok] .BEC-Header-Actions .e-btn.e-outline:hover {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    border-color: var(--BEC-colorNeutralStroke1Hover, #c8c6c4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive Breakpoints
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet: ≤ 1024px ── */
@media (max-width: 1024px) {
    .BEC-Header[b-lhitorj6ok] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .BEC-Header-Left[b-lhitorj6ok] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .BEC-Stat-Group[b-lhitorj6ok] {
        margin-left: auto;
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ── Mobile: ≤ 768px ── */
@media (max-width: 768px) {
    .BEC-Header[b-lhitorj6ok] {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 16px;
    }

    .BEC-Header-Left[b-lhitorj6ok] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }

    .BEC-Title[b-lhitorj6ok] {
        font-size: 18px;
    }

    .BEC-Stat-Group[b-lhitorj6ok] {
        margin-left: 0;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .BEC-Stat[b-lhitorj6ok] {
        font-size: 12px;
    }

    .BEC-Stat-Value[b-lhitorj6ok] {
        font-size: 14px;
    }

    .BEC-Header-Actions[b-lhitorj6ok] {
        width: 100%;
        justify-content: stretch;
    }

    [b-lhitorj6ok] .BEC-Header-Actions .e-btn {
        flex: 1;
    }

    .BEC-Empty-State[b-lhitorj6ok] {
        min-height: 240px;
        padding: 24px 16px;
    }

    .BEC-Empty-Title[b-lhitorj6ok] {
        font-size: 16px;
    }

    .BEC-Empty-Text[b-lhitorj6ok] {
        font-size: 13px;
    }

    .BEC-Skeleton-Header[b-lhitorj6ok],
    .BEC-Skeleton-Row[b-lhitorj6ok] {
        gap: 8px;
        padding: 8px 16px;
    }
}

/* ── Small Phone: ≤ 480px ── */
@media (max-width: 480px) {
    .BEC-Header[b-lhitorj6ok] {
        padding: 8px 16px;
    }

    .BEC-Title[b-lhitorj6ok] {
        font-size: 16px;
    }

    .BEC-Stat-Group[b-lhitorj6ok] {
        display: none;
    }

    [b-lhitorj6ok] .BEC-Header-Actions .e-btn {
        font-size: 13px;
        padding: 8px 8px;
    }
}

/* /Components/Pages/MainLayout/KnowledgeBase.razor.rz.scp.css */
/* Microsoft Docs Style - Documentation Page */
/* ========================================= */

.docs-container[b-qcg2s6m45f] {
    --docs-primary: #0078d4;
    --docs-primary-hover: #106ebe;
    --docs-text: #171717;
    --docs-text-secondary: #505050;
    --docs-text-muted: #707070;
    --docs-bg: #ffffff;
    --docs-sidebar-bg: #f5f5f5;
    --docs-border: #e1e1e1;
    --docs-code-bg: #f5f5f5;
    --docs-link: #0078d4;

    display: flex;
    height: calc(100vh - 50px);
    background: var(--docs-bg);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Sidebar */
.docs-sidebar[b-qcg2s6m45f] {
    width: 280px;
    min-width: 280px;
    background: var(--docs-sidebar-bg);
    border-right: 1px solid var(--docs-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Navigation */
.docs-nav[b-qcg2s6m45f] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 0;
}

.docs-nav-section[b-qcg2s6m45f] {
    margin-bottom: 4px;
}

.docs-nav-header[b-qcg2s6m45f] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--docs-text);
    text-align: left;
    gap: 8px;
}

.docs-nav-header:hover[b-qcg2s6m45f] {
    background: rgba(0, 0, 0, 0.04);
}

.docs-nav-chevron[b-qcg2s6m45f] {
    transition: transform 0.2s ease;
}

.docs-nav-header.expanded .docs-nav-chevron[b-qcg2s6m45f] {
    transform: rotate(90deg);
}

.docs-nav-items[b-qcg2s6m45f] {
    padding-left: 24px;
}

.docs-nav-item[b-qcg2s6m45f] {
    display: block;
    padding: 6px 16px;
    font-size: 14px;
    color: var(--docs-text-secondary);
    text-decoration: none;
    cursor: pointer;
    border-left: 2px solid transparent;
    margin-left: 4px;
}

.docs-nav-item:hover[b-qcg2s6m45f] {
    color: var(--docs-text);
    background: rgba(0, 0, 0, 0.04);
}

.docs-nav-item.active[b-qcg2s6m45f] {
    color: var(--docs-primary);
    border-left-color: var(--docs-primary);
    font-weight: 600;
    background: rgba(0, 120, 212, 0.05);
}

/* Main Content */
.docs-main[b-qcg2s6m45f] {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.docs-content[b-qcg2s6m45f] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 48px;
    max-width: 900px;
}

/* Breadcrumb */
.docs-breadcrumb[b-qcg2s6m45f] {
    margin-bottom: 24px;
}

.docs-breadcrumb ol[b-qcg2s6m45f] {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.docs-breadcrumb li[b-qcg2s6m45f] {
    display: flex;
    align-items: center;
}

.docs-breadcrumb a[b-qcg2s6m45f] {
    color: var(--docs-link);
    text-decoration: none;
}

.docs-breadcrumb a:hover[b-qcg2s6m45f] {
    text-decoration: underline;
}

.docs-breadcrumb-separator[b-qcg2s6m45f] {
    margin: 0 8px;
    color: var(--docs-text-muted);
}

.docs-breadcrumb-current[b-qcg2s6m45f] {
    color: var(--docs-text-secondary);
}

/* Article */
.docs-article[b-qcg2s6m45f] {
    color: var(--docs-text);
    line-height: 1.6;
}

.docs-article h1[b-qcg2s6m45f] {
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: var(--docs-text);
}

.docs-article h2[b-qcg2s6m45f] {
    font-size: 24px;
    font-weight: 600;
    margin: 32px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--docs-border);
}

.docs-article h3[b-qcg2s6m45f] {
    font-size: 18px;
    font-weight: 600;
    margin: 24px 0 12px 0;
}

.docs-article p[b-qcg2s6m45f] {
    margin: 0 0 16px 0;
    font-size: 15px;
}

.docs-article ul[b-qcg2s6m45f], .docs-article ol[b-qcg2s6m45f] {
    margin: 0 0 16px 0;
    padding-left: 24px;
}

.docs-article li[b-qcg2s6m45f] {
    margin-bottom: 8px;
}

.docs-article code[b-qcg2s6m45f] {
    background: var(--docs-code-bg);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Cascadia Code', Consolas, monospace;
    font-size: 13px;
}

.docs-article pre[b-qcg2s6m45f] {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 16px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 16px 0;
}

.docs-article pre code[b-qcg2s6m45f] {
    background: none;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
}

/* Alert boxes */
.docs-alert[b-qcg2s6m45f] {
    padding: 16px;
    border-radius: 4px;
    margin: 16px 0;
    border-left: 4px solid;
}

.docs-alert--info[b-qcg2s6m45f] {
    background: #f0f6ff;
    border-left-color: var(--docs-primary);
}

.docs-alert--warning[b-qcg2s6m45f] {
    background: #fff4ce;
    border-left-color: #8a6d3b;
}

.docs-alert--tip[b-qcg2s6m45f] {
    background: #dff6dd;
    border-left-color: #107c10;
}

.docs-alert-title[b-qcg2s6m45f] {
    font-weight: 600;
    margin-bottom: 4px;
}

/* Table of Contents */
.docs-toc[b-qcg2s6m45f] {
    width: 220px;
    min-width: 220px;
    padding: 24px 16px;
    border-left: 1px solid var(--docs-border);
    overflow-y: auto;
}

.docs-toc-header[b-qcg2s6m45f] {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--docs-text-secondary);
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.docs-toc-nav[b-qcg2s6m45f] {
    display: flex;
    flex-direction: column;
}

.docs-toc-link[b-qcg2s6m45f] {
    font-size: 13px;
    color: var(--docs-text-secondary);
    text-decoration: none;
    padding: 4px 0;
    border-left: 2px solid transparent;
    padding-left: 12px;
    margin-left: -2px;
}

.docs-toc-link:hover[b-qcg2s6m45f] {
    color: var(--docs-primary);
}

.docs-toc-link.active[b-qcg2s6m45f] {
    color: var(--docs-primary);
    border-left-color: var(--docs-primary);
    font-weight: 600;
}

.docs-toc-link--nested[b-qcg2s6m45f] {
    padding-left: 24px;
}

/* Landing Page */
.docs-landing h1[b-qcg2s6m45f] {
    font-size: 40px;
    margin-bottom: 12px;
}

.docs-landing-subtitle[b-qcg2s6m45f] {
    font-size: 18px;
    color: var(--docs-text-secondary);
    margin-bottom: 32px;
}

.docs-cards[b-qcg2s6m45f] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.docs-card[b-qcg2s6m45f] {
    display: flex;
    align-items: center;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--docs-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 16px;
}

.docs-card:hover[b-qcg2s6m45f] {
    border-color: var(--docs-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.docs-card-icon[b-qcg2s6m45f] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #0078d4, #50a3d9);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.docs-card-content[b-qcg2s6m45f] {
    flex: 1;
}

.docs-card-content h3[b-qcg2s6m45f] {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
}

.docs-card-content p[b-qcg2s6m45f] {
    margin: 0;
    font-size: 13px;
    color: var(--docs-text-secondary);
}

.docs-card-arrow[b-qcg2s6m45f] {
    color: var(--docs-text-muted);
    flex-shrink: 0;
}

.docs-card:hover .docs-card-arrow[b-qcg2s6m45f] {
    color: var(--docs-primary);
}

/* Responsive */
@media (max-width: 1200px) {
    .docs-toc[b-qcg2s6m45f] {
        display: none;
    }
}

@media (max-width: 768px) {
    .docs-sidebar[b-qcg2s6m45f] {
        display: none;
    }

    .docs-content[b-qcg2s6m45f] {
        padding: 16px 24px;
    }
}
    border-left-color: var(--primary);
    color: var(--text-primary);
    font-weight: 600;[b-qcg2s6m45f]
}

/* Mobile Overlay */
.kb-sidebar-overlay[b-qcg2s6m45f] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
}
/* /Components/Pages/MainLayout/Leave_Report/Master/LeaveReport.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-w0khitxkyg] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-w0khitxkyg] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-w0khitxkyg] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-w0khitxkyg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-w0khitxkyg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-w0khitxkyg] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-w0khitxkyg] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-w0khitxkyg] {
    transform: scale(0.98);
}

.page-subtitle[b-w0khitxkyg] {
    display: none;
}

.header-right[b-w0khitxkyg] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-w0khitxkyg] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-w0khitxkyg] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-w0khitxkyg] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-w0khitxkyg] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-w0khitxkyg] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-w0khitxkyg] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-w0khitxkyg] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-w0khitxkyg] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-w0khitxkyg] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-w0khitxkyg] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-w0khitxkyg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-w0khitxkyg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-w0khitxkyg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-w0khitxkyg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-w0khitxkyg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-w0khitxkyg] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-w0khitxkyg] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* Make grid fill remaining page content */
.erp-page-content[b-w0khitxkyg] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden; /* Prevent scroll on content wrapper */
}

/* Grid container to fill available space */
[b-w0khitxkyg] .e-grid {
    /*flex: 1;*/               /* Fill remaining vertical space */
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-w0khitxkyg] .e-grid .e-row {
    height: 28px !important;
}

[b-w0khitxkyg] .e-grid .e-row td {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-w0khitxkyg] .e-grid .e-gridheader .e-headercell {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-w0khitxkyg] .e-grid .e-gridcontent {
/*    flex: 1;*/
    overflow-y: auto;
}



/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-w0khitxkyg] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-w0khitxkyg] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-w0khitxkyg] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-w0khitxkyg] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-w0khitxkyg] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-w0khitxkyg] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-w0khitxkyg] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-w0khitxkyg] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
.loading-overlay[b-w0khitxkyg] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

/* /Components/Pages/MainLayout/Marketing/EventRegistrations/EventRegistrations.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   Events Creation
   ──────────────────────────────────────────────────────────────────────────────
   Chrome mirrors Vendors Management / Website Leads so this page reads as part
   of the same system: same header/stat/tab/toolbar structure, same compact
   density (11–14px type, 30–40px controls, 38px rows).

   Every value resolves to a --BEC-* semantic token. Logical properties
   throughout, so the page works under RTL without a flip.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────────────────── */

.erp-page-container[b-sy0ri2f0qi] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

.erp-page-header[b-sy0ri2f0qi] {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 24px;
    min-height: 36px;
    background: transparent;
}

.header-left[b-sy0ri2f0qi] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-sy0ri2f0qi] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1;
}

.page-title .material-symbols-outlined[b-sy0ri2f0qi] {
    font-size: 16px;
    color: var(--BEC-colorBrandForeground1);
}

.header-right[b-sy0ri2f0qi] {
    flex-shrink: 0;
}

/* ── Stats ──────────────────────────────────────────────────────────────── */

.stats-container[b-sy0ri2f0qi] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-card[b-sy0ri2f0qi] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-sy0ri2f0qi] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-sy0ri2f0qi] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    line-height: 1;
}

/* ── Status tabs ────────────────────────────────────────────────────────── */

.category-tabs[b-sy0ri2f0qi] {
    display: flex;
    gap: 4px;
    padding: 4px 24px;
    overflow-x: auto;
}

.category-tab[b-sy0ri2f0qi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    /* Compact by the density contract, but still a comfortable target. */
    min-block-size: 28px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    font-family: inherit;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.category-tab .material-symbols-outlined[b-sy0ri2f0qi] {
    font-size: 14px;
}

.category-tab:hover[b-sy0ri2f0qi] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandStroke1);
}

.category-tab.active[b-sy0ri2f0qi] {
    background: var(--BEC-colorBrandBackground);
    border-color: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.category-tab:focus-visible[b-sy0ri2f0qi] {
    outline: 2px solid var(--BEC-colorBrandStroke1);
    outline-offset: 2px;
}

.tab-badge[b-sy0ri2f0qi] {
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.category-tab.active .tab-badge[b-sy0ri2f0qi] {
    background: rgba(255, 255, 255, 0.25);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

/* ── Action toolbar ─────────────────────────────────────────────────────── */

.action-toolbar[b-sy0ri2f0qi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 16px;
    margin: 4px 24px;
    min-height: 40px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.toolbar-left[b-sy0ri2f0qi],
.toolbar-right[b-sy0ri2f0qi] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.toolbar-divider[b-sy0ri2f0qi] {
    inline-size: 1px;
    block-size: 18px;
    margin-inline: 2px;
    background: var(--BEC-colorNeutralStroke2);
}

.toolbar-btn[b-sy0ri2f0qi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    min-block-size: 30px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    font-family: inherit;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.toolbar-btn .material-symbols-outlined[b-sy0ri2f0qi] {
    font-size: 15px;
}

.toolbar-btn:hover:not(:disabled)[b-sy0ri2f0qi] {
    background: var(--BEC-colorBrandBackground);
    border-color: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.toolbar-btn:focus-visible[b-sy0ri2f0qi] {
    outline: 2px solid var(--BEC-colorBrandStroke1);
    outline-offset: 2px;
}

.toolbar-btn:disabled[b-sy0ri2f0qi] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* The one primary action on the page carries brand fill at rest. */
.toolbar-btn--primary[b-sy0ri2f0qi] {
    background: var(--BEC-colorBrandBackground);
    border-color: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.toolbar-btn--primary:hover:not(:disabled)[b-sy0ri2f0qi] {
    filter: brightness(1.08);
}

.toolbar-btn--danger[b-sy0ri2f0qi] {
    color: var(--BEC-colorPaletteRedForeground);
}

.toolbar-btn--danger:hover:not(:disabled)[b-sy0ri2f0qi] {
    background: var(--BEC-colorPaletteRedForeground);
    border-color: var(--BEC-colorPaletteRedForeground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.toolbar-search[b-sy0ri2f0qi] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-sy0ri2f0qi] {
    position: absolute;
    inset-inline-start: 10px;
    z-index: 1;
    font-size: 15px;
    color: var(--BEC-colorNeutralForeground3);
    pointer-events: none;
}

[b-sy0ri2f0qi] .e-search-inline .e-input {
    padding-inline-start: 30px !important;
    font-size: 12px !important;
    height: 30px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

/* ── Content ────────────────────────────────────────────────────────────── */

.erp-page-content[b-sy0ri2f0qi] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px;
    position: relative;
    overflow: hidden;
}

.loading-overlay[b-sy0ri2f0qi] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
}

.empty-state[b-sy0ri2f0qi],
.error-state[b-sy0ri2f0qi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 24px;
    color: var(--BEC-colorNeutralForeground3);
    text-align: center;
}

.empty-state .material-symbols-outlined[b-sy0ri2f0qi],
.error-state .material-symbols-outlined[b-sy0ri2f0qi] {
    font-size: 32px;
    opacity: 0.5;
}

.error-state .material-symbols-outlined[b-sy0ri2f0qi] {
    color: var(--BEC-colorPaletteRedForeground);
    opacity: 1;
}

.btn-retry[b-sy0ri2f0qi] {
    padding: 6px 16px;
    min-block-size: 30px;
    border: 1px solid var(--BEC-colorBrandStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    background: transparent;
    color: var(--BEC-colorBrandForeground1);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

.btn-retry:hover[b-sy0ri2f0qi] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

/* ── Inline banners (replacing toasts) ──────────────────────────────────── */

.inline-banner[b-sy0ri2f0qi] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 24px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 12px;
    line-height: 1.5;
}

.inline-banner .material-symbols-outlined[b-sy0ri2f0qi] {
    font-size: 16px;
    flex-shrink: 0;
}

.inline-banner--success[b-sy0ri2f0qi] {
    background: var(--BEC-colorPaletteGreenBackground);
    border-color: var(--BEC-colorPaletteGreenForeground);
    color: var(--BEC-colorPaletteGreenForeground);
}

.inline-banner--danger[b-sy0ri2f0qi] {
    background: var(--BEC-colorPaletteRedBackground);
    border-color: var(--BEC-colorPaletteRedForeground);
    color: var(--BEC-colorPaletteRedForeground);
}

.inline-banner--warning[b-sy0ri2f0qi] {
    background: var(--BEC-colorPaletteYellowBackground);
    border-color: var(--BEC-colorPaletteYellowForeground);
    color: var(--BEC-colorPaletteYellowForeground);
    text-align: start;
}

/* A banner inside a side panel has the panel's own padding already. */
[b-sy0ri2f0qi] .bec-panel .inline-banner {
    margin-inline: 0;
    margin-block-end: 12px;
}

/* ── Grid cells ─────────────────────────────────────────────────────────── */

.status-badge[b-sy0ri2f0qi] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-badge .material-symbols-outlined[b-sy0ri2f0qi] {
    font-size: 13px;
}

/* Colour AND label AND icon — never colour alone (DESIGN_SYSTEM.md §2). */
.status-0[b-sy0ri2f0qi] {                                       /* Draft     */
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

.status-1[b-sy0ri2f0qi] {                                       /* Published */
    background: var(--BEC-colorPaletteGreenBackground);
    color: var(--BEC-colorPaletteGreenForeground);
}

.status-2[b-sy0ri2f0qi] {                                       /* Closed    */
    background: var(--BEC-colorPaletteYellowBackground);
    color: var(--BEC-colorPaletteYellowForeground);
}

.status-3[b-sy0ri2f0qi],
.status-4[b-sy0ri2f0qi] {                                       /* Archived / Revoked */
    background: var(--BEC-colorPaletteRedBackground);
    color: var(--BEC-colorPaletteRedForeground);
}

.count-pill[b-sy0ri2f0qi] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--BEC-colorNeutralBackground3);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
}

.row-link[b-sy0ri2f0qi] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorBrandForeground1);
    text-decoration: none;
}

.row-link:hover[b-sy0ri2f0qi] {
    text-decoration: underline;
}

.row-link .material-symbols-outlined[b-sy0ri2f0qi] {
    font-size: 14px;
}

.row-muted[b-sy0ri2f0qi] {
    color: var(--BEC-colorNeutralForeground3);
}

/* ── Side-panel forms ───────────────────────────────────────────────────── */

.form-section[b-sy0ri2f0qi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 22px 0 10px;
    padding-block-end: 6px;
    border-block-end: 1px solid var(--BEC-colorNeutralStroke2);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
}

.form-section:first-child[b-sy0ri2f0qi] {
    margin-block-start: 0;
}

.form-grid[b-sy0ri2f0qi] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.form-field label[b-sy0ri2f0qi] {
    display: block;
    margin-block-end: 4px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

.req[b-sy0ri2f0qi] {
    color: var(--BEC-colorPaletteRedForeground);
}

.field-hint[b-sy0ri2f0qi] {
    display: block;
    margin-block-start: 4px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--BEC-colorNeutralForeground3);
}

.panel-empty[b-sy0ri2f0qi] {
    margin: 10px 0;
    padding: 24px;
    border: 1px dashed var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: center;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

/*
   Arabic copy is authored inside an LTR admin page, so the input is flipped
   rather than the page. ::deep because Syncfusion renders the real <input>
   inside its own wrapper, which scoped CSS would not otherwise reach.
*/
[b-sy0ri2f0qi] .rtl-input input,
[b-sy0ri2f0qi] .rtl-input textarea {
    direction: rtl;
    text-align: right;
}

/* ── Field cards ────────────────────────────────────────────────────────── */

.field-card[b-sy0ri2f0qi] {
    margin-block-end: 10px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
}

/* A retired field still owns stored answers, so it is dimmed, never hidden. */
.field-card--retired[b-sy0ri2f0qi] {
    opacity: 0.55;
}

.field-card__head[b-sy0ri2f0qi] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-end: 10px;
}

.field-card__index[b-sy0ri2f0qi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 20px;
    block-size: 20px;
    border-radius: var(--BEC-borderRadiusCircular);
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    font-size: 10px;
    font-weight: var(--BEC-fontWeightBold);
}

.field-card__key[b-sy0ri2f0qi] {
    flex: 1;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    overflow-wrap: anywhere;
}

.field-card__foot[b-sy0ri2f0qi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-block-start: 10px;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--BEC-colorNeutralStroke2);
}

.check[b-sy0ri2f0qi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 28px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
}

.check input[b-sy0ri2f0qi] {
    inline-size: 15px;
    block-size: 15px;
    accent-color: var(--BEC-colorBrandBackground);
    cursor: pointer;
}

.check input:focus-visible[b-sy0ri2f0qi] {
    outline: 2px solid var(--BEC-colorBrandStroke1);
    outline-offset: 2px;
}

.option-box[b-sy0ri2f0qi] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 8px 0 14px;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.option-box legend[b-sy0ri2f0qi] {
    padding-inline: 6px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
}

.option-list[b-sy0ri2f0qi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-block-start: 10px;
    padding-block-start: 10px;
    border-block-start: 1px dashed var(--BEC-colorNeutralStroke2);
}

.option-row[b-sy0ri2f0qi] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.option-row > :not(.icon-btn)[b-sy0ri2f0qi] {
    flex: 1;
    min-inline-size: 0;
}

.icon-btn[b-sy0ri2f0qi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 30px;
    block-size: 30px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.icon-btn .material-symbols-outlined[b-sy0ri2f0qi] {
    font-size: 16px;
}

.icon-btn:hover[b-sy0ri2f0qi] {
    background: var(--BEC-colorNeutralBackground1Hover);
}

.icon-btn:focus-visible[b-sy0ri2f0qi] {
    outline: 2px solid var(--BEC-colorBrandStroke1);
    outline-offset: 2px;
}

.icon-btn--danger:hover[b-sy0ri2f0qi] {
    background: var(--BEC-colorPaletteRedBackground);
    color: var(--BEC-colorPaletteRedForeground);
    border-color: var(--BEC-colorPaletteRedForeground);
}

/* ── Links & QR panel ───────────────────────────────────────────────────── */

.url-box[b-sy0ri2f0qi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.url-box__label[b-sy0ri2f0qi] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
    white-space: nowrap;
}

.url-box__value[b-sy0ri2f0qi] {
    flex: 1;
    min-inline-size: 0;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground1);
    /* A signed URL is long — wrap rather than scroll the panel sideways. */
    overflow-wrap: anywhere;
}

.url-box__value--block[b-sy0ri2f0qi] {
    display: block;
    margin-block-start: 10px;
    padding: 8px 10px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    text-align: start;
}

.new-link-row[b-sy0ri2f0qi] {
    display: flex;
    gap: 6px;
}

.new-link-row > :first-child[b-sy0ri2f0qi] {
    flex: 1;
    min-inline-size: 0;
}

.issued[b-sy0ri2f0qi] {
    margin-block-start: 14px;
    padding: 14px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: center;
}

.qr-frame[b-sy0ri2f0qi] {
    display: inline-block;
    padding: 10px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.qr-frame canvas[b-sy0ri2f0qi] {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
}

.qr-failed[b-sy0ri2f0qi] {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--BEC-colorPaletteRedForeground);
}

.issued__actions[b-sy0ri2f0qi] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-block-start: 12px;
}

/* ── Panel table ────────────────────────────────────────────────────────── */

.panel-table[b-sy0ri2f0qi] {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.panel-table th[b-sy0ri2f0qi] {
    padding: 6px 8px;
    border-block-end: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: start;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
}

.panel-table td[b-sy0ri2f0qi] {
    padding: 8px;
    border-block-end: 1px solid var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground2);
}

.panel-table .is-revoked td[b-sy0ri2f0qi] {
    opacity: 0.6;
}

.sr-only[b-sy0ri2f0qi] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Tablet and up ──────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .form-grid--2[b-sy0ri2f0qi] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .category-tab[b-sy0ri2f0qi],
    .toolbar-btn[b-sy0ri2f0qi],
    .icon-btn[b-sy0ri2f0qi] {
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Events Management — additions beyond the shared chrome above
   ══════════════════════════════════════════════════════════════════════════════ */

.page-slug[b-sy0ri2f0qi] {
    margin-inline-start: 10px;
    padding: 1px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-colorNeutralBackground3);
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.toolbar-filter[b-sy0ri2f0qi] {
    display: flex;
    align-items: center;
}

[b-sy0ri2f0qi] .e-compact .e-input {
    font-size: 12px !important;
    height: 30px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

.inline-banner--info[b-sy0ri2f0qi] {
    background: var(--BEC-colorNeutralBackground3);
    border-color: var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground2);
}

/* ── Event picker (id-less sidebar landing route) ───────────────────────── */

.picker-lead[b-sy0ri2f0qi] {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.picker[b-sy0ri2f0qi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.picker__item[b-sy0ri2f0qi] {
    display: flex;
    align-items: center;
    gap: 12px;
    /* The whole row is the target. */
    min-block-size: 44px;
    padding: 8px 14px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorNeutralForeground1);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.picker__item:hover[b-sy0ri2f0qi] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandStroke1);
}

.picker__item:focus-visible[b-sy0ri2f0qi] {
    outline: 2px solid var(--BEC-colorBrandStroke1);
    outline-offset: 2px;
}

.picker__main[b-sy0ri2f0qi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-inline-size: 0;
}

.picker__title[b-sy0ri2f0qi] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    overflow-wrap: anywhere;
}

.picker__meta[b-sy0ri2f0qi] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

.picker__chevron[b-sy0ri2f0qi] {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground3);
}

/* ── Pager ──────────────────────────────────────────────────────────────── */

.pager[b-sy0ri2f0qi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-block: 14px 4px;
}

.pager__label[b-sy0ri2f0qi] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

/* ── Detail panel ───────────────────────────────────────────────────────── */

.detail-head[b-sy0ri2f0qi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.detail-ref[b-sy0ri2f0qi] {
    font-size: 15px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground1);
    /* A reference gets read aloud and retyped — make it easy to select. */
    user-select: all;
}

.detail-meta[b-sy0ri2f0qi] {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

.answers[b-sy0ri2f0qi] {
    margin: 14px 0 0;
    padding: 0;
}

.answer[b-sy0ri2f0qi] {
    padding-block: 9px;
    border-block-end: 1px solid var(--BEC-colorNeutralStroke2);
}

.answer:last-child[b-sy0ri2f0qi] {
    border-block-end: none;
}

.answer dt[b-sy0ri2f0qi] {
    margin-block-end: 3px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
}

.answer dd[b-sy0ri2f0qi] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground1);
    /* A visitor-supplied answer can be one long unbroken string. */
    overflow-wrap: anywhere;
}
/* /Components/Pages/MainLayout/Marketing/EventsAdministration/EventsAdministration.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   Events Creation
   ──────────────────────────────────────────────────────────────────────────────
   Chrome mirrors Vendors Management / Website Leads so this page reads as part
   of the same system: same header/stat/tab/toolbar structure, same compact
   density (11–14px type, 30–40px controls, 38px rows).

   Every value resolves to a --BEC-* semantic token. Logical properties
   throughout, so the page works under RTL without a flip.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────────────────── */

.erp-page-container[b-rxop3yemo0] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

.erp-page-header[b-rxop3yemo0] {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 24px;
    min-height: 36px;
    background: transparent;
}

.header-left[b-rxop3yemo0] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-rxop3yemo0] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1;
}

.page-title .material-symbols-outlined[b-rxop3yemo0] {
    font-size: 16px;
    color: var(--BEC-colorBrandForeground1);
}

.header-right[b-rxop3yemo0] {
    flex-shrink: 0;
}

/* ── Stats ──────────────────────────────────────────────────────────────── */

.stats-container[b-rxop3yemo0] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-card[b-rxop3yemo0] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-rxop3yemo0] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-rxop3yemo0] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    line-height: 1;
}

/* ── Status tabs ────────────────────────────────────────────────────────── */

.category-tabs[b-rxop3yemo0] {
    display: flex;
    gap: 4px;
    padding: 4px 24px;
    overflow-x: auto;
}

.category-tab[b-rxop3yemo0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    /* Compact by the density contract, but still a comfortable target. */
    min-block-size: 28px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    font-family: inherit;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.category-tab .material-symbols-outlined[b-rxop3yemo0] {
    font-size: 14px;
}

.category-tab:hover[b-rxop3yemo0] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandStroke1);
}

.category-tab.active[b-rxop3yemo0] {
    background: var(--BEC-colorBrandBackground);
    border-color: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.category-tab:focus-visible[b-rxop3yemo0] {
    outline: 2px solid var(--BEC-colorBrandStroke1);
    outline-offset: 2px;
}

.tab-badge[b-rxop3yemo0] {
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.category-tab.active .tab-badge[b-rxop3yemo0] {
    background: rgba(255, 255, 255, 0.25);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

/* ── Action toolbar ─────────────────────────────────────────────────────── */

.action-toolbar[b-rxop3yemo0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 16px;
    margin: 4px 24px;
    min-height: 40px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.toolbar-left[b-rxop3yemo0],
.toolbar-right[b-rxop3yemo0] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.toolbar-divider[b-rxop3yemo0] {
    inline-size: 1px;
    block-size: 18px;
    margin-inline: 2px;
    background: var(--BEC-colorNeutralStroke2);
}

.toolbar-btn[b-rxop3yemo0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    min-block-size: 30px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    font-family: inherit;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.toolbar-btn .material-symbols-outlined[b-rxop3yemo0] {
    font-size: 15px;
}

.toolbar-btn:hover:not(:disabled)[b-rxop3yemo0] {
    background: var(--BEC-colorBrandBackground);
    border-color: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.toolbar-btn:focus-visible[b-rxop3yemo0] {
    outline: 2px solid var(--BEC-colorBrandStroke1);
    outline-offset: 2px;
}

.toolbar-btn:disabled[b-rxop3yemo0] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* The one primary action on the page carries brand fill at rest. */
.toolbar-btn--primary[b-rxop3yemo0] {
    background: var(--BEC-colorBrandBackground);
    border-color: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.toolbar-btn--primary:hover:not(:disabled)[b-rxop3yemo0] {
    filter: brightness(1.08);
}

.toolbar-btn--danger[b-rxop3yemo0] {
    color: var(--BEC-colorPaletteRedForeground);
}

.toolbar-btn--danger:hover:not(:disabled)[b-rxop3yemo0] {
    background: var(--BEC-colorPaletteRedForeground);
    border-color: var(--BEC-colorPaletteRedForeground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.toolbar-search[b-rxop3yemo0] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-rxop3yemo0] {
    position: absolute;
    inset-inline-start: 10px;
    z-index: 1;
    font-size: 15px;
    color: var(--BEC-colorNeutralForeground3);
    pointer-events: none;
}

[b-rxop3yemo0] .e-search-inline .e-input {
    padding-inline-start: 30px !important;
    font-size: 12px !important;
    height: 30px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

/* ── Content ────────────────────────────────────────────────────────────── */

.erp-page-content[b-rxop3yemo0] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px;
    position: relative;
    overflow: hidden;
}

.loading-overlay[b-rxop3yemo0] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
}

.empty-state[b-rxop3yemo0],
.error-state[b-rxop3yemo0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 24px;
    color: var(--BEC-colorNeutralForeground3);
    text-align: center;
}

.empty-state .material-symbols-outlined[b-rxop3yemo0],
.error-state .material-symbols-outlined[b-rxop3yemo0] {
    font-size: 32px;
    opacity: 0.5;
}

.error-state .material-symbols-outlined[b-rxop3yemo0] {
    color: var(--BEC-colorPaletteRedForeground);
    opacity: 1;
}

.btn-retry[b-rxop3yemo0] {
    padding: 6px 16px;
    min-block-size: 30px;
    border: 1px solid var(--BEC-colorBrandStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    background: transparent;
    color: var(--BEC-colorBrandForeground1);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

.btn-retry:hover[b-rxop3yemo0] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

/* ── Inline banners (replacing toasts) ──────────────────────────────────── */

.inline-banner[b-rxop3yemo0] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 24px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 12px;
    line-height: 1.5;
}

.inline-banner .material-symbols-outlined[b-rxop3yemo0] {
    font-size: 16px;
    flex-shrink: 0;
}

.inline-banner--success[b-rxop3yemo0] {
    background: var(--BEC-colorPaletteGreenBackground);
    border-color: var(--BEC-colorPaletteGreenForeground);
    color: var(--BEC-colorPaletteGreenForeground);
}

.inline-banner--danger[b-rxop3yemo0] {
    background: var(--BEC-colorPaletteRedBackground);
    border-color: var(--BEC-colorPaletteRedForeground);
    color: var(--BEC-colorPaletteRedForeground);
}

.inline-banner--warning[b-rxop3yemo0] {
    background: var(--BEC-colorPaletteYellowBackground);
    border-color: var(--BEC-colorPaletteYellowForeground);
    color: var(--BEC-colorPaletteYellowForeground);
    text-align: start;
}

/* A banner inside a side panel has the panel's own padding already. */
[b-rxop3yemo0] .bec-panel .inline-banner {
    margin-inline: 0;
    margin-block-end: 12px;
}

/* ── Grid cells ─────────────────────────────────────────────────────────── */

.status-badge[b-rxop3yemo0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-badge .material-symbols-outlined[b-rxop3yemo0] {
    font-size: 13px;
}

/* Colour AND label AND icon — never colour alone (DESIGN_SYSTEM.md §2). */
.status-0[b-rxop3yemo0] {                                       /* Draft     */
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

.status-1[b-rxop3yemo0] {                                       /* Published */
    background: var(--BEC-colorPaletteGreenBackground);
    color: var(--BEC-colorPaletteGreenForeground);
}

.status-2[b-rxop3yemo0] {                                       /* Closed    */
    background: var(--BEC-colorPaletteYellowBackground);
    color: var(--BEC-colorPaletteYellowForeground);
}

.status-3[b-rxop3yemo0],
.status-4[b-rxop3yemo0] {                                       /* Archived / Revoked */
    background: var(--BEC-colorPaletteRedBackground);
    color: var(--BEC-colorPaletteRedForeground);
}

.count-pill[b-rxop3yemo0] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--BEC-colorNeutralBackground3);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
}

.row-link[b-rxop3yemo0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorBrandForeground1);
    text-decoration: none;
}

.row-link:hover[b-rxop3yemo0] {
    text-decoration: underline;
}

.row-link .material-symbols-outlined[b-rxop3yemo0] {
    font-size: 14px;
}

.row-muted[b-rxop3yemo0] {
    color: var(--BEC-colorNeutralForeground3);
}

/* ── Side-panel forms ───────────────────────────────────────────────────── */

.form-section[b-rxop3yemo0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 22px 0 10px;
    padding-block-end: 6px;
    border-block-end: 1px solid var(--BEC-colorNeutralStroke2);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
}

.form-section:first-child[b-rxop3yemo0] {
    margin-block-start: 0;
}

.form-grid[b-rxop3yemo0] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.form-field label[b-rxop3yemo0] {
    display: block;
    margin-block-end: 4px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

.req[b-rxop3yemo0] {
    color: var(--BEC-colorPaletteRedForeground);
}

.field-hint[b-rxop3yemo0] {
    display: block;
    margin-block-start: 4px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--BEC-colorNeutralForeground3);
}

.panel-empty[b-rxop3yemo0] {
    margin: 10px 0;
    padding: 24px;
    border: 1px dashed var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: center;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

/*
   Arabic copy is authored inside an LTR admin page, so the input is flipped
   rather than the page. ::deep because Syncfusion renders the real <input>
   inside its own wrapper, which scoped CSS would not otherwise reach.
*/
[b-rxop3yemo0] .rtl-input input,
[b-rxop3yemo0] .rtl-input textarea {
    direction: rtl;
    text-align: right;
}

/* ── Field cards ────────────────────────────────────────────────────────── */

.field-card[b-rxop3yemo0] {
    margin-block-end: 10px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
}

/* A retired field still owns stored answers, so it is dimmed, never hidden. */
.field-card--retired[b-rxop3yemo0] {
    opacity: 0.55;
}

.field-card__head[b-rxop3yemo0] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-end: 10px;
}

.field-card__index[b-rxop3yemo0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 20px;
    block-size: 20px;
    border-radius: var(--BEC-borderRadiusCircular);
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    font-size: 10px;
    font-weight: var(--BEC-fontWeightBold);
}

.field-card__key[b-rxop3yemo0] {
    flex: 1;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    overflow-wrap: anywhere;
}

.field-card__foot[b-rxop3yemo0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-block-start: 10px;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--BEC-colorNeutralStroke2);
}

.check[b-rxop3yemo0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 28px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    cursor: pointer;
}

.check input[b-rxop3yemo0] {
    inline-size: 15px;
    block-size: 15px;
    accent-color: var(--BEC-colorBrandBackground);
    cursor: pointer;
}

.check input:focus-visible[b-rxop3yemo0] {
    outline: 2px solid var(--BEC-colorBrandStroke1);
    outline-offset: 2px;
}

.option-box[b-rxop3yemo0] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 8px 0 14px;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.option-box legend[b-rxop3yemo0] {
    padding-inline: 6px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
}

.option-list[b-rxop3yemo0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-block-start: 10px;
    padding-block-start: 10px;
    border-block-start: 1px dashed var(--BEC-colorNeutralStroke2);
}

.option-row[b-rxop3yemo0] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.option-row > :not(.icon-btn)[b-rxop3yemo0] {
    flex: 1;
    min-inline-size: 0;
}

.icon-btn[b-rxop3yemo0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 30px;
    block-size: 30px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.icon-btn .material-symbols-outlined[b-rxop3yemo0] {
    font-size: 16px;
}

.icon-btn:hover[b-rxop3yemo0] {
    background: var(--BEC-colorNeutralBackground1Hover);
}

.icon-btn:focus-visible[b-rxop3yemo0] {
    outline: 2px solid var(--BEC-colorBrandStroke1);
    outline-offset: 2px;
}

.icon-btn--danger:hover[b-rxop3yemo0] {
    background: var(--BEC-colorPaletteRedBackground);
    color: var(--BEC-colorPaletteRedForeground);
    border-color: var(--BEC-colorPaletteRedForeground);
}

/* ── Links & QR panel ───────────────────────────────────────────────────── */

.url-box[b-rxop3yemo0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.url-box__label[b-rxop3yemo0] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
    white-space: nowrap;
}

.url-box__value[b-rxop3yemo0] {
    flex: 1;
    min-inline-size: 0;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground1);
    /* A signed URL is long — wrap rather than scroll the panel sideways. */
    overflow-wrap: anywhere;
}

.url-box__value--block[b-rxop3yemo0] {
    display: block;
    margin-block-start: 10px;
    padding: 8px 10px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    text-align: start;
}

.new-link-row[b-rxop3yemo0] {
    display: flex;
    gap: 6px;
}

.new-link-row > :first-child[b-rxop3yemo0] {
    flex: 1;
    min-inline-size: 0;
}

.issued[b-rxop3yemo0] {
    margin-block-start: 14px;
    padding: 14px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: center;
}

.qr-frame[b-rxop3yemo0] {
    display: inline-block;
    padding: 10px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.qr-frame canvas[b-rxop3yemo0] {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
}

.qr-failed[b-rxop3yemo0] {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--BEC-colorPaletteRedForeground);
}

.issued__actions[b-rxop3yemo0] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-block-start: 12px;
}

/* ── Panel table ────────────────────────────────────────────────────────── */

.panel-table[b-rxop3yemo0] {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.panel-table th[b-rxop3yemo0] {
    padding: 6px 8px;
    border-block-end: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: start;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
}

.panel-table td[b-rxop3yemo0] {
    padding: 8px;
    border-block-end: 1px solid var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground2);
}

.panel-table .is-revoked td[b-rxop3yemo0] {
    opacity: 0.6;
}

.sr-only[b-rxop3yemo0] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Tablet and up ──────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .form-grid--2[b-rxop3yemo0] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .category-tab[b-rxop3yemo0],
    .toolbar-btn[b-rxop3yemo0],
    .icon-btn[b-rxop3yemo0] {
        transition: none;
    }
}

/* Date-shape toggles sit above the pickers they govern. */
.date-modes[b-rxop3yemo0] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin-block-end: 10px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
}
/* /Components/Pages/MainLayout/Marketing/PublicEvent/PublicEventForm.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   Public Event Registration
   ──────────────────────────────────────────────────────────────────────────────
   Navy gradient hero, white card overlapping its lower edge, indigo gradient
   CTA on a light ground.

   Mobile-first: the base rules are the phone layout and the media queries add
   the desktop. All animation is CSS — no server timer touches this page.
   ══════════════════════════════════════════════════════════════════════════════ */

.ev-page[b-z9szty1gv0] {
    --ev-navy-900: #111c3a;
    --ev-navy-700: #16295c;
    --ev-navy-500: #1d3a77;
    --ev-indigo: #4f46e5;
    --ev-indigo-dark: #4338ca;
    --ev-ground: #f1f2f6;
    --ev-surface: #ffffff;
    --ev-ink: #101828;
    --ev-ink-soft: #667085;
    --ev-line: #e4e7ec;
    --ev-field: #f7f8fa;
    --ev-danger: #d92d20;
    --ev-warn-bg: #fff8e6;
    --ev-warn-ink: #8a5a00;
    --ev-radius: 14px;

    min-height: 100vh;
    min-height: 100dvh; /* avoids the iOS toolbar leaving a gap under the footer */
    display: flex;
    flex-direction: column;
    background: var(--ev-ground);
    color: var(--ev-ink);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.ev-hero[b-z9szty1gv0] {
    background: linear-gradient(135deg, var(--ev-navy-900) 0%, var(--ev-navy-700) 55%, var(--ev-navy-500) 100%);
    color: #fff;
    padding: 40px 20px 96px; /* bottom padding leaves room for the card overlap */
    text-align: center;
}

.ev-hero-inner[b-z9szty1gv0] {
    max-width: 720px;
    margin: 0 auto;
}

.ev-logo[b-z9szty1gv0] {
    height: 34px;
    width: auto;
    margin-bottom: 28px;
}

.ev-title[b-z9szty1gv0] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.ev-subtitle[b-z9szty1gv0] {
    margin: 10px auto 0;
    max-width: 34rem;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}

.ev-pills[b-z9szty1gv0] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.ev-pill[b-z9szty1gv0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.875rem;
    font-weight: 600;
    /* Long venue names must wrap inside the pill rather than widen the page. */
    max-width: 100%;
    text-align: start;
}

.ev-pill-icon[b-z9szty1gv0] {
    font-size: 0.95rem;
    line-height: 1;
}

/* ── Card ───────────────────────────────────────────────────────────────── */

.ev-main[b-z9szty1gv0] {
    flex: 1;
    padding: 0 16px;
    /* Pulls the card up over the hero's lower edge. */
    margin-top: -64px;
}

.ev-card[b-z9szty1gv0] {
    max-width: 540px;
    margin: 0 auto;
    background: var(--ev-surface);
    border-radius: var(--ev-radius);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.1), 0 2px 6px rgba(16, 24, 40, 0.05);
}

.ev-body[b-z9szty1gv0] {
    padding: 28px 22px 30px;
}

.ev-card-head[b-z9szty1gv0] {
    margin-bottom: 22px;
}

.ev-card-title[b-z9szty1gv0] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ev-card-sub[b-z9szty1gv0] {
    margin: 6px 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ev-ink-soft);
}

/* ── Fields ─────────────────────────────────────────────────────────────── */

.ev-field[b-z9szty1gv0] {
    margin-bottom: 20px;
}

.ev-label[b-z9szty1gv0] {
    display: block;
    margin-bottom: 7px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ev-ink);
}

.ev-req[b-z9szty1gv0] {
    margin-inline-start: 3px;
    color: var(--ev-danger);
}

.ev-help[b-z9szty1gv0] {
    margin: 0 0 7px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ev-ink-soft);
}

.ev-field[b-z9szty1gv0]  .ev-input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    background: var(--ev-field);
    border: 1px solid transparent;
    border-radius: 10px;
    /* 16px keeps iOS Safari from zooming the viewport when a field is focused. */
    font-size: 16px;
    font-family: inherit;
    color: var(--ev-ink);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.ev-field[b-z9szty1gv0]  .ev-input::placeholder {
    color: #b0b6c3;
}

.ev-field[b-z9szty1gv0]  .ev-input:focus {
    outline: none;
    background: var(--ev-surface);
    border-color: var(--ev-indigo);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
}

.ev-field[b-z9szty1gv0]  .ev-input-invalid {
    border-color: var(--ev-danger);
    background: #fff5f4;
}

.ev-field[b-z9szty1gv0]  .ev-textarea {
    resize: vertical;
    min-height: 108px;
    line-height: 1.5;
}

.ev-field[b-z9szty1gv0]  .ev-select {
    appearance: none;
    /* Inline SVG chevron: no external asset, no extra request. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center; /* mirrored below for RTL */
    padding-inline-end: 44px;
}

.ev-field[b-z9szty1gv0]  .ev-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ev-field[b-z9szty1gv0]  .ev-choice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    background: var(--ev-field);
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.45;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ev-field[b-z9szty1gv0]  .ev-choice:hover {
    border-color: #cfd4e0;
}

.ev-field[b-z9szty1gv0]  .ev-choice input {
    /* Nudges the control onto the first text line without shifting the label. */
    margin: 2px 0 0;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    accent-color: var(--ev-indigo);
    cursor: pointer;
}

.ev-field[b-z9szty1gv0]  .ev-choice-single {
    align-items: flex-start;
}

.ev-error[b-z9szty1gv0] {
    margin: 7px 0 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ev-danger);
}

/* ── Honeypot ───────────────────────────────────────────────────────────── */

/*
   Positioned off-screen rather than display:none or hidden. Bots commonly skip
   inputs that are display:none but still fill a positioned one, and screen
   readers skip it because of aria-hidden + tabindex="-1" on the markup.
*/
.ev-hp[b-z9szty1gv0] {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Submit ─────────────────────────────────────────────────────────────── */

.ev-submit[b-z9szty1gv0] {
    width: 100%;
    margin-top: 4px;
    padding: 17px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #5b52e8 0%, var(--ev-indigo-dark) 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.ev-submit:hover:not(:disabled)[b-z9szty1gv0] {
    filter: brightness(1.06);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
}

.ev-submit:active:not(:disabled)[b-z9szty1gv0] {
    transform: translateY(1px);
}

.ev-submit:disabled[b-z9szty1gv0] {
    opacity: 0.65;
    cursor: not-allowed;
}

.ev-spinner[b-z9szty1gv0] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ev-spin-b-z9szty1gv0 0.7s linear infinite;
}

@keyframes ev-spin-b-z9szty1gv0 {
    to { transform: rotate(360deg); }
}

.ev-privacy[b-z9szty1gv0] {
    margin: 14px 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    text-align: center;
    color: var(--ev-ink-soft);
}

.ev-privacy a[b-z9szty1gv0] {
    color: var(--ev-indigo);
    font-weight: 600;
}

/* ── Notices ────────────────────────────────────────────────────────────── */

.ev-notice[b-z9szty1gv0] {
    margin-bottom: 18px;
    padding: 12px 15px;
    border-radius: 10px;
    font-size: 0.86rem;
    line-height: 1.5;
    font-weight: 500;
}

.ev-notice-error[b-z9szty1gv0] {
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #b42318;
}

.ev-notice-warn[b-z9szty1gv0] {
    background: var(--ev-warn-bg);
    border: 1px solid #f5dfae;
    color: var(--ev-warn-ink);
}

/* ── Terminal states (success, closed, not found) ───────────────────────── */

.ev-state[b-z9szty1gv0] {
    text-align: center;
    padding-top: 38px;
    padding-bottom: 38px;
}

.ev-state-icon[b-z9szty1gv0] {
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ev-field);
    font-size: 1.6rem;
}

.ev-state-success .ev-state-icon[b-z9szty1gv0] {
    background: #e9f8ef;
    color: #067647;
    font-size: 1.9rem;
    font-weight: 700;
}

.ev-state-title[b-z9szty1gv0] {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 700;
}

.ev-state-text[b-z9szty1gv0] {
    margin: 0 auto;
    max-width: 26rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ev-ink-soft);
}

.ev-reference[b-z9szty1gv0] {
    margin: 24px auto 0;
    padding: 15px 20px;
    max-width: 20rem;
    background: var(--ev-field);
    border: 1px dashed #cfd4e0;
    border-radius: 10px;
}

.ev-reference-label[b-z9szty1gv0] {
    display: block;
    margin-bottom: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ev-ink-soft);
}

.ev-reference-code[b-z9szty1gv0] {
    display: block;
    font-family: "Consolas", "SF Mono", ui-monospace, monospace;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ev-ink);
    /* A reference gets read aloud and retyped — let it be selected easily. */
    user-select: all;
    word-break: break-all;
}

.ev-state-hint[b-z9szty1gv0] {
    margin: 14px 0 0;
    font-size: 0.8rem;
    color: var(--ev-ink-soft);
}

/* ── Loading skeleton ───────────────────────────────────────────────────── */

.ev-sk[b-z9szty1gv0] {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, #e9ebf0 25%, #f3f4f7 50%, #e9ebf0 75%);
    background-size: 200% 100%;
    animation: ev-shimmer-b-z9szty1gv0 1.4s ease-in-out infinite;
}

.ev-hero-skeleton .ev-sk[b-z9szty1gv0] {
    background: linear-gradient(90deg, rgba(255,255,255,0.10) 25%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.10) 75%);
    background-size: 200% 100%;
    margin: 0 auto 12px;
}

.ev-sk-title[b-z9szty1gv0] { width: 60%; height: 30px; }
.ev-sk-sub[b-z9szty1gv0]   { width: 44%; height: 16px; }
.ev-sk-line[b-z9szty1gv0]  { width: 34%; height: 14px; margin-bottom: 9px; }
.ev-sk-input[b-z9szty1gv0] { width: 100%; height: 50px; margin-bottom: 22px; }

@keyframes ev-shimmer-b-z9szty1gv0 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.ev-footer[b-z9szty1gv0] {
    padding: 34px 20px 26px;
    text-align: center;
    font-size: 0.8rem;
    color: #98a2b3;
}

.ev-footer p[b-z9szty1gv0] {
    margin: 0;
}

/* ── Tablet and up ──────────────────────────────────────────────────────── */

@media (min-width: 640px) {
    .ev-hero[b-z9szty1gv0]  { padding: 54px 24px 112px; }
    .ev-logo[b-z9szty1gv0]  { height: 40px; margin-bottom: 34px; }
    .ev-title[b-z9szty1gv0] { font-size: 2.4rem; }
    .ev-subtitle[b-z9szty1gv0] { font-size: 1.075rem; }
    .ev-main[b-z9szty1gv0]  { margin-top: -74px; }
    .ev-body[b-z9szty1gv0]  { padding: 34px 34px 36px; }
    .ev-card-title[b-z9szty1gv0] { font-size: 1.32rem; }
    .ev-field[b-z9szty1gv0]  .ev-choices { gap: 11px; }
}

@media (min-width: 1024px) {
    .ev-hero[b-z9szty1gv0]  { padding: 66px 24px 128px; }
    .ev-title[b-z9szty1gv0] { font-size: 2.75rem; }
    .ev-main[b-z9szty1gv0]  { margin-top: -84px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ev-sk[b-z9szty1gv0],
    .ev-spinner[b-z9szty1gv0] {
        animation: none;
    }

    .ev-submit[b-z9szty1gv0],
    .ev-input[b-z9szty1gv0],
    .ev-field[b-z9szty1gv0]  .ev-choice {
        transition: none;
    }
}

/* ── RTL ────────────────────────────────────────────────────────────────── */

/*
   The select chevron is the one thing here that cannot be expressed with a
   logical property — background-position takes physical keywords only. Mirror
   it explicitly so the arrow sits on the trailing edge in Arabic too.
*/
[dir="rtl"] .ev-field[b-z9szty1gv0]  .ev-select {
    background-position: left 16px center;
}

/* ── Language switch ────────────────────────────────────────────────────── */

.ev-lang[b-z9szty1gv0] {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin-block-end: 16px;
}

.ev-lang-btn[b-z9szty1gv0] {
    /* 44px minimum touch target even though the label is small. */
    min-block-size: 44px;
    padding-inline: 16px;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;

    color: rgba(255, 255, 255, 0.75);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ev-lang-btn:hover[b-z9szty1gv0] {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.ev-lang-btn.is-active[b-z9szty1gv0] {
    background: #fff;
    color: var(--ev-navy-900);
    border-color: #fff;
}

.ev-lang-btn:focus-visible[b-z9szty1gv0] {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ── Arabic typography ──────────────────────────────────────────────────── */

/*
   Noto Sans Arabic is the design system's provisional Arabic face, but it is
   NOT currently loaded anywhere in this app — no @font-face, no Google Fonts
   link. It is named first so the rule is correct the day it is added, with a
   real system Arabic stack behind it that renders properly today:
   Segoe UI on Windows, Geeza Pro on macOS/iOS, Noto Naskh on Android/Linux.
   Latin faces stay last so a mixed string (an English venue name inside Arabic
   copy) still renders rather than dropping to a default serif.
*/
.ev-page[dir="rtl"][b-z9szty1gv0] {
    font-family: "Noto Sans Arabic", "Segoe UI", "Geeza Pro", "Noto Naskh Arabic",
                 "Arabic Typesetting", system-ui, -apple-system, Arial, sans-serif;
}

/* Arabic script sits lower and needs more line height than Latin at the same
   size, or descenders collide with the line below. */
.ev-page[dir="rtl"] .ev-title[b-z9szty1gv0],
.ev-page[dir="rtl"] .ev-state-title[b-z9szty1gv0],
.ev-page[dir="rtl"] .ev-card-title[b-z9szty1gv0] {
    line-height: 1.45;
}

.ev-page[dir="rtl"] .ev-subtitle[b-z9szty1gv0],
.ev-page[dir="rtl"] .ev-card-sub[b-z9szty1gv0],
.ev-page[dir="rtl"] .ev-state-text[b-z9szty1gv0],
.ev-page[dir="rtl"] .ev-help[b-z9szty1gv0] {
    line-height: 1.75;
}

/* The reference code is an identifier, not prose — it must not mirror. */
.ev-reference-code[b-z9szty1gv0] {
    unicode-bidi: isolate;
}

/* Retry button inside a terminal state — narrower than the form's submit. */
.ev-submit-inline[b-z9szty1gv0] {
    width: auto;
    margin-top: 22px;
    padding-inline: 32px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Field polish
   ──────────────────────────────────────────────────────────────────────────────
   NOTE ON ::deep — the inputs are built with RenderTreeBuilder in the
   code-behind, and Blazor CSS isolation only stamps its scope attribute onto
   elements written in .razor markup. Without ::deep (anchored on .ev-field,
   which IS in the markup) none of these rules reach the controls, which is
   exactly why the first version rendered with default browser styling.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Every control fills the card width — a form of inputs at assorted widths
   reads as broken, not as designed. */
.ev-field[b-z9szty1gv0]  input,
.ev-field[b-z9szty1gv0]  select,
.ev-field[b-z9szty1gv0]  textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

/* Number inputs: hide the spinners. They invite click-to-increment on a field
   where typing is faster, and they shrink the usable text area. */
.ev-field[b-z9szty1gv0]  input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.ev-field[b-z9szty1gv0]  input[type="number"]::-webkit-outer-spin-button,
.ev-field[b-z9szty1gv0]  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Date inputs render a native picker button that inherits the wrong colour
   in some browsers. */
.ev-field[b-z9szty1gv0]  input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
}

.ev-field[b-z9szty1gv0]  input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* A disabled control must look inert, not just refuse input. */
.ev-field[b-z9szty1gv0]  input:disabled,
.ev-field[b-z9szty1gv0]  select:disabled,
.ev-field[b-z9szty1gv0]  textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Consent and single checkboxes get a slightly stronger resting state than the
   multi-choice rows — they are a decision, not a list item. */
.ev-field[b-z9szty1gv0]  .ev-choice-single {
    background: var(--ev-surface);
    border-color: var(--ev-line);
}

.ev-field[b-z9szty1gv0]  .ev-choice-single:hover {
    border-color: var(--ev-indigo);
}

/* Selected choice rows read as chosen without relying on the control alone. */
.ev-field[b-z9szty1gv0]  .ev-choice:has(input:checked) {
    background: #eef0fe;
    border-color: var(--ev-indigo);
}

/* Keyboard focus must be visible on the row, not only on the small control. */
.ev-field[b-z9szty1gv0]  .ev-choice:has(input:focus-visible) {
    outline: 2px solid var(--ev-indigo);
    outline-offset: 2px;
}

/* ── Submit ─────────────────────────────────────────────────────────────── */

.ev-submit-icon[b-z9szty1gv0] {
    font-size: 1.15rem;
    line-height: 1;
}

/* ── Field rhythm ───────────────────────────────────────────────────────── */

/* A little more air between fields than between a label and its own control,
   so the eye groups each label+input as one unit. */
.ev-field + .ev-field[b-z9szty1gv0] {
    margin-top: 22px;
}

.ev-field:last-of-type[b-z9szty1gv0] {
    margin-bottom: 26px;
}
/* /Components/Pages/MainLayout/Notifications/Notifications.razor.rz.scp.css */
/* ========================================
   FLUENT FEED NOTIFICATIONS STYLES
   ======================================== */

/* Inline status surfaces — replaces toast-based UX. */
.notif-heartbeat[b-ka9oz1fjjj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--fluent-text-secondary, #666);
    margin-left: 12px;
    opacity: 0.85;
}
.notif-heartbeat-icon[b-ka9oz1fjjj] {
    font-size: 14px !important;
}
.notif-heartbeat-pulse .notif-heartbeat-icon[b-ka9oz1fjjj] {
    animation: notif-heartbeat-spin-b-ka9oz1fjjj 1.2s linear infinite;
    color: var(--fluent-primary, #1e3c72);
}
@keyframes notif-heartbeat-spin-b-ka9oz1fjjj {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.notif-inline-banner[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 10px 16px 0;
    border-radius: 6px;
    font-size: 13.5px;
    border: 1px solid transparent;
    animation: notif-banner-in-b-ka9oz1fjjj 0.18s ease-out;
}
@keyframes notif-banner-in-b-ka9oz1fjjj {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.notif-inline-banner .material-icons[b-ka9oz1fjjj] { font-size: 18px; }
.notif-inline-banner-error[b-ka9oz1fjjj] {
    background: #fff4f4;
    color: #b3261e;
    border-color: #f5c2c0;
}
.notif-inline-banner-success[b-ka9oz1fjjj] {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}
.notif-inline-banner-info[b-ka9oz1fjjj] {
    background: #f0f7ff;
    color: #1e40af;
    border-color: #c7dbff;
}
.notif-banner-dismiss[b-ka9oz1fjjj] {
    margin-left: auto;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    display: inline-flex;
    padding: 2px;
    border-radius: 4px;
}
.notif-banner-dismiss:hover[b-ka9oz1fjjj] { opacity: 1; background: rgba(0,0,0,0.06); }
.notif-banner-dismiss .material-icons[b-ka9oz1fjjj] { font-size: 16px; }

/* Local scoped variables — moved from :root to component scope */
.fluent-notifications-hub[b-ka9oz1fjjj] {
    --fluent-primary: #1e3c72;
    --fluent-bg-body: #f8f8f8;
    --fluent-bg-white: #ffffff;
    --fluent-border: #e0e0e0;
    --fluent-text-primary: #242424;
    --fluent-text-secondary: #666666;
    --fluent-hover-bg: #f3f2f1;
    --fluent-unread-bg: #eff6fc;
}

.fluent-notifications-hub[b-ka9oz1fjjj] {
    font-family: 'Segoe UI', sans-serif;
    background: var(--fluent-bg-body);
    height: 100%;
    min-height: calc(100vh - 60px);
    /* Adjust for main layout header */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.fluent-header[b-ka9oz1fjjj] {
    background: var(--fluent-bg-white);
    padding: 16px 32px;
    border-bottom: 1px solid var(--fluent-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.header-title[b-ka9oz1fjjj] {
    font-size: 20px;
    font-weight: 600;
    color: var(--fluent-text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-actions[b-ka9oz1fjjj] {
    display: flex;
    gap: 12px;
}

.search-box[b-ka9oz1fjjj] {
    background: #f3f3f3;
    border-radius: 4px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    width: 300px;
    border: 1px solid transparent;
}

    .search-box:focus-within[b-ka9oz1fjjj] {
        background: white;
        border-color: var(--fluent-primary);
    }

    .search-box input[b-ka9oz1fjjj] {
        border: none;
        background: transparent;
        width: 100%;
        outline: none;
        font-size: 14px;
        color: var(--fluent-text-primary);
    }

.action-btn[b-ka9oz1fjjj] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--fluent-text-secondary);
    padding: 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .action-btn:hover[b-ka9oz1fjjj] {
        background: var(--fluent-hover-bg);
        color: var(--fluent-text-primary);
    }

/* Main Layout */
.content-container[b-ka9oz1fjjj] {
    display: flex;
    flex: 1;
    overflow: hidden;
    width: 98%;
    /* Almost full width as requested */
    margin: 16px auto;
    background: var(--fluent-bg-white);
    border: 1px solid var(--fluent-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Tabs Sidebar */
.tabs-sidebar[b-ka9oz1fjjj] {
    width: 260px;
    background: #faf9f8;
    border-right: 1px solid var(--fluent-border);
    padding: 20px 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.tab-item[b-ka9oz1fjjj] {
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 14px;
    color: var(--fluent-text-secondary);
    border-left: 3px solid transparent;
    transition: all 0.1s;
}

    .tab-item:hover[b-ka9oz1fjjj] {
        background: #f0f0f0;
    }

    .tab-item.active[b-ka9oz1fjjj] {
        background: #fff;
        font-weight: 600;
        color: var(--fluent-text-primary);
        border-left-color: var(--fluent-primary);
    }

.counter[b-ka9oz1fjjj] {
    background: #e1dfdd;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    min-width: 20px;
    text-align: center;
}

/* Feed */
.feed-content[b-ka9oz1fjjj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.feed-list[b-ka9oz1fjjj] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* ========================================
   MODERN CARD GRID LAYOUT
   ======================================== */

.grid-container[b-ka9oz1fjjj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    width: 100%;
}

.card[b-ka9oz1fjjj] {
    background: var(--fluent-bg-white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 24px;
    transition: transform 0.2s, box-shadow 0.2s;
    border-top: 4px solid transparent;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

    .card:hover[b-ka9oz1fjjj] {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    .card.unread[b-ka9oz1fjjj] {
        background: var(--fluent-unread-bg);
    }

    .card.type-messages[b-ka9oz1fjjj] {
        border-top-color: #0078d4;
    }

    .card.type-approvals[b-ka9oz1fjjj] {
        border-top-color: #107c10;
    }

    .card.type-system[b-ka9oz1fjjj] {
        border-top-color: #8764b8;
    }

.card-header[b-ka9oz1fjjj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.status-badge[b-ka9oz1fjjj] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.status-open[b-ka9oz1fjjj] {
    background: #e3f2fd;
    color: #1565c0;
}

.status-resolved[b-ka9oz1fjjj] {
    background: #e8f5e9;
    color: #2e7d32;
}

.time-text[b-ka9oz1fjjj] {
    font-size: 12px;
    color: #999;
}

.card-title[b-ka9oz1fjjj] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--fluent-primary);
}

.ticket-number[b-ka9oz1fjjj] {
    font-family: monospace;
    background: #f5f5f5;
    padding: 2px 6px;
    border-radius: 4px;
    color: #555;
    font-size: 13px;
    display: inline-block;
    margin-top: 4px;
}

.card-body[b-ka9oz1fjjj] {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 20px;
    flex: 1;
}

.card-footer[b-ka9oz1fjjj] {
    border-top: 1px solid #f0f0f0;
    padding-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sender-avatar[b-ka9oz1fjjj] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fluent-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.sender-details[b-ka9oz1fjjj] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sender-name[b-ka9oz1fjjj] {
    font-size: 13px;
    font-weight: 600;
    color: var(--fluent-text-primary);
}

.sender-role[b-ka9oz1fjjj] {
    font-size: 11px;
    color: #888;
}

.action-btn-card[b-ka9oz1fjjj] {
    margin-left: auto;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    color: #555;
    transition: all 0.2s;
}

    .action-btn-card:hover[b-ka9oz1fjjj] {
        background: var(--fluent-primary);
        color: white;
        border-color: var(--fluent-primary);
    }

.notification-item[b-ka9oz1fjjj] {
    padding: 16px 24px;
    border-bottom: 1px solid var(--fluent-border);
    display: flex;
    gap: 16px;
    cursor: pointer;
    transition: background 0.1s;
    background: white;
}

    .notification-item:hover[b-ka9oz1fjjj] {
        background: var(--fluent-hover-bg);
    }

    .notification-item.unread[b-ka9oz1fjjj] {
        background: var(--fluent-unread-bg);
    }

        .notification-item.unread:hover[b-ka9oz1fjjj] {
            background: #e5eff8;
        }

.avatar-circle[b-ka9oz1fjjj] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
    font-size: 16px;
}

.avatar-high[b-ka9oz1fjjj] {
    background: #fde7e9;
    color: #a80000;
}

.avatar-normal[b-ka9oz1fjjj] {
    background: #e1dfdd;
    color: #605e5c;
}

.avatar-icon[b-ka9oz1fjjj] {
    font-family: 'Material Icons';
    font-size: 20px;
}

.content-col[b-ka9oz1fjjj] {
    flex: 1;
    min-width: 0;
}

.item-header[b-ka9oz1fjjj] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    align-items: baseline;
}

.item-title[b-ka9oz1fjjj] {
    font-weight: 600;
    font-size: 14px;
    color: var(--fluent-text-primary);
}

.item-time[b-ka9oz1fjjj] {
    font-size: 12px;
    color: var(--fluent-text-secondary);
}

.item-preview[b-ka9oz1fjjj] {
    color: var(--fluent-text-secondary);
    font-size: 13px;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-footer[b-ka9oz1fjjj] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.badge[b-ka9oz1fjjj] {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    background: #f3f3f3;
    color: #666;
    border: 1px solid #edebe9;
}

.item-actions[b-ka9oz1fjjj] {
    opacity: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.notification-item:hover .item-actions[b-ka9oz1fjjj] {
    opacity: 1;
}

/* Pagination Footer */
.feed-pagination[b-ka9oz1fjjj] {
    padding: 12px 24px;
    border-top: 1px solid var(--fluent-border);
    background: #faf9f8;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pagination-controls[b-ka9oz1fjjj] {
    display: flex;
    gap: 8px;
}

.page-btn[b-ka9oz1fjjj] {
    border: 1px solid var(--fluent-border);
    background: white;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

    .page-btn:hover:not(:disabled)[b-ka9oz1fjjj] {
        background: #f3f2f1;
    }

    .page-btn:disabled[b-ka9oz1fjjj] {
        opacity: 0.5;
        cursor: default;
    }

    .page-btn.active[b-ka9oz1fjjj] {
        background: var(--fluent-primary);
        color: white;
        border-color: var(--fluent-primary);
    }

/* Empty State */
.empty-view[b-ka9oz1fjjj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--fluent-text-secondary);
    height: 100%;
}

.empty-icon[b-ka9oz1fjjj] {
    font-size: 48px;
    margin-bottom: 16px;
    color: #d1d1d1;
}

/* Filter Panel (Simplified) */
.filter-panel[b-ka9oz1fjjj] {
    background: #f8f8f8;
    padding: 16px 24px;
    border-bottom: 1px solid var(--fluent-border);
    display: flex;
    gap: 16px;
    align-items: center;
    animation: slideDown-b-ka9oz1fjjj 0.2s ease-out;
}

.filter-group[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-select[b-ka9oz1fjjj] {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
}

@keyframes slideDown-b-ka9oz1fjjj {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.BEC-pagination-button[b-ka9oz1fjjj] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--BEC-durationFaster) var(--BEC-curveEasyEase);
}

    .BEC-pagination-button:hover:not(.disabled)[b-ka9oz1fjjj] {
        background: var(--BEC-colorNeutralBackground3);
        border-color: var(--BEC-colorNeutralStroke2);
        transform: translateY(-1px);
    }

    .BEC-pagination-button.disabled[b-ka9oz1fjjj] {
        background: var(--BEC-colorNeutralBackground3);
        color: var(--BEC-colorNeutralForeground3);
        cursor: not-allowed;
        opacity: 0.5;
    }

.BEC-pagination-pages[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXXS);
    margin: 0 var(--BEC-spacingHorizontalS);
}

.BEC-pagination-page[b-ka9oz1fjjj] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--BEC-durationFaster) var(--BEC-curveEasyEase);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
}

    .BEC-pagination-page:hover[b-ka9oz1fjjj] {
        background: var(--BEC-colorNeutralBackground3);
        border-color: var(--BEC-colorNeutralStroke2);
        transform: translateY(-1px);
    }

    .BEC-pagination-page.active[b-ka9oz1fjjj] {
        background: var(--BEC-colorBrandBackground);
        color: var(--BEC-colorNeutralForegroundOnBrand);
        border-color: var(--BEC-colorBrandBackground);
        box-shadow: var(--BEC-shadow2);
    }

.BEC-pagination-size[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalXS);
}

.BEC-pagination-size-label[b-ka9oz1fjjj] {
    font-size: var(--BEC-fontSizeBase300);
    color: var(--BEC-colorNeutralForeground2);
    white-space: nowrap;
}

.BEC-pagination-size-select[b-ka9oz1fjjj] {
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground1);
    font-size: var(--BEC-fontSizeBase300);
    cursor: pointer;
    transition: all var(--BEC-durationFaster) var(--BEC-curveEasyEase);
    min-width: 60px;
}

    .BEC-pagination-size-select:focus[b-ka9oz1fjjj] {
        outline: none;
        border-color: var(--BEC-colorBrandBackground);
        box-shadow: 0 0 0 2px var(--BEC-colorBrandBackground2);
    }

/* ========================================
   NOTIFICATION DETAILS MODAL
   ======================================== */

.mobile-details-modal[b-ka9oz1fjjj] {
    max-width: 600px;
}

.mobile-modal-header[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fluent-border);
}

.mobile-modal-nav[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.back-button[b-ka9oz1fjjj] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fluent-text-secondary);
}

    .back-button:hover[b-ka9oz1fjjj] {
        background: var(--fluent-hover-bg);
    }

.mobile-modal-title[b-ka9oz1fjjj] {
    font-size: 18px;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0;
}

.mobile-modal-content[b-ka9oz1fjjj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0;
}

.mobile-summary-card[b-ka9oz1fjjj],
.mobile-message-card[b-ka9oz1fjjj],
.mobile-sender-card[b-ka9oz1fjjj] {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 16px;
}

.summary-icon[b-ka9oz1fjjj] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--fluent-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.summary-content[b-ka9oz1fjjj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summary-title[b-ka9oz1fjjj] {
    font-size: 16px;
    font-weight: 600;
    color: var(--fluent-text-primary);
}

.summary-time[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--fluent-text-secondary);
}

    .summary-time .material-icons[b-ka9oz1fjjj] {
        font-size: 16px;
    }

.message-header[b-ka9oz1fjjj],
.sender-header[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--fluent-text-secondary);
}

    .message-header .material-icons[b-ka9oz1fjjj],
    .sender-header .material-icons[b-ka9oz1fjjj] {
        font-size: 20px;
    }

.message-title[b-ka9oz1fjjj],
.sender-title[b-ka9oz1fjjj] {
    font-size: 14px;
    font-weight: 600;
}

.message-content[b-ka9oz1fjjj] {
    font-size: 14px;
    color: var(--fluent-text-primary);
    line-height: 1.5;
}

.sender-content[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar-text[b-ka9oz1fjjj] {
    font-size: 14px;
}

.sender-info[b-ka9oz1fjjj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sender-email[b-ka9oz1fjjj] {
    font-size: 12px;
    color: var(--fluent-text-secondary);
}

/* ========================================
   NOTIFICATION ACTIONS MENU
   ======================================== */

.notification-menu-modal[b-ka9oz1fjjj] {
    max-width: 250px;
}

.notification-menu[b-ka9oz1fjjj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-item[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    color: var(--fluent-text-primary);
    font-size: 14px;
}

    .menu-item:hover[b-ka9oz1fjjj] {
        background: var(--fluent-hover-bg);
    }

    .menu-item .material-icons[b-ka9oz1fjjj] {
        font-size: 18px;
    }

    .menu-item.delete-item[b-ka9oz1fjjj] {
        color: #d13438;
    }

        .menu-item.delete-item:hover[b-ka9oz1fjjj] {
            background: #fef0f1;
        }

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 1024px) {
    .grid-container[b-ka9oz1fjjj] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .fluent-header[b-ka9oz1fjjj] {
        padding: 12px 16px;
        flex-direction: column;
        gap: 12px;
    }

    .header-actions[b-ka9oz1fjjj] {
        width: 100%;
        flex-direction: column;
    }

    .search-box[b-ka9oz1fjjj] {
        width: 100%;
    }

    .content-container[b-ka9oz1fjjj] {
        flex-direction: column;
        width: 100%;
        margin: 8px auto;
    }

    .tabs-sidebar[b-ka9oz1fjjj] {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--fluent-border);
        padding: 12px 0;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
    }

    .tab-item[b-ka9oz1fjjj] {
        flex-shrink: 0;
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 8px 16px;
    }

        .tab-item.active[b-ka9oz1fjjj] {
            border-left: none;
            border-bottom-color: var(--fluent-primary);
        }

    .feed-list[b-ka9oz1fjjj] {
        padding: 16px;
    }

    .grid-container[b-ka9oz1fjjj] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .card[b-ka9oz1fjjj] {
        padding: 20px;
    }

    .feed-pagination[b-ka9oz1fjjj] {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .pagination-controls[b-ka9oz1fjjj] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .fluent-header[b-ka9oz1fjjj] {
        padding: 8px 12px;
    }

    .header-title[b-ka9oz1fjjj] {
        font-size: 18px;
    }

    .feed-list[b-ka9oz1fjjj] {
        padding: 12px;
    }

    .grid-container[b-ka9oz1fjjj] {
        gap: 12px;
    }

    .card[b-ka9oz1fjjj] {
        padding: 16px;
    }

    .card-header[b-ka9oz1fjjj] {
        margin-bottom: 12px;
    }

    .card-title[b-ka9oz1fjjj] {
        font-size: 15px;
    }

    .card-body[b-ka9oz1fjjj] {
        font-size: 13px;
        margin-bottom: 16px;
    }

    .pagination-controls[b-ka9oz1fjjj] {
        gap: 4px;
    }

    .page-btn[b-ka9oz1fjjj] {
        padding: 4px 8px;
        font-size: 12px;
    }
}

/* ================= MIGRATED INLINE STYLES ================= */

.notif-icon-primary[b-ka9oz1fjjj] {
    color: #0078d4;
}

.notif-search-icon[b-ka9oz1fjjj] {
    font-size: 18px;
    color: #666;
    margin-right: 8px;
}

.notif-counter-active[b-ka9oz1fjjj] {
    background: #0078d4;
    color: white;
}

.notif-category-text[b-ka9oz1fjjj] {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
    display: block;
}

.notif-pagination-info[b-ka9oz1fjjj] {
    font-size: 13px;
    color: #666;
}

/* ── Tab icons ─────────────────────────────────────────────────────────── */
.tab-label[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: 7px;
}
.tab-icon[b-ka9oz1fjjj] {
    font-size: 18px !important;
    opacity: 0.7;
}
.tab-item.active .tab-icon[b-ka9oz1fjjj] {
    opacity: 1;
    color: var(--fluent-primary);
}

/* ── Type chip (replaces plain status-badge in cards) ───────────────────── */
.notif-type-chip[b-ka9oz1fjjj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.notif-type-chip-icon[b-ka9oz1fjjj] {
    font-size: 13px !important;
}
.notif-type-chip--messages[b-ka9oz1fjjj]   { background: #e3f2fd; color: #0078d4; }
.notif-type-chip--approvals[b-ka9oz1fjjj]  { background: #e8f5e9; color: #107c10; }
.notif-type-chip--highlights[b-ka9oz1fjjj] { background: #fef3cd; color: #b45309; }
.notif-type-chip--system[b-ka9oz1fjjj]     { background: #ede7f6; color: #5c35a5; }
.notif-type-chip--general[b-ka9oz1fjjj],
.notif-type-chip--[b-ka9oz1fjjj]            { background: #f3f2f1; color: #555; }

/* ── Unread dot in card title ──────────────────────────────────────────── */
.notif-unread-dot[b-ka9oz1fjjj] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0078d4;
    margin-right: 6px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* ── Highlights card accent ─────────────────────────────────────────────── */
.card.type-highlights[b-ka9oz1fjjj] {
    border-top-color: #f59e0b;
}

/* ── Action link in detail modal ────────────────────────────────────────── */
.notif-action-link[b-ka9oz1fjjj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    color: #92400e;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s;
}
.notif-action-link:hover[b-ka9oz1fjjj] {
    background: #fef3c7;
    box-shadow: 0 2px 8px rgba(245,158,11,0.15);
    text-decoration: none;
}
.notif-action-link .material-icons:first-child[b-ka9oz1fjjj] {
    font-size: 20px;
    color: #f59e0b;
}
/* /Components/Pages/MainLayout/Payslip/Master/Master.razor.rz.scp.css */
/* ========================================
   PAYSLIP PAGE - COMPACT STYLE
   Following UserCompanyAdministration pattern
   ======================================== */

/* ========================================
   PAGE LAYOUT
   ======================================== */
.erp-page-container[b-jf3evhwutg] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

.erp-page-content[b-jf3evhwutg] {
    flex: 1;
    padding: 10px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.salary-toggle-btn .e-tbar-btn[b-jf3evhwutg] {
/*    background-color: #0ea5e9 !important;*/
    color: var(--BEC-themePrimary) !important;
}

/* ========================================
   PAGE HEADER - COMPACT
   ======================================== */
.erp-page-header[b-jf3evhwutg] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-jf3evhwutg] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-jf3evhwutg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-jf3evhwutg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.page-subtitle[b-jf3evhwutg] {
    display: none;
}

.header-right[b-jf3evhwutg] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - COMPACT
   ======================================== */
.stats-container[b-jf3evhwutg] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-jf3evhwutg] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-jf3evhwutg] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-jf3evhwutg] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-jf3evhwutg] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   TOOLBAR (Syncfusion)
   ======================================== */
[b-jf3evhwutg] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusLarge) !important;
    box-shadow: none !important;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalXL) !important;
    min-height: 36px !important;
    margin: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalL) !important;
}

[b-jf3evhwutg] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

[b-jf3evhwutg] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalS) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: var(--BEC-fontSizeBase200) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: var(--BEC-spacingHorizontalXS) !important;
    min-height: 26px !important;
    box-shadow: none !important;
}

[b-jf3evhwutg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 13px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
}

[b-jf3evhwutg] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
}

[b-jf3evhwutg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-jf3evhwutg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-jf3evhwutg] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-jf3evhwutg] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) {
    opacity: 0.7 !important;
    transition: opacity 0.1s ease !important;
}

[b-jf3evhwutg] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-icons,
[b-jf3evhwutg] .e-toolbar .e-toolbar-item .e-tbar-btn:active:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackgroundPressed) !important;
}

[b-jf3evhwutg] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: var(--BEC-spacingHorizontalL) !important;
    margin: 0 var(--BEC-spacingHorizontalXS) !important;
    border-radius: 0.5px !important;
    opacity: 0.6 !important;
}

/* ========================================
   GRID STYLING
   ======================================== */
[b-jf3evhwutg] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

[b-jf3evhwutg] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-jf3evhwutg] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* Grid Row Height - Compact */
[b-jf3evhwutg] .e-grid .e-row {
    height: 32px !important;
}

[b-jf3evhwutg] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - Compact */
[b-jf3evhwutg] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-jf3evhwutg] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* ========================================
   NET SALARY HIGHLIGHT
   ======================================== */
.net-salary-highlight[b-jf3evhwutg] {
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   VIEW DETAILS BUTTON
   ======================================== */
.view-details-btn[b-jf3evhwutg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--BEC-colorBrandBackground);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-details-btn:hover:not(:disabled)[b-jf3evhwutg] {
    background: var(--BEC-colorBrandBackgroundHover);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 120, 212, 0.2);
}

.view-details-btn:disabled[b-jf3evhwutg] {
    opacity: 0.6;
    cursor: not-allowed;
}

.view-details-btn i[b-jf3evhwutg] {
    font-size: 11px;
}

.btn-spinner[b-jf3evhwutg] {
    width: 12px;
    height: 12px;
    border: 2px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-jf3evhwutg 0.6s linear infinite;
}

@keyframes spin-b-jf3evhwutg {
    to { transform: rotate(360deg); }
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
.loading-overlay[b-jf3evhwutg] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    gap: 12px;
}

.loading-spinner[b-jf3evhwutg] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-jf3evhwutg 0.8s linear infinite;
}

.loading-text[b-jf3evhwutg] {
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.loading-subtext[b-jf3evhwutg] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* ========================================
   ERROR CONTAINER
   ======================================== */
.error-container[b-jf3evhwutg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    gap: 16px;
    color: var(--BEC-colorStatusDangerForeground1);
}

.error-container i[b-jf3evhwutg] {
    font-size: 64px;
    opacity: 0.6;
}

.error-container p[b-jf3evhwutg] {
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground2);
    max-width: 500px;
}

.retry-button[b-jf3evhwutg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--BEC-colorBrandBackground);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.retry-button:hover[b-jf3evhwutg] {
    background: var(--BEC-colorBrandBackgroundHover);
}

/* ========================================
   EMPTY STATE
   ======================================== */
.empty-state[b-jf3evhwutg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    gap: 16px;
}

.empty-state i[b-jf3evhwutg] {
    font-size: 72px;
    color: var(--BEC-colorNeutralStroke2);
}

.empty-state h2[b-jf3evhwutg] {
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.empty-state p[b-jf3evhwutg] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 8px 0;
}

.primary-button[b-jf3evhwutg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--BEC-colorBrandBackground);
    color: white;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.primary-button:hover[b-jf3evhwutg] {
    background: var(--BEC-colorBrandBackgroundHover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 120, 212, 0.2);
}

/* ========================================
   DATE RANGE DIALOG
   ======================================== */
.dialog-header[b-jf3evhwutg] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.dialog-header i[b-jf3evhwutg] {
    color: var(--BEC-colorBrandForeground1);
}

.date-range-content[b-jf3evhwutg] {
    padding: 10px 0;
}

.dialog-description[b-jf3evhwutg] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0 0 20px 0;
}

.date-input-group[b-jf3evhwutg] {
    margin-bottom: 20px;
}

.date-label[b-jf3evhwutg] {
    display: block;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
}

.validation-error[b-jf3evhwutg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--BEC-colorStatusDangerBackground1);
    border-left: 3px solid var(--BEC-colorStatusDangerForeground1);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-top: 12px;
}

.validation-error i[b-jf3evhwutg] {
    color: var(--BEC-colorStatusDangerForeground1);
    font-size: 16px;
}

.validation-error span[b-jf3evhwutg] {
    color: var(--BEC-colorStatusDangerForeground1);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
}

.quick-select[b-jf3evhwutg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    flex-wrap: wrap;
}

.quick-select-label[b-jf3evhwutg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.quick-btn[b-jf3evhwutg] {
    padding: 6px 14px;
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-btn:hover[b-jf3evhwutg] {
    background: var(--BEC-colorBrandBackground);
    color: white;
    border-color: var(--BEC-colorBrandBackground);
}

.dialog-footer[b-jf3evhwutg] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.dialog-btn[b-jf3evhwutg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-btn[b-jf3evhwutg] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground2);
}

.cancel-btn:hover:not(:disabled)[b-jf3evhwutg] {
    background: var(--BEC-colorNeutralBackground2Hover);
}

.apply-btn[b-jf3evhwutg] {
    background: var(--BEC-colorBrandBackground);
    color: white;
}

.apply-btn:hover:not(:disabled)[b-jf3evhwutg] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.apply-btn:disabled[b-jf3evhwutg] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   SIDEBAR
   ======================================== */
[b-jf3evhwutg] .e-sidebar {
    background: white;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

.sidebar-content[b-jf3evhwutg] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

.sidebar-header[b-jf3evhwutg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-header h2[b-jf3evhwutg] {
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.sidebar-period[b-jf3evhwutg] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

.close-sidebar-btn[b-jf3evhwutg] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--BEC-colorNeutralForeground3);
}

.close-sidebar-btn:hover[b-jf3evhwutg] {
    background: var(--BEC-colorNeutralBackground2);
}

.close-sidebar-btn i[b-jf3evhwutg] {
    font-size: 18px;
}

.sidebar-body[b-jf3evhwutg] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.details-section[b-jf3evhwutg] {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.details-section:last-child[b-jf3evhwutg] {
    border-bottom: none;
}

.section-title[b-jf3evhwutg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.section-title i[b-jf3evhwutg] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 18px;
}

.details-grid[b-jf3evhwutg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.detail-item[b-jf3evhwutg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label[b-jf3evhwutg] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.detail-value[b-jf3evhwutg] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

.earnings-list[b-jf3evhwutg], .deductions-list[b-jf3evhwutg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.earning-item[b-jf3evhwutg], .deduction-item[b-jf3evhwutg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.earning-label[b-jf3evhwutg], .deduction-label[b-jf3evhwutg] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
}

.earning-value[b-jf3evhwutg] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

.deduction-value[b-jf3evhwutg] {
    font-size: 13px;
    color: var(--BEC-colorStatusDangerForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

.earning-item.total[b-jf3evhwutg] {
    background: var(--BEC-colorBrandBackground1);
    border: 1px solid var(--BEC-colorBrandForeground1);
}

.earning-item.total .earning-label[b-jf3evhwutg],
.earning-item.total .earning-value[b-jf3evhwutg] {
    color: var(--BEC-colorBrandForeground1);
}

.no-deductions[b-jf3evhwutg] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
    padding: 12px;
    text-align: center;
}

.net-salary-section[b-jf3evhwutg] {
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(135deg, var(--BEC-colorBrandBackground1) 0%, var(--BEC-colorBrandBackground2) 100%);
    border-radius: var(--BEC-borderRadiusLarge);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.15);
}

.net-salary-box[b-jf3evhwutg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.net-salary-label[b-jf3evhwutg] {
    font-size: 14px;
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.net-salary-amount[b-jf3evhwutg] {
    font-size: 28px;
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightBold);
}

.sidebar-loading-overlay[b-jf3evhwutg] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.sidebar-loading-content[b-jf3evhwutg] {
    background: white;
    padding: 32px 48px;
    border-radius: var(--BEC-borderRadiusLarge);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
/* /Components/Pages/MainLayout/PayslipDocs.razor.rz.scp.css */
/* PayslipDocs - Compact Full-Width Layout */

/* Base Container */
.docs-container[b-zyv9i4oy1c] {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--text-primary, #2D3748);
}

/* Documentation Section Styling */
.docs-section[b-zyv9i4oy1c] {
    display: none;
    animation: fade-in-b-zyv9i4oy1c 0.2s ease;
    width: 100%;
}

.docs-section.active[b-zyv9i4oy1c] {
    display: block;
}

@keyframes fade-in-b-zyv9i4oy1c {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.docs-section-header[b-zyv9i4oy1c] {
    background: linear-gradient(90deg, var(--accent-primary, #2B3484) 0%, var(--accent-secondary, #5A67D8) 100%);
    padding: 0.75rem 1.25rem;
    color: white;
    width: 100%;
}

.docs-section-header h2[b-zyv9i4oy1c] {
    margin: 0;
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.2;
}

.docs-section-content[b-zyv9i4oy1c] {
    padding: 1rem;
}

.docs-section-content p[b-zyv9i4oy1c] {
    line-height: 1.5;
    margin-bottom: 0.5rem;
    color: var(--text-primary, #2D3748);
    font-size: 0.875rem;
}

/* Feature Grid */
.feature-grid[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.feature-card[b-zyv9i4oy1c] {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    padding: 0.75rem;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color, #E2E8F0);
    display: flex;
    flex-direction: column;
}

.feature-card:hover[b-zyv9i4oy1c] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
    border-color: var(--accent-primary, #2B3484);
}

.feature-card[b-zyv9i4oy1c]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-primary, #2B3484) 0%, var(--accent-secondary, #5A67D8) 100%);
    transition: width 0.3s ease;
}

.feature-card:hover[b-zyv9i4oy1c]::after {
    width: 100%;
}

.feature-icon[b-zyv9i4oy1c] {
    width: 28px;
    height: 28px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 0.4rem;
    background-color: rgba(43, 52, 132, 0.05);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-card h3[b-zyv9i4oy1c] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--accent-primary, #2B3484);
}

.feature-card p[b-zyv9i4oy1c] {
    font-size: 0.813rem;
    line-height: 1.4;
    margin: 0;
    color: var(--text-secondary, #4A5568);
}

/* Module Navigation */
.module-navigation[b-zyv9i4oy1c] {
    margin-top: 1.25rem;
    width: 100%;
}

.module-navigation h3[b-zyv9i4oy1c] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--accent-primary, #2B3484);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    padding-bottom: 0.4rem;
}

.module-navigation h3[b-zyv9i4oy1c]::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background-color: var(--accent-primary, #2B3484);
    border-radius: 2px;
}

.module-nav-grid[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.module-nav-item[b-zyv9i4oy1c] {
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    padding: 0.75rem 0.75rem 0.75rem 2.5rem;
    position: relative;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color, #E2E8F0);
}

.module-nav-item:hover[b-zyv9i4oy1c] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
    border-color: var(--accent-primary, #2B3484);
}

.module-nav-item[b-zyv9i4oy1c]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-primary, #2B3484);
    transition: width 0.3s ease;
}

.module-nav-item:hover[b-zyv9i4oy1c]::after {
    width: 100%;
}

.nav-number[b-zyv9i4oy1c] {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--accent-primary, #2B3484);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
}

.nav-content h4[b-zyv9i4oy1c] {
    font-size: 0.938rem;
    font-weight: 600;
    margin: 0 0 0.2rem;
    color: var(--text-primary, #2D3748);
}

.nav-content p[b-zyv9i4oy1c] {
    margin: 0;
    font-size: 0.813rem;
    color: var(--text-secondary, #4A5568);
}

/* Interface Section */
.interface-section[b-zyv9i4oy1c] {
    margin-bottom: 1.25rem;
    width: 100%;
}

.interface-section h3[b-zyv9i4oy1c] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--accent-primary, #2B3484);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    padding-bottom: 0.4rem;
}

.interface-section h3[b-zyv9i4oy1c]::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background-color: var(--accent-primary, #2B3484);
    border-radius: 2px;
}

.navigation-visual[b-zyv9i4oy1c] {
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 0.5rem;
}

.nav-year-tabs[b-zyv9i4oy1c] {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.nav-year[b-zyv9i4oy1c] {
    padding: 0.3rem 0.6rem;
    background-color: white;
    border-radius: 4px;
    font-size: 0.813rem;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.nav-year.active[b-zyv9i4oy1c] {
    background-color: var(--accent-primary, #2B3484);
    color: white;
}

.nav-month-grid[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}

.nav-month[b-zyv9i4oy1c] {
    background-color: white;
    border-radius: 4px;
    padding: 0.4rem;
    text-align: center;
    font-size: 0.813rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.nav-month.active[b-zyv9i4oy1c] {
    background-color: rgba(43, 52, 132, 0.1);
    border: 1px solid var(--accent-primary, #2B3484);
}

.nav-month.empty[b-zyv9i4oy1c] {
    background-color: rgba(160, 174, 192, 0.1);
    color: var(--text-secondary, #A0AEC0);
}

.navigation-features[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.feature-item[b-zyv9i4oy1c] {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 4px;
    padding: 0.6rem;
    gap: 0.5rem;
}

.feature-item p[b-zyv9i4oy1c] {
    margin: 0;
    font-size: 0.813rem;
    color: var(--text-secondary, #4A5568);
}

.info-box[b-zyv9i4oy1c] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    background-color: rgba(49, 130, 206, 0.1);
    padding: 0.6rem;
    border-radius: 4px;
    margin-top: 0.75rem;
}

.info-icon[b-zyv9i4oy1c] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233182CE'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.info-box p[b-zyv9i4oy1c] {
    font-size: 0.813rem;
    margin: 0;
    color: var(--accent-primary, #2B3484);
}

.filter-options[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.filter-option[b-zyv9i4oy1c] {
    display: flex;
    align-items: flex-start;
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    padding: 0.75rem;
    gap: 0.6rem;
}

.filter-icon[b-zyv9i4oy1c] {
    width: 28px;
    height: 28px;
    background-color: white;
    border-radius: 6px;
    flex-shrink: 0;
}

.filter-text h4[b-zyv9i4oy1c] {
    font-size: 0.938rem;
    font-weight: 600;
    margin: 0 0 0.2rem;
    color: var(--text-primary, #2D3748);
}

.filter-text p[b-zyv9i4oy1c] {
    margin: 0;
    font-size: 0.813rem;
    color: var(--text-secondary, #4A5568);
}

/* Payslip Sections */
.payslip-sections-grid[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.section-card[b-zyv9i4oy1c], .print-option-card[b-zyv9i4oy1c], .ai-feature-card[b-zyv9i4oy1c] {
    position: relative;
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    padding: 0.75rem 0.75rem 0.75rem 2.5rem;
    position: relative;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.section-card:hover[b-zyv9i4oy1c], .print-option-card:hover[b-zyv9i4oy1c], .ai-feature-card:hover[b-zyv9i4oy1c] {
    background-color: rgba(43, 52, 132, 0.05);
    border-color: var(--border-color, #E2E8F0);
}

.section-icon[b-zyv9i4oy1c], .print-icon[b-zyv9i4oy1c], .ai-icon[b-zyv9i4oy1c] {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background-color: rgba(43, 52, 132, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-card h4[b-zyv9i4oy1c] {
    font-size: 0.938rem;
    font-weight: 600;
    margin: 0 0 0.3rem;
    color: var(--text-primary, #2D3748);
}

.section-card ul[b-zyv9i4oy1c] {
    margin: 0;
    padding-left: 1rem;
}

.section-card li[b-zyv9i4oy1c] {
    font-size: 0.813rem;
    margin-bottom: 0.2rem;
    color: var(--text-secondary, #4A5568);
}

.section-card li:last-child[b-zyv9i4oy1c] {
    margin-bottom: 0;
}

/* Payslip Visual Enhancement */
.payslip-visual[b-zyv9i4oy1c] {
    margin-top: 1.25rem;
    width: 100%;
}

.payslip-mockup[b-zyv9i4oy1c] {
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    padding: 0.75rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
    border: 1px solid var(--border-color, #E2E8F0);
}

.payslip-header[b-zyv9i4oy1c] {
    background: linear-gradient(90deg, var(--accent-primary, #2B3484) 0%, var(--accent-secondary, #5A67D8) 100%);
    color: white;
    padding: 0.6rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.payslip-header[b-zyv9i4oy1c]::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M14,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8L14,2z M16,18H8v-2h8V18z M16,14H8v-2h8V14z M13,9V3.5 L18.5,9H13z'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.payslip-content[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}

.payslip-column[b-zyv9i4oy1c] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mockup-section[b-zyv9i4oy1c] {
    background-color: white;
    border-radius: 4px;
    height: 70px;
    position: relative;
    padding: 0.5rem;
    border: 1px solid var(--border-color, #E2E8F0);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.02);
}

.mockup-section[b-zyv9i4oy1c]::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 70%;
    height: 12px;
    background-color: rgba(203, 213, 224, 0.4);
    border-radius: 2px;
}

.mockup-section[b-zyv9i4oy1c]::after {
    content: '';
    position: absolute;
    top: 32px;
    left: 10px;
    width: 40%;
    height: 8px;
    background-color: rgba(203, 213, 224, 0.3);
    border-radius: 2px;
}

.mockup-section.emp-info[b-zyv9i4oy1c] {
    background-color: rgba(43, 52, 132, 0.03);
}

.mockup-section.bank-info[b-zyv9i4oy1c] {
    background-color: rgba(49, 130, 206, 0.03);
}

.mockup-section.attendance[b-zyv9i4oy1c] {
    background-color: rgba(72, 187, 120, 0.03);
}

.mockup-section.earnings[b-zyv9i4oy1c] {
    background-color: rgba(56, 178, 172, 0.03);
}

.mockup-section.deductions[b-zyv9i4oy1c] {
    background-color: rgba(237, 100, 166, 0.03);
}

.mockup-section.net-salary[b-zyv9i4oy1c] {
    background-color: rgba(246, 173, 85, 0.03);
}

/* AI Features */
.ai-features-grid[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.ai-feature-card h4[b-zyv9i4oy1c] {
    font-size: 0.938rem;
    font-weight: 600;
    margin: 0 0 0.3rem;
    color: var(--text-primary, #2D3748);
}

.ai-feature-card p[b-zyv9i4oy1c] {
    margin: 0;
    font-size: 0.813rem;
    color: var(--text-secondary, #4A5568);
}

.ai-interaction[b-zyv9i4oy1c] {
    margin-top: 1.25rem;
}

.ai-interaction h3[b-zyv9i4oy1c] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--accent-primary, #2B3484);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    padding-bottom: 0.4rem;
}

.ai-interaction h3[b-zyv9i4oy1c]::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background-color: var(--accent-primary, #2B3484);
    border-radius: 2px;
}

.ai-interaction-visual[b-zyv9i4oy1c] {
    margin-top: 0.75rem;
}

.ai-chat-mockup[b-zyv9i4oy1c] {
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    overflow: hidden;
    max-width: 500px;
}

.ai-chat-header[b-zyv9i4oy1c] {
    background-color: var(--accent-primary, #2B3484);
    color: white;
    padding: 0.6rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.ai-chat-messages[b-zyv9i4oy1c] {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ai-message[b-zyv9i4oy1c], .user-message[b-zyv9i4oy1c] {
    padding: 0.6rem;
    border-radius: 4px;
    font-size: 0.813rem;
    max-width: 80%;
}

.ai-message[b-zyv9i4oy1c] {
    background-color: white;
    align-self: flex-start;
}

.user-message[b-zyv9i4oy1c] {
    background-color: var(--accent-primary, #2B3484);
    color: white;
    align-self: flex-end;
}

/* Printing Options */
.print-options-grid[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.print-option-card h4[b-zyv9i4oy1c] {
    font-size: 0.938rem;
    font-weight: 600;
    margin: 0 0 0.3rem;
    color: var(--text-primary, #2D3748);
}

.print-option-card p[b-zyv9i4oy1c] {
    margin: 0;
    font-size: 0.813rem;
    color: var(--text-secondary, #4A5568);
}

.print-process[b-zyv9i4oy1c] {
    margin-top: 1.25rem;
}

.print-process h3[b-zyv9i4oy1c] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--accent-primary, #2B3484);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    padding-bottom: 0.4rem;
}

.print-process h3[b-zyv9i4oy1c]::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background-color: var(--accent-primary, #2B3484);
    border-radius: 2px;
}

.print-steps[b-zyv9i4oy1c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.print-step[b-zyv9i4oy1c] {
    background-color: var(--bg-tertiary, #F1F5F9);
    border-radius: 6px;
    padding: 0.75rem 0.75rem 0.75rem 2.5rem;
    position: relative;
}

.step-number[b-zyv9i4oy1c] {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--accent-primary, #2B3484);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
}

.print-step p[b-zyv9i4oy1c] {
    margin: 0;
    font-size: 0.813rem;
    color: var(--text-secondary, #4A5568);
}

/* FAQ */
.faq-list[b-zyv9i4oy1c] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

:deep(.fluent-accordion-item)[b-zyv9i4oy1c] {
    margin-bottom: 0.4rem;
    border: none;
    background-color: transparent;
    width: 100%;
}

:deep(.fluent-accordion-item .fluent-accordion-header-content)[b-zyv9i4oy1c] {
    font-size: 0.938rem;
    font-weight: 500;
    color: var(--text-primary, #2D3748);
}

:deep(.fluent-accordion-item .fluent-accordion-header)[b-zyv9i4oy1c] {
    background-color: var(--bg-tertiary, #F1F5F9);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 4px;
    padding: 0.6rem 0.75rem;
    transition: all 0.2s ease;
}

:deep(.fluent-accordion-item .fluent-accordion-header:hover)[b-zyv9i4oy1c] {
    background-color: rgba(43, 52, 132, 0.05);
    border-color: var(--accent-primary, #2B3484);
}

:deep(.fluent-accordion-item[expanded] .fluent-accordion-header)[b-zyv9i4oy1c] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
    background-color: rgba(43, 52, 132, 0.05);
}

:deep(.fluent-accordion-item .fluent-accordion-region)[b-zyv9i4oy1c] {
    background-color: white;
    border: 1px solid var(--border-color, #E2E8F0);
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

:deep(.fluent-accordion-item .fluent-accordion-region-content)[b-zyv9i4oy1c] {
    padding: 0.75rem;
}

:deep(.fluent-accordion-item .fluent-accordion-region-content p)[b-zyv9i4oy1c] {
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    color: var(--text-secondary, #4A5568);
}

:deep(.fluent-accordion-item .fluent-accordion-region-content p:last-child)[b-zyv9i4oy1c] {
    margin-bottom: 0;
}

:deep(.fluent-accordion-item .fluent-accordion-region-content ul)[b-zyv9i4oy1c] {
    padding-left: 1.1rem;
    margin-bottom: 0.5rem;
}

:deep(.fluent-accordion-item .fluent-accordion-region-content li)[b-zyv9i4oy1c] {
    margin-bottom: 0.3rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Tablet Breakpoint */
@media (min-width: 768px) {
    .docs-section-header[b-zyv9i4oy1c] {
        padding: 1rem 1.5rem;
    }
    
    .docs-section-header h2[b-zyv9i4oy1c] {
        font-size: 1.5rem;
    }
    
    .docs-section-content[b-zyv9i4oy1c] {
        padding: 1.25rem 1.5rem;
    }
    
    .feature-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .module-nav-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .navigation-features[b-zyv9i4oy1c] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .filter-options[b-zyv9i4oy1c] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .payslip-sections-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .payslip-content[b-zyv9i4oy1c] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .ai-features-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .print-options-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .print-steps[b-zyv9i4oy1c] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .nav-month-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Desktop Breakpoint */
@media (min-width: 1024px) {
    .docs-section-header[b-zyv9i4oy1c] {
        padding: 1.25rem 2rem;
    }
    
    .docs-section-content[b-zyv9i4oy1c] {
        padding: 1.5rem 2rem;
    }
    
    .feature-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .module-nav-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .navigation-features[b-zyv9i4oy1c] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .ai-features-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .print-options-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .nav-month-grid[b-zyv9i4oy1c] {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Large Desktop Breakpoint */
@media (min-width: 1280px) {
    .docs-section-header[b-zyv9i4oy1c] {
        padding: 1.5rem 2.5rem;
    }
    
    .docs-section-header h2[b-zyv9i4oy1c] {
        font-size: 1.75rem;
    }
    
    .docs-section-content[b-zyv9i4oy1c] {
        padding: 2rem 2.5rem;
    }
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Analytics/Analytics.razor.rz.scp.css */
/* ================================================================
   PE Score Dashboard - Scoped Styles
   Aligned with MainLayout erp-page-container pattern
   ================================================================ */

/* -- Page Container (inherits flex from MainLayout) ---------------- */
.erp-page-container[b-hwjef64zfp] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 24px 32px;
    min-height: 0;
    overflow-y: auto;
}

/* -- Page Header --------------------------------------------------- */
.erp-page-header[b-hwjef64zfp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 4px;
}

.page-title-row[b-hwjef64zfp] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-icon[b-hwjef64zfp] {
    font-size: 22px;
    color: var(--BEC-colorBrandForeground1, #003366);
}

.erp-page-header h4[b-hwjef64zfp] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* -- State containers (loading, error, empty) ---------------------- */
.state-container[b-hwjef64zfp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.state-container i[b-hwjef64zfp] {
    font-size: 32px;
}

.state-error i[b-hwjef64zfp] {
    color: var(--BEC-colorPaletteRedForeground1, #c4314b);
}

.btn-retry[b-hwjef64zfp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorBrandForeground1, #003366);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.15s, border-color 0.15s;
}

.btn-retry:hover[b-hwjef64zfp] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    border-color: var(--BEC-colorBrandStroke1, #003366);
}

/* -- Section Card Wrapper ------------------------------------------ */
.section-card[b-hwjef64zfp] {
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 10px;
    padding: 20px 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* -- Section titles ------------------------------------------------ */
.section-title[b-hwjef64zfp] {
    margin: 0 0 16px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.section-header-row[b-hwjef64zfp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-header-row .section-title[b-hwjef64zfp] {
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Section 1 — Progress Overview
   ═══════════════════════════════════════════════════════════════════ */
.section-progress[b-hwjef64zfp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.progress-cards[b-hwjef64zfp] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.progress-card[b-hwjef64zfp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 20px 16px;
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 10px;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border-top: 3px solid transparent;
    transition: box-shadow 0.2s;
}

.progress-card:hover[b-hwjef64zfp] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-total[b-hwjef64zfp] {
    border-top-color: var(--BEC-colorBrandForeground1, #003366);
}

.card-completed[b-hwjef64zfp] {
    border-top-color: #2E7D32;
}

.card-inprogress[b-hwjef64zfp] {
    border-top-color: var(--BEC-colorPaletteDarkOrangeForeground2, #c67a1a);
}

.card-value[b-hwjef64zfp] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.card-total .card-value[b-hwjef64zfp] {
    color: var(--BEC-colorBrandForeground1, #003366);
}

.card-completed .card-value[b-hwjef64zfp] {
    color: #2E7D32;
}

.card-inprogress .card-value[b-hwjef64zfp] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2, #c67a1a);
}

.card-label[b-hwjef64zfp] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.card-subtext[b-hwjef64zfp] {
    font-size: 0.75rem;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

/* Stage breakdown row */
.stage-breakdown[b-hwjef64zfp] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
}

.stage-item[b-hwjef64zfp] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stage-dot[b-hwjef64zfp] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot-self[b-hwjef64zfp] {
    background: #1565C0;
}

.dot-manager[b-hwjef64zfp] {
    background: #6A1B9A;
}

.dot-approval[b-hwjef64zfp] {
    background: var(--BEC-colorPaletteDarkOrangeForeground2, #c67a1a);
}

.dot-ack[b-hwjef64zfp] {
    background: #00838F;
}

.stage-name[b-hwjef64zfp] {
    font-size: 0.85rem;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.stage-count[b-hwjef64zfp] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* ═══════════════════════════════════════════════════════════════════
   Section 2 — Score Results
   ═══════════════════════════════════════════════════════════════════ */
.section-scores[b-hwjef64zfp] {
    display: flex;
    flex-direction: column;
}

.scores-layout[b-hwjef64zfp] {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 24px;
    align-items: start;
}

.score-chart-container[b-hwjef64zfp] {
    min-height: 300px;
    max-height: 380px;
}

.no-data-text[b-hwjef64zfp] {
    text-align: center;
    color: var(--BEC-colorNeutralForeground3, #707070);
    padding: 48px 0;
}

.score-average-card[b-hwjef64zfp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--BEC-colorBrandBackground1, #003366), #004d99);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 51, 102, 0.2);
}

.avg-label[b-hwjef64zfp] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
}

.avg-score[b-hwjef64zfp] {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.avg-unit[b-hwjef64zfp] {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════
   Section 3 — Top Performers Table
   ═══════════════════════════════════════════════════════════════════ */
.section-top-performers[b-hwjef64zfp] {
    display: flex;
    flex-direction: column;
}

.top-performers-table-wrapper[b-hwjef64zfp] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.top-performers-table[b-hwjef64zfp] {
    width: 100%;
    min-width: 1000px;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.top-performers-table thead th[b-hwjef64zfp] {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--BEC-colorNeutralForeground3, #707070);
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    white-space: nowrap;
}

.top-performers-table tbody td[b-hwjef64zfp] {
    padding: 10px 12px;
    color: var(--BEC-colorNeutralForeground1, #242424);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    white-space: nowrap;
}

.top-performers-table tbody tr.row-alt[b-hwjef64zfp] {
    background: var(--BEC-colorNeutralBackground2, #fafafa);
}

.top-performers-table tbody tr:hover[b-hwjef64zfp] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

.top-performers-table .col-rank[b-hwjef64zfp] {
    width: 48px;
    text-align: center;
}

.top-performers-table .col-name[b-hwjef64zfp] {
    min-width: 160px;
    font-weight: 500;
}

.top-performers-table .col-code[b-hwjef64zfp] {
    min-width: 80px;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.top-performers-table .col-dept[b-hwjef64zfp] {
    min-width: 130px;
}

.top-performers-table .col-score[b-hwjef64zfp] {
    text-align: center;
    font-weight: 600;
    min-width: 90px;
}

.top-performers-table .col-result[b-hwjef64zfp] {
    text-align: center;
    min-width: 130px;
}

.top-performers-table .col-eval[b-hwjef64zfp] {
    min-width: 130px;
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.score-unit[b-hwjef64zfp] {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

/* -- Rank badges --------------------------------------------------- */
.rank-badge[b-hwjef64zfp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 800;
    color: #ffffff;
}

.rank-gold[b-hwjef64zfp] {
    background: linear-gradient(135deg, #F9A825, #F57F17);
    box-shadow: 0 2px 6px rgba(249, 168, 37, 0.35);
}

.rank-silver[b-hwjef64zfp] {
    background: linear-gradient(135deg, #90A4AE, #607D8B);
    box-shadow: 0 2px 6px rgba(96, 125, 139, 0.3);
}

.rank-bronze[b-hwjef64zfp] {
    background: linear-gradient(135deg, #A1887F, #795548);
    box-shadow: 0 2px 6px rgba(121, 85, 72, 0.3);
}

.rank-default[b-hwjef64zfp] {
    background: var(--BEC-colorNeutralBackground5, #e0e0e0);
    color: var(--BEC-colorNeutralForeground2, #424242);
}

/* -- Result badges (shared by Top Performers + Department grid) ---- */
.result-badge[b-hwjef64zfp] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}

.badge-outstanding[b-hwjef64zfp] {
    background: #e8f5e9;
    color: #2E7D32;
}

.badge-exceed[b-hwjef64zfp] {
    background: #e3f2fd;
    color: #1565C0;
}

.badge-meet[b-hwjef64zfp] {
    background: var(--BEC-colorNeutralBackground5, #e0e0e0);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.badge-partial[b-hwjef64zfp] {
    background: #fff3e0;
    color: #e65100;
}

.badge-need[b-hwjef64zfp] {
    background: #ffebee;
    color: #c62828;
}

/* ═══════════════════════════════════════════════════════════════════
   Section 4 — Department Grid
   ═══════════════════════════════════════════════════════════════════ */
.section-department[b-hwjef64zfp] {
    display: flex;
    flex-direction: column;
}

.department-table-wrapper[b-hwjef64zfp] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.btn-export[b-hwjef64zfp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: #2E7D32;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}

.btn-export:hover[b-hwjef64zfp] {
    background: #f0fdf4;
    border-color: #2E7D32;
}

/* ═══════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .erp-page-container[b-hwjef64zfp] {
        padding: 12px 16px 24px;
    }

    .section-card[b-hwjef64zfp] {
        padding: 16px;
    }

    .progress-cards[b-hwjef64zfp] {
        grid-template-columns: 1fr;
    }

    .scores-layout[b-hwjef64zfp] {
        grid-template-columns: 1fr;
    }

    .stage-breakdown[b-hwjef64zfp] {
        flex-direction: column;
        gap: 12px;
    }

    .top-performers-table[b-hwjef64zfp] {
        min-width: 900px;
    }

    .erp-page-header[b-hwjef64zfp] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Analytics/EvaluationAnalytics.razor.rz.scp.css */
/* ================================================================
   Active Evaluations Tracker - Scoped Styles
   ================================================================ */

/* -- Page container ------------------------------------------------ */
.erp-page-container[b-psv76x285b] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px 24px;
    min-height: 0;
    overflow-y: auto;
}

/* -- Page header --------------------------------------------------- */
.erp-page-header[b-psv76x285b] {
    margin-bottom: 4px;
}

.page-title-row[b-psv76x285b] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-icon[b-psv76x285b] {
    font-size: 22px;
    color: var(--BEC-colorBrandForeground1, #003366);
}

.erp-page-header h4[b-psv76x285b] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* -- Loading / Error ----------------------------------------------- */
.loading-container[b-psv76x285b],
.error-container[b-psv76x285b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.error-container i[b-psv76x285b] {
    font-size: 32px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.btn-retry[b-psv76x285b] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorBrandForeground1, #003366);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.15s, border-color 0.15s;
}

.btn-retry:hover[b-psv76x285b] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    border-color: var(--BEC-colorBrandStroke1, #003366);
}

/* -- Summary Cards Row --------------------------------------------- */
.summary-row[b-psv76x285b] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.summary-card[b-psv76x285b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 10px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
    border-top: 3px solid transparent;
    outline: none;
    font-family: inherit;
}

.summary-card:hover[b-psv76x285b] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.summary-card.active[b-psv76x285b] {
    border-color: var(--BEC-colorBrandStroke1, #003366);
    box-shadow: 0 2px 12px rgba(0, 51, 102, 0.15);
}

.summary-count[b-psv76x285b] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.summary-label[b-psv76x285b] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

/* Card colour variants */
.summary-draft[b-psv76x285b] {
    border-top-color: var(--BEC-colorNeutralForeground3, #707070);
}
.summary-draft .summary-count[b-psv76x285b] {
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.summary-inprogress[b-psv76x285b] {
    border-top-color: var(--BEC-colorBrandForeground1, #003366);
}
.summary-inprogress .summary-count[b-psv76x285b] {
    color: var(--BEC-colorBrandForeground1, #003366);
}

.summary-pending[b-psv76x285b] {
    border-top-color: var(--BEC-colorPaletteDarkOrangeForeground2, #c67a1a);
}
.summary-pending .summary-count[b-psv76x285b] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2, #c67a1a);
}

.summary-returned[b-psv76x285b] {
    border-top-color: var(--BEC-colorPaletteRedForeground1, #c4314b);
}
.summary-returned .summary-count[b-psv76x285b] {
    color: var(--BEC-colorPaletteRedForeground1, #c4314b);
}

/* -- Filter Toolbar ------------------------------------------------ */
.filter-toolbar[b-psv76x285b] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 8px;
}

.filter-group[b-psv76x285b] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.filter-label[b-psv76x285b] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3, #707070);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.filter-dropdown[b-psv76x285b] {
    width: 100%;
}

.filter-search[b-psv76x285b] {
    width: 100%;
}

.filter-actions[b-psv76x285b] {
    display: flex;
    align-items: flex-end;
    padding-bottom: 2px;
}

.btn-filter-clear[b-psv76x285b] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorNeutralForeground2, #424242);
    cursor: pointer;
    font-size: 0.8125rem;
    transition: background 0.15s;
    font-family: inherit;
}

.btn-filter-clear:hover[b-psv76x285b] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
}

/* -- Grid Section -------------------------------------------------- */
.erp-page-content[b-psv76x285b] {
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}

/* -- Cell: Employee (name + code stacked) -------------------------- */
.cell-employee[b-psv76x285b] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

.emp-name[b-psv76x285b] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
    font-size: 0.8125rem;
}

.emp-code[b-psv76x285b] {
    font-size: 0.6875rem;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

/* -- Cell: Pending From (name + code + email stacked) -------------- */
.cell-pending-from[b-psv76x285b] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.3;
}

.pf-name[b-psv76x285b] {
    font-weight: 600;
    color: var(--BEC-colorPaletteDarkOrangeForeground2, #c67a1a);
    font-size: 0.8125rem;
}

.pf-detail[b-psv76x285b] {
    font-size: 0.6875rem;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.cell-na[b-psv76x285b] {
    color: var(--BEC-colorNeutralForeground3, #707070);
}

/* -- Due Date: overdue highlight ----------------------------------- */
.due-overdue[b-psv76x285b] {
    color: var(--BEC-colorPaletteRedForeground1, #c4314b);
    font-weight: 600;
}

/* -- Badge Styles -------------------------------------------------- */
.badge[b-psv76x285b] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* Stage badge colours */
.badge-stage.badge-draft[b-psv76x285b] {
    background: var(--BEC-colorNeutralBackground3, #f0f0f0);
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.badge-stage.badge-inprogress[b-psv76x285b] {
    background: var(--BEC-colorBrandBackground2, #e0ebf5);
    color: var(--BEC-colorBrandForeground1, #003366);
}

.badge-stage.badge-pendingapproval[b-psv76x285b] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2, #fdf0e0);
    color: var(--BEC-colorPaletteDarkOrangeForeground2, #c67a1a);
}

.badge-stage.badge-returnedforcorrection[b-psv76x285b] {
    background: rgba(196, 49, 75, 0.1);
    color: var(--BEC-colorPaletteRedForeground1, #c4314b);
}

.badge-stage.badge-completed[b-psv76x285b] {
    background: var(--BEC-colorPaletteGreenBackground2, #e0f2e9);
    color: var(--BEC-colorPaletteGreenForeground2, #0d6e3d);
}

/* -- Responsive ---------------------------------------------------- */
@media (max-width: 768px) {
    .erp-page-container[b-psv76x285b] {
        padding: 12px 12px 16px;
    }

    .summary-row[b-psv76x285b] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-toolbar[b-psv76x285b] {
        flex-direction: column;
    }

    .filter-group[b-psv76x285b] {
        min-width: 100%;
    }
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .summary-row[b-psv76x285b] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .summary-card[b-psv76x285b] {
        padding: 12px 8px;
    }

    .summary-count[b-psv76x285b] {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .summary-row[b-psv76x285b] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/AuditLogs/EvaluationStageHistory/EvaluationStageHistory.razor.rz.scp.css */
/* ================================================================
   Evaluation Stage History — Scoped Styles
   ================================================================ */

/* -- Page container ------------------------------------------------ */
.erp-page-container[b-fd6bmgpwie] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px 24px;
    min-height: 0;
    overflow-y: auto;
}

/* -- Page header --------------------------------------------------- */
.erp-page-header[b-fd6bmgpwie] {
    margin-bottom: 4px;
}

.page-title-row[b-fd6bmgpwie] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-icon[b-fd6bmgpwie] {
    font-size: 22px;
    color: var(--BEC-colorBrandForeground1, #003366);
}

.erp-page-header h4[b-fd6bmgpwie] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* -- Loading / Error ----------------------------------------------- */
.loading-container[b-fd6bmgpwie],
.error-container[b-fd6bmgpwie] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.error-container i[b-fd6bmgpwie] {
    font-size: 32px;
    color: var(--BEC-colorPaletteRedForeground1, #c4314b);
}

.btn-retry[b-fd6bmgpwie] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    color: var(--BEC-colorBrandForeground1, #003366);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.15s, border-color 0.15s;
}

.btn-retry:hover[b-fd6bmgpwie] {
    background: var(--BEC-colorNeutralBackground1Hover, #f5f5f5);
    border-color: var(--BEC-colorBrandStroke1, #003366);
}

/* -- Selector Section ---------------------------------------------- */
.selector-section[b-fd6bmgpwie] {
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 8px;
}

.selector-row[b-fd6bmgpwie] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.filter-group[b-fd6bmgpwie] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group--search[b-fd6bmgpwie] {
    flex: 1;
    min-width: 280px;
}

.filter-label[b-fd6bmgpwie] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3, #707070);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* -- Info Card ----------------------------------------------------- */
.info-card[b-fd6bmgpwie] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground1, #ffffff);
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 8px;
    border-left: 4px solid var(--BEC-colorBrandForeground1, #003366);
}

.info-card-item[b-fd6bmgpwie] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info-label[b-fd6bmgpwie] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.info-value[b-fd6bmgpwie] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1, #242424);
}

/* -- Stage Badges -------------------------------------------------- */
.stage-badge[b-fd6bmgpwie] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.stage-badge--draft[b-fd6bmgpwie] {
    background: var(--BEC-colorNeutralBackground4, #ebebeb);
    color: var(--BEC-colorNeutralForeground2, #424242);
}

.stage-badge--inprogress[b-fd6bmgpwie] {
    background: rgba(0, 51, 102, 0.10);
    color: var(--BEC-colorBrandForeground1, #003366);
}

.stage-badge--pendingapproval[b-fd6bmgpwie] {
    background: rgba(198, 122, 26, 0.10);
    color: var(--BEC-colorPaletteDarkOrangeForeground2, #c67a1a);
}

.stage-badge--returnedforcorrection[b-fd6bmgpwie] {
    background: rgba(196, 49, 75, 0.10);
    color: var(--BEC-colorPaletteRedForeground1, #c4314b);
}

.stage-badge--completed[b-fd6bmgpwie],
.stage-badge--approved[b-fd6bmgpwie] {
    background: rgba(16, 124, 16, 0.10);
    color: var(--BEC-colorPaletteGreenForeground1, #107c10);
}

.stage-badge--created[b-fd6bmgpwie] {
    background: rgba(0, 51, 102, 0.06);
    color: var(--BEC-colorNeutralForeground3, #707070);
}

/* -- Empty State --------------------------------------------------- */
.empty-state[b-fd6bmgpwie] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 24px;
    text-align: center;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.empty-icon[b-fd6bmgpwie] {
    font-size: 40px;
    opacity: 0.4;
}

/* -- Timeline ------------------------------------------------------ */
.timeline[b-fd6bmgpwie] {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.timeline-entry[b-fd6bmgpwie] {
    display: flex;
    gap: 16px;
    position: relative;
}

.timeline-marker[b-fd6bmgpwie] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 24px;
    flex-shrink: 0;
}

.timeline-dot[b-fd6bmgpwie] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--BEC-colorBrandForeground1, #003366);
    border: 2px solid var(--BEC-colorNeutralBackground1, #ffffff);
    box-shadow: 0 0 0 2px var(--BEC-colorBrandForeground1, #003366);
    flex-shrink: 0;
    margin-top: 4px;
}

.timeline-line[b-fd6bmgpwie] {
    width: 2px;
    flex: 1;
    background: var(--BEC-colorNeutralStroke2, #e0e0e0);
    min-height: 16px;
}

.timeline-entry:last-child .timeline-line[b-fd6bmgpwie] {
    display: none;
}

.timeline-content[b-fd6bmgpwie] {
    flex: 1;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.timeline-header[b-fd6bmgpwie] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.stage-transition[b-fd6bmgpwie] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.transition-arrow[b-fd6bmgpwie] {
    font-size: 0.75rem;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.timeline-date[b-fd6bmgpwie] {
    font-size: 0.8rem;
    color: var(--BEC-colorNeutralForeground3, #707070);
    display: flex;
    align-items: center;
    gap: 6px;
}

.timeline-meta[b-fd6bmgpwie] {
    font-size: 0.8rem;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.changed-by[b-fd6bmgpwie] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.timeline-notes[b-fd6bmgpwie] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border: 1px solid var(--BEC-colorNeutralStroke2, #e0e0e0);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--BEC-colorNeutralForeground2, #424242);
    line-height: 1.4;
}

.timeline-notes i[b-fd6bmgpwie] {
    margin-top: 2px;
    color: var(--BEC-colorNeutralForeground3, #707070);
    flex-shrink: 0;
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Evaluations/AcknowledgeEvaluation/AcknowledgeEvaluation.razor.rz.scp.css */
/* ========================================
   ACKNOWLEDGE EVALUATION PAGE
   Side-by-side comparison view
   ======================================== */

.erp-page-container[b-e4nmrhgzyj] { display: flex; flex-direction: column; height: 100vh; overflow: hidden; position: relative; }
.erp-page-header[b-e4nmrhgzyj] { position: sticky; top: 0; z-index: 100; background: transparent; padding: 6px 24px; display: flex; align-items: center; min-height: 36px; gap: 8px; }
.header-left[b-e4nmrhgzyj] { flex: 1; display: flex; align-items: center; gap: 8px; }

.back-btn[b-e4nmrhgzyj] { background: transparent; border: none; color: var(--BEC-colorNeutralForeground2); font-size: 14px; cursor: pointer; padding: 4px 8px; border-radius: var(--BEC-borderRadiusSmall); transition: all 0.15s; }
.back-btn:hover[b-e4nmrhgzyj] { color: var(--BEC-colorBrandForeground1); background: var(--BEC-colorNeutralBackground1Hover); }

.page-title[b-e4nmrhgzyj] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--BEC-fontWeightSemibold); color: var(--BEC-colorNeutralForeground1); margin: 0; }
.page-title i[b-e4nmrhgzyj] { color: var(--BEC-colorBrandForeground1); }

/* State Containers */
.state-container[b-e4nmrhgzyj] { display: flex; align-items: center; justify-content: center; flex: 1; padding: 60px; }
.loading-spinner[b-e4nmrhgzyj], .error-card[b-e4nmrhgzyj], .empty-card[b-e4nmrhgzyj] { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--BEC-colorNeutralForeground3); }
.error-card i[b-e4nmrhgzyj] { color: var(--BEC-colorPaletteRedForeground1); }
.retry-btn[b-e4nmrhgzyj], .back-link-btn[b-e4nmrhgzyj] { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border: 1px solid var(--BEC-colorNeutralStroke1); background: var(--BEC-colorNeutralBackground1); color: var(--BEC-colorNeutralForeground1); border-radius: var(--BEC-borderRadiusMedium); cursor: pointer; font-size: 13px; }
.retry-btn:hover[b-e4nmrhgzyj], .back-link-btn:hover[b-e4nmrhgzyj] { border-color: var(--BEC-colorBrandForeground1); color: var(--BEC-colorBrandForeground1); }

/* Acknowledgment Content */
.ack-content[b-e4nmrhgzyj] { flex: 1; overflow-y: auto; padding: 0 24px 40px; display: flex; flex-direction: column; gap: 20px; }

/* Header Cards */
.ack-header-cards[b-e4nmrhgzyj] { display: flex; gap: 16px; flex-wrap: wrap; }
.meta-card[b-e4nmrhgzyj] { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--BEC-colorNeutralBackground2); border: 1px solid var(--BEC-colorNeutralStroke2); border-radius: var(--BEC-borderRadiusMedium); flex: 1; min-width: 180px; }
.meta-icon[b-e4nmrhgzyj] { font-size: 16px; color: var(--BEC-colorBrandForeground1); }
.meta-content[b-e4nmrhgzyj] { display: flex; flex-direction: column; gap: 2px; }
.meta-label[b-e4nmrhgzyj] { font-size: 10px; font-weight: var(--BEC-fontWeightSemibold); color: var(--BEC-colorNeutralForeground3); text-transform: uppercase; }
.meta-value[b-e4nmrhgzyj] { font-size: 13px; font-weight: var(--BEC-fontWeightSemibold); color: var(--BEC-colorNeutralForeground1); }
.stage-badge[b-e4nmrhgzyj] { padding: 2px 8px; border-radius: var(--BEC-borderRadiusSmall); font-size: 11px; background: var(--BEC-colorPaletteDarkOrangeBackground2); color: var(--BEC-colorPaletteDarkOrangeForeground2); }

/* Score Comparison Section */
.comparison-section[b-e4nmrhgzyj] { display: flex; flex-direction: column; gap: 8px; }
.section-title[b-e4nmrhgzyj] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--BEC-fontWeightSemibold); color: var(--BEC-colorNeutralForeground1); margin: 0; }
.section-title i[b-e4nmrhgzyj] { color: var(--BEC-colorBrandForeground1); }

/* Comparison Table */
.comparison-table[b-e4nmrhgzyj] { border: 1px solid var(--BEC-colorNeutralStroke2); border-radius: var(--BEC-borderRadiusMedium); overflow: hidden; }

.comp-header-row[b-e4nmrhgzyj] { display: flex; background: var(--BEC-colorNeutralBackground3); font-size: 11px; font-weight: var(--BEC-fontWeightSemibold); color: var(--BEC-colorNeutralForeground2); text-transform: uppercase; border-bottom: 1px solid var(--BEC-colorNeutralStroke2); }
.comp-row[b-e4nmrhgzyj] { display: flex; border-bottom: 1px solid var(--BEC-colorNeutralStroke2); background: var(--BEC-colorNeutralBackground1); font-size: 13px; transition: background 0.1s; }
.comp-row:hover[b-e4nmrhgzyj] { background: var(--BEC-colorNeutralBackground1Hover); }
.comp-row:last-child[b-e4nmrhgzyj] { border-bottom: none; }
.comp-totals-row[b-e4nmrhgzyj] { display: flex; background: var(--BEC-colorNeutralBackground3); font-size: 13px; border-top: 2px solid var(--BEC-colorNeutralStroke1); }

.comp-col[b-e4nmrhgzyj] { padding: 10px 12px; display: flex; align-items: center; }
.comp-question[b-e4nmrhgzyj] { flex: 2; }
.comp-score[b-e4nmrhgzyj] { flex: 0 0 100px; justify-content: center; text-align: center; }
.comp-gap[b-e4nmrhgzyj] { flex: 0 0 80px; justify-content: center; text-align: center; }
.comp-comment[b-e4nmrhgzyj] { flex: 2; color: var(--BEC-colorNeutralForeground2); font-size: 12px; }

/* Gap Colors */
.gap-value[b-e4nmrhgzyj] { font-weight: var(--BEC-fontWeightBold); padding: 2px 8px; border-radius: var(--BEC-borderRadiusSmall); font-size: 12px; }
.gap-positive[b-e4nmrhgzyj] { background: var(--BEC-colorPaletteGreenBackground2); color: var(--BEC-colorPaletteGreenForeground2); }
.gap-negative[b-e4nmrhgzyj] { background: var(--BEC-colorPaletteRedBackground2); color: var(--BEC-colorPaletteRedForeground1); }
.gap-neutral[b-e4nmrhgzyj] { background: var(--BEC-colorNeutralBackground3); color: var(--BEC-colorNeutralForeground3); }

/* Acknowledgment Form */
.ack-form-section[b-e4nmrhgzyj] { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--BEC-colorNeutralBackground2); border: 1px solid var(--BEC-colorNeutralStroke2); border-radius: var(--BEC-borderRadiusMedium); }

/* Weight badge on question text */
.weight-badge[b-e4nmrhgzyj] { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: var(--BEC-borderRadiusSmall); font-size: 10px; font-weight: var(--BEC-fontWeightSemibold); background: var(--BEC-colorNeutralBackground3); color: var(--BEC-colorNeutralForeground3); }

/* Score display: weighted + raw */
.score-weighted[b-e4nmrhgzyj] { display: block; font-weight: var(--BEC-fontWeightSemibold); font-size: 13px; }
.score-raw[b-e4nmrhgzyj] { display: block; font-size: 10px; color: var(--BEC-colorNeutralForeground3); }

/* Manager Details Section */
.manager-details-section[b-e4nmrhgzyj] { display: flex; flex-direction: column; gap: 8px; }

.manager-details-grid[b-e4nmrhgzyj] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.detail-card[b-e4nmrhgzyj] { display: flex; flex-direction: column; background: var(--BEC-colorNeutralBackground1); border: 1px solid var(--BEC-colorNeutralStroke2); border-radius: var(--BEC-borderRadiusMedium); overflow: hidden; }
.detail-card-full[b-e4nmrhgzyj] { grid-column: 1 / -1; }

.detail-card-header[b-e4nmrhgzyj] { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--BEC-colorNeutralBackground3); font-size: 12px; font-weight: var(--BEC-fontWeightSemibold); color: var(--BEC-colorNeutralForeground2); text-transform: uppercase; }
.detail-card-header i[b-e4nmrhgzyj] { color: var(--BEC-colorBrandForeground1); font-size: 12px; }

.detail-card-body[b-e4nmrhgzyj] { padding: 10px 12px; }

/* Recommended Action badge */
.action-badge[b-e4nmrhgzyj] { display: inline-block; padding: 4px 12px; border-radius: var(--BEC-borderRadiusMedium); font-size: 13px; font-weight: var(--BEC-fontWeightSemibold); background: var(--BEC-colorBrandBackground2); color: var(--BEC-colorBrandForeground2); }

/* Tag lists for strengths/weaknesses */
.tag-list[b-e4nmrhgzyj] { display: flex; flex-wrap: wrap; gap: 6px; }
.tag[b-e4nmrhgzyj] { display: inline-block; padding: 4px 10px; border-radius: var(--BEC-borderRadiusMedium); font-size: 12px; font-weight: var(--BEC-fontWeightMedium); }
.tag-strength[b-e4nmrhgzyj] { background: var(--BEC-colorPaletteGreenBackground2); color: var(--BEC-colorPaletteGreenForeground2); }
.tag-development[b-e4nmrhgzyj] { background: var(--BEC-colorPaletteDarkOrangeBackground2); color: var(--BEC-colorPaletteDarkOrangeForeground2); }

/* Detail text (for contributions and comments) */
.detail-text[b-e4nmrhgzyj] { margin: 0; font-size: 13px; color: var(--BEC-colorNeutralForeground1); line-height: 1.5; white-space: pre-wrap; }

.ack-checkbox-row[b-e4nmrhgzyj] { padding: 8px 0; }
[b-e4nmrhgzyj] .ack-checkbox .e-label { font-size: 13px; font-weight: var(--BEC-fontWeightMedium); color: var(--BEC-colorNeutralForeground1); }

.ack-comment-group[b-e4nmrhgzyj] { display: flex; flex-direction: column; gap: 4px; }
.form-label[b-e4nmrhgzyj] { font-size: 12px; font-weight: var(--BEC-fontWeightSemibold); color: var(--BEC-colorNeutralForeground2); }
[b-e4nmrhgzyj] .ack-comment-input textarea { min-height: 80px; }

.ack-actions[b-e4nmrhgzyj] { display: flex; justify-content: flex-end; gap: 10px; padding-top: 8px; }

/* Buttons */
.btn[b-e4nmrhgzyj] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; border: none; border-radius: var(--BEC-borderRadiusMedium); font-size: 13px; font-weight: var(--BEC-fontWeightSemibold); cursor: pointer; transition: all 0.15s; }
.btn:disabled[b-e4nmrhgzyj] { opacity: 0.5; cursor: not-allowed; }
.btn-secondary[b-e4nmrhgzyj] { background: var(--BEC-colorNeutralBackground1); color: var(--BEC-colorNeutralForeground1); border: 1px solid var(--BEC-colorNeutralStroke1); }
.btn-secondary:hover:not(:disabled)[b-e4nmrhgzyj] { border-color: var(--BEC-colorBrandForeground1); color: var(--BEC-colorBrandForeground1); }
.btn-primary[b-e4nmrhgzyj] { background: var(--BEC-colorBrandBackground); color: var(--BEC-colorNeutralForegroundOnBrand); }
.btn-primary:hover:not(:disabled)[b-e4nmrhgzyj] { background: var(--BEC-colorBrandBackgroundHover); }

/* Arabic question text */
.q-text-arabic[b-e4nmrhgzyj] {
    direction: rtl;
    text-align: right;
    font-size: 0.9em;
    color: var(--BEC-TextSecondary, #555);
    margin-top: 4px;
    font-style: italic;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .comparison-table[b-e4nmrhgzyj] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .comp-header-row[b-e4nmrhgzyj],
    .comp-row[b-e4nmrhgzyj],
    .comp-totals-row[b-e4nmrhgzyj] {
        min-width: 560px;
    }

    .manager-details-grid[b-e4nmrhgzyj] {
        grid-template-columns: 1fr;
    }

    .ack-content[b-e4nmrhgzyj] {
        padding: 0 12px 24px;
    }
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Evaluations/AllEvaluations/AllEvaluations.razor.rz.scp.css */
/* ========================================
   EVALUATION ADMINISTRATION PAGE
   100% Identical to Employee Evaluator Administration
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-d7wu06z1m2] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-d7wu06z1m2] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-d7wu06z1m2] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-d7wu06z1m2] {
    transform: scale(0.98);
}

.page-subtitle[b-d7wu06z1m2] {
    display: none;
}

.header-right[b-d7wu06z1m2] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-d7wu06z1m2] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-d7wu06z1m2] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-d7wu06z1m2] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-d7wu06z1m2] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-d7wu06z1m2] {
    flex: 1;
    padding: 10px 20px 20px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   FILTER BAR — Year & Stage dropdowns
   ======================================== */
.filter-bar[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 24px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.filter-group[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-label[b-d7wu06z1m2] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    white-space: nowrap;
}

[b-d7wu06z1m2] .filter-dropdown.e-input-group,
[b-d7wu06z1m2] .filter-dropdown .e-input-group {
    height: 26px !important;
    min-height: 26px !important;
    font-size: 12px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

[b-d7wu06z1m2] .filter-dropdown .e-input {
    font-size: 12px !important;
    padding: 2px 6px !important;
}

.filter-actions[b-d7wu06z1m2] {
    margin-left: auto;
}

.filter-clear-btn[b-d7wu06z1m2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-clear-btn:hover[b-d7wu06z1m2] {
    border-color: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
}

.filter-clear-btn i[b-d7wu06z1m2] {
    font-size: 10px;
}

/* ========================================
   STAT VALUE COLOR VARIANTS
   ======================================== */
.stat-draft[b-d7wu06z1m2] {
    color: var(--BEC-colorNeutralForeground3) !important;
}

.stat-pending[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2) !important;
}

.stat-approved[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteGreenForeground2) !important;
}

.stat-inprogress[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1) !important;
}

.stat-completed[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteGreenForeground2) !important;
}

/* ========================================
   CELL VERSION TAG
   ======================================== */
.cell-version[b-d7wu06z1m2] {
    display: inline-block;
    padding: 1px 5px;
    margin-left: 4px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    vertical-align: middle;
}

/* ========================================
   SCORE VALUE
   ======================================== */
.score-value[b-d7wu06z1m2] {
    font-weight: var(--BEC-fontWeightBold);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

.score-max[b-d7wu06z1m2] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightRegular);
    color: var(--BEC-colorNeutralForeground3);
    margin-left: 1px;
}

.score-muted[b-d7wu06z1m2] {
    color: var(--BEC-colorNeutralForeground4);
    font-size: 12px;
}

/* ========================================
   APPROVAL STATUS CELL
   ======================================== */
.approval-status-cell[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    overflow: hidden;
}

.approval-icon[b-d7wu06z1m2] {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--BEC-colorBrandForeground1);
}

.approval-text[b-d7wu06z1m2] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-d7wu06z1m2] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-d7wu06z1m2] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-d7wu06z1m2] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-d7wu06z1m2] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-d7wu06z1m2] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-d7wu06z1m2] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-d7wu06z1m2] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-d7wu06z1m2] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-d7wu06z1m2] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-d7wu06z1m2] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-d7wu06z1m2] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-d7wu06z1m2] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-d7wu06z1m2] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-d7wu06z1m2] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
/* ⚠️ CRITICAL: Do NOT use overflow: hidden on .e-grid - it clips the pager */
[b-d7wu06z1m2] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    /* overflow: hidden removed - pager must be visible */
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Grid Header - Rounded Top Corners */
[b-d7wu06z1m2] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-d7wu06z1m2] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Fixed position to escape overflow:hidden
   ======================================== */
[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
    z-index: 10000 !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    font-size: 14px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-dlg-header .e-dlg-header-content {
    padding: 0 !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
    padding: 16px !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-ccsearch {
    margin-bottom: 8px !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-ccsearch input {
    height: 32px !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-ccsearch .e-input-group {
    height: 32px !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist {
    margin: 0 !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li {
    padding: 8px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-frame {
    border-radius: 2px !important;
    width: 16px !important;
    height: 16px !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkbox-wrapper {
    margin-right: 8px !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-label {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

[b-d7wu06z1m2] .e-grid .e-dialog.e-ccdlg .e-footer-content button {
    height: 32px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-d7wu06z1m2] .e-grid .e-row.e-selectionbackground,
[b-d7wu06z1m2] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-d7wu06z1m2] .e-grid .e-row.e-selectionbackground:hover,
[b-d7wu06z1m2] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-d7wu06z1m2] .e-grid .e-row.e-selectionbackground td:first-child,
[b-d7wu06z1m2] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-d7wu06z1m2] .e-grid .e-row {
    height: 32px !important;
}

[b-d7wu06z1m2] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Dim completed evaluations - Visual indication that they're done */
[b-d7wu06z1m2] .e-grid .e-row.evaluation-completed {
    opacity: 0.5;
    background-color: var(--BEC-colorNeutralBackground2) !important;
}

[b-d7wu06z1m2] .e-grid .e-row.evaluation-completed:hover {
    opacity: 0.6;
    background-color: var(--BEC-colorNeutralBackground3) !important;
}

[b-d7wu06z1m2] .e-grid .e-row.evaluation-completed td {
    color: var(--BEC-colorNeutralForeground3);
}

/* Overdue Row Styling */
[b-d7wu06z1m2] .e-grid .e-row.evaluation-overdue {
    border-left: 3px solid var(--BEC-colorPaletteRedForeground1);
}

/* Overdue Badge Pulse Animation */
.overdue-badge[b-d7wu06z1m2] {
    margin-left: 4px;
    animation: pulse-overdue-b-d7wu06z1m2 2s ease-in-out infinite;
}

@keyframes pulse-overdue-b-d7wu06z1m2 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Per-Row Action Buttons */
.btn-action[b-d7wu06z1m2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    background: transparent;
}

.btn-action-view[b-d7wu06z1m2] {
    border-color: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorBrandForeground1);
}

.btn-action-view:hover[b-d7wu06z1m2] {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-action i[b-d7wu06z1m2] {
    font-size: 10px;
}

/* Stacked Cell Formatting (Name on top, Code on bottom) */
.cell-stacked[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cell-name[b-d7wu06z1m2] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    font-size: 12px;
    line-height: 1.2;
}

.cell-code[b-d7wu06z1m2] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    line-height: 1.2;
}

/* Inline Cell Formatting (Name (Code) on same line) */
.cell-inline[b-d7wu06z1m2] {
    display: inline-block;
    font-size: 12px;
    line-height: 1.2;
    color: var(--BEC-colorNeutralForeground1);
}

/* Clickable Row Styling - Better UX */
[b-d7wu06z1m2] .e-grid .e-row.evaluation-clickable {
    cursor: pointer;
}

[b-d7wu06z1m2] .e-grid .e-row.evaluation-clickable:hover {
    background-color: var(--BEC-colorNeutralBackground2) !important;
}

[b-d7wu06z1m2] .e-grid .e-row.evaluation-clickable:hover td {
    background-color: transparent !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-d7wu06z1m2] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-d7wu06z1m2] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-d7wu06z1m2 1s linear infinite;
}

@keyframes spin-b-d7wu06z1m2 {
    to { transform: rotate(360deg); }
}

.loading-container p[b-d7wu06z1m2] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-d7wu06z1m2] {
    font-size: 48px;
}

.error-container p[b-d7wu06z1m2] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-d7wu06z1m2] {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-d7wu06z1m2] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-d7wu06z1m2] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-d7wu06z1m2] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-secondary[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground2);
}

.badge-info[b-d7wu06z1m2] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-submitted[b-d7wu06z1m2] {
    background: rgba(0, 128, 128, 0.12);
    color: var(--BEC-colorBrandForeground1);
}

.badge-completed[b-d7wu06z1m2] {
    background: rgba(0, 100, 0, 0.12);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-danger[b-d7wu06z1m2] {
    background: rgba(209, 52, 56, 0.12);
    color: var(--BEC-colorPaletteRedForeground1);
}

.badge-selfappraisal[b-d7wu06z1m2] {
    background: rgba(0, 128, 128, 0.12);
    color: #0e7c7b;
}

.badge-managerreview[b-d7wu06z1m2] {
    background: rgba(0, 90, 158, 0.12);
    color: #005a9e;
}

.badge-returnedcorrection[b-d7wu06z1m2] {
    background: rgba(198, 40, 40, 0.12);
    color: #c62828;
}

.badge-returned[b-d7wu06z1m2] {
    background: rgba(230, 126, 34, 0.15);
    color: #d35400;
    font-weight: var(--BEC-fontWeightBold, 700);
}

.badge-pendingack[b-d7wu06z1m2] {
    background: rgba(136, 23, 152, 0.12);
    color: #881798;
}

/* ── Returned for Correction Banner (View Panel) ── */
.returned-banner[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(230, 126, 34, 0.08);
    border-left: 4px solid #d35400;
    color: var(--BEC-colorNeutralForeground1);
    font-size: 12.5px;
    line-height: 1.5;
    margin-top: 12px;
    border-radius: 0 var(--BEC-borderRadiusSmall, 2px) var(--BEC-borderRadiusSmall, 2px) 0;
}

.returned-banner-header[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d35400;
    font-size: 12.5px;
}

.returned-banner-header i[b-d7wu06z1m2] {
    font-size: 14px;
    flex-shrink: 0;
}

.returned-banner-reason[b-d7wu06z1m2] {
    font-style: italic;
    color: #a04000;
    padding-left: 22px;
    font-size: 12px;
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
[b-d7wu06z1m2] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-d7wu06z1m2] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-d7wu06z1m2] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-d7wu06z1m2] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

/* ========================================
   WIZARD SIDEBAR STYLING (100% Copy from System Module Administration)
   ======================================== */
.sidebar-header[b-d7wu06z1m2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-d7wu06z1m2] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-d7wu06z1m2] {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground2);
}

.sidebar-content[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-d7wu06z1m2] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px;
    padding-bottom: 80px; /* Add bottom padding to prevent content from being hidden behind footer */
    position: relative;
}

/* Prevent horizontal scroll in wizard grid */
.sidebar-step-content[b-d7wu06z1m2]  .e-grid {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

.sidebar-step-content[b-d7wu06z1m2]  .e-grid .e-gridcontent {
    overflow-x: auto !important;
}

.sidebar-step-content[b-d7wu06z1m2]  .e-grid .e-content {
    overflow-x: auto !important;
}

.wizard-step[b-d7wu06z1m2] {
    max-width: 100%;
}

.step-title[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
}

.step-title i[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
}

.step-description[b-d7wu06z1m2] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 24px 0;
}

/* Form Group */
.form-group[b-d7wu06z1m2] {
    margin-bottom: 20px;
}

.form-label[b-d7wu06z1m2] {
    display: block;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
    text-align: left;
}

.form-label.required[b-d7wu06z1m2]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: 600;
}

/* ========================================
   COMPACT FORM STYLES (Edit Wizard)
   ======================================== */

/* 2-Column Grid Layout */
.form-grid-2col[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

/* Compact Form Group */
.form-group-compact[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Compact Form Label */
.form-label-compact[b-d7wu06z1m2] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    text-align: left;
}

.form-label-compact.required[b-d7wu06z1m2]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: 600;
}

/* Compact Input Fields */
[b-d7wu06z1m2] .compact-input .e-input-group {
    height: 28px !important;
}

[b-d7wu06z1m2] .compact-input .e-input-group input {
    font-size: 12px !important;
    padding: 4px 8px !important;
}

/* Compact Textarea */
[b-d7wu06z1m2] .compact-textarea .e-input-group {
    min-height: 60px !important;
}

[b-d7wu06z1m2] .compact-textarea .e-input-group textarea {
    font-size: 11px !important;
    padding: 6px 8px !important;
    line-height: 1.4 !important;
}

/* ✅ AUTO-GENERATION INFO BANNER */
.auto-gen-info[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--BEC-colorBrandBackground2);
    border: 1px solid var(--BEC-colorBrandBackground);
    border-radius: 8px;
    font-size: 14px;
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: 8px;
}

.auto-gen-info i[b-d7wu06z1m2] {
    font-size: 18px;
    color: var(--BEC-colorBrandForeground1);
    animation: sparkle-b-d7wu06z1m2 2s ease-in-out infinite;
}

@keyframes sparkle-b-d7wu06z1m2 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.auto-gen-info strong[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

.form-value[b-d7wu06z1m2] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    min-height: 34px;
    display: flex;
    align-items: center;
    text-align: left;
    justify-content: flex-start;
}

.form-row[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rtl-text[b-d7wu06z1m2] {
    direction: rtl;
    text-align: right;
}

/* Sidebar Footer - Positioned at absolute bottom */
.sidebar-footer[b-d7wu06z1m2] {
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* Footer Buttons Container - Right Aligned */
.footer-buttons[b-d7wu06z1m2] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Buttons (HTML buttons with custom CSS) - Standardized */
.btn[b-d7wu06z1m2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    height: 36px;
    white-space: nowrap;
}

.btn:disabled[b-d7wu06z1m2] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Secondary/Cancel Button - Gray */
.btn-secondary[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.btn-secondary:hover:not(:disabled)[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground4);
    border-color: var(--BEC-colorNeutralStroke2);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-secondary:active:not(:disabled)[b-d7wu06z1m2] {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Success/Save Button - Green */
.btn-success[b-d7wu06z1m2] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorPaletteGreenForeground1);
}

.btn-success:hover:not(:disabled)[b-d7wu06z1m2] {
    background: var(--BEC-colorPaletteGreenForeground2);
    border-color: var(--BEC-colorPaletteGreenForeground2);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-success:active:not(:disabled)[b-d7wu06z1m2] {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn i[b-d7wu06z1m2] {
    font-size: 14px;
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-d7wu06z1m2] .notification-success .e-dlg-header-content {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .notification-success .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .notification-success .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteGreenForeground2);
    border-color: var(--BEC-colorPaletteGreenForeground2);
}

/* Error Notification */
[b-d7wu06z1m2] .notification-error .e-dlg-header-content {
    background: var(--BEC-colorPaletteRedForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .notification-error .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .notification-error .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteRedForeground1);
    border-color: var(--BEC-colorPaletteRedForeground1);
}

/* Warning Notification */
[b-d7wu06z1m2] .notification-warning .e-dlg-header-content {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .notification-warning .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .notification-warning .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    border-color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

/* Info Notification */
[b-d7wu06z1m2] .notification-info .e-dlg-header-content {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .notification-info .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .notification-info .e-footer-content .e-btn-primary {
    background: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandForeground1);
}

/* Dialog Content Styling */
[b-d7wu06z1m2] .notification-success .e-dlg-content,
[b-d7wu06z1m2] .notification-error .e-dlg-content,
[b-d7wu06z1m2] .notification-warning .e-dlg-content,
[b-d7wu06z1m2] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: var(--BEC-colorNeutralForeground1);
}

/* Close Icon Color */
[b-d7wu06z1m2] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-d7wu06z1m2] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-d7wu06z1m2] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-d7wu06z1m2] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   FORM SECTIONS
   ======================================== */
.form-section[b-d7wu06z1m2] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.form-section:first-child[b-d7wu06z1m2] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.section-title[b-d7wu06z1m2] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-title i[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
}

.form-section h4[b-d7wu06z1m2] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section h4 i[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.required[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.warning-text-red[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-top: 16px;
}

.warning-icon-red[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.warning-icon-orange[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

/* ========================================
   RESET DIALOG STYLES
   ======================================== */
[b-d7wu06z1m2] .reset-dialog .e-dlg-header-content {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .reset-dialog .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .reset-dialog .e-dlg-header-content .e-icon-dlg-close {
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .reset-dialog .e-footer-content .e-btn.e-warning {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    border-color: var(--BEC-colorPaletteDarkOrangeForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-d7wu06z1m2] .reset-dialog .e-footer-content .e-btn.e-warning:hover {
    opacity: 0.9;
}

.reset-warning-box[b-d7wu06z1m2] {
    display: flex;
    gap: 12px;
    padding: 14px;
    margin-top: 12px;
    background: #fff5f0;
    border: 1px solid var(--BEC-colorPaletteDarkOrangeForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    line-height: 1.5;
}

.reset-warning-box > i[b-d7wu06z1m2] {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    margin-top: 2px;
}

.reset-warning-box ul[b-d7wu06z1m2] {
    margin: 4px 0 8px 16px;
    padding: 0;
}

.reset-warning-box li[b-d7wu06z1m2] {
    margin-bottom: 2px;
}

.reset-warning-box p[b-d7wu06z1m2] {
    margin: 0 0 4px 0;
}

/* ========================================
   GRID PAGER STYLING
   ⚠️ PAGER STYLING: Managed by BEC_Theme.css (Global Ultra-Compact Single-Row Pager)
   DO NOT add pager CSS here - it will override the global styles
   ======================================== */

/* ========================================
   TABS - Evaluation / Pending Approval
   ======================================== */
[b-d7wu06z1m2] .e-tab .e-tab-header {
    background: transparent;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke2);
    padding: 0 4px;
    min-height: 36px;
}

[b-d7wu06z1m2] .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    text-transform: none;
    padding: 6px 14px;
}

[b-d7wu06z1m2] .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightBold);
}

[b-d7wu06z1m2] .e-tab .e-tab-header .e-indicator {
    background: var(--BEC-colorBrandForeground1);
    height: 2px;
}

[b-d7wu06z1m2] .e-tab .e-content {
    padding: 0;
    border: none;
}

/* ========================================
   PENDING APPROVALS TAB
   ======================================== */
.loading-container[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.loading-container .spinner[b-d7wu06z1m2] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: spin-b-d7wu06z1m2 0.8s linear infinite;
}

@keyframes spin-b-d7wu06z1m2 {
    to { transform: rotate(360deg); }
}

.loading-container p[b-d7wu06z1m2] {
    font-size: 13px;
    margin: 0;
}

.empty-pending[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 8px;
    color: var(--BEC-colorNeutralForeground3);
    text-align: center;
}

.empty-pending i[b-d7wu06z1m2] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground4);
    margin-bottom: 8px;
}

.empty-pending p[b-d7wu06z1m2] {
    font-size: 15px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.empty-pending span[b-d7wu06z1m2] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

/* Review button in pending grid */
.btn-review[b-d7wu06z1m2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--BEC-colorBrandForeground1);
    background: transparent;
    color: var(--BEC-colorBrandForeground1);
    border-radius: 4px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-review:hover[b-d7wu06z1m2] {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-review i[b-d7wu06z1m2] {
    font-size: 11px;
}

/* Badge styles for pending grid */
.badge[b-d7wu06z1m2] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    line-height: 1.4;
}

.badge-primary[b-d7wu06z1m2] {
    background: rgba(0, 120, 212, 0.1);
    color: var(--BEC-colorBrandForeground1);
}

.badge-success[b-d7wu06z1m2] {
    background: rgba(16, 124, 16, 0.1);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-danger[b-d7wu06z1m2] {
    background: rgba(209, 52, 56, 0.1);
    color: var(--BEC-colorPaletteRedForeground1);
}

.text-danger[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* Cell inline layout for pending grid */
.cell-inline[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.cell-inline strong[b-d7wu06z1m2] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

/* Pending Approver cell */
.approver-cell[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

.approver-name[b-d7wu06z1m2] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1, #242424);
}

.approver-email[b-d7wu06z1m2] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #707070);
}

.approver-step[b-d7wu06z1m2] {
    font-size: 10px;
    color: var(--BEC-colorBrandForeground1, #4682B4);
    font-style: italic;
}

.text-muted[b-d7wu06z1m2] {
    color: var(--BEC-colorNeutralForeground3, #707070);
    font-size: 11px;
}

/* ── HR Proxy Badge ── */
.badge-proxy[b-d7wu06z1m2] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    color: var(--BEC-colorBrandForeground1, #1e40af);
    background: var(--BEC-colorBrandBackground1, #dbeafe);
    border: 1px solid var(--BEC-colorBrandStroke1, #3b82f6);
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.4;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* ========================================
   VIEW SIDEBAR — SCORE COMPARISON TABLE
   ======================================== */
.view-loading-comparison[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 13px;
}

.view-loading-comparison i[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.view-comp-table[b-d7wu06z1m2] {
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    font-size: 12px;
}

.view-comp-header[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 70px 100px 100px 60px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 2px solid var(--BEC-colorBrandBackground);
    padding: 8px 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.view-comp-row[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 70px 100px 100px 60px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    align-items: center;
    transition: background 0.15s ease;
}

.view-comp-row:hover[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground1Hover);
}

.view-comp-row:last-of-type[b-d7wu06z1m2] {
    border-bottom: none;
}

.view-comp-totals[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 70px 100px 100px 60px;
    padding: 8px 10px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground1);
}

.view-comp-col[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.view-comp-question[b-d7wu06z1m2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
    color: var(--BEC-colorNeutralForeground1);
}

.view-comp-weight[b-d7wu06z1m2] {
    justify-content: center;
}

.view-comp-score[b-d7wu06z1m2] {
    justify-content: center;
    flex-direction: column;
    gap: 1px;
    text-align: center;
}

.view-comp-gap[b-d7wu06z1m2] {
    justify-content: center;
}

.view-weight-badge[b-d7wu06z1m2] {
    display: inline-block;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.view-score-weighted[b-d7wu06z1m2] {
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

.view-score-raw[b-d7wu06z1m2] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.view-gap-value[b-d7wu06z1m2] {
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: 11px;
    padding: 1px 5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.view-gap-positive[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteGreenForeground2);
    background: var(--BEC-colorPaletteGreenBackground2);
}

.view-gap-negative[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteRedForeground1);
    background: rgba(209, 52, 56, 0.12);
}

.view-gap-neutral[b-d7wu06z1m2] {
    color: var(--BEC-colorNeutralForeground3);
}

/* Comments row below each question */
.view-comp-comments-row[b-d7wu06z1m2] {
    padding: 4px 10px 8px 10px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.view-comment-block[b-d7wu06z1m2] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    line-height: 1.4;
}

.view-comment-label[b-d7wu06z1m2] {
    flex-shrink: 0;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 80px;
}

.view-comment-label i[b-d7wu06z1m2] {
    font-size: 10px;
    color: var(--BEC-colorBrandForeground1);
}

.view-comment-text[b-d7wu06z1m2] {
    color: var(--BEC-colorNeutralForeground1);
    word-break: break-word;
}

/* ========================================
   VIEW SIDEBAR — MANAGER DETAILS GRID
   ======================================== */
.view-details-grid[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.view-detail-card[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
}

.view-detail-card-full[b-d7wu06z1m2] {
    grid-column: 1 / -1;
}

.view-detail-header[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.view-detail-header i[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 12px;
}

.view-detail-body[b-d7wu06z1m2] {
    padding: 10px 12px;
}

.view-detail-text[b-d7wu06z1m2] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.view-action-badge[b-d7wu06z1m2] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.view-tag-list[b-d7wu06z1m2] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.view-tag[b-d7wu06z1m2] {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    border-radius: var(--BEC-borderRadiusSmall);
}

.view-tag-strength[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteGreenForeground2);
    background: var(--BEC-colorPaletteGreenBackground2);
}

.view-tag-development[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
}

/* ========================================
   SIDEBAR PRINT BUTTON
   ======================================== */
.sidebar-header-actions[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-print-btn[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
}

/* ========================================
   PRINT-ONLY ELEMENTS (hidden on screen)
   ======================================== */
.sidebar-print-header[b-d7wu06z1m2],
.sidebar-print-footer[b-d7wu06z1m2] {
    display: none;
}

/* Arabic question text */
.q-text-arabic[b-d7wu06z1m2] {
    direction: rtl;
    text-align: right;
    font-size: 0.9em;
    color: var(--BEC-TextSecondary, #555);
    margin-top: 4px;
    font-style: italic;
}

/* ========================================
   SELF-RESULT BADGE STYLES (distinguished from manager result)
   ======================================== */
.badge-self-success[b-d7wu06z1m2] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
    border: 1px dashed var(--BEC-colorPaletteGreenForeground2);
}

.badge-self-primary[b-d7wu06z1m2] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
    border: 1px dashed var(--BEC-colorBrandForeground1);
}

.badge-self-warning[b-d7wu06z1m2] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    border: 1px dashed var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-self-danger[b-d7wu06z1m2] {
    background: rgba(209, 52, 56, 0.12);
    color: var(--BEC-colorPaletteRedForeground1);
    border: 1px dashed var(--BEC-colorPaletteRedForeground1);
}

.badge-self-secondary[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground2);
    border: 1px dashed var(--BEC-colorNeutralForeground3);
}

/* ========================================
   VIEW LOADING CONTAINER
   ======================================== */
.view-loading-container[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
}

.view-loading-container .spinner[b-d7wu06z1m2] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: spin-b-d7wu06z1m2 0.8s linear infinite;
}

.view-loading-container p[b-d7wu06z1m2] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   SCORE SUMMARY GRID (Section 2)
   ======================================== */
.score-summary-grid[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.score-summary-card[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.score-card-manager[b-d7wu06z1m2] {
    border-left: 3px solid var(--BEC-colorBrandForeground1);
}

.score-card-self[b-d7wu06z1m2] {
    border-left: 3px solid #0e7c7b;
}

.score-card-gap[b-d7wu06z1m2] {
    border-left: 3px solid var(--BEC-colorNeutralForeground3);
}

.score-card-label[b-d7wu06z1m2] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.score-card-value[b-d7wu06z1m2] {
    font-size: 14px;
}

.score-card-badge[b-d7wu06z1m2] {
    margin-top: 2px;
}

.score-gap-display[b-d7wu06z1m2] {
    font-weight: var(--BEC-fontWeightBold);
    font-size: 16px;
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.score-gap-positive[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteGreenForeground2);
    background: var(--BEC-colorPaletteGreenBackground2);
}

.score-gap-negative[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteRedForeground1);
    background: rgba(209, 52, 56, 0.12);
}

.score-gap-neutral[b-d7wu06z1m2] {
    color: var(--BEC-colorNeutralForeground3);
    background: var(--BEC-colorNeutralBackground4);
}

/* ========================================
   DETAILED SCORES TABLE (Section 3)
   ======================================== */
.detail-category-block[b-d7wu06z1m2] {
    margin-bottom: 12px;
}

.detail-category-header[b-d7wu06z1m2] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    padding: 6px 10px;
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusSmall) var(--BEC-borderRadiusSmall) 0 0;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-bottom: none;
}

.detail-scores-table[b-d7wu06z1m2] {
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 0 0 var(--BEC-borderRadiusSmall) var(--BEC-borderRadiusSmall);
    overflow: hidden;
    font-size: 11px;
}

.detail-scores-header[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 60px 50px 55px 55px 50px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 2px solid var(--BEC-colorBrandBackground);
    padding: 6px 8px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-scores-row[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 60px 50px 55px 55px 50px;
    padding: 5px 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    align-items: center;
}

.detail-scores-row:hover[b-d7wu06z1m2] {
    background: var(--BEC-colorNeutralBackground1Hover);
}

.detail-scores-subtotal[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 60px 50px 55px 55px 50px;
    padding: 5px 8px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    font-weight: var(--BEC-fontWeightSemibold);
}

.detail-grand-totals[b-d7wu06z1m2] {
    display: grid;
    grid-template-columns: 1fr 60px 50px 55px 55px 50px;
    padding: 8px;
    background: var(--BEC-colorBrandBackground2);
    border: 2px solid var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-top: 8px;
    font-weight: var(--BEC-fontWeightBold);
    font-size: 12px;
}

.detail-col[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.detail-col-criteria[b-d7wu06z1m2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 6px;
}

.detail-col-weight[b-d7wu06z1m2],
.detail-col-max[b-d7wu06z1m2],
.detail-col-self[b-d7wu06z1m2],
.detail-col-mgr[b-d7wu06z1m2],
.detail-col-gap[b-d7wu06z1m2] {
    justify-content: center;
    text-align: center;
}

/* ========================================
   FEEDBACK SECTION (Section 4)
   ======================================== */
.feedback-item[b-d7wu06z1m2] {
    padding: 8px;
    margin-bottom: 8px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.feedback-question[b-d7wu06z1m2] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

/* ========================================
   STAGE HISTORY TIMELINE (Section 7)
   ======================================== */
.stage-history-timeline[b-d7wu06z1m2] {
    position: relative;
    padding-left: 20px;
}

.stage-history-timeline[b-d7wu06z1m2]::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--BEC-colorNeutralStroke2);
}

.timeline-entry[b-d7wu06z1m2] {
    position: relative;
    padding-bottom: 16px;
    padding-left: 12px;
}

.timeline-entry:last-child[b-d7wu06z1m2] {
    padding-bottom: 0;
}

.timeline-dot[b-d7wu06z1m2] {
    position: absolute;
    left: -17px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--BEC-colorBrandForeground1);
    border: 2px solid var(--BEC-colorNeutralBackground1);
}

.timeline-content[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.timeline-stages[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.timeline-arrow[b-d7wu06z1m2] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.timeline-meta[b-d7wu06z1m2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.timeline-date[b-d7wu06z1m2] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2);
}

.timeline-reason[b-d7wu06z1m2] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightMedium);
}

.timeline-notes[b-d7wu06z1m2] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

.timeline-changed-by[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightMedium);
}

.timeline-changed-by i[b-d7wu06z1m2] {
    font-size: 10px;
}

.pending-approval-banner[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--BEC-colorPaletteYellowBackground2) 30%, transparent);
    border: 1px solid var(--BEC-colorPaletteYellowBorder1);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

.pending-approval-banner i[b-d7wu06z1m2] {
    color: var(--BEC-colorPaletteYellowForeground2);
}

.pending-review-banner[b-d7wu06z1m2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--BEC-colorBrandBackground2) 20%, transparent);
    border: 1px solid var(--BEC-colorBrandStroke1);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

.pending-review-banner i[b-d7wu06z1m2] {
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   PRINT EMPLOYEE INFO
   ======================================== */
.print-employee-info[b-d7wu06z1m2] {
    display: none;
}

/* ========================================
   ENHANCED PRINT STYLES — @media print
   ======================================== */
@media print {
    /* HIDE the entire background page — only the sidebar prints */
    .erp-page-container[b-d7wu06z1m2] {
        display: none !important;
    }

    /* Show the sidebar print header and footer */
    .sidebar-print-header[b-d7wu06z1m2] {
        display: block !important;
        text-align: center;
        padding: 0 0 12px 0;
        border-bottom: 2px solid #1a1a2e;
        margin-bottom: 16px;
    }

    .print-employee-info[b-d7wu06z1m2] {
        display: block !important;
        font-size: 14px;
        font-weight: 500;
        color: #444;
        margin-top: 4px;
    }

    .sidebar-print-footer[b-d7wu06z1m2] {
        display: block !important;
        margin-top: 24px;
        padding-top: 12px;
        border-top: 1px solid #999;
        text-align: center;
        page-break-inside: avoid;
    }

    .print-company-name[b-d7wu06z1m2] {
        font-size: 20px;
        font-weight: 700;
        color: #1a1a2e;
        letter-spacing: 1px;
    }

    .print-form-title[b-d7wu06z1m2] {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-top: 4px;
    }

    .print-copyright[b-d7wu06z1m2] {
        font-size: 11px;
        font-weight: 600;
        color: #333;
    }

    .print-date[b-d7wu06z1m2] {
        font-size: 10px;
        color: #666;
        margin-top: 2px;
    }

    /* Hide interactive elements */
    .sidebar-print-btn[b-d7wu06z1m2],
    .sidebar-close-btn[b-d7wu06z1m2],
    .sidebar-header-actions[b-d7wu06z1m2],
    .sidebar-footer[b-d7wu06z1m2],
    .view-loading-container[b-d7wu06z1m2] {
        display: none !important;
    }

    /* Make sidebar fill the page for printing */
    [b-d7wu06z1m2] .e-sidebar {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Hide the sidebar overlay */
    [b-d7wu06z1m2] .e-sidebar-overlay,
    [b-d7wu06z1m2] .e-overlay {
        display: none !important;
    }

    .sidebar-content[b-d7wu06z1m2] {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .sidebar-step-content[b-d7wu06z1m2] {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        padding-bottom: 0 !important;
    }

    .sidebar-header[b-d7wu06z1m2] {
        border-bottom: none;
        padding: 8px 0;
    }

    .sidebar-title[b-d7wu06z1m2] {
        display: none !important;
    }

    /* Clean printing colors */
    *[b-d7wu06z1m2] {
        color: #000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .form-value[b-d7wu06z1m2] {
        background: #f8f8f8 !important;
        border-color: #ddd !important;
    }

    /* Score Summary prominent at top */
    .score-summary-grid[b-d7wu06z1m2] {
        page-break-inside: avoid;
    }

    .score-summary-card[b-d7wu06z1m2] {
        border: 1px solid #ddd !important;
        background: #f9f9f9 !important;
    }

    /* Detailed scores table */
    .detail-category-block[b-d7wu06z1m2] {
        page-break-inside: avoid;
    }

    .detail-category-header[b-d7wu06z1m2] {
        background: #e8e8e8 !important;
        color: #333 !important;
        border-color: #ccc !important;
    }

    .detail-scores-header[b-d7wu06z1m2] {
        background: #eee !important;
    }

    .detail-grand-totals[b-d7wu06z1m2] {
        background: #e8e8e8 !important;
        border-color: #999 !important;
    }

    /* Let form sections flow naturally with page breaks */
    .form-section[b-d7wu06z1m2] {
        page-break-inside: avoid;
    }

    /* Badges preserve colors */
    .badge[b-d7wu06z1m2] {
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
        border: 1px solid #999 !important;
    }

    /* Stage history timeline */
    .stage-history-timeline[b-d7wu06z1m2] {
        page-break-inside: avoid;
    }

    .timeline-dot[b-d7wu06z1m2] {
        background: #333 !important;
    }

    .stage-history-timeline[b-d7wu06z1m2]::before {
        background: #ccc !important;
    }

    /* View details grid */
    .view-details-grid[b-d7wu06z1m2] {
        page-break-inside: avoid;
    }

    .view-detail-card[b-d7wu06z1m2] {
        border: 1px solid #ddd !important;
        page-break-inside: avoid;
    }

    /* Gap colors */
    .view-gap-positive[b-d7wu06z1m2],
    .score-gap-positive[b-d7wu06z1m2] {
        color: #107c10 !important;
        background: #e8f5e8 !important;
    }

    .view-gap-negative[b-d7wu06z1m2],
    .score-gap-negative[b-d7wu06z1m2] {
        color: #d13438 !important;
        background: #fde8e8 !important;
    }

    /* Page setup */
    @page {
        size: A4;
        margin: 15mm 10mm;

        @bottom-center {
            content: counter(page) " / " counter(pages);
            font-size: 10px;
            color: #666;
        }
    }
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Evaluations/FillFormevaluation/FillFormevaluation.razor.rz.scp.css */
/* ========================================
   FILL EVALUATION FORM PAGE - COMPACT LAYOUT
   100% Identical Header/Toolbar to All Evaluations
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   Fixed height to enable internal scrolling
   ======================================== */
.erp-page-container[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--BEC-dashboard-header-height) - 16px);
    max-height: calc(100vh - var(--BEC-dashboard-header-height) - 16px);
    position: relative;
    overflow: hidden;
}

/* ========================================
   PAGE HEADER - WITH EMPLOYEE INFO
   STICKY: Stays at top when scrolling
   ======================================== */
.erp-page-header[b-jv58okxham] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
    flex-shrink: 0;
}

.header-left[b-jv58okxham] {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Employee Info Header (Horizontal Layout) */
.employee-info-header[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-item-header[b-jv58okxham] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.info-item-header label[b-jv58okxham] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-item-header span[b-jv58okxham] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightMedium);
}

.header-divider[b-jv58okxham] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

.page-title[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-jv58okxham] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-jv58okxham] {
    transform: scale(0.98);
}

.header-right[b-jv58okxham] {
    flex-shrink: 0;
}

/* ========================================
   PAGE CONTENT - SCROLLABLE AREA
   This is where questions scroll vertically
   NO TOP PADDING - to eliminate gap between toolbar and progress bar
   ======================================== */
.erp-page-content[b-jv58okxham] {
    flex: 1;
    padding: 0 20px 30px 20px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    /* Custom scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--BEC-colorNeutralStroke1) var(--BEC-colorNeutralBackground2);
}

/* Custom scrollbar for webkit browsers */
.erp-page-content[b-jv58okxham]::-webkit-scrollbar {
    width: 8px;
}

.erp-page-content[b-jv58okxham]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 4px;
}

.erp-page-content[b-jv58okxham]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke1);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.erp-page-content[b-jv58okxham]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   LISTING MODE OVERRIDES
   ======================================== */
.listing-mode .erp-page-content[b-jv58okxham] {
    padding: 10px 20px 20px 20px;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ========================================
   STATS CONTAINER (Listing Mode Header)
   ======================================== */
.stats-container[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-jv58okxham] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-jv58okxham] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-jv58okxham] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-jv58okxham] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

.stat-pending[b-jv58okxham] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2) !important;
}

.stat-submitted[b-jv58okxham] {
    color: rgba(0, 128, 128, 1) !important;
}

.stat-completed[b-jv58okxham] {
    color: #006400 !important;
}

/* ========================================
   FILTER BAR
   ======================================== */
.filter-bar[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 24px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.filter-group[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-label[b-jv58okxham] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    white-space: nowrap;
}

[b-jv58okxham] .filter-dropdown.e-input-group,
[b-jv58okxham] .filter-dropdown .e-input-group {
    height: 26px !important;
    min-height: 26px !important;
    font-size: 12px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

[b-jv58okxham] .filter-dropdown .e-input {
    font-size: 12px !important;
    padding: 2px 6px !important;
}

.filter-actions[b-jv58okxham] {
    margin-left: auto;
}

.filter-clear-btn[b-jv58okxham] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-clear-btn:hover[b-jv58okxham] {
    border-color: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
}

.filter-clear-btn i[b-jv58okxham] {
    font-size: 10px;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to All Evaluations
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT)
   STICKY: Stays below header when scrolling */
[b-jv58okxham] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-jv58okxham] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-jv58okxham] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-jv58okxham] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-jv58okxham] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-jv58okxham] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-jv58okxham] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-jv58okxham] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-jv58okxham] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-jv58okxham] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-jv58okxham] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* Search textbox in toolbar */
[b-jv58okxham] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-jv58okxham] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-jv58okxham] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   GRID STYLING — ROUNDED CORNERS & SELECTED ROW
   ======================================== */
[b-jv58okxham] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

[b-jv58okxham] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-jv58okxham] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

[b-jv58okxham] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-jv58okxham] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-jv58okxham] .e-grid .e-row {
    height: 32px !important;
}

[b-jv58okxham] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

[b-jv58okxham] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Selected Row Highlighting */
[b-jv58okxham] .e-grid .e-row.e-selectionbackground,
[b-jv58okxham] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-jv58okxham] .e-grid .e-row.e-selectionbackground td:first-child,
[b-jv58okxham] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

[b-jv58okxham] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

/* ========================================
   CELL TEMPLATES
   ======================================== */
.cell-stacked[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cell-name[b-jv58okxham] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    font-size: 12px;
    line-height: 1.2;
}

.cell-code[b-jv58okxham] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    line-height: 1.2;
}

.cell-inline[b-jv58okxham] {
    display: inline-block;
    font-size: 12px;
    line-height: 1.2;
    color: var(--BEC-colorNeutralForeground1);
}

.cell-version[b-jv58okxham] {
    display: inline-block;
    padding: 1px 5px;
    margin-left: 4px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    vertical-align: middle;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-jv58okxham] {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-jv58okxham] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-jv58okxham] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-jv58okxham] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-secondary[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground2);
}

.badge-info[b-jv58okxham] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-submitted[b-jv58okxham] {
    background: rgba(0, 128, 128, 0.12);
    color: #008080;
}

.badge-completed[b-jv58okxham] {
    background: rgba(0, 100, 0, 0.12);
    color: #006400;
}

.badge-danger[b-jv58okxham] {
    background: rgba(209, 52, 56, 0.12);
    color: #d13438;
}

/* ========================================
   ACTION BUTTONS (Listing Mode Grid)
   ======================================== */
.btn-action[b-jv58okxham] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    background: transparent;
}

.btn-action i[b-jv58okxham] {
    font-size: 10px;
}

.btn-action-fill[b-jv58okxham] {
    border-color: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorBrandForeground1);
}

.btn-action-fill:hover[b-jv58okxham] {
    background: var(--BEC-colorBrandForeground1);
    color: #fff;
}

.btn-action-view[b-jv58okxham] {
    border-color: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorBrandForeground1);
}

.btn-action-view:hover[b-jv58okxham] {
    background: var(--BEC-colorBrandForeground1);
    color: #fff;
}

.btn-action-view-completed[b-jv58okxham] {
    border-color: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.btn-action-view-completed:hover[b-jv58okxham] {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: #fff;
}

.action-group[b-jv58okxham] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.approval-status-text[b-jv58okxham] {
    font-size: 10px;
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    font-weight: var(--BEC-fontWeightMedium);
    white-space: nowrap;
}

/* ========================================
   APPROVAL STATUS CELL (Listing Mode)
   ======================================== */
.approval-status-cell[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 100%;
    overflow: hidden;
    cursor: default;
    padding: 2px 0;
}

.approval-step[b-jv58okxham] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.approval-approver[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.approval-person-icon[b-jv58okxham] {
    flex-shrink: 0;
    font-size: 9px;
    color: var(--BEC-colorBrandForeground2);
}

.due-date-cell[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.overdue-badge[b-jv58okxham] {
    margin-left: 4px;
    animation: pulse-overdue-b-jv58okxham 2s ease-in-out infinite;
}

@keyframes pulse-overdue-b-jv58okxham {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-jv58okxham] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-jv58okxham 1s linear infinite;
}

@keyframes spin-b-jv58okxham {
    to { transform: rotate(360deg); }
}

.loading-container p[b-jv58okxham] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-jv58okxham] {
    font-size: 48px;
}

.error-container p[b-jv58okxham] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   COMPACT STATS (Form Mode — Above Progress Bar)
   ======================================== */
.compact-stats[b-jv58okxham] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 24px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2);
    flex-shrink: 0;
}

.compact-stat[b-jv58okxham] {
    font-weight: var(--BEC-fontWeightMedium);
}

.stat-separator[b-jv58okxham] {
    color: var(--BEC-colorNeutralStroke2);
    font-size: 8px;
}

.compact-stat-score[b-jv58okxham] {
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   PROGRESS BAR (Form Mode)
   ======================================== */
.progress-container[b-jv58okxham] {
    padding: 0 24px 8px 24px;
    flex-shrink: 0;
}

.progress-bar[b-jv58okxham] {
    height: 4px;
    background: var(--BEC-colorNeutralStroke2);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill[b-jv58okxham] {
    height: 100%;
    background: var(--BEC-colorBrandBackground);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* ========================================
   WORKFLOW APPROVAL CHAIN (Form Mode)
   ======================================== */
.workflow-chain[b-jv58okxham] {
    margin: 8px 24px;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    flex-shrink: 0;
}

.workflow-chain-header[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.workflow-chain-header i[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 13px;
}

.workflow-steps[b-jv58okxham] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    flex-wrap: wrap;
}

.workflow-step[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--BEC-borderRadiusSmall);
    position: relative;
}

.workflow-step.step-completed[b-jv58okxham] {
    background: var(--BEC-colorPaletteGreenBackground2);
}

.workflow-step.step-current[b-jv58okxham] {
    background: var(--BEC-colorBrandBackground2);
}

.workflow-step.step-pending[b-jv58okxham] {
    background: transparent;
    opacity: 0.6;
}

.workflow-step.step-rejected[b-jv58okxham] {
    background: rgba(209, 52, 56, 0.08);
}

.step-icon-wrapper[b-jv58okxham] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.step-completed .step-icon-wrapper[b-jv58okxham] {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: #fff;
}

.step-current .step-icon-wrapper[b-jv58okxham] {
    background: var(--BEC-colorBrandForeground1);
    color: #fff;
}

.step-pending .step-icon-wrapper[b-jv58okxham] {
    background: var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground3);
}

.step-rejected .step-icon-wrapper[b-jv58okxham] {
    background: var(--BEC-colorPaletteRedForeground1);
    color: #fff;
}

.step-info[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.step-name[b-jv58okxham] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.step-user[b-jv58okxham] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground2);
}

.step-date[b-jv58okxham] {
    font-size: 9px;
    color: var(--BEC-colorNeutralForeground3);
}

.step-date.pending[b-jv58okxham] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    font-style: italic;
}

.step-connector[b-jv58okxham] {
    width: 24px;
    height: 2px;
    background: var(--BEC-colorNeutralStroke2);
    margin: 0 4px;
    align-self: center;
}

/* ========================================
   QUESTIONS LIST (Form Mode)
   ======================================== */
.questions-list[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 16px;
}

.category-tile[b-jv58okxham] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-left: 3px solid var(--BEC-colorBrandBackground);
    margin-top: 12px;
    margin-bottom: 4px;
    border-radius: 0 var(--BEC-borderRadiusSmall) var(--BEC-borderRadiusSmall) 0;
}

.category-name[b-jv58okxham] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.category-meta[b-jv58okxham] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.question-row[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    transition: background 0.15s ease;
}

.question-row:hover[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground1Hover);
}

.question-row.answered[b-jv58okxham] {
    border-left: 3px solid var(--BEC-colorPaletteGreenForeground2);
}

.question-row.unanswered[b-jv58okxham] {
    border-left: 3px solid var(--BEC-colorNeutralStroke2);
}

.q-number[b-jv58okxham] {
    min-width: 32px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    flex-shrink: 0;
}

.q-text[b-jv58okxham] {
    flex: 1;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.4;
}

.q-meta[b-jv58okxham] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Integrated two-tone pill badge */
.scale-badge-wrap[b-jv58okxham] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.score-pill[b-jv58okxham] {
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    font-size: 10px;
    font-weight: 600;
    height: 20px;
    line-height: 20px;
}

.score-pill .normal-part[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground3, #e8eaed);
    color: var(--BEC-colorNeutralForeground2, #4a4f5e);
    padding: 0 8px;
    height: 100%;
    display: flex;
    align-items: center;
}

.score-pill .pill-divider[b-jv58okxham] {
    width: 1px;
    height: 100%;
    background: var(--BEC-colorNeutralStroke2, #d0d3da);
}

.score-pill .over-part[b-jv58okxham] {
    background: linear-gradient(135deg, #ede9fe 0%, #f3e8ff 100%);
    color: #7c3aed;
    padding: 0 8px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 3px;
}

.score-pill .over-part .star[b-jv58okxham] {
    color: #d97706;
    font-size: 9px;
}

/* Info icon with hover tooltip */
.info-icon[b-jv58okxham] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3, #8a8fa0);
    cursor: help;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.info-tooltip[b-jv58okxham] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--BEC-colorNeutralBackground1, #fff);
    color: var(--BEC-colorNeutralForeground1, #1a1a2e);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d4d7de);
    border-radius: var(--BEC-borderRadiusMedium, 6px);
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    width: 240px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.info-icon:hover .info-tooltip[b-jv58okxham],
.info-icon:focus .info-tooltip[b-jv58okxham] {
    visibility: visible;
    opacity: 1;
}

.q-input[b-jv58okxham] {
    flex-shrink: 0;
}

[b-jv58okxham] .score-input-compact.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    min-height: 28px !important;
}

[b-jv58okxham] .score-input-compact .e-input {
    font-size: 12px !important;
    text-align: center !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Employee Self-Score (read-only reference for manager) */
.q-self-score[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 4px 8px;
    background: rgba(0, 128, 128, 0.08);
    border: 1px solid rgba(0, 128, 128, 0.2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 12px;
}

.self-score-label[b-jv58okxham] {
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightRegular);
}

.self-score-value[b-jv58okxham] {
    color: #0e7c7b;
    font-weight: var(--BEC-fontWeightSemibold);
    min-width: 20px;
    text-align: center;
}

/* Question Item Wrapper */
.question-item[b-jv58okxham] {
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.question-item .question-row[b-jv58okxham] {
    border-bottom: none;
}

/* ========================================
   INLINE COMPACT COMMENT STRIP
   ======================================== */

/* 💬 Comment toggle button */
.comment-toggle[b-jv58okxham] {
    width: 32px;
    height: 32px;
    border-radius: var(--BEC-borderRadiusSmall);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground3);
    flex-shrink: 0;
    transition: all 0.15s ease;
    position: relative;
}

.comment-toggle:hover[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground1Hover);
    color: var(--BEC-colorBrandForeground1);
}

.comment-toggle.has-comments[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
}

.comment-toggle.has-comments[b-jv58okxham]::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    background: var(--BEC-colorBrandForeground1);
    border-radius: 50%;
}

.comment-toggle.active[b-jv58okxham] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandForeground1);
}

/* Comment strip — hidden by default */
.comment-strip[b-jv58okxham] {
    display: none;
    padding: 0 16px 10px 16px;
    animation: slideDown-b-jv58okxham 0.2s ease;
}

.comment-strip.open[b-jv58okxham] {
    display: block;
}

@keyframes slideDown-b-jv58okxham {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.comment-strip-inner[b-jv58okxham] {
    display: flex;
    gap: 12px;
    padding: 10px 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.comment-col[b-jv58okxham] {
    flex: 1;
    min-width: 0;
}

.comment-col-label[b-jv58okxham] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.comment-col-label.emp[b-jv58okxham] {
    color: var(--BEC-colorNeutralForeground3);
}

.comment-col-label.mgr[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
}

.emp-comment[b-jv58okxham] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.4;
    font-style: italic;
    padding: 6px 10px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusSmall);
    min-height: 32px;
}

.emp-comment.empty[b-jv58okxham] {
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

.mgr-comment-input[b-jv58okxham] {
    width: 100%;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.4;
    padding: 6px 10px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-colorNeutralBackground1);
    resize: none;
    min-height: 32px;
    font-family: inherit;
}

.mgr-comment-input:focus[b-jv58okxham] {
    outline: none;
    border-color: var(--BEC-colorBrandForeground1);
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.15);
}

.comment-divider[b-jv58okxham] {
    width: 1px;
    background: var(--BEC-colorNeutralStroke2);
    flex-shrink: 0;
}

/* Employee Self-Score stat in compact bar */
.compact-stat-self-score[b-jv58okxham] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: #0e7c7b;
}

/* ========================================
   STRENGTHS & WEAKNESSES SECTION (Form Mode)
   ======================================== */
.sw-section[b-jv58okxham] {
    margin-top: 16px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
}

.sw-section-header[b-jv58okxham] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.sw-section-title-row[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sw-section-title-row i[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
}

.sw-title-text[b-jv58okxham] {
    font-weight: var(--BEC-fontWeightSemibold);
}

.sw-hint[b-jv58okxham] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

.sw-category[b-jv58okxham] {
    padding: 12px 16px;
}

.sw-category + .sw-category[b-jv58okxham] {
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.sw-category-header[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.sw-category-header.strengths[b-jv58okxham] {
    color: var(--BEC-colorPaletteGreenForeground2);
}

.sw-category-header.strengths i[b-jv58okxham] {
    color: var(--BEC-colorPaletteGreenForeground2);
}

.sw-category-header.weaknesses[b-jv58okxham] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.sw-category-header.weaknesses i[b-jv58okxham] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.sw-badge[b-jv58okxham] {
    font-size: 9px;
    padding: 1px 6px;
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-weight: var(--BEC-fontWeightSemibold);
}

.sw-chips-container[b-jv58okxham] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sw-chip[b-jv58okxham] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-colorNeutralBackground1);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sw-chip:hover:not(.disabled)[b-jv58okxham] {
    border-color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
}

.sw-chip.selected[b-jv58okxham] {
    border-color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.sw-chip.disabled[b-jv58okxham] {
    opacity: 0.4;
    cursor: not-allowed;
}

.sw-chip-code[b-jv58okxham] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    font-size: 10px;
}

.sw-chip.selected .sw-chip-code[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
}

.sw-chip-text[b-jv58okxham] {
    color: var(--BEC-colorNeutralForeground1);
}

.sw-chip.selected .sw-chip-text[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
}

.sw-chip-check[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 10px;
}

/* ========================================
   EVALUATOR FEEDBACK SECTION (Form Mode)
   ======================================== */
.evaluator-feedback-section[b-jv58okxham] {
    margin-top: 16px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
}

.feedback-section-header[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.feedback-section-header i[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
}

.feedback-field[b-jv58okxham] {
    padding: 12px 16px;
}

.feedback-field + .feedback-field[b-jv58okxham] {
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.feedback-label[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
}

.feedback-label i[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
}

[b-jv58okxham] .feedback-input.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

[b-jv58okxham] .feedback-input .e-input {
    font-size: 12px !important;
    line-height: 1.5 !important;
}

.feedback-char-count[b-jv58okxham] {
    text-align: right;
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 4px;
}

[b-jv58okxham] .feedback-dropdown.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    min-height: 30px !important;
}

[b-jv58okxham] .feedback-dropdown .e-input {
    font-size: 12px !important;
}

/* ========================================
   EMPLOYEE ACKNOWLEDGMENT SECTION (Read-Only)
   ======================================== */
.acknowledgment-section[b-jv58okxham] {
    margin-top: 16px;
    border: 1px solid rgba(135, 100, 184, 0.3);
    border-left: 4px solid #8764B8;
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
}

.acknowledgment-section-header[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(135, 100, 184, 0.08);
    border-bottom: 1px solid rgba(135, 100, 184, 0.15);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: #6B4FA0;
}

.acknowledgment-section-header i[b-jv58okxham] {
    color: #8764B8;
}

.acknowledgment-date-badge[b-jv58okxham] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightRegular);
    color: var(--BEC-colorNeutralForeground3);
}

.acknowledgment-date-badge i[b-jv58okxham] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.acknowledgment-content[b-jv58okxham] {
    padding: 12px 16px;
}

.acknowledgment-quote[b-jv58okxham] {
    margin: 0;
    padding: 10px 14px;
    background: rgba(135, 100, 184, 0.04);
    border-left: 3px solid #8764B8;
    border-radius: 0 var(--BEC-borderRadiusSmall) var(--BEC-borderRadiusSmall) 0;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
    font-style: italic;
    white-space: pre-wrap;
}

/* ========================================
   NO QUESTIONS STATE
   ======================================== */
.no-questions[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.no-questions i[b-jv58okxham] {
    font-size: 48px;
}

.no-questions p[b-jv58okxham] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   CERTIFICATION DIALOG (Submit)
   ======================================== */
[b-jv58okxham] .certification-dialog .e-dlg-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 16px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-jv58okxham] .certification-dialog .e-dlg-header i {
    color: var(--BEC-colorBrandForeground1) !important;
}

.certification-content[b-jv58okxham] {
    padding: 0;
}

.certification-summary[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    padding: 12px 16px;
    margin-bottom: 16px;
}

.summary-row[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
}

.summary-label[b-jv58okxham] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    min-width: 90px;
}

.summary-value[b-jv58okxham] {
    color: var(--BEC-colorNeutralForeground1);
}

.certification-warning[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.certification-warning i[b-jv58okxham] {
    font-size: 16px;
    flex-shrink: 0;
}

.certification-statement[b-jv58okxham] {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    border-left: 3px solid var(--BEC-colorBrandBackground);
    margin-bottom: 16px;
}

.certification-icon[b-jv58okxham] {
    flex-shrink: 0;
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
}

.certification-text[b-jv58okxham] {
    font-size: 12px;
    line-height: 1.6;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.certification-checkbox[b-jv58okxham] {
    padding: 8px 0;
}

[b-jv58okxham] .certification-check .e-label {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* ========================================
   APPROVE / REJECT DIALOGS
   ======================================== */
.approve-dialog-content p[b-jv58okxham],
.reject-dialog-content p[b-jv58okxham] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 16px;
}

.approval-summary[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    padding: 12px 16px;
    margin-bottom: 16px;
}

.summary-item[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
}

.summary-item label[b-jv58okxham] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    min-width: 70px;
}

.summary-item span[b-jv58okxham] {
    color: var(--BEC-colorNeutralForeground1);
}

.warning-message[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-top: 12px;
    font-size: 12px;
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.warning-message i[b-jv58okxham] {
    font-size: 14px;
    flex-shrink: 0;
}

.form-group[b-jv58okxham] {
    margin-top: 16px;
}

.form-label[b-jv58okxham] {
    display: block;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
}

.form-label.required[b-jv58okxham]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

/* ========================================
   SIDEBAR / HELP WIZARD
   ======================================== */
.sidebar-content[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-header[b-jv58okxham] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-jv58okxham] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-jv58okxham] {
    background: var(--BEC-colorNeutralBackground1Hover);
}

.sidebar-close-btn i[b-jv58okxham] {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground2);
}

.sidebar-step-content[b-jv58okxham] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px;
    padding-bottom: 80px;
    position: relative;
}

.wizard-step[b-jv58okxham] {
    max-width: 100%;
}

.step-icon[b-jv58okxham] {
    text-align: center;
    margin-bottom: 16px;
}

.sidebar-step-content .step-title[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
}

.sidebar-step-content .step-title i[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
}

.step-description[b-jv58okxham] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 24px 0;
}

.form-section[b-jv58okxham] {
    margin-bottom: 24px;
}

.section-title[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 12px 0;
}

.section-title i[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1);
}

.sidebar-footer[b-jv58okxham] {
    position: sticky;
    bottom: 0;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    z-index: 50;
}

.footer-buttons[b-jv58okxham] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── HR Proxy Banner ── */
.proxy-eval-banner[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--BEC-colorBrandBackground1, #eff6ff);
    border-left: 4px solid var(--BEC-colorBrandStroke1, #3b82f6);
    color: var(--BEC-colorNeutralForeground1);
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
}

.proxy-eval-banner i[b-jv58okxham] {
    color: var(--BEC-colorBrandForeground1, #2563eb);
    font-size: 16px;
    flex-shrink: 0;
}

/* ── Returned for Correction Banner ── */
.returned-banner[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    background: rgba(230, 126, 34, 0.08);
    border-left: 4px solid #d35400;
    color: var(--BEC-colorNeutralForeground1);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.returned-banner-header[b-jv58okxham] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d35400;
    font-size: 13px;
}

.returned-banner-header i[b-jv58okxham] {
    font-size: 15px;
    flex-shrink: 0;
}

.returned-banner-reason[b-jv58okxham] {
    font-style: italic;
    color: #a04000;
    padding-left: 23px;
    font-size: 12.5px;
}

.returned-banner-instruction[b-jv58okxham] {
    padding-left: 23px;
    color: var(--BEC-colorNeutralForeground2, #555);
    font-size: 12.5px;
}

/* Badge styles for listing mode */
.badge-returned[b-jv58okxham] {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightBold, 700);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: var(--BEC-borderRadiusSmall, 2px);
    background: rgba(230, 126, 34, 0.15);
    color: #d35400;
}

/* Revise & Resubmit button in listing mode */
.btn-action-returned[b-jv58okxham] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--BEC-borderRadiusSmall, 2px);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid #d35400;
    background: transparent;
    white-space: nowrap;
    color: #d35400;
}

.btn-action-returned:hover[b-jv58okxham] {
    background: #d35400;
    color: #fff;
}

/* ============================================
   RATING SCALE POPUP TABLE
   ============================================ */
[b-jv58okxham] .rating-scale-dialog {
    max-height: 92vh !important;
}

[b-jv58okxham] .rating-scale-dialog .e-dlg-header-content {
    background: #003d6b;
    padding: 10px 16px;
}

[b-jv58okxham] .rating-scale-dialog .e-dlg-header {
    color: white !important;
    font-size: 14px;
}

[b-jv58okxham] .rating-scale-dialog .e-icon-dlg-close {
    color: white;
}

[b-jv58okxham] .rating-scale-dialog .e-dlg-content {
    padding: 0;
    overflow: hidden;
}

.rating-scale-table-container[b-jv58okxham] {
    overflow: hidden;
}

.rating-scale-table[b-jv58okxham] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    line-height: 1.35;
    table-layout: fixed;
}

.rating-scale-table thead tr[b-jv58okxham] {
    background: #003d6b;
    color: white;
}

.rating-scale-table th[b-jv58okxham] {
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
}

.rating-scale-table td[b-jv58okxham] {
    padding: 8px 10px;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: top;
    color: #333;
    word-wrap: break-word;
}

.rating-rate[b-jv58okxham] {
    font-weight: 600;
    white-space: nowrap;
    color: #003d6b;
    font-size: 11.5px;
}

.rating-group-cell[b-jv58okxham] {
    text-align: center;
    vertical-align: middle;
    border-right: 3px solid;
    padding: 6px !important;
    width: 70px;
}

.rating-group-label[b-jv58okxham] {
    font-size: 11px;
    line-height: 1.3;
    color: #555;
}

.rating-group-high[b-jv58okxham] {
    border-right-color: #2e7d32;
    background: #e8f5e9;
}

.rating-group-normal[b-jv58okxham] {
    border-right-color: #1565c0;
    background: #e3f2fd;
}

.rating-group-improve[b-jv58okxham] {
    border-right-color: #e65100;
    background: #fff3e0;
}

.rating-row.rating-outstanding td:not(.rating-group-cell)[b-jv58okxham] { background: #f1f8e9; }
.rating-row.rating-exceed td:not(.rating-group-cell)[b-jv58okxham] { background: #f1f8e9; }
.rating-row.rating-meet td:not(.rating-group-cell)[b-jv58okxham] { background: #e3f2fd; }
.rating-row.rating-partial td:not(.rating-group-cell)[b-jv58okxham] { background: #fff8e1; }
.rating-row.rating-notmeet td:not(.rating-group-cell)[b-jv58okxham] { background: #fce4ec; }

[b-jv58okxham] .rating-scale-dialog .e-footer-content {
    padding: 8px 16px;
    border-top: 1px solid #e0e0e0;
}

/* ============================================
   RECOMMENDED ACTIONS DROPDOWN WITH HINTS
   ============================================ */
.recommended-action-item[b-jv58okxham] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
}

.recommended-action-name[b-jv58okxham] {
    font-weight: 600;
    font-size: 13px;
    color: #1a1a1a;
}

.recommended-action-hint[b-jv58okxham] {
    font-size: 11.5px;
    color: #666;
    font-style: italic;
    line-height: 1.4;
}

[b-jv58okxham] .recommended-action-dropdown .e-dropdownbase .e-list-item {
    height: auto !important;
    line-height: normal !important;
    padding: 6px 12px;
}

/* ========================================
   PRINT-ONLY ELEMENTS (hidden on screen)
   ======================================== */
.print-only-header[b-jv58okxham],
.print-only-footer[b-jv58okxham] {
    display: none;
}

/* ========================================
   PRINT STYLES — @media print
   ======================================== */
@media print {
    /* Show print header and footer */
    .print-only-header[b-jv58okxham],
    .print-only-footer[b-jv58okxham] {
        display: block !important;
    }

    .print-only-header[b-jv58okxham] {
        text-align: center;
        padding: 0 0 12px 0;
        border-bottom: 2px solid #1a1a2e;
        margin-bottom: 16px;
    }

    .print-company-name[b-jv58okxham] {
        font-size: 20px;
        font-weight: 700;
        color: #1a1a2e;
        letter-spacing: 1px;
    }

    .print-form-title[b-jv58okxham] {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-top: 4px;
    }

    .print-meta-grid[b-jv58okxham] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 24px;
        text-align: left;
        margin-top: 10px;
        font-size: 11px;
    }

    .print-meta-label[b-jv58okxham] {
        font-weight: 700;
        color: #1a1a2e;
    }

    .print-only-footer[b-jv58okxham] {
        margin-top: 24px;
        padding-top: 12px;
        border-top: 1px solid #999;
        text-align: center;
        page-break-inside: avoid;
    }

    .print-footer-line[b-jv58okxham] {
        display: none;
    }

    .print-copyright[b-jv58okxham] {
        font-size: 11px;
        font-weight: 600;
        color: #333;
    }

    .print-date[b-jv58okxham] {
        font-size: 10px;
        color: #666;
        margin-top: 2px;
    }

    /* Remove fixed height and overflow so full content prints */
    .erp-page-container[b-jv58okxham] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .erp-page-content[b-jv58okxham] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Hide non-printable UI: toolbar, filter bar, header buttons, dialogs, sidebar */
    [b-jv58okxham] .e-toolbar,
    .filter-bar[b-jv58okxham],
    .header-right[b-jv58okxham],
    .help-icon-btn[b-jv58okxham],
    [b-jv58okxham] .e-dialog,
    [b-jv58okxham] .e-sidebar,
    [b-jv58okxham] .e-overlay,
    .listing-mode[b-jv58okxham],
    .proxy-eval-banner[b-jv58okxham],
    .workflow-chain[b-jv58okxham],
    .comment-toggle[b-jv58okxham],
    .btn-action[b-jv58okxham],
    .btn-action-fill[b-jv58okxham],
    .btn-action-view[b-jv58okxham] {
        display: none !important;
    }

    /* Ensure progress bar and stats print cleanly */
    .compact-stats[b-jv58okxham] {
        padding: 4px 0;
        font-size: 10px;
    }

    .progress-container[b-jv58okxham] {
        padding: 0 0 8px 0;
    }

    .progress-bar[b-jv58okxham] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .progress-fill[b-jv58okxham] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Category tiles */
    .category-tile[b-jv58okxham] {
        background: #f0f0f0 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
        padding: 6px 12px;
        margin: 8px 0 4px 0;
        page-break-inside: avoid;
    }

    /* Question rows */
    .question-row[b-jv58okxham],
    .question-item[b-jv58okxham] {
        page-break-inside: avoid;
        padding: 4px 8px;
    }

    /* Score inputs: show as plain text */
    [b-jv58okxham] .e-numeric .e-input,
    [b-jv58okxham] .score-input-compact .e-input {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        font-weight: 600;
    }

    /* Textbox inputs: show as plain text */
    [b-jv58okxham] .e-textbox,
    [b-jv58okxham] .feedback-input .e-input {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Comment strips: expand all for printing */
    .comment-strip[b-jv58okxham] {
        max-height: none !important;
        overflow: visible !important;
    }

    .comment-strip.open[b-jv58okxham] {
        max-height: none !important;
    }

    /* Strengths & Development section */
    .sw-section[b-jv58okxham] {
        page-break-inside: avoid;
    }

    .sw-chip.selected[b-jv58okxham] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
        border: 1px solid #333 !important;
    }

    .sw-chip:not(.selected)[b-jv58okxham] {
        opacity: 0.4;
    }

    /* Evaluator feedback section */
    .evaluator-feedback-section[b-jv58okxham] {
        page-break-inside: avoid;
    }

    /* Badges: preserve colors */
    .badge[b-jv58okxham] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Page setup */
    @page {
        size: A4;
        margin: 15mm 10mm;
    }
}

/* Arabic question text */
.q-text-arabic[b-jv58okxham] {
    direction: rtl;
    text-align: right;
    font-size: 0.9em;
    color: var(--BEC-TextSecondary, #555);
    margin-top: 4px;
    font-style: italic;
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Evaluations/FillSelfAppraisal/FillSelfAppraisal.razor.rz.scp.css */
/* ========================================
   FILL SELF-APPRAISAL PAGE — COMPACT LAYOUT
   Mirrors FillFormevaluation single-line row design
   ======================================== */

/* ========================================
   PAGE CONTAINER
   ======================================== */
.erp-page-container[b-gvjn9bbmhw] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--BEC-dashboard-header-height, 48px) - 16px);
    max-height: calc(100vh - var(--BEC-dashboard-header-height, 48px) - 16px);
    position: relative;
    overflow: hidden;
}

/* ========================================
   PAGE HEADER — STICKY
   ======================================== */
.erp-page-header[b-gvjn9bbmhw] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    flex-shrink: 0;
}

.header-left[b-gvjn9bbmhw] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-gvjn9bbmhw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-gvjn9bbmhw] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Employee Info Header */
.employee-info-header[b-gvjn9bbmhw] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
}

.info-item-header[b-gvjn9bbmhw] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.info-item-header label[b-gvjn9bbmhw] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-item-header span[b-gvjn9bbmhw] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: var(--BEC-fontWeightMedium);
}

.header-divider[b-gvjn9bbmhw] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* Badge */
.badge-selfappraisal[b-gvjn9bbmhw] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

/* ========================================
   COMPACT STATS & PROGRESS BAR
   ======================================== */

/* ── Read-only banner ── */
.readonly-banner[b-gvjn9bbmhw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 0 24px 8px;
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.readonly-banner i[b-gvjn9bbmhw] {
    font-size: 14px;
}

.compact-stats[b-gvjn9bbmhw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 24px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground2);
    flex-shrink: 0;
}

.compact-stat[b-gvjn9bbmhw] {
    font-weight: var(--BEC-fontWeightMedium);
}

.compact-stat-score[b-gvjn9bbmhw] {
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
}

.result-badge[b-gvjn9bbmhw] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
    letter-spacing: 0.3px;
}

.stat-separator[b-gvjn9bbmhw] {
    color: var(--BEC-colorNeutralStroke2);
    font-size: 8px;
}

.progress-container[b-gvjn9bbmhw] {
    padding: 0 24px 8px 24px;
    flex-shrink: 0;
}

.progress-bar[b-gvjn9bbmhw] {
    height: 4px;
    background: var(--BEC-colorNeutralStroke2);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill[b-gvjn9bbmhw] {
    height: 100%;
    background: var(--BEC-colorBrandBackground);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* ========================================
   PAGE CONTENT — SCROLLABLE
   ======================================== */
.erp-page-content[b-gvjn9bbmhw] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 20px 30px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--BEC-colorNeutralStroke1) var(--BEC-colorNeutralBackground2);
}

.erp-page-content[b-gvjn9bbmhw]::-webkit-scrollbar {
    width: 8px;
}

.erp-page-content[b-gvjn9bbmhw]::-webkit-scrollbar-track {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: 4px;
}

.erp-page-content[b-gvjn9bbmhw]::-webkit-scrollbar-thumb {
    background: var(--BEC-colorNeutralStroke1);
    border-radius: 4px;
}

.erp-page-content[b-gvjn9bbmhw]::-webkit-scrollbar-thumb:hover {
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   LOADING / ERROR / EMPTY STATES
   ======================================== */
.loading-container[b-gvjn9bbmhw],
.error-container[b-gvjn9bbmhw],
.empty-container[b-gvjn9bbmhw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorNeutralForeground3);
}

.spinner[b-gvjn9bbmhw] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-gvjn9bbmhw 1s linear infinite;
}

@keyframes spin-b-gvjn9bbmhw {
    to { transform: rotate(360deg); }
}

.loading-container p[b-gvjn9bbmhw] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.error-container i[b-gvjn9bbmhw] {
    font-size: 32px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.empty-container i[b-gvjn9bbmhw] {
    font-size: 32px;
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   TOOLBAR — Sticky below header
   ======================================== */
[b-gvjn9bbmhw] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    height: 32px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-gvjn9bbmhw] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-gvjn9bbmhw] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-gvjn9bbmhw] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-gvjn9bbmhw] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-gvjn9bbmhw] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-gvjn9bbmhw] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-gvjn9bbmhw] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-gvjn9bbmhw] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-gvjn9bbmhw] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   QUESTIONS LIST — Compact single-line rows
   Matches FillFormevaluation layout exactly
   ======================================== */
.questions-list[b-gvjn9bbmhw] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 16px;
}

/* Category Tile — left-border accent */
.category-tile[b-gvjn9bbmhw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-left: 3px solid var(--BEC-colorBrandBackground);
    margin-top: 12px;
    margin-bottom: 4px;
    border-radius: 0 var(--BEC-borderRadiusSmall) var(--BEC-borderRadiusSmall) 0;
}

.category-name[b-gvjn9bbmhw] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.category-meta[b-gvjn9bbmhw] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Question Row — single-line, compact */
.question-row[b-gvjn9bbmhw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    transition: background 0.15s ease;
}

.question-row:hover[b-gvjn9bbmhw] {
    background: var(--BEC-colorNeutralBackground1Hover);
}

.question-row.answered[b-gvjn9bbmhw] {
    border-left: 3px solid var(--BEC-colorPaletteGreenForeground2);
}

.question-row.unanswered[b-gvjn9bbmhw] {
    border-left: 3px solid var(--BEC-colorNeutralStroke2);
}

/* Question Number */
.q-number[b-gvjn9bbmhw] {
    min-width: 32px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    flex-shrink: 0;
}

/* Question Text */
.q-text[b-gvjn9bbmhw] {
    flex: 1;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.4;
}

/* Score Range Meta */
.q-meta[b-gvjn9bbmhw] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Integrated two-tone pill badge */
.scale-badge-wrap[b-gvjn9bbmhw] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.score-pill[b-gvjn9bbmhw] {
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    font-size: 10px;
    font-weight: 600;
    height: 20px;
    line-height: 20px;
}

.score-pill .normal-part[b-gvjn9bbmhw] {
    background: var(--BEC-colorNeutralBackground3, #e8eaed);
    color: var(--BEC-colorNeutralForeground2, #4a4f5e);
    padding: 0 8px;
    height: 100%;
    display: flex;
    align-items: center;
}

.score-pill .pill-divider[b-gvjn9bbmhw] {
    width: 1px;
    height: 100%;
    background: var(--BEC-colorNeutralStroke2, #d0d3da);
}

.score-pill .over-part[b-gvjn9bbmhw] {
    background: linear-gradient(135deg, #ede9fe 0%, #f3e8ff 100%);
    color: #7c3aed;
    padding: 0 8px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 3px;
}

.score-pill .over-part .star[b-gvjn9bbmhw] {
    color: #d97706;
    font-size: 9px;
}

/* Info icon with hover tooltip */
.info-icon[b-gvjn9bbmhw] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3, #8a8fa0);
    cursor: help;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.info-tooltip[b-gvjn9bbmhw] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--BEC-colorNeutralBackground1, #fff);
    color: var(--BEC-colorNeutralForeground1, #1a1a2e);
    border: 1px solid var(--BEC-colorNeutralStroke1, #d4d7de);
    border-radius: var(--BEC-borderRadiusMedium, 6px);
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    width: 240px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.info-icon:hover .info-tooltip[b-gvjn9bbmhw],
.info-icon:focus .info-tooltip[b-gvjn9bbmhw] {
    visibility: visible;
    opacity: 1;
}

/* Score Input */
.q-input[b-gvjn9bbmhw] {
    flex-shrink: 0;
}

[b-gvjn9bbmhw] .score-input-compact.e-input-group,
[b-gvjn9bbmhw] .score-input-compact .e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    min-height: 28px !important;
    max-height: 28px !important;
}

[b-gvjn9bbmhw] .score-input-compact .e-input {
    font-size: 12px !important;
    text-align: center !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    padding: 2px 4px !important;
}

/* Comment Input — auto-resize multiline */
.q-comment[b-gvjn9bbmhw] {
    flex-shrink: 0;
    width: 180px;
}

[b-gvjn9bbmhw] .comment-input-compact.e-input-group,
[b-gvjn9bbmhw] .comment-input-compact .e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    min-height: 28px !important;
}

[b-gvjn9bbmhw] .comment-input-compact .e-input {
    font-size: 11px !important;
    padding: 4px 8px !important;
    line-height: 1.3 !important;
}

/* Auto-resize textarea: grows with content, shrinks when text removed */
[b-gvjn9bbmhw] .comment-auto-resize textarea.e-input {
    field-sizing: content;
    min-height: 28px;
    max-height: 120px;
    overflow-y: auto;
    resize: vertical;
}

/* ========================================
   NOTIFICATION DIALOG
   ======================================== */
[b-gvjn9bbmhw] .notification-dialog-warning .e-dlg-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Tablets / narrow screens */
@media (max-width: 1024px) {
    .question-row[b-gvjn9bbmhw] {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
    }

    .q-text[b-gvjn9bbmhw] {
        flex-basis: calc(100% - 44px);
        order: 1;
    }

    .q-number[b-gvjn9bbmhw] {
        order: 0;
    }

    .q-meta[b-gvjn9bbmhw] {
        order: 2;
        margin-left: 44px;
    }

    .q-input[b-gvjn9bbmhw] {
        order: 3;
    }

    .q-comment[b-gvjn9bbmhw] {
        order: 4;
        flex: 1;
        width: auto;
        min-width: 140px;
    }

    .employee-info-header[b-gvjn9bbmhw] {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .erp-page-header[b-gvjn9bbmhw] {
        padding: 6px 12px;
    }

    .erp-page-content[b-gvjn9bbmhw] {
        padding: 0 8px 24px 8px;
    }

    .category-tile[b-gvjn9bbmhw] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 8px 12px;
    }

    .question-row[b-gvjn9bbmhw] {
        padding: 8px 8px;
    }

    .q-comment[b-gvjn9bbmhw] {
        width: 100%;
    }

    .compact-stats[b-gvjn9bbmhw] {
        padding: 4px 12px;
        font-size: 10px;
    }

    .progress-container[b-gvjn9bbmhw] {
        padding: 0 12px 6px 12px;
    }
}

/* ========================================
   PRINT-ONLY ELEMENTS (hidden on screen)
   ======================================== */
.print-only-header[b-gvjn9bbmhw],
.print-only-footer[b-gvjn9bbmhw] {
    display: none;
}

/* ========================================
   PRINT STYLES — @media print
   ======================================== */
@media print {
    /* Show print header and footer */
    .print-only-header[b-gvjn9bbmhw],
    .print-only-footer[b-gvjn9bbmhw] {
        display: block !important;
    }

    .print-only-header[b-gvjn9bbmhw] {
        text-align: center;
        padding: 0 0 12px 0;
        border-bottom: 2px solid #1a1a2e;
        margin-bottom: 16px;
    }

    .print-company-name[b-gvjn9bbmhw] {
        font-size: 20px;
        font-weight: 700;
        color: #1a1a2e;
        letter-spacing: 1px;
    }

    .print-form-title[b-gvjn9bbmhw] {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-top: 4px;
    }

    .print-meta-grid[b-gvjn9bbmhw] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 24px;
        text-align: left;
        margin-top: 10px;
        font-size: 11px;
    }

    .print-meta-label[b-gvjn9bbmhw] {
        font-weight: 700;
        color: #1a1a2e;
    }

    .print-only-footer[b-gvjn9bbmhw] {
        margin-top: 24px;
        padding-top: 12px;
        border-top: 1px solid #999;
        text-align: center;
        page-break-inside: avoid;
    }

    .print-copyright[b-gvjn9bbmhw] {
        font-size: 11px;
        font-weight: 600;
        color: #333;
    }

    .print-date[b-gvjn9bbmhw] {
        font-size: 10px;
        color: #666;
        margin-top: 2px;
    }

    /* Remove fixed height and overflow so full content prints */
    .erp-page-container[b-gvjn9bbmhw] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .erp-page-content[b-gvjn9bbmhw] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Hide non-printable UI: toolbar, header buttons, dialogs */
    [b-gvjn9bbmhw] .e-toolbar,
    .header-right[b-gvjn9bbmhw],
    [b-gvjn9bbmhw] .e-dialog,
    [b-gvjn9bbmhw] .e-overlay,
    .readonly-banner[b-gvjn9bbmhw] {
        display: none !important;
    }

    /* Compact stats and progress print cleanly */
    .compact-stats[b-gvjn9bbmhw] {
        padding: 4px 0;
        font-size: 10px;
    }

    .progress-bar[b-gvjn9bbmhw] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .progress-fill[b-gvjn9bbmhw] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Category tiles */
    .category-tile[b-gvjn9bbmhw] {
        background: #f0f0f0 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
        padding: 6px 12px;
        margin: 8px 0 4px 0;
        page-break-inside: avoid;
    }

    /* Question rows */
    .question-row[b-gvjn9bbmhw] {
        page-break-inside: avoid;
        padding: 4px 8px;
    }

    /* Score inputs: show as plain text */
    [b-gvjn9bbmhw] .e-numeric .e-input,
    [b-gvjn9bbmhw] .score-input-compact .e-input {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        font-weight: 600;
    }

    /* Textbox inputs: show as plain text */
    [b-gvjn9bbmhw] .e-textbox,
    [b-gvjn9bbmhw] .comment-input-compact .e-input {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Badges: preserve colors */
    .badge[b-gvjn9bbmhw] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Page setup */
    @page {
        size: A4;
        margin: 15mm 10mm;
    }
}

/* Arabic question text */
.q-text-arabic[b-gvjn9bbmhw] {
    direction: rtl;
    text-align: right;
    font-size: 0.9em;
    color: var(--BEC-TextSecondary, #555);
    margin-top: 4px;
    font-style: italic;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .question-row[b-gvjn9bbmhw] {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 12px;
    }

    .q-number[b-gvjn9bbmhw] {
        min-width: unset;
    }

    .q-text[b-gvjn9bbmhw] {
        flex: 1 1 100%;
        order: 1;
    }

    .q-text-arabic[b-gvjn9bbmhw] {
        order: 2;
    }

    .scale-badge-wrap[b-gvjn9bbmhw] {
        order: 3;
    }

    .q-meta[b-gvjn9bbmhw] {
        order: 4;
    }

    .q-input[b-gvjn9bbmhw] {
        order: 5;
        flex: 1 1 auto;
    }

    .q-comment[b-gvjn9bbmhw] {
        order: 6;
        flex: 1 1 100%;
    }

    .category-tile[b-gvjn9bbmhw] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .info-tooltip[b-gvjn9bbmhw] {
        left: auto;
        right: 0;
        transform: none;
    }
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Evaluations/HrProxyEvaluations/HrProxyEvaluations.razor.rz.scp.css */
/* ========================================
   HR PROXY EVALUATIONS — Card List Design
   Blue proxy accent, matching MySelfAppraisals layout
   ======================================== */

/* ── Page wrapper ── */
.proxy-page[b-bhidsc0e43] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 16px 24px 32px;
    overflow-y: auto;
}

/* ── Header ── */
.proxy-header[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    margin-bottom: 16px;
}

.proxy-header-left[b-bhidsc0e43] {
    flex: 1;
}

.proxy-header-right[b-bhidsc0e43] {
    flex-shrink: 0;
}

.proxy-title[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.proxy-title svg[b-bhidsc0e43] {
    color: var(--BEC-colorBrandForeground1);
}

/* ── Stats ── */
.proxy-stats[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.proxy-stat[b-bhidsc0e43] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.proxy-stat-value[b-bhidsc0e43] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.proxy-stat-label[b-bhidsc0e43] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

.proxy-stat-divider[b-bhidsc0e43] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

.proxy-stat-sa[b-bhidsc0e43] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.proxy-stat-ack[b-bhidsc0e43] {
    color: var(--BEC-colorPaletteRoyalBlueForeground2);
}

/* ── Search bar ── */
.proxy-search-bar[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground1);
    margin-bottom: 16px;
}

.proxy-search-icon[b-bhidsc0e43] {
    color: var(--BEC-colorNeutralForeground3);
    flex-shrink: 0;
}

.proxy-search-input[b-bhidsc0e43] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
}

.proxy-search-input[b-bhidsc0e43]::placeholder {
    color: var(--BEC-colorNeutralForeground3);
}

/* ── State containers (loading / error / empty) ── */
.proxy-state-container[b-bhidsc0e43] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.proxy-state-container i[b-bhidsc0e43] {
    font-size: 32px;
    color: var(--BEC-colorBrandForeground1);
}

.proxy-state-container.proxy-error i[b-bhidsc0e43] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.proxy-state-container.proxy-empty svg[b-bhidsc0e43] {
    color: var(--BEC-colorNeutralForeground3);
}

.proxy-state-container h3[b-bhidsc0e43] {
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.proxy-state-container p[b-bhidsc0e43] {
    font-size: 14px;
    margin: 0;
}

.proxy-spinner[b-bhidsc0e43] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: proxy-spin-b-bhidsc0e43 0.8s linear infinite;
}

@keyframes proxy-spin-b-bhidsc0e43 {
    to { transform: rotate(360deg); }
}

/* ── List container ── */
.proxy-list-container[b-bhidsc0e43] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── List item card ── */
.proxy-list-item[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow2);
    display: flex;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.proxy-list-item:hover[b-bhidsc0e43] {
    box-shadow: 0 4px 16px rgba(0, 90, 180, 0.10), 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

/* ── Left accent bar ── */
.proxy-accent-bar[b-bhidsc0e43] {
    width: 5px;
    flex-shrink: 0;
    border-radius: var(--BEC-borderRadiusMedium) 0 0 var(--BEC-borderRadiusMedium);
}

.proxy-accent-sa[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.proxy-accent-ack[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteRoyalBlueForeground2);
}

.proxy-accent-mr[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.proxy-accent-completed[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteGreenForeground2);
}

.proxy-accent-pending[b-bhidsc0e43] {
    background: var(--BEC-colorBrandForeground1);
}

.proxy-accent-default[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralStroke2);
}

/* ── Item content area ── */
.proxy-item-content[b-bhidsc0e43] {
    flex: 1;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Top row: employee info + stage badge ── */
.proxy-item-top[b-bhidsc0e43] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.proxy-employee-group[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.proxy-employee-avatar[b-bhidsc0e43] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.proxy-title-group h3[b-bhidsc0e43] {
    font-size: 17px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1.3;
}

.proxy-subtitle[b-bhidsc0e43] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 2px;
}

/* ── Stage icon + badge ── */
.proxy-stage-group[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.proxy-stage-icon[b-bhidsc0e43] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.proxy-stage-icon-sa[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.proxy-stage-icon-ack[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteRoyalBlueBackground2);
    color: var(--BEC-colorPaletteRoyalBlueForeground2);
}

.proxy-stage-icon-mr[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.proxy-stage-icon-completed[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.proxy-stage-icon-pending[b-bhidsc0e43] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.proxy-stage-icon-default[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.proxy-badge[b-bhidsc0e43] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    white-space: nowrap;
}

.proxy-badge-sa[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.proxy-badge-ack[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteRoyalBlueBackground2);
    color: var(--BEC-colorPaletteRoyalBlueForeground2);
}

.proxy-badge-mr[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.proxy-badge-completed[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.proxy-badge-pending[b-bhidsc0e43] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.proxy-badge-default[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

/* ── Meta chips row ── */
.proxy-item-meta[b-bhidsc0e43] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.proxy-meta-chip[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
}

.proxy-meta-chip svg[b-bhidsc0e43] {
    flex-shrink: 0;
    opacity: 0.5;
}

.proxy-meta-value[b-bhidsc0e43] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.proxy-overdue-tag[b-bhidsc0e43] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground1);
}

/* ── Bottom row: proxy indicator + action ── */
.proxy-item-bottom[b-bhidsc0e43] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.proxy-acting-as[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightMedium);
}

.proxy-acting-as svg[b-bhidsc0e43] {
    flex-shrink: 0;
}

/* ── Buttons ── */
.proxy-btn[b-bhidsc0e43] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.proxy-btn-primary[b-bhidsc0e43] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.proxy-btn-primary:hover[b-bhidsc0e43] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.proxy-btn-acknowledge[b-bhidsc0e43] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.proxy-btn-acknowledge:hover[b-bhidsc0e43] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.proxy-btn-outline[b-bhidsc0e43] {
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    color: var(--BEC-colorNeutralForeground1);
}

.proxy-btn-outline:hover[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralBackground3);
}

/* View Button */
.proxy-btn-view[b-bhidsc0e43] {
    background: transparent;
    border: 1px solid var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorBrandForeground1);
}

.proxy-btn-view:hover[b-bhidsc0e43] {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

/* Action buttons container */
.proxy-action-buttons[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Manager Review stat color */
.proxy-stat-mr[b-bhidsc0e43] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

/* Completed stat color */
.proxy-stat-completed[b-bhidsc0e43] {
    color: var(--BEC-colorPaletteGreenForeground2);
}

/* Score highlight in meta chips */
.proxy-score-highlight[b-bhidsc0e43] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightBold);
}

.proxy-score-max[b-bhidsc0e43] {
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    font-size: 11px;
}

/* Print button in header */
.proxy-print-btn[b-bhidsc0e43] {
    margin-left: 12px;
    padding: 4px 12px;
    font-size: 12px;
    gap: 6px;
    display: inline-flex;
    align-items: center;
}

/* ========================================
   PRINT-ONLY ELEMENTS (hidden on screen)
   ======================================== */
.print-only-header[b-bhidsc0e43],
.print-only-footer[b-bhidsc0e43] {
    display: none;
}

/* Sidebar print elements hidden on screen */
.sidebar-print-header[b-bhidsc0e43],
.sidebar-print-footer[b-bhidsc0e43] {
    display: none;
}

/* ========================================
   PRINT STYLES — @media print
   ======================================== */
@media print {

    /* ── PAGE PRINT MODE — print the card list view ── */
    .proxy-page.print-page-mode[b-bhidsc0e43] {
        display: block !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
    }

    /* Show print header and footer in page mode */
    .print-page-mode .print-only-header[b-bhidsc0e43],
    .print-page-mode .print-only-footer[b-bhidsc0e43] {
        display: block !important;
    }

    .print-page-mode .print-only-header[b-bhidsc0e43] {
        text-align: center;
        padding: 0 0 12px 0;
        border-bottom: 2px solid #1a1a2e;
        margin-bottom: 16px;
    }

    .print-page-mode .print-only-footer[b-bhidsc0e43] {
        margin-top: 24px;
        padding-top: 12px;
        border-top: 1px solid #999;
        text-align: center;
        page-break-inside: avoid;
    }

    /* Hide interactive elements in page mode */
    .print-page-mode .proxy-print-btn[b-bhidsc0e43],
    .print-page-mode .proxy-search-bar[b-bhidsc0e43],
    .print-page-mode .proxy-action-buttons[b-bhidsc0e43] {
        display: none !important;
    }

    /* Card list items: avoid page breaks inside */
    .print-page-mode .proxy-list-item[b-bhidsc0e43] {
        page-break-inside: avoid;
        box-shadow: none !important;
    }

    /* Preserve accent bar colors */
    .print-page-mode .proxy-accent-bar[b-bhidsc0e43],
    .print-page-mode .proxy-badge[b-bhidsc0e43] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* ── SIDEBAR PRINT MODE — print the sidebar view panel ── */
    .proxy-page.print-sidebar-mode[b-bhidsc0e43] {
        display: none !important;
    }

    /* Show the sidebar print header and footer */
    .sidebar-print-header[b-bhidsc0e43] {
        display: block !important;
        text-align: center;
        padding: 0 0 12px 0;
        border-bottom: 2px solid #1a1a2e;
        margin-bottom: 16px;
    }

    .sidebar-print-footer[b-bhidsc0e43] {
        display: block !important;
        margin-top: 24px;
        padding-top: 12px;
        border-top: 1px solid #999;
        text-align: center;
        page-break-inside: avoid;
    }

    .print-company-name[b-bhidsc0e43] {
        font-size: 20px;
        font-weight: 700;
        color: #1a1a2e;
        letter-spacing: 1px;
    }

    .print-form-title[b-bhidsc0e43] {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-top: 4px;
    }

    .print-copyright[b-bhidsc0e43] {
        font-size: 11px;
        font-weight: 600;
        color: #333;
    }

    .print-date[b-bhidsc0e43] {
        font-size: 10px;
        color: #666;
        margin-top: 2px;
    }

    /* Hide interactive elements in sidebar mode */
    .proxy-print-btn[b-bhidsc0e43],
    .sidebar-close-btn[b-bhidsc0e43],
    .sidebar-header-actions[b-bhidsc0e43],
    .sidebar-footer[b-bhidsc0e43] {
        display: none !important;
    }

    /* Make sidebar fill the page for printing */
    [b-bhidsc0e43] .e-sidebar {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Hide the sidebar overlay */
    [b-bhidsc0e43] .e-sidebar-overlay,
    [b-bhidsc0e43] .e-overlay {
        display: none !important;
    }

    .sidebar-content[b-bhidsc0e43] {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .sidebar-step-content[b-bhidsc0e43] {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    .sidebar-header[b-bhidsc0e43] {
        border-bottom: none;
        padding: 8px 0;
    }

    /* Let form sections flow naturally */
    .form-section[b-bhidsc0e43] {
        page-break-inside: avoid;
    }

    /* Preserve colors */
    .badge[b-bhidsc0e43],
    .proxy-badge[b-bhidsc0e43] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Page setup */
    @page {
        size: A4;
        margin: 15mm 10mm;
    }
}

/* ========================================
   VIEW SIDEBAR
   ======================================== */
.sidebar-content[b-bhidsc0e43] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-header[b-bhidsc0e43] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
}

.sidebar-title[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-bhidsc0e43] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 16px;
}

.sidebar-header-actions[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-close-btn[b-bhidsc0e43] {
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusSmall);
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.15s ease;
}

.sidebar-close-btn:hover[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-step-content[b-bhidsc0e43] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px;
    padding-bottom: 80px;
    position: relative;
}

.wizard-step[b-bhidsc0e43] {
    max-width: 100%;
}

.sidebar-footer[b-bhidsc0e43] {
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

.footer-buttons[b-bhidsc0e43] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* ========================================
   FORM SECTIONS (View Panel)
   ======================================== */
.form-section[b-bhidsc0e43] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.form-section:first-child[b-bhidsc0e43] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.section-title[b-bhidsc0e43] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-title i[b-bhidsc0e43] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
}

/* ── Returned for Correction Banner ── */
.returned-banner[b-bhidsc0e43] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(230, 126, 34, 0.08);
    border-left: 4px solid #d35400;
    color: var(--BEC-colorNeutralForeground1);
    font-size: 12.5px;
    line-height: 1.5;
    margin-top: 12px;
    border-radius: 0 var(--BEC-borderRadiusSmall, 2px) var(--BEC-borderRadiusSmall, 2px) 0;
}

.returned-banner-header[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d35400;
    font-size: 12.5px;
}

.returned-banner-header i[b-bhidsc0e43] {
    font-size: 14px;
    flex-shrink: 0;
}

.returned-banner-reason[b-bhidsc0e43] {
    font-style: italic;
    color: #a04000;
    padding-left: 22px;
    font-size: 12px;
}

.form-group[b-bhidsc0e43] {
    margin-bottom: 20px;
}

.form-label[b-bhidsc0e43] {
    display: block;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
    text-align: left;
}

.form-value[b-bhidsc0e43] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    min-height: 34px;
    display: flex;
    align-items: center;
    text-align: left;
    justify-content: flex-start;
}

.form-row[b-bhidsc0e43] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* Badges in view panel */
.badge[b-bhidsc0e43] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    line-height: 1.4;
}

.badge-selfappraisal[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-managerreview[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-inactive[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-info[b-bhidsc0e43] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-pendingack[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteRoyalBlueBackground2);
    color: var(--BEC-colorPaletteRoyalBlueForeground2);
}

.badge-warning[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-submitted[b-bhidsc0e43] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-success[b-bhidsc0e43] {
    background: rgba(16, 124, 16, 0.1);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-completed[b-bhidsc0e43] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-danger[b-bhidsc0e43] {
    background: rgba(209, 52, 56, 0.1);
    color: var(--BEC-colorPaletteRedForeground1);
}

.badge-secondary[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-primary[b-bhidsc0e43] {
    background: rgba(0, 120, 212, 0.1);
    color: var(--BEC-colorBrandForeground1);
}

.score-value[b-bhidsc0e43] {
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
}

.score-max[b-bhidsc0e43] {
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
}

/* ========================================
   SCORE COMPARISON TABLE
   ======================================== */
.view-loading-comparison[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 13px;
}

.view-loading-comparison i[b-bhidsc0e43] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.view-comp-table[b-bhidsc0e43] {
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
    font-size: 12px;
}

.view-comp-header[b-bhidsc0e43] {
    display: grid;
    grid-template-columns: 1fr 70px 100px 100px 60px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 2px solid var(--BEC-colorBrandBackground);
    padding: 8px 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.view-comp-row[b-bhidsc0e43] {
    display: grid;
    grid-template-columns: 1fr 70px 100px 100px 60px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    align-items: center;
    transition: background 0.15s ease;
}

.view-comp-row:hover[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralBackground1Hover);
}

.view-comp-totals[b-bhidsc0e43] {
    display: grid;
    grid-template-columns: 1fr 70px 100px 100px 60px;
    padding: 8px 10px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 2px solid var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground1);
}

.view-comp-col[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.view-comp-question[b-bhidsc0e43] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
    color: var(--BEC-colorNeutralForeground1);
}

.view-comp-weight[b-bhidsc0e43] {
    justify-content: center;
}

.view-comp-score[b-bhidsc0e43] {
    justify-content: center;
    flex-direction: column;
    gap: 1px;
    text-align: center;
}

.view-comp-gap[b-bhidsc0e43] {
    justify-content: center;
}

.view-weight-badge[b-bhidsc0e43] {
    display: inline-block;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.view-score-weighted[b-bhidsc0e43] {
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

.view-score-raw[b-bhidsc0e43] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.view-gap-value[b-bhidsc0e43] {
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: 11px;
    padding: 1px 5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.view-gap-positive[b-bhidsc0e43] {
    color: var(--BEC-colorPaletteGreenForeground2);
    background: var(--BEC-colorPaletteGreenBackground2);
}

.view-gap-negative[b-bhidsc0e43] {
    color: var(--BEC-colorPaletteRedForeground1);
    background: rgba(209, 52, 56, 0.12);
}

.view-gap-neutral[b-bhidsc0e43] {
    color: var(--BEC-colorNeutralForeground3);
}

/* Comments row */
.view-comp-comments-row[b-bhidsc0e43] {
    padding: 4px 10px 8px 10px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.view-comment-block[b-bhidsc0e43] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    line-height: 1.4;
}

.view-comment-label[b-bhidsc0e43] {
    flex-shrink: 0;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 80px;
}

.view-comment-label i[b-bhidsc0e43] {
    font-size: 10px;
    color: var(--BEC-colorBrandForeground1);
}

.view-comment-text[b-bhidsc0e43] {
    color: var(--BEC-colorNeutralForeground1);
    word-break: break-word;
}

/* ========================================
   MANAGER DETAILS GRID
   ======================================== */
.view-details-grid[b-bhidsc0e43] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.view-detail-card[b-bhidsc0e43] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    overflow: hidden;
}

.view-detail-card-full[b-bhidsc0e43] {
    grid-column: 1 / -1;
}

.view-detail-header[b-bhidsc0e43] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.view-detail-header i[b-bhidsc0e43] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 12px;
}

.view-detail-body[b-bhidsc0e43] {
    padding: 10px 12px;
}

.view-detail-text[b-bhidsc0e43] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.view-action-badge[b-bhidsc0e43] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
}

.view-tag-list[b-bhidsc0e43] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.view-tag[b-bhidsc0e43] {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    border-radius: var(--BEC-borderRadiusSmall);
}

.view-tag-strength[b-bhidsc0e43] {
    color: var(--BEC-colorPaletteGreenForeground2);
    background: var(--BEC-colorPaletteGreenBackground2);
}

.view-tag-development[b-bhidsc0e43] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
}

/* Arabic question text */
.q-text-arabic[b-bhidsc0e43] {
    direction: rtl;
    text-align: right;
    font-size: 0.9em;
    color: var(--BEC-TextSecondary, #555);
    margin-top: 4px;
    font-style: italic;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .proxy-header[b-bhidsc0e43] {
        flex-direction: column;
        align-items: flex-start;
    }

    .proxy-stats[b-bhidsc0e43] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .proxy-stat-divider[b-bhidsc0e43] {
        display: none;
    }

    .proxy-page[b-bhidsc0e43] {
        padding: 12px 12px 24px;
    }
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Evaluations/MyAcknowledgments/MyAcknowledgments.razor.rz.scp.css */
/* ========================================
   MY ACKNOWLEDGMENTS PAGE
   Consistent with MyEvaluations design
   ======================================== */

.erp-page-container[b-rcxj5ssvy6] { display: flex; flex-direction: column; height: 100vh; overflow: hidden; position: relative; }
.erp-page-header[b-rcxj5ssvy6] { position: sticky; top: 0; z-index: 100; background: transparent; border-bottom: none; padding: 6px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.header-left[b-rcxj5ssvy6] { flex: 1; display: flex; align-items: center; }
.header-right[b-rcxj5ssvy6] { flex-shrink: 0; }
.page-title[b-rcxj5ssvy6] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--BEC-fontWeightSemibold); color: var(--BEC-colorNeutralForeground1); margin: 0; }
.page-title i[b-rcxj5ssvy6] { color: var(--BEC-colorBrandForeground1); font-size: 14px; }
.stats-container[b-rcxj5ssvy6] { display: flex; align-items: center; gap: 16px; }
.stat-card[b-rcxj5ssvy6] { display: flex; align-items: baseline; gap: 4px; }
.stat-value[b-rcxj5ssvy6] { font-size: 14px; font-weight: var(--BEC-fontWeightBold); color: var(--BEC-colorBrandForeground1); line-height: 1; }
.stat-label[b-rcxj5ssvy6] { font-size: 10px; color: var(--BEC-colorNeutralForeground3); font-weight: var(--BEC-fontWeightMedium); }
.stat-divider[b-rcxj5ssvy6] { width: 1px; height: 16px; background: var(--BEC-colorNeutralStroke2); }
.stat-pending[b-rcxj5ssvy6] { color: var(--BEC-colorPaletteDarkOrangeForeground2); }
.stat-completed[b-rcxj5ssvy6] { color: var(--BEC-colorPaletteGreenForeground2); }

.erp-page-content[b-rcxj5ssvy6] { flex: 1; min-height: 0; padding: 10px 20px 30px 20px; display: flex; flex-direction: column; }

.loading-container[b-rcxj5ssvy6], .error-container[b-rcxj5ssvy6], .empty-container[b-rcxj5ssvy6] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; gap: 12px; color: var(--BEC-colorNeutralForeground3); }
.error-container i[b-rcxj5ssvy6] { font-size: 32px; color: var(--BEC-colorPaletteRedForeground1); }
.empty-container i[b-rcxj5ssvy6] { font-size: 32px; color: var(--BEC-colorBrandForeground1); }

.cell-stacked[b-rcxj5ssvy6] { display: flex; flex-direction: column; gap: 2px; }
.cell-name[b-rcxj5ssvy6] { font-weight: var(--BEC-fontWeightSemibold); font-size: 13px; color: var(--BEC-colorNeutralForeground1); }
.cell-code[b-rcxj5ssvy6] { font-size: 11px; color: var(--BEC-colorNeutralForeground3); }

.badge[b-rcxj5ssvy6] { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--BEC-borderRadiusSmall); font-size: 11px; font-weight: var(--BEC-fontWeightSemibold); white-space: nowrap; }
.badge-stage-pendingack[b-rcxj5ssvy6] { background: var(--BEC-colorPaletteDarkOrangeBackground2); color: var(--BEC-colorPaletteDarkOrangeForeground2); }
.badge-stage-submitted[b-rcxj5ssvy6] { background: var(--BEC-colorPaletteMarigoldBackground2); color: var(--BEC-colorPaletteMarigoldForeground2); }
.badge-stage-completed[b-rcxj5ssvy6] { background: var(--BEC-colorPaletteGreenBackground2); color: var(--BEC-colorPaletteGreenForeground2); }
.badge-stage-default[b-rcxj5ssvy6] { background: var(--BEC-colorNeutralBackground3); color: var(--BEC-colorNeutralForeground3); }

.btn-action[b-rcxj5ssvy6] { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border: none; border-radius: var(--BEC-borderRadiusSmall); font-size: 12px; font-weight: var(--BEC-fontWeightSemibold); cursor: pointer; transition: all 0.15s ease; white-space: nowrap; }
.btn-action-acknowledge[b-rcxj5ssvy6] { background: var(--BEC-colorBrandBackground); color: var(--BEC-colorNeutralForegroundOnBrand); }
.btn-action-acknowledge:hover[b-rcxj5ssvy6] { background: var(--BEC-colorBrandBackgroundHover); }

[b-rcxj5ssvy6] .e-toolbar.e-control { position: sticky; top: 36px; z-index: 90; background: var(--BEC-colorNeutralBackground1); border: 1px solid var(--BEC-colorNeutralStroke1); border-radius: var(--BEC-borderRadiusMedium); margin: 4px 20px; box-shadow: var(--BEC-shadow2); min-height: 32px; height: 32px; }
/* /Components/Pages/MainLayout/PerformanceEvaluation/Evaluations/MyEvaluations/MyEvaluations.razor.rz.scp.css */
/* ========================================
   MY EVALUATIONS — MANAGER VIEW
   100% Design-consistent with AllEvaluations
   ======================================== */

/* ========================================
   PAGE CONTAINER
   ======================================== */
.erp-page-container[b-jt5fem50in] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER
   ======================================== */
.erp-page-header[b-jt5fem50in] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-jt5fem50in] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-jt5fem50in] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-jt5fem50in] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.header-right[b-jt5fem50in] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER
   ======================================== */
.stats-container[b-jt5fem50in] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-jt5fem50in] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-jt5fem50in] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-jt5fem50in] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-jt5fem50in] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

.stat-pending[b-jt5fem50in] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2) !important;
}

.stat-submitted[b-jt5fem50in] {
    color: var(--BEC-colorBrandForeground1) !important;
}

.stat-completed[b-jt5fem50in] {
    color: var(--BEC-colorPaletteGreenForeground2) !important;
}

/* ========================================
   FILTER BAR
   ======================================== */
.filter-bar[b-jt5fem50in] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 24px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.filter-group[b-jt5fem50in] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-label[b-jt5fem50in] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    white-space: nowrap;
}

[b-jt5fem50in] .filter-dropdown.e-input-group,
[b-jt5fem50in] .filter-dropdown .e-input-group {
    height: 26px !important;
    min-height: 26px !important;
    font-size: 12px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

[b-jt5fem50in] .filter-dropdown .e-input {
    font-size: 12px !important;
    padding: 2px 6px !important;
}

.filter-actions[b-jt5fem50in] {
    margin-left: auto;
}

.filter-clear-btn[b-jt5fem50in] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-clear-btn:hover[b-jt5fem50in] {
    border-color: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
}

.filter-clear-btn i[b-jt5fem50in] {
    font-size: 10px;
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-jt5fem50in] {
    flex: 1;
    min-height: 0;
    padding: 10px 20px 30px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ========================================
   ACTION TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-jt5fem50in] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-jt5fem50in] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-jt5fem50in] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

[b-jt5fem50in] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

[b-jt5fem50in] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-jt5fem50in] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

[b-jt5fem50in] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-jt5fem50in] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-jt5fem50in] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-jt5fem50in] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-jt5fem50in] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   SEARCH TEXTBOX
   ======================================== */
[b-jt5fem50in] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-jt5fem50in] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-jt5fem50in] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   GRID STYLING
   ======================================== */
[b-jt5fem50in] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

[b-jt5fem50in] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-jt5fem50in] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Fixed position to escape overflow:hidden
   ======================================== */
[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
    z-index: 10000 !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    font-size: 14px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-dlg-header .e-dlg-header-content {
    padding: 0 !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
    padding: 16px !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-ccsearch {
    margin-bottom: 8px !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-ccsearch input {
    height: 32px !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-ccsearch .e-input-group {
    height: 32px !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist {
    margin: 0 !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li {
    padding: 8px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-frame {
    border-radius: 2px !important;
    width: 16px !important;
    height: 16px !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkbox-wrapper {
    margin-right: 8px !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-label {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

[b-jt5fem50in] .e-grid .e-dialog.e-ccdlg .e-footer-content button {
    height: 32px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

[b-jt5fem50in] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

[b-jt5fem50in] .e-grid .e-row {
    height: 32px !important;
}

[b-jt5fem50in] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

[b-jt5fem50in] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-jt5fem50in] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

[b-jt5fem50in] .e-grid .e-row.e-selectionbackground td:first-child,
[b-jt5fem50in] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Completed rows dimmed */
[b-jt5fem50in] .e-grid .e-row.evaluation-completed {
    opacity: 0.5;
    background-color: var(--BEC-colorNeutralBackground2) !important;
}

[b-jt5fem50in] .e-grid .e-row.evaluation-completed:hover {
    opacity: 0.6;
    background-color: var(--BEC-colorNeutralBackground3) !important;
}

[b-jt5fem50in] .e-grid .e-row.evaluation-completed td {
    color: var(--BEC-colorNeutralForeground3);
}

/* Overdue row highlight */
[b-jt5fem50in] .e-grid .e-row.evaluation-overdue {
    background-color: rgba(209, 52, 56, 0.03) !important;
}

[b-jt5fem50in] .e-grid .e-row.evaluation-overdue:hover {
    background-color: rgba(209, 52, 56, 0.06) !important;
}

/* ========================================
   CELL FORMATTING
   ======================================== */
.cell-stacked[b-jt5fem50in] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cell-name[b-jt5fem50in] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    font-size: 12px;
    line-height: 1.2;
}

.cell-code[b-jt5fem50in] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    line-height: 1.2;
}

.cell-inline[b-jt5fem50in] {
    display: inline-block;
    font-size: 12px;
    line-height: 1.2;
    color: var(--BEC-colorNeutralForeground1);
}

.cell-version[b-jt5fem50in] {
    display: inline-block;
    padding: 1px 5px;
    margin-left: 4px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    vertical-align: middle;
}

.score-value[b-jt5fem50in] {
    font-weight: var(--BEC-fontWeightBold);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   APPROVAL STATUS CELL
   ======================================== */
.approval-status-cell[b-jt5fem50in] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 100%;
    overflow: hidden;
    cursor: default;
    padding: 2px 0;
}

.approval-step[b-jt5fem50in] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.approval-approver[b-jt5fem50in] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.approval-person-icon[b-jt5fem50in] {
    flex-shrink: 0;
    font-size: 9px;
    color: var(--BEC-colorBrandForeground2);
}

/* ========================================
   DUE DATE CELL
   ======================================== */
.due-date-cell[b-jt5fem50in] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.overdue-badge[b-jt5fem50in] {
    font-size: 8px !important;
    padding: 1px 4px !important;
    animation: pulse-overdue-b-jt5fem50in 2s ease-in-out infinite;
}

@keyframes pulse-overdue-b-jt5fem50in {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-jt5fem50in] {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-jt5fem50in] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-jt5fem50in] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-jt5fem50in] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-jt5fem50in] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-secondary[b-jt5fem50in] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground2);
}

.badge-danger[b-jt5fem50in] {
    background: rgba(209, 52, 56, 0.1);
    color: #d13438;
}

/* ========================================
   ACTION BUTTONS (in grid rows)
   ======================================== */
.btn-action[b-jt5fem50in] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid;
    background: transparent;
    white-space: nowrap;
}

.btn-action i[b-jt5fem50in] {
    font-size: 10px;
}

/* Fill Form — Orange accent (action needed) */
.btn-action-fill[b-jt5fem50in] {
    border-color: var(--BEC-colorPaletteDarkOrangeForeground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.btn-action-fill:hover[b-jt5fem50in] {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    color: #fff;
}

/* View — Blue accent */
.btn-action-view[b-jt5fem50in] {
    border-color: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorBrandForeground1);
}

.btn-action-view:hover[b-jt5fem50in] {
    background: var(--BEC-colorBrandForeground1);
    color: #fff;
}

/* Scores — Green accent */
.btn-action-scores[b-jt5fem50in] {
    border-color: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.btn-action-scores:hover[b-jt5fem50in] {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: #fff;
}

/* Self-Appraisal — Teal accent */
.btn-action-selfappraisal[b-jt5fem50in] {
    border-color: var(--BEC-colorPaletteTealForeground2, var(--BEC-colorPaletteDarkOrangeForeground2));
    color: var(--BEC-colorPaletteTealForeground2, var(--BEC-colorPaletteDarkOrangeForeground2));
}

.btn-action-selfappraisal:hover[b-jt5fem50in] {
    background: var(--BEC-colorPaletteTealForeground2, var(--BEC-colorPaletteDarkOrangeForeground2));
    color: #fff;
}

/* Acknowledge — Purple accent */
.btn-action-acknowledge[b-jt5fem50in] {
    border-color: var(--BEC-colorPaletteBerryForeground2, var(--BEC-colorBrandForeground1));
    color: var(--BEC-colorPaletteBerryForeground2, var(--BEC-colorBrandForeground1));
}

.btn-action-acknowledge:hover[b-jt5fem50in] {
    background: var(--BEC-colorPaletteBerryForeground2, var(--BEC-colorBrandForeground1));
    color: #fff;
}

/* New stage badges */
.badge-selfappraisal[b-jt5fem50in] { background: var(--BEC-colorPaletteDarkOrangeBackground2); color: var(--BEC-colorPaletteDarkOrangeForeground2); }
.badge-managerreview[b-jt5fem50in] { background: var(--BEC-colorPaletteMarigoldBackground2); color: var(--BEC-colorPaletteMarigoldForeground2); }
.badge-returnedcorrection[b-jt5fem50in] { background: rgba(198, 40, 40, 0.12); color: #c62828; }
.badge-returned[b-jt5fem50in] { background: rgba(230, 126, 34, 0.15); color: #d35400; font-weight: var(--BEC-fontWeightBold); }
.badge-pendingack[b-jt5fem50in] { background: var(--BEC-colorPaletteBerryBackground2, var(--BEC-colorPaletteDarkOrangeBackground2)); color: var(--BEC-colorPaletteBerryForeground2, var(--BEC-colorPaletteDarkOrangeForeground2)); }

/* Revise & Resubmit — Amber/orange accent (returned for correction) */
.btn-action-returned[b-jt5fem50in] {
    border-color: #d35400;
    color: #d35400;
}

.btn-action-returned:hover[b-jt5fem50in] {
    background: #d35400;
    color: #fff;
}

/* Returned reason info icon */
.returned-reason-icon[b-jt5fem50in] {
    color: #d35400;
    font-size: 11px;
    margin-left: 4px;
    cursor: help;
}

/* ── Returned for Correction Banner (View Sidebar) ── */
.returned-banner[b-jt5fem50in] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(230, 126, 34, 0.08);
    border-left: 4px solid #d35400;
    color: var(--BEC-colorNeutralForeground1);
    font-size: 12.5px;
    line-height: 1.5;
    margin-top: 12px;
    border-radius: 0 var(--BEC-borderRadiusSmall, 2px) var(--BEC-borderRadiusSmall, 2px) 0;
}

.returned-banner-header[b-jt5fem50in] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d35400;
    font-size: 12.5px;
}

.returned-banner-header i[b-jt5fem50in] {
    font-size: 14px;
    flex-shrink: 0;
}

.returned-banner-reason[b-jt5fem50in] {
    font-style: italic;
    color: #a04000;
    padding-left: 22px;
    font-size: 12px;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-jt5fem50in] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-jt5fem50in] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-jt5fem50in 1s linear infinite;
}

@keyframes spin-b-jt5fem50in {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-jt5fem50in] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-jt5fem50in] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-jt5fem50in] {
    font-size: 48px;
}

.error-container p[b-jt5fem50in] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   SIDEBAR
   ======================================== */
.sidebar-header[b-jt5fem50in] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-jt5fem50in] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-jt5fem50in] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-jt5fem50in] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-jt5fem50in] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-jt5fem50in] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-jt5fem50in] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-jt5fem50in] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px;
    padding-bottom: 80px;
    position: relative;
}

.wizard-step[b-jt5fem50in] {
    max-width: 100%;
}

/* ========================================
   FORM SECTIONS (View Sidebar)
   ======================================== */
.form-section[b-jt5fem50in] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.form-section:first-child[b-jt5fem50in] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.section-title[b-jt5fem50in] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-title i[b-jt5fem50in] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
}

.form-group[b-jt5fem50in] {
    margin-bottom: 20px;
}

.form-label[b-jt5fem50in] {
    display: block;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
    text-align: left;
}

.form-value[b-jt5fem50in] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    min-height: 34px;
    display: flex;
    align-items: center;
    text-align: left;
    justify-content: flex-start;
}

.form-row[b-jt5fem50in] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* Sidebar footer */
.sidebar-footer[b-jt5fem50in] {
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

.footer-buttons[b-jt5fem50in] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn[b-jt5fem50in] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    height: 36px;
    white-space: nowrap;
}

.btn:disabled[b-jt5fem50in] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-secondary[b-jt5fem50in] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.btn-secondary:hover:not(:disabled)[b-jt5fem50in] {
    background: var(--BEC-colorNeutralBackground4);
    border-color: var(--BEC-colorNeutralStroke2);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-success[b-jt5fem50in] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: #ffffff;
    border: 1px solid var(--BEC-colorPaletteGreenForeground1);
}

.btn-success:hover:not(:disabled)[b-jt5fem50in] {
    background: #0b5c0b;
    border-color: #0b5c0b;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn i[b-jt5fem50in] {
    font-size: 14px;
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   ======================================== */

[b-jt5fem50in] .notification-error .e-dlg-header-content {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

[b-jt5fem50in] .notification-error .e-dlg-header-content i {
    color: white;
}

[b-jt5fem50in] .notification-error .e-footer-content .e-btn-primary {
    background: #ef4444;
    border-color: #ef4444;
}

[b-jt5fem50in] .notification-warning .e-dlg-header-content {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

[b-jt5fem50in] .notification-warning .e-dlg-header-content i {
    color: white;
}

[b-jt5fem50in] .notification-warning .e-footer-content .e-btn-primary {
    background: #f59e0b;
    border-color: #f59e0b;
}

[b-jt5fem50in] .notification-error .e-dlg-content,
[b-jt5fem50in] .notification-warning .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: #323130;
}

[b-jt5fem50in] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-jt5fem50in] .notification-warning .e-dlg-header-content .e-icon-dlg-close {
    color: white;
}

/* ============================================
   RATING SCALE POPUP TABLE
   ============================================ */
[b-jt5fem50in] .rating-scale-dialog {
    max-height: 92vh !important;
}

[b-jt5fem50in] .rating-scale-dialog .e-dlg-header-content {
    background: #003d6b;
    padding: 10px 16px;
}

[b-jt5fem50in] .rating-scale-dialog .e-dlg-header {
    color: white !important;
    font-size: 14px;
}

[b-jt5fem50in] .rating-scale-dialog .e-icon-dlg-close {
    color: white;
}

[b-jt5fem50in] .rating-scale-dialog .e-dlg-content {
    padding: 0;
    overflow: hidden;
}

.rating-scale-table-container[b-jt5fem50in] {
    overflow: hidden;
}

.rating-scale-table[b-jt5fem50in] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    line-height: 1.35;
    table-layout: fixed;
}

.rating-scale-table thead tr[b-jt5fem50in] {
    background: #003d6b;
    color: white;
}

.rating-scale-table th[b-jt5fem50in] {
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
}

.rating-scale-table td[b-jt5fem50in] {
    padding: 8px 10px;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: top;
    color: #333;
    word-wrap: break-word;
}

.rating-scale-table colgroup col:nth-child(1)[b-jt5fem50in] { width: 70px; }
.rating-scale-table colgroup col:nth-child(2)[b-jt5fem50in] { width: 130px; }
.rating-scale-table colgroup col:nth-child(4)[b-jt5fem50in] { width: 100px; }

.rating-rate[b-jt5fem50in] {
    font-weight: 600;
    white-space: nowrap;
    color: #003d6b;
    font-size: 11.5px;
}

.rating-group-cell[b-jt5fem50in] {
    text-align: center;
    vertical-align: middle;
    border-right: 3px solid;
    padding: 6px !important;
    width: 70px;
}

.rating-group-label[b-jt5fem50in] {
    font-size: 11px;
    line-height: 1.3;
    color: #555;
}

.rating-group-high[b-jt5fem50in] {
    border-right-color: #2e7d32;
    background: #e8f5e9;
}

.rating-group-normal[b-jt5fem50in] {
    border-right-color: #1565c0;
    background: #e3f2fd;
}

.rating-group-improve[b-jt5fem50in] {
    border-right-color: #e65100;
    background: #fff3e0;
}

.rating-row.rating-outstanding td:not(.rating-group-cell)[b-jt5fem50in] { background: #f1f8e9; }
.rating-row.rating-exceed td:not(.rating-group-cell)[b-jt5fem50in] { background: #f1f8e9; }
.rating-row.rating-meet td:not(.rating-group-cell)[b-jt5fem50in] { background: #e3f2fd; }
.rating-row.rating-partial td:not(.rating-group-cell)[b-jt5fem50in] { background: #fff8e1; }
.rating-row.rating-notmeet td:not(.rating-group-cell)[b-jt5fem50in] { background: #fce4ec; }

[b-jt5fem50in] .rating-scale-dialog .e-footer-content {
    padding: 8px 16px;
    border-top: 1px solid #e0e0e0;
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Evaluations/MySelfAppraisals/MySelfAppraisals.razor.rz.scp.css */
/* ========================================
   MY SELF-APPRAISALS — Timeline List Design
   Full-width, accent-bar cards
   ======================================== */

/* ── Page wrapper ── */
.sa-timeline-page[b-nyw02zzl28] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 16px 24px 32px;
    overflow-y: auto;
}

/* ── State containers (loading / error / empty) ── */
.sa-state-container[b-nyw02zzl28] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.sa-state-container i[b-nyw02zzl28] {
    font-size: 32px;
    color: var(--BEC-colorBrandForeground1);
}

.sa-state-container.sa-error i[b-nyw02zzl28] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.sa-state-container.sa-empty i[b-nyw02zzl28] {
    color: var(--BEC-colorNeutralForeground3);
}

.sa-state-container h3[b-nyw02zzl28] {
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.sa-state-container p[b-nyw02zzl28] {
    font-size: 14px;
    margin: 0;
}

.sa-spinner[b-nyw02zzl28] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: sa-spin-b-nyw02zzl28 0.8s linear infinite;
}

@keyframes sa-spin-b-nyw02zzl28 {
    to { transform: rotate(360deg); }
}

/* ── List container — full width, no max-width ── */
.sa-list-container[b-nyw02zzl28] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── List item card ── */
.sa-list-item[b-nyw02zzl28] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-shadow2);
    display: flex;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.sa-list-item:hover[b-nyw02zzl28] {
    box-shadow: 0 4px 16px rgba(0, 120, 212, 0.10), 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

/* ── Left accent bar ── */
.sa-accent-bar[b-nyw02zzl28] {
    width: 5px;
    flex-shrink: 0;
    border-radius: var(--BEC-borderRadiusMedium) 0 0 var(--BEC-borderRadiusMedium);
}

.sa-accent-pending[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.sa-accent-submitted[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteGreenForeground2);
}

/* ── Item content area ── */
.sa-item-content[b-nyw02zzl28] {
    flex: 1;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Top row: title + stage badge ── */
.sa-item-top[b-nyw02zzl28] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.sa-title-group h3[b-nyw02zzl28] {
    font-size: 17px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1.3;
}

.sa-subtitle[b-nyw02zzl28] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 2px;
}

/* ── Stage icon + badge ── */
.sa-stage-group[b-nyw02zzl28] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sa-stage-icon[b-nyw02zzl28] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sa-stage-icon-pending[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.sa-stage-icon-submitted[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.sa-badge[b-nyw02zzl28] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    white-space: nowrap;
}

.sa-badge-pending[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.sa-badge-submitted[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

/* ── Meta chips row ── */
.sa-item-meta[b-nyw02zzl28] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.sa-meta-chip[b-nyw02zzl28] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
}

.sa-meta-chip svg[b-nyw02zzl28] {
    flex-shrink: 0;
    opacity: 0.5;
}

.sa-meta-value[b-nyw02zzl28] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.sa-overdue-tag[b-nyw02zzl28] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground1);
}

/* ── Bottom row: progress + action ── */
.sa-item-bottom[b-nyw02zzl28] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.sa-progress-section[b-nyw02zzl28] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 180px;
}

.sa-progress-bar-bg[b-nyw02zzl28] {
    flex: 1;
    max-width: 200px;
    height: 6px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 3px;
    overflow: hidden;
}

.sa-progress-fill[b-nyw02zzl28] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.sa-fill-pending[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.sa-fill-submitted[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteGreenForeground2);
}

.sa-progress-label[b-nyw02zzl28] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground3);
    white-space: nowrap;
}

/* ── Buttons ── */
.sa-btn[b-nyw02zzl28] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.sa-btn-primary[b-nyw02zzl28] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.sa-btn-primary:hover[b-nyw02zzl28] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.sa-btn-ghost[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.sa-btn-ghost:hover[b-nyw02zzl28] {
    opacity: 0.85;
}

.sa-btn-submitted[b-nyw02zzl28] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.sa-btn-submitted:hover[b-nyw02zzl28] {
    opacity: 0.85;
}

.sa-btn-outline[b-nyw02zzl28] {
    background: transparent;
    color: var(--BEC-colorBrandForeground1);
    border: 1.5px solid var(--BEC-colorNeutralStroke1);
}

.sa-btn-outline:hover[b-nyw02zzl28] {
    background: var(--BEC-colorNeutralBackground3);
    border-color: var(--BEC-colorBrandForeground1);
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .sa-timeline-page[b-nyw02zzl28] {
        padding: 12px 16px 24px;
    }

    .sa-item-content[b-nyw02zzl28] {
        padding: 16px;
    }

    .sa-item-meta[b-nyw02zzl28] {
        gap: 12px;
    }

    .sa-item-bottom[b-nyw02zzl28] {
        flex-direction: column;
        align-items: stretch;
    }

    .sa-btn[b-nyw02zzl28] {
        justify-content: center;
    }
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Evaluations/ViewEvaluation/ViewEvaluation.razor.rz.scp.css */
/* ========================================
   VIEW EVALUATION — READ-ONLY DETAIL PAGE
   BEC Design System Tokens
   ======================================== */

/* ── Page Container ── */
.erp-page-container[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
    background: var(--BEC-colorNeutralBackground3);
    font-family: 'Inter', sans-serif;
    color: var(--BEC-colorNeutralForeground1);
}

/* ── Page Header ── */
.erp-page-header[b-8frg99ptd4] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--BEC-colorNeutralBackground1);
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--BEC-shadow2);
    min-height: 42px;
    flex-shrink: 0;
}

.header-left[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.back-btn[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 14px;
}

.back-btn:hover[b-8frg99ptd4] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandStroke1);
}

.page-title[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-8frg99ptd4] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.printed-no-badge[b-8frg99ptd4] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

/* ── State Containers (Loading / Error / Empty) ── */
.state-container[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 400px;
    padding: 2rem;
}

.loading-spinner[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--BEC-colorBrandForeground1);
}

.loading-spinner p[b-8frg99ptd4] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    margin: 0;
}

.error-card[b-8frg99ptd4],
.empty-card[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 2rem;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXLarge);
    box-shadow: var(--BEC-shadow4);
    max-width: 480px;
}

.error-card i[b-8frg99ptd4] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.empty-card i[b-8frg99ptd4] {
    color: var(--BEC-colorNeutralForeground3);
}

.error-card h3[b-8frg99ptd4],
.empty-card h3[b-8frg99ptd4] {
    margin: 0;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.error-card p[b-8frg99ptd4],
.empty-card p[b-8frg99ptd4] {
    margin: 0;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    line-height: 1.5;
}

.retry-btn[b-8frg99ptd4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid var(--BEC-colorBrandStroke1);
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.retry-btn:hover[b-8frg99ptd4] {
    opacity: 0.9;
}

.back-link-btn[b-8frg99ptd4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.back-link-btn:hover[b-8frg99ptd4] {
    border-color: var(--BEC-colorBrandStroke1);
    color: var(--BEC-colorBrandForeground1);
}

/* ── Main Content ── */
.eval-content[b-8frg99ptd4] {
    padding: 16px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ═══════════════════════════════════════════
   SECTION 1 — Metadata
   ═══════════════════════════════════════════ */

.metadata-section[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Score Highlight */
.score-highlight-card[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXLarge);
    box-shadow: var(--BEC-shadow4);
}

.score-divider[b-8frg99ptd4] {
    width: 1px;
    height: 48px;
    background: var(--BEC-colorNeutralStroke2);
    margin: 0 8px;
    flex-shrink: 0;
}

.self-score-circle[b-8frg99ptd4] {
    border-color: #0e7c7b !important;
    background: rgba(14, 124, 123, 0.08);
}

.self-assessment-label[b-8frg99ptd4] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0e7c7b;
}

.score-circle[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--BEC-colorNeutralBackground3);
    border: 3px solid var(--BEC-colorNeutralStroke1);
}

.score-circle.score-outstanding[b-8frg99ptd4] {
    border-color: #FFD700;
    background: linear-gradient(135deg, #FFF8E1, #FFFDE7);
}

.score-circle.score-excellent[b-8frg99ptd4] {
    border-color: var(--BEC-colorPaletteGreenBorder1);
    background: var(--BEC-colorPaletteGreenBackground2);
}

.score-circle.score-good[b-8frg99ptd4] {
    border-color: var(--BEC-colorPaletteBlueBorder1, var(--BEC-colorBrandStroke1));
    background: var(--BEC-colorPaletteBlueBackground2, var(--BEC-colorBrandBackground2));
}

.score-circle.score-average[b-8frg99ptd4] {
    border-color: var(--BEC-colorPaletteDarkOrangeBorder1, var(--BEC-colorPaletteYellowBorder1));
    background: var(--BEC-colorPaletteDarkOrangeBackground2, var(--BEC-colorPaletteYellowBackground2));
}

.score-circle.score-below[b-8frg99ptd4] {
    border-color: var(--BEC-colorPaletteRedBorder1);
    background: var(--BEC-colorPaletteRedBackground2);
}

.score-value[b-8frg99ptd4] {
    font-size: 24px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1;
}

.score-details[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.result-badge[b-8frg99ptd4] {
    display: inline-block;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    padding: 3px 12px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.result-excellent[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.result-good[b-8frg99ptd4] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground2);
}

.result-average[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2, var(--BEC-colorPaletteYellowBackground2));
    color: var(--BEC-colorPaletteDarkOrangeForeground2, var(--BEC-colorPaletteYellowForeground2));
}

.result-below[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground2);
}

.result-default[b-8frg99ptd4] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.verdict-text[b-8frg99ptd4] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    font-style: italic;
}

/* Metadata Grid */
.metadata-grid[b-8frg99ptd4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.meta-card[b-8frg99ptd4] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    transition: box-shadow 0.15s ease;
}

.meta-card:hover[b-8frg99ptd4] {
    box-shadow: var(--BEC-shadow2);
}

.meta-icon[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
    flex-shrink: 0;
}

.meta-content[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.meta-label[b-8frg99ptd4] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--BEC-colorNeutralForeground3);
}

.meta-value[b-8frg99ptd4] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meta-sub[b-8frg99ptd4] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

/* Stage Badge */
.stage-badge[b-8frg99ptd4] {
    display: inline-block;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    padding: 2px 8px;
    border-radius: 9999px;
}

.stage-draft[b-8frg99ptd4] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.stage-inprogress[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2, var(--BEC-colorPaletteYellowBackground2));
    color: var(--BEC-colorPaletteDarkOrangeForeground2, var(--BEC-colorPaletteYellowForeground2));
}

.stage-pending[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.stage-completed[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.stage-default[b-8frg99ptd4] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

.stage-selfappraisal[b-8frg99ptd4] {
    background: rgba(0, 128, 128, 0.12);
    color: #0e7c7b;
}

.stage-managerreview[b-8frg99ptd4] {
    background: rgba(0, 90, 158, 0.12);
    color: #005a9e;
}

.stage-pendingack[b-8frg99ptd4] {
    background: rgba(136, 23, 152, 0.12);
    color: #881798;
}

/* Self-Score Row within question cards */
.self-score-row[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0 4px 28px;
    font-size: 12px;
    color: #0e7c7b;
}

.self-score-row i[b-8frg99ptd4] {
    font-size: 11px;
    color: #0e7c7b;
}

.self-comment[b-8frg99ptd4] {
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* Additional Info Grid */
.additional-info-grid[b-8frg99ptd4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.info-block[b-8frg99ptd4] {
    padding: 14px 16px;
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusLarge);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.info-block h4[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.info-block h4 i[b-8frg99ptd4] {
    font-size: 12px;
}

.info-block p[b-8frg99ptd4] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ═══════════════════════════════════════════
   SECTION 2 — Questions & Scores
   ═══════════════════════════════════════════ */

.questions-section[b-8frg99ptd4],
.sw-section[b-8frg99ptd4],
.history-section[b-8frg99ptd4] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXLarge);
    box-shadow: var(--BEC-shadow4);
    padding: 16px 20px;
}

.section-header[b-8frg99ptd4] {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.section-header h2[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.section-header h2 i[b-8frg99ptd4] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 15px;
}

/* No Data Notice */
.no-data-notice[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
    justify-content: center;
}

.no-data-notice.compact[b-8frg99ptd4] {
    padding: 12px;
    font-size: 12px;
}

.no-data-notice i[b-8frg99ptd4] {
    font-size: 16px;
}

/* Category Group */
.category-group[b-8frg99ptd4] {
    margin-bottom: 16px;
}

.category-group:last-child[b-8frg99ptd4] {
    margin-bottom: 0;
}

.category-header[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--BEC-colorBrandBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: 8px;
}

.category-header h3[b-8frg99ptd4] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    margin: 0;
}

.category-score[b-8frg99ptd4] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
}

/* Question Card */
.question-card[b-8frg99ptd4] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    transition: background 0.1s ease;
}

.question-card:last-child[b-8frg99ptd4] {
    border-bottom: none;
}

.question-card:hover[b-8frg99ptd4] {
    background: var(--BEC-colorNeutralBackground3);
}

.question-row[b-8frg99ptd4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.question-text[b-8frg99ptd4] {
    flex: 1;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.5;
    min-width: 0;
}

.q-number[b-8frg99ptd4] {
    display: inline-block;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground3);
    background: var(--BEC-colorNeutralBackground3);
    padding: 1px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    margin-right: 6px;
    vertical-align: middle;
}

.question-score-group[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.score-pill[b-8frg99ptd4] {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

.score-pill.qscore-outstanding[b-8frg99ptd4] {
    background: linear-gradient(135deg, #FFF8E1, #FFFDE7);
    color: #B8860B;
    border: 1px solid #FFD700;
}

.score-pill.qscore-high[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.score-pill.qscore-mid[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2, var(--BEC-colorPaletteYellowBackground2));
    color: var(--BEC-colorPaletteDarkOrangeForeground2, var(--BEC-colorPaletteYellowForeground2));
}

.score-pill.qscore-low[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground2);
}

.score-num[b-8frg99ptd4] {
    font-weight: var(--BEC-fontWeightBold);
}

.score-sep[b-8frg99ptd4] {
    color: var(--BEC-colorNeutralForeground3);
    font-weight: normal;
}

.score-max[b-8frg99ptd4] {
    font-weight: normal;
    font-size: 11px;
}

.weighting-badge[b-8frg99ptd4] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    padding: 2px 6px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusSmall);
}

/* Sub-rows under questions */
.adjusted-score-row[b-8frg99ptd4],
.self-score-row[b-8frg99ptd4],
.comment-row[b-8frg99ptd4],
.manager-feedback-row[b-8frg99ptd4] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    padding-left: 28px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.5;
}

.adjusted-score-row i[b-8frg99ptd4],
.self-score-row i[b-8frg99ptd4],
.comment-row i[b-8frg99ptd4],
.manager-feedback-row i[b-8frg99ptd4] {
    margin-top: 2px;
    font-size: 11px;
    flex-shrink: 0;
}

.adjusted-score-row i[b-8frg99ptd4] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.self-score-row i[b-8frg99ptd4] {
    color: var(--BEC-colorBrandForeground1);
}

.comment-row i[b-8frg99ptd4] {
    color: var(--BEC-colorNeutralForeground3);
}

.manager-feedback-row i[b-8frg99ptd4] {
    color: var(--BEC-colorPaletteGreenForeground2);
}

.adjustment-reason[b-8frg99ptd4],
.self-comment[b-8frg99ptd4] {
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

/* ═══════════════════════════════════════════
   SECTION 3 — Strengths & Weaknesses
   ═══════════════════════════════════════════ */

.sw-section[b-8frg99ptd4] {
    padding: 16px 20px;
}

.sw-columns[b-8frg99ptd4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 768px) {
    .sw-columns[b-8frg99ptd4] {
        grid-template-columns: 1fr;
    }
}

.sw-column[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sw-column-header[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: 4px;
}

.sw-column-header h3[b-8frg99ptd4] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0;
    flex: 1;
}

.strengths-header[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.weaknesses-header[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground2);
}

.sw-count[b-8frg99ptd4] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightBold);
    padding: 2px 8px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.5);
}

.sw-card[b-8frg99ptd4] {
    padding: 10px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    transition: box-shadow 0.15s ease;
}

.sw-card:hover[b-8frg99ptd4] {
    box-shadow: var(--BEC-shadow2);
}

.sw-card-body[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sw-description[b-8frg99ptd4] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1.5;
}

.sw-category-tag[b-8frg99ptd4],
.sw-impact-tag[b-8frg99ptd4] {
    display: inline-block;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    padding: 2px 8px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sw-category-tag[b-8frg99ptd4] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.sw-impact-tag[b-8frg99ptd4] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground2);
}

/* ═══════════════════════════════════════════
   SECTION 3B — Employee Acknowledgment
   ═══════════════════════════════════════════ */

.acknowledgment-section[b-8frg99ptd4] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXLarge);
    box-shadow: var(--BEC-shadow4);
    padding: 0;
    overflow: hidden;
    border-left: 4px solid #8764B8;
}

.acknowledgment-card[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
}

.acknowledgment-header[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(135, 100, 184, 0.08);
    border-bottom: 1px solid rgba(135, 100, 184, 0.15);
}

.acknowledgment-icon[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--BEC-borderRadiusMedium);
    background: rgba(135, 100, 184, 0.15);
    color: #8764B8;
    font-size: 16px;
    flex-shrink: 0;
}

.acknowledgment-title-group[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.acknowledgment-title[b-8frg99ptd4] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: #6B4FA0;
    margin: 0;
}

.acknowledgment-date[b-8frg99ptd4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

.acknowledgment-date i[b-8frg99ptd4] {
    font-size: 10px;
}

.acknowledgment-body[b-8frg99ptd4] {
    padding: 16px 20px;
}

.acknowledgment-comment[b-8frg99ptd4] {
    margin: 0;
    padding: 12px 16px;
    background: rgba(135, 100, 184, 0.04);
    border-left: 3px solid #8764B8;
    border-radius: 0 var(--BEC-borderRadiusMedium) var(--BEC-borderRadiusMedium) 0;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
    font-style: italic;
    white-space: pre-wrap;
}

/* ═══════════════════════════════════════════
   SECTION 4 — Stage History Timeline
   ═══════════════════════════════════════════ */

.timeline-container[b-8frg99ptd4] {
    position: relative;
    padding-left: 20px;
}

.timeline-container[b-8frg99ptd4]::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--BEC-colorNeutralStroke2);
}

.timeline-entry[b-8frg99ptd4] {
    position: relative;
    padding: 0 0 16px 16px;
}

.timeline-entry:last-child[b-8frg99ptd4] {
    padding-bottom: 0;
}

.timeline-dot-marker[b-8frg99ptd4] {
    position: absolute;
    left: -16px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground);
    border: 2px solid var(--BEC-colorNeutralBackground1);
    z-index: 1;
}

.timeline-entry-content[b-8frg99ptd4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.timeline-transition[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.stage-from[b-8frg99ptd4] {
    color: var(--BEC-colorNeutralForeground3);
}

.timeline-transition i[b-8frg99ptd4] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
}

.stage-to[b-8frg99ptd4] {
    color: var(--BEC-colorNeutralForeground1);
}

.timeline-meta-row[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.timeline-date[b-8frg99ptd4],
.timeline-user[b-8frg99ptd4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

.timeline-date i[b-8frg99ptd4],
.timeline-user i[b-8frg99ptd4] {
    font-size: 10px;
}

.timeline-reason[b-8frg99ptd4],
.timeline-notes[b-8frg99ptd4] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.4;
}

.timeline-reason strong[b-8frg99ptd4],
.timeline-notes strong[b-8frg99ptd4] {
    color: var(--BEC-colorNeutralForeground1);
}

.timeline-changed-by[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2, #555);
    font-style: italic;
    margin-top: 2px;
}

.timeline-changed-by i[b-8frg99ptd4] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3, #888);
}

.pending-approval-banner[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--BEC-colorPaletteYellowBackground1, #fff8e1);
    border: 1px solid var(--BEC-colorPaletteYellowBorder1, #ffe082);
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 12px;
}

.pending-approval-banner i[b-8frg99ptd4] {
    color: var(--BEC-colorPaletteYellowForeground1, #f9a825);
}

.pending-review-banner[b-8frg99ptd4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--BEC-colorPaletteBlueBorderActive, #e3f2fd);
    border: 1px solid var(--BEC-colorPaletteBlueBorder1, #90caf9);
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 12px;
}

.pending-review-banner i[b-8frg99ptd4] {
    color: var(--BEC-colorBrandBackground, #1976d2);
}

.stage-returnedcorrection[b-8frg99ptd4] {
    background: var(--BEC-colorPaletteRedBackground1, #ffebee);
    color: var(--BEC-colorPaletteRedForeground1, #c62828);
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */

.page-footer[b-8frg99ptd4] {
    padding: 16px 0 0;
    display: flex;
    justify-content: flex-start;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 600px) {
    .eval-content[b-8frg99ptd4] {
        padding: 12px 12px 24px;
    }

    .metadata-grid[b-8frg99ptd4] {
        grid-template-columns: 1fr;
    }

    .score-highlight-card[b-8frg99ptd4] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .question-row[b-8frg99ptd4] {
        flex-direction: column;
        gap: 6px;
    }

    .question-score-group[b-8frg99ptd4] {
        align-self: flex-end;
    }

    .additional-info-grid[b-8frg99ptd4] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   PRINT STYLES — @media print
   ======================================== */
@media print {
    /* Remove fixed height and overflow so full content prints */
    .erp-page-container[b-8frg99ptd4] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        background: white !important;
    }

    .eval-content[b-8frg99ptd4] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Hide the page header (back button, title) */
    .erp-page-header[b-8frg99ptd4] {
        display: none !important;
    }

    /* Hide interactive state containers */
    .state-container[b-8frg99ptd4] {
        display: none !important;
    }

    /* Hide the footer back button */
    .page-footer[b-8frg99ptd4] {
        display: none !important;
    }

    /* Score highlight card: preserve colors */
    .score-highlight-card[b-8frg99ptd4] {
        box-shadow: none !important;
        border: 1px solid #ccc;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .score-circle[b-8frg99ptd4] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .result-badge[b-8frg99ptd4] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Metadata cards: simplify for print */
    .metadata-grid[b-8frg99ptd4] {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .meta-card[b-8frg99ptd4] {
        box-shadow: none !important;
        border: 1px solid #ddd;
        padding: 8px 10px;
        page-break-inside: avoid;
    }

    .meta-icon[b-8frg99ptd4] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Sections: remove shadows for print */
    .questions-section[b-8frg99ptd4],
    .sw-section[b-8frg99ptd4],
    .history-section[b-8frg99ptd4] {
        box-shadow: none !important;
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }

    /* Category headers: preserve color */
    .category-header[b-8frg99ptd4] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
        page-break-after: avoid;
    }

    /* Question cards: avoid breaks */
    .question-card[b-8frg99ptd4] {
        page-break-inside: avoid;
    }

    /* Score pills: preserve colors */
    .score-pill[b-8frg99ptd4] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Stage badge: preserve colors */
    .stage-badge[b-8frg99ptd4] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Strengths/Weaknesses headers: preserve colors */
    .sw-column-header[b-8frg99ptd4] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Timeline: preserve for print */
    .timeline-container[b-8frg99ptd4]::before {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .timeline-dot-marker[b-8frg99ptd4] {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .timeline-entry[b-8frg99ptd4] {
        page-break-inside: avoid;
    }

    /* Page setup */
    @page {
        size: A4;
        margin: 15mm 10mm;
    }
}

/* Arabic question text */
.q-text-arabic[b-8frg99ptd4] {
    direction: rtl;
    text-align: right;
    font-size: 0.9em;
    color: var(--BEC-TextSecondary, #555);
    margin-top: 4px;
    font-style: italic;
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/MasterData/EmployeeEvaluator/EmployeeEvaluatorAdministration.razor.rz.scp.css */
/* ========================================
   EMPLOYEE EVALUATOR ADMINISTRATION PAGE
   100% Identical to Evaluation Template Administration
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-j1w3mnfhnl] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-j1w3mnfhnl] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-j1w3mnfhnl] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-j1w3mnfhnl] {
    transform: scale(0.98);
}

.page-subtitle[b-j1w3mnfhnl] {
    display: none;
}

.header-right[b-j1w3mnfhnl] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-j1w3mnfhnl] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-j1w3mnfhnl] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-j1w3mnfhnl] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-j1w3mnfhnl] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-j1w3mnfhnl] {
    flex: 1;
    min-height: 0;
    padding: 4px 20px 0 20px;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-j1w3mnfhnl] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-j1w3mnfhnl] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-j1w3mnfhnl] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-j1w3mnfhnl] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-j1w3mnfhnl] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-j1w3mnfhnl] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Grid Header - Rounded Top Corners */
[b-j1w3mnfhnl] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-j1w3mnfhnl] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-j1w3mnfhnl] .e-grid .e-row.e-selectionbackground,
[b-j1w3mnfhnl] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-j1w3mnfhnl] .e-grid .e-row.e-selectionbackground:hover,
[b-j1w3mnfhnl] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-j1w3mnfhnl] .e-grid .e-row.e-selectionbackground td:first-child,
[b-j1w3mnfhnl] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-j1w3mnfhnl] .e-grid .e-row {
    height: 32px !important;
}

[b-j1w3mnfhnl] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-j1w3mnfhnl] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-j1w3mnfhnl] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-j1w3mnfhnl 1s linear infinite;
}

@keyframes spin-b-j1w3mnfhnl {
    to { transform: rotate(360deg); }
}

.loading-container p[b-j1w3mnfhnl] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-j1w3mnfhnl] {
    font-size: 48px;
}

.error-container p[b-j1w3mnfhnl] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-j1w3mnfhnl] {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-j1w3mnfhnl] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-j1w3mnfhnl] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-j1w3mnfhnl] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ── HR Proxy Badge ── */
.badge-proxy[b-j1w3mnfhnl] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold, 600);
    color: var(--BEC-colorBrandForeground1, #1e40af);
    background: var(--BEC-colorBrandBackground1, #dbeafe);
    border: 1px solid var(--BEC-colorBrandStroke1, #3b82f6);
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.4;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
[b-j1w3mnfhnl] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-j1w3mnfhnl] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-j1w3mnfhnl] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-j1w3mnfhnl] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

/* ========================================
   WIZARD SIDEBAR STYLING (100% Copy from System Module Administration)
   ======================================== */
.sidebar-header[b-j1w3mnfhnl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-j1w3mnfhnl] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-j1w3mnfhnl] {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground2);
}

.sidebar-content[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-j1w3mnfhnl] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px;
    padding-bottom: 80px; /* Add bottom padding to prevent content from being hidden behind footer */
    position: relative;
}

/* Prevent horizontal scroll in wizard grid */
.sidebar-step-content[b-j1w3mnfhnl]  .e-grid {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

.sidebar-step-content[b-j1w3mnfhnl]  .e-grid .e-gridcontent {
    overflow-x: auto !important;
}

.sidebar-step-content[b-j1w3mnfhnl]  .e-grid .e-content {
    overflow-x: auto !important;
}

.wizard-step[b-j1w3mnfhnl] {
    max-width: 100%;
}

.step-title[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
}

.step-title i[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
}

.step-description[b-j1w3mnfhnl] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 24px 0;
}

/* Form Group */
.form-group[b-j1w3mnfhnl] {
    margin-bottom: 20px;
}

.form-label[b-j1w3mnfhnl] {
    display: block;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
    text-align: left;
}

.form-label.required[b-j1w3mnfhnl]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: 600;
}

/* ========================================
   COMPACT FORM STYLES (Edit Wizard)
   ======================================== */

/* 2-Column Grid Layout */
.form-grid-2col[b-j1w3mnfhnl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

/* Compact Form Group */
.form-group-compact[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Compact Form Label */
.form-label-compact[b-j1w3mnfhnl] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    text-align: left;
}

.form-label-compact.required[b-j1w3mnfhnl]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: 600;
}

/* Compact Input Fields */
[b-j1w3mnfhnl] .compact-input .e-input-group {
    height: 28px !important;
}

[b-j1w3mnfhnl] .compact-input .e-input-group input {
    font-size: 12px !important;
    padding: 4px 8px !important;
}

/* Compact Textarea */
[b-j1w3mnfhnl] .compact-textarea .e-input-group {
    min-height: 60px !important;
}

[b-j1w3mnfhnl] .compact-textarea .e-input-group textarea {
    font-size: 11px !important;
    padding: 6px 8px !important;
    line-height: 1.4 !important;
}

/* ✅ AUTO-GENERATION INFO BANNER */
.auto-gen-info[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--BEC-colorBrandBackground2);
    border: 1px solid var(--BEC-colorBrandBackground);
    border-radius: 8px;
    font-size: 14px;
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: 8px;
}

.auto-gen-info i[b-j1w3mnfhnl] {
    font-size: 18px;
    color: var(--BEC-colorBrandForeground1);
    animation: sparkle-b-j1w3mnfhnl 2s ease-in-out infinite;
}

@keyframes sparkle-b-j1w3mnfhnl {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.auto-gen-info strong[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

.form-value[b-j1w3mnfhnl] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    min-height: 34px;
    display: flex;
    align-items: center;
    text-align: left;
    justify-content: flex-start;
}

.form-row[b-j1w3mnfhnl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rtl-text[b-j1w3mnfhnl] {
    direction: rtl;
    text-align: right;
}

/* Sidebar Footer - Positioned at absolute bottom */
.sidebar-footer[b-j1w3mnfhnl] {
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* Create Validation Hint */
.create-validation-hint[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 12px;
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.create-validation-hint i[b-j1w3mnfhnl] {
    flex-shrink: 0;
}

/* Footer Buttons Container - Right Aligned */
.footer-buttons[b-j1w3mnfhnl] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Buttons (HTML buttons with custom CSS) - Standardized */
.btn[b-j1w3mnfhnl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    height: 36px;
    white-space: nowrap;
}

.btn:disabled[b-j1w3mnfhnl] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Secondary/Cancel Button - Gray */
.btn-secondary[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.btn-secondary:hover:not(:disabled)[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground4);
    border-color: var(--BEC-colorNeutralStroke2);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-secondary:active:not(:disabled)[b-j1w3mnfhnl] {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Success/Save Button - Green */
.btn-success[b-j1w3mnfhnl] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorPaletteGreenForeground1);
}

.btn-success:hover:not(:disabled)[b-j1w3mnfhnl] {
    background: var(--BEC-colorPaletteGreenForeground2);
    border-color: var(--BEC-colorPaletteGreenForeground2);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-success:active:not(:disabled)[b-j1w3mnfhnl] {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn i[b-j1w3mnfhnl] {
    font-size: 14px;
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-j1w3mnfhnl] .notification-success .e-dlg-header-content {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-j1w3mnfhnl] .notification-success .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-j1w3mnfhnl] .notification-success .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteGreenForeground2);
    border-color: var(--BEC-colorPaletteGreenForeground2);
}

/* Error Notification */
[b-j1w3mnfhnl] .notification-error .e-dlg-header-content {
    background: var(--BEC-colorPaletteRedForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-j1w3mnfhnl] .notification-error .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-j1w3mnfhnl] .notification-error .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteRedForeground1);
    border-color: var(--BEC-colorPaletteRedForeground1);
}

/* Warning Notification */
[b-j1w3mnfhnl] .notification-warning .e-dlg-header-content {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-j1w3mnfhnl] .notification-warning .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-j1w3mnfhnl] .notification-warning .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    border-color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

/* Info Notification */
[b-j1w3mnfhnl] .notification-info .e-dlg-header-content {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-j1w3mnfhnl] .notification-info .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-j1w3mnfhnl] .notification-info .e-footer-content .e-btn-primary {
    background: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandForeground1);
}

/* Dialog Content Styling */
[b-j1w3mnfhnl] .notification-success .e-dlg-content,
[b-j1w3mnfhnl] .notification-error .e-dlg-content,
[b-j1w3mnfhnl] .notification-warning .e-dlg-content,
[b-j1w3mnfhnl] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: var(--BEC-colorNeutralForeground1);
}

/* Close Icon Color */
[b-j1w3mnfhnl] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-j1w3mnfhnl] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-j1w3mnfhnl] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-j1w3mnfhnl] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-j1w3mnfhnl] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-j1w3mnfhnl] {
    margin-bottom: 24px;
    animation: fadeInUp-b-j1w3mnfhnl 0.6s ease;
}

.step-title[b-j1w3mnfhnl] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-j1w3mnfhnl] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-j1w3mnfhnl] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorBrandBackground2);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Help List */
.help-list[b-j1w3mnfhnl] {
    margin: 8px 0 0 0;
    padding-left: 20px;
    list-style-type: disc;
}

.help-list li[b-j1w3mnfhnl] {
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2);
}

/* Features List */
.features-list[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-j1w3mnfhnl] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-j1w3mnfhnl] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-j1w3mnfhnl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-j1w3mnfhnl] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-j1w3mnfhnl] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
    font-size: 14px;
}

.example-step ul[b-j1w3mnfhnl] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-j1w3mnfhnl] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-j1w3mnfhnl] {
    background: var(--BEC-colorPaletteGreenBackground2);
    border: 1px solid var(--BEC-colorPaletteGreenForeground2);
}

.use-case i[b-j1w3mnfhnl] {
    color: var(--BEC-colorPaletteGreenForeground2);
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-j1w3mnfhnl] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-j1w3mnfhnl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-j1w3mnfhnl] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    border-left: 4px solid var(--BEC-colorPaletteDarkOrangeForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-j1w3mnfhnl] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-j1w3mnfhnl] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-j1w3mnfhnl] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-j1w3mnfhnl] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions */
.wizard-actions[b-j1w3mnfhnl] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.wizard-actions .btn-next[b-j1w3mnfhnl] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorBrandBackground);
}

.wizard-actions .btn-next:hover:not(:disabled)[b-j1w3mnfhnl] {
    background: var(--BEC-colorBrandBackgroundHover);
    border-color: var(--BEC-colorBrandBackgroundHover);
}

.wizard-actions .btn-cancel[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.wizard-actions .btn-cancel:hover:not(:disabled)[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground4);
    border-color: var(--BEC-colorNeutralStroke2);
}

/* Animations */
@keyframes fadeInUp-b-j1w3mnfhnl {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   FORM SECTIONS
   ======================================== */
.form-section[b-j1w3mnfhnl] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.form-section:first-child[b-j1w3mnfhnl] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.section-title[b-j1w3mnfhnl] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-title i[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
}

.form-section h4[b-j1w3mnfhnl] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section h4 i[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.required[b-j1w3mnfhnl] {
    color: var(--BEC-colorPaletteRedForeground1);
}

/* ========================================
   WIZARD CONTAINER
   ======================================== */
.wizard-container[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wizard-header[b-j1w3mnfhnl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.wizard-header h3[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
}

.wizard-header h3 i[b-j1w3mnfhnl] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.close-button[b-j1w3mnfhnl] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.close-button:hover[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground2);
}

.close-button i[b-j1w3mnfhnl] {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground2);
}

.wizard-content[b-j1w3mnfhnl] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px;
}

.wizard-footer[b-j1w3mnfhnl] {
    padding: 10px 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Footer buttons styling is handled by .footer-buttons and .btn classes above */

.spinner-small[b-j1w3mnfhnl] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-j1w3mnfhnl 0.6s linear infinite;
}

/* ========================================
   DIALOG STYLES
   ======================================== */
.dialog-header-danger[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: 600;
    font-size: 18px;
}

.dialog-header-danger i[b-j1w3mnfhnl] {
    font-size: 20px;
}

.warning-text[b-j1w3mnfhnl] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-top: 16px;
    font-size: 14px;
}

.warning-text-red[b-j1w3mnfhnl] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-top: 16px;
}

/* ========================================
   DETAIL TEMPLATE STYLING - SEAMLESS EXPANSION
   ======================================== */
.detail-template-container[b-j1w3mnfhnl] {
    padding: 0;
    background: transparent;
    border: none;
    margin: 0;
}

.detail-header[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 12px 16px;
    background: transparent;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.detail-header h4[b-j1w3mnfhnl] {
    margin: 0;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-header .badge[b-j1w3mnfhnl] {
    font-size: 12px;
    padding: 4px 8px;
}

/* Remove nested grid borders/boxes - seamless expansion */
.detail-template-container .e-grid[b-j1w3mnfhnl],
.detail-nested-grid[b-j1w3mnfhnl] {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.detail-template-container .e-grid .e-gridheader[b-j1w3mnfhnl],
.detail-nested-grid .e-gridheader[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground2) !important;
    border: none !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: 0 !important;
}

.detail-template-container .e-grid .e-gridcontent[b-j1w3mnfhnl],
.detail-nested-grid .e-gridcontent[b-j1w3mnfhnl] {
    background: transparent !important;
    border: none !important;
}

.detail-template-container .e-grid .e-row[b-j1w3mnfhnl],
.detail-nested-grid .e-row[b-j1w3mnfhnl] {
    background: transparent !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
}

.detail-template-container .e-grid .e-altrow[b-j1w3mnfhnl],
.detail-nested-grid .e-altrow[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground2) !important;
}

.detail-template-container .e-grid .e-row:hover[b-j1w3mnfhnl],
.detail-nested-grid .e-row:hover[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground3) !important;
}

/* Remove grid container padding/margins */
.detail-template-container .e-grid .e-content[b-j1w3mnfhnl],
.detail-nested-grid .e-content[b-j1w3mnfhnl] {
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove grid toolbar if any */
.detail-template-container .e-grid .e-grid-toolbar[b-j1w3mnfhnl],
.detail-nested-grid .e-grid-toolbar[b-j1w3mnfhnl] {
    display: none !important;
}

/* ========================================
   ORGANIZATION CHART CONTAINER
   ======================================== */
.org-chart-container[b-j1w3mnfhnl] {
    width: 100%;
    height: 400px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground1);
    overflow: hidden;
}

.no-hierarchy-message[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    border: 1px dashed var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground2);
}

.no-hierarchy-message i[b-j1w3mnfhnl] {
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   ORGANIZATION CHART NODE TEMPLATE (100% Syncfusion Standard)
   Exact match from: https://blazor.syncfusion.com/demos/diagram/organization-model
   ======================================== */
.e-orgchart-template-div-style[b-j1w3mnfhnl] {
    position: absolute;
    width: 177px;
    height: 54px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    box-sizing: border-box;
    border-radius: 5px;
}

.e-orgchart-selected[b-j1w3mnfhnl] {
    border-color: var(--BEC-colorBrandBackground) !important;
    border-width: 2px !important;
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.2);
}

.e-orgchart-template-image-placeholder[b-j1w3mnfhnl] {
    width: 52px;
    height: 52px;
    float: left;
    background-size: 100% 100%;
}

.e-orgchart-template-code-style[b-j1w3mnfhnl] {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 12px;
    letter-spacing: 0.1px;
    color: var(--BEC-colorBrandForeground1);
    margin: 0;
    padding: 0;
}

.e-orgchart-template-name-style[b-j1w3mnfhnl] {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.1px;
    color: var(--BEC-colorNeutralForeground1);
    margin-top: 8px;
    height: 8px;
}

.e-orgchart-template-role-style[b-j1w3mnfhnl] {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.1px;
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   EVALUATION CARDS (View Fields)
   ======================================== */
.evaluation-card[b-j1w3mnfhnl] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.evaluation-card:hover[b-j1w3mnfhnl] {
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.evaluation-card-header[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.evaluation-year[b-j1w3mnfhnl] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding: 4px 8px;
    white-space: nowrap;
}

.evaluation-period[b-j1w3mnfhnl] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    padding: 4px 8px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusSmall);
    white-space: nowrap;
}

.evaluation-type[b-j1w3mnfhnl] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground);
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    white-space: nowrap;
}

.no-evaluations-message[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    border: 1px dashed var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground2);
}

.no-evaluations-message i[b-j1w3mnfhnl] {
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   BULK ASSIGN WIZARD - TEAM MEMBERS
   ======================================== */
.team-members-list[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.team-member-card[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.team-member-card:hover[b-j1w3mnfhnl] {
    border-color: var(--BEC-colorBrandBackground);
    background: var(--BEC-colorNeutralBackground2);
}

.member-info[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.member-code[b-j1w3mnfhnl] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorBrandBackground);
    padding: 3px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    min-width: 70px;
    text-align: center;
}

.member-name[b-j1w3mnfhnl] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

.remove-member-btn[b-j1w3mnfhnl] {
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--BEC-colorNeutralForeground2);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.remove-member-btn:hover[b-j1w3mnfhnl] {
    background: var(--BEC-colorPaletteRedBackground1);
    border-color: var(--BEC-colorPaletteRedForeground1);
    color: var(--BEC-colorPaletteRedForeground1);
}

.remove-member-btn i[b-j1w3mnfhnl] {
    font-size: 14px;
}

.info-message[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    background: var(--BEC-colorBrandBackground2);
    border: 1px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    color: var(--BEC-colorBrandForeground1);
}

.info-message i[b-j1w3mnfhnl] {
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
    flex-shrink: 0;
}

/* ========================================
   COLUMN CHOOSER DIALOG - Matches Excel Filter Design
   ======================================== */
[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
    z-index: 10000 !important;
}

/* Column Chooser Dialog Header */
[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    font-size: 14px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-dlg-header .e-dlg-header-content {
    padding: 0 !important;
}

/* Column Chooser Dialog Content */
[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
    padding: 16px !important;
}

/* Column Chooser Dialog Footer (OK/Cancel buttons) */
[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

/* Column Chooser Search Box - Matches Excel Filter Search */
[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-ccsearch {
    margin-bottom: 8px !important;
}

[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-ccsearch input {
    height: 32px !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
}

[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-ccsearch .e-input-group {
    height: 32px !important;
}

/* Column Chooser List Items - Matches Excel Filter Checkbox List */
[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist {
    margin: 0 !important;
}

[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li {
    padding: 8px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}

[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Column Chooser Checkbox Items */
[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-frame {
    border-radius: 2px !important;
    width: 16px !important;
    height: 16px !important;
}

[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkbox-wrapper {
    margin-right: 8px !important;
}

[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-label {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* Column Chooser Buttons */
[b-j1w3mnfhnl] .e-grid .e-dialog.e-ccdlg .e-footer-content button {
    height: 32px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

/* ========================================
   TOOLBAR DANGER BUTTON (Full Delete)
   ======================================== */
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item .toolbar-btn-danger .e-tbar-btn .e-icons,
[b-j1w3mnfhnl] .e-toolbar .e-toolbar-item .toolbar-btn-danger .e-tbar-btn .e-tbar-btn-text,
[b-j1w3mnfhnl] .e-toolbar .toolbar-btn-danger .e-tbar-btn .e-icons,
[b-j1w3mnfhnl] .e-toolbar .toolbar-btn-danger .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorPaletteRedForeground1) !important;
}

[b-j1w3mnfhnl] .e-toolbar .toolbar-btn-danger .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-j1w3mnfhnl] .e-toolbar .toolbar-btn-danger .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorPaletteRedForeground2) !important;
}

/* ========================================
   REASSIGN WARNING BANNER (inside sidebar)
   ======================================== */
.reassign-warning-banner[b-j1w3mnfhnl] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    border-left: 4px solid var(--BEC-colorPaletteDarkOrangeForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.5;
}

.reassign-warning-banner i[b-j1w3mnfhnl] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ========================================
   REASSIGN CURRENT ASSIGNMENT SUMMARY
   ======================================== */
.reassign-current-summary[b-j1w3mnfhnl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.reassign-current-summary .summary-item[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.reassign-current-summary .summary-label[b-j1w3mnfhnl] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground2);
    min-width: 130px;
}

.reassign-current-summary .summary-value[b-j1w3mnfhnl] {
    color: var(--BEC-colorNeutralForeground1);
}

.reassign-current-summary .summary-assigned[b-j1w3mnfhnl] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.reassign-current-summary .summary-assigned i[b-j1w3mnfhnl] {
    font-size: 12px;
}

.reassign-current-summary .summary-not-assigned[b-j1w3mnfhnl] {
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

.reassign-current-summary .summary-not-assigned i[b-j1w3mnfhnl] {
    font-size: 12px;
}

/* ========================================
   FULL DELETE PREVIEW LIST
   ======================================== */
.full-delete-preview-list[b-j1w3mnfhnl] {
    padding: 12px 16px;
    margin: 12px 0;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.full-delete-preview-list ul[b-j1w3mnfhnl] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.full-delete-preview-list li[b-j1w3mnfhnl] {
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground1);
}

.full-delete-final-warning[b-j1w3mnfhnl] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--BEC-colorPaletteRedBackground1);
    border: 1px solid var(--BEC-colorPaletteRedForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorPaletteRedForeground1);
    font-size: 14px;
}

.full-delete-final-warning i[b-j1w3mnfhnl] {
    font-size: 18px;
    flex-shrink: 0;
}

/* Danger button in dialog footer */
[b-j1w3mnfhnl] .e-dialog .e-footer-content .e-danger,
[b-j1w3mnfhnl] .e-dialog .e-footer-content .e-btn.e-danger {
    background: var(--BEC-colorPaletteRedForeground1) !important;
    border-color: var(--BEC-colorPaletteRedForeground1) !important;
    color: var(--BEC-colorNeutralBackground1) !important;
}

[b-j1w3mnfhnl] .e-dialog .e-footer-content .e-danger:hover,
[b-j1w3mnfhnl] .e-dialog .e-footer-content .e-btn.e-danger:hover {
    background: var(--BEC-colorPaletteRedForeground2) !important;
    border-color: var(--BEC-colorPaletteRedForeground2) !important;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .stats-container[b-j1w3mnfhnl] {
        display: grid;
        grid-template-columns: repeat(3, auto);
        gap: 4px 12px;
    }

    .stat-divider[b-j1w3mnfhnl] {
        display: none;
    }
}

/* /Components/Pages/MainLayout/PerformanceEvaluation/MasterData/EvaluationPeriod/EvaluationPeriodAdministration.razor.rz.scp.css */
/* ========================================
   EVALUATION PERIOD ADMINISTRATION - CALENDAR FIRST
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-4kfbn5vd27] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-4kfbn5vd27] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-4kfbn5vd27] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-4kfbn5vd27] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-4kfbn5vd27] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-4kfbn5vd27] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-4kfbn5vd27] {
    transform: scale(0.98);
}

.header-right[b-4kfbn5vd27] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-4kfbn5vd27] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-4kfbn5vd27] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-4kfbn5vd27] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-4kfbn5vd27] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.page-content[b-4kfbn5vd27] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-4kfbn5vd27] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-4kfbn5vd27] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-4kfbn5vd27] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-4kfbn5vd27] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-4kfbn5vd27] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-4kfbn5vd27] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-4kfbn5vd27] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-4kfbn5vd27] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-4kfbn5vd27] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-4kfbn5vd27] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-4kfbn5vd27] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   CHECKBOX IN TOOLBAR - INLINE WITH BUTTONS
   ======================================== */
.toolbar-checkbox-label[b-4kfbn5vd27] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.toolbar-checkbox[b-4kfbn5vd27] {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    accent-color: var(--BEC-colorBrandBackground) !important;
}

.toolbar-checkbox-label:hover[b-4kfbn5vd27] {
    color: var(--BEC-colorBrandBackground) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-4kfbn5vd27] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-4kfbn5vd27] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-4kfbn5vd27] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   LOADING & ERROR STATES
   ======================================== */
.loading-state[b-4kfbn5vd27] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    min-height: 300px;
}

.spinner[b-4kfbn5vd27] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-colorNeutralBackground3);
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: 50%;
    animation: spin-b-4kfbn5vd27 1s linear infinite;
}

@keyframes spin-b-4kfbn5vd27 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-state p[b-4kfbn5vd27],
.error-state p[b-4kfbn5vd27] {
    margin-top: 16px;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

.error-state[b-4kfbn5vd27] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    min-height: 300px;
}

.error-state i[b-4kfbn5vd27] {
    font-size: 48px;
    color: var(--BEC-colorPaletteRedForeground1);
    margin-bottom: 16px;
}

/* ========================================
   GRID STYLING
   ======================================== */
[b-4kfbn5vd27] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    margin-top: 1px;
}

[b-4kfbn5vd27] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

[b-4kfbn5vd27] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

[b-4kfbn5vd27] .e-grid .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-4kfbn5vd27] .e-grid .e-row {
    height: 32px !important;
}

[b-4kfbn5vd27] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

[b-4kfbn5vd27] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-4kfbn5vd27] .e-grid .e-row.e-selectionbackground,
[b-4kfbn5vd27] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-4kfbn5vd27] .e-grid .e-row.e-selectionbackground:hover,
[b-4kfbn5vd27] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-4kfbn5vd27] .e-grid .e-row.e-selectionbackground td:first-child,
[b-4kfbn5vd27] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* ========================================
   BADGE STYLING
   ======================================== */
.badge[b-4kfbn5vd27] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-primary[b-4kfbn5vd27] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-success[b-4kfbn5vd27] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.badge-inactive[b-4kfbn5vd27] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-info[b-4kfbn5vd27] {
    background: var(--BEC-colorPaletteBlueForeground3);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.badge-warning[b-4kfbn5vd27] {
    background: var(--BEC-colorPaletteYellowBackground2);
    color: var(--BEC-colorPaletteYellowForeground1);
}

.badge-secondary[b-4kfbn5vd27] {
    background: var(--BEC-colorNeutralBackground5);
    color: var(--BEC-colorNeutralForeground2);
}

.duration-days[b-4kfbn5vd27] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 11px;
    margin-left: 8px;
}

/* ========================================
   WIZARD SIDEBAR CONTAINER
   ======================================== */
[b-4kfbn5vd27] .e-sidebar {
    box-shadow: var(--BEC-shadow16);
}

.wizard-container[b-4kfbn5vd27] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--BEC-colorNeutralBackground1);
}

.wizard-header[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-bottom: 1px solid var(--BEC-colorBrandBackground2);
}

.wizard-header h2[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0;
}

.wizard-header .close-btn[b-4kfbn5vd27] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForegroundOnBrand);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.wizard-header .close-btn:hover[b-4kfbn5vd27] {
    background: rgba(255, 255, 255, 0.2);
}

.wizard-content[b-4kfbn5vd27] {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

.wizard-footer[b-4kfbn5vd27] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
.form-group[b-4kfbn5vd27] {
    margin-bottom: 20px;
}

.form-label[b-4kfbn5vd27] {
    display: block;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
}

.required[b-4kfbn5vd27] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-left: 2px;
}

/* ========================================
   CALENDAR SECTION - FEATURED STYLING (KEY FEATURE)
   ======================================== */
.calendar-section[b-4kfbn5vd27] {
    background: linear-gradient(135deg, 
        var(--BEC-colorBrandBackground2) 0%, 
        var(--BEC-colorNeutralBackground1) 100%);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 20px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    margin: 24px 0;
}

.calendar-section .form-label[b-4kfbn5vd27] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-section .form-label i[b-4kfbn5vd27] {
    font-size: 16px;
}

.date-summary[b-4kfbn5vd27] {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: var(--BEC-borderRadiusSmall);
    color: var(--BEC-colorNeutralForeground2);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.date-summary i[b-4kfbn5vd27] {
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   SELF-APPRAISAL & ACKNOWLEDGMENT SETTINGS
   ======================================== */
.form-group-divider[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.form-group-divider span[b-4kfbn5vd27] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    white-space: nowrap;
}

.toggle-group[b-4kfbn5vd27] {
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
}

.toggle-group .form-label[b-4kfbn5vd27] {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.toggle-group .form-label i[b-4kfbn5vd27] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 13px;
}

/* ========================================
   AUTO-GENERATION BANNER WITH SPARKLE ANIMATION
   ======================================== */
.auto-gen-banner[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, 
        var(--BEC-colorPalettePurpleBackground2) 0%, 
        var(--BEC-colorPaletteBerryBackground2) 100%);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-bottom: 8px;
    border: 1px solid var(--BEC-colorPalettePurpleBorderActive);
}

.auto-gen-banner span[b-4kfbn5vd27] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorPalettePurpleForeground1);
}

.sparkle-icon[b-4kfbn5vd27] {
    font-size: 14px;
    color: var(--BEC-colorPalettePurpleForeground1);
    animation: sparkle-b-4kfbn5vd27 2s ease-in-out infinite;
}

@keyframes sparkle-b-4kfbn5vd27 {
    0%, 100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2) rotate(180deg);
    }
}

[b-4kfbn5vd27] .auto-gen-field.e-input-group {
    background: var(--BEC-colorNeutralBackground3) !important;
}

[b-4kfbn5vd27] .auto-gen-field .e-input {
    background: var(--BEC-colorNeutralBackground3) !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    font-style: italic;
}

/* ========================================
   VALIDATION ERROR MESSAGE
   ======================================== */
.validation-error[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--BEC-colorPaletteRedBackground2);
    border: 1px solid var(--BEC-colorPaletteRedForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    color: var(--BEC-colorPaletteRedForeground1);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    margin-top: 16px;
}

.validation-error i[b-4kfbn5vd27] {
    font-size: 16px;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn-secondary[b-4kfbn5vd27],
.btn-success[b-4kfbn5vd27] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary[b-4kfbn5vd27] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-4kfbn5vd27] {
    background: var(--BEC-colorNeutralBackground3Hover);
}

.btn-success[b-4kfbn5vd27] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.btn-success:hover:not(:disabled)[b-4kfbn5vd27] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-secondary:disabled[b-4kfbn5vd27],
.btn-success:disabled[b-4kfbn5vd27] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ========================================
   NOTIFICATION DIALOGS
   ======================================== */
[b-4kfbn5vd27] .notification-dialog-success .e-dlg-header-content {
    background: linear-gradient(90deg, 
        var(--BEC-colorPaletteGreenBackground3) 0%, 
        var(--BEC-colorPaletteGreenBackground2) 100%);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    padding: 16px 20px;
}

[b-4kfbn5vd27] .notification-dialog-warning .e-dlg-header-content {
    background: linear-gradient(90deg, 
        var(--BEC-colorPaletteYellowBackground3) 0%, 
        var(--BEC-colorPaletteYellowBackground2) 100%);
    color: var(--BEC-colorNeutralForeground1);
    padding: 16px 20px;
}

[b-4kfbn5vd27] .notification-dialog-error .e-dlg-header-content {
    background: linear-gradient(90deg, 
        var(--BEC-colorPaletteRedBackground3) 0%, 
        var(--BEC-colorPaletteRedBackground2) 100%);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    padding: 16px 20px;
}

/* ========================================
   HELP WIZARD SIDEBAR
   ======================================== */
.help-wizard-container[b-4kfbn5vd27] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--BEC-colorNeutralBackground1);
}

.sidebar-header[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-bottom: 1px solid var(--BEC-colorBrandBackground2);
}

.sidebar-header h2[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0;
}

.sidebar-header .close-btn[b-4kfbn5vd27] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForegroundOnBrand);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.sidebar-header .close-btn:hover[b-4kfbn5vd27] {
    background: rgba(255, 255, 255, 0.2);
}

.sidebar-content[b-4kfbn5vd27] {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.sidebar-footer[b-4kfbn5vd27] {
    display: flex;
    justify-content: flex-end;
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
}

.help-section[b-4kfbn5vd27] {
    margin-bottom: 24px;
}

.help-section h3[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    margin: 0 0 12px 0;
}

.help-section p[b-4kfbn5vd27],
.help-section li[b-4kfbn5vd27] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
}

.help-section ul[b-4kfbn5vd27],
.help-section ol[b-4kfbn5vd27] {
    padding-left: 20px;
    margin: 8px 0;
}

.help-section li[b-4kfbn5vd27] {
    margin-bottom: 8px;
}

.help-section strong[b-4kfbn5vd27] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   SYNCFUSION ADAPTIVE UI OVERRIDES
   ======================================== */

[b-4kfbn5vd27] .e-input-group.e-control-wrapper .e-control.e-input,
[b-4kfbn5vd27] .e-float-input.e-control-wrapper .e-control.e-input {
    border-color: var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

[b-4kfbn5vd27] .e-input-group.e-input-focus .e-control.e-input,
[b-4kfbn5vd27] .e-float-input.e-input-focus .e-control.e-input {
    border-color: var(--BEC-colorBrandBackground) !important;
}

[b-4kfbn5vd27] .e-checkbox-wrapper .e-frame {
    border-color: var(--BEC-colorNeutralStroke1) !important;
}

[b-4kfbn5vd27] .e-checkbox-wrapper .e-frame.e-check {
    background: var(--BEC-colorBrandBackground) !important;
    border-color: var(--BEC-colorBrandBackground) !important;
}

/* ========================================
   UTILITY CLASSES (Match Template Page)
   ======================================== */
.flex-row-gap-6[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.flex-row-gap-8[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.duration-days[b-4kfbn5vd27] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
}

/* ========================================
   START PERIOD CONFIRMATION DIALOG
   ======================================== */
.start-period-confirm p[b-4kfbn5vd27] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 12px 0;
}

.confirm-details[b-4kfbn5vd27] {
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 12px 16px;
    margin-bottom: 16px;
}

.confirm-row[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.confirm-row + .confirm-row[b-4kfbn5vd27] {
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.confirm-label[b-4kfbn5vd27] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    min-width: 60px;
}

.confirm-value[b-4kfbn5vd27] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
}

.year-selector[b-4kfbn5vd27] {
    display: flex;
    align-items: center;
}

.confirm-warning[b-4kfbn5vd27] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: var(--BEC-colorPaletteYellowBackground2);
    border: 1px solid var(--BEC-colorPaletteYellowForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.5;
}

.confirm-warning i[b-4kfbn5vd27] {
    color: var(--BEC-colorPaletteYellowForeground1);
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ========================================
   START PERIOD PROCESSING STATE
   ======================================== */
.processing-state[b-4kfbn5vd27] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
}

.processing-state p[b-4kfbn5vd27] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-top: 16px;
    text-align: center;
}

.processing-hint[b-4kfbn5vd27] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 4px;
}

/* ========================================
   START PERIOD RESULTS SUMMARY
   ======================================== */
.results-summary[b-4kfbn5vd27] {
    padding: 8px 0;
}

.results-grid[b-4kfbn5vd27] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.result-card[b-4kfbn5vd27] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: center;
}

.result-value[b-4kfbn5vd27] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightBold);
    line-height: 1;
}

.result-label[b-4kfbn5vd27] {
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.result-total[b-4kfbn5vd27] {
    background: var(--BEC-colorBrandBackground2);
}

.result-total .result-value[b-4kfbn5vd27] {
    color: var(--BEC-colorBrandForeground1);
}

.result-total .result-label[b-4kfbn5vd27] {
    color: var(--BEC-colorBrandForeground1);
}

.result-created[b-4kfbn5vd27] {
    background: var(--BEC-colorPaletteGreenBackground2);
}

.result-created .result-value[b-4kfbn5vd27] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.result-created .result-label[b-4kfbn5vd27] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.result-skipped[b-4kfbn5vd27] {
    background: var(--BEC-colorPaletteYellowBackground2);
}

.result-skipped .result-value[b-4kfbn5vd27] {
    color: var(--BEC-colorPaletteYellowForeground1);
}

.result-skipped .result-label[b-4kfbn5vd27] {
    color: var(--BEC-colorPaletteYellowForeground1);
}

.result-failed[b-4kfbn5vd27] {
    background: var(--BEC-colorPaletteRedBackground2);
}

.result-failed .result-value[b-4kfbn5vd27] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.result-failed .result-label[b-4kfbn5vd27] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.result-emails[b-4kfbn5vd27] {
    background: var(--BEC-colorNeutralBackground3);
}

.result-emails .result-value[b-4kfbn5vd27] {
    color: var(--BEC-colorNeutralForeground1);
}

.result-emails .result-label[b-4kfbn5vd27] {
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   FAILED DETAILS EXPANDABLE
   ======================================== */
.failed-details[b-4kfbn5vd27] {
    margin-top: 8px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    padding-top: 12px;
}

.toggle-details-btn[b-4kfbn5vd27] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--BEC-colorPaletteRedForeground1);
    color: var(--BEC-colorPaletteRedForeground1);
    padding: 4px 12px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle-details-btn:hover[b-4kfbn5vd27] {
    background: var(--BEC-colorPaletteRedBackground2);
}

.failed-list[b-4kfbn5vd27] {
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
}

.failed-item[b-4kfbn5vd27] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    font-size: 12px;
}

.failed-item:last-child[b-4kfbn5vd27] {
    border-bottom: none;
}

.failed-emp[b-4kfbn5vd27] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.failed-error[b-4kfbn5vd27] {
    color: var(--BEC-colorPaletteRedForeground1);
    font-size: 11px;
}

/* /Components/Pages/MainLayout/PerformanceEvaluation/MasterData/EvaluationStatus/EvaluationStatusAdministration.razor.rz.scp.css */
/* ========================================
   EVALUATION STATUS ADMINISTRATION PAGE
   100% Identical to System Module Administration
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-ibfmmcuka5] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-ibfmmcuka5] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-ibfmmcuka5] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-ibfmmcuka5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-ibfmmcuka5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-ibfmmcuka5] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-ibfmmcuka5] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-ibfmmcuka5] {
    transform: scale(0.98);
}

.page-subtitle[b-ibfmmcuka5] {
    display: none;
}

.header-right[b-ibfmmcuka5] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-ibfmmcuka5] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-ibfmmcuka5] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-ibfmmcuka5] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-ibfmmcuka5] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-ibfmmcuka5] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-ibfmmcuka5] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-ibfmmcuka5] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-ibfmmcuka5] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-ibfmmcuka5] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-ibfmmcuka5] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-ibfmmcuka5] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-ibfmmcuka5] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-ibfmmcuka5] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-ibfmmcuka5] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-ibfmmcuka5] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-ibfmmcuka5] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-ibfmmcuka5] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   CHECKBOX IN TOOLBAR - INLINE WITH BUTTONS
   ======================================== */
.toolbar-checkbox-label[b-ibfmmcuka5] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.toolbar-checkbox[b-ibfmmcuka5] {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    accent-color: var(--BEC-colorBrandBackground) !important;
}

.toolbar-checkbox-label:hover[b-ibfmmcuka5] {
    color: var(--BEC-colorBrandBackground) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-ibfmmcuka5] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-ibfmmcuka5] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-ibfmmcuka5] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-ibfmmcuka5] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
}

/* Grid Header - Rounded Top Corners */
[b-ibfmmcuka5] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-ibfmmcuka5] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-ibfmmcuka5] .e-grid .e-row.e-selectionbackground,
[b-ibfmmcuka5] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-ibfmmcuka5] .e-grid .e-row.e-selectionbackground:hover,
[b-ibfmmcuka5] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-ibfmmcuka5] .e-grid .e-row.e-selectionbackground td:first-child,
[b-ibfmmcuka5] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-ibfmmcuka5] .e-grid .e-row {
    height: 32px !important;
}

[b-ibfmmcuka5] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-ibfmmcuka5] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-ibfmmcuka5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-ibfmmcuka5] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-ibfmmcuka5 1s linear infinite;
}

@keyframes spin-b-ibfmmcuka5 {
    to { transform: rotate(360deg); }
}

.loading-container p[b-ibfmmcuka5] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-ibfmmcuka5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-ibfmmcuka5] {
    font-size: 48px;
}

.error-container p[b-ibfmmcuka5] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-ibfmmcuka5] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-ibfmmcuka5] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-ibfmmcuka5] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-ibfmmcuka5] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-ibfmmcuka5] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
[b-ibfmmcuka5] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-ibfmmcuka5] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-ibfmmcuka5] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-ibfmmcuka5] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

/* ========================================
   WIZARD SIDEBAR STYLING (100% Copy from System Module Administration)
   ======================================== */
.sidebar-header[b-ibfmmcuka5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-ibfmmcuka5] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-ibfmmcuka5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-ibfmmcuka5] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-ibfmmcuka5] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-ibfmmcuka5] {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground2);
}

.sidebar-content[b-ibfmmcuka5] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-ibfmmcuka5] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

.wizard-step[b-ibfmmcuka5] {
    max-width: 100%;
}

.step-title[b-ibfmmcuka5] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
}

.step-title i[b-ibfmmcuka5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
}

.step-description[b-ibfmmcuka5] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 24px 0;
}

/* Form Group */
.form-group[b-ibfmmcuka5] {
    margin-bottom: 20px;
}

.form-label[b-ibfmmcuka5] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
}

.form-label.required[b-ibfmmcuka5]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: 600;
}

/* ✅ AUTO-GENERATION INFO BANNER */
.auto-gen-info[b-ibfmmcuka5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--BEC-colorBrandBackground2);
    border: 1px solid var(--BEC-colorBrandBackground);
    border-radius: 8px;
    font-size: 14px;
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: 8px;
}

.auto-gen-info i[b-ibfmmcuka5] {
    font-size: 18px;
    color: var(--BEC-colorBrandForeground1);
    animation: sparkle-b-ibfmmcuka5 2s ease-in-out infinite;
}

@keyframes sparkle-b-ibfmmcuka5 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.auto-gen-info strong[b-ibfmmcuka5] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

.form-value[b-ibfmmcuka5] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 4px;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-ibfmmcuka5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rtl-text[b-ibfmmcuka5] {
    direction: rtl;
    text-align: right;
}

/* Sidebar Footer */
.sidebar-footer[b-ibfmmcuka5] {
    padding: 16px 24px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-ibfmmcuka5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-ibfmmcuka5] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-ibfmmcuka5] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-ibfmmcuka5] {
    background: var(--BEC-colorNeutralStroke2);
}

.btn-success[b-ibfmmcuka5] {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-success:hover:not(:disabled)[b-ibfmmcuka5] {
    background: var(--BEC-colorPaletteGreenForeground2);
}

.btn i[b-ibfmmcuka5] {
    font-size: 14px;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .erp-page-header[b-ibfmmcuka5] {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
    }

    .stats-container[b-ibfmmcuka5] {
        width: 100%;
        justify-content: space-between;
    }

    .page-title[b-ibfmmcuka5] {
        font-size: 18px;
    }

    [b-ibfmmcuka5] .e-toolbar {
        margin: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS) !important;
    }

    .form-row[b-ibfmmcuka5] {
        grid-template-columns: 1fr;
    }

    [b-ibfmmcuka5] .assignment-wizard-sidebar {
        width: 90% !important;
    }

    .sidebar-header[b-ibfmmcuka5],
    .sidebar-footer[b-ibfmmcuka5] {
        padding: 16px 20px;
    }

    .sidebar-step-content[b-ibfmmcuka5] {
        padding: 16px 20px;
    }
}

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-ibfmmcuka5] .notification-success .e-dlg-header-content {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-ibfmmcuka5] .notification-success .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-ibfmmcuka5] .notification-success .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteGreenForeground2);
    border-color: var(--BEC-colorPaletteGreenForeground2);
}

/* Error Notification */
[b-ibfmmcuka5] .notification-error .e-dlg-header-content {
    background: var(--BEC-colorPaletteRedForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-ibfmmcuka5] .notification-error .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-ibfmmcuka5] .notification-error .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteRedForeground1);
    border-color: var(--BEC-colorPaletteRedForeground1);
}

/* Warning Notification */
[b-ibfmmcuka5] .notification-warning .e-dlg-header-content {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-ibfmmcuka5] .notification-warning .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-ibfmmcuka5] .notification-warning .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    border-color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

/* Info Notification */
[b-ibfmmcuka5] .notification-info .e-dlg-header-content {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-ibfmmcuka5] .notification-info .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-ibfmmcuka5] .notification-info .e-footer-content .e-btn-primary {
    background: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandForeground1);
}

/* Dialog Content Styling */
[b-ibfmmcuka5] .notification-success .e-dlg-content,
[b-ibfmmcuka5] .notification-error .e-dlg-content,
[b-ibfmmcuka5] .notification-warning .e-dlg-content,
[b-ibfmmcuka5] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: var(--BEC-colorNeutralForeground1);
}

/* Close Icon Color */
[b-ibfmmcuka5] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-ibfmmcuka5] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-ibfmmcuka5] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-ibfmmcuka5] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-ibfmmcuka5] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-ibfmmcuka5] {
    margin-bottom: 24px;
    animation: fadeInUp-b-ibfmmcuka5 0.6s ease;
}

.step-title[b-ibfmmcuka5] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-ibfmmcuka5] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-ibfmmcuka5] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorBrandBackground2);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-ibfmmcuka5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-ibfmmcuka5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-ibfmmcuka5] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-ibfmmcuka5] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-ibfmmcuka5] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-ibfmmcuka5] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-ibfmmcuka5] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-ibfmmcuka5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-ibfmmcuka5] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-ibfmmcuka5] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-ibfmmcuka5] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-ibfmmcuka5] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-ibfmmcuka5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-ibfmmcuka5] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-ibfmmcuka5] {
    background: var(--BEC-colorPaletteGreenBackground2);
    border: 1px solid var(--BEC-colorPaletteGreenForeground2);
}

.use-case i[b-ibfmmcuka5] {
    color: var(--BEC-colorPaletteGreenForeground2);
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-ibfmmcuka5] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-ibfmmcuka5] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-ibfmmcuka5] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    border-left: 4px solid var(--BEC-colorPaletteDarkOrangeForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-ibfmmcuka5] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-ibfmmcuka5] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-ibfmmcuka5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-ibfmmcuka5] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-ibfmmcuka5] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions - Fix button layout */
.wizard-actions[b-ibfmmcuka5] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-cancel[b-ibfmmcuka5] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-cancel:hover:not(:disabled)[b-ibfmmcuka5] {
    background: var(--BEC-colorNeutralStroke2);
}

.btn-next[b-ibfmmcuka5] {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-next:hover:not(:disabled)[b-ibfmmcuka5] {
    background: var(--BEC-colorBrandForeground1);
}

/* Animations */
@keyframes fadeInUp-b-ibfmmcuka5 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   SYNCFUSION STANDARDS - INLINE STYLE REPLACEMENTS
   ======================================== */

/* Notification Dialog Header Styles */
.flex-align-center-gap-10[b-ibfmmcuka5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-dialog-icon[b-ibfmmcuka5] {
    font-size: 20px;
}

/* /Components/Pages/MainLayout/PerformanceEvaluation/MasterData/QuestionCategory/QuestionCategoryAdministration.razor.rz.scp.css */
/* ========================================
   EVALUATION STATUS ADMINISTRATION PAGE
   100% Identical to System Module Administration
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-g4nseeny06] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-g4nseeny06] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-g4nseeny06] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-g4nseeny06] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-g4nseeny06] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-g4nseeny06] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-g4nseeny06] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-g4nseeny06] {
    transform: scale(0.98);
}

.page-subtitle[b-g4nseeny06] {
    display: none;
}

.header-right[b-g4nseeny06] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-g4nseeny06] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-g4nseeny06] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-g4nseeny06] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-g4nseeny06] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-g4nseeny06] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-g4nseeny06] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-g4nseeny06] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-g4nseeny06] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-g4nseeny06] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-g4nseeny06] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-g4nseeny06] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-g4nseeny06] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-g4nseeny06] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-g4nseeny06] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-g4nseeny06] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-g4nseeny06] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-g4nseeny06] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   CHECKBOX IN TOOLBAR - INLINE WITH BUTTONS
   ======================================== */
.toolbar-checkbox-label[b-g4nseeny06] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.toolbar-checkbox[b-g4nseeny06] {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    accent-color: var(--BEC-colorBrandBackground) !important;
}

.toolbar-checkbox-label:hover[b-g4nseeny06] {
    color: var(--BEC-colorBrandBackground) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-g4nseeny06] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-g4nseeny06] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-g4nseeny06] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   COLUMN CHOOSER DIALOG POSITIONING
   ======================================== */

/* Fix Column Chooser Dialog Position - Align to Columns Button */
[b-g4nseeny06] .e-ccdlg.e-dialog {
    position: fixed !important;
    top: 80px !important;
    right: 40px !important;
    left: auto !important;
    transform: none !important;
}

[b-g4nseeny06] .e-ccdlg .e-dlg-header-content {
    background: var(--BEC-colorBrandBackground) !important;
    color: var(--BEC-colorNeutralBackground1) !important;
}

[b-g4nseeny06] .e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground2) !important;
    padding: 12px 16px !important;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-g4nseeny06] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
}

/* Grid Header - Rounded Top Corners */
[b-g4nseeny06] .e-grid .e-gridheader {
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-g4nseeny06] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-g4nseeny06] .e-grid .e-row.e-selectionbackground,
[b-g4nseeny06] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-g4nseeny06] .e-grid .e-row.e-selectionbackground:hover,
[b-g4nseeny06] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-g4nseeny06] .e-grid .e-row.e-selectionbackground td:first-child,
[b-g4nseeny06] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-g4nseeny06] .e-grid .e-row {
    height: 32px !important;
}

[b-g4nseeny06] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-g4nseeny06] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-g4nseeny06] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-g4nseeny06] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-g4nseeny06 1s linear infinite;
}

@keyframes spin-b-g4nseeny06 {
    to { transform: rotate(360deg); }
}

.loading-container p[b-g4nseeny06] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-g4nseeny06] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-g4nseeny06] {
    font-size: 48px;
}

.error-container p[b-g4nseeny06] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-g4nseeny06] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-g4nseeny06] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-g4nseeny06] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-g4nseeny06] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-primary[b-g4nseeny06] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
[b-g4nseeny06] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
}

[b-g4nseeny06] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

[b-g4nseeny06] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

[b-g4nseeny06] .e-grid .e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

/* ========================================
   WIZARD SIDEBAR STYLING (100% Copy from System Module Administration)
   ======================================== */
.sidebar-header[b-g4nseeny06] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-g4nseeny06] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-g4nseeny06] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-g4nseeny06] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-g4nseeny06] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-g4nseeny06] {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground2);
}

.sidebar-content[b-g4nseeny06] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-g4nseeny06] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

.wizard-step[b-g4nseeny06] {
    max-width: 100%;
}

.step-title[b-g4nseeny06] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
}

.step-title i[b-g4nseeny06] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
}

.step-description[b-g4nseeny06] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 24px 0;
}

/* Form Group */
.form-group[b-g4nseeny06] {
    margin-bottom: 20px;
}

.form-label[b-g4nseeny06] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
}

.form-label.required[b-g4nseeny06]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: 600;
}

/* ✅ AUTO-GENERATION INFO BANNER */
.auto-gen-info[b-g4nseeny06] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--BEC-colorBrandBackground2);
    border: 1px solid var(--BEC-colorBrandBackground);
    border-radius: 8px;
    font-size: 14px;
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: 8px;
}

.auto-gen-info i[b-g4nseeny06] {
    font-size: 18px;
    color: var(--BEC-colorBrandForeground1);
    animation: sparkle-b-g4nseeny06 2s ease-in-out infinite;
}

@keyframes sparkle-b-g4nseeny06 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.auto-gen-info strong[b-g4nseeny06] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

.form-value[b-g4nseeny06] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 4px;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-g4nseeny06] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rtl-text[b-g4nseeny06] {
    direction: rtl;
    text-align: right;
}

/* Sidebar Footer */
.sidebar-footer[b-g4nseeny06] {
    padding: 16px 24px;
    background: var(--BEC-colorNeutralBackground2);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
}

/* Buttons (HTML buttons with custom CSS) */
.btn[b-g4nseeny06] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-g4nseeny06] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-g4nseeny06] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover:not(:disabled)[b-g4nseeny06] {
    background: var(--BEC-colorNeutralStroke2);
}

.btn-success[b-g4nseeny06] {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-success:hover:not(:disabled)[b-g4nseeny06] {
    background: var(--BEC-colorPaletteGreenForeground2);
}

.btn i[b-g4nseeny06] {
    font-size: 14px;
}

/* ========================================
   RESPONSIVE DESIGN - Now handled by Syncfusion Adaptive UI
   ======================================== */

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-g4nseeny06] .notification-success .e-dlg-header-content {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-g4nseeny06] .notification-success .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-g4nseeny06] .notification-success .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteGreenForeground2);
    border-color: var(--BEC-colorPaletteGreenForeground2);
}

/* Error Notification */
[b-g4nseeny06] .notification-error .e-dlg-header-content {
    background: var(--BEC-colorPaletteRedForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-g4nseeny06] .notification-error .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-g4nseeny06] .notification-error .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteRedForeground1);
    border-color: var(--BEC-colorPaletteRedForeground1);
}

/* Warning Notification */
[b-g4nseeny06] .notification-warning .e-dlg-header-content {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-g4nseeny06] .notification-warning .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-g4nseeny06] .notification-warning .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    border-color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

/* Info Notification */
[b-g4nseeny06] .notification-info .e-dlg-header-content {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-g4nseeny06] .notification-info .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-g4nseeny06] .notification-info .e-footer-content .e-btn-primary {
    background: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandForeground1);
}

/* Dialog Content Styling */
[b-g4nseeny06] .notification-success .e-dlg-content,
[b-g4nseeny06] .notification-error .e-dlg-content,
[b-g4nseeny06] .notification-warning .e-dlg-content,
[b-g4nseeny06] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: var(--BEC-colorNeutralForeground1);
}

/* Close Icon Color */
[b-g4nseeny06] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-g4nseeny06] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-g4nseeny06] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-g4nseeny06] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-g4nseeny06] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-g4nseeny06] {
    margin-bottom: 24px;
    animation: fadeInUp-b-g4nseeny06 0.6s ease;
}

.step-title[b-g4nseeny06] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-g4nseeny06] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-g4nseeny06] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorBrandBackground2);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-g4nseeny06] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Features List */
.features-list[b-g4nseeny06] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.feature-item[b-g4nseeny06] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
    transition: all 0.2s ease;
}

.feature-item:hover[b-g4nseeny06] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: translateX(4px);
    box-shadow: var(--BEC-shadow4);
}

.feature-item i[b-g4nseeny06] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 24px;
    flex-shrink: 0;
}

.feature-item strong[b-g4nseeny06] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.feature-item p[b-g4nseeny06] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Example Steps */
.example-steps[b-g4nseeny06] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.example-step[b-g4nseeny06] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.step-number[b-g4nseeny06] {
    width: 28px;
    height: 28px;
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--BEC-fontWeightSemibold);
    flex-shrink: 0;
}

.example-step ul[b-g4nseeny06] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.example-step code[b-g4nseeny06] {
    background: var(--BEC-colorNeutralBackground2);
    padding: 2px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--BEC-colorBrandForeground1);
}

/* Use Cases */
.use-cases[b-g4nseeny06] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.use-case[b-g4nseeny06] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    text-align: left;
}

.use-case-good[b-g4nseeny06] {
    background: var(--BEC-colorPaletteGreenBackground2);
    border: 1px solid var(--BEC-colorPaletteGreenForeground2);
}

.use-case i[b-g4nseeny06] {
    color: var(--BEC-colorPaletteGreenForeground2);
    font-size: 20px;
    flex-shrink: 0;
}

.use-case strong[b-g4nseeny06] {
    display: block;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 4px;
}

.use-case p[b-g4nseeny06] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Warning Box */
.warning-box[b-g4nseeny06] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    border-left: 4px solid var(--BEC-colorPaletteDarkOrangeForeground2);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.warning-box i[b-g4nseeny06] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    font-size: 20px;
    flex-shrink: 0;
}

/* Don't Show Again Checkbox */
.dont-show-again[b-g4nseeny06] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    text-align: left;
}

.dont-show-again label[b-g4nseeny06] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground2);
    cursor: pointer;
}

.dont-show-again input[type="checkbox"][b-g4nseeny06] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Wizard Progress */
.wizard-progress[b-g4nseeny06] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Actions - Fix button layout */
.wizard-actions[b-g4nseeny06] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-cancel[b-g4nseeny06] {
    background: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-cancel:hover:not(:disabled)[b-g4nseeny06] {
    background: var(--BEC-colorNeutralStroke2);
}

.btn-next[b-g4nseeny06] {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

.btn-next:hover:not(:disabled)[b-g4nseeny06] {
    background: var(--BEC-colorBrandForeground1);
}

/* Animations */
@keyframes fadeInUp-b-g4nseeny06 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   SYNCFUSION STANDARDS - INLINE STYLE REPLACEMENTS
   ======================================== */

/* Notification Dialog Header Styles */
.flex-align-center-gap-10[b-g4nseeny06] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-dialog-icon[b-g4nseeny06] {
    font-size: 20px;
}

/* /Components/Pages/MainLayout/PerformanceEvaluation/Report/PerformanceEvaluationDashboard.razor.rz.scp.css */
/* Performance Evaluation Dashboard - Using BEC Theme Colors */

.dashboard-container[b-86b04ci52r] {
    font-family: 'Inter', sans-serif;
    background-color: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
    padding: 2rem;
    width: 100%;
    margin: 0;
    min-height: 100%;
    overflow-y: auto;
}

/* ── Two-Panel Layout: Timeline + Detail ── */
.eval-layout[b-86b04ci52r] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
    min-height: 600px;
}

@media (max-width: 992px) {
    .eval-layout[b-86b04ci52r] {
        grid-template-columns: 1fr;
    }
}

/* ── Timeline Sidebar ── */
.eval-timeline[b-86b04ci52r] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXXLarge);
    box-shadow: var(--BEC-shadow4);
    padding: 1.25rem;
    overflow-y: auto;
    /* Sticky with a top offset pushed the card down and left a white band above it
       (the shell scrolls, not this container). Align with the results header instead. */
    align-self: start;
    max-height: calc(100vh - 140px);
}

.timeline-header[b-86b04ci52r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

    .timeline-header i[b-86b04ci52r] {
        color: var(--BEC-colorBrandForeground1);
        font-size: 1.1rem;
    }

    .timeline-header h3[b-86b04ci52r] {
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
        color: var(--BEC-colorNeutralForeground1);
    }

.timeline-summary[b-86b04ci52r] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.summary-badge[b-86b04ci52r] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

    .summary-badge.pending[b-86b04ci52r] {
        background: var(--BEC-colorPaletteDarkOrangeBackground2);
        color: var(--BEC-colorPaletteDarkOrangeForeground2);
    }

.timeline-year-group[b-86b04ci52r] {
    margin-bottom: 1rem;
}

.timeline-year-label[b-86b04ci52r] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--BEC-colorNeutralForeground3);
    padding: 0.25rem 0;
    margin-bottom: 0.25rem;
}

.timeline-item[b-86b04ci52r] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    border-radius: var(--BEC-borderRadiusLarge);
    transition: background 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    font-family: inherit;
    color: inherit;
}

    .timeline-item:hover[b-86b04ci52r] {
        background: var(--BEC-colorNeutralBackground3);
    }

    .timeline-item.selected[b-86b04ci52r] {
        background: var(--BEC-colorBrandBackground2);
        box-shadow: inset 3px 0 0 var(--BEC-colorBrandBackground);
    }

.timeline-dot[b-86b04ci52r] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralStroke1);
    margin-top: 5px;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

    .timeline-dot.active[b-86b04ci52r] {
        background: var(--BEC-colorBrandBackground);
        box-shadow: 0 0 0 3px rgba(var(--BEC-colorBrandBackground), 0.2);
    }

.timeline-content[b-86b04ci52r] {
    flex: 1;
    min-width: 0;
}

.timeline-period[b-86b04ci52r] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-meta[b-86b04ci52r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.15rem;
}

.timeline-score[b-86b04ci52r] {
    font-size: 0.85rem;
    font-weight: 700;
}

.timeline-result[b-86b04ci52r] {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.1rem 0.4rem;
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.timeline-date[b-86b04ci52r] {
    font-size: 0.75rem;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: 0.1rem;
}

/* ── Detail Panel ── */
.eval-detail[b-86b04ci52r] {
    min-width: 0; /* prevent grid blowout */
}

/* Header */
.header[b-86b04ci52r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    background: var(--BEC-colorNeutralBackground1);
    padding: 1.5rem 2rem;
    border-radius: var(--BEC-borderRadiusXXLarge);
    box-shadow: var(--BEC-shadow2);
    border-left: 5px solid var(--BEC-colorBrandBackground);
}

.header-info h1[b-86b04ci52r] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--BEC-colorBrandBackground);
    margin: 0;
}

.header-info p[b-86b04ci52r] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 0.9rem;
    margin: 0.5rem 0 0 0;
}

.header-status[b-86b04ci52r] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.status-pill[b-86b04ci52r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--BEC-colorPaletteGreenForeground2, #0e700e);
    background: var(--BEC-colorPaletteGreenBackground2, #d7f5dd);
}

.status-pill i[b-86b04ci52r] { font-size: 0.8rem; }

/* Not signed off yet (Pending Approval / Pending Acknowledgment / Submitted) —
   same shape, amber, so the row reads as "result, not yet signed". */
.status-pill--pending[b-86b04ci52r] {
    color: #8a5a00;
    background: var(--BEC-colorPaletteYellowBackground2, #fdf2d0);
}

.status-date[b-86b04ci52r] {
    font-size: 0.78rem;
    color: var(--BEC-colorNeutralForeground3);
    white-space: nowrap;
}

.badge[b-86b04ci52r] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-success[b-86b04ci52r] {
    background-color: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-warning[b-86b04ci52r] {
    background-color: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-danger[b-86b04ci52r] {
    background-color: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground1);
}

.badge-info[b-86b04ci52r] {
    background-color: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-secondary[b-86b04ci52r] {
    background-color: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

.badge-light[b-86b04ci52r] {
    background-color: var(--BEC-colorNeutralBackground2);
    color: var(--BEC-colorNeutralForeground3);
}

/* Grid Layout */
.dashboard-grid[b-86b04ci52r] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.card[b-86b04ci52r] {
    background: var(--BEC-colorNeutralBackground1);
    border-radius: var(--BEC-borderRadiusXXLarge);
    padding: 1.5rem;
    box-shadow: var(--BEC-shadow4);
    transition: transform 0.2s ease;
}

    .card:hover[b-86b04ci52r] {
        transform: translateY(-2px);
    }

.col-span-12[b-86b04ci52r] {
    grid-column: span 12;
}

.col-span-8[b-86b04ci52r] {
    grid-column: span 8;
}

.col-span-4[b-86b04ci52r] {
    grid-column: span 4;
}

.col-span-6[b-86b04ci52r] {
    grid-column: span 6;
}

@media (max-width: 768px) {
    .col-span-8[b-86b04ci52r], .col-span-4[b-86b04ci52r], .col-span-6[b-86b04ci52r] {
        grid-column: span 12;
    }

    /* ── Additional Mobile Responsive ── */
    .dashboard-container[b-86b04ci52r] {
        padding: 1rem;
    }

    .header[b-86b04ci52r] {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
    }

    .header-status[b-86b04ci52r] {
        text-align: left;
    }
}

/* Score Card */
.score-card[b-86b04ci52r] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    background: linear-gradient(135deg, var(--BEC-colorBrandBackground), var(--BEC-colorBrandForeground1));
    color: var(--BEC-colorNeutralBackground1);
}

.score-value[b-86b04ci52r] {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.score-label[b-86b04ci52r] {
    font-size: 1.1rem;
    opacity: 0.9;
}

.score-verdict[b-86b04ci52r] {
    margin-top: 1rem;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: var(--BEC-borderRadiusXXLarge);
}

/* Section Titles */
.section-title[b-86b04ci52r] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--BEC-colorNeutralForeground1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .section-title[b-86b04ci52r]::before {
        content: '';
        display: block;
        width: 4px;
        height: 1.2rem;
        background-color: var(--BEC-colorBrandForeground1);
        border-radius: 2px;
    }

/* Lists */
.list-item[b-86b04ci52r] {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

    .list-item:last-child[b-86b04ci52r] {
        border-bottom: none;
    }

.list-icon[b-86b04ci52r] {
    margin-right: 1rem;
    font-size: 1.2rem;
}

.strength-icon[b-86b04ci52r] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.weakness-icon[b-86b04ci52r] {
    color: var(--BEC-colorPaletteYellowForeground1);
}

.list-content h4[b-86b04ci52r] {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.list-content p[b-86b04ci52r] {
    font-size: 0.85rem;
    color: var(--BEC-colorNeutralForeground3);
}

/* Info Grid */
.info-grid[b-86b04ci52r] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.info-item label[b-86b04ci52r] {
    display: block;
    font-size: 0.75rem;
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.info-item span[b-86b04ci52r] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
}

/* Evaluator Profile */
.evaluator-profile[b-86b04ci52r] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.avatar[b-86b04ci52r] {
    width: 48px;
    height: 48px;
    background-color: var(--BEC-colorNeutralBackground4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground3);
}

/* ── Pending Notice ── */
.pending-notice[b-86b04ci52r] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusXLarge);
    margin-top: 2rem;
}

.pending-notice-icon[b-86b04ci52r] {
    margin-bottom: 1.5rem;
}

/* ── Action Tags ── */
.action-tag[b-86b04ci52r] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorBrandForeground1);
    padding: 0.5rem 1rem;
    border-radius: var(--BEC-borderRadiusLarge);
    font-size: 0.9rem;
    font-weight: 500;
}

/* ── Badge Variants (override) ── */
.badge-info[b-86b04ci52r] {
    background-color: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Templates/EvaluationTemplateAdministration.razor.rz.scp.css */
/* ========================================
   EVALUATION TEMPLATE ADMINISTRATION PAGE
   100% Identical to System Module Administration
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-o3dmwcxyuk] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-o3dmwcxyuk] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-o3dmwcxyuk] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-o3dmwcxyuk] {
    transform: scale(0.98);
}

.page-subtitle[b-o3dmwcxyuk] {
    display: none;
}

.header-right[b-o3dmwcxyuk] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-o3dmwcxyuk] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-o3dmwcxyuk] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-o3dmwcxyuk] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-o3dmwcxyuk] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-o3dmwcxyuk] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-o3dmwcxyuk] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-o3dmwcxyuk] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-o3dmwcxyuk] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important; /* Center the search icon and text vertically */
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-o3dmwcxyuk] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-o3dmwcxyuk] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-o3dmwcxyuk] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-o3dmwcxyuk] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-o3dmwcxyuk] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-o3dmwcxyuk] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-o3dmwcxyuk] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-o3dmwcxyuk] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   CHECKBOX IN TOOLBAR - INLINE WITH BUTTONS
   ======================================== */
.toolbar-checkbox-label[b-o3dmwcxyuk] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.toolbar-checkbox[b-o3dmwcxyuk] {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    accent-color: var(--BEC-colorBrandBackground) !important;
}

.toolbar-checkbox-label:hover[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandBackground) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-o3dmwcxyuk] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

[b-o3dmwcxyuk] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 0px 8px !important;
    line-height: 1 !important;
}

[b-o3dmwcxyuk] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   GRID STYLING - ROUNDED CORNERS & SELECTED ROW
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-o3dmwcxyuk] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
}

/* Grid Header - Styling & Rounded Top Corners */
[b-o3dmwcxyuk] .e-grid .e-gridheader {
    /* Background & Borders */
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
    
    /* Rounded Corners */
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-o3dmwcxyuk] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-o3dmwcxyuk] .e-grid .e-row.e-selectionbackground,
[b-o3dmwcxyuk] .e-grid .e-row[aria-selected="true"],
[b-o3dmwcxyuk] .e-grid .e-selectionbackground {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-o3dmwcxyuk] .e-grid .e-row.e-selectionbackground:hover,
[b-o3dmwcxyuk] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-o3dmwcxyuk] .e-grid .e-row.e-selectionbackground td:first-child,
[b-o3dmwcxyuk] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-o3dmwcxyuk] .e-grid .e-row {
    height: 32px !important;
}

/* Grid Row Hover State */
[b-o3dmwcxyuk] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Grid Row Cell Styling */
[b-o3dmwcxyuk] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Header Height - 20% Reduction (Compact) */
[b-o3dmwcxyuk] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-container[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

.spinner[b-o3dmwcxyuk] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--BEC-colorNeutralStroke1);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-o3dmwcxyuk 1s linear infinite;
}

@keyframes spin-b-o3dmwcxyuk {
    to { transform: rotate(360deg); }
}

.loading-container p[b-o3dmwcxyuk] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.error-container i[b-o3dmwcxyuk] {
    font-size: 48px;
}

.error-container p[b-o3dmwcxyuk] {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   BADGES
   ======================================== */
.badge[b-o3dmwcxyuk] {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.badge-success[b-o3dmwcxyuk] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground2);
}

.badge-inactive[b-o3dmwcxyuk] {
    background: var(--BEC-colorNeutralBackground4);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-warning[b-o3dmwcxyuk] {
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

.badge-info[b-o3dmwcxyuk] {
    background: var(--BEC-colorPaletteLightBlueBackground2);
    color: var(--BEC-colorPaletteLightBlueForeground2);
}

.badge-danger[b-o3dmwcxyuk] {
    background: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground2);
}

/* Help text styling */
.form-help-text[b-o3dmwcxyuk] {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    font-style: italic;
}

.badge-primary[b-o3dmwcxyuk] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   GRID STYLING ENHANCEMENTS
   ======================================== */
/* Note: .e-gridheader styles are now consolidated above in the "Grid Header" section */
/* Note: .e-row:hover styles are now consolidated above in the "Grid Row" section */
/* Note: .e-selectionbackground styles are now consolidated above in the "Selected Row" section */

/* Grid Header Cell - Additional Styling */
[b-o3dmwcxyuk] .e-grid .e-headercell {
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* ========================================
   WIZARD SIDEBAR STYLING (100% Copy from System Module Administration)
   ======================================== */
.sidebar-header[b-o3dmwcxyuk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
}

.sidebar-title i[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 22px;
}

.sidebar-close-btn[b-o3dmwcxyuk] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-o3dmwcxyuk] {
    background: var(--BEC-colorNeutralBackground2);
}

.sidebar-close-btn i[b-o3dmwcxyuk] {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground2);
}

.sidebar-content[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.sidebar-step-content[b-o3dmwcxyuk] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px;
    padding-bottom: 80px; /* Prevent content from being hidden by fixed footer */
    position: relative;
}

.wizard-step[b-o3dmwcxyuk] {
    max-width: 100%;
}

.step-title[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
}

.step-title i[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
}

.step-description[b-o3dmwcxyuk] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 24px 0;
}

/* Form Group */
.form-group[b-o3dmwcxyuk] {
    margin-bottom: 20px;
}

.form-label[b-o3dmwcxyuk] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
}

.form-label.required[b-o3dmwcxyuk]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: 600;
}

/* ========================================
   COMPACT FORM STYLES (Edit Wizard)
   ======================================== */

/* 2-Column Grid Layout */
.form-grid-2col[b-o3dmwcxyuk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

/* Compact Form Group */
.form-group-compact[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Compact Form Label */
.form-label-compact[b-o3dmwcxyuk] {
    font-size: 11px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
}

.form-label-compact.required[b-o3dmwcxyuk]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
    font-weight: 600;
}

/* Compact Input Fields */
[b-o3dmwcxyuk] .compact-input .e-input-group {
    height: 28px !important;
}

[b-o3dmwcxyuk] .compact-input .e-input-group input {
    font-size: 12px !important;
    padding: 4px 8px !important;
}

/* Compact Textarea */
[b-o3dmwcxyuk] .compact-textarea .e-input-group {
    min-height: 60px !important;
}

[b-o3dmwcxyuk] .compact-textarea .e-input-group textarea {
    font-size: 11px !important;
    padding: 6px 8px !important;
    line-height: 1.4 !important;
}

/* ✅ AUTO-GENERATION INFO BANNER */
.auto-gen-info[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--BEC-colorBrandBackground2);
    border: 1px solid var(--BEC-colorBrandBackground);
    border-radius: 8px;
    font-size: 14px;
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: 8px;
}

.auto-gen-info i[b-o3dmwcxyuk] {
    font-size: 18px;
    color: var(--BEC-colorBrandForeground1);
    animation: sparkle-b-o3dmwcxyuk 2s ease-in-out infinite;
}

@keyframes sparkle-b-o3dmwcxyuk {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.auto-gen-info strong[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

.form-value[b-o3dmwcxyuk] {
    padding: 8px 12px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 4px;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    min-height: 34px;
    display: flex;
    align-items: center;
}

.form-row[b-o3dmwcxyuk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rtl-text[b-o3dmwcxyuk] {
    direction: rtl;
    text-align: right;
}

/* Sidebar Footer - Positioned at absolute bottom (matches Employee Evaluators) */
.sidebar-footer[b-o3dmwcxyuk] {
    padding: 16px 20px;
    background: var(--BEC-colorNeutralBackground1);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* Footer Buttons Container - Right Aligned */
.footer-buttons[b-o3dmwcxyuk] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Buttons (HTML buttons with custom CSS) - Standardized (matches Employee Evaluators) */
.btn[b-o3dmwcxyuk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    min-width: 120px;
    height: 36px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    border-radius: var(--BEC-borderRadiusMedium);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn:disabled[b-o3dmwcxyuk] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Secondary/Cancel Button - Gray */
.btn-secondary[b-o3dmwcxyuk] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
}

.btn-secondary:hover:not(:disabled)[b-o3dmwcxyuk] {
    background: var(--BEC-colorNeutralBackground4);
    border-color: var(--BEC-colorNeutralStroke2);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-secondary:active:not(:disabled)[b-o3dmwcxyuk] {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Success/Save Button - Green */
.btn-success[b-o3dmwcxyuk] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorPaletteGreenForeground1);
}

.btn-success:hover:not(:disabled)[b-o3dmwcxyuk] {
    background: var(--BEC-colorPaletteGreenForeground2);
    border-color: var(--BEC-colorPaletteGreenForeground2);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-success:active:not(:disabled)[b-o3dmwcxyuk] {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn i[b-o3dmwcxyuk] {
    font-size: 14px;
}

/* ========================================
   RESPONSIVE DESIGN - Now handled by Syncfusion Adaptive UI
   ======================================== */

/* ========================================
   NOTIFICATION DIALOG STYLES
   (Replaces Toast Notifications)
   ======================================== */

/* Success Notification */
[b-o3dmwcxyuk] .notification-success .e-dlg-header-content {
    background: var(--BEC-colorPaletteGreenForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-o3dmwcxyuk] .notification-success .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-o3dmwcxyuk] .notification-success .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteGreenForeground2);
    border-color: var(--BEC-colorPaletteGreenForeground2);
}

/* Error Notification */
[b-o3dmwcxyuk] .notification-error .e-dlg-header-content {
    background: var(--BEC-colorPaletteRedForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-o3dmwcxyuk] .notification-error .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-o3dmwcxyuk] .notification-error .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteRedForeground1);
    border-color: var(--BEC-colorPaletteRedForeground1);
}

/* Warning Notification */
[b-o3dmwcxyuk] .notification-warning .e-dlg-header-content {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    color: var(--BEC-colorNeutralBackground1);
}

[b-o3dmwcxyuk] .notification-warning .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-o3dmwcxyuk] .notification-warning .e-footer-content .e-btn-primary {
    background: var(--BEC-colorPaletteDarkOrangeForeground2);
    border-color: var(--BEC-colorPaletteDarkOrangeForeground2);
}

/* Info Notification */
[b-o3dmwcxyuk] .notification-info .e-dlg-header-content {
    background: var(--BEC-colorBrandForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

[b-o3dmwcxyuk] .notification-info .e-dlg-header-content i {
    color: var(--BEC-colorNeutralBackground1);
}

[b-o3dmwcxyuk] .notification-info .e-footer-content .e-btn-primary {
    background: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandForeground1);
}

/* Dialog Content Styling */
[b-o3dmwcxyuk] .notification-success .e-dlg-content,
[b-o3dmwcxyuk] .notification-error .e-dlg-content,
[b-o3dmwcxyuk] .notification-warning .e-dlg-content,
[b-o3dmwcxyuk] .notification-info .e-dlg-content {
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    color: var(--BEC-colorNeutralForeground1);
}

/* Close Icon Color */
[b-o3dmwcxyuk] .notification-success .e-dlg-header-content .e-icon-dlg-close,
[b-o3dmwcxyuk] .notification-error .e-dlg-header-content .e-icon-dlg-close,
[b-o3dmwcxyuk] .notification-warning .e-dlg-header-content .e-icon-dlg-close,
[b-o3dmwcxyuk] .notification-info .e-dlg-header-content .e-icon-dlg-close {
    color: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   HELP WIZARD - SPECIFIC STYLES
   ======================================== */

/* Wizard Step Content */
.wizard-step[b-o3dmwcxyuk] {
    text-align: center;
    padding: 20px;
}

.step-icon[b-o3dmwcxyuk] {
    margin-bottom: 24px;
    animation: fadeInUp-b-o3dmwcxyuk 0.6s ease;
}

.step-title[b-o3dmwcxyuk] {
    font-size: 22px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.step-description[b-o3dmwcxyuk] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: left;
}

/* Info Box */
.info-box[b-o3dmwcxyuk] {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--BEC-colorBrandBackground2);
    border-left: 4px solid var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    margin: 20px 0;
    text-align: left;
}

.info-box i[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 20px;
    flex-shrink: 0;
}

/* Animations */
@keyframes fadeInUp-b-o3dmwcxyuk {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   MULTI-STEP WIZARD STYLES
   ======================================== */

/* Wizard Container */
.wizard-container[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Step Indicator */
.wizard-steps[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 24px;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
}

.step[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.step-circle[b-o3dmwcxyuk] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightSemibold);
    font-size: 16px;
    transition: all 0.3s ease;
}

.step.active .step-circle[b-o3dmwcxyuk] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralBackground1);
    box-shadow: 0 4px 8px rgba(0, 120, 212, 0.3);
}

.step.completed .step-circle[b-o3dmwcxyuk] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorNeutralBackground1);
}

.step-label[b-o3dmwcxyuk] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
}

.step.active .step-label[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

.step-separator[b-o3dmwcxyuk] {
    width: 80px;
    height: 2px;
    background: var(--BEC-colorNeutralStroke2);
    margin: 0 16px;
}

/* Wizard Step Content */
.wizard-step-content[b-o3dmwcxyuk] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.step-header[b-o3dmwcxyuk] {
    margin-bottom: 24px;
}

.step-header h3[b-o3dmwcxyuk] {
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
}

.step-header .step-description[b-o3dmwcxyuk] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    line-height: 1.5;
    margin: 0;
}

/* Version Info Banner */
.version-info-banner[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--BEC-colorBrandBackground2);
    border: 1px solid var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--BEC-colorBrandForeground1);
}

.version-info-banner i[b-o3dmwcxyuk] {
    font-size: 16px;
}

/* Questions Section in View Wizard */
.form-section[b-o3dmwcxyuk] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
}

.form-section:first-child[b-o3dmwcxyuk] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.section-title[b-o3dmwcxyuk] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-title i[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
}

.questions-grid[b-o3dmwcxyuk] {
    margin-top: 16px;
}

/* Total Weighting Display */
.total-weighting[b-o3dmwcxyuk] {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.total-weighting strong[b-o3dmwcxyuk] {
    color: var(--BEC-colorNeutralForeground1);
}

/* No Data State */
.no-data[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--BEC-colorNeutralForeground2);
    text-align: center;
}

.no-data i[b-o3dmwcxyuk] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.no-data p[b-o3dmwcxyuk] {
    margin: 0;
    font-size: 14px;
}

/* Wizard Footer */
.wizard-footer[b-o3dmwcxyuk] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--BEC-colorNeutralStroke1);
    background: var(--BEC-colorNeutralBackground2);
}

/* ========================================
   WIZARD LOADING (SYNCFUSION STANDARD)
   ======================================== */

.wizard-loading-container[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 40px;
}

.loading-content[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.spinner-wrapper[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ✅ Syncfusion Bootstrap 4 Spinner Styles */
.e-spinner-pane[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 60px;
    height: 60px;
}

.e-spinner-inner[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.e-spin-bootstrap4[b-o3dmwcxyuk] {
    border: 4px solid var(--BEC-colorNeutralStroke2);
    border-radius: 50%;
    border-top-color: var(--BEC-colorBrandBackground);
    width: 48px;
    height: 48px;
    animation: spin-b-o3dmwcxyuk 0.8s linear infinite;
}

@keyframes spin-b-o3dmwcxyuk {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text[b-o3dmwcxyuk] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 0;
    text-align: center;
    animation: fadeIn-b-o3dmwcxyuk 0.3s ease-in;
}

@keyframes fadeIn-b-o3dmwcxyuk {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========================================
   SYNCFUSION STANDARDS - INLINE STYLE REPLACEMENTS
   ======================================== */

/* Column Template Styles */
.flex-row-gap-6[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.flex-row-gap-8[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.question-icon[b-o3dmwcxyuk] {
    color: var(--BEC-colorBrandBackground);
    font-size: 14px;
}

.question-count[b-o3dmwcxyuk] {
    font-weight: 500;
}

/* Warning Styles */
.warning-icon-red[b-o3dmwcxyuk] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.warning-text-red[b-o3dmwcxyuk] {
    color: var(--BEC-colorPaletteRedForeground1);
    margin-top: 16px;
}

.flex-align-center-gap-10[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-dialog-icon[b-o3dmwcxyuk] {
    font-size: 20px;
}

/* Wizard Styles */
.wizard-description[b-o3dmwcxyuk] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 16px;
}

.help-note[b-o3dmwcxyuk] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    margin: 4px 0 0 24px;
}

.help-icon-large[b-o3dmwcxyuk] {
    font-size: 48px;
    color: var(--BEC-colorBrandForeground1);
}

.help-list[b-o3dmwcxyuk] {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

/* ============================================
   VERSION MANAGEMENT WIZARD STYLES - COMPACT MS DESIGN
   ============================================ */

/* Compact Version Selector - One Line Per Version */
.version-selector-compact[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.version-radio-item-compact[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 4px;
    transition: all 0.15s ease;
    background: var(--BEC-colorNeutralBackground1);
    cursor: pointer;
    font-size: 13px;
}

.version-radio-item-compact:hover[b-o3dmwcxyuk] {
    border-color: var(--BEC-colorBrandBackground);
    background: var(--BEC-colorNeutralBackground2);
}

.version-radio-item-compact.selected[b-o3dmwcxyuk] {
    border-color: var(--BEC-colorBrandBackground);
    background: var(--BEC-colorBrandBackground2);
    border-width: 2px;
}

.version-radio-item-compact input[type="radio"][b-o3dmwcxyuk] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--BEC-colorBrandBackground);
}

.version-number-compact[b-o3dmwcxyuk] {
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    min-width: 30px;
}

.version-meta[b-o3dmwcxyuk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
}

.version-meta i[b-o3dmwcxyuk] {
    font-size: 11px;
    color: var(--BEC-colorBrandForeground1);
}

/* Compact Version Details - Inline Layout */
.version-details-compact[b-o3dmwcxyuk] {
    margin-top: 8px;
}

.details-inline[b-o3dmwcxyuk] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px 10px;
    margin-top: 8px;
    max-height: 60px; /* Max 2 lines */
    overflow: hidden;
}

.detail-item-inline[b-o3dmwcxyuk] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.detail-label-inline[b-o3dmwcxyuk] {
    font-size: 10px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
}

.detail-value-inline[b-o3dmwcxyuk] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground1);
    font-weight: 500;
}

/* Loading Questions Indicator */
.loading-questions[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    justify-content: center;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 11px;
}

.spinner-small[b-o3dmwcxyuk] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandBackground);
    border-radius: 50%;
    animation: spin-b-o3dmwcxyuk 0.6s linear infinite;
}

@keyframes spin-b-o3dmwcxyuk {
    to { transform: rotate(360deg); }
}

/* Questions by Category */
.questions-by-category[b-o3dmwcxyuk] {
    margin-top: 10px;
}

.category-section[b-o3dmwcxyuk] {
    margin-bottom: 12px;
}

.category-header[b-o3dmwcxyuk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: linear-gradient(135deg, var(--BEC-colorBrandBackground) 0%, var(--BEC-colorBrandForeground1) 100%);
    border-radius: 4px;
    margin-bottom: 6px;
}

.category-name[b-o3dmwcxyuk] {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorNeutralBackground1);
}

.category-weight[b-o3dmwcxyuk] {
    font-size: 10px;
    font-weight: 500;
    color: var(--BEC-colorNeutralBackground1);
    opacity: 0.95;
}

/* Question List */
.question-list[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.question-item[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.question-item:hover[b-o3dmwcxyuk] {
    background: var(--BEC-colorNeutralBackground1);
    border-color: var(--BEC-colorBrandBackground);
}

.question-serial[b-o3dmwcxyuk] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralBackground1);
    border-radius: 50%;
    font-weight: 600;
    font-size: 10px;
}

.question-text[b-o3dmwcxyuk] {
    flex: 1;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.3;
    text-align: left;
}

.question-scores[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground2);
    flex-shrink: 0;
}

.question-scores .score-label[b-o3dmwcxyuk] {
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground3);
}

.question-weight[b-o3dmwcxyuk] {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1);
    min-width: 45px;
    text-align: right;
}

.question-status[b-o3dmwcxyuk] {
    flex-shrink: 0;
    min-width: 55px;
}

.question-status .badge[b-o3dmwcxyuk] {
    font-size: 8px;
    padding: 2px 6px;
}

/* Total Weighting Summary */
.total-weighting[b-o3dmwcxyuk] {
    margin-top: 10px;
    padding: 6px 10px;
    background: var(--BEC-colorPaletteGreenForeground2);
    border-radius: 4px;
    color: var(--BEC-colorNeutralBackground1);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 1px 4px rgba(40, 167, 69, 0.15);
}

/* ========================================
   ASSIGNED EMPLOYEES SECTION
   ======================================== */
.assigned-employees-list[b-o3dmwcxyuk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.employee-assignment-card[b-o3dmwcxyuk] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 10px 12px;
    transition: all 0.2s ease;
    width: 100%;
}

.employee-assignment-card:hover[b-o3dmwcxyuk] {
    border-color: var(--BEC-colorBrandBackground);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.employee-row-line1[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    width: 100%;
}

.employee-row-line2[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
}

.employee-code[b-o3dmwcxyuk] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    padding: 0;
    min-width: 80px;
}

.employee-name[b-o3dmwcxyuk] {
    font-size: 13px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
    flex: 1;
}

.employee-detail-item[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

.detail-label[b-o3dmwcxyuk] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
}

.detail-value[b-o3dmwcxyuk] {
    color: var(--BEC-colorNeutralForeground1);
}

/* Activation Warning */
.activation-warning[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    border: 1px solid var(--BEC-colorPaletteDarkOrangeForeground2);
    border-radius: 4px;
    margin-bottom: 8px;
}

.activation-warning i[b-o3dmwcxyuk] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    font-size: 12px;
    flex-shrink: 0;
}

.activation-warning span[b-o3dmwcxyuk] {
    font-size: 9px;
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    line-height: 1.2;
    flex: 1;
}

/* Activation Warning Inline (below title) */
.activation-warning-inline[b-o3dmwcxyuk] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--BEC-colorPaletteDarkOrangeBackground2);
    border: 1px solid var(--BEC-colorPaletteDarkOrangeForeground2);
    border-radius: 4px;
    margin-top: 8px;
    margin-bottom: 16px;
}

.activation-warning-inline i[b-o3dmwcxyuk] {
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    font-size: 12px;
    flex-shrink: 0;
}

.activation-warning-inline span[b-o3dmwcxyuk] {
    font-size: 11px;
    color: var(--BEC-colorPaletteDarkOrangeForeground2);
    line-height: 1.4;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Version Details Tabs */
.version-details-tabs[b-o3dmwcxyuk] {
    margin-top: 16px;
    width: 100%;
}

.version-details-tabs[b-o3dmwcxyuk]  .e-tab-header {
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    width: 100%;
}

.version-details-tabs[b-o3dmwcxyuk]  .e-tab-header .e-toolbar {
    width: 100%;
    display: flex;
}

.version-details-tabs[b-o3dmwcxyuk]  .e-tab-header .e-toolbar-item {
    padding: 0 16px;
    flex: 1;
    text-align: center;
}

.version-details-tabs[b-o3dmwcxyuk]  .e-tab-header .e-toolbar-item .e-tab-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.version-details-tabs[b-o3dmwcxyuk]  .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: var(--BEC-colorBrandForeground1);
    font-weight: 600;
}

.version-details-tabs[b-o3dmwcxyuk]  .e-tab-header .e-toolbar-item .e-tab-text i {
    font-size: 14px;
}

.version-details-tabs[b-o3dmwcxyuk]  .e-content {
    padding: 0;
    background: var(--BEC-colorNeutralBackground1);
    width: 100%;
}

.version-details-tabs .tab-content[b-o3dmwcxyuk] {
    padding: 16px 0;
    min-height: 200px;
    width: 100%;
}

/* Footer Buttons Container */
/* Footer buttons styling is handled by .footer-buttons and .btn classes above */

/* ========================================
   COLUMN CHOOSER DIALOG - Matches Excel Filter Design
   ======================================== */
[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg {
    width: 450px !important;
    max-width: 90vw !important;
    height: auto !important;
    max-height: 80vh !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: var(--BEC-shadow16) !important;
    z-index: 10000 !important;
}

/* Column Chooser Dialog Header */
[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-dlg-header {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    font-size: 14px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-dlg-header .e-dlg-header-content {
    padding: 0 !important;
}

/* Column Chooser Dialog Content */
[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-dlg-content {
    max-height: calc(80vh - 200px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
    padding: 16px !important;
}

/* Column Chooser Dialog Footer (OK/Cancel buttons) */
[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-footer-content {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 16px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

/* Column Chooser Search Box - Matches Excel Filter Search */
[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-ccsearch {
    margin-bottom: 8px !important;
}

[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-ccsearch input {
    height: 32px !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
}

[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-ccsearch .e-input-group {
    height: 32px !important;
}

/* Column Chooser List Items - Matches Excel Filter Checkbox List */
[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist {
    margin: 0 !important;
}

[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li {
    padding: 8px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}

[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkboxlist li:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Column Chooser Checkbox Items */
[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-frame {
    border-radius: 2px !important;
    width: 16px !important;
    height: 16px !important;
}

[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-checkbox-wrapper {
    margin-right: 8px !important;
}

[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-cc-contentdiv .e-label {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* Column Chooser Buttons */
[b-o3dmwcxyuk] .e-grid .e-dialog.e-ccdlg .e-footer-content button {
    height: 32px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

/* ========================================
   NOTIFICATION BUTTON IN GRID ROW
   ======================================== */
.btn-notification-row[b-o3dmwcxyuk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorBrandBackground);
    background: transparent;
    border: 1px solid var(--BEC-colorBrandBackground);
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-notification-row:hover[b-o3dmwcxyuk] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralBackground1);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 120, 215, 0.2);
}

.btn-notification-row:active[b-o3dmwcxyuk] {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 120, 215, 0.2);
}

.btn-notification-row i[b-o3dmwcxyuk] {
    font-size: 11px;
}

.btn-notification-row span[b-o3dmwcxyuk] {
    font-size: 11px;
}

/* Badge Styles */
.badge-primary[b-o3dmwcxyuk] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralBackground1);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Arabic question text */
.q-text-arabic[b-o3dmwcxyuk] {
    direction: rtl;
    text-align: right;
    font-size: 0.9em;
    color: var(--BEC-TextSecondary, #555);
    margin-top: 4px;
    font-style: italic;
}
/* /Components/Pages/MainLayout/PerformanceEvaluation/Templates/EvaluationTemplateVersionManagement.razor.rz.scp.css */
/* ========================================
   CREATE NEW VERSION PAGE - Matches EvaluationTemplateAdministration
   ======================================== */

/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-opjdboukl7] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-opjdboukl7] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-opjdboukl7] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-opjdboukl7] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-opjdboukl7] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-opjdboukl7] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-opjdboukl7] {
    transform: scale(0.98);
}

.header-right[b-opjdboukl7] {
    flex-shrink: 0;
}

/* Header Info - Inline Template Details */
.header-info[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.info-label[b-opjdboukl7] {
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
}

.info-value[b-opjdboukl7] {
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

.info-separator[b-opjdboukl7] {
    color: var(--BEC-colorNeutralStroke2);
    font-weight: var(--BEC-fontWeightRegular);
}

/* ✅ Weight Validation Colors in Header */
.info-value.weight-valid[b-opjdboukl7] {
    color: var(--BEC-colorPaletteGreenForeground1) !important;
}

.info-value.weight-invalid[b-opjdboukl7] {
    color: var(--BEC-colorPaletteRedForeground1) !important;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-opjdboukl7] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-opjdboukl7] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-opjdboukl7] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-opjdboukl7] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
/* Inline Edit Hint - Subtle, minimal space, positioned above grid */
.inline-edit-hint[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    margin-bottom: 2px;
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    opacity: 0.6;
    transition: opacity 0.2s ease;
    position: absolute;
    top: 0;
    right: 20px;
    z-index: 10;
}

.inline-edit-hint:hover[b-opjdboukl7] {
    opacity: 0.9;
}

.inline-edit-hint i[b-opjdboukl7] {
    font-size: 11px;
    color: var(--BEC-colorBrandForeground1);
    opacity: 0.8;
}

.inline-edit-hint .hint-text[b-opjdboukl7] {
    font-style: italic;
    white-space: nowrap;
}

.erp-page-content[b-opjdboukl7] {
    position: relative;
    flex: 1;
    padding: 10px 20px 30px 20px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - MICROSOFT ULTRA COMPACT
   ======================================== */

/* Toolbar Container */
[b-opjdboukl7] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

[b-opjdboukl7] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important; /* ✅ No background - flat, clean look */
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ✅ CLEAR BLUE ICONS - User-friendly, no background */
[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 14px !important; /* Increased size for better clarity */
    margin-right: 0 !important;
    color: var(--BEC-colorBrandBackground) !important; /* 🔵 Blue icons */
    transition: color 0.2s ease !important;
    background: transparent !important; /* No background on icons */
}

/* ✅ CSV icon (fa-file-csv) - Orange/Red color for CSV recognition */
[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn .fa-file-csv {
    color: #E97451 !important; /* CSV orange/red color for instant recognition */
}

/* ✅ Excel icon (fa-file-excel) - Green color for Excel recognition */
[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn .fa-file-excel {
    color: #217346 !important; /* Excel green color for instant recognition */
}

/* ✅ Upload arrow (fa-arrow-up) - Blue color */
[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn .fa-arrow-up {
    color: var(--BEC-colorBrandBackground) !important;
}

[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
}

[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandForeground1) !important;
}

[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn.e-disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

[b-opjdboukl7] .e-toolbar .e-separator {
    width: 1px !important;
    height: 14px !important;
    background: var(--BEC-colorBrandBackground) !important;
    margin: 0 4px !important;
}

/* Primary Button Styling */
[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn.e-primary {
    background: var(--BEC-colorBrandBackground) !important;
    color: var(--BEC-colorNeutralForegroundOnBrand) !important;
}

[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn.e-primary .e-icons,
[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn.e-primary .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForegroundOnBrand) !important;
}

[b-opjdboukl7] .e-toolbar .e-toolbar-item .e-tbar-btn.e-primary:hover:not(.e-disabled) {
    background: var(--BEC-colorBrandBackgroundHover) !important;
}

/* ========================================
   TOTAL WEIGHT DISPLAY - TEXT COLOR VALIDATION ONLY
   ======================================== */
.total-weight-display[b-opjdboukl7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 16px;
    font-size: 13px;
    font-weight: var(--BEC-fontWeightSemibold);
    transition: color 0.3s ease;
    margin-right: 8px;
    background: transparent; /* ✅ No background */
    border: none; /* ✅ No border */
}

.total-weight-display .weight-label[b-opjdboukl7] {
    color: var(--BEC-colorNeutralForeground2);
    font-weight: var(--BEC-fontWeightMedium);
}

.total-weight-display .weight-value[b-opjdboukl7] {
    font-size: 15px;
    font-weight: var(--BEC-fontWeightBold);
    margin-left: 4px;
    transition: color 0.3s ease;
}

.total-weight-display .weight-error-icon[b-opjdboukl7] {
    margin-left: 4px;
    font-size: 14px;
    animation: pulse-b-opjdboukl7 1.5s ease-in-out infinite;
}

/* ✅ Valid weight (100%) - Green text only */
.total-weight-display.weight-valid .weight-value[b-opjdboukl7] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

/* ❌ Invalid weight (≠ 100%) - Red text only */
.total-weight-display.weight-invalid .weight-value[b-opjdboukl7] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.total-weight-display.weight-invalid .weight-error-icon[b-opjdboukl7] {
    color: var(--BEC-colorPaletteRedForeground1);
}

/* Pulse animation for error icon */
@keyframes pulse-b-opjdboukl7 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* ========================================
   LOADING STATE - SYNCFUSION STANDARD
   ======================================== */
.loading-container[b-opjdboukl7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    min-height: 300px;
}

.loading-spinner[b-opjdboukl7] {
    font-size: 32px;
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: 16px;
}

.loading-spinner i[b-opjdboukl7] {
    animation: spin-b-opjdboukl7 1s linear infinite;
}

@keyframes spin-b-opjdboukl7 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-message[b-opjdboukl7] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-opjdboukl7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    min-height: 300px;
}

.error-icon[b-opjdboukl7] {
    font-size: 48px;
    color: var(--BEC-colorPaletteRedForeground1);
    margin-bottom: 16px;
}

.error-message[b-opjdboukl7] {
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 24px;
}

/* ========================================
   FORM INLINE - NO BOX (Direct on Background)
   ======================================== */
.form-inline[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 20px 12px 20px; /* ✅ Reduced top padding */
    margin-bottom: 12px; /* ✅ Reduced bottom margin */
    background: transparent;
}

.form-field[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 6px; /* ✅ Reduced gap */
}

.field-label[b-opjdboukl7] {
    font-size: 11px; /* ✅ Slightly smaller */
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    white-space: nowrap;
}

/* ========================================
   COMPACT FORM CONTROLS - ULTRA-CLEAN
   ======================================== */

/* ✅ Input Group Container - Reduced height + Clean borders */
[b-opjdboukl7] .compact-datepicker.e-input-group,
[b-opjdboukl7] .compact-textbox.e-input-group {
    height: 24px !important;
    min-height: 24px !important;
    border: 1px solid var(--BEC-colorNeutralStroke2) !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

/* ✅ Remove ALL Syncfusion focus styling (no blue underlines!) */
[b-opjdboukl7] .compact-datepicker.e-input-group.e-input-focus,
[b-opjdboukl7] .compact-textbox.e-input-group.e-input-focus,
[b-opjdboukl7] .compact-datepicker.e-input-group:focus-within,
[b-opjdboukl7] .compact-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ✅ Remove bottom border animation */
[b-opjdboukl7] .compact-datepicker.e-input-group::before,
[b-opjdboukl7] .compact-textbox.e-input-group::before,
[b-opjdboukl7] .compact-datepicker.e-input-group::after,
[b-opjdboukl7] .compact-textbox.e-input-group::after {
    display: none !important;
}

/* ✅ Input field itself */
[b-opjdboukl7] .compact-datepicker .e-input,
[b-opjdboukl7] .compact-textbox .e-input {
    height: 22px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    line-height: 18px !important;
    border: none !important;
    background: transparent !important;
}

/* ✅ Input focus - no outline */
[b-opjdboukl7] .compact-datepicker .e-input:focus,
[b-opjdboukl7] .compact-textbox .e-input:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* ✅ Icon button */
[b-opjdboukl7] .compact-datepicker .e-input-group-icon,
[b-opjdboukl7] .compact-textbox .e-input-group-icon {
    height: 22px !important;
    line-height: 22px !important;
    font-size: 10px !important;
    padding: 0 6px !important;
}

/* ✅ Checkbox */
[b-opjdboukl7] .compact-checkbox {
    height: 24px !important;
    min-height: 24px !important;
}

[b-opjdboukl7] .compact-checkbox .e-checkbox-wrapper {
    font-size: 12px !important;
}

[b-opjdboukl7] .compact-checkbox .e-frame {
    width: 16px !important;
    height: 16px !important;
}

/* ========================================
   QUESTIONS CARD
   ======================================== */
.questions-card[b-opjdboukl7] {
    background: var(--BEC-colorNeutralBackground2);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: 20px;
    margin-bottom: 16px;
}

.questions-card-title[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 16px 0;
}

.questions-card-title i[b-opjdboukl7] {
    color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   EMPTY STATE
   ======================================== */
.empty-state[b-opjdboukl7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.empty-state i[b-opjdboukl7] {
    font-size: 48px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 16px;
}

.empty-state p[b-opjdboukl7] {
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground2);
    margin: 0 0 8px 0;
}

.empty-state span[b-opjdboukl7] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   GRID STYLING - 100% IDENTICAL TO QUESTION CATEGORY
   ======================================== */

/* Grid Container - Rounded Corners like Toolbar */
[b-opjdboukl7] .e-grid {
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden !important;
    margin-top: 1px; /* ✅ Minimal spacing to match Evaluation Templates page */
}

/* Grid Header - Rounded Top Corners */
[b-opjdboukl7] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-bottom: 2px solid var(--BEC-colorBrandBackground) !important;
    border-top-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-top-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Content - Rounded Bottom Corners */
[b-opjdboukl7] .e-grid .e-gridcontent {
    border-bottom-left-radius: var(--BEC-borderRadiusMedium) !important;
    border-bottom-right-radius: var(--BEC-borderRadiusMedium) !important;
}

/* Grid Header Cells */
[b-opjdboukl7] .e-grid .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
}

/* Grid Row Height - 20% Reduction (Compact) */
[b-opjdboukl7] .e-grid .e-row {
    height: 32px !important;
}

[b-opjdboukl7] .e-grid .e-row td {
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grid Row Hover */
[b-opjdboukl7] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground2) !important;
}

/* Selected Row Highlighting - Microsoft Style */
[b-opjdboukl7] .e-grid .e-row.e-selectionbackground,
[b-opjdboukl7] .e-grid .e-row[aria-selected="true"] {
    background: var(--BEC-colorNeutralBackground1Selected) !important;
}

[b-opjdboukl7] .e-grid .e-row.e-selectionbackground:hover,
[b-opjdboukl7] .e-grid .e-row[aria-selected="true"]:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* Selected Row Border - Left Accent (Microsoft Style) */
[b-opjdboukl7] .e-grid .e-row.e-selectionbackground td:first-child,
[b-opjdboukl7] .e-grid .e-row[aria-selected="true"] td:first-child {
    border-left: 3px solid var(--BEC-colorBrandBackground) !important;
    padding-left: calc(var(--BEC-spacingHorizontalS) - 3px) !important;
}

/* ========================================
   BATCH EDIT MODE - VISUAL INDICATORS
   ======================================== */

/* ✅ Changed Cells ONLY (Yellow) - NOT entire row */
[b-opjdboukl7] .e-grid .e-updatedtd {
    background: var(--BEC-colorPaletteYellowBackground2) !important;
    border: 1px solid var(--BEC-colorPaletteYellowForeground1) !important;
}

/* ✅ Added Rows (Green) - ONLY for truly new rows */
[b-opjdboukl7] .e-grid .e-addedrow {
    background: var(--BEC-colorPaletteGreenBackground2) !important;
    height: 32px !important; /* ✅ Match normal row height */
}

/* ✅ NEW: Ensure added row cells match height too */
[b-opjdboukl7] .e-grid .e-addedrow td {
    height: 32px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
}

/* ✅ Deleted Rows (Red) */
[b-opjdboukl7] .e-grid .e-hiddenrow {
    background: var(--BEC-colorPaletteRedBackground2) !important;
    text-decoration: line-through !important;
    opacity: 0.6 !important;
}

/* ========================================
   PAGER STYLING - IDENTICAL TO QUESTION CATEGORY
   ======================================== */
[b-opjdboukl7] .e-grid .e-gridpager {
    background: var(--BEC-colorNeutralBackground2) !important;
    border-top: 1px solid var(--BEC-colorNeutralStroke1) !important;
    padding: 8px !important;
}

[b-opjdboukl7] .e-grid .e-gridpager .e-pagercontainer {
    font-size: 12px !important;
}

/* ========================================
   EDIT CELL INPUT (Batch Edit Mode) - COMPACT HEIGHT
   ======================================== */

/* ✅ CRITICAL: Edit mode rows MUST match normal row height (32px) */
[b-opjdboukl7] .e-grid .e-row.e-editedrow {
    height: 32px !important;
}

[b-opjdboukl7] .e-grid .e-row.e-editedrow td {
    padding: 0 !important;
    vertical-align: middle !important;
}

/* ✅ Input fields - Ultra compact to fit 32px row (applies to both edit and add modes) */
[b-opjdboukl7] .e-grid .e-input-group,
[b-opjdboukl7] .e-grid .e-numerictextbox {
    height: 28px !important;
    min-height: 28px !important;
    margin: 2px 0 !important;
}

[b-opjdboukl7] .e-grid .e-input-group .e-input,
[b-opjdboukl7] .e-grid .e-numerictextbox .e-input {
    height: 28px !important;
    font-size: 12px !important;
    padding: 2px 6px !important;
    line-height: 1.2 !important;
    border: 1px solid var(--BEC-colorNeutralStroke2) !important;
}

/* ✅ CRITICAL: Input fields in ADDED rows must also be compact */
[b-opjdboukl7] .e-grid .e-addedrow .e-input-group,
[b-opjdboukl7] .e-grid .e-addedrow .e-numerictextbox {
    height: 28px !important;
    min-height: 28px !important;
    margin: 2px 0 !important;
}

[b-opjdboukl7] .e-grid .e-addedrow .e-input-group .e-input,
[b-opjdboukl7] .e-grid .e-addedrow .e-numerictextbox .e-input {
    height: 28px !important;
    font-size: 12px !important;
    padding: 2px 6px !important;
    line-height: 1.2 !important;
}

/* ✅ HIDE SPIN BUTTONS (up/down arrows) in ALL numeric fields - Comprehensive removal */
[b-opjdboukl7] .e-grid .e-numerictextbox .e-spin-up,
[b-opjdboukl7] .e-grid .e-numerictextbox .e-spin-down,
[b-opjdboukl7] .e-grid .e-numeric .e-spin-up,
[b-opjdboukl7] .e-grid .e-numeric .e-spin-down,
[b-opjdboukl7] .e-grid .e-input-group .e-spin-up,
[b-opjdboukl7] .e-grid .e-input-group .e-spin-down,
[b-opjdboukl7] .e-grid input[type="number"]::-webkit-inner-spin-button,
[b-opjdboukl7] .e-grid input[type="number"]::-webkit-outer-spin-button {
    display: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ✅ Force numeric input to be text-like (no native browser arrows) */
[b-opjdboukl7] .e-grid input[type="number"] {
    -moz-appearance: textfield !important;
        appearance: textfield !important;

}

/* ✅ Dropdown in edit mode */
[b-opjdboukl7] .e-grid .e-dropdownlist {
    height: 28px !important;
}

[b-opjdboukl7] .e-grid .e-dropdownlist .e-input-group {
    height: 28px !important;
}

[b-opjdboukl7] .e-grid .e-dropdownlist .e-input {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
}

/* Checkbox Column */
[b-opjdboukl7] .e-grid .e-checkbox-wrapper .e-frame {
    width: 16px !important;
    height: 16px !important;
}

[b-opjdboukl7] .e-grid .e-checkbox-wrapper .e-frame.e-check {
    background: var(--BEC-colorBrandBackground) !important;
    border-color: var(--BEC-colorBrandBackground) !important;
}

/* ========================================
   BADGE STYLING - MATCHES EVALUATION TEMPLATES
   ======================================== */
.badge[b-opjdboukl7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-primary[b-opjdboukl7] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.badge-success[b-opjdboukl7] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.badge-inactive[b-opjdboukl7] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.badge-info[b-opjdboukl7] {
    background: var(--BEC-colorPaletteBlueForeground3);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

/* ========================================
   NOTIFICATION DIALOG - MATCHES EVALUATION TEMPLATES
   ======================================== */
[b-opjdboukl7] .e-notification-dialog .e-dlg-header-content {
    background: linear-gradient(90deg, var(--BEC-colorBrandBackground) 0%, var(--BEC-colorBrandBackground2) 100%);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    padding: 12px 20px;
    border-top-left-radius: var(--BEC-borderRadiusMedium);
    border-top-right-radius: var(--BEC-borderRadiusMedium);
}

.notification-header[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.notification-header i[b-opjdboukl7] {
    font-size: 20px;
}

[b-opjdboukl7] .e-notification-dialog.e-success .e-dlg-header-content {
    background: linear-gradient(90deg, var(--BEC-colorPaletteGreenBackground3) 0%, var(--BEC-colorPaletteGreenBackground2) 100%);
}

[b-opjdboukl7] .e-notification-dialog.e-error .e-dlg-header-content {
    background: linear-gradient(90deg, var(--BEC-colorPaletteRedBackground3) 0%, var(--BEC-colorPaletteRedBackground2) 100%);
}

[b-opjdboukl7] .e-notification-dialog.e-warning .e-dlg-header-content {
    background: linear-gradient(90deg, var(--BEC-colorPaletteYellowBackground3) 0%, var(--BEC-colorPaletteYellowBackground2) 100%);
}

.notification-content[b-opjdboukl7] {
    padding: 20px;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   HELP SIDEBAR - MATCHES EVALUATION TEMPLATES
   ======================================== */
[b-opjdboukl7] .help-sidebar {
    width: 600px !important;
    box-shadow: var(--BEC-shadow16);
}

.help-content[b-opjdboukl7] {
    padding: 0;
}

.help-header[b-opjdboukl7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.help-header h2[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0;
}

.help-header .close-btn[b-opjdboukl7] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForegroundOnBrand);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
}

.help-header .close-btn:hover[b-opjdboukl7] {
    background: rgba(255, 255, 255, 0.2);
}

.help-body[b-opjdboukl7] {
    padding: 20px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.help-section[b-opjdboukl7] {
    margin-bottom: 24px;
}

.help-section h3[b-opjdboukl7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    margin: 0 0 12px 0;
}

.help-section p[b-opjdboukl7],
.help-section li[b-opjdboukl7] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1.6;
}

.help-section ul[b-opjdboukl7],
.help-section ol[b-opjdboukl7] {
    padding-left: 20px;
    margin: 8px 0;
}

.help-section li[b-opjdboukl7] {
    margin-bottom: 8px;
}

/* ========================================
   SYNCFUSION COMPONENT OVERRIDES
   ======================================== */
[b-opjdboukl7] .e-input-group.e-control-wrapper .e-control.e-input,
[b-opjdboukl7] .e-float-input.e-control-wrapper .e-control.e-input {
    border-color: var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
}

[b-opjdboukl7] .e-input-group.e-input-focus .e-control.e-input,
[b-opjdboukl7] .e-float-input.e-input-focus .e-control.e-input {
    border-color: var(--BEC-colorBrandBackground) !important;
}

[b-opjdboukl7] .e-checkbox-wrapper .e-frame {
    border-color: var(--BEC-colorNeutralStroke1) !important;
}

[b-opjdboukl7] .e-checkbox-wrapper .e-frame.e-check {
    background: var(--BEC-colorBrandBackground) !important;
    border-color: var(--BEC-colorBrandBackground) !important;
}

/* ========================================
   HIDDEN UPLOADER - Syncfusion Standard Approach
   ======================================== */
[b-opjdboukl7] .hidden-uploader .e-file-drop {
    display: none !important;
}

[b-opjdboukl7] .hidden-uploader.e-upload.e-control-wrapper {
    border: 0px !important;
    padding: 0px !important;
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Arabic question text */
.q-text-arabic[b-opjdboukl7] {
    direction: rtl;
    text-align: right;
    font-size: 0.9em;
    color: var(--BEC-TextSecondary, #555);
    margin-top: 4px;
    font-style: italic;
}
/* /Components/Pages/MainLayout/Personal_Leave/Master/PersonalLeave.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-sit30ghgs1] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-sit30ghgs1] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-sit30ghgs1] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-sit30ghgs1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-sit30ghgs1] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-sit30ghgs1] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-sit30ghgs1] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-sit30ghgs1] {
    transform: scale(0.98);
}

.page-subtitle[b-sit30ghgs1] {
    display: none;
}

.header-right[b-sit30ghgs1] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-sit30ghgs1] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-sit30ghgs1] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-sit30ghgs1] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-sit30ghgs1] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-sit30ghgs1] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-sit30ghgs1] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - 100% Identical to System Module Administration
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-sit30ghgs1] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Request Leave Button - Primary Action Style */
[b-sit30ghgs1] .e-toolbar .e-toolbar-item .request-leave-btn .e-tbar-btn {
    background: var(--BEC-colorBrandBackground) !important;
    color: white !important;
    padding: 0 12px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

[b-sit30ghgs1] .e-toolbar .e-toolbar-item .request-leave-btn .e-tbar-btn .e-icons {
    color: white !important;
}

[b-sit30ghgs1] .e-toolbar .e-toolbar-item .request-leave-btn .e-tbar-btn .e-tbar-btn-text {
    color: white !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

[b-sit30ghgs1] .e-toolbar .e-toolbar-item .request-leave-btn .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorBrandBackgroundHover) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 120, 212, 0.3) !important;
}

[b-sit30ghgs1] .e-toolbar .e-toolbar-item .request-leave-btn .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-sit30ghgs1] .e-toolbar .e-toolbar-item .request-leave-btn .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: white !important;
}

/* Toolbar Items */
[b-sit30ghgs1] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-sit30ghgs1] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-sit30ghgs1] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-sit30ghgs1] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-sit30ghgs1] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-sit30ghgs1] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-sit30ghgs1] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-sit30ghgs1] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-sit30ghgs1] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-sit30ghgs1] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* ========================================
   DATE FILTER CONTAINER IN TOOLBAR
   ======================================== */
.date-filter-container[b-sit30ghgs1] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.date-filter-label[b-sit30ghgs1] {
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    line-height: 1 !important;
}

/* DatePicker in Toolbar */
[b-sit30ghgs1] .e-toolbar .e-datepicker {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-sit30ghgs1] .e-toolbar .e-datepicker .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-sit30ghgs1] .e-toolbar .e-datepicker:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* DropDownList in Toolbar */
[b-sit30ghgs1] .e-toolbar .e-dropdownlist {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-sit30ghgs1] .e-toolbar .e-dropdownlist .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-sit30ghgs1] .e-toolbar .e-dropdownlist:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* NumericTextBox in Toolbar */
[b-sit30ghgs1] .e-toolbar .e-numerictextbox {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-sit30ghgs1] .e-toolbar .e-numerictextbox .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-sit30ghgs1] .e-toolbar .e-numerictextbox:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-sit30ghgs1] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-sit30ghgs1] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-sit30ghgs1] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
.loading-overlay[b-sit30ghgs1] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   DATE WIZARD SIDEBAR
   ======================================== */
[b-sit30ghgs1] .date-wizard-sidebar.e-sidebar {
    background: white;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1024px) {
    [b-sit30ghgs1] .date-wizard-sidebar.e-sidebar {
        width: 60% !important;
    }
}

@media (max-width: 768px) {
    [b-sit30ghgs1] .date-wizard-sidebar.e-sidebar {
        width: 90% !important;
    }
    
    .sidebar-header[b-sit30ghgs1],
    .sidebar-footer[b-sit30ghgs1] {
        padding: 16px 20px;
    }
    
    .sidebar-step-content[b-sit30ghgs1] {
        padding: 16px 20px;
    }
}

.sidebar-header[b-sit30ghgs1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #e0e0e0;
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sidebar-title[b-sit30ghgs1] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #242424;
}

.sidebar-title i[b-sit30ghgs1] {
    color: #0078d4;
    font-size: 22px;
}

.sidebar-close-btn[b-sit30ghgs1] {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-close-btn:hover[b-sit30ghgs1] {
    background: #f3f3f3;
}

.sidebar-close-btn i[b-sit30ghgs1] {
    font-size: 18px;
    color: #605e5c;
}

.sidebar-content[b-sit30ghgs1] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    position: relative;
}

.sidebar-step-content[b-sit30ghgs1] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    position: relative;
}

.wizard-step[b-sit30ghgs1] {
    max-width: 100%;
}

.step-title[b-sit30ghgs1] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    margin: 0 0 8px 0;
}

.step-title i[b-sit30ghgs1] {
    color: #0078d4;
    font-size: 20px;
}

.step-description[b-sit30ghgs1] {
    font-size: 14px;
    color: #605e5c;
    margin: 0 0 24px 0;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
.form-group[b-sit30ghgs1] {
    margin-bottom: 20px;
}

.form-label[b-sit30ghgs1] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #323130;
    margin-bottom: 8px;
}

.form-label.required[b-sit30ghgs1]::after {
    content: " *";
    color: #d13438;
}

.field-hint[b-sit30ghgs1] {
    display: block;
    font-size: 11px;
    color: #8a8886;
    margin-top: 4px;
    font-style: italic;
}

.error-message[b-sit30ghgs1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #d13438;
    margin-top: 6px;
}

/* ========================================
   SIDEBAR FOOTER
   ======================================== */
.sidebar-footer[b-sit30ghgs1] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    background: #fafafa;
    position: sticky;
    bottom: 0;
    z-index: 100;
}

.btn[b-sit30ghgs1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    min-width: 100px;
    justify-content: center;
}

.btn:disabled[b-sit30ghgs1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-sit30ghgs1] {
    background: #0078d4;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-sit30ghgs1] {
    background: #106ebe;
}

.btn-secondary[b-sit30ghgs1] {
    background: #f3f3f3;
    color: #323130;
}

.btn-secondary:hover:not(:disabled)[b-sit30ghgs1] {
    background: #e1e1e1;
}

.btn i[b-sit30ghgs1] {
    font-size: 14px;
}

/* /Components/Pages/MainLayout/Recruitment/ManagementDashboard/RecruitmentManagementDashboard.razor.rz.scp.css */
.erp-page-container[b-3l8coi4uxh] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px 16px;
}

/* ========================================
   PAGE HEADER — compact, title + inline stat pills
   ======================================== */
.erp-page-header[b-3l8coi4uxh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.header-left[b-3l8coi4uxh] {
    display: flex;
    align-items: center;
}

.page-title[b-3l8coi4uxh] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--BEC-Text-Primary);
    line-height: 1;
}

.page-title i[b-3l8coi4uxh] {
    color: var(--BEC-Brand-Primary);
    font-size: 0.95rem;
}

.header-right[b-3l8coi4uxh] {
    flex-shrink: 0;
}

.stats-container[b-3l8coi4uxh] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.stat-card[b-3l8coi4uxh] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.stat-value[b-3l8coi4uxh] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--BEC-Brand-Primary);
    line-height: 1;
}

.stat-value.stat-new[b-3l8coi4uxh] {
    color: var(--BEC-Text-Primary);
}

.stat-value.stat-review[b-3l8coi4uxh] {
    color: var(--BEC-Info-Text, #1e40af);
}

.stat-value.stat-shortlisted[b-3l8coi4uxh] {
    color: var(--BEC-Purple-Text, #5b21b6);
}

.stat-value.stat-interview[b-3l8coi4uxh] {
    color: var(--BEC-Warning-Text, #92400e);
}

.stat-value.stat-hired[b-3l8coi4uxh] {
    color: var(--BEC-Success-Text, #166534);
}

.stat-value.stat-rejected[b-3l8coi4uxh] {
    color: var(--BEC-Error-Text, #991b1b);
}

.stat-label[b-3l8coi4uxh] {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--BEC-Text-Secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1;
}

.stat-divider[b-3l8coi4uxh] {
    width: 1px;
    height: 16px;
    background: var(--BEC-Border-Subtle, #edebe9);
}

/* ========================================
   FILTER BAR
   ======================================== */
.filter-bar[b-3l8coi4uxh] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 7px 12px;
    background: var(--BEC-Surface-Secondary, #f8fafc);
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 8px;
    flex-wrap: wrap;
}

.filter-group[b-3l8coi4uxh] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-label[b-3l8coi4uxh] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--BEC-Text-Secondary);
    white-space: nowrap;
}

.filter-input[b-3l8coi4uxh],
.filter-select[b-3l8coi4uxh] {
    border: 1px solid var(--BEC-Border-Strong, #c8c6c4);
    border-radius: 6px;
    background: var(--BEC-Surface-Base, #ffffff);
    color: var(--BEC-Text-Primary);
    padding: 4px 8px;
    font-size: 0.78rem;
    height: 28px;
}

.filter-input[b-3l8coi4uxh] {
    min-width: 220px;
}

.filter-select[b-3l8coi4uxh] {
    min-width: 150px;
}

.filter-actions[b-3l8coi4uxh] {
    margin-left: auto;
}

.filter-clear-btn[b-3l8coi4uxh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--BEC-Border-Strong, #c8c6c4);
    background: var(--BEC-Surface-Base, #ffffff);
    color: var(--BEC-Text-Secondary);
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.filter-clear-btn:hover[b-3l8coi4uxh] {
    border-color: var(--BEC-Brand-Primary);
    color: var(--BEC-Brand-Primary);
}

/* ========================================
   TOOLBAR
   ======================================== */
.toolbar-bar[b-3l8coi4uxh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-btn[b-3l8coi4uxh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--BEC-Border-Strong, #c8c6c4);
    background: var(--BEC-Surface-Base, #ffffff);
    color: var(--BEC-Text-Primary);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.toolbar-btn:hover:not(:disabled)[b-3l8coi4uxh] {
    border-color: var(--BEC-Brand-Primary);
    color: var(--BEC-Brand-Primary);
}

.toolbar-btn:disabled[b-3l8coi4uxh] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   FORM CONTROLS reused inside the detail panel
   ======================================== */
.status-filter[b-3l8coi4uxh],
.notes-area[b-3l8coi4uxh] {
    width: 100%;
    border: 1px solid var(--BEC-Border-Strong, #c8c6c4);
    border-radius: 8px;
    background: var(--BEC-Surface-Base, #ffffff);
    color: var(--BEC-Text-Primary);
    padding: 8px 10px;
}

.notes-area[b-3l8coi4uxh] {
    min-height: 96px;
    resize: vertical;
}

.bec-btn[b-3l8coi4uxh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border: 1px solid transparent;
    border-radius: var(--BEC-borderRadiusSmall);
    padding: 6px 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.3;
    white-space: nowrap;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.bec-btn:focus-visible[b-3l8coi4uxh] {
    outline: none;
    box-shadow: 0 0 0 2px var(--BEC-Surface-Base), 0 0 0 4px var(--BEC-Brand-Primary);
}

.bec-btn:disabled[b-3l8coi4uxh] {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

.bec-btn-primary[b-3l8coi4uxh] {
    background: var(--BEC-Brand-Primary);
    color: var(--BEC-neutral-background-1);
    border-color: var(--BEC-Brand-Primary);
    box-shadow: var(--BEC-depth-1);
}

.bec-btn-primary:hover:not(:disabled)[b-3l8coi4uxh] {
    background: var(--BEC-Brand-Secondary);
    border-color: var(--BEC-Brand-Secondary);
}

.bec-btn-primary:active:not(:disabled)[b-3l8coi4uxh] {
    transform: translateY(1px);
}

.bec-btn-secondary[b-3l8coi4uxh] {
    background: var(--BEC-Surface-Base);
    color: var(--BEC-Brand-Primary);
    border-color: var(--BEC-Brand-Primary);
}

.bec-btn-secondary:hover:not(:disabled)[b-3l8coi4uxh] {
    background: var(--BEC-Info-Subtle);
}

.bec-btn-secondary:active:not(:disabled)[b-3l8coi4uxh] {
    transform: translateY(1px);
}

.bec-btn-danger[b-3l8coi4uxh] {
    background: var(--BEC-Error-Main, #d13438);
    color: var(--BEC-neutral-background-1);
    border-color: var(--BEC-Error-Main, #d13438);
}

.bec-btn-danger:hover:not(:disabled)[b-3l8coi4uxh] {
    background: #a4262c;
    border-color: #a4262c;
}

.bec-btn-danger:active:not(:disabled)[b-3l8coi4uxh] {
    transform: translateY(1px);
}

.danger-zone[b-3l8coi4uxh] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--BEC-Error-Main, #d13438);
}

.state-banner[b-3l8coi4uxh] {
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid var(--BEC-Border-Strong, #c8c6c4);
}

.state-banner.info[b-3l8coi4uxh] {
    background: var(--BEC-Info-Subtle, #deecf9);
}

.state-banner.error[b-3l8coi4uxh] {
    background: var(--BEC-Error-Subtle, #fde7e9);
}

.state-banner.success[b-3l8coi4uxh] {
    background: var(--BEC-Success-Subtle, #dff6dd);
}

.state-card[b-3l8coi4uxh],
.panel[b-3l8coi4uxh] {
    border: 1px solid var(--BEC-Border-Strong, #c8c6c4);
    border-radius: 12px;
    background: var(--BEC-Surface-Base, #ffffff);
}

.state-card[b-3l8coi4uxh] {
    padding: 20px;
}

.content-grid[b-3l8coi4uxh] {
    display: flex;
    flex-direction: column;
}

.panel[b-3l8coi4uxh] {
    padding: 12px;
    min-height: 360px;
}

.panel-header[b-3l8coi4uxh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.panel-header h2[b-3l8coi4uxh] {
    margin: 0;
    font-size: 1.1rem;
}

.panel-meta[b-3l8coi4uxh] {
    color: var(--BEC-Text-Secondary);
    font-size: 0.85rem;
}

.table-wrap[b-3l8coi4uxh] {
    overflow: auto;
}

.applications-table[b-3l8coi4uxh] {
    width: 100%;
    border-collapse: collapse;
}

.applications-table th[b-3l8coi4uxh],
.applications-table td[b-3l8coi4uxh] {
    padding: 10px 8px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    text-align: left;
    vertical-align: middle;
}

.applications-table tbody tr[b-3l8coi4uxh] {
    cursor: pointer;
}

.applications-table tbody tr:hover[b-3l8coi4uxh] {
    background: var(--BEC-Surface-Hover);
}

.applications-table tbody tr.row-selected[b-3l8coi4uxh] {
    background: var(--BEC-Info-Subtle, #deecf9);
}

.status-chip[b-3l8coi4uxh] {
    display: inline-flex;
    border-radius: 999px;
    padding: 4px 8px;
    background: var(--BEC-Info-Subtle, #deecf9);
    color: var(--BEC-Text-Primary);
    font-size: 0.8rem;
}

.status-chip--hired[b-3l8coi4uxh] {
    background: var(--BEC-Success-Subtle, #dff6dd);
    color: var(--BEC-Success-Text, #166534);
}

.status-chip--rejected[b-3l8coi4uxh] {
    background: var(--BEC-Error-Subtle, #fde7e9);
    color: var(--BEC-Error-Text, #991b1b);
}

.status-chip--interview[b-3l8coi4uxh] {
    background: var(--BEC-Warning-Soft, #fef3c7);
    color: var(--BEC-Warning-Text, #92400e);
}

.status-chip--review[b-3l8coi4uxh] {
    background: var(--BEC-Info-Subtle, #deecf9);
    color: var(--BEC-Info-Text, #1e40af);
}

.status-chip--shortlisted[b-3l8coi4uxh] {
    background: var(--BEC-Purple-Soft, #ede9fe);
    color: var(--BEC-Purple-Text, #5b21b6);
}

.status-chip--offered[b-3l8coi4uxh] {
    background: var(--BEC-Teal-Soft, #ccfbf1);
    color: var(--BEC-Teal-Text, #0f766e);
}

.status-chip--default[b-3l8coi4uxh] {
    background: var(--BEC-Surface-Secondary, #f3f4f6);
    color: var(--BEC-Text-Secondary);
}

.reviewed-by-locked[b-3l8coi4uxh] {
    font-style: italic;
    font-size: 0.9rem;
}

.confirm-banner[b-3l8coi4uxh] {
    background: var(--BEC-Warning-Soft, #fef3c7);
    border: 1px solid var(--BEC-Border-Strong, #c8c6c4);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.confirm-banner--danger[b-3l8coi4uxh] {
    background: var(--BEC-Error-Subtle, #fde7e9);
}

.confirm-actions[b-3l8coi4uxh] {
    display: flex;
    gap: 8px;
}

.pager[b-3l8coi4uxh] {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.state-inline[b-3l8coi4uxh] {
    padding: 12px;
    border: 1px dashed var(--BEC-Border-Strong, #c8c6c4);
    border-radius: 8px;
    color: var(--BEC-Text-Secondary);
}

/* ========================================
   SLIDE-OUT APPLICATION DETAILS PANEL
   ======================================== */
.slide-panel-overlay[b-3l8coi4uxh] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1000;
}

.slide-panel[b-3l8coi4uxh] {
    position: fixed;
    top: 0;
    right: 0;
    width: 640px;
    max-width: 95vw;
    height: 100vh;
    background: var(--BEC-Surface-Base, #ffffff);
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.18);
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

.slide-panel-header[b-3l8coi4uxh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    background: var(--BEC-Surface-Secondary, #f8fafc);
    flex-shrink: 0;
}

.slide-panel-header .panel-title[b-3l8coi4uxh] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slide-panel-header .panel-title i[b-3l8coi4uxh] {
    color: var(--BEC-Brand-Primary);
}

.slide-panel-header .panel-title h2[b-3l8coi4uxh] {
    margin: 0;
    font-size: 1.05rem;
    color: var(--BEC-Text-Primary);
}

.slide-panel-header .close-btn[b-3l8coi4uxh] {
    border: none;
    background: transparent;
    color: var(--BEC-Text-Secondary);
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.slide-panel-header .close-btn:hover[b-3l8coi4uxh] {
    background: var(--BEC-Surface-Hover);
    color: var(--BEC-Text-Primary);
}

.slide-panel-body[b-3l8coi4uxh] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 18px;
}

.detail-grid[b-3l8coi4uxh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.detail-sections[b-3l8coi4uxh] {
    display: grid;
    gap: 16px;
}

.detail-section[b-3l8coi4uxh] {
    display: grid;
    gap: 12px;
}

.detail-section h3[b-3l8coi4uxh] {
    margin: 0;
    font-size: 1rem;
    color: var(--BEC-Text-Primary);
}

.detail-grid--wide[b-3l8coi4uxh] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-grid__full[b-3l8coi4uxh] {
    grid-column: 1 / -1;
}

.detail-label[b-3l8coi4uxh] {
    display: block;
    font-size: 0.75rem;
    color: var(--BEC-Text-Secondary);
}

.detail-value[b-3l8coi4uxh] {
    display: block;
    color: var(--BEC-Text-Primary);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.detail-value--multiline[b-3l8coi4uxh] {
    white-space: pre-wrap;
    line-height: 1.5;
}

.detail-card-list[b-3l8coi4uxh] {
    display: grid;
    gap: 12px;
}

.detail-card-list--compact[b-3l8coi4uxh] {
    gap: 10px;
}

.detail-card[b-3l8coi4uxh] {
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 10px;
    background: var(--BEC-Surface-Secondary, #f8fafc);
    padding: 12px;
    display: grid;
    gap: 10px;
}

.detail-card__header[b-3l8coi4uxh] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
}

.detail-card__meta[b-3l8coi4uxh] {
    color: var(--BEC-Text-Secondary);
    font-size: 0.8rem;
}

.tag-list[b-3l8coi4uxh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.tag-card[b-3l8coi4uxh] {
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--BEC-Surface-Secondary, #f8fafc);
    display: grid;
    gap: 4px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.detail-card__header strong[b-3l8coi4uxh] {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.review-summary-grid[b-3l8coi4uxh] {
    margin-bottom: 2px;
}

.divider[b-3l8coi4uxh] {
    border: 0;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    margin: 14px 0;
}

.update-form[b-3l8coi4uxh] {
    display: grid;
    gap: 8px;
}

.update-form h3[b-3l8coi4uxh] {
    margin: 0 0 2px;
    font-size: 1rem;
}

.update-form label[b-3l8coi4uxh] {
    font-size: 0.8rem;
    color: var(--BEC-Text-Secondary);
}

.update-actions[b-3l8coi4uxh] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

@media (max-width: 1100px) {
    .detail-grid[b-3l8coi4uxh] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .detail-card__header[b-3l8coi4uxh] {
        flex-direction: column;
    }

    .tag-list[b-3l8coi4uxh] {
        grid-template-columns: 1fr;
    }

    .erp-page-header[b-3l8coi4uxh] {
        align-items: stretch;
    }

    .filter-bar[b-3l8coi4uxh] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-actions[b-3l8coi4uxh] {
        margin-left: 0;
    }

    .filter-input[b-3l8coi4uxh],
    .filter-select[b-3l8coi4uxh] {
        min-width: 0;
        width: 100%;
    }

    .panel[b-3l8coi4uxh] {
        padding: 10px;
    }

    .slide-panel[b-3l8coi4uxh] {
        width: 100vw;
    }
}

@media (max-width: 480px) {
    .erp-page-container[b-3l8coi4uxh] {
        padding: 10px;
        gap: 10px;
    }

    .page-title[b-3l8coi4uxh] {
        font-size: 1rem;
    }

    .stats-container[b-3l8coi4uxh] {
        gap: 10px;
    }

    .applications-table th[b-3l8coi4uxh],
    .applications-table td[b-3l8coi4uxh] {
        padding: 8px 6px;
        font-size: 0.85rem;
    }

    .pager[b-3l8coi4uxh] {
        justify-content: space-between;
    }
}
/* /Components/Pages/MainLayout/Recruitment/PublicApplication/PublicJobApplication.razor.rz.scp.css */
.public-job-app-shell[b-m0jp6zpxpa] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px;
    display: grid;
    gap: 10px;
    color: var(--BEC-Text-Primary);
    background: var(--BEC-dashboard-bg);
    min-height: 100vh;
    font-family: "Segoe UI", "Segoe UI Variable", "Tajawal", "Noto Sans Arabic", "Noto Kufi Arabic", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.4;
}

.card-surface[b-m0jp6zpxpa] {
    background: var(--BEC-Surface-Base);
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusMedium);
    box-shadow: var(--BEC-depth-1);
}

.public-job-app-header[b-m0jp6zpxpa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.public-job-app-brand[b-m0jp6zpxpa] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.public-job-app-logo[b-m0jp6zpxpa] {
    width: 118px;
    height: auto;
    flex-shrink: 0;
}

.public-job-app-kicker[b-m0jp6zpxpa] {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--BEC-Brand-Primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.public-job-app-header-text h1[b-m0jp6zpxpa] {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--BEC-neutralPrimary);
}

.public-job-app-header-text p[b-m0jp6zpxpa] {
    margin: 4px 0 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--BEC-neutralSecondary);
}

.public-job-app-public-badge[b-m0jp6zpxpa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--BEC-Brand-Primary);
    color: var(--BEC-Brand-Primary);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 0.76rem;
    font-weight: 700;
    padding: 5px 9px;
    white-space: nowrap;
}

.public-job-app-body[b-m0jp6zpxpa] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 10px;
    align-items: start;
}

.public-job-app-main[b-m0jp6zpxpa] {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.public-job-app-aside[b-m0jp6zpxpa] {
    min-width: 0;
}

.status-stack[b-m0jp6zpxpa] {
    display: grid;
    gap: 6px;
}

.status-panel[b-m0jp6zpxpa] {
    padding: 8px 10px;
}

.status-panel p[b-m0jp6zpxpa] {
    margin: 0;
}

.application-card[b-m0jp6zpxpa],
.track-card[b-m0jp6zpxpa] {
    padding: 12px;
}

.track-card[b-m0jp6zpxpa] {
    position: sticky;
    top: 10px;
}

.track-card h2[b-m0jp6zpxpa] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 700;
}

.validation-summary[b-m0jp6zpxpa] {
    margin: 0;
    padding: 7px 10px;
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-Error-Subtle);
    color: var(--BEC-Error-Main);
    border: 1px solid var(--BEC-Error-Main);
}

.form-section[b-m0jp6zpxpa] {
    display: grid;
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid var(--BEC-Border-Subtle);
}

.form-section:first-of-type[b-m0jp6zpxpa] {
    border-top: 0;
    padding-top: 6px;
}

.form-section.duplicate-check-passed[b-m0jp6zpxpa] {
    border: 1px solid var(--BEC-Success-Main);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-Success-Subtle);
    padding: 10px 12px;
}

.section-head[b-m0jp6zpxpa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.section-head h2[b-m0jp6zpxpa] {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: 0.005em;
    color: var(--BEC-neutralPrimary);
}

.state-text[b-m0jp6zpxpa],
.section-note[b-m0jp6zpxpa] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--BEC-neutralSecondary);
}

.error-panel[b-m0jp6zpxpa] {
    border-color: var(--BEC-Error-Main);
    background: var(--BEC-Error-Subtle);
    color: var(--BEC-Error-Main);
}

.warning-panel[b-m0jp6zpxpa] {
    border-color: var(--BEC-Warning-Main);
    background: var(--BEC-Warning-Subtle);
    color: var(--BEC-neutralPrimary);
}

.success-panel[b-m0jp6zpxpa] {
    border-color: var(--BEC-Success-Main);
    background: var(--BEC-Success-Subtle);
    color: var(--BEC-Success-Main);
}

.info-panel[b-m0jp6zpxpa] {
    border-color: var(--BEC-Info-Main);
    background: var(--BEC-Info-Subtle);
    color: var(--BEC-neutralPrimary);
}

.grid[b-m0jp6zpxpa] {
    display: grid;
    gap: 8px;
}

.grid-2[b-m0jp6zpxpa] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3[b-m0jp6zpxpa] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field[b-m0jp6zpxpa] {
    display: grid;
    gap: 3px;
}

.field-full[b-m0jp6zpxpa] {
    grid-column: 1 / -1;
}

.field-tight[b-m0jp6zpxpa] {
    max-width: 250px;
}

.field label[b-m0jp6zpxpa] {
    font-size: 0.79rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--BEC-Text-Primary);
}

.field-label-ar[b-m0jp6zpxpa] {
    display: block;
    margin-top: 1px;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--BEC-neutralSecondary);
    direction: rtl;
    text-align: right;
}

.toggle-field[b-m0jp6zpxpa] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--BEC-neutralPrimary);
}

.toggle-field.compact[b-m0jp6zpxpa] {
    font-weight: 600;
}

.toggle-field-ar[b-m0jp6zpxpa] {
    margin-inline-start: 4px;
    color: var(--BEC-neutralSecondary);
    direction: rtl;
    unicode-bidi: embed;
}

.toggle-field-ar[b-m0jp6zpxpa]::before {
    content: "/ ";
}

.declaration-ar[b-m0jp6zpxpa] {
    display: block;
    margin-inline-start: 0;
    margin-top: 2px;
}

.declaration-ar[b-m0jp6zpxpa]::before {
    content: "";
}

.compact-check-grid[b-m0jp6zpxpa] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 7px 8px;
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-Surface-Alt);
}

.declaration-field[b-m0jp6zpxpa] {
    padding: 8px;
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-Surface-Alt);
}

.actions-row[b-m0jp6zpxpa] {
    display: flex;
    gap: 6px;
    margin: 0;
}

.repeatable-list[b-m0jp6zpxpa] {
    display: grid;
    gap: 6px;
}

.repeatable-item[b-m0jp6zpxpa] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 6px;
    padding: 7px;
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-Surface-Alt);
    align-items: end;
}

.repeatable-item-wide[b-m0jp6zpxpa] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.repeatable-item-wide .textarea[b-m0jp6zpxpa] {
    grid-column: 1 / span 3;
}

.bec-input[b-m0jp6zpxpa] {
    width: 100%;
    border: 1px solid var(--BEC-Border-Strong);
    border-radius: var(--BEC-borderRadiusSmall);
    padding: 6px 8px;
    background: var(--BEC-Surface-Base);
    color: var(--BEC-neutralPrimary);
    min-height: 34px;
    line-height: 1.35;
}

.bec-input.textarea[b-m0jp6zpxpa] {
    min-height: 52px;
    height: 52px;
    resize: none;
    overflow-y: hidden;
    box-sizing: border-box;
}

[b-m0jp6zpxpa] .e-input-group textarea.e-input {
    resize: none;
    overflow-y: hidden;
    box-sizing: border-box;
}

.bec-btn[b-m0jp6zpxpa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border: 1px solid transparent;
    border-radius: var(--BEC-borderRadiusSmall);
    padding: 6px 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.3;
    white-space: nowrap;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.bec-btn:focus-visible[b-m0jp6zpxpa] {
    outline: none;
    box-shadow: 0 0 0 2px var(--BEC-Surface-Base), 0 0 0 4px var(--BEC-Brand-Primary);
}

.bec-btn:disabled[b-m0jp6zpxpa] {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

.bec-btn-primary[b-m0jp6zpxpa] {
    background: var(--BEC-Brand-Primary);
    color: var(--BEC-neutral-background-1);
    border-color: var(--BEC-Brand-Primary);
    box-shadow: var(--BEC-depth-1);
}

.bec-btn-primary:hover:not(:disabled)[b-m0jp6zpxpa] {
    background: var(--BEC-Brand-Secondary);
    border-color: var(--BEC-Brand-Secondary);
}

.bec-btn-primary:active:not(:disabled)[b-m0jp6zpxpa] {
    transform: translateY(1px);
}

.bec-btn-secondary[b-m0jp6zpxpa] {
    background: var(--BEC-Surface-Base);
    color: var(--BEC-Brand-Primary);
    border-color: var(--BEC-Brand-Primary);
}

.bec-btn-secondary:hover:not(:disabled)[b-m0jp6zpxpa] {
    background: var(--BEC-Info-Subtle);
}

.bec-btn-secondary:active:not(:disabled)[b-m0jp6zpxpa] {
    transform: translateY(1px);
}

.bec-btn-danger[b-m0jp6zpxpa] {
    background: var(--BEC-Error-Main);
    color: var(--BEC-neutral-background-1);
    border-color: var(--BEC-Error-Main);
}

.bec-btn-danger:hover:not(:disabled)[b-m0jp6zpxpa] {
    background: var(--BEC-Error-Main);
    border-color: var(--BEC-Error-Main);
    filter: brightness(0.92);
}

.bec-btn-danger:focus-visible[b-m0jp6zpxpa] {
    box-shadow: 0 0 0 2px var(--BEC-Surface-Base), 0 0 0 4px var(--BEC-Error-Main);
}

.bec-btn-danger:active:not(:disabled)[b-m0jp6zpxpa] {
    transform: translateY(1px);
}

.actions-row-submit[b-m0jp6zpxpa] {
    justify-content: flex-start;
}

.track-row[b-m0jp6zpxpa] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    margin-top: 2px;
}

.tracking-summary[b-m0jp6zpxpa] {
    display: grid;
    gap: 5px;
}

.tracking-item[b-m0jp6zpxpa] {
    display: grid;
    grid-template-columns: minmax(120px, 180px) 1fr;
    gap: 6px;
    padding: 6px 7px;
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-Surface-Alt);
}

.tracking-key[b-m0jp6zpxpa] {
    font-weight: 700;
    font-size: 0.83rem;
    color: var(--BEC-neutralPrimary);
}

.tracking-value[b-m0jp6zpxpa] {
    font-size: 0.84rem;
    line-height: 1.35;
    color: var(--BEC-neutralSecondary);
    word-break: break-word;
}

[b-m0jp6zpxpa] .e-input-group,
[b-m0jp6zpxpa] .e-control-wrapper,
[b-m0jp6zpxpa] .e-ddl.e-input-group,
[b-m0jp6zpxpa] .e-datepicker.e-input-group {
    min-height: 34px;
}

[b-m0jp6zpxpa] .e-input-group input.e-input,
[b-m0jp6zpxpa] .e-control-wrapper input.e-input,
[b-m0jp6zpxpa] .e-input-group textarea.e-input {
    min-height: 34px;
    line-height: 1.35;
    padding-block: 5px;
}

[b-m0jp6zpxpa] .e-ddl .e-input,
[b-m0jp6zpxpa] .e-datepicker .e-input {
    min-height: 34px;
}

@media (max-width: 1366px) {
    .public-job-app-shell[b-m0jp6zpxpa] {
        max-width: 1220px;
        padding: 14px;
    }

    .public-job-app-body[b-m0jp6zpxpa] {
        grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
    }
}

@media (max-width: 1280px) {
    .public-job-app-shell[b-m0jp6zpxpa] {
        max-width: 1160px;
        padding: 12px;
    }

    .public-job-app-body[b-m0jp6zpxpa] {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    }
}

@media (max-width: 1024px) {
    .public-job-app-body[b-m0jp6zpxpa] {
        grid-template-columns: 1fr;
    }

    .track-card[b-m0jp6zpxpa] {
        position: static;
    }

    .grid-3[b-m0jp6zpxpa],
    .compact-check-grid[b-m0jp6zpxpa] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .repeatable-item-wide[b-m0jp6zpxpa] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .repeatable-item-wide .textarea[b-m0jp6zpxpa] {
        grid-column: 1 / -1;
    }

    .grid-2[b-m0jp6zpxpa],
    .repeatable-item[b-m0jp6zpxpa],
    .tracking-item[b-m0jp6zpxpa] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .public-job-app-shell[b-m0jp6zpxpa] {
        padding: 12px;
    }

    .public-job-app-header[b-m0jp6zpxpa] {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px;
    }

    .public-job-app-brand[b-m0jp6zpxpa] {
        width: 100%;
    }

    .public-job-app-logo[b-m0jp6zpxpa] {
        width: 102px;
    }

    .public-job-app-header-text h1[b-m0jp6zpxpa] {
        font-size: 1.1rem;
    }

    .application-card[b-m0jp6zpxpa],
    .track-card[b-m0jp6zpxpa] {
        padding: 12px;
    }

    .section-head[b-m0jp6zpxpa] {
        flex-direction: column;
        align-items: flex-start;
    }

    .compact-check-grid[b-m0jp6zpxpa] {
        grid-template-columns: 1fr;
    }

    .actions-row[b-m0jp6zpxpa] {
        flex-direction: column;
        align-items: stretch;
    }

    .bec-btn[b-m0jp6zpxpa] {
        width: 100%;
    }
}

/* Phones — .grid-3 and .repeatable-item-wide still sit at 2 columns from the
   1024px breakpoint above, which is fine for tablets but too cramped once the
   viewport drops to real phone widths. */
@media (max-width: 560px) {
    .public-job-app-shell[b-m0jp6zpxpa] {
        padding: 10px;
        gap: 8px;
    }

    .public-job-app-logo[b-m0jp6zpxpa] {
        width: 88px;
    }

    .grid-3[b-m0jp6zpxpa],
    .repeatable-item-wide[b-m0jp6zpxpa] {
        grid-template-columns: 1fr;
    }

    .repeatable-item-wide .textarea[b-m0jp6zpxpa] {
        grid-column: 1 / -1;
    }

    .repeatable-item[b-m0jp6zpxpa] {
        grid-template-columns: 1fr;
    }

    .track-row[b-m0jp6zpxpa] {
        grid-template-columns: 1fr;
    }

    .track-row .bec-btn[b-m0jp6zpxpa] {
        width: 100%;
    }

    /* Larger touch targets — 34px is workable on desktop but tight for fingers. */
    .bec-btn[b-m0jp6zpxpa],
    .bec-input[b-m0jp6zpxpa],
    [b-m0jp6zpxpa] .e-input-group,
    [b-m0jp6zpxpa] .e-control-wrapper,
    [b-m0jp6zpxpa] .e-ddl.e-input-group,
    [b-m0jp6zpxpa] .e-datepicker.e-input-group {
        min-height: 42px;
    }

    [b-m0jp6zpxpa] .e-input-group input.e-input,
    [b-m0jp6zpxpa] .e-control-wrapper input.e-input,
    [b-m0jp6zpxpa] .e-ddl .e-input,
    [b-m0jp6zpxpa] .e-datepicker .e-input {
        min-height: 42px;
    }

    .field label[b-m0jp6zpxpa] {
        font-size: 0.82rem;
    }
}
/* /Components/Pages/MainLayout/Referral/ExternalReferral/ExternalReferral.razor.rz.scp.css */
/* ========================================
   BEC Aspire - External Referral Public Form
   Architecture: Mobile-First Flexbox Layout
   Design: Mirrors PublicVisitorForm exactly
   ======================================== */

/* Local scoped variables — moved from :root to avoid global leak.
   Values now aliased from global tokens in _z-index.css & _motion-extended.css */

/* ── RESET & STRUCTURE ────────────────── */
.public-form-container[b-pwgbzq4men] {
    --bec-transition: var(--BEC-transitionPremium);
    --bec-shadow-premium: var(--BEC-shadowPremium);
    --z-header: var(--BEC-zIndex-Header);
    --z-footer: var(--BEC-zIndex-Footer);
    --z-content: var(--BEC-zIndex-Content);
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    background: #F5F7FA;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI', system-ui, -apple-system, sans-serif);
}

.app-container[b-pwgbzq4men] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ── SIDEBAR (Mobile Default: HIDDEN) ──────────────── */
.app-sidebar[b-pwgbzq4men] {
    display: none;
}

/* ── HEADER (Mobile Only) ──────────────── */
.mobile-header[b-pwgbzq4men] {
    height: 60px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    z-index: var(--z-header);
}

.mobile-header-logo[b-pwgbzq4men] {
    font-weight: 700;
    font-size: 18px;
    color: var(--BEC-themePrimary, #0078d4);
    letter-spacing: -0.5px;
}

.mobile-progress-bar[b-pwgbzq4men] {
    height: 3px;
    background: rgba(0, 0, 0, 0.05);
    width: 100%;
    flex-shrink: 0;
}

.mobile-progress-fill[b-pwgbzq4men] {
    height: 100%;
    background: var(--BEC-themePrimary, #0078d4);
    transition: width 0.4s ease;
}

/* ── MAIN SCROLLABLE CONTENT ────────────────── */
.app-content[b-pwgbzq4men] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.app-content > form[b-pwgbzq4men] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── WIZARD STEPS ────────────────── */
.wizard-step[b-pwgbzq4men] {
    flex: 1;
    padding: 24px 24px 120px 24px;
    display: none;
    flex-direction: column;
    animation: fadeIn-b-pwgbzq4men 0.4s ease;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.wizard-step.active[b-pwgbzq4men] {
    display: flex;
}

@keyframes fadeIn-b-pwgbzq4men {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Typography */
h1[b-pwgbzq4men] {
    font-size: 28px;
    font-weight: 800;
    color: #1a1f2c;
    margin-bottom: 8px;
    letter-spacing: -1px;
}

h2[b-pwgbzq4men] {
    font-size: 24px;
    font-weight: 700;
    color: #1a1f2c;
    margin-bottom: 8px;
}

p.subtitle[b-pwgbzq4men] {
    font-size: 16px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 32px;
}

/* ── INPUT GROUPS ────────────────── */
.input-group[b-pwgbzq4men] {
    margin-bottom: 20px;
    position: relative;
}

.e-float-input.e-control-wrapper[b-pwgbzq4men] {
    background: white !important;
    border-radius: 12px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 8px 16px 4px !important;
    height: 56px !important;
    box-shadow: none !important;
    transition: border-color 0.2s;
}

.e-float-input.e-control-wrapper.e-input-focus[b-pwgbzq4men] {
    border-color: var(--BEC-themePrimary, #0078d4) !important;
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.1) !important;
}

.e-float-input.e-control-wrapper .e-float-line[b-pwgbzq4men],
.e-float-input.e-control-wrapper .e-float-text-overflow[b-pwgbzq4men] {
    display: none !important;
}

.e-input-group.e-error[b-pwgbzq4men] {
    border-color: #ef4444 !important;
    animation: shake-b-pwgbzq4men 0.4s;
}

.validation-message[b-pwgbzq4men] {
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
    margin-left: 4px;
}

@keyframes shake-b-pwgbzq4men {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* ── FIXED ACTION BAR ────────────────── */
.fixed-action-bar[b-pwgbzq4men] {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 16px 24px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-footer);
    display: flex;
    gap: 12px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.action-btn[b-pwgbzq4men] {
    flex: 1;
    height: 50px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

.action-btn:active[b-pwgbzq4men] {
    transform: scale(0.96);
}

.btn[b-pwgbzq4men] {
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    border-radius: 25px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    height: 48px;
}

.btn-primary[b-pwgbzq4men] {
    background: var(--BEC-themePrimary, #0078d4);
    color: white;
}

.btn-secondary[b-pwgbzq4men] {
    background: #e2e8f0;
    color: #475569;
}

.btn-success[b-pwgbzq4men] {
    background: #10b981;
    color: white;
}

/* ── UPLOAD AREA ──────────────── */
.upload-area[b-pwgbzq4men] {
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.upload-icon[b-pwgbzq4men] {
    margin-bottom: 12px;
    color: var(--BEC-themePrimary, #0078d4);
}

.file-input-hidden[b-pwgbzq4men] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0 !important;
    overflow: hidden;
    cursor: pointer;
    z-index: 10;
}

[b-pwgbzq4men] input[type="file"].file-input-hidden {
    opacity: 0 !important;
}

.upload-area:hover[b-pwgbzq4men] {
    border-color: var(--BEC-themePrimary, #0078d4);
    background: #f0f9ff;
}

.upload-text-title[b-pwgbzq4men] {
    font-weight: 600;
    font-size: 16px;
    color: #334155;
    margin: 0;
}

.upload-text-subtitle[b-pwgbzq4men] {
    font-size: 13px;
    color: #94a3b8;
    margin: 4px 0 0;
}

/* File Preview */
.file-preview[b-pwgbzq4men] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #eff6ff;
    border-radius: 12px;
    border: 1px solid #dbeafe;
}

.file-preview-info[b-pwgbzq4men] {
    flex: 1;
}

.file-preview-name[b-pwgbzq4men] {
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
}

.file-preview-size[b-pwgbzq4men] {
    font-size: 12px;
    color: #64748b;
}

.btn-icon-remove[b-pwgbzq4men] {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 4px;
    display: flex;
    opacity: 0.7;
    transition: 0.2s;
}

.btn-icon-remove:hover[b-pwgbzq4men] {
    opacity: 1;
    transform: scale(1.1);
}

/* Start Button Large */
.btn-lg[b-pwgbzq4men] {
    height: 56px;
    font-size: 18px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
    border-radius: 28px !important;
}

/* Success Page */
.success-container[b-pwgbzq4men] {
    text-align: center;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.success-icon[b-pwgbzq4men] {
    width: 96px;
    height: 96px;
    background: #dcfce7;
    color: #166534;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 32px;
    font-size: 48px;
    box-shadow: 0 10px 30px -10px rgba(22, 101, 52, 0.3);
    animation: popIn-b-pwgbzq4men 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn-b-pwgbzq4men {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.success-subtitle[b-pwgbzq4men] {
    font-size: 18px;
    color: #334155;
    margin-bottom: 8px;
}

.success-thankyou[b-pwgbzq4men] {
    font-size: 14px;
    color: #94a3b8;
    margin-bottom: 48px;
}

.btn--auto-width[b-pwgbzq4men] {
    min-width: 200px;
    width: auto;
    padding: 0 32px;
}

.spacer-md[b-pwgbzq4men] {
    height: 24px;
}

/* ── DESKTOP ONLY OVERRIDES ──────────────── */
@media (min-width: 900px) {
    .public-form-container[b-pwgbzq4men] {
        padding: 40px;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f0f2f5 0%, #e1e4e8 100%);
    }

    .app-container[b-pwgbzq4men] {
        max-width: 1000px;
        height: 80vh;
        max-height: 800px;
        background: white;
        border-radius: 24px;
        box-shadow: var(--bec-shadow-premium);
        flex-direction: row;
        overflow: hidden;
    }

    .app-sidebar[b-pwgbzq4men] {
        width: 320px;
        padding: 40px;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .sidebar-bg-deco[b-pwgbzq4men],
    .sidebar-logo[b-pwgbzq4men],
    .sidebar-stepper[b-pwgbzq4men],
    .sidebar-footer[b-pwgbzq4men] {
        display: block;
    }

    .mobile-header[b-pwgbzq4men],
    .mobile-progress-bar[b-pwgbzq4men] {
        display: none !important;
    }

    .app-content[b-pwgbzq4men] {
        padding: 0;
    }

    .wizard-step[b-pwgbzq4men] {
        padding: 60px 80px;
        max-width: none;
    }

    .fixed-action-bar[b-pwgbzq4men] {
        position: absolute;
        width: 100%;
        border-radius: 0 0 24px 0;
    }
}

/* Side Bar Premium Polish */
.app-sidebar[b-pwgbzq4men] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    position: relative;
    overflow: hidden;
}

.sidebar-bg-deco[b-pwgbzq4men] {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.logo-brand[b-pwgbzq4men] {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 4px;
}

.logo-tagline[b-pwgbzq4men] {
    font-size: 14px;
    opacity: 0.6;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sidebar-stepper[b-pwgbzq4men] {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.stepper-item[b-pwgbzq4men] {
    display: flex;
    align-items: center;
    gap: 16px;
    opacity: 0.4;
    transition: 0.3s;
}

.stepper-item.active[b-pwgbzq4men] {
    opacity: 1;
}

.stepper-item.completed[b-pwgbzq4men] {
    opacity: 1;
}

.stepper-item.completed .step-indicator[b-pwgbzq4men] {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

.step-indicator[b-pwgbzq4men] {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 14px;
    transition: 0.3s;
}

.stepper-item.active .step-indicator[b-pwgbzq4men] {
    background: white;
    color: #0f172a;
    border-color: white;
    transform: scale(1.1);
}

.step-text-title[b-pwgbzq4men] {
    font-weight: 600;
    font-size: 16px;
}

.step-text-subtitle[b-pwgbzq4men] {
    font-size: 13px;
    opacity: 0.7;
}

.sidebar-footer[b-pwgbzq4men] {
    font-size: 12px;
    opacity: 0.3;
    margin-top: auto;
}

/* ================= MIGRATED INLINE STYLES ================= */

.ref-validation-centered[b-pwgbzq4men] {
    text-align: center;
}
/* /Components/Pages/MainLayout/Referral/FraudMonitoring/Components/FraudFlagReviewModal.razor.rz.scp.css */
/* ============================================================================
   FraudFlagReviewModal - Official Design System Tokens
   ============================================================================
   Pattern: SfDialog with .sp-* form classes
   Module: Referral - Fraud Monitoring
   ============================================================================ */

/* ── DIALOG HEADER ── */
.dialog-header[b-3wkqarb2ox] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dialog-header-icon[b-3wkqarb2ox] {
    color: var(--BEC-Warning-Main, #ffb900);
    font-size: 18px;
}

.dialog-header--danger[b-3wkqarb2ox] {
    color: var(--BEC-Error-Main, #a4262c);
}

/* ── SUMMARY BOX ── */
.summary-box[b-3wkqarb2ox] {
    background: var(--BEC-Warning-Subtle, #fff4ce);
    border: 1px solid var(--BEC-Warning-Main, #ffb900);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 20px;
}

.summary-row[b-3wkqarb2ox] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.summary-row:last-child[b-3wkqarb2ox] {
    margin-bottom: 0;
}

.summary-label[b-3wkqarb2ox] {
    font-weight: 600;
    color: var(--BEC-Text-Secondary, #605e5c);
    min-width: 100px;
}

.summary-value[b-3wkqarb2ox] {
    color: var(--BEC-Text-Primary, #323130);
}

.confidence-badge[b-3wkqarb2ox] {
    background: var(--BEC-Brand-Primary, #0078d4);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

/* ── FORM ELEMENTS ── */
.sp-form-group[b-3wkqarb2ox] {
    margin-bottom: 16px;
}

.sp-label[b-3wkqarb2ox] {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--BEC-Text-Primary, #323130);
}

.sp-required[b-3wkqarb2ox] {
    color: var(--BEC-Error-Main, #a4262c);
}

/* ── DECISION OPTIONS ── */
.decision-options[b-3wkqarb2ox] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.decision-option[b-3wkqarb2ox] {
    padding: 12px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 6px;
    background: var(--BEC-Surface-Base, #fff);
    transition: all 0.15s ease;
}

.decision-option:hover[b-3wkqarb2ox] {
    background: var(--BEC-Surface-Alt, #faf9f8);
    border-color: var(--BEC-Brand-Primary, #0078d4);
}

.decision-option--danger:hover[b-3wkqarb2ox] {
    border-color: var(--BEC-Error-Main, #a4262c);
    background: var(--BEC-Error-Subtle, #fde7e9);
}

/* ── ALERT ── */
.sp-alert[b-3wkqarb2ox] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 14px;
}

.sp-alert--error[b-3wkqarb2ox] {
    background: var(--BEC-Error-Subtle, #fde7e9);
    color: var(--BEC-Error-Main, #a4262c);
    border: 1px solid var(--BEC-Error-Main, #a4262c);
}

.sp-alert--warning[b-3wkqarb2ox] {
    background: var(--BEC-Warning-Subtle, #fff4ce);
    color: var(--BEC-Text-Primary, #323130);
    border: 1px solid var(--BEC-Warning-Main, #ffb900);
}

.sp-alert-dismiss[b-3wkqarb2ox] {
    margin-left: auto;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px;
    color: inherit;
    opacity: 0.7;
}

.sp-alert-dismiss:hover[b-3wkqarb2ox] {
    opacity: 1;
}

/* ── CONFIRMATION DIALOG ── */
[b-3wkqarb2ox] .confirmation-dialog .e-dlg-header-content {
    background: var(--BEC-Error-Subtle, #fde7e9);
    color: var(--BEC-Error-Main, #a4262c);
}

.confirmation-content[b-3wkqarb2ox] {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.confirmation-icon[b-3wkqarb2ox] {
    flex-shrink: 0;
}

.confirmation-icon .e-icons[b-3wkqarb2ox] {
    font-size: 48px;
    color: var(--BEC-Error-Main, #a4262c);
}

.confirmation-text[b-3wkqarb2ox] {
    flex: 1;
}

.confirmation-text p[b-3wkqarb2ox] {
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.confirmation-emphasis[b-3wkqarb2ox] {
    font-weight: 600;
}

.confirmation-list[b-3wkqarb2ox] {
    margin: 12px 0;
    padding-left: 20px;
}

.confirmation-list li[b-3wkqarb2ox] {
    margin-bottom: 6px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.confirmation-question[b-3wkqarb2ox] {
    font-weight: 600;
    margin-top: 16px !important;
    color: var(--BEC-Error-Main, #a4262c);
}

/* ── DANGER BUTTON ── */
[b-3wkqarb2ox] .e-danger.e-btn {
    background-color: var(--BEC-Error-Main, #d13438) !important;
    border-color: var(--BEC-Error-Main, #d13438) !important;
    color: white !important;
}

[b-3wkqarb2ox] .e-danger.e-btn:hover {
    background-color: var(--BEC-Error-Dark, #a4262c) !important;
    border-color: var(--BEC-Error-Dark, #a4262c) !important;
}

/* ── DIALOG ANIMATION ── */
[b-3wkqarb2ox] .confirmation-dialog {
    animation: dialog-shake-b-3wkqarb2ox 0.3s ease-in-out;
}

@keyframes dialog-shake-b-3wkqarb2ox {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
/* /Components/Pages/MainLayout/Referral/FraudMonitoring/Components/TrustScoreIndicator.razor.rz.scp.css */
/* ============================================================================
   TrustScoreIndicator - Official Design System Tokens
   ============================================================================
   Purpose: Trust score gauge styling with visual indicators
   Module: Referral - Fraud Monitoring
   ============================================================================ */

.trust-card[b-h23za46w8b] {
    background: var(--BEC-Surface-Base, #fff);
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.trust-card-title[b-h23za46w8b] {
    margin: 0 0 20px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-Text-Secondary, #605e5c);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── GAUGE ── */
.score-gauge[b-h23za46w8b] {
    width: 150px;
    height: 150px;
    margin: 0 auto 20px auto;
    position: relative;
}

.gauge-svg[b-h23za46w8b] {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.gauge-back[b-h23za46w8b] {
    stroke: var(--BEC-Surface-Alt, #f3f2f1);
    stroke-width: 10;
}

.gauge-front[b-h23za46w8b] {
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease-out;
}

.gauge-value[b-h23za46w8b] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gauge-number[b-h23za46w8b] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--BEC-Text-Primary, #323130);
    line-height: 1;
}

.gauge-max[b-h23za46w8b] {
    font-size: 14px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── STATS ── */
.trust-stats[b-h23za46w8b] {
    text-align: left;
}

.trust-row[b-h23za46w8b] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed var(--BEC-Border-Subtle, #edebe9);
    font-size: 13px;
}

.trust-row:last-child[b-h23za46w8b] {
    border-bottom: none;
}

.trust-label[b-h23za46w8b] {
    color: var(--BEC-Text-Secondary, #605e5c);
}

.trust-value[b-h23za46w8b] {
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.trust-value--danger[b-h23za46w8b] {
    color: var(--BEC-Error-Main, #d13438);
}
/* /Components/Pages/MainLayout/Referral/FraudMonitoring/FraudMonitoring.razor.rz.scp.css */
.BEC-Layout[b-7543j81688] {
    padding: var(--BEC-spacingHorizontalL);
    height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
}

.BEC-Header[b-7543j81688] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.BEC-Controls[b-7543j81688] {
    display: flex;
    gap: var(--BEC-spacingHorizontalM);
    align-items: center;
}

.BEC-Stats-Row[b-7543j81688] {
    display: flex;
    gap: var(--BEC-spacingHorizontalM);
    margin-bottom: var(--BEC-spacingHorizontalM);
}

.BEC-Stat-Card[b-7543j81688] {
    flex: 1;
    background: var(--BEC-neutral-background-1);
    border: 1px solid var(--BEC-neutralQuaternaryAlt);
    border-radius: var(--BEC-borderRadiusMedium);
    padding: var(--BEC-spacingHorizontalM);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Loading skeleton (page had zero loading affordance; _isLoading already
   existed in the code-behind but nothing in the markup used it) — same
   pattern as HRDashboard.razor.css's skeleton-grid, duplicated here since
   Blazor CSS isolation scopes classes per component. ── */
.skeleton-stat-label[b-7543j81688] {
    width: 70%;
    height: 12px;
    margin-bottom: 8px;
}

.skeleton-stat-value[b-7543j81688] {
    width: 40%;
    height: 22px;
}

.skeleton-grid[b-7543j81688] {
    width: 100%;
    padding: 16px;
}

.skeleton-row[b-7543j81688] {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.skeleton-cell[b-7543j81688] {
    height: 16px;
    flex: 1 1 0;
    background: linear-gradient(90deg, #f3f2f1 25%, #e1dfdd 50%, #f3f2f1 75%);
    background-size: 200% 100%;
    border-radius: 4px;
}

.skeleton-pulse[b-7543j81688] {
    animation: skeleton-pulse-b-7543j81688 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-7543j81688 {
    0%, 100% { background-position: 200% 0; }
    50% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-pulse[b-7543j81688] {
        animation: none;
        opacity: 0.7;
    }
}

.BEC-Stat-Label[b-7543j81688] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-neutralSecondary);
    text-transform: uppercase;
}

.BEC-Stat-Value[b-7543j81688] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: 700;
    color: var(--BEC-themePrimary);
}

.text-warning .BEC-Stat-Value[b-7543j81688] {
    color: var(--BEC-warningText);
}

.text-danger .BEC-Stat-Value[b-7543j81688] {
    color: var(--BEC-errorText);
}

.BEC-Badge--warning[b-7543j81688] {
    background: var(--BEC-warningBackground);
    color: var(--BEC-warningText);
}

.BEC-Badge--neutral[b-7543j81688] {
    background: var(--BEC-neutralLighter);
    color: var(--BEC-neutralSecondary);
}

/* Dashboard Overrides */
[b-7543j81688] .e-panel {
    border: 1px solid var(--BEC-neutralQuaternaryAlt) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    background: var(--BEC-neutral-background-1) !important;
}

[b-7543j81688] .e-panel-header {
    background: var(--BEC-neutral-background-2) !important;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM) !important;
}

.w-100[b-7543j81688] {
    width: 100%;
}

.mt-4[b-7543j81688] {
    margin-top: var(--BEC-spacingHorizontalL);
}

.p-3[b-7543j81688] {
    padding: var(--BEC-spacingHorizontalM);
}

.text-center[b-7543j81688] {
    text-align: center;
}

.text-muted[b-7543j81688] {
    color: var(--BEC-neutralSecondary);
}
/* /Components/Pages/MainLayout/Referral/HRDashboard/Components/DetailedScoreViewer.razor.rz.scp.css */
/* ============================================================================
   [UID: DETAILED_SCORE_VIEWER] - AI Score Breakdown Component
   ============================================================================
   8px Grid Compliant | Design Tokens Only
   Badge classes come from global BEC_Theme.css (no duplicates here)
   ============================================================================ */

.BEC-Detail-View[b-pf79o2eu4i] {
    background: var(--BEC-Surface-Base, #fff);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.BEC-Detail-Header[b-pf79o2eu4i] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.BEC-Detail-Title[b-pf79o2eu4i] {
    margin: 0;
    font-size: 16px;
    color: var(--BEC-Text-Primary, #323130);
}

.BEC-Detail-Subtitle[b-pf79o2eu4i] {
    color: var(--BEC-Text-Secondary, #605e5c);
    font-size: 13px;
}

.BEC-Detail-Score[b-pf79o2eu4i] {
    text-align: right;
    background: var(--BEC-Surface-Alt, #faf9f8);
    padding: 8px 12px;
    border-radius: 6px;
}

.BEC-Score-Label[b-pf79o2eu4i] {
    display: block;
    font-size: 10px;
    color: var(--BEC-Text-Secondary, #605e5c);
    letter-spacing: 1px;
}

.BEC-Score-Value[b-pf79o2eu4i] {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--BEC-Brand-Primary, #0078d4);
}

.BEC-Grid-2[b-pf79o2eu4i] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.BEC-Info-Card[b-pf79o2eu4i] {
    display: flex;
    flex-direction: column;
}

.BEC-Label-Small[b-pf79o2eu4i] {
    font-size: 10px;
    color: var(--BEC-Text-Secondary, #605e5c);
    margin-bottom: 2px;
    text-transform: uppercase;
}

.BEC-Divider[b-pf79o2eu4i] {
    height: 1px;
    background: var(--BEC-Border-Subtle, #edebe9);
    margin: 16px 0;
}

.BEC-Section-Title[b-pf79o2eu4i] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin-bottom: 12px;
}

.BEC-Breakdown-Table[b-pf79o2eu4i] {
    background: var(--BEC-Surface-Alt, #faf9f8);
    border-radius: 6px;
    padding: 12px;
}

.BEC-Breakdown-Row[b-pf79o2eu4i] {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed var(--BEC-Border-Subtle, #edebe9);
    font-size: 13px;
}

.BEC-Breakdown-Row:last-child[b-pf79o2eu4i] {
    border-bottom: none;
}

.BEC-Notes-Box[b-pf79o2eu4i] {
    margin-top: 16px;
    padding: 12px;
    background: var(--BEC-Warning-Subtle, #fff4ce);
    border-radius: 6px;
    border: 1px solid var(--BEC-Warning-Main, #ffb900);
}

.BEC-Notes-Box p[b-pf79o2eu4i] {
    margin: 4px 0 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-Text-Primary, #323130);
}

/* ── Helper text colors ── */
.text-success[b-pf79o2eu4i] {
    color: var(--BEC-Success-Main, #107c10);
}

.text-danger[b-pf79o2eu4i] {
    color: var(--BEC-Error-Main, #d13438);
}
/* /Components/Pages/MainLayout/Referral/HRDashboard/Components/HRReviewWizard.razor.rz.scp.css */
/* HRReviewWizard.razor.css — Migrated inline styles */

.ref-external-badge[b-0clmaiky3v] {
    font-size: 10px;
    padding: 1px 6px;
    margin-right: 4px;
}

.ref-alert-mt[b-0clmaiky3v] {
    margin-top: 8px;
}

.ref-text-muted[b-0clmaiky3v] {
    color: #94a3b8;
}

.ref-confirm-title[b-0clmaiky3v] {
    margin: 0 0 8px 0;
}

.ref-confirm-body[b-0clmaiky3v] {
    margin: 0 0 12px 0;
    font-size: 13px;
}

.ref-confirm-actions[b-0clmaiky3v] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.ref-reject-reason-input[b-0clmaiky3v] {
    width: 100%;
    padding: 8px;
    margin-bottom: 12px;
    border: 1px solid var(--BEC-border-color, #e2e8f0);
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
}
/* /Components/Pages/MainLayout/Referral/HRDashboard/Components/JobOpeningSideWizard.razor.rz.scp.css */
/* ============================================================================
   [UID: JOB_OPENING_SIDE_WIZARD] - Job Opening Side Wizard Scoped Styles
   ============================================================================
   8px Grid Compliant | Design Tokens Only
   Pattern: WIZARD_SIDE with .sp-* base, .jw-* wizard-specific
   ============================================================================ */

/* Keep the wizard panel above Syncfusion's backdrop. The backdrop must dim and
   intercept the page only; if it stacks above the panel, it also dims/blocks
   the wizard's own controls. Same fix as BecFormPanel.razor.css. */
[b-9cgjdvml7z] .e-sidebar {
    z-index: 1090 !important;
    position: relative !important;
    pointer-events: auto !important;
}

[b-9cgjdvml7z] .e-sidebar-content {
    pointer-events: auto !important;
}

[b-9cgjdvml7z] .e-sidebar-overlay {
    z-index: 1089 !important;
    pointer-events: none !important;
}

/* ── Step Indicator ── */
.jw-step-indicator[b-9cgjdvml7z] {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: 16px;
}

.jw-step[b-9cgjdvml7z] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    color: var(--BEC-Text-Secondary, #605e5c);
    border: 2px solid var(--BEC-Border-Subtle, #edebe9);
    transition: all 0.2s ease;
}

.jw-step--active[b-9cgjdvml7z] {
    background: var(--BEC-colorBrandBackground, #2b579a);
    color: #fff;
    border-color: var(--BEC-colorBrandBackground, #2b579a);
}

.jw-step-line[b-9cgjdvml7z] {
    width: 20px;
    height: 2px;
    background: var(--BEC-Border-Subtle, #edebe9);
    transition: background 0.2s ease;
}

.jw-step-line--active[b-9cgjdvml7z] {
    background: var(--BEC-colorBrandBackground, #2b579a);
}

/* ── Step Title & Description ── */
.jw-step-title[b-9cgjdvml7z] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin-bottom: 4px;
}

.jw-step-desc[b-9cgjdvml7z] {
    font-size: 13px;
    color: var(--BEC-Text-Secondary, #605e5c);
    margin: 0 0 16px 0;
    line-height: 1.4;
}

/* ── Form Fields ── */
.jw-form[b-9cgjdvml7z] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.jw-field[b-9cgjdvml7z] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.jw-field-row[b-9cgjdvml7z] {
    display: flex;
    gap: 16px;
}

.jw-field--half[b-9cgjdvml7z] {
    flex: 1;
    min-width: 0;
}

.jw-label[b-9cgjdvml7z] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.jw-required[b-9cgjdvml7z] {
    color: var(--BEC-Error-Main, #d13438);
}

.jw-optional[b-9cgjdvml7z] {
    font-weight: 400;
    color: var(--BEC-Text-Secondary, #605e5c);
    font-size: 12px;
}

.jw-input[b-9cgjdvml7z] {
    padding: 8px 12px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.jw-input:focus[b-9cgjdvml7z] {
    border-color: var(--BEC-colorBrandBackground, #2b579a);
    outline: none;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground, #2b579a);
}

.jw-textarea[b-9cgjdvml7z] {
    padding: 8px 12px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

.jw-textarea:focus[b-9cgjdvml7z] {
    border-color: var(--BEC-colorBrandBackground, #2b579a);
    outline: none;
    box-shadow: 0 0 0 1px var(--BEC-colorBrandBackground, #2b579a);
}

.jw-textarea--tall[b-9cgjdvml7z] {
    min-height: 160px;
}

.jw-textarea--editor[b-9cgjdvml7z] {
    min-height: 480px;
    font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ── Label Row (label + toggle button) ── */
.jw-label-row[b-9cgjdvml7z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.jw-toggle-btn[b-9cgjdvml7z] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 4px;
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    color: var(--BEC-Text-Secondary, #605e5c);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.jw-toggle-btn:hover[b-9cgjdvml7z] {
    background: var(--BEC-colorBrandBackground, #2b579a);
    color: #fff;
    border-color: var(--BEC-colorBrandBackground, #2b579a);
}

/* ── Markdown Preview Panel ── */
.jw-markdown-preview[b-9cgjdvml7z] {
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 6px;
    padding: 24px 28px;
    background: #fff;
    max-height: 520px;
    overflow-y: auto;
    line-height: 1.75;
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
}

.jw-markdown-preview--compact[b-9cgjdvml7z] {
    max-height: 320px;
    padding: 16px 20px;
}

.jw-markdown-preview--review[b-9cgjdvml7z] {
    max-height: 400px;
    margin-top: 12px;
}

/* ── Deep: Markdown Rendered HTML ── */
[b-9cgjdvml7z] .jw-markdown-preview h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--BEC-colorBrandBackground, #2b579a);
}

[b-9cgjdvml7z] .jw-markdown-preview h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--BEC-colorBrandForeground1, #2b579a);
    margin: 20px 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(43, 87, 154, 0.12);
}

[b-9cgjdvml7z] .jw-markdown-preview h2:first-child {
    margin-top: 0;
}

[b-9cgjdvml7z] .jw-markdown-preview h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 16px 0 6px 0;
}

[b-9cgjdvml7z] .jw-markdown-preview p {
    margin: 0 0 10px 0;
    line-height: 1.7;
}

[b-9cgjdvml7z] .jw-markdown-preview ul {
    margin: 4px 0 12px 0;
    padding-left: 20px;
}

[b-9cgjdvml7z] .jw-markdown-preview li {
    margin-bottom: 4px;
    line-height: 1.6;
}

[b-9cgjdvml7z] .jw-markdown-preview strong {
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

[b-9cgjdvml7z] .jw-markdown-preview hr {
    border: none;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    margin: 16px 0;
}

[b-9cgjdvml7z] .jw-markdown-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}

[b-9cgjdvml7z] .jw-markdown-preview th,
[b-9cgjdvml7z] .jw-markdown-preview td {
    padding: 8px 12px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    text-align: left;
}

[b-9cgjdvml7z] .jw-markdown-preview th {
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    font-weight: 600;
}

/* ── Metadata Section ── */
.jw-metadata-section[b-9cgjdvml7z] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jw-label--section[b-9cgjdvml7z] {
    font-size: 14px;
    font-weight: 700;
    color: var(--BEC-Text-Primary, #323130);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.jw-label--small[b-9cgjdvml7z] {
    font-size: 12px;
}

/* ── AI Generation State ── */
.jw-generating[b-9cgjdvml7z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 16px;
}

.jw-spinner[b-9cgjdvml7z] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--BEC-Border-Subtle, #edebe9);
    border-top-color: var(--BEC-colorBrandBackground, #2b579a);
    border-radius: 50%;
    animation: jw-spin-b-9cgjdvml7z 0.8s linear infinite;
}

@keyframes jw-spin-b-9cgjdvml7z {
    to { transform: rotate(360deg); }
}

.jw-generating-text[b-9cgjdvml7z] {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0;
}

.jw-generating-hint[b-9cgjdvml7z] {
    font-size: 13px;
    color: var(--BEC-Text-Secondary, #605e5c);
    margin: 0;
}

/* ── Skills Chips ── */
.jw-chips[b-9cgjdvml7z] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.jw-chip[b-9cgjdvml7z] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    color: var(--BEC-Text-Primary, #323130);
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.jw-chip--brand[b-9cgjdvml7z] {
    background: rgba(43, 87, 154, 0.08);
    color: var(--BEC-colorBrandForeground1, #2b579a);
    border-color: rgba(43, 87, 154, 0.2);
}

/* ── AI Badge ── */
.jw-ai-badge[b-9cgjdvml7z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(43, 87, 154, 0.06);
    color: var(--BEC-Text-Secondary, #605e5c);
    font-size: 11px;
    margin-top: 8px;
}

.jw-regenerate[b-9cgjdvml7z] {
    margin-top: 12px;
}

.jw-readonly-value[b-9cgjdvml7z] {
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
    padding: 4px 0;
}

/* ── Review Section (Step 3) ── */
.jw-review-bar[b-9cgjdvml7z] {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 4px;
}

.jw-review-bar-item[b-9cgjdvml7z] {
    flex: 1 1 calc(50% - 1px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    background: var(--BEC-Surface-Elevated, #f9f8f7);
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-right: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.jw-review-bar-item:nth-child(even)[b-9cgjdvml7z] {
    border-right: none;
}

.jw-review-bar-label[b-9cgjdvml7z] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.jw-review-bar-value[b-9cgjdvml7z] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Footer Spacer ── */
.jw-footer-spacer[b-9cgjdvml7z] {
    flex: 1;
}

/* ── Dropdown overrides ── */
.jw-dropdown[b-9cgjdvml7z],
.jw-datepicker[b-9cgjdvml7z] {
    width: 100%;
}

/* ================= MIGRATED INLINE STYLES ================= */

.ref-mt-12[b-9cgjdvml7z] {
    margin-top: 12px;
}

[b-9cgjdvml7z] .ref-mt-12 {
    margin-top: 12px;
}
/* /Components/Pages/MainLayout/Referral/HRDashboard/Components/JobPdfExportPanel.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   JobPdfExportPanel — Scoped CSS
   ══════════════════════════════════════════════════════════════ */

[b-4714xg6mii] .e-sidebar.export-panel-sidebar {
    z-index: 1050 !important;
}

.export-panel[b-4714xg6mii] {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* ── Header ── */
.export-panel-header[b-4714xg6mii] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #EDEBE9);
}

.export-header-content[b-4714xg6mii] {
    flex: 1;
}

.export-header-content h3[b-4714xg6mii] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.export-header-subtitle[b-4714xg6mii] {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--BEC-Text-Secondary, #605E5C);
}

/* ── Body ── */
.export-panel-body[b-4714xg6mii] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* ── Export All Button ── */
.export-top-action[b-4714xg6mii] {
    margin-bottom: 24px;
}

.export-all-btn[b-4714xg6mii] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background-color: var(--BEC-Surface-Elevated, #F3F2F1);
    border: 1px dashed var(--BEC-Primary, #2B579A);
    color: var(--BEC-Primary, #2B579A);
    font-weight: 600;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.export-all-btn:hover:not(:disabled)[b-4714xg6mii] {
    background-color: #e3effd;
}

.export-all-btn:disabled[b-4714xg6mii] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Error ── */
.export-error[b-4714xg6mii] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background-color: #fde7e9;
    border: 1px solid #d13438;
    border-radius: 4px;
    font-size: 13px;
    color: #a4262c;
}

/* ── Filters ── */
.export-filter-bar[b-4714xg6mii] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.export-filter-select[b-4714xg6mii] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--BEC-Border-Subtle, #EDEBE9);
    border-radius: 4px;
    color: var(--BEC-Text-Primary, #323130);
    font-size: 14px;
    background-color: var(--BEC-Surface, #FFFFFF);
    min-width: 0;
}

.export-filter-select:focus[b-4714xg6mii] {
    outline: none;
    border-color: var(--BEC-Primary, #2B579A);
}

/* ── TreeView ── */
.export-tree-view[b-4714xg6mii] {
    border: 1px solid var(--BEC-Border-Subtle, #EDEBE9);
    border-radius: 4px;
    overflow: hidden;
}

.export-tree-group[b-4714xg6mii] {
    border-bottom: 1px solid var(--BEC-Border-Subtle, #EDEBE9);
}

.export-tree-group:last-child[b-4714xg6mii] {
    border-bottom: none;
}

/* ── Group Header ── */
.export-group-header[b-4714xg6mii] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background-color: var(--BEC-Surface-Elevated, #F3F2F1);
    font-weight: 600;
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
    cursor: pointer;
    user-select: none;
}

.export-group-header:hover[b-4714xg6mii] {
    background-color: #eaeae8;
}

.export-toggle-icon[b-4714xg6mii] {
    font-size: 16px;
    font-weight: bold;
    color: var(--BEC-Text-Secondary, #605E5C);
    width: 16px;
    text-align: center;
}

.export-group-name[b-4714xg6mii] {
    flex: 1;
}

.export-group-count[b-4714xg6mii] {
    font-weight: 400;
    font-size: 13px;
    color: var(--BEC-Text-Secondary, #605E5C);
}

.export-group-header input[type="checkbox"][b-4714xg6mii] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--BEC-Primary, #2B579A);
}

/* ── Tree Children ── */
.export-tree-children[b-4714xg6mii] {
    display: block;
}

/* ── Tree Item ── */
.export-tree-item[b-4714xg6mii] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 44px;
    border-top: 1px solid var(--BEC-Border-Subtle, #EDEBE9);
    background-color: var(--BEC-Surface, #FFFFFF);
    transition: background-color 0.15s;
}

.export-tree-item:hover[b-4714xg6mii] {
    background-color: #faf9f8;
}

.export-tree-item input[type="checkbox"][b-4714xg6mii] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--BEC-Primary, #2B579A);
    flex-shrink: 0;
}

.export-item-details[b-4714xg6mii] {
    flex: 1;
    min-width: 0;
}

.export-item-title[b-4714xg6mii] {
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-Text-Primary, #323130);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.export-item-meta[b-4714xg6mii] {
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605E5C);
}

/* ── Status Badges ── */
.export-status-badge[b-4714xg6mii] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.export-status-dot[b-4714xg6mii] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-badge--published[b-4714xg6mii] {
    color: #107C10;
}

.status-badge--published .export-status-dot[b-4714xg6mii] {
    background-color: #107C10;
}

.status-badge--draft[b-4714xg6mii] {
    color: #797775;
}

.status-badge--draft .export-status-dot[b-4714xg6mii] {
    background-color: #797775;
}

.status-badge--onhold[b-4714xg6mii] {
    color: #ca5010;
}

.status-badge--onhold .export-status-dot[b-4714xg6mii] {
    background-color: #ca5010;
}

.status-badge--closed[b-4714xg6mii] {
    color: #a19f9d;
}

.status-badge--closed .export-status-dot[b-4714xg6mii] {
    background-color: #a19f9d;
}

.status-badge--filled[b-4714xg6mii] {
    color: #2B579A;
}

.status-badge--filled .export-status-dot[b-4714xg6mii] {
    background-color: #2B579A;
}

/* ── Empty State ── */
.export-empty-state[b-4714xg6mii] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--BEC-Text-Secondary, #605E5C);
    font-size: 14px;
}

/* ── Footer ── */
.export-panel-footer[b-4714xg6mii] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--BEC-Border-Subtle, #EDEBE9);
    background-color: var(--BEC-Surface-Elevated, #F3F2F1);
}

.export-selection-count[b-4714xg6mii] {
    font-size: 14px;
    color: var(--BEC-Text-Secondary, #605E5C);
    font-weight: 500;
}

.export-footer-actions[b-4714xg6mii] {
    display: flex;
    gap: 12px;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .export-filter-bar[b-4714xg6mii] {
        flex-direction: column;
        gap: 8px;
    }
}
/* /Components/Pages/MainLayout/Referral/HRDashboard/Components/PayoutManagement.razor.rz.scp.css */
/* PayoutManagement - use --BEC- tokens only. */
/* /Components/Pages/MainLayout/Referral/HRDashboard/HRDashboard.razor.rz.scp.css */
/* ============================================================================
   [UID: HR_DASHBOARD] - HR Dashboard Page Layout
   ============================================================================
   8px Grid Compliant | Design Tokens Only
   Mirrors MyReferrals pattern for module consistency
   ============================================================================ */

/* ── Layout ── */
.BEC-Layout[b-pvpj5widno] {
    padding: 0;
    /* Full viewport */
    display: flex;
    flex-direction: column;
    gap: 0;
    height: calc(100vh - 60px);
}

/* ── Header (compact) ── */
.BEC-Header[b-pvpj5widno] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 24px 8px 24px;
    /* Internal padding */
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    background: var(--BEC-Surface-Base, #fff);
}

/* ── Header layout ── */
.BEC-Header-Row[b-pvpj5widno] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* ── Header inline stats (IT Support pattern) ── */
.BEC-Stat-Group[b-pvpj5widno] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    justify-content: center;
}

.BEC-Stat-Group .BEC-Stat[b-pvpj5widno] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 0;
    background: none;
    border-radius: 0;
    min-width: 0;
    flex-direction: row;
}

.BEC-Stat-Value[b-pvpj5widno] {
    font-size: 16px;
    font-weight: 700;
    color: var(--BEC-Text-Primary, #323130);
}

.BEC-Stat-Group .BEC-Stat-Label[b-pvpj5widno] {
    font-size: 12px;
    font-weight: 500;
    color: var(--BEC-Text-Secondary, #605e5c);
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
}

.BEC-Stat--qualified .BEC-Stat-Value[b-pvpj5widno] {
    color: var(--BEC-Success-Main, #107c10);
}

.BEC-Stat--hired .BEC-Stat-Value[b-pvpj5widno] {
    color: var(--BEC-colorBrandForeground1, #2b579a);
}

.BEC-Stat--scoring .BEC-Stat-Value[b-pvpj5widno] {
    color: var(--BEC-Info-Main, #0078d4);
}

.BEC-Stat--rejected .BEC-Stat-Value[b-pvpj5widno] {
    color: var(--BEC-Error-Main, #d13438);
}

.BEC-Stat--flagged .BEC-Stat-Value[b-pvpj5widno] {
    color: #986f0b;
}

.BEC-Stat--pending .BEC-Stat-Value[b-pvpj5widno] {
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── Header actions (Export + New Job Opening) ── */
.BEC-Header-Actions[b-pvpj5widno] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Force all primary buttons to BEC blue */
.BEC-Header-Row[b-pvpj5widno]  .e-btn.e-primary {
    background: var(--BEC-Info-Main, #0078d4) !important;
    border-color: var(--BEC-Info-Main, #0078d4) !important;
    color: #fff !important;
}

.BEC-Export-Btn[b-pvpj5widno] {
    white-space: nowrap;
}

.BEC-Title[b-pvpj5widno] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.BEC-Stat-Label[b-pvpj5widno] {
    font-size: 10px;
    font-weight: 500;
    color: var(--BEC-Text-Secondary, #605e5c);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    line-height: 1.2;
}

/* ── Grid Container (Full Width) ── */

/* ── Syncfusion Tab full-height overrides ── */
.BEC-Tabs[b-pvpj5widno] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.BEC-Tabs[b-pvpj5widno]  .e-tab-header {
    flex-shrink: 0;
}

.BEC-Tabs[b-pvpj5widno]  .e-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.BEC-Tabs[b-pvpj5widno]  .e-content > .e-item.e-active {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.BEC-Grid-Container[b-pvpj5widno] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--BEC-Surface-Base, #fff);
    border: none;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

/* ── Syncfusion Grid border overrides ── */
.BEC-Grid-Container[b-pvpj5widno]  .e-grid {
    border: none !important;
}

.BEC-Grid-Container[b-pvpj5widno]  .e-grid .e-gridheader {
    border-bottom: 1px solid #cccccc !important;
    /* Darker, sharper divider */
    background: var(--BEC-Surface-Elevated, #f3f2f1) !important;
    height: 42px;
    min-height: 42px;
}

.BEC-Grid-Container[b-pvpj5widno]  .e-grid .e-headercell {
    border: none !important;
    color: var(--BEC-Text-Primary, #323130);
    font-weight: 600;
    font-size: 13px;
    padding: 0 12px !important;
    text-align: left !important;
    line-height: 42px;
    height: 42px;
}

.BEC-Grid-Container[b-pvpj5widno]  .e-grid .e-headercell:last-child {
    border-right: none !important;
}

.BEC-Grid-Container[b-pvpj5widno]  .e-grid .e-rowcell {
    border-bottom: 1px solid #eeeeee !important;
    border-right: none !important;
    font-size: 13px;
    color: var(--BEC-Text-Primary, #323130);
    padding: 0 12px !important;
    text-align: left !important;
}

.BEC-Grid-Container[b-pvpj5widno]  .e-grid .e-row:hover .e-rowcell {
    background: var(--BEC-Surface-Alt, #faf9f8) !important;
}

/* ── Button Action Styling (solid primary — excludes flat action buttons) ── */
.BEC-Grid-Container[b-pvpj5widno]  .e-btn.e-primary:not(.e-flat) {
    border-radius: 4px !important;
    height: 32px !important;
    line-height: normal !important;
    font-weight: 600 !important;
    background-color: var(--BEC-colorBrandBackground, #0078d4) !important;
    color: #fff !important;
    padding: 0 16px !important;
}

/* ============================================================================
   [UID: BULK_TOOLBAR] - Bulk Action Toolbar
   ============================================================================ */

.BEC-Bulk-Toolbar[b-pvpj5widno] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    background: var(--BEC-Info-Subtle, #deecf9);
    border: 1px solid var(--BEC-Info-Main, #0078d4);
    border-radius: 8px 8px 0 0;
    margin-bottom: -1px;
}

.BEC-Bulk-Toolbar-Label[b-pvpj5widno] {
    font-size: 13px;
    color: var(--BEC-Text-Primary, #323130);
    flex: 1;
}

.BEC-Bulk-Toolbar-Note[b-pvpj5widno] {
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605e5c);
    font-style: italic;
}

/* ── Checkbox selection row highlight ── */
.BEC-Grid-Container[b-pvpj5widno]  .e-grid .e-row.e-active .e-rowcell {
    background: var(--BEC-Info-Subtle, #deecf9) !important;
}

/* ── Loading State ── */
.BEC-Loading-State[b-pvpj5widno] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

/* ============================================================================
   [UID: SKELETON_GRID] - Skeleton Loading
   ============================================================================ */

.skeleton-grid[b-pvpj5widno] {
    width: 100%;
    padding: 16px;
}

.skeleton-row[b-pvpj5widno] {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.skeleton-cell[b-pvpj5widno] {
    height: 16px;
    background: linear-gradient(90deg, #f3f2f1 25%, #e1dfdd 50%, #f3f2f1 75%);
    background-size: 200% 100%;
    border-radius: 4px;
}

.skeleton-cell:nth-child(1)[b-pvpj5widno] {
    width: 160px;
}

.skeleton-cell:nth-child(2)[b-pvpj5widno] {
    width: 140px;
}

.skeleton-cell:nth-child(3)[b-pvpj5widno] {
    width: 120px;
}

.skeleton-cell:nth-child(4)[b-pvpj5widno] {
    width: 100px;
}

.skeleton-cell:nth-child(5)[b-pvpj5widno] {
    width: 80px;
}

.skeleton-pulse[b-pvpj5widno] {
    animation: skeleton-pulse-b-pvpj5widno 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-pvpj5widno {

    0%,
    100% {
        background-position: 200% 0;
    }

    50% {
        background-position: -200% 0;
    }
}

/* ============================================================================
   [UID: EMPTY_STATE] - Empty State
   ============================================================================ */

.BEC-Empty-State[b-pvpj5widno] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
}

.BEC-Empty-Title[b-pvpj5widno] {
    margin: 16px 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.BEC-Empty-Text[b-pvpj5widno] {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── Grid clickable link (candidate name) ── */
.BEC-Grid-Link[b-pvpj5widno] {
    color: var(--BEC-colorBrandForeground1, #2b579a);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}

.BEC-Grid-Link:hover[b-pvpj5widno] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground1Hover, #1a3a6b);
}

/* ── Row clickable cursor ── */
.BEC-Grid-Container[b-pvpj5widno]  .e-grid .e-row {
    cursor: pointer;
}

/* ============================================================================
   [UID: STATUS_TEXT] - Text-only Status Labels (no background)
   Per design: grid status uses colored text only, no badge BG
   ============================================================================ */

.BEC-Status-Text[b-pvpj5widno] {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.BEC-Status-Text--success[b-pvpj5widno] {
    color: var(--BEC-Success-Main, #107c10);
}

.BEC-Status-Text--info[b-pvpj5widno] {
    color: var(--BEC-Info-Main, #0078d4);
}

.BEC-Status-Text--error[b-pvpj5widno] {
    color: var(--BEC-Error-Main, #d13438);
}

.BEC-Status-Text--warning[b-pvpj5widno] {
    color: #986f0b;
}

.BEC-Status-Text--accent[b-pvpj5widno] {
    color: var(--BEC-colorBrandForeground1, #2b579a);
    font-weight: 700;
}

.BEC-Status-Text--neutral[b-pvpj5widno] {
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── Stacked Cell (name + secondary info in one column) ── */
.BEC-Stacked-Cell[b-pvpj5widno] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.3;
}

.BEC-Stacked-Primary[b-pvpj5widno] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.BEC-Stacked-Secondary[b-pvpj5widno] {
    font-size: 11px;
    font-weight: 400;
    color: var(--BEC-Text-Secondary, #605e5c);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Muted text (N/A, disabled values) ── */
.BEC-Muted[b-pvpj5widno] {
    font-size: 12px;
    color: var(--BEC-Text-Disabled, #a19f9d);
    font-style: italic;
}

.BEC-Badge--info[b-pvpj5widno] {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.BEC-Badge--small[b-pvpj5widno] {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 16px;
}

/* ============================================================================
   [UID: PAY_WIZARD] - Payroll Payment Slide-Out Panel
   ============================================================================
   Uses same sp-* / dp-* pattern as HRReviewWizard for unified look.
   ============================================================================ */

/* ── Panel structure (mirrors HRReviewWizard) ── */
.sp-panel[b-pvpj5widno] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--BEC-Surface-Base, #fff);
}

.sp-header[b-pvpj5widno] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    background: var(--BEC-Surface-Base, #fff);
    flex-shrink: 0;
}

.sp-title[b-pvpj5widno] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-close-btn[b-pvpj5widno] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    color: var(--BEC-Text-Secondary, #605e5c);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-close-btn:hover[b-pvpj5widno] {
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    color: var(--BEC-Text-Primary, #323130);
}

.sp-body[b-pvpj5widno] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.sp-content[b-pvpj5widno] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sp-footer[b-pvpj5widno] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    flex-shrink: 0;
}

/* ── Persona header (candidate card) ── */
.dp-persona[b-pvpj5widno] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--BEC-Surface-Elevated, #f8f8f8);
    border-radius: 8px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.dp-persona-avatar[b-pvpj5widno] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.dp-persona-info[b-pvpj5widno] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dp-persona-name[b-pvpj5widno] {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.dp-persona-role[b-pvpj5widno] {
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── Section (reusable) ── */
.dp-section[b-pvpj5widno] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dp-section-header[b-pvpj5widno] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

/* ── Detail grid (key-value pairs) ── */
.dp-detail-grid[b-pvpj5widno] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dp-detail-item[b-pvpj5widno] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background: var(--BEC-Surface-Elevated, #faf9f8);
    border-radius: 8px;
}

.dp-detail-label[b-pvpj5widno] {
    font-size: 13px;
    color: var(--BEC-Text-Secondary, #605e5c);
    font-weight: 500;
}

.dp-detail-value[b-pvpj5widno] {
    font-size: 13px;
    color: var(--BEC-Text-Primary, #323130);
    font-weight: 600;
}

.dp-detail-value--highlight[b-pvpj5widno] {
    color: var(--BEC-Success-Main, #107c10);
    font-size: 15px;
    font-weight: 700;
}

/* ── Bulk pay info card ── */
.BEC-Pay-Bulk-Info[b-pvpj5widno] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--BEC-Info-Subtle, #deecf9);
    border: 1px solid var(--BEC-Info-Main, #0078d4);
    border-radius: 8px;
}

.BEC-Pay-Bulk-Count[b-pvpj5widno] {
    font-size: 32px;
    font-weight: 700;
    color: var(--BEC-Info-Main, #0078d4);
    min-width: 48px;
    text-align: center;
}

.BEC-Pay-Bulk-Text[b-pvpj5widno] {
    font-size: 13px;
    color: var(--BEC-Text-Primary, #323130);
    line-height: 1.5;
}

/* ── Payroll reference input ── */
.BEC-Pay-Field[b-pvpj5widno] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.BEC-Required[b-pvpj5widno] {
    color: var(--BEC-Error-Main, #d13438);
}

.BEC-Pay-Input[b-pvpj5widno] {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--BEC-Border-Subtle, #8a8886);
    border-radius: 8px;
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
    background: var(--BEC-Surface-Base, #fff);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.BEC-Pay-Input:focus[b-pvpj5widno] {
    border-color: var(--BEC-colorBrandBackground, #0078d4);
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}

.BEC-Pay-Hint[b-pvpj5widno] {
    font-size: 11px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── Badge accent (for "Hired" status in persona) ── */
.BEC-Badge--hired-pill[b-pvpj5widno] {
    background: var(--BEC-colorBrandBackground, #0078d4);
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Payment Badge in Grid ── */
.BEC-Grid-Container[b-pvpj5widno]  .e-btn.e-success.e-outline {
    border-color: var(--BEC-Success-Main, #107c10) !important;
    color: var(--BEC-Success-Main, #107c10) !important;
    border-radius: 4px !important;
    height: 28px !important;
    font-weight: 600 !important;
    padding: 0 12px !important;
}

.BEC-Grid-Container[b-pvpj5widno]  .e-btn.e-success.e-outline:hover {
    background: rgba(16, 124, 16, 0.08) !important;
}

/* ============================================================================
   [UID: JOB_OPENINGS_TAB] - Job Openings Tab Styles
   ============================================================================ */

/* ── Tab Content Layout ── */
.BEC-Tab-Content[b-pvpj5widno] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0 0 0;
}

.BEC-Tab-Content--grid[b-pvpj5widno] {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    padding: 16px 0 0 0;
    gap: 8px;
    overflow: hidden;
}

/* BEC-Tab-Header-Row removed — search/filter removed from JO tab */

/* BEC-Search-Box removed — search removed from Referrals tab */

/* ── JO Inline Stat Colors (header) ── */
.BEC-Stat--draft .BEC-Stat-Value[b-pvpj5widno] {
    color: var(--BEC-Text-Secondary, #605e5c);
}

.BEC-Stat--published .BEC-Stat-Value[b-pvpj5widno] {
    color: var(--BEC-Success-Main, #107c10);
}

.BEC-Stat--onhold .BEC-Stat-Value[b-pvpj5widno] {
    color: #986f0b;
}

.BEC-Stat--closed .BEC-Stat-Value[b-pvpj5widno] {
    color: var(--BEC-Info-Main, #0078d4);
}

.BEC-Stat--filled .BEC-Stat-Value[b-pvpj5widno] {
    color: #5c2d91;
}

.BEC-Stat--cancelled .BEC-Stat-Value[b-pvpj5widno] {
    color: var(--BEC-Error-Main, #d13438);
}

/* ── Code Cell ── */
.BEC-Code-Cell[b-pvpj5widno] {
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 12px;
    color: var(--BEC-Text-Accent, #0078d4);
}

/* ── Positions Cell ── */
.BEC-Positions-Cell[b-pvpj5widno] {
    font-weight: 600;
    font-size: 13px;
}

/* ── Badge (full palette) ── */
.BEC-Badge[b-pvpj5widno] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

.BEC-Badge--success[b-pvpj5widno] {
    background: #dff6dd;
    color: #107c10;
}

.BEC-Badge--warning[b-pvpj5widno] {
    background: #fff4ce;
    color: #797600;
}

.BEC-Badge--error[b-pvpj5widno] {
    background: #fde7e9;
    color: #a80000;
}

/* BEC-Badge--neutral: inherits from global _badges-helpers.css SSOT */

.BEC-Badge--accent[b-pvpj5widno] {
    background: #e0d7ef;
    color: #5c2d91;
}

/* ── Tags ── */
.BEC-Tag-List[b-pvpj5widno] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.BEC-Tag[b-pvpj5widno] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.BEC-Tag--primary[b-pvpj5widno] {
    background: #cce4f6;
    color: #004578;
}

.BEC-Tag--accent[b-pvpj5widno] {
    background: #e0d7ef;
    color: #5c2d91;
}

/* ── Action Cell ── */
.BEC-Action-Cell[b-pvpj5widno] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.BEC-Action-Cell[b-pvpj5widno]  .e-btn.e-flat {
    background: transparent !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 0 8px !important;
    min-width: auto !important;
    text-transform: none !important;
}

.BEC-Action-Cell[b-pvpj5widno]  .e-btn.e-flat.e-primary {
    color: var(--BEC-colorBrandForeground1, #2b579a) !important;
}

.BEC-Action-Cell[b-pvpj5widno]  .e-btn.e-flat.e-success {
    color: var(--BEC-Success-Main, #107c10) !important;
}

.BEC-Action-Cell[b-pvpj5widno]  .e-btn.e-flat.e-warning {
    color: var(--BEC-Warning-Main, #ca5010) !important;
}

.BEC-Action-Cell[b-pvpj5widno]  .e-btn.e-flat:hover {
    background: var(--BEC-Surface-Elevated, #f3f2f1) !important;
    border-radius: 4px !important;
}

/* ── Detail Sidebar ── */
.BEC-Sidebar-Header[b-pvpj5widno] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.BEC-Sidebar-Header h3[b-pvpj5widno] {
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.BEC-Sidebar-Body[b-pvpj5widno] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.BEC-Detail-Row[b-pvpj5widno] {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.BEC-Detail-Label[b-pvpj5widno] {
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-Text-Secondary, #605e5c);
    min-width: 120px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.BEC-Detail-Value[b-pvpj5widno] {
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
}

.BEC-Detail-Section[b-pvpj5widno] {
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    padding-top: 16px;
}

.BEC-Detail-Section h4[b-pvpj5widno] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0 0 8px 0;
}

.BEC-Detail-Section p[b-pvpj5widno] {
    font-size: 13px;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0;
    line-height: 1.5;
}

.BEC-Detail-Rich[b-pvpj5widno] {
    white-space: pre-wrap;
}

.BEC-Detail-Actions[b-pvpj5widno] {
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    padding-top: 16px;
}

.BEC-Detail-Actions h4[b-pvpj5widno] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0 0 8px 0;
}

.BEC-Action-Buttons[b-pvpj5widno] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.BEC-Sidebar-Footer[b-pvpj5widno] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

/* BEC-Filter-Dropdown removed — filter removed from JO tab */

/* ============================================================================
   [UID: FOCUS_VISIBLE] - Keyboard Focus States (WCAG 2.4.7)
   ============================================================================ */

.BEC-Grid-Link:focus-visible[b-pvpj5widno] {
    outline: 2px solid var(--BEC-colorBrandBackground, #0078d4);
    outline-offset: 2px;
    border-radius: 2px;
}

.BEC-Grid-Container[b-pvpj5widno]  .e-grid .e-row:focus-visible .e-rowcell {
    background: var(--BEC-Info-Subtle, #deecf9) !important;
    outline: none;
}

.BEC-Grid-Container[b-pvpj5widno]  .e-grid .e-row:focus-within .e-rowcell {
    background: var(--BEC-Surface-Alt, #faf9f8) !important;
}

.BEC-Action-Cell[b-pvpj5widno]  .e-btn:focus-visible {
    outline: 2px solid var(--BEC-colorBrandBackground, #0078d4) !important;
    outline-offset: 2px !important;
}

.BEC-Badge:focus-visible[b-pvpj5widno],
.BEC-Tag:focus-visible[b-pvpj5widno] {
    outline: 2px solid var(--BEC-colorBrandBackground, #0078d4);
    outline-offset: 2px;
}

.sp-close-btn:focus-visible[b-pvpj5widno] {
    outline: 2px solid var(--BEC-colorBrandBackground, #0078d4);
    outline-offset: 2px;
}

/* ============================================================================
   [UID: TAB_FADE] - Tab Switch Animation
   ============================================================================ */

.BEC-Tabs[b-pvpj5widno]  .e-content > .e-item.e-active {
    animation: BEC-tab-fade-in-b-pvpj5widno 0.2s ease-out;
}

@keyframes BEC-tab-fade-in-b-pvpj5widno {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   [UID: RESPONSIVE] - Responsive Breakpoints
   ============================================================================ */

/* ── Tablet (1024px) ── */
@media (max-width: 1024px) {
    .BEC-Header-Row[b-pvpj5widno] {
        flex-wrap: wrap;
    }

    .BEC-Stat-Group[b-pvpj5widno] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .BEC-Sidebar-Body[b-pvpj5widno] {
        padding: 16px;
    }

    .BEC-Sidebar-Header[b-pvpj5widno],
    .BEC-Sidebar-Footer[b-pvpj5widno] {
        padding: 16px;
    }
}

/* ── Mobile (768px) ── */
@media (max-width: 768px) {
    .BEC-Layout[b-pvpj5widno] {
        padding: 16px;
    }

    .BEC-Header[b-pvpj5widno] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .BEC-Header-Row[b-pvpj5widno] {
        flex-direction: column;
        align-items: flex-start;
    }

    .BEC-Stat-Group[b-pvpj5widno] {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
    }

    .BEC-Detail-Row[b-pvpj5widno] {
        flex-direction: column;
        gap: 4px;
    }

    .BEC-Detail-Label[b-pvpj5widno] {
        min-width: 0;
    }

    .BEC-Bulk-Toolbar[b-pvpj5widno] {
        flex-wrap: wrap;
    }
}

/* ── Small Phone (480px) ── */
@media (max-width: 480px) {
    .BEC-Header[b-pvpj5widno] {
        padding: 8px 16px;
    }

    .BEC-Title[b-pvpj5widno] {
        font-size: 16px;
    }

    .BEC-Header-Actions[b-pvpj5widno] {
        flex-direction: column;
        width: 100%;
    }

    .BEC-Header-Actions[b-pvpj5widno]  .e-btn {
        width: 100% !important;
    }

    .BEC-Action-Cell[b-pvpj5widno] {
        flex-direction: column;
        gap: 4px;
    }

    .dp-persona[b-pvpj5widno] {
        flex-direction: column;
        text-align: center;
    }
}

/* ── Markdown Preview for Job Description ── */
.jd-markdown-preview[b-pvpj5widno] {
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 6px;
    padding: 16px 24px;
    background: var(--BEC-Surface-Base, #fff);
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.75;
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
}

[b-pvpj5widno] .jd-markdown-preview h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--BEC-colorBrandBackground, #2b579a);
}

[b-pvpj5widno] .jd-markdown-preview h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--BEC-colorBrandForeground1, #2b579a);
    margin: 20px 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(43, 87, 154, 0.12);
}

[b-pvpj5widno] .jd-markdown-preview h2:first-child {
    margin-top: 0;
}

[b-pvpj5widno] .jd-markdown-preview h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 16px 0 6px 0;
}

[b-pvpj5widno] .jd-markdown-preview p {
    margin: 0 0 10px 0;
    line-height: 1.7;
}

[b-pvpj5widno] .jd-markdown-preview ul {
    margin: 4px 0 12px 0;
    padding-left: 20px;
}

[b-pvpj5widno] .jd-markdown-preview li {
    margin-bottom: 4px;
    line-height: 1.6;
}

[b-pvpj5widno] .jd-markdown-preview strong {
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

[b-pvpj5widno] .jd-markdown-preview hr {
    border: none;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    margin: 16px 0;
}

[b-pvpj5widno] .jd-markdown-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}

[b-pvpj5widno] .jd-markdown-preview th,
[b-pvpj5widno] .jd-markdown-preview td {
    padding: 8px 12px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    text-align: left;
}

[b-pvpj5widno] .jd-markdown-preview th {
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    font-weight: 600;
}
/* /Components/Pages/MainLayout/Referral/JobOpenings/JobOpeningForm.razor.rz.scp.css */
/* ============================================================================
   Job Opening Form Page — Scoped CSS
   ============================================================================
   Module: Referral > Job Opening Create/Edit
   Tokens: --BEC-* design tokens
   ============================================================================ */

/* ── Layout ── */
.BEC-Form-Layout[b-6w8okuncdy] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--BEC-Surface-Base, #fff);
}

/* ── Header ── */
.BEC-Form-Header[b-6w8okuncdy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    flex-shrink: 0;
}

.BEC-Form-Header-Left[b-6w8okuncdy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.BEC-Form-Header-Right[b-6w8okuncdy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.BEC-Form-Title[b-6w8okuncdy] {
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0;
}

/* ── Body ── */
.BEC-Form-Body[b-6w8okuncdy] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 900px;
}

/* ── Sections ── */
.BEC-Form-Section[b-6w8okuncdy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.BEC-Form-Section:last-of-type[b-6w8okuncdy] {
    border-bottom: none;
}

.BEC-Section-Title[b-6w8okuncdy] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0;
}

/* ── Form Rows ── */
.BEC-Form-Row[b-6w8okuncdy] {
    display: flex;
    gap: 16px;
}

.BEC-Form-Row--split[b-6w8okuncdy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.BEC-Form-Row--triple[b-6w8okuncdy] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

/* ── Form Group ── */
.BEC-Form-Group[b-6w8okuncdy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.BEC-Form-Group--checkbox[b-6w8okuncdy] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
}

.BEC-Form-Group--error[b-6w8okuncdy]  .e-input-group {
    border-color: var(--BEC-Status-Error, #a80000) !important;
}

/* ── Labels ── */
.BEC-Form-Label[b-6w8okuncdy] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.BEC-Required[b-6w8okuncdy] {
    color: var(--BEC-Status-Error, #a80000);
    font-weight: 700;
}

/* ── Field Errors ── */
.BEC-Field-Error[b-6w8okuncdy] {
    font-size: 12px;
    color: var(--BEC-Status-Error, #a80000);
    margin-top: 2px;
}

/* ── Tag Input ── */
.BEC-Tag-Input[b-6w8okuncdy] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.BEC-Tag-Input[b-6w8okuncdy]  .e-input-group {
    flex: 1;
}

.BEC-Tag-List[b-6w8okuncdy] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.BEC-Tag[b-6w8okuncdy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.BEC-Tag--primary[b-6w8okuncdy] {
    background: #cce4f6;
    color: #004578;
}

.BEC-Tag--accent[b-6w8okuncdy] {
    background: #e0d7ef;
    color: #5c2d91;
}

.BEC-Tag-Remove[b-6w8okuncdy] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    color: inherit;
    opacity: 0.7;
}

.BEC-Tag-Remove:hover[b-6w8okuncdy] {
    opacity: 1;
}

/* ── AI Banner ── */
.BEC-AI-Banner[b-6w8okuncdy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--BEC-Surface-Accent-Light, #e0d7ef);
    border-radius: 6px;
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
    animation: ai-pulse-b-6w8okuncdy 1.5s ease-in-out infinite;
}

@keyframes ai-pulse-b-6w8okuncdy {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ── Footer ── */
.BEC-Form-Footer[b-6w8okuncdy] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    flex-shrink: 0;
}

/* ── Loading Skeleton ── */
.BEC-Form-Loading[b-6w8okuncdy] {
    flex: 1;
    padding: 24px;
}

.skeleton-form[b-6w8okuncdy] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 900px;
}

.skeleton-field[b-6w8okuncdy] {
    height: 56px;
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    border-radius: 4px;
}

.skeleton-pulse[b-6w8okuncdy] {
    animation: skeleton-pulse-b-6w8okuncdy 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-6w8okuncdy {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .BEC-Form-Row--split[b-6w8okuncdy],
    .BEC-Form-Row--triple[b-6w8okuncdy] {
        grid-template-columns: 1fr;
    }

    .BEC-Form-Header[b-6w8okuncdy] {
        flex-direction: column;
        align-items: flex-start;
    }

    .BEC-Form-Body[b-6w8okuncdy] {
        padding: 16px;
    }

    .BEC-Form-Footer[b-6w8okuncdy] {
        padding: 12px 16px;
    }
}

/* ── Toggle Button for Edit/Preview ── */
.jw-label-row[b-6w8okuncdy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.jw-toggle-btn[b-6w8okuncdy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 4px;
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    color: var(--BEC-Text-Secondary, #605e5c);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.jw-toggle-btn:hover[b-6w8okuncdy] {
    background: var(--BEC-colorBrandBackground, #2b579a);
    color: #fff;
    border-color: var(--BEC-colorBrandBackground, #2b579a);
}

/* ── Markdown Preview for Job Description ── */
.jd-markdown-preview[b-6w8okuncdy] {
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 6px;
    padding: 16px 24px;
    background: var(--BEC-Surface-Base, #fff);
    min-height: 200px;
    max-height: 500px;
    overflow-y: auto;
    line-height: 1.75;
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
}

[b-6w8okuncdy] .jd-markdown-preview h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--BEC-colorBrandBackground, #2b579a);
}

[b-6w8okuncdy] .jd-markdown-preview h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--BEC-colorBrandForeground1, #2b579a);
    margin: 20px 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(43, 87, 154, 0.12);
}

[b-6w8okuncdy] .jd-markdown-preview h2:first-child {
    margin-top: 0;
}

[b-6w8okuncdy] .jd-markdown-preview h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 16px 0 6px 0;
}

[b-6w8okuncdy] .jd-markdown-preview p {
    margin: 0 0 10px 0;
    line-height: 1.7;
}

[b-6w8okuncdy] .jd-markdown-preview ul {
    margin: 4px 0 12px 0;
    padding-left: 20px;
}

[b-6w8okuncdy] .jd-markdown-preview li {
    margin-bottom: 4px;
    line-height: 1.6;
}

[b-6w8okuncdy] .jd-markdown-preview strong {
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

[b-6w8okuncdy] .jd-markdown-preview hr {
    border: none;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    margin: 16px 0;
}

[b-6w8okuncdy] .jd-markdown-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}

[b-6w8okuncdy] .jd-markdown-preview th,
[b-6w8okuncdy] .jd-markdown-preview td {
    padding: 8px 12px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    text-align: left;
}

[b-6w8okuncdy] .jd-markdown-preview th {
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    font-weight: 600;
}
/* /Components/Pages/MainLayout/Referral/MyReferrals/Components/JobOpeningDetailWizard.razor.rz.scp.css */
/* ============================================================================
   [UID: JOB_OPENING_DETAIL_WIZARD] - Job Opening Detail Wizard Scoped Styles
   ============================================================================
   8px Grid Compliant | Design Tokens Only
   Pattern: WIZARD_SIDE with .sp-* base, .jd-* detail-specific
   ============================================================================ */

/* ── Title Row ── */
.jd-title-row[b-77sqhn1vzb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.jd-title[b-77sqhn1vzb] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--BEC-Text-Primary, #323130);
    line-height: 1.3;
    flex: 1;
}

/* ── Metadata Bar ── */
.jd-meta-bar[b-77sqhn1vzb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 16px;
    background: var(--BEC-Surface-Alt, #faf9f8);
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 8px;
    margin-bottom: 16px;
}

.jd-meta-item[b-77sqhn1vzb] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.jd-meta-icon[b-77sqhn1vzb] {
    font-size: 16px;
    color: var(--BEC-colorBrandForeground1, #2b579a);
    margin-top: 2px;
    flex-shrink: 0;
}

.jd-meta-content[b-77sqhn1vzb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.jd-meta-label[b-77sqhn1vzb] {
    font-size: 11px;
    font-weight: 600;
    color: var(--BEC-Text-Secondary, #605e5c);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.jd-meta-value[b-77sqhn1vzb] {
    font-size: 14px;
    font-weight: 500;
    color: var(--BEC-Text-Primary, #323130);
}

/* ── Sections ── */
.jd-section[b-77sqhn1vzb] {
    margin-bottom: 24px;
}

.jd-section-header[b-77sqhn1vzb] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--BEC-colorBrandForeground1, #2b579a);
    margin: 0 0 8px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(43, 87, 154, 0.12);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Markdown Preview ── */
.jd-markdown-preview[b-77sqhn1vzb] {
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 6px;
    padding: 16px 24px;
    background: var(--BEC-Surface-Base, #fff);
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.75;
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
}

/* ── Deep: Markdown Rendered HTML (scoped) ── */
[b-77sqhn1vzb] .jd-markdown-preview h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--BEC-colorBrandBackground, #2b579a);
}

[b-77sqhn1vzb] .jd-markdown-preview h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--BEC-colorBrandForeground1, #2b579a);
    margin: 20px 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(43, 87, 154, 0.12);
}

[b-77sqhn1vzb] .jd-markdown-preview h2:first-child {
    margin-top: 0;
}

[b-77sqhn1vzb] .jd-markdown-preview h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    margin: 16px 0 6px 0;
}

[b-77sqhn1vzb] .jd-markdown-preview p {
    margin: 0 0 10px 0;
    line-height: 1.7;
}

[b-77sqhn1vzb] .jd-markdown-preview ul {
    margin: 4px 0 12px 0;
    padding-left: 20px;
}

[b-77sqhn1vzb] .jd-markdown-preview li {
    margin-bottom: 4px;
    line-height: 1.6;
}

[b-77sqhn1vzb] .jd-markdown-preview strong {
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

[b-77sqhn1vzb] .jd-markdown-preview hr {
    border: none;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
    margin: 16px 0;
}

[b-77sqhn1vzb] .jd-markdown-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}

[b-77sqhn1vzb] .jd-markdown-preview th,
[b-77sqhn1vzb] .jd-markdown-preview td {
    padding: 8px 12px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    text-align: left;
}

[b-77sqhn1vzb] .jd-markdown-preview th {
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    font-weight: 600;
}

/* ── Summary Text (fallback when no full description) ── */
.jd-summary-text[b-77sqhn1vzb] {
    font-size: 14px;
    line-height: 1.7;
    color: var(--BEC-Text-Primary, #323130);
    margin: 0;
}

/* ── Skills Chips ── */
.jd-chips[b-77sqhn1vzb] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jd-chip[b-77sqhn1vzb] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    background: var(--BEC-Surface-Elevated, #f3f2f1);
    color: var(--BEC-Text-Primary, #323130);
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.jd-chip--required[b-77sqhn1vzb] {
    background: rgba(43, 87, 154, 0.08);
    color: var(--BEC-colorBrandForeground1, #2b579a);
    border-color: rgba(43, 87, 154, 0.2);
}

.jd-chip--cert[b-77sqhn1vzb] {
    background: var(--BEC-Warning-Subtle, #fff4ce);
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
    border-color: rgba(138, 108, 0, 0.3);
}


/* ── Empty State ── */
.jd-empty[b-77sqhn1vzb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 16px;
    text-align: center;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .jd-meta-bar[b-77sqhn1vzb] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Components/Pages/MainLayout/Referral/MyReferrals/Components/ReferralDetailWizard.razor.rz.scp.css */
/* ReferralDetailWizard.razor.css — Migrated inline styles */

.ref-alert-mt[b-cuincysfve] {
    margin-top: 8px;
}
/* /Components/Pages/MainLayout/Referral/MyReferrals/Components/SubmitReferralWizard.razor.rz.scp.css */
/* ============================================================================
   Submit Referral Wizard - Side Panel [UID: WIZARD_SIDE]
   Phone row: country dropdown + number input
   ============================================================================ */

.sp-form-row[b-usrehmc05a] {
    display: flex;
    gap: 16px;
}

.sp-form-col[b-usrehmc05a] {
    flex: 1;
    min-width: 0;
}

.sp-phone-row[b-usrehmc05a] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sp-phone-row > *:first-child[b-usrehmc05a] {
    min-width: 160px;
    width: 160px;
}

.sp-phone-row > *:last-child[b-usrehmc05a] {
    flex: 1;
    min-width: 0;
}
/* /Components/Pages/MainLayout/Referral/MyReferrals/Components/WinnerStatusBanner.razor.rz.scp.css */
/* ============================================================================
   [UID: TOOLBAR] - Compact Stats Bar
   ============================================================================
   Redesigned from multi-row to single 48-56px bar
   Reference: ERP_Design_System_Master_Comprehensive.html
   8px Grid Compliant
   ============================================================================ */

.BEC-CompactBar[b-nb5bpo28de] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    max-height: 56px;
    padding: 8px 24px;
    background: var(--BEC-Surface-Alt, #faf9f8);
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.BEC-CompactBar-Item[b-nb5bpo28de] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-right: 1px solid var(--BEC-Border-Subtle, #edebe9);
    white-space: nowrap;
}

.BEC-CompactBar-Item:last-of-type[b-nb5bpo28de] {
    border-right: none;
}

.BEC-CompactBar-Item--highlight[b-nb5bpo28de] {
    background: var(--BEC-Warning-Subtle, #fff4ce);
    border-radius: 4px;
    padding: 4px 12px;
    margin-right: 8px;
}

.BEC-CompactBar-Label[b-nb5bpo28de] {
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605e5c);
    text-transform: uppercase;
}

.BEC-CompactBar-Value[b-nb5bpo28de] {
    font-weight: 600;
    font-size: 14px;
    color: var(--BEC-Text-Primary, #323130);
}

/* ── Badge Layout Override (compact bar positioning) ── */
.BEC-Badge[b-nb5bpo28de] {
    margin-left: auto;
}

/* ── Badge Warning Contrast Override (WCAG AA) ── */
.BEC-Badge--warning[b-nb5bpo28de] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
}

.BEC-CompactBar-Label--subtle[b-nb5bpo28de] {
    font-size: 11px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* Responsive */
@media (max-width: 768px) {
    .BEC-CompactBar[b-nb5bpo28de] {
        flex-wrap: wrap;
        max-height: none;
        padding: 8px 16px;
    }
    
    .BEC-CompactBar-Item[b-nb5bpo28de] {
        padding: 0 8px;
    }
}
/* /Components/Pages/MainLayout/Referral/MyReferrals/MyReferrals.razor.rz.scp.css */
/* ============================================================================
   [UID: MY_REFERRALS] - My Referrals Page Layout
   ============================================================================
   8px Grid Compliant | Design Tokens Only
   ============================================================================ */

/* ── Layout ── */
.BEC-Layout[b-jnrqejhlmo] {
    padding: 0;
    /* Full viewport */
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Removed gap, spacing handled by padding */
    height: calc(100vh - 60px);
}

/* ── Header (compact) ── */
.BEC-Header[b-jnrqejhlmo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    /* Add padding back here */
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    background: var(--BEC-Surface-Base, #fff);
}

.BEC-Title[b-jnrqejhlmo] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.BEC-Header-Actions[b-jnrqejhlmo] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Grid Container (Full Width) ── */
.BEC-Grid-Container[b-jnrqejhlmo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--BEC-Surface-Base, #fff);
    border: none;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    min-height: 0;
    padding: 0;
}

/* ── Syncfusion Grid border overrides ── */
.BEC-Grid-Container[b-jnrqejhlmo]  .e-grid {
    border: none !important;
}

.BEC-Grid-Container[b-jnrqejhlmo]  .e-grid .e-gridheader {
    border-bottom: 1px solid #cccccc !important;
    background: var(--BEC-Surface-Elevated, #f3f2f1) !important;
    height: 42px;
    min-height: 42px;
}

.BEC-Grid-Container[b-jnrqejhlmo]  .e-grid .e-headercell {
    border: none !important;
    color: var(--BEC-Text-Primary, #323130);
    font-weight: 600;
    font-size: 13px;
    padding: 0 12px !important;
    text-align: left !important;
    line-height: 42px;
    height: 42px;
}

.BEC-Grid-Container[b-jnrqejhlmo]  .e-grid .e-headercell:last-child {
    border-right: none !important;
}

.BEC-Grid-Container[b-jnrqejhlmo]  .e-grid .e-rowcell {
    border-bottom: 1px solid #eeeeee !important;
    border-right: none !important;
    font-size: 13px;
    color: var(--BEC-Text-Primary, #323130);
    padding: 0 12px !important;
    text-align: left !important;
}

.BEC-Grid-Container[b-jnrqejhlmo]  .e-grid .e-row:hover .e-rowcell {
    background: var(--BEC-colorNeutralBackground4, #f0f0f0) !important;
    cursor: pointer;
}

.BEC-Grid-Container[b-jnrqejhlmo]  .e-grid .e-row.e-altrow .e-rowcell {
    background: var(--BEC-Surface-Alt, #faf9f8);
}

.BEC-Grid-Container[b-jnrqejhlmo]  .e-grid .e-row.e-altrow:hover .e-rowcell {
    background: var(--BEC-colorNeutralBackground4, #f0f0f0) !important;
}

/* ── Pager ── */
.BEC-Grid-Container[b-jnrqejhlmo]  .e-grid .e-pager {
    background: var(--BEC-Surface-Base, #fff);
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

/* ── Badge Warning Contrast Override (WCAG AA) ── */
.BEC-Badge--warning[b-jnrqejhlmo] {
    color: var(--BEC-colorPaletteYellowForeground1, #8a6c00);
}

/* ============================================================================
   [UID: BAN_BANNER] - Submission Banned Banner
   ============================================================================ */

.BEC-Ban-Banner[b-jnrqejhlmo] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px;
    background: var(--BEC-Error-Subtle, #fde7e9);
    border: 1px solid var(--BEC-Error-Main, #d13438);
    border-radius: 8px;
    margin-bottom: 8px;
}

.BEC-Ban-Banner-Icon[b-jnrqejhlmo] {
    flex-shrink: 0;
    margin-top: 2px;
}

.BEC-Ban-Banner-Content[b-jnrqejhlmo] {
    flex: 1;
    min-width: 0;
}

.BEC-Ban-Banner-Title[b-jnrqejhlmo] {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--BEC-Error-Main, #d13438);
    margin-bottom: 4px;
}

.BEC-Ban-Banner-Text[b-jnrqejhlmo] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-Text-Primary, #323130);
}

/* ── Loading State ── */
.BEC-Loading-State[b-jnrqejhlmo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

/* ============================================================================
   [UID: SKELETON_GRID] - Skeleton Loading
   ============================================================================ */

.skeleton-grid[b-jnrqejhlmo] {
    width: 100%;
    padding: 16px;
}

.skeleton-row[b-jnrqejhlmo] {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.skeleton-cell[b-jnrqejhlmo] {
    height: 16px;
    background: linear-gradient(90deg, #f3f2f1 25%, #e1dfdd 50%, #f3f2f1 75%);
    background-size: 200% 100%;
    border-radius: 4px;
}

.skeleton-cell:nth-child(1)[b-jnrqejhlmo] {
    width: 160px;
}

.skeleton-cell:nth-child(2)[b-jnrqejhlmo] {
    width: 140px;
}

.skeleton-cell:nth-child(3)[b-jnrqejhlmo] {
    width: 120px;
}

.skeleton-cell:nth-child(4)[b-jnrqejhlmo] {
    width: 100px;
}

.skeleton-pulse[b-jnrqejhlmo] {
    animation: skeleton-pulse-b-jnrqejhlmo 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-jnrqejhlmo {

    0%,
    100% {
        background-position: 200% 0;
    }

    50% {
        background-position: -200% 0;
    }
}

/* ============================================================================
   [UID: EMPTY_STATE] - Empty State
   ============================================================================ */

.BEC-Empty-State[b-jnrqejhlmo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
}

.BEC-Empty-Title[b-jnrqejhlmo] {
    margin: 16px 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
}

.BEC-Empty-Text[b-jnrqejhlmo] {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ============================================================================
   [UID: TAB_OVERRIDES] - Syncfusion Tab Overrides
   ============================================================================ */

.BEC-Tabs[b-jnrqejhlmo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.BEC-Tabs[b-jnrqejhlmo]  .e-tab-header {
    background: var(--BEC-Surface-Base, #fff);
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    padding: 0 24px;
}

.BEC-Tabs[b-jnrqejhlmo]  .e-tab-header .e-toolbar-item .e-tab-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.BEC-Tabs[b-jnrqejhlmo]  .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: var(--BEC-Info-Main, #0078d4);
}

.BEC-Tabs[b-jnrqejhlmo]  .e-content {
    flex: 1;
    overflow: auto;
}

.BEC-Tab-Content[b-jnrqejhlmo] {
    padding: 24px;
    animation: tabFadeIn-b-jnrqejhlmo 200ms cubic-bezier(0.33, 0, 0.1, 1);
}

@keyframes tabFadeIn-b-jnrqejhlmo {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.BEC-Tab-Content--grid[b-jnrqejhlmo] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
}

/* BEC-Grid-Search removed — search moved to header */

/* ── Search Box ── */
.BEC-Search-Box[b-jnrqejhlmo] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 4px;
    padding: 4px 8px;
    min-width: 200px;
    max-width: 300px;
    background: var(--BEC-Surface-Base, #fff);
    transition: border-color 0.15s ease, min-width 0.2s ease;
}

.BEC-Search-Box:focus-within[b-jnrqejhlmo] {
    border-color: var(--BEC-Info-Main, #0078d4);
    min-width: 260px;
}

.BEC-Search-Box input[b-jnrqejhlmo] {
    border: none;
    outline: none;
    font-size: 13px;
    flex: 1;
    background: transparent;
    color: var(--BEC-Text-Primary, #323130);
}

/* ============================================================================
   [UID: JOB_CARDS] - Open Positions Card Grid
   ============================================================================ */

.jc-cards-grid[b-jnrqejhlmo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.jc-card[b-jnrqejhlmo] {
    background: var(--BEC-Surface-Base, #fff);
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

.jc-card:hover[b-jnrqejhlmo] {
    border-color: var(--BEC-Info-Main, #0078d4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.jc-card:focus-visible[b-jnrqejhlmo] {
    outline: 2px solid var(--BEC-Info-Main, #0078d4);
    outline-offset: 2px;
}

.jc-card-header[b-jnrqejhlmo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.jc-card-title[b-jnrqejhlmo] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-Text-Primary, #323130);
    line-height: 1.3;
}

.jc-card-meta[b-jnrqejhlmo] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.jc-meta-item[b-jnrqejhlmo] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.jc-meta-item .e-icons[b-jnrqejhlmo] {
    font-size: 14px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

.jc-card-summary[b-jnrqejhlmo] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--BEC-Text-Secondary, #605e5c);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jc-card-skills[b-jnrqejhlmo] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jc-skill-chip[b-jnrqejhlmo] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    background: var(--BEC-Info-Subtle, #deecf9);
    color: var(--BEC-Info-Main, #0078d4);
}

.jc-skill-chip--more[b-jnrqejhlmo] {
    background: var(--BEC-Surface-Alt, #f3f2f1);
    color: var(--BEC-Text-Secondary, #605e5c);
}

.jc-card-footer[b-jnrqejhlmo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

.jc-card-actions[b-jnrqejhlmo] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.jc-posted-date[b-jnrqejhlmo] {
    font-size: 12px;
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* ── Skeleton for Job Cards ── */

.jc-skeleton-grid[b-jnrqejhlmo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    width: 100%;
}

.jc-skeleton-card[b-jnrqejhlmo] {
    height: 200px;
    background: linear-gradient(90deg, #f3f2f1 25%, #e1dfdd 50%, #f3f2f1 75%);
    background-size: 200% 100%;
    border-radius: 8px;
    border: 1px solid var(--BEC-Border-Subtle, #edebe9);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .BEC-Header[b-jnrqejhlmo] {
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .BEC-Layout[b-jnrqejhlmo] {
        padding: 0;
    }

    .BEC-Header[b-jnrqejhlmo] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 16px;
    }

    .BEC-Header-Actions[b-jnrqejhlmo] {
        width: 100%;
        flex-wrap: wrap;
    }

    .BEC-Tab-Content[b-jnrqejhlmo] {
        padding: 16px;
    }

    .jc-cards-grid[b-jnrqejhlmo] {
        grid-template-columns: 1fr;
    }

    .jc-skeleton-grid[b-jnrqejhlmo] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .BEC-Header[b-jnrqejhlmo] {
        padding: 8px 16px;
    }

    .BEC-Title[b-jnrqejhlmo] {
        font-size: 16px;
    }
}

/* /Components/Pages/MainLayout/Referral/SharedComponents/ReferralErrorToast.razor.rz.scp.css */
/* ============================================================================
   ReferralErrorToast - Official Design System Tokens
   ============================================================================
   Purpose: Standardized error toast styling with TraceId display
   Module: Referral - Shared Components
   ============================================================================ */

.error-toast-content[b-yk67p9qo4m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.error-message[b-yk67p9qo4m] {
    margin: 0;
    line-height: 1.4;
}

.trace-id-section[b-yk67p9qo4m] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--BEC-Surface-Alt, #faf9f8);
    border-radius: 4px;
    font-size: 12px;
}

.trace-id-label[b-yk67p9qo4m] {
    color: var(--BEC-Text-Secondary, #605e5c);
}

.trace-id-value[b-yk67p9qo4m] {
    font-family: var(--BEC-Font-Mono, Consolas, monospace);
    background: var(--BEC-Surface-Base, #f3f2f1);
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    user-select: all;
    color: var(--BEC-Text-Primary, #323130);
}

.trace-id-value:hover[b-yk67p9qo4m] {
    background: var(--BEC-Surface-Hover, #edebe9);
}

.copied-indicator[b-yk67p9qo4m] {
    color: var(--BEC-Success-Main, #107c10);
    font-size: 11px;
    animation: fadeIn-b-yk67p9qo4m 0.2s ease-in;
}

.retry-section[b-yk67p9qo4m] {
    margin-top: 4px;
}

@keyframes fadeIn-b-yk67p9qo4m {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Components/Pages/MainLayout/Reporting/ChairmanInventory/ChairmanInventory.razor.rz.scp.css */
/* ============================================================================
   Chairman Inventory Report — deck design system (component-scoped).
   Ported from the static "BEC Inventory Chairman Capital Brief" deck so the
   live report matches it 1:1. Blazor scopes every selector to THIS component,
   so the generic .slide / table / th / td rules cannot leak into the app.
   Adapted for in-app use: pages are responsive width + grow with live data
   (min-height, no clipping) instead of fixed A4 mm with overflow:hidden.
   ============================================================================ */

.ci-doc[b-gm2oin7umi] {
    --black: #000; --dark: #1a1a1a; --mid: #555; --light: #999; --faint: #ccc;
    --stroke: #e8e8ed; --surface: #f5f5f7; --white: #fff;
    --accent: #0071e3; --green: #1f9d57; --red: #d6342a; --orange: #ff8a00;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--dark);
    -webkit-font-smoothing: antialiased;
    background: var(--white);
    padding: 0;
    position: relative;
}

/* ---- page ------------------------------------------------------------------
   Same approach as the rest of the reporting section (reporting.css .rpt-doc /
   .rpt-page): ONE continuous white document — content slides flow to their own
   height, centred, capped width, with a single hairline between consecutive
   content chapters. Covers / dividers / closing stay tall & centred (title
   moments). The slide-per-A4-page feel lives ONLY in @media print below, so the
   downloaded PDF is unchanged. */
.ci-doc .slide[b-gm2oin7umi] {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 40px 56px;
    background: var(--white);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ci-doc .slide:not(.cover):not(.divider):not(.closing) + .slide:not(.divider):not(.closing)[b-gm2oin7umi] {
    border-top: 1px solid var(--stroke);
}

/* cover + closing */
.ci-doc .slide.cover[b-gm2oin7umi] { min-height: 88vh; justify-content: center; align-items: flex-start; padding: 66px 78px; }
.ci-doc .slide.cover .accent-rule[b-gm2oin7umi] { width: 54px; height: 5px; background: var(--accent); border-radius: 3px; margin-bottom: 34px; }
.ci-doc .slide.cover .badge[b-gm2oin7umi] { display: inline-block; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 14px; border-radius: 100px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 26px; }
.ci-doc .slide.cover .clabel[b-gm2oin7umi] { font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--light); margin-bottom: 18px; }
.ci-doc .slide.cover .ctitle[b-gm2oin7umi] { font-size: 58px; font-weight: 800; line-height: 1.04; letter-spacing: -2px; margin-bottom: 26px; color: var(--black); }
.ci-doc .slide.cover .verdict[b-gm2oin7umi] { margin-top: 20px; display: flex; gap: 30px; flex-wrap: wrap; }
.ci-doc .slide.cover .v-num[b-gm2oin7umi] { font-size: 32px; font-weight: 800; letter-spacing: -1.5px; color: var(--dark); }
.ci-doc .slide.cover .v-num.orange[b-gm2oin7umi] { color: var(--orange); }
.ci-doc .slide.cover .v-sub[b-gm2oin7umi] { font-size: 14px; font-weight: 700; color: var(--dark); margin-top: 6px; }
.ci-doc .slide.cover .v-sub.orange[b-gm2oin7umi] { color: var(--orange); }
.ci-doc .slide.cover .v-label[b-gm2oin7umi] { font-size: 11px; font-weight: 600; color: var(--light); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 4px; }
.ci-doc .slide.cover .cmeta[b-gm2oin7umi] { margin-top: 40px; font-size: 13px; color: var(--light); }

/* slide chrome */
.ci-doc .shead[b-gm2oin7umi] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-shrink: 0; }
.ci-doc .chapter[b-gm2oin7umi] { font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--light); }
.ci-doc .pageno[b-gm2oin7umi] { font-size: 11px; font-weight: 500; color: var(--faint); }
.ci-doc .stitle[b-gm2oin7umi] { font-size: 30px; font-weight: 800; letter-spacing: -0.8px; color: var(--black); margin-bottom: 6px; flex-shrink: 0; }
.ci-doc .ssub[b-gm2oin7umi] { font-size: 14px; font-weight: 400; color: var(--light); margin-bottom: 20px; flex-shrink: 0; max-width: 94%; line-height: 1.5; }
.ci-doc .rule[b-gm2oin7umi] { width: 100%; height: 1px; background: var(--stroke); margin-bottom: 20px; flex-shrink: 0; }

/* facts row */
.ci-doc .facts[b-gm2oin7umi] { display: flex; gap: 0; margin-bottom: 14px; }
.ci-doc .fact[b-gm2oin7umi] { flex: 1; padding: 4px 0; }
.ci-doc .fact + .fact[b-gm2oin7umi] { border-left: 1px solid var(--stroke); padding-left: 26px; }
.ci-doc .fact .fn[b-gm2oin7umi] { font-size: 27px; font-weight: 800; letter-spacing: -1px; line-height: 1; color: var(--dark); }
.ci-doc .fact .fn small[b-gm2oin7umi] { font-size: 14px; font-weight: 700; }
.ci-doc .fact .fn.accent[b-gm2oin7umi] { color: var(--accent); }
.ci-doc .fact .fn.red[b-gm2oin7umi] { color: var(--red); }
.ci-doc .fact .fn.green[b-gm2oin7umi] { color: var(--green); }
.ci-doc .fact .fn.orange[b-gm2oin7umi] { color: var(--orange); }
.ci-doc .fact .fl[b-gm2oin7umi] { font-size: 11px; color: var(--light); margin-top: 7px; font-weight: 500; }

/* body + chart title */
.ci-doc .sbody[b-gm2oin7umi] { flex: 1; display: flex; flex-direction: column; }
.ci-doc .ctitle2[b-gm2oin7umi] { font-size: 14px; font-weight: 600; color: var(--dark); margin-bottom: 8px; }
.ci-doc .chart[b-gm2oin7umi] { width: 100%; }
.ci-doc .chart svg[b-gm2oin7umi] { width: 100%; height: auto; display: block; }

/* notes */
.ci-doc .note[b-gm2oin7umi] { background: var(--surface); border-radius: 10px; padding: 14px 20px; font-size: 12px; color: var(--mid); line-height: 1.55; margin-top: 14px; }
.ci-doc .note.edge[b-gm2oin7umi] { border-left: 3px solid var(--accent); }
.ci-doc .note.edge-red[b-gm2oin7umi] { border-left: 3px solid var(--red); }
.ci-doc .note b[b-gm2oin7umi] { color: var(--dark); }

/* carve-out boxes */
.ci-doc .carve[b-gm2oin7umi] { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; margin-top: 8px; }
.ci-doc .cbox[b-gm2oin7umi] { border: 1px solid var(--stroke); border-radius: 16px; padding: 22px 26px; display: flex; flex-direction: column; }
.ci-doc .cbox.special[b-gm2oin7umi] { border-color: rgba(214,52,42,0.25); background: #fdf4f3; }
.ci-doc .cbox .ch[b-gm2oin7umi] { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--light); }
.ci-doc .cbox.special .ch[b-gm2oin7umi] { color: var(--red); }
.ci-doc .cbox .cv[b-gm2oin7umi] { font-size: 38px; font-weight: 800; letter-spacing: -1.5px; color: var(--dark); margin: 6px 0 2px; }
.ci-doc .cbox .ct[b-gm2oin7umi] { font-size: 12.5px; color: var(--mid); margin-bottom: 16px; }

/* split bar (used/unused) */
.ci-doc .splitbar[b-gm2oin7umi] { display: flex; height: 30px; border-radius: 7px; overflow: hidden; margin-bottom: 8px; }
.ci-doc .splitbar .u[b-gm2oin7umi] { background: linear-gradient(90deg,#1a1a1a,#444); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; }
.ci-doc .splitbar .n[b-gm2oin7umi] { background: var(--orange); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; }
.ci-doc .splitleg[b-gm2oin7umi] { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--mid); }

/* horizontal ranked bars (Capital by Package) */
.ci-doc .pbar[b-gm2oin7umi] { display: flex; align-items: center; margin-bottom: 9px; }
.ci-doc .pbar .lab[b-gm2oin7umi] { width: 240px; font-size: 11.5px; font-weight: 500; color: var(--dark); flex-shrink: 0; text-align: right; padding-right: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-doc .pbar .track[b-gm2oin7umi] { flex: 1; height: 22px; background: var(--surface); border-radius: 5px; overflow: hidden; display: flex; }
.ci-doc .pbar .used[b-gm2oin7umi] { height: 100%; background: #1a1a1a; }
.ci-doc .pbar .unused[b-gm2oin7umi] { height: 100%; background: var(--orange); }
.ci-doc .pbar .val[b-gm2oin7umi] { width: 170px; font-size: 11.5px; font-weight: 700; color: var(--dark); text-align: right; padding-left: 12px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ci-doc .pbar .val span[b-gm2oin7umi] { color: var(--orange); font-weight: 600; font-size: 10.5px; }
.ci-doc .pbar.sm .track[b-gm2oin7umi] { height: 16px; }
.ci-doc .pbar.sm .lab[b-gm2oin7umi] { width: 210px; font-size: 11px; padding-right: 12px; }
.ci-doc .pbar.sm .val[b-gm2oin7umi] { width: 150px; font-size: 11px; }
.ci-doc .legend[b-gm2oin7umi] { display: flex; gap: 22px; font-size: 11.5px; color: var(--mid); margin-top: 10px; }
.ci-doc .legend i[b-gm2oin7umi] { display: inline-block; width: 20px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 6px; }

/* tables */
.ci-doc table[b-gm2oin7umi] { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.ci-doc th[b-gm2oin7umi] { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--light); font-weight: 600; padding: 9px 12px; border-bottom: 2px solid var(--dark); }
.ci-doc td[b-gm2oin7umi] { padding: 9px 12px; border-bottom: 1px solid var(--stroke); font-variant-numeric: tabular-nums; }
.ci-doc td.r[b-gm2oin7umi], .ci-doc th.r[b-gm2oin7umi] { text-align: right; }
.ci-doc tr:last-child td[b-gm2oin7umi] { border-bottom: none; }
.ci-doc .tag[b-gm2oin7umi] { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.ci-doc .tag.unused[b-gm2oin7umi] { background: #ffe8cc; color: #b35e00; }
.ci-doc .tag.used[b-gm2oin7umi] { background: #e9f6ef; color: var(--green); }
.ci-doc .projtbl td[b-gm2oin7umi], .ci-doc .projtbl th[b-gm2oin7umi] { padding-top: 8px; padding-bottom: 8px; }
.ci-doc .projtbl tr.tot td[b-gm2oin7umi] { border-top: 2px solid var(--dark); border-bottom: none; color: var(--dark); padding-top: 11px; font-weight: 700; }
.ci-doc .recovtbl td[b-gm2oin7umi], .ci-doc .recovtbl th[b-gm2oin7umi] { padding-top: 10px; padding-bottom: 10px; }

/* action cards + two-track plan */
.ci-doc .action-grid[b-gm2oin7umi] { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.ci-doc .acard[b-gm2oin7umi] { border: 1px solid var(--stroke); border-radius: 14px; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.ci-doc .acard .num[b-gm2oin7umi] { width: 28px; height: 28px; border-radius: 50%; background: var(--dark); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ci-doc .acard .at[b-gm2oin7umi] { font-size: 15px; font-weight: 700; color: var(--black); letter-spacing: -0.3px; }
.ci-doc .acard .ad[b-gm2oin7umi] { font-size: 11px; color: var(--mid); line-height: 1.5; }
.ci-doc .tracks[b-gm2oin7umi] { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 6px; }
.ci-doc .track[b-gm2oin7umi] { display: flex; flex-direction: column; }
.ci-doc .track-h[b-gm2oin7umi] { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; padding-bottom: 11px; border-bottom: 2px solid var(--dark); }
.ci-doc .track-h.a[b-gm2oin7umi] { border-bottom-color: var(--accent); }
.ci-doc .track-h .t[b-gm2oin7umi] { font-size: 13px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; }
.ci-doc .track-h.a .t[b-gm2oin7umi] { color: var(--accent); }
.ci-doc .track-h .v[b-gm2oin7umi] { font-size: 11px; font-weight: 600; color: var(--light); text-transform: uppercase; letter-spacing: 0.5px; }
.ci-doc .aitem[b-gm2oin7umi] { margin: 10px 0; }
.ci-doc .aitem .top[b-gm2oin7umi] { display: flex; align-items: baseline; gap: 12px; margin-bottom: 5px; }
.ci-doc .aitem .n[b-gm2oin7umi] { font-size: 15px; font-weight: 800; color: var(--faint); flex-shrink: 0; width: 17px; }
.ci-doc .aitem.a .n[b-gm2oin7umi] { color: var(--accent); }
.ci-doc .aitem .at[b-gm2oin7umi] { font-size: 15.5px; font-weight: 700; color: #000; letter-spacing: -0.2px; }
.ci-doc .aitem .imp[b-gm2oin7umi] { margin-left: auto; font-size: 11px; font-weight: 700; flex-shrink: 0; white-space: nowrap; }
.ci-doc .aitem.a .imp[b-gm2oin7umi] { color: var(--accent); }
.ci-doc .aitem.b .imp[b-gm2oin7umi] { color: var(--light); text-transform: uppercase; letter-spacing: 0.5px; }
.ci-doc .aitem .ad[b-gm2oin7umi] { font-size: 12px; color: var(--mid); line-height: 1.55; padding-left: 29px; }

/* section dividers */
.ci-doc .slide.divider[b-gm2oin7umi] { min-height: 88vh; justify-content: center; padding: 66px 84px; }
.ci-doc .slide.divider .dnum[b-gm2oin7umi] { font-size: 220px; font-weight: 800; line-height: 0.75; color: rgba(0,0,0,0.05); position: absolute; top: 30px; right: 60px; letter-spacing: -8px; }
.ci-doc .slide.divider .dkick[b-gm2oin7umi] { font-size: 13px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; position: relative; }
.ci-doc .slide.divider .drule[b-gm2oin7umi] { width: 54px; height: 5px; background: var(--accent); border-radius: 3px; margin-bottom: 28px; position: relative; }
.ci-doc .slide.divider .dtitle[b-gm2oin7umi] { font-size: 52px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.06; color: var(--black); margin-bottom: 20px; position: relative; }
.ci-doc .slide.divider .dsub[b-gm2oin7umi] { font-size: 17px; font-weight: 300; color: var(--mid); line-height: 1.65; max-width: 720px; margin-bottom: 34px; position: relative; }
.ci-doc .slide.divider .dlist[b-gm2oin7umi] { display: flex; flex-wrap: wrap; position: relative; }
.ci-doc .slide.divider .dlist .di[b-gm2oin7umi] { font-size: 12.5px; font-weight: 600; color: var(--light); padding-right: 18px; }
.ci-doc .slide.divider .dlist .di + .di[b-gm2oin7umi] { border-left: 1px solid var(--stroke); padding-left: 18px; }

/* closing quote */
.ci-doc .slide.closing[b-gm2oin7umi] { min-height: 88vh; justify-content: center; align-items: center; text-align: center; }
.ci-doc .slide.closing .accent-rule[b-gm2oin7umi] { width: 54px; height: 5px; background: var(--accent); border-radius: 3px; margin: 0 auto 30px; }
.ci-doc .slide.closing .clt[b-gm2oin7umi] { font-size: 44px; font-weight: 800; letter-spacing: -1.5px; margin-bottom: 20px; line-height: 1.1; color: var(--black); }
.ci-doc .slide.closing .cls[b-gm2oin7umi] { font-size: 17px; font-weight: 300; color: var(--mid); line-height: 1.65; max-width: 720px; margin: 0 auto; }

/* inventory pictures (live upload) */
.ci-doc .ci-upload[b-gm2oin7umi] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--surface); border-radius: 10px; padding: 14px 18px; margin: 6px 0 10px; }
.ci-doc .ci-upload select[b-gm2oin7umi], .ci-doc .ci-upload input[type=file][b-gm2oin7umi] { font-size: 13px; }
.ci-doc .ci-area-h[b-gm2oin7umi] { font-size: 13px; font-weight: 700; color: var(--dark); margin: 18px 0 6px; letter-spacing: -0.2px; }
.ci-doc .ci-gallery[b-gm2oin7umi] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ci-doc .ci-gallery img[b-gm2oin7umi] { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; background: var(--surface); }
.ci-doc .ci-empty[b-gm2oin7umi] { color: var(--light); font-size: 13px; padding: 26px 0; text-align: center; }

/* download FAB */
.ci-doc .ci-fab[b-gm2oin7umi] { position: fixed; right: 28px; bottom: 28px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; background: var(--dark); color: #fff; border: none; border-radius: 100px; padding: 13px 22px; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,0.22); }
.ci-doc .ci-fab:hover[b-gm2oin7umi] { background: #000; }

@media print {
    .ci-doc[b-gm2oin7umi] { background: #fff; padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ci-doc .slide[b-gm2oin7umi] {
        width: 297mm; height: 210mm; max-width: none; min-height: 0;
        margin: 0; padding: 13mm 16mm; box-shadow: none; border-radius: 0;
        page-break-after: always; page-break-inside: avoid; overflow: hidden;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .ci-doc .slide:last-child[b-gm2oin7umi] { page-break-after: auto; }
    .ci-doc .ci-fab[b-gm2oin7umi], .ci-doc .ci-upload[b-gm2oin7umi] { display: none !important; }
}
/* /Components/Pages/MainLayout/Reports/Shared/KpiCard.razor.rz.scp.css */
/* ═══ KPI Card — BEC Monochromatic Design ═══ */

.kpi-card[b-h92xqcgtmx] {
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-card:hover[b-h92xqcgtmx] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.kpi-card.kpi-alert[b-h92xqcgtmx] {
    border-color: #ff3b30;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
}

.kpi-title[b-h92xqcgtmx] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
}

.kpi-value[b-h92xqcgtmx] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.kpi-alert .kpi-value[b-h92xqcgtmx] {
    color: #ff3b30;
}

.kpi-subtitle[b-h92xqcgtmx] {
    font-size: 0.8rem;
    color: #999;
}
/* /Components/Pages/MainLayout/Safety/SafetyActionCenter/SafetyActionCenter.razor.rz.scp.css */
/* =====================================================
   SAFETY ACTION CENTER STYLES
   BEC Theme Compliant - No :root, No hardcoded colors
   Reference: BEC_Theme.css variables
   ===================================================== */

/* ========================================
   LAYOUT GRID
   ======================================== */
.erp-page-container[b-kwk3en51my] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--BEC-colorNeutralBackground2);
    font-family: var(--BEC-fontFamilyBase);
    color: var(--BEC-colorNeutralForeground1);
}

.layout-container[b-kwk3en51my] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ========================================
   GLASS HEADER
   ======================================== */
.glass-header[b-kwk3en51my] {
    height: 48px;
    background: var(--BEC-glassmorphism-bg);
    backdrop-filter: var(--BEC-glassmorphism-blur);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--BEC-spacingHorizontalXXL);
    flex-shrink: 0;
    z-index: 50;
}

.brand-section[b-kwk3en51my] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.page-icon[b-kwk3en51my] {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--BEC-colorPaletteRedForeground1), var(--BEC-colorPaletteRedForeground1));
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-radius: var(--BEC-borderRadiusXLarge);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--BEC-fontSizeBase300);
    box-shadow: var(--BEC-shadow4);
}

.page-info[b-kwk3en51my] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.page-title[b-kwk3en51my] {
    font-size: var(--BEC-fontSizeHero700);
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0;
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1;
}

.page-subtitle[b-kwk3en51my] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

/* Buttons */
.btn-icon[b-kwk3en51my] {
    width: 32px;
    height: 32px;
    border-radius: var(--BEC-borderRadiusCircular);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.btn-icon:hover[b-kwk3en51my] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   SIDEBAR NAVIGATION
   ======================================== */
.sidebar[b-kwk3en51my] {
    width: 260px;
    background: var(--BEC-colorNeutralBackground1);
    border-right: 1px solid var(--BEC-colorNeutralStroke2);
    display: flex;
    flex-direction: column;
    padding: var(--BEC-spacingHorizontalXXL) var(--BEC-spacingHorizontalL);
    flex-shrink: 0;
}

.nav-section-title[b-kwk3en51my] {
    font-size: var(--BEC-fontSizeBase200);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--BEC-colorNeutralForeground4);
    font-weight: var(--BEC-fontWeightSemibold);
    margin-bottom: var(--BEC-spacingHorizontalM);
    padding-left: var(--BEC-spacingHorizontalM);
}

.nav-item[b-kwk3en51my] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--BEC-spacingHorizontalMNudge) var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusXLarge);
    cursor: pointer;
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    margin-bottom: var(--BEC-spacingHorizontalXS);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.nav-item:hover[b-kwk3en51my] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.nav-item.active[b-kwk3en51my] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorBrandForeground1);
}

.nav-item i[b-kwk3en51my] {
    width: 24px;
    text-align: center;
    margin-right: var(--BEC-spacingHorizontalS);
}

.badge[b-kwk3en51my] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
    font-size: var(--BEC-fontSizeBase200);
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusCircular);
    font-weight: var(--BEC-fontWeightSemibold);
}

.nav-item.active .badge[b-kwk3en51my] {
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorBrandForeground1);
    box-shadow: var(--BEC-shadow2);
}

/* ========================================
   MAIN LIST CONTENT
   ======================================== */
.main-list[b-kwk3en51my] {
    flex: 1;
    background: var(--BEC-colorNeutralBackground2);
    padding: var(--BEC-spacingHorizontalXXL);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalM);
}

.empty-state[b-kwk3en51my] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--BEC-colorNeutralForeground3);
    opacity: 0.5;
}

.empty-state i[b-kwk3en51my] {
    font-size: 48px;
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.empty-state p[b-kwk3en51my] {
    font-size: var(--BEC-fontSizeBase300);
}

/* ========================================
   TASK CARDS
   ======================================== */
.task-card[b-kwk3en51my] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusXXLarge);
    padding: var(--BEC-spacingHorizontalL);
    box-shadow: var(--BEC-shadow2);
    display: flex;
    gap: var(--BEC-spacingHorizontalL);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.task-card:hover[b-kwk3en51my] {
    box-shadow: var(--BEC-shadow8);
    transform: translateY(-2px);
    border-color: var(--BEC-colorNeutralStroke1);
}

.task-status-stripe[b-kwk3en51my] {
    width: 4px;
    background: var(--BEC-colorNeutralStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    flex-shrink: 0;
}

.task-card.high .task-status-stripe[b-kwk3en51my] {
    background: var(--BEC-colorPaletteRedForeground1);
}

.task-card.medium .task-status-stripe[b-kwk3en51my] {
    background: var(--BEC-colorPaletteYellowForeground1);
}

.task-card.low .task-status-stripe[b-kwk3en51my] {
    background: var(--BEC-colorBrandForeground1);
}

.task-content[b-kwk3en51my] {
    flex: 1;
    min-width: 0;
}

.task-header[b-kwk3en51my] {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--BEC-spacingHorizontalSNudge);
}

.task-id[b-kwk3en51my] {
    font-size: var(--BEC-fontSizeBase200);
    font-family: monospace;
    color: var(--BEC-colorNeutralForeground4);
}

.task-date[b-kwk3en51my] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground4);
}

.task-title[b-kwk3en51my] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: var(--BEC-spacingHorizontalXS);
}

.task-desc[b-kwk3en51my] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-meta[b-kwk3en51my] {
    display: flex;
    gap: var(--BEC-spacingHorizontalL);
    margin-top: var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

.meta-item[b-kwk3en51my] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
}

.meta-item i[b-kwk3en51my] {
    font-size: var(--BEC-fontSizeBase200);
}

/* Loading States */
.loading-overlay[b-kwk3en51my] {
    position: absolute;
    inset: 0;
    background: var(--BEC-glassmorphism-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.loading-spinner[b-kwk3en51my] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusCircular);
    animation: spin-b-kwk3en51my 1s linear infinite;
}

@keyframes spin-b-kwk3en51my {
    to {
        transform: rotate(360deg);
    }
}

/* Skeleton Loading */
.skeleton[b-kwk3en51my] {
    background: linear-gradient(90deg, var(--BEC-colorNeutralBackground3) 25%, var(--BEC-colorNeutralBackground2) 50%, var(--BEC-colorNeutralBackground3) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-kwk3en51my 2s infinite;
    border-radius: var(--BEC-borderRadiusMedium);
}

.skeleton-card[b-kwk3en51my] {
    height: 120px;
    margin-bottom: var(--BEC-spacingHorizontalM);
}

@keyframes shimmer-b-kwk3en51my {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Additional Classes for Razor compliance */
.nav-item-content[b-kwk3en51my] {
    display: flex;
    align-items: center;
}

.error-boundary-container[b-kwk3en51my] {
    padding: var(--BEC-spacingHorizontalXXL);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* Focus Visible for Keyboard Navigation */
.nav-item:focus-visible[b-kwk3en51my] {
    outline: 2px solid var(--BEC-colorBrandForeground1);
    outline-offset: 2px;
}
/* /Components/Pages/MainLayout/Safety/SafetyDashboard/SafetyDashboard.razor.rz.scp.css */
/* =====================================================
   SAFETY DASHBOARD PAGE STYLES
   BEC Theme Compliant - No hardcoded colors
   Reference: BEC_Theme.css variables
   ===================================================== */

/* ========================================
   OVERRIDE PARENT SCROLL BEHAVIOR
   This ensures ONLY the grid content scrolls
   ======================================== */
[b-46e2eyuhs0] .page-content {
    overflow: hidden !important;
    overflow-y: hidden !important;
}

[b-46e2eyuhs0] .page-content-inner {
    overflow: hidden !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ========================================
   PAGE CONTAINER - Full Width Layout
   Uses relative positioning for proper layout flow
   ======================================== */
.erp-page-container[b-46e2eyuhs0] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100%;
    position: relative;
    background: var(--BEC-colorNeutralBackground2);
    width: 100%;
    box-sizing: border-box;
    font-family: var(--BEC-fontFamilyBase);
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   PAGE HEADER - Sticky at top
   ======================================== */
.dashboard-header[b-46e2eyuhs0] {
    position: sticky;
    top: 0;
    flex-shrink: 0;
    z-index: 100;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 0 var(--BEC-spacingHorizontalL);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--BEC-spacingHorizontalM);
    height: 48px;
    min-height: 48px;
}

.header-title-section[b-46e2eyuhs0] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.header-icon[b-46e2eyuhs0] {
    font-size: var(--BEC-fontSizeBase500);
    color: var(--BEC-colorBrandForeground1);
}

.header-text[b-46e2eyuhs0] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.page-title[b-46e2eyuhs0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalSNudge);
    font-size: var(--BEC-fontSizeHero700);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-subtitle[b-46e2eyuhs0] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground2);
    margin: var(--BEC-spacingHorizontalXXS) 0 0 0;
}

.header-right-section[b-46e2eyuhs0] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
}

/* ========================================
   HEADER STATS - Compact
   ======================================== */
.header-stats[b-46e2eyuhs0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusLarge);
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalM);
    height: 32px;
}

.header-stat-item[b-46e2eyuhs0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 var(--BEC-spacingHorizontalS);
    border-right: 1px solid var(--BEC-colorNeutralStroke2);
}

.header-stat-item:last-child[b-46e2eyuhs0] {
    border-right: none;
}

.header-stat-value[b-46e2eyuhs0] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightBold);
}

.header-stat-value.success[b-46e2eyuhs0] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.header-stat-value.warning[b-46e2eyuhs0] {
    color: var(--BEC-colorPaletteYellowForeground1);
}

.header-stat-value.info[b-46e2eyuhs0] {
    color: var(--BEC-colorBrandForeground1);
}

.header-stat-value.highlight[b-46e2eyuhs0] {
    color: var(--BEC-colorBrandForeground1);
}

.header-stat-label[b-46e2eyuhs0] {
    font-size: var(--BEC-fontSizeBase100);
    text-transform: uppercase;
    color: var(--BEC-colorNeutralForeground3);
    margin-top: var(--BEC-spacingHorizontalXXS);
}

.header-actions[b-46e2eyuhs0] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
}

.btn-icon[b-46e2eyuhs0] {
    width: 32px;
    height: 32px;
    border-radius: var(--BEC-borderRadiusCircular);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.btn-icon:hover[b-46e2eyuhs0] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandForeground1);
}

/* ========================================
   DASHBOARD CONTENT AREA
   Scrollable area below header
   ======================================== */
.dashboard-scroll-area[b-46e2eyuhs0] {
    flex: 1;
    overflow-y: auto;
    padding: var(--BEC-spacingHorizontalL);
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
}

/* ========================================
   KPI CARDS ROW
   ======================================== */
.kpi-cards-row[b-46e2eyuhs0] {
    display: flex;
    gap: var(--BEC-spacingHorizontalL);
    flex-wrap: wrap;
}

.kpi-card[b-46e2eyuhs0] {
    flex: 1;
    min-width: 200px;
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusXLarge);
    padding: var(--BEC-spacingHorizontalL);
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    box-shadow: var(--BEC-shadow2);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.kpi-card:hover[b-46e2eyuhs0] {
    transform: translateY(-2px);
    box-shadow: var(--BEC-shadow4);
}

.kpi-card.safe-days[b-46e2eyuhs0] {
    background: var(--BEC-status-approved-bg);
    border-color: var(--BEC-status-approved-border);
}

.kpi-card.safe-days .kpi-label[b-46e2eyuhs0] {
    color: var(--BEC-status-approved-color);
    opacity: 0.9;
}

.kpi-card.safe-days .kpi-value[b-46e2eyuhs0] {
    color: var(--BEC-status-approved-color);
}

.kpi-icon[b-46e2eyuhs0] {
    width: 48px;
    height: 48px;
    border-radius: var(--BEC-borderRadiusXXLarge);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--BEC-fontSizeBase600);
}

.kpi-icon.incident[b-46e2eyuhs0] {
    background: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
}

.kpi-icon.near-miss[b-46e2eyuhs0] {
    background: var(--BEC-colorPaletteYellowBackground1);
    color: var(--BEC-colorPaletteYellowForeground1);
}

.kpi-icon.observation[b-46e2eyuhs0] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorBrandForeground1);
}

.kpi-icon.permit[b-46e2eyuhs0] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-themeTertiary);
}

.kpi-icon.safe[b-46e2eyuhs0] {
    background: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.kpi-content[b-46e2eyuhs0] {
    display: flex;
    flex-direction: column;
}

.kpi-value[b-46e2eyuhs0] {
    font-size: var(--BEC-fontSizeHero700);
    font-weight: var(--BEC-fontWeightBold);
    line-height: 1;
    color: var(--BEC-colorNeutralForeground1);
}

.kpi-label[b-46e2eyuhs0] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin-top: var(--BEC-spacingHorizontalXS);
}

/* ========================================
   GRID SECTION CARD (Chart Placeholder)
   ======================================== */
.grid-section-card[b-46e2eyuhs0] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusXLarge);
    box-shadow: var(--BEC-shadow2);
    flex: 1;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-placeholder[b-46e2eyuhs0] {
    text-align: center;
    color: var(--BEC-colorNeutralForeground3);
}

.chart-placeholder i[b-46e2eyuhs0] {
    font-size: 48px;
    margin-bottom: var(--BEC-spacingHorizontalL);
    opacity: 0.5;
}

.chart-placeholder h3[b-46e2eyuhs0] {
    font-size: var(--BEC-fontSizeBase400);
    font-weight: var(--BEC-fontWeightSemibold);
    margin: 0 0 var(--BEC-spacingHorizontalS) 0;
}

.chart-placeholder p[b-46e2eyuhs0] {
    font-size: var(--BEC-fontSizeBase200);
    margin: 0;
}

/* Dashboard Content */
.dashboard-content[b-46e2eyuhs0] {
    flex: 1;
    padding: 0 var(--BEC-spacingHorizontalXXL) var(--BEC-spacingHorizontalXXL);
}

/* ========================================
   LOADING STATES
   ======================================== */
.loading-overlay[b-46e2eyuhs0] {
    position: absolute;
    inset: 0;
    background: var(--BEC-glassmorphism-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    gap: var(--BEC-spacingHorizontalL);
}

.loading-spinner[b-46e2eyuhs0] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusCircular);
    animation: spin-b-46e2eyuhs0 1s linear infinite;
}

.loading-overlay p[b-46e2eyuhs0] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin: 0;
}

@keyframes spin-b-46e2eyuhs0 {
    to {
        transform: rotate(360deg);
    }
}

/* Skeleton Loading */
.skeleton[b-46e2eyuhs0] {
    background: linear-gradient(90deg, var(--BEC-colorNeutralBackground3) 25%, var(--BEC-colorNeutralBackground2) 50%, var(--BEC-colorNeutralBackground3) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-46e2eyuhs0 2s infinite;
    border-radius: var(--BEC-borderRadiusMedium);
}

.skeleton-kpi[b-46e2eyuhs0] {
    height: 80px;
    flex: 1;
    min-width: 200px;
}

.skeleton-chart[b-46e2eyuhs0] {
    height: 400px;
    width: 100%;
}

@keyframes shimmer-b-46e2eyuhs0 {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Error Boundary Container */
.error-boundary-container[b-46e2eyuhs0] {
    padding: var(--BEC-spacingHorizontalXXL);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}
/* /Components/Pages/MainLayout/Safety/SafetyRequest/SafetyRequest.razor.rz.scp.css */
/* ========================================
   SAFETY REQUESTS
   High-Performance Grid Styling
   ======================================== */

/* ========================================
   OVERRIDE PARENT SCROLL BEHAVIOR
   This ensures ONLY the grid content scrolls
   ======================================== */
[b-getjrrk7cz] .page-content {
    overflow: hidden !important;
    overflow-y: hidden !important;
}

[b-getjrrk7cz] .page-content-inner {
    overflow: hidden !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ========================================
   PAGE CONTAINER - Full Width Layout
   Uses relative positioning for proper layout flow
   ======================================== */
.erp-page-container[b-getjrrk7cz] {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--BEC-colorNeutralBackground2);
}

/* ========================================
   PAGE HEADER - Sticky at top
   ======================================== */
.erp-page-header[b-getjrrk7cz] {
    position: sticky;
    top: 0;
    flex-shrink: 0;
    z-index: 100;
    background: var(--BEC-colorNeutralBackground2);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 40px;
    min-height: 40px;
}

.header-left[b-getjrrk7cz] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-getjrrk7cz] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    /* Base500 equivalent */
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-getjrrk7cz] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 18px;
}

.help-icon-btn[b-getjrrk7cz] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-getjrrk7cz] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.header-right[b-getjrrk7cz] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* ========================================
   ACTION TOOLBAR - Fixed at top of grid, doesn't scroll
   ======================================== */
[b-getjrrk7cz] .e-toolbar.e-control {
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    padding: var(--BEC-spacingHorizontalXS) var(--BEC-spacingHorizontalXL) !important;
    min-height: 44px !important;
    margin: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
}

[b-getjrrk7cz] .e-toolbar .e-toolbar-item {
    margin: 0 var(--BEC-spacingHorizontalXXS) !important;
}

/* Compact Toolbar - Matches header height */
[b-getjrrk7cz] .compact-toolbar.e-toolbar {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 var(--BEC-spacingHorizontalXXL) !important;
}

[b-getjrrk7cz] .compact-toolbar .e-toolbar-items {
    height: 44px !important;
}

[b-getjrrk7cz] .compact-toolbar .e-toolbar-item {
    margin: 0 1px !important;
    height: 44px !important;
}

[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    min-height: 28px !important;
    height: 28px !important;
    line-height: 1 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove focus outline/border on toolbar buttons */
[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn:focus,
[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn:focus-visible,
[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn:active,
[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn.e-focused {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 12px !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.15s ease !important;
}

[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    transition: color 0.15s ease !important;
}

[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Highlighted Save Button (when pending changes) */
[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .toolbar-btn-highlight .e-icons,
[b-getjrrk7cz] .compact-toolbar .e-toolbar-item .toolbar-btn-highlight .e-tbar-btn-text {
    color: #059669 !important;
    font-weight: 600 !important;
}

/* Disabled State */
[b-getjrrk7cz] .compact-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
}

[b-getjrrk7cz] .compact-toolbar .e-separator {
    background: var(--BEC-colorNeutralStroke2) !important;
    width: 1px !important;
    height: 18px !important;
    margin: 0 4px !important;
}

/* ========================================
   PAGE CONTENT - FLUSH GRID
   ======================================== */
.erp-page-content[b-getjrrk7cz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}

/* DEPRECATED WRAPPERS REMOVED */

/* ========================================
   GRID OVERRIDES
   ======================================== */
[b-getjrrk7cz] .e-grid {
    border: none !important;
}

[b-getjrrk7cz] .e-grid .e-gridheader {
    background: var(--BEC-colorNeutralBackground3) !important;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2) !important;
}

[b-getjrrk7cz] .e-headercell {
    background: var(--BEC-colorNeutralBackground3) !important;
    color: var(--BEC-colorNeutralForeground3) !important;
    font-size: var(--BEC-fontSizeBase200) !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
}

[b-getjrrk7cz] .e-rowcell {
    font-size: var(--BEC-fontSizeBase200) !important;
    color: var(--BEC-colorNeutralForeground1) !important;
    border-color: var(--BEC-colorNeutralStroke2) !important;
    padding: var(--BEC-spacingHorizontalM) !important;
}

[b-getjrrk7cz] .e-grid .e-row:hover .e-rowcell {
    background-color: var(--BEC-colorNeutralBackground3) !important;
}

/* Status Badges */
.status-badge[b-getjrrk7cz] {
    display: inline-flex;
    align-items: center;
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusCircular);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
}

.status-badge.submitted[b-getjrrk7cz] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.status-badge.draft[b-getjrrk7cz] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground3);
}

.status-badge.pending[b-getjrrk7cz] {
    background: var(--BEC-colorPaletteYellowBackground1);
    color: var(--BEC-colorPaletteYellowForeground1);
}

.status-badge.rejected[b-getjrrk7cz] {
    background: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
}

/* Grid ID Cell */
.id-cell[b-getjrrk7cz] {
    font-family: monospace;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Description Cell */
.description-cell[b-getjrrk7cz] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 230px;
}

/* ========================================
   CUSTOM TOOLBAR ITEMS (Pills + Search)
   Adapted for Template implementation within SfToolbar
   ======================================== */
.filter-pills[b-getjrrk7cz] {
    display: flex;
    gap: var(--BEC-spacingHorizontalS);
    align-items: center;
}

.filter-pill[b-getjrrk7cz] {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    background: transparent;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground3);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    line-height: normal;
}

.filter-pill:hover[b-getjrrk7cz] {
    background: var(--BEC-colorNeutralBackground3);
    border-color: var(--BEC-colorNeutralStroke1);
}

.filter-pill.active[b-getjrrk7cz] {
    background: #ecfdf5;
    /* Green Light */
    color: #059669;
    /* Green Dark */
    border-color: #059669;
    font-weight: 600;
}

.search-bar-integrated[b-getjrrk7cz] {
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 14px;
    padding: 2px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 200px;
    border: 1px solid transparent;
    height: 28px;
}

.search-bar-integrated:focus-within[b-getjrrk7cz] {
    background: var(--BEC-colorNeutralBackground1);
    border-color: var(--BEC-colorBrandForeground1);
}

.search-bar-integrated i[b-getjrrk7cz] {
    color: var(--BEC-colorNeutralForeground4);
    font-size: 12px;
}

.search-bar-integrated input[b-getjrrk7cz] {
    border: none;
    background: transparent;
    outline: none;
    font-size: 12px;
    width: 100%;
    color: var(--BEC-colorNeutralForeground1);
    font-family: var(--BEC-fontFamilyBase);
    padding: 0;
    height: 100%;
}

/* ========================================
   WIZARD SIDEBAR STYLES (Preserved)
   ======================================== */
.wizard-sidebar[b-getjrrk7cz] {
    --wizard-bg: var(--BEC-colorNeutralBackground1);
    --wizard-header-bg: var(--BEC-colorNeutralBackground3);
}

[b-getjrrk7cz] .e-sidebar.wizard-sidebar {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-left: 1px solid var(--BEC-colorNeutralStroke2);
    box-shadow: var(--BEC-shadow16);
    z-index: 2000 !important;
}

.sidebar-content[b-getjrrk7cz] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Wizard Header */
.v1-header[b-getjrrk7cz] {
    padding: var(--BEC-spacingHorizontalXXL);
    background: var(--BEC-colorNeutralBackground3);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.v1-title[b-getjrrk7cz] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: var(--BEC-spacingHorizontalL);
}

.v1-stepper[b-getjrrk7cz] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM);
}

.v1-step[b-getjrrk7cz] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    opacity: 0.5;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.v1-step.active[b-getjrrk7cz] {
    opacity: 1;
}

.v1-circle[b-getjrrk7cz] {
    width: 24px;
    height: 24px;
    border-radius: var(--BEC-borderRadiusCircular);
    background: var(--BEC-colorNeutralBackground5);
    color: var(--BEC-colorNeutralForeground3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
}

.v1-step.active .v1-circle[b-getjrrk7cz] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.v1-step span[b-getjrrk7cz] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
}

/* Wizard Body */
.v1-body[b-getjrrk7cz] {
    flex: 1;
    overflow-y: auto;
    padding: var(--BEC-spacingHorizontalXXL);
}

.v1-form-group[b-getjrrk7cz] {
    margin-bottom: var(--BEC-spacingHorizontalXL);
}

.v1-form-group label[b-getjrrk7cz] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalSNudge);
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
}

.v1-form-group input[b-getjrrk7cz],
.v1-form-group select[b-getjrrk7cz],
.v1-form-group textarea[b-getjrrk7cz] {
    width: 100%;
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalM);
    font-size: var(--BEC-fontSizeBase300);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusLarge);
    color: var(--BEC-colorNeutralForeground1);
    background: var(--BEC-colorNeutralBackground1);
    font-family: var(--BEC-fontFamilyBase);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.v1-form-group input:focus[b-getjrrk7cz],
.v1-form-group select:focus[b-getjrrk7cz],
.v1-form-group textarea:focus[b-getjrrk7cz] {
    border-color: var(--BEC-colorBrandForeground1);
    box-shadow: var(--BEC-focus-shadow);
    outline: none;
}

.validation-message[b-getjrrk7cz] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorPaletteRedForeground1);
    margin-top: var(--BEC-spacingHorizontalXS);
}

.severity-options[b-getjrrk7cz] {
    display: flex;
    gap: var(--BEC-spacingHorizontalS);
}

.badge-option[b-getjrrk7cz] {
    padding: var(--BEC-spacingHorizontalSNudge) var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusCircular);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    font-size: var(--BEC-fontSizeBase200);
    cursor: pointer;
    color: var(--BEC-colorNeutralForeground3);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.badge-option.selected[b-getjrrk7cz] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

.file-upload-area[b-getjrrk7cz] {
    border: 2px dashed var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusLarge);
    padding: var(--BEC-spacingHorizontalXXL);
    text-align: center;
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.file-upload-area:hover[b-getjrrk7cz] {
    border-color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground3);
}

.file-hint[b-getjrrk7cz] {
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
    margin-top: var(--BEC-spacingHorizontalS);
}

/* Wizard Footer */
.v1-footer[b-getjrrk7cz] {
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground3);
    display: flex;
    justify-content: flex-end;
    gap: var(--BEC-spacingHorizontalM);
}

.btn[b-getjrrk7cz] {
    padding: var(--BEC-spacingHorizontalS) var(--BEC-spacingHorizontalL);
    border-radius: var(--BEC-borderRadiusLarge);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    border: none;
    font-family: var(--BEC-fontFamilyBase);
    transition: all var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

.btn-secondary[b-getjrrk7cz] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    color: var(--BEC-colorNeutralForeground1);
}

.btn-secondary:hover[b-getjrrk7cz] {
    background: var(--BEC-colorNeutralBackground3);
}

.btn-primary[b-getjrrk7cz] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.btn-primary:hover[b-getjrrk7cz] {
    background: var(--BEC-colorBrandBackgroundHover);
}

.btn-primary:disabled[b-getjrrk7cz] {
    background: var(--BEC-colorNeutralForeground4);
    cursor: not-allowed;
}

/* Message Bars */
.message-success[b-getjrrk7cz] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorPaletteGreenForeground1);
    padding: var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: var(--BEC-spacingHorizontalXL);
    font-size: var(--BEC-fontSizeBase300);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-error[b-getjrrk7cz] {
    background: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
    padding: var(--BEC-spacingHorizontalM);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: var(--BEC-spacingHorizontalXL);
    font-size: var(--BEC-fontSizeBase300);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-close[b-getjrrk7cz] {
    cursor: pointer;
    font-size: var(--BEC-fontSizeBase400);
}

/* Loading Overlay */
.loading-overlay[b-getjrrk7cz] {
    position: absolute;
    inset: 0;
    background: var(--BEC-glassmorphism-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    gap: var(--BEC-spacingHorizontalL);
}

.loading-spinner[b-getjrrk7cz] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--BEC-colorNeutralStroke2);
    border-top-color: var(--BEC-colorBrandForeground1);
    border-radius: var(--BEC-borderRadiusCircular);
    animation: spin-b-getjrrk7cz 1s linear infinite;
}

@keyframes spin-b-getjrrk7cz {
    to {
        transform: rotate(360deg);
    }
}

/* Screen Reader Only - Accessibility */
.sr-only[b-getjrrk7cz] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.error-boundary-container[b-getjrrk7cz] {
    padding: var(--BEC-spacingHorizontalXXL);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* ================= MIGRATED INLINE STYLES ================= */

.sfr-subtitle[b-getjrrk7cz] {
    font-weight: 400;
    color: var(--BEC-colorNeutralForeground3);
    margin-left: 8px;
    font-size: 12px;
}
/* /Components/Pages/MainLayout/VendorProcurement/VendorProcurementDashboard.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER
   ======================================== */
.erp-page-container[b-pkh64zcgjv] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER
   ======================================== */
.erp-page-header[b-pkh64zcgjv] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 36px;
}

.header-left[b-pkh64zcgjv] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-pkh64zcgjv] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.header-right[b-pkh64zcgjv] {
    flex-shrink: 0;
}

/* ========================================
   KPI CARDS ROW
   ======================================== */
.kpi-cards-row[b-pkh64zcgjv] {
    display: flex;
    gap: 10px;
    padding: 8px 24px;
    overflow-x: auto;
}

.kpi-card[b-pkh64zcgjv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    min-width: 100px;
    border-radius: var(--BEC-borderRadiusMedium);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    background: var(--BEC-colorNeutralBackground1);
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.kpi-card:hover[b-pkh64zcgjv] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.kpi-card.kpi-active[b-pkh64zcgjv] {
    border-color: var(--BEC-colorBrandStroke1);
    background: var(--BEC-colorNeutralBackground1Hover);
}

.kpi-value[b-pkh64zcgjv] {
    font-size: 20px;
    font-weight: var(--BEC-fontWeightBold);
    line-height: 1.2;
}

.kpi-label[b-pkh64zcgjv] {
    font-size: 9px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
    margin-top: 2px;
}

.kpi-orange[b-pkh64zcgjv] { border-left-color: #f57c00; }
.kpi-orange .kpi-value[b-pkh64zcgjv] { color: #f57c00; }

.kpi-yellow[b-pkh64zcgjv] { border-left-color: #fbc02d; }
.kpi-yellow .kpi-value[b-pkh64zcgjv] { color: #f9a825; }

.kpi-blue[b-pkh64zcgjv] { border-left-color: #1976d2; }
.kpi-blue .kpi-value[b-pkh64zcgjv] { color: #1976d2; }

.kpi-green[b-pkh64zcgjv] { border-left-color: #388e3c; }
.kpi-green .kpi-value[b-pkh64zcgjv] { color: #388e3c; }

.kpi-red[b-pkh64zcgjv] { border-left-color: #d32f2f; }
.kpi-red .kpi-value[b-pkh64zcgjv] { color: #d32f2f; }

.kpi-amber[b-pkh64zcgjv] { border-left-color: #ff8f00; }
.kpi-amber .kpi-value[b-pkh64zcgjv] { color: #ff8f00; }

.kpi-purple[b-pkh64zcgjv] { border-left-color: #7b1fa2; }
.kpi-purple .kpi-value[b-pkh64zcgjv] { color: #7b1fa2; }

/* ========================================
   CATEGORY / STATUS TABS
   ======================================== */
.category-tabs[b-pkh64zcgjv] {
    display: flex;
    gap: 4px;
    padding: 4px 24px;
    overflow-x: auto;
}

.category-tab[b-pkh64zcgjv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.category-tab:hover[b-pkh64zcgjv] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandStroke1);
}

.category-tab.active[b-pkh64zcgjv] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-color: var(--BEC-colorBrandBackground);
}

.category-tab .tab-badge[b-pkh64zcgjv] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.category-tab.active .tab-badge[b-pkh64zcgjv] {
    background: rgba(255, 255, 255, 0.25);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

/* ========================================
   ACTION TOOLBAR
   ======================================== */
.action-toolbar[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    margin: 4px 24px;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    gap: 12px;
    min-height: 40px;
}

.toolbar-left[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.toolbar-right[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
}

.toolbar-btn[b-pkh64zcgjv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.toolbar-btn i[b-pkh64zcgjv] {
    font-size: 11px;
}

.toolbar-btn:hover:not(:disabled)[b-pkh64zcgjv] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-color: var(--BEC-colorBrandBackground);
}

.toolbar-btn:disabled[b-pkh64zcgjv] {
    opacity: 0.45;
    cursor: not-allowed;
}

.toolbar-search[b-pkh64zcgjv] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-pkh64zcgjv] {
    position: absolute;
    left: 10px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    pointer-events: none;
    z-index: 1;
}

[b-pkh64zcgjv] .e-search-inline .e-input {
    padding-left: 30px !important;
    font-size: 12px !important;
    height: 30px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-pkh64zcgjv] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: visible;
}

/* ========================================
   STATES
   ======================================== */
.loading-overlay[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
}

.empty-state[b-pkh64zcgjv],
.error-state[b-pkh64zcgjv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    color: var(--BEC-colorNeutralForeground3);
    gap: 12px;
}

.empty-state i[b-pkh64zcgjv],
.error-state i[b-pkh64zcgjv] {
    font-size: 32px;
    opacity: 0.5;
}

.btn-retry[b-pkh64zcgjv] {
    padding: 6px 16px;
    border: 1px solid var(--BEC-colorBrandStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    background: transparent;
    color: var(--BEC-colorBrandForeground1);
    font-size: 12px;
    cursor: pointer;
}

.btn-retry:hover[b-pkh64zcgjv] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.empty-state-sm[b-pkh64zcgjv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    color: var(--BEC-colorNeutralForeground3);
    gap: 8px;
    font-size: 12px;
}

.empty-state-sm i[b-pkh64zcgjv] {
    font-size: 24px;
    opacity: 0.4;
}

/* ========================================
   STATUS BADGES
   ======================================== */
.status-badge[b-pkh64zcgjv] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-pending-approval[b-pkh64zcgjv] { background: #fff3e0; color: #e65100; }
.status-information-requested[b-pkh64zcgjv] { background: #fffde7; color: #f57f17; }
.status-approved[b-pkh64zcgjv] { background: #e3f2fd; color: #1565c0; }
.status-active[b-pkh64zcgjv] { background: #e8f5e9; color: #2e7d32; }
.status-on-hold[b-pkh64zcgjv] { background: #f5f5f5; color: #616161; }
.status-suspended[b-pkh64zcgjv] { background: #fce4ec; color: #c62828; }
.status-blacklisted[b-pkh64zcgjv] { background: #212121; color: #ffffff; }
.status-expired[b-pkh64zcgjv] { background: #efebe9; color: #4e342e; }

/* ========================================
   ORIGIN & CODE BADGES
   ======================================== */
.origin-badge[b-pkh64zcgjv] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.origin-local[b-pkh64zcgjv] { background: #e8f5e9; color: #2e7d32; }
.origin-foreign[b-pkh64zcgjv] { background: #e3f2fd; color: #1565c0; }

.vendor-code[b-pkh64zcgjv] {
    font-family: monospace;
    font-size: 11px;
    color: var(--BEC-colorBrandForeground1);
    font-weight: var(--BEC-fontWeightSemibold);
}

.text-muted[b-pkh64zcgjv] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 11px;
}

.score-badge[b-pkh64zcgjv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightBold);
}

.expiry-badge[b-pkh64zcgjv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff3e0;
    color: #e65100;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightBold);
}

.info-req-badge[b-pkh64zcgjv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightBold);
}

/* ========================================
   GRID OVERRIDES
   ======================================== */
[b-pkh64zcgjv] .e-grid {
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

[b-pkh64zcgjv] .e-grid .e-row {
    height: 34px !important;
    cursor: pointer;
}

[b-pkh64zcgjv] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-pkh64zcgjv] .e-grid .e-row td {
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-pkh64zcgjv] .e-grid .e-gridheader .e-headercell {
    height: 34px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   RIGHT SIDE PANEL
   ======================================== */
.panel-backdrop[b-pkh64zcgjv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000;
    animation: fadeIn-b-pkh64zcgjv 0.2s ease;
}

@keyframes fadeIn-b-pkh64zcgjv {
    from { opacity: 0; }
    to { opacity: 1; }
}

.side-panel[b-pkh64zcgjv] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50vw;
    max-width: 700px;
    min-width: 400px;
    background: var(--BEC-colorNeutralBackground1);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    overflow-x: hidden;
    animation: slideInRight-b-pkh64zcgjv 0.25s ease;
}

@keyframes slideInRight-b-pkh64zcgjv {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.panel-header[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    flex-shrink: 0;
    gap: 8px;
}

.panel-title-area[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.panel-title[b-pkh64zcgjv] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-close-btn[b-pkh64zcgjv] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
}

.panel-close-btn:hover[b-pkh64zcgjv] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.panel-body[b-pkh64zcgjv] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    position: relative;
    z-index: 0;
}

.panel-footer[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    flex-shrink: 0;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    background: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   ACTION DIALOGS (CHILD COMPONENTS)
   ======================================== */
/* .dialog-* styles moved to wwwroot/css/shared/_vendor-action-dialog.css (global).
   ::deep here never actually matched: ApprovalPanel/InfoRequestPanel/etc. are
   rendered as siblings of this component's own markup, not nested descendants,
   so there was no shared scoped ancestor for ::deep to anchor on - the dialogs
   rendered as unstyled in-flow content instead of a modal overlay. */

/* ========================================
   TAB CONTENT
   ======================================== */
.tab-content[b-pkh64zcgjv] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-wrap: anywhere;
    min-width: 0;
}

[b-pkh64zcgjv] .e-tab .e-tab-header {
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

[b-pkh64zcgjv] .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
}

/* ========================================
   DETAIL SECTIONS
   ======================================== */
.detail-section[b-pkh64zcgjv] {
    margin-bottom: 12px;
}

.section-title[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.section-title i[b-pkh64zcgjv] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 11px;
}

.detail-grid[b-pkh64zcgjv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.detail-field[b-pkh64zcgjv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.detail-field.full-width[b-pkh64zcgjv] {
    grid-column: 1 / -1;
}

.field-label[b-pkh64zcgjv] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.field-value[b-pkh64zcgjv] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ========================================
   PROGRESS BAR
   ======================================== */
.progress-bar-container[b-pkh64zcgjv] {
    width: 100%;
    height: 6px;
    background: var(--BEC-colorNeutralBackground3);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.progress-bar[b-pkh64zcgjv] {
    height: 100%;
    background: var(--BEC-colorBrandBackground);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text[b-pkh64zcgjv] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   STATUS TIMELINE
   ======================================== */
.status-timeline[b-pkh64zcgjv] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 8px;
}

.timeline-item[b-pkh64zcgjv] {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    position: relative;
}

.timeline-item:not(:last-child)[b-pkh64zcgjv]::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 22px;
    bottom: -8px;
    width: 1px;
    background: var(--BEC-colorNeutralStroke2);
}

.timeline-dot[b-pkh64zcgjv] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground);
    flex-shrink: 0;
    margin-top: 2px;
}

.timeline-content[b-pkh64zcgjv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.timeline-status[b-pkh64zcgjv] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.timeline-date[b-pkh64zcgjv] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.timeline-reason[b-pkh64zcgjv] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground2);
    font-style: italic;
}

/* ========================================
   DOCUMENTS
   ======================================== */
.doc-card[b-pkh64zcgjv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    border-left: 3px solid transparent;
}

.doc-card.doc-ok[b-pkh64zcgjv] { border-left-color: #388e3c; }
.doc-card.doc-warning[b-pkh64zcgjv] { border-left-color: #ff8f00; }
.doc-card.doc-critical[b-pkh64zcgjv] { border-left-color: #d32f2f; }
.doc-card.doc-expired[b-pkh64zcgjv] { border-left-color: #616161; background: #fafafa; }

.doc-info[b-pkh64zcgjv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.doc-type[b-pkh64zcgjv] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.doc-dates[b-pkh64zcgjv] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.doc-expiry-badge[b-pkh64zcgjv] {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: var(--BEC-fontWeightBold);
    text-transform: uppercase;
}

.doc-expiry-ok[b-pkh64zcgjv] { background: #e8f5e9; color: #2e7d32; }
.doc-expiry-warning[b-pkh64zcgjv] { background: #fff3e0; color: #e65100; }
.doc-expiry-critical[b-pkh64zcgjv] { background: #fce4ec; color: #c62828; }
.doc-expiry-expired[b-pkh64zcgjv] { background: #efebe9; color: #4e342e; }

/* ========================================
   PERFORMANCE RATINGS
   ======================================== */
.performance-avg[b-pkh64zcgjv] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 12px;
    background: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    margin-bottom: 12px;
}

.avg-label[b-pkh64zcgjv] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
}

.avg-value[b-pkh64zcgjv] {
    font-size: 24px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
}

.avg-max[b-pkh64zcgjv] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground3);
}

.rating-card[b-pkh64zcgjv] {
    padding: 10px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-bottom: 8px;
}

.rating-header[b-pkh64zcgjv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.rating-ref[b-pkh64zcgjv] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.rating-score[b-pkh64zcgjv] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
}

.rating-breakdown[b-pkh64zcgjv] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 4px;
}

.rating-footer[b-pkh64zcgjv] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   INFO REQUESTS
   ======================================== */
.info-request-card[b-pkh64zcgjv] {
    padding: 8px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-bottom: 8px;
}

.info-req-header[b-pkh64zcgjv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.info-req-priority[b-pkh64zcgjv] {
    font-size: 9px;
    font-weight: var(--BEC-fontWeightBold);
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
}

.priority-low[b-pkh64zcgjv] { background: #e8f5e9; color: #2e7d32; }
.priority-normal[b-pkh64zcgjv] { background: #e3f2fd; color: #1565c0; }
.priority-high[b-pkh64zcgjv] { background: #fff3e0; color: #e65100; }
.priority-critical[b-pkh64zcgjv] { background: #fce4ec; color: #c62828; }

.info-req-status[b-pkh64zcgjv] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

.info-req-desc[b-pkh64zcgjv] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 4px;
}

.info-req-meta[b-pkh64zcgjv] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   GENERIC RECORD CARDS (Company/Compliance/Financial/Track Record tabs)
   ======================================== */
.record-card[b-pkh64zcgjv] {
    padding: 10px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    margin-bottom: 8px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.record-card-header[b-pkh64zcgjv] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.record-card-header > span:first-child[b-pkh64zcgjv] {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.record-card-sub[b-pkh64zcgjv] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.record-card-badge[b-pkh64zcgjv] {
    font-size: 9px;
    font-weight: var(--BEC-fontWeightBold);
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

.record-card-badge.badge-primary[b-pkh64zcgjv] {
    background: #e3f2fd;
    color: #1565c0;
}

.record-card-link[b-pkh64zcgjv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--BEC-colorBrandForeground1);
    text-decoration: none;
    margin-top: 4px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.record-card-link:hover[b-pkh64zcgjv] {
    text-decoration: underline;
}

/* ========================================
   ACTION BUTTONS
   ======================================== */
.action-btn[b-pkh64zcgjv] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.action-btn i[b-pkh64zcgjv] { font-size: 10px; }

.action-btn-primary[b-pkh64zcgjv] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.action-btn-primary:hover[b-pkh64zcgjv] { opacity: 0.9; }

.action-btn-success[b-pkh64zcgjv] {
    background: #388e3c;
    color: #ffffff;
}

.action-btn-success:hover[b-pkh64zcgjv] { background: #2e7d32; }

.action-btn-warning[b-pkh64zcgjv] {
    background: #f57c00;
    color: #ffffff;
}

.action-btn-warning:hover[b-pkh64zcgjv] { background: #e65100; }

.action-btn-danger[b-pkh64zcgjv] {
    background: #d32f2f;
    color: #ffffff;
}

.action-btn-danger:hover[b-pkh64zcgjv] { background: #c62828; }

.action-btn-secondary[b-pkh64zcgjv] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
    border-color: var(--BEC-colorNeutralStroke2);
}

.action-btn-secondary:hover[b-pkh64zcgjv] {
    background: var(--BEC-colorNeutralBackground1Hover);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .side-panel[b-pkh64zcgjv] {
        width: 100vw;
        max-width: 100vw;
        min-width: unset;
    }

    .kpi-cards-row[b-pkh64zcgjv] {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .kpi-card[b-pkh64zcgjv] {
        min-width: 80px;
    }

    .detail-grid[b-pkh64zcgjv] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/MainLayout/VendorRegistration/VendorRegistrationHub.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   VendorRegistrationHub — Scoped CSS
   Design Tokens: --BEC-* (BEC Arabia: #1B365D primary, #2E5090 accent)
   ═══════════════════════════════════════════════════════════════════════════ */

.vr-hub[b-oi0ix3cnqp] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--BEC-bg-surface, #f8f9fc);
    font-family: var(--BEC-font-family, 'Segoe UI', system-ui, sans-serif);
}

/* ─── Loading ─────────────────────────────────────────────────────────────── */
.vr-loading[b-oi0ix3cnqp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 16px;
    color: var(--BEC-text-secondary, #6b7280);
}

.vr-spinner[b-oi0ix3cnqp] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--BEC-border-light, #e5e7eb);
    border-top-color: var(--BEC-primary, #1B365D);
    border-radius: 50%;
    animation: vr-spin-b-oi0ix3cnqp 0.8s linear infinite;
}

@keyframes vr-spin-b-oi0ix3cnqp {
    to { transform: rotate(360deg); }
}

/* ─── Submitted View ──────────────────────────────────────────────────────── */
.vr-submitted[b-oi0ix3cnqp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 48px 24px;
}

.vr-submitted-icon[b-oi0ix3cnqp] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--BEC-success-bg, #dcfce7);
    color: var(--BEC-success, #16a34a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: 24px;
}

.vr-submitted h2[b-oi0ix3cnqp] {
    font-size: 24px;
    color: var(--BEC-text-primary, #1f2937);
    margin-bottom: 8px;
}

.vr-submitted p[b-oi0ix3cnqp] {
    color: var(--BEC-text-secondary, #6b7280);
    max-width: 480px;
    line-height: 1.5;
}

.vr-submitted-badge[b-oi0ix3cnqp] {
    margin-top: 24px;
    padding: 8px 20px;
    background: var(--BEC-warning-bg, #fef3c7);
    color: var(--BEC-warning, #d97706);
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
}

/* ─── Auto-save Hint ──────────────────────────────────────────────────────── */
.vr-autosave-hint[b-oi0ix3cnqp] {
    background: var(--BEC-info-bg, #eff6ff);
    border-bottom: 1px solid var(--BEC-info-border, #bfdbfe);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--BEC-info, #2563eb);
}

.vr-hint-icon[b-oi0ix3cnqp] {
    font-size: 16px;
}

/* ─── Header ──────────────────────────────────────────────────────────────── */
.vr-header[b-oi0ix3cnqp] {
    padding: 24px 32px 16px;
    background: white;
    border-bottom: 1px solid var(--BEC-border-light, #e5e7eb);
}

.vr-header-top[b-oi0ix3cnqp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.vr-header-info[b-oi0ix3cnqp] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.vr-header-info h1[b-oi0ix3cnqp] {
    font-size: 22px;
    font-weight: 700;
    color: var(--BEC-primary, #1B365D);
    margin: 0;
}

.vr-header-brand[b-oi0ix3cnqp] {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.vr-header-logo[b-oi0ix3cnqp] {
    height: 38px;
    width: auto;
    object-fit: contain;
}

.vr-status-badge[b-oi0ix3cnqp] {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.vr-status-in_progress[b-oi0ix3cnqp] {
    background: var(--BEC-info-bg, #eff6ff);
    color: var(--BEC-info, #2563eb);
}

.vr-status-pending_approval[b-oi0ix3cnqp] {
    background: var(--BEC-warning-bg, #fef3c7);
    color: var(--BEC-warning, #d97706);
}

.vr-progress-section[b-oi0ix3cnqp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vr-progress-bar[b-oi0ix3cnqp] {
    flex: 1;
    height: 8px;
    background: var(--BEC-border-light, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
}

.vr-progress-fill[b-oi0ix3cnqp] {
    height: 100%;
    background: linear-gradient(90deg, var(--BEC-primary, #1B365D), var(--BEC-accent, #2E5090));
    border-radius: 4px;
    transition: width 0.4s ease;
}

.vr-progress-text[b-oi0ix3cnqp] {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-text-secondary, #6b7280);
    white-space: nowrap;
}

/* ─── Body: Sidebar + Content ─────────────────────────────────────────────── */
.vr-body[b-oi0ix3cnqp] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ─── Sidebar ─────────────────────────────────────────────────────────────── */
.vr-sidebar[b-oi0ix3cnqp] {
    width: 280px;
    min-width: 280px;
    background: white;
    border-right: 1px solid var(--BEC-border-light, #e5e7eb);
    padding: 24px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.vr-nav-step[b-oi0ix3cnqp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
}

.vr-nav-step:hover[b-oi0ix3cnqp] {
    background: var(--BEC-bg-hover, #f3f4f6);
}

.vr-nav-step.active[b-oi0ix3cnqp] {
    background: var(--BEC-primary-bg, #eef2f7);
}

.vr-nav-step.active .vr-step-circle[b-oi0ix3cnqp] {
    background: var(--BEC-primary, #1B365D);
    color: white;
    border-color: var(--BEC-primary, #1B365D);
}

.vr-nav-step.active .vr-step-label[b-oi0ix3cnqp] {
    font-weight: 600;
    color: var(--BEC-primary, #1B365D);
}

.vr-nav-step.completed .vr-step-circle[b-oi0ix3cnqp] {
    background: var(--BEC-success, #16a34a);
    color: white;
    border-color: var(--BEC-success, #16a34a);
}

.vr-step-circle[b-oi0ix3cnqp] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    border: 2px solid var(--BEC-border-medium, #d1d5db);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--BEC-text-secondary, #6b7280);
    transition: all 0.2s;
}

.vr-step-label[b-oi0ix3cnqp] {
    font-size: 13px;
    color: var(--BEC-text-secondary, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vr-step-connector[b-oi0ix3cnqp] {
    width: 2px;
    height: 12px;
    background: var(--BEC-border-light, #e5e7eb);
    margin-left: 25px;
}

.vr-step-connector.completed[b-oi0ix3cnqp] {
    background: var(--BEC-success, #16a34a);
}

/* ─── Content ─────────────────────────────────────────────────────────────── */
.vr-content[b-oi0ix3cnqp] {
    flex: 1;
    padding: 24px 32px;
    overflow-y: auto;
}

.vr-content-card[b-oi0ix3cnqp] {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--BEC-border-light, #e5e7eb);
    padding: 32px;
    min-height: 400px;
}

/* ─── Action Bar ──────────────────────────────────────────────────────────── */
.vr-action-bar[b-oi0ix3cnqp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    background: white;
    border-top: 1px solid var(--BEC-border-light, #e5e7eb);
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.vr-action-left[b-oi0ix3cnqp],
.vr-action-right[b-oi0ix3cnqp] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.vr-action-center[b-oi0ix3cnqp] {
    flex: 1;
    text-align: center;
}

.vr-last-saved[b-oi0ix3cnqp] {
    font-size: 12px;
    color: var(--BEC-text-muted, #9ca3af);
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.vr-btn[b-oi0ix3cnqp] {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.vr-btn:disabled[b-oi0ix3cnqp] {
    opacity: 0.5;
    cursor: not-allowed;
}

.vr-btn-primary[b-oi0ix3cnqp] {
    background: var(--BEC-primary, #1B365D);
    color: white;
}

.vr-btn-primary:hover:not(:disabled)[b-oi0ix3cnqp] {
    background: var(--BEC-accent, #2E5090);
}

.vr-btn-secondary[b-oi0ix3cnqp] {
    background: var(--BEC-bg-surface, #f3f4f6);
    color: var(--BEC-text-primary, #374151);
    border: 1px solid var(--BEC-border-medium, #d1d5db);
}

.vr-btn-secondary:hover:not(:disabled)[b-oi0ix3cnqp] {
    background: var(--BEC-border-light, #e5e7eb);
}

.vr-btn-save[b-oi0ix3cnqp] {
    background: var(--BEC-success, #16a34a);
    color: white;
    font-size: 15px;
    padding: 12px 24px;
}

.vr-btn-save:hover:not(:disabled)[b-oi0ix3cnqp] {
    background: #15803d;
}

.vr-btn-submit[b-oi0ix3cnqp] {
    background: linear-gradient(135deg, var(--BEC-primary, #1B365D), var(--BEC-accent, #2E5090));
    color: white;
    padding: 12px 28px;
}

.vr-btn-submit:hover:not(:disabled)[b-oi0ix3cnqp] {
    box-shadow: 0 4px 12px rgba(27, 54, 93, 0.3);
}

.vr-btn-spinner[b-oi0ix3cnqp] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: vr-spin-b-oi0ix3cnqp 0.6s linear infinite;
}

/* ─── Toast ───────────────────────────────────────────────────────────────── */
.vr-toast[b-oi0ix3cnqp] {
    position: fixed;
    bottom: 80px;
    right: 32px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 1000;
    animation: vr-slide-up-b-oi0ix3cnqp 0.3s ease;
}

.vr-toast.success[b-oi0ix3cnqp] {
    background: var(--BEC-success-bg, #dcfce7);
    color: var(--BEC-success, #16a34a);
    border: 1px solid #bbf7d0;
}

.vr-toast.error[b-oi0ix3cnqp] {
    background: var(--BEC-error-bg, #fef2f2);
    color: var(--BEC-error, #dc2626);
    border: 1px solid #fecaca;
}

.vr-toast.warning[b-oi0ix3cnqp] {
    background: var(--BEC-warning-bg, #fef3c7);
    color: var(--BEC-warning, #d97706);
    border: 1px solid #fde68a;
}

@keyframes vr-slide-up-b-oi0ix3cnqp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ─── Step Content Shared Styles (::deep for child components) ────────────── */
[b-oi0ix3cnqp] .step-section {
    /* No extra wrapper needed */
}

[b-oi0ix3cnqp] .step-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--BEC-primary, #1B365D);
    margin: 0 0 4px;
}

[b-oi0ix3cnqp] .step-description {
    font-size: 14px;
    color: var(--BEC-text-secondary, #6b7280);
    margin: 0 0 4px;
}

[b-oi0ix3cnqp] .step-title-ar {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--BEC-primary, #1B365D);
    direction: rtl;
    text-align: right;
    margin: 0 0 4px;
    font-family: var(--BEC-font-family, 'Segoe UI', system-ui, sans-serif);
}

[b-oi0ix3cnqp] .step-description-ar {
    display: block;
    font-size: 13px;
    color: var(--BEC-text-secondary, #6b7280);
    direction: rtl;
    text-align: right;
    margin: 0 0 24px;
    font-family: var(--BEC-font-family, 'Segoe UI', system-ui, sans-serif);
}

[b-oi0ix3cnqp] .section-subtitle {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-text-primary, #374151);
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-border-light, #e5e7eb);
}

[b-oi0ix3cnqp] .form-section {
    margin-bottom: 24px;
}

[b-oi0ix3cnqp] .form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

[b-oi0ix3cnqp] .form-group {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
}

[b-oi0ix3cnqp] .form-group-wide {
    flex: 2;
    min-width: 300px;
}

[b-oi0ix3cnqp] .form-group-checkbox {
    justify-content: center;
    min-width: 140px;
}

[b-oi0ix3cnqp] .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-text-primary, #374151);
    margin-bottom: 4px;
}

[b-oi0ix3cnqp] .form-label-ar {
    display: block;
    margin-top: 1px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    direction: rtl;
    font-family: var(--BEC-font-family, 'Segoe UI', system-ui, sans-serif);
}

[b-oi0ix3cnqp] .required {
    color: var(--BEC-error, #dc2626);
}

[b-oi0ix3cnqp] .form-label-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

[b-oi0ix3cnqp] .form-input,
[b-oi0ix3cnqp] .form-select,
[b-oi0ix3cnqp] .form-textarea {
    padding: 8px 12px;
    border: 1px solid var(--BEC-border-medium, #d1d5db);
    border-radius: 6px;
    font-size: 14px;
    color: var(--BEC-text-primary, #374151);
    background: white;
    transition: border-color 0.2s;
}

[b-oi0ix3cnqp] .form-input:focus,
[b-oi0ix3cnqp] .form-select:focus,
[b-oi0ix3cnqp] .form-textarea:focus {
    outline: none;
    border-color: var(--BEC-primary, #1B365D);
    box-shadow: 0 0 0 2px rgba(27, 54, 93, 0.1);
}

[b-oi0ix3cnqp] .form-textarea {
    min-height: 100px;
    resize: vertical;
}

[b-oi0ix3cnqp] .form-textarea-sm {
    min-height: 60px;
}

[b-oi0ix3cnqp] .form-input-file {
    font-size: 13px;
    padding: 6px;
}

[b-oi0ix3cnqp] .form-hint {
    font-size: 12px;
    color: var(--BEC-text-muted, #9ca3af);
    margin-top: 2px;
}

[b-oi0ix3cnqp] .repeating-section {
    margin: 24px 0;
}

[b-oi0ix3cnqp] .repeating-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

[b-oi0ix3cnqp] .repeating-header h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--BEC-text-primary, #374151);
    margin: 0;
}

[b-oi0ix3cnqp] .repeating-card {
    position: relative;
    border: 1px solid var(--BEC-border-light, #e5e7eb);
    border-radius: 8px;
    padding: 16px 16px 8px;
    margin-bottom: 12px;
    background: var(--BEC-bg-surface, #f9fafb);
}

[b-oi0ix3cnqp] .btn-add {
    padding: 6px 14px;
    background: var(--BEC-primary-bg, #eef2f7);
    color: var(--BEC-primary, #1B365D);
    border: 1px solid var(--BEC-primary, #1B365D);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

[b-oi0ix3cnqp] .btn-add:hover {
    background: var(--BEC-primary, #1B365D);
    color: white;
}

[b-oi0ix3cnqp] .btn-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--BEC-error-bg, #fef2f2);
    color: var(--BEC-error, #dc2626);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

[b-oi0ix3cnqp] .btn-remove:hover {
    background: var(--BEC-error, #dc2626);
    color: white;
}

[b-oi0ix3cnqp] .empty-state {
    text-align: center;
    padding: 24px;
    color: var(--BEC-text-muted, #9ca3af);
    font-style: italic;
}

[b-oi0ix3cnqp] .validation-hint {
    padding: 10px 16px;
    background: var(--BEC-warning-bg, #fef3c7);
    border: 1px solid #fde68a;
    border-radius: 6px;
    color: var(--BEC-warning, #d97706);
    font-size: 13px;
    margin-top: 12px;
}

[b-oi0ix3cnqp] .success-hint {
    padding: 10px 16px;
    background: var(--BEC-success-bg, #dcfce7);
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    color: var(--BEC-success, #16a34a);
    font-size: 13px;
    margin-top: 12px;
}

[b-oi0ix3cnqp] .conditional-fields {
    margin-left: 28px;
    padding-left: 12px;
    border-left: 2px solid var(--BEC-border-light, #e5e7eb);
}

[b-oi0ix3cnqp] .document-checklist {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

[b-oi0ix3cnqp] .document-item {
    padding: 16px;
    border: 1px solid var(--BEC-border-light, #e5e7eb);
    border-radius: 8px;
    background: var(--BEC-bg-surface, #f9fafb);
}

[b-oi0ix3cnqp] .declarations-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

[b-oi0ix3cnqp] .declaration-card {
    border: 1px solid var(--BEC-border-light, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
}

[b-oi0ix3cnqp] .declaration-card.accepted {
    border-color: var(--BEC-success, #16a34a);
}

[b-oi0ix3cnqp] .declaration-header {
    padding: 12px 16px;
    background: var(--BEC-bg-surface, #f9fafb);
    border-bottom: 1px solid var(--BEC-border-light, #e5e7eb);
}

[b-oi0ix3cnqp] .declaration-card.accepted .declaration-header {
    background: var(--BEC-success-bg, #dcfce7);
}

[b-oi0ix3cnqp] .declaration-body {
    padding: 16px;
}

[b-oi0ix3cnqp] .declaration-body p {
    font-size: 13px;
    color: var(--BEC-text-secondary, #6b7280);
    line-height: 1.6;
    margin: 0 0 12px;
}

[b-oi0ix3cnqp] .declaration-link {
    display: inline-block;
    color: var(--BEC-primary, #1B365D);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 12px;
}

[b-oi0ix3cnqp] .declaration-link:hover {
    text-decoration: underline;
}

[b-oi0ix3cnqp] .year-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-text-primary, #374151);
    margin: 0 0 8px;
}

/* ─── Mobile Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .vr-body[b-oi0ix3cnqp] {
        flex-direction: column;
    }

    .vr-sidebar[b-oi0ix3cnqp] {
        width: 100%;
        min-width: unset;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 12px;
        border-right: none;
        border-bottom: 1px solid var(--BEC-border-light, #e5e7eb);
        gap: 4px;
    }

    .vr-step-connector[b-oi0ix3cnqp] {
        width: 16px;
        height: 2px;
        margin-left: 0;
    }

    .vr-nav-step[b-oi0ix3cnqp] {
        flex-direction: column;
        padding: 6px 8px;
        min-width: 56px;
    }

    .vr-step-label[b-oi0ix3cnqp] {
        font-size: 10px;
        text-align: center;
    }

    .vr-content[b-oi0ix3cnqp] {
        padding: 16px;
    }

    .vr-content-card[b-oi0ix3cnqp] {
        padding: 20px 16px;
    }

    .vr-action-bar[b-oi0ix3cnqp] {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 16px;
    }

    .vr-action-center[b-oi0ix3cnqp] {
        order: 3;
        width: 100%;
    }

    .vr-header[b-oi0ix3cnqp] {
        padding: 16px;
    }

    .vr-header-info[b-oi0ix3cnqp] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .vr-header-info h1[b-oi0ix3cnqp] {
        font-size: 18px;
    }
}
/* /Components/Pages/MainLayout/VendorsManagement/VendorsManagement.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER
   ======================================== */
.erp-page-container[b-gys1iev3gb] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER
   ======================================== */
.erp-page-header[b-gys1iev3gb] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-gys1iev3gb] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-gys1iev3gb] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-gys1iev3gb] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

.header-right[b-gys1iev3gb] {
    flex-shrink: 0;
}

/* ========================================
   STATS
   ======================================== */
.stats-container[b-gys1iev3gb] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
}

.stat-card[b-gys1iev3gb] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-gys1iev3gb] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-gys1iev3gb] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

/* ========================================
   CATEGORY / STATUS TABS
   ======================================== */
.category-tabs[b-gys1iev3gb] {
    display: flex;
    gap: 4px;
    padding: 4px 24px;
    overflow-x: auto;
}

.category-tab[b-gys1iev3gb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.category-tab:hover[b-gys1iev3gb] {
    background: var(--BEC-colorNeutralBackground1Hover);
    border-color: var(--BEC-colorBrandStroke1);
}

.category-tab.active[b-gys1iev3gb] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-color: var(--BEC-colorBrandBackground);
}

.category-tab .tab-badge[b-gys1iev3gb] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.category-tab.active .tab-badge[b-gys1iev3gb] {
    background: rgba(255, 255, 255, 0.25);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

/* ========================================
   ACTION TOOLBAR
   ======================================== */
.action-toolbar[b-gys1iev3gb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    margin: 4px 24px;
    background: var(--BEC-colorNeutralBackground2, #fafafa);
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusMedium);
    gap: 12px;
    min-height: 40px;
}

.toolbar-left[b-gys1iev3gb] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.toolbar-right[b-gys1iev3gb] {
    display: flex;
    align-items: center;
}

.toolbar-btn[b-gys1iev3gb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2);
    border-radius: var(--BEC-borderRadiusSmall);
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.toolbar-btn i[b-gys1iev3gb] {
    font-size: 11px;
}

.toolbar-btn:hover:not(:disabled)[b-gys1iev3gb] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-color: var(--BEC-colorBrandBackground);
}

.toolbar-btn:disabled[b-gys1iev3gb] {
    opacity: 0.45;
    cursor: not-allowed;
}

.toolbar-search[b-gys1iev3gb] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-gys1iev3gb] {
    position: absolute;
    left: 10px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    pointer-events: none;
    z-index: 1;
}

[b-gys1iev3gb] .e-search-inline .e-input {
    padding-left: 30px !important;
    font-size: 12px !important;
    height: 30px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-gys1iev3gb] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
}

/* ========================================
   LOADING / EMPTY / ERROR STATES
   ======================================== */
.loading-overlay[b-gys1iev3gb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 13px;
}

.empty-state[b-gys1iev3gb],
.error-state[b-gys1iev3gb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    color: var(--BEC-colorNeutralForeground3);
    gap: 12px;
}

.empty-state i[b-gys1iev3gb],
.error-state i[b-gys1iev3gb] {
    font-size: 32px;
    opacity: 0.5;
}

.btn-retry[b-gys1iev3gb] {
    padding: 6px 16px;
    border: 1px solid var(--BEC-colorBrandStroke1);
    border-radius: var(--BEC-borderRadiusMedium);
    background: transparent;
    color: var(--BEC-colorBrandForeground1);
    font-size: 12px;
    cursor: pointer;
}

.btn-retry:hover[b-gys1iev3gb] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

/* ========================================
   STATUS BADGES
   ======================================== */
.status-badge[b-gys1iev3gb] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-submitted[b-gys1iev3gb] {
    background: #e3f2fd;
    color: #1565c0;
}

.status-under_review[b-gys1iev3gb] {
    background: #fff3e0;
    color: #e65100;
}

.status-invited[b-gys1iev3gb] {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-rejected[b-gys1iev3gb] {
    background: #fce4ec;
    color: #c62828;
}

.status-on_hold[b-gys1iev3gb] {
    background: #f5f5f5;
    color: #616161;
}

/* ========================================
   ORIGIN BADGES
   ======================================== */
.origin-badge[b-gys1iev3gb] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.origin-local[b-gys1iev3gb] {
    background: #e8f5e9;
    color: #2e7d32;
}

.origin-foreign[b-gys1iev3gb] {
    background: #e3f2fd;
    color: #1565c0;
}

/* ========================================
   EMAIL LINK
   ======================================== */
.email-link[b-gys1iev3gb] {
    color: var(--BEC-colorBrandForeground1);
    text-decoration: none;
    font-size: 11px;
}

.email-link:hover[b-gys1iev3gb] {
    text-decoration: underline;
}

/* ========================================
   GRID OVERRIDES
   ======================================== */
[b-gys1iev3gb] .e-grid {
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

[b-gys1iev3gb] .e-grid .e-row {
    height: 32px !important;
    cursor: pointer;
}

[b-gys1iev3gb] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

[b-gys1iev3gb] .e-grid .e-row td {
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-gys1iev3gb] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* ========================================
   RIGHT SIDE PANEL
   ======================================== */
.panel-backdrop[b-gys1iev3gb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000;
    animation: fadeIn-b-gys1iev3gb 0.2s ease;
}

@keyframes fadeIn-b-gys1iev3gb {
    from { opacity: 0; }
    to { opacity: 1; }
}

.side-panel[b-gys1iev3gb] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 500px;
    max-width: 90vw;
    background: var(--BEC-colorNeutralBackground1);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    animation: slideInRight-b-gys1iev3gb 0.25s ease;
}

@keyframes slideInRight-b-gys1iev3gb {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.panel-header[b-gys1iev3gb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    flex-shrink: 0;
    gap: 8px;
}

.panel-title-area[b-gys1iev3gb] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.panel-title[b-gys1iev3gb] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-close-btn[b-gys1iev3gb] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.panel-close-btn:hover[b-gys1iev3gb] {
    color: var(--BEC-colorNeutralForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
}

.panel-body[b-gys1iev3gb] {
    flex: 1;
    overflow-y: auto;
    padding: 10px 16px;
}

.panel-footer[b-gys1iev3gb] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ========================================
   DETAIL SECTIONS (compact for side panel)
   ======================================== */
.detail-section[b-gys1iev3gb] {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.detail-section:last-child[b-gys1iev3gb] {
    border-bottom: none;
    margin-bottom: 0;
}

.section-title[b-gys1iev3gb] {
    font-size: 11px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.section-title i[b-gys1iev3gb] {
    font-size: 10px;
}

.detail-grid[b-gys1iev3gb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
}

.detail-field[b-gys1iev3gb] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.detail-field.full-width[b-gys1iev3gb] {
    grid-column: 1 / -1;
}

.field-label[b-gys1iev3gb] {
    font-size: 9px;
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.field-value[b-gys1iev3gb] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground1);
    word-break: break-word;
    line-height: 1.3;
}

.field-value a[b-gys1iev3gb] {
    color: var(--BEC-colorBrandForeground1);
    text-decoration: none;
}

.field-value a:hover[b-gys1iev3gb] {
    text-decoration: underline;
}

/* ========================================
   DOCUMENT LINK
   ======================================== */
.doc-link[b-gys1iev3gb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--BEC-colorBrandForeground1);
    text-decoration: none;
    font-size: 12px;
}

.doc-link:hover[b-gys1iev3gb] {
    text-decoration: underline;
}

.doc-size[b-gys1iev3gb] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 10px;
}

/* ========================================
   ACTION BUTTONS
   ======================================== */
.btn-action-primary[b-gys1iev3gb],
.btn-action-success[b-gys1iev3gb],
.btn-action-warning[b-gys1iev3gb],
.btn-action-danger[b-gys1iev3gb],
.btn-action-secondary[b-gys1iev3gb] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 11px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.btn-action-primary[b-gys1iev3gb] {
    background: var(--BEC-colorBrandBackground);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.btn-action-primary:hover:not(:disabled)[b-gys1iev3gb] {
    opacity: 0.9;
}

.btn-action-success[b-gys1iev3gb] {
    background: #2e7d32;
    color: #fff;
}

.btn-action-success:hover:not(:disabled)[b-gys1iev3gb] {
    background: #1b5e20;
}

.btn-action-warning[b-gys1iev3gb] {
    background: #f57c00;
    color: #fff;
}

.btn-action-warning:hover:not(:disabled)[b-gys1iev3gb] {
    background: #e65100;
}

.btn-action-danger[b-gys1iev3gb] {
    background: #c62828;
    color: #fff;
}

.btn-action-danger:hover:not(:disabled)[b-gys1iev3gb] {
    background: #b71c1c;
}

.btn-action-secondary[b-gys1iev3gb] {
    background: transparent;
    color: var(--BEC-colorNeutralForeground2);
    border-color: var(--BEC-colorNeutralStroke1);
}

.btn-action-secondary:hover[b-gys1iev3gb] {
    background: var(--BEC-colorNeutralBackground1Hover);
}

.btn-action-primary:disabled[b-gys1iev3gb],
.btn-action-success:disabled[b-gys1iev3gb],
.btn-action-warning:disabled[b-gys1iev3gb],
.btn-action-danger:disabled[b-gys1iev3gb] {
    opacity: 0.5;
    cursor: not-allowed;
}

.status-readonly-msg[b-gys1iev3gb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}
/* /Components/Pages/MainLayout/VisitorDataCollection/AdminDashboard/VisitorDashboard.razor.rz.scp.css */
/* ========================================
   BEC Aspire - Visitor Dashboard (Admin)
   Page: /visitor-data-collection/dashboard
   -----------------------------------------------------------------
   Enterprise Portal layout with Fixed Header + Scrollable Content.
   References: BEC_Theme.css Microsoft Fluent Design System
   ======================================== */

/* ========================================
   GLOBAL LAYOUT
   Fixed height container that fills the parent, preventing double scrolls.
   ======================================== */
.visitor-dashboard-container[b-98a8xusbr5] {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Changed from 100vh to avoid fighting parent layout */
    max-height: 100%;
    background-color: var(--BEC-colorNeutralBackground3);
    font-family: var(--BEC-fontFamilyBase);
    color: var(--BEC-colorNeutralForeground1);
    overflow: hidden;
    /* Lock page scroll */
}

/* ========================================
   HEADER SECTION
   Standard Fluent App Header
   ======================================== */
/* ========================================
   HEADER SECTION
   Standard Fluent App Header
   ======================================== */
.dashboard-header[b-98a8xusbr5] {
    background-color: var(--BEC-colorNeutralBackground1);
    padding: var(--BEC-spacingHorizontalL) var(--BEC-spacingHorizontalXXL);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.header-title-section[b-98a8xusbr5] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
}

.header-right-section[b-98a8xusbr5] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
}

.header-icon[b-98a8xusbr5] {
    color: var(--BEC-colorBrandBackground);
}

.page-title[b-98a8xusbr5] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
}

.page-subtitle[b-98a8xusbr5] {
    margin: 0;
    font-size: var(--BEC-fontSizeBase200);
    color: var(--BEC-colorNeutralForeground3);
}

/* ========================================
   SCROLLABLE CONTENT AREA
   The main work area that scrolls independently.
   ======================================== */
/* ========================================
   SCROLLABLE CONTENT AREA
   The main work area that scrolls independently.
   ======================================== */
.dashboard-scroll-area[b-98a8xusbr5] {
    flex: 1;
    overflow: hidden;
    /* Let GRID handle the scroll internally if Height=100% */
    /* If grid doesn't scroll, we might need auto here, but usually Grid with Height=100% needs this to be hidden/relative */
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* CRITICAL for nested flex scrolling */
}

/* ========================================
   HEADER STATISTICS
   Simple numbers in the header
   ======================================== */
.header-stats[b-98a8xusbr5] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalL);
    padding-right: var(--BEC-spacingHorizontalL);
    border-right: 1px solid var(--BEC-colorNeutralStroke1);
}

.header-stat-item[b-98a8xusbr5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.header-stat-value[b-98a8xusbr5] {
    font-size: var(--BEC-fontSizeBase500);
    font-weight: var(--BEC-fontWeightBold);
    line-height: 1;
    color: var(--BEC-colorNeutralForeground1);
}

.header-stat-label[b-98a8xusbr5] {
    font-size: var(--BEC-fontSizeBase100);
    color: var(--BEC-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Status colors for header stats */
.stat-pending[b-98a8xusbr5] {
    color: var(--BEC-colorPaletteYellowForeground1);
}

.stat-reviewed[b-98a8xusbr5] {
    color: var(--BEC-colorBrandForeground1);
}

.stat-contacted[b-98a8xusbr5] {
    color: var(--BEC-colorNeutralForeground1);
}

.stat-completed[b-98a8xusbr5] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.stat-total[b-98a8xusbr5] {
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   HEADER ACTIONS
   ======================================== */
.header-actions[b-98a8xusbr5] {
    display: flex;
    gap: var(--BEC-spacingHorizontalS);
}

/* ========================================
   GRID CONTAINER
   Card in the scroll flow that grows to fill remaining space.
   ======================================== */
.grid-section-card[b-98a8xusbr5] {
    /* Full-screen fit adjustments */
    background: var(--BEC-colorNeutralBackground1);
    /* Remove card styling for full-screen feel */
    box-shadow: none;
    border-radius: 0;

    display: flex;
    flex-direction: column;
    flex: 1;
    /* Grow to fill space */
    min-height: 0;
    /* CRITICAL: Allow flex child to shrink properly */
    overflow: hidden;
    /* Clip content */
}

/* ========================================
   BUTTONS
   Standard Fluent Buttons
   ======================================== */
.toolbar-btn[b-98a8xusbr5] {
    height: 32px;
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    border-radius: var(--BEC-borderRadiusSmall);
}

/* ========================================
   STATUS BADGES
   ======================================== */
.status-badge[b-98a8xusbr5] {
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS);
    border-radius: var(--BEC-borderRadiusXXLarge);
    font-size: var(--BEC-fontSizeBase100);
    font-weight: var(--BEC-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-badge.Pending[b-98a8xusbr5] {
    background: var(--BEC-colorPaletteYellowBackground2);
    color: var(--BEC-colorPaletteYellowForeground1);
}

.status-badge.Reviewed[b-98a8xusbr5] {
    background: var(--BEC-themeLighter);
    color: var(--BEC-themePrimary);
}

.status-badge.Contacted[b-98a8xusbr5] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground1);
}

.status-badge.Completed[b-98a8xusbr5] {
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorPaletteGreenForeground1);
    border: 1px solid var(--BEC-colorPaletteGreenForeground1);
}

/* ========================================
   DIALOG STYLES
   ======================================== */
/* ========================================
   DIALOG STYLES (New Form Layout)
   ======================================== */

.form-container[b-98a8xusbr5] {
    padding: var(--BEC-spacingHorizontalL) 0;
    display: flex;
    flex-direction: column;
    gap: var(--BEC-spacingHorizontalL);
}

/* Sections */
.form-section-title[b-98a8xusbr5] {
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorBrandForeground1);
    margin-bottom: var(--BEC-spacingHorizontalXS);
    border-bottom: 2px solid var(--BEC-colorNeutralStroke1);
    padding-bottom: 4px;
    margin-top: 8px;
}

/* Layout Grid */
.form-row[b-98a8xusbr5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--BEC-spacingHorizontalL);
}

.form-group[b-98a8xusbr5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group.full-width[b-98a8xusbr5] {
    grid-column: span 2;
}

/* Labels */
.e-label[b-98a8xusbr5] {
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 0;
}

/* Controls - Clean Readonly Look */
.form-control.e-input-group[b-98a8xusbr5],
.form-control.e-control-wrapper[b-98a8xusbr5] {
    margin-bottom: 0 !important;
}

/* Notes Area */
.visit-details-box[b-98a8xusbr5] {
    /* Legacy override or removal if unused */
    display: none;
}

.attachment-section[b-98a8xusbr5] {
    margin-top: var(--BEC-spacingHorizontalM);
    padding-top: var(--BEC-spacingHorizontalM);
    border-top: 1px dashed var(--BEC-colorNeutralStroke1);
    display: flex;
    justify-content: flex-end;
}

.dialog-form-content[b-98a8xusbr5] {
    padding: var(--BEC-spacingHorizontalXL) 0;
}

.dialog-form-label[b-98a8xusbr5] {
    display: block;
    margin-bottom: var(--BEC-spacingHorizontalS);
    font-size: var(--BEC-fontSizeBase300);
    font-weight: var(--BEC-fontWeightMedium);
    color: var(--BEC-colorNeutralForeground1);
}

/* ========================================
   ERROR BANNER
   ======================================== */
.error-banner[b-98a8xusbr5] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalS);
    padding: var(--BEC-spacingHorizontalM) var(--BEC-spacingHorizontalXXL);
    background-color: var(--BEC-colorPaletteRedBackground1);
    color: var(--BEC-colorPaletteRedForeground1);
    border-bottom: 1px solid var(--BEC-colorPaletteRedBorderActive);
    font-size: var(--BEC-fontSizeBase300);
    flex-shrink: 0;
}

.dismiss-btn[b-98a8xusbr5] {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--BEC-colorPaletteRedForeground1);
    color: var(--BEC-colorPaletteRedForeground1);
    border-radius: var(--BEC-borderRadiusSmall);
    padding: var(--BEC-spacingHorizontalXXS) var(--BEC-spacingHorizontalS);
    cursor: pointer;
    font-size: var(--BEC-fontSizeBase200);
    font-weight: var(--BEC-fontWeightSemibold);
}

.dismiss-btn:hover[b-98a8xusbr5] {
    background-color: var(--BEC-colorPaletteRedForeground1);
    color: var(--BEC-colorNeutralBackground1);
}

/* ========================================
   RESPONSIVE (< 768px)
   ======================================== */
@media (max-width: 768px) {
    .dashboard-header[b-98a8xusbr5] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--BEC-spacingHorizontalMNudge);
    }

    .stats-grid[b-98a8xusbr5] {
        grid-template-columns: 1fr;
    }

    .dashboard-actions-bar[b-98a8xusbr5] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group--flex[b-98a8xusbr5] {
        flex: unset;
    }

    .detail-grid[b-98a8xusbr5] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/MainLayout/VisitorDataCollection/PublicForm/PublicVisitorForm.razor.rz.scp.css */
/* ========================================
   BEC Aspire - Visitor Public Form (Redesigned)
   Architecture: Mobile-First Flexbox Layout
   Goal: Guaranteed button visibility & Premium UX
   ======================================== */

/* Local scoped variables — moved from :root to avoid global leak.
   Values now aliased from global tokens in _z-index.css & _motion-extended.css */

/* ── RESET & STRUCTURE ────────────────── */
.public-form-container[b-h5g4v4emmb] {
    --bec-transition: var(--BEC-transitionPremium);
    --bec-shadow-premium: var(--BEC-shadowPremium);
    --z-header: var(--BEC-zIndex-Header);
    --z-footer: var(--BEC-zIndex-Footer);
    --z-content: var(--BEC-zIndex-Content);
    height: 100vh;
    height: 100dvh;
    /* Dynamic viewport height for mobile */
    width: 100vw;
    background: var(--BEC-colorNeutralBackground3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* App-like feel */
    font-family: var(--BEC-fontFamilyBase, 'Segoe UI', system-ui, -apple-system, sans-serif);
}

.app-container[b-h5g4v4emmb] {
    /* Desktop: Card Layout, Mobile: Full Screen */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ── SIDEBAR (Mobile Default: HIDDEN) ──────────────── */
.app-sidebar[b-h5g4v4emmb] {
    display: none;
    /* CRITICAL: Hidden by default on mobile */
}

/* ── HEADER (Mobile Only Scope) ──────────────── */
.mobile-header[b-h5g4v4emmb] {
    height: 60px;
    background: var(--BEC-colorNeutralBackground1);
    display: flex;
    /* Always flex, hidden on desktop via media query */
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    z-index: var(--z-header);
}

.mobile-header-logo[b-h5g4v4emmb] {
    font-weight: 700;
    font-size: 18px;
    color: var(--BEC-themePrimary, #0078d4);
    letter-spacing: -0.5px;
}

/* Logo image in mobile header (blue logo on light background) */
.mobile-header-logo-img[b-h5g4v4emmb] {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.mobile-progress-bar[b-h5g4v4emmb] {
    height: 3px;
    background: rgba(0, 0, 0, 0.05);
    width: 100%;
    flex-shrink: 0;
}

.mobile-progress-fill[b-h5g4v4emmb] {
    height: 100%;
    background: var(--BEC-themePrimary, #0078d4);
    transition: width 0.4s ease;
    width: var(--progress, 0%);
}

/* ── MAIN SCROLLABLE CONTENT ────────────────── */
.app-content[b-h5g4v4emmb] {
    flex: 1;
    /* Fills all available space between header and footer */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    scroll-padding-bottom: 100px;
}

/* Wrapper for EditForm to ensure it fills height */
.app-content>form[b-h5g4v4emmb] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── WIZARD STEPS ────────────────── */
.wizard-step[b-h5g4v4emmb] {
    flex: 1;
    padding: 24px 24px 120px 24px;
    /* Bottom padding > Footer height */
    display: none;
    /* Hidden by default */
    flex-direction: column;
    animation: fadeIn-b-h5g4v4emmb 0.4s ease;
    max-width: 600px;
    margin: 0 auto;
    /* Center on large screens */
    width: 100%;
}

.wizard-step.active[b-h5g4v4emmb] {
    display: flex;
}

@keyframes fadeIn-b-h5g4v4emmb {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Typography */
h1[b-h5g4v4emmb] {
    font-size: 28px;
    font-weight: 800;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
    letter-spacing: -1px;
}

h2[b-h5g4v4emmb] {
    font-size: 24px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1);
    margin-bottom: 8px;
}

p.subtitle[b-h5g4v4emmb] {
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground3);
    line-height: 1.5;
    margin-bottom: 32px;
}

/* ── SELECTION CARDS ────────────────── */
.selection-grid[b-h5g4v4emmb] {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile Default */
    gap: 16px;
    width: 100%;
}

.selection-card[b-h5g4v4emmb] {
    background: var(--BEC-colorNeutralBackground1);
    border: 1px solid var(--BEC-colorNeutralStroke1);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.selection-card:active[b-h5g4v4emmb] {
    transform: scale(0.98);
    background: var(--BEC-colorNeutralBackground2);
}

.selection-card.selected[b-h5g4v4emmb] {
    border-color: var(--BEC-themePrimary, #0078d4);
    background: var(--BEC-colorBrandBackground1);
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}

.card-title[b-h5g4v4emmb] {
    font-weight: 600;
    font-size: 16px;
    color: var(--BEC-colorNeutralForeground1);
}

.card-subtitle[b-h5g4v4emmb] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    line-height: 1.4;
}

/* ── INPUT GROUPS ────────────────── */
.input-group[b-h5g4v4emmb] {
    margin-bottom: 20px;
    position: relative;
}

/* Syncfusion Override for Premium Feel */
.e-float-input.e-control-wrapper[b-h5g4v4emmb] {
    background: var(--BEC-colorNeutralBackground1) !important;
    border-radius: 12px !important;
    border: 1px solid var(--BEC-colorNeutralStroke2) !important;
    padding: 8px 16px 4px !important;
    /* Adjust for floating label */
    height: 56px !important;
    box-shadow: none !important;
    transition: border-color 0.2s;
}

.e-float-input.e-control-wrapper.e-input-focus[b-h5g4v4emmb] {
    border-color: var(--BEC-themePrimary, #0078d4) !important;
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.1) !important;
}

/* Hide Syncfusion default border lines to use our rounded wrapper */
.e-float-input.e-control-wrapper .e-float-line[b-h5g4v4emmb],
.e-float-input.e-control-wrapper .e-float-text-overflow[b-h5g4v4emmb] {
    display: none !important;
}

/* Validation */
.e-input-group.e-error[b-h5g4v4emmb] {
    border-color: var(--BEC-colorPaletteRedForeground1) !important;
    animation: shake-b-h5g4v4emmb 0.4s;
}

.validation-message[b-h5g4v4emmb] {
    color: var(--BEC-colorPaletteRedForeground1);
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
    margin-left: 4px;
}

@keyframes shake-b-h5g4v4emmb {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

/* ── FIXED ACTION BAR ────────────────── */
.fixed-action-bar[b-h5g4v4emmb] {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 16px 24px;
    /* Fixed Positioning Logic */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-footer);
    display: flex;
    gap: 12px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    /* Safe Area for latest iPhones */
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.action-btn[b-h5g4v4emmb] {
    flex: 1;
    height: 50px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 16px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

.action-btn:active[b-h5g4v4emmb] {
    transform: scale(0.96);
}

/* Base Button Style (Missing previously) */
.btn[b-h5g4v4emmb] {
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    border-radius: 25px;
    /* Unified Roundness */
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    height: 48px;
}

.btn-primary[b-h5g4v4emmb] {
    background: var(--BEC-themePrimary, #0078d4);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

.btn-secondary[b-h5g4v4emmb] {
    background: var(--BEC-colorNeutralBackground6);
    color: var(--BEC-colorNeutralForeground2);
}

.btn-success[b-h5g4v4emmb] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: var(--BEC-colorNeutralForegroundOnBrand);
}

/* ── DESKTOP ONLY OVERRIDES ──────────────── */
@media (min-width: 900px) {
    .public-form-container[b-h5g4v4emmb] {
        padding: 40px;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--BEC-colorNeutralBackground3) 0%, var(--BEC-colorNeutralBackground6) 100%);
    }

    .app-container[b-h5g4v4emmb] {
        max-width: 1000px;
        height: 80vh;
        max-height: 800px;
        background: var(--BEC-colorNeutralBackground1);
        border-radius: 24px;
        box-shadow: var(--bec-shadow-premium);
        flex-direction: row;
        overflow: hidden;
    }

    /* Sidebar */
    .app-sidebar[b-h5g4v4emmb] {
        width: 320px;
        background: var(--BEC-layoutBlueDark);
        padding: 40px;
        color: var(--BEC-colorNeutralForegroundOnBrand);
        padding: 40px;
        color: var(--BEC-colorNeutralForegroundOnBrand);
        display: flex;
        /* CRITICAL: Reveal sidebar on desktop */


        flex-direction: column;
        justify-content: space-between;
    }

    .sidebar-bg-deco[b-h5g4v4emmb],
    .sidebar-logo[b-h5g4v4emmb],
    .sidebar-stepper[b-h5g4v4emmb],
    .sidebar-footer[b-h5g4v4emmb] {
        display: block;
    }

    .mobile-header[b-h5g4v4emmb],
    .mobile-progress-bar[b-h5g4v4emmb] {
        display: none !important;
    }

    .app-content[b-h5g4v4emmb] {
        padding: 0;
    }

    .wizard-step[b-h5g4v4emmb] {
        padding: 60px 80px;
        max-width: none;
    }

    .selection-grid[b-h5g4v4emmb] {
        grid-template-columns: 1fr 1fr;
    }

    /* Footer on Desktop */
    .fixed-action-bar[b-h5g4v4emmb] {
        position: absolute;
        /* Contain inside the card */
        width: 100%;
        border-radius: 0 0 24px 0;
    }
}

/* ── HELPERS ──────────────── */
/* ── HELPERS & UTILS ──────────────── */
.spacer-md[b-h5g4v4emmb] {
    height: 24px;
}



/* Upload Area - Label for Click Trigger */
.upload-area[b-h5g4v4emmb] {
    border: 2px dashed var(--BEC-colorNeutralStroke2);
    border-radius: 16px;
    padding: 40px;
    min-height: 100px;
    text-align: center;
    background: var(--BEC-colorNeutralBackground2);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    /* Context for absolute input */
    overflow: hidden;
}

.upload-text-title[b-h5g4v4emmb] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1);
    margin: 0 0 4px;
}

.upload-text-subtitle[b-h5g4v4emmb] {
    font-size: 13px;
    color: var(--BEC-colorNeutralForeground3);
    line-height: 1.4;
    margin: 0;
}

.upload-icon[b-h5g4v4emmb] {
    margin-bottom: 12px;
    color: var(--BEC-themePrimary, #0078d4);
}

.file-input-hidden[b-h5g4v4emmb] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0 !important;
    /* FORCE HIDDEN */
    overflow: hidden;
    cursor: pointer;
    z-index: 10;
}

/* Specific target for the input element itself in case of Blazor wrappers */
[b-h5g4v4emmb] input[type="file"].file-input-hidden {
    opacity: 0 !important;
}

.upload-area:hover[b-h5g4v4emmb] {
    border-color: var(--BEC-themePrimary, #0078d4);
    background: var(--BEC-colorBrandBackground1);
}

/* File Preview */
.file-preview[b-h5g4v4emmb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--BEC-colorBrandBackground1);
    border-radius: 12px;
    border: 1px solid var(--BEC-colorBrandBackground2);
}

.btn-icon-remove[b-h5g4v4emmb] {
    background: none;
    border: none;
    color: var(--BEC-colorPaletteRedForeground1);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: 0.2s;
    border-radius: 50%;
}

.btn-icon-remove:hover[b-h5g4v4emmb] {
    opacity: 1;
    transform: scale(1.1);
}

/* Start Button Large */
.btn-lg[b-h5g4v4emmb] {
    height: 56px;
    font-size: 18px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
    /* Make sure it matches other buttons */
    border-radius: 28px !important;
}

/* Success Page Premium */
.success-container[b-h5g4v4emmb] {
    text-align: center;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.success-icon[b-h5g4v4emmb] {
    width: 96px;
    height: 96px;
    background: var(--BEC-colorPaletteGreenBackground1);
    color: var(--BEC-colorPaletteGreenForeground1);
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 32px;
    font-size: 48px;
    box-shadow: 0 10px 30px -10px rgba(22, 101, 52, 0.3);
    animation: popIn-b-h5g4v4emmb 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn-b-h5g4v4emmb {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.success-subtitle[b-h5g4v4emmb] {
    font-size: 18px;
    color: var(--BEC-colorNeutralForeground2);
    margin-bottom: 8px;
}

.success-thankyou[b-h5g4v4emmb] {
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground3);
    margin-bottom: 48px;
}

.btn--auto-width[b-h5g4v4emmb] {
    min-width: 200px;
    width: auto;
    padding: 0 32px;
}

/* Side Bar Premium Polish */
.app-sidebar[b-h5g4v4emmb] {
    background: linear-gradient(135deg, var(--BEC-themeDarker) 0%, var(--BEC-themeDark) 100%);
    position: relative;
    overflow: hidden;
}

.sidebar-bg-deco[b-h5g4v4emmb] {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* White logo image for dark sidebar background */
.sidebar-logo-img[b-h5g4v4emmb] {
    height: 80px;
    width: auto;
    object-fit: contain;
    margin-bottom: 12px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.logo-brand[b-h5g4v4emmb] {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 4px;
}

.logo-tagline[b-h5g4v4emmb] {
    font-size: 14px;
    opacity: 0.6;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
}

.sidebar-stepper[b-h5g4v4emmb] {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.stepper-item[b-h5g4v4emmb] {
    display: flex;
    align-items: center;
    gap: 16px;
    opacity: 0.4;
    transition: 0.3s;
}

.stepper-item.active[b-h5g4v4emmb] {
    opacity: 1;
}

.stepper-item.completed[b-h5g4v4emmb] {
    opacity: 1;
}

.stepper-item.completed .step-indicator[b-h5g4v4emmb] {
    background: var(--BEC-colorPaletteGreenForeground1);
    color: var(--BEC-colorNeutralForegroundOnBrand);
    border-color: var(--BEC-colorPaletteGreenForeground1);
    content: "✓";
}

.step-indicator[b-h5g4v4emmb] {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 14px;
    transition: 0.3s;
}

.stepper-item.active .step-indicator[b-h5g4v4emmb] {
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-themeDarker);
    border-color: var(--BEC-colorNeutralBackground1);
    transform: scale(1.1);
}

.step-text-title[b-h5g4v4emmb] {
    font-weight: 600;
    font-size: 16px;
}

.step-text-subtitle[b-h5g4v4emmb] {
    font-size: 13px;
    opacity: 0.7;
}

.sidebar-footer[b-h5g4v4emmb] {
    font-size: 12px;
    opacity: 0.3;
    margin-top: auto;
}

/* ── ERROR BANNER ──────────────── */
.form-error-banner[b-h5g4v4emmb] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    background: var(--BEC-colorPaletteRedBackground1);
    border: 1px solid var(--BEC-colorPaletteRedBackground2);
    border-radius: 12px;
    color: var(--BEC-colorPaletteRedForeground1);
    font-size: 14px;
    font-weight: 500;
    animation: fadeIn-b-h5g4v4emmb 0.3s ease;
}

.form-error-banner .error-icon[b-h5g4v4emmb] {
    font-size: 18px;
    flex-shrink: 0;
}

/* ── UPLOAD WARNING ──────────────── */
.upload-warning[b-h5g4v4emmb] {
    color: var(--BEC-colorPaletteYellowForeground1);
    background: var(--BEC-colorPaletteYellowBackground1);
    border: 1px solid var(--BEC-colorPaletteYellowBackground2);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 24px;
    text-align: center;
}

/* =========================================================
   MOBILE UX OPTIMISATION
   Prevents iOS Safari auto-zoom on input focus (< 16px),
   enforces WCAG touch-target sizing, and polishes
   small-screen interactions.
   ========================================================= */

/* ── 1. iOS Auto-Zoom Prevention ──────────────────────────── */
/* iOS Safari zooms the page when an input with font-size < 16px
   receives focus.  Force 16px on every interactive element.     */
[b-h5g4v4emmb] input,
[b-h5g4v4emmb] select,
[b-h5g4v4emmb] textarea,
[b-h5g4v4emmb] .e-input,
[b-h5g4v4emmb] .e-float-input input,
[b-h5g4v4emmb] .e-float-input textarea,
[b-h5g4v4emmb] .e-dropdownlist .e-input,
[b-h5g4v4emmb] .e-numerictextbox input,
[b-h5g4v4emmb] .e-multiselect .e-input,
[b-h5g4v4emmb] .e-input-group input {
    font-size: 16px !important;
}

/* Syncfusion float-label text — keep readable but not zoom-triggering */
[b-h5g4v4emmb] .e-float-input label.e-float-text,
[b-h5g4v4emmb] .e-float-input.e-control-wrapper label.e-float-text {
    font-size: 14px !important;
}

/* ── 2. Touch-Target Enforcement (WCAG 2.5.8 — 44 × 44 px) ─ */
[b-h5g4v4emmb] .e-dropdownlist .e-list-item,
[b-h5g4v4emmb] .e-dropdownbase .e-list-item,
[b-h5g4v4emmb] .e-popup .e-list-item {
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}

/* ── 3. Mobile-specific refinements (≤ 600 px) ───────────── */
@media (max-width: 600px) {
    /* Tighter wizard padding for small screens */
    .wizard-step[b-h5g4v4emmb] {
        padding: 20px 16px 130px 16px;
    }

    /* Slightly narrower action-bar horizontal padding */
    .fixed-action-bar[b-h5g4v4emmb] {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Ensure cards don't cause horizontal scroll */
    .selection-card[b-h5g4v4emmb] {
        padding: 20px 16px;
    }

    /* Larger file-preview row for fat-finger removal */
    .file-preview[b-h5g4v4emmb] {
        padding: 14px;
        gap: 10px;
    }

    /* Upload area — shorter padding on small screens */
    .upload-area[b-h5g4v4emmb] {
        padding: 28px 16px;
        min-height: 80px;
    }

    /* Readable body text baseline */
    p[b-h5g4v4emmb], span[b-h5g4v4emmb], label[b-h5g4v4emmb] {
        line-height: 1.45;
    }

    /* Validation message bump */
    .validation-message[b-h5g4v4emmb] {
        font-size: 13px;
    }

    /* Success container tighter */
    .success-container[b-h5g4v4emmb] {
        padding: 40px 16px;
    }
}

/* ── 4. Keyboard-open compensation (small-height viewports) ─ */
@media (max-height: 500px) {
    .fixed-action-bar[b-h5g4v4emmb] {
        position: sticky;
        box-shadow: none;
    }

    .wizard-step[b-h5g4v4emmb] {
        padding-bottom: 24px;
    }
}

/* ================= MIGRATED INLINE STYLES ================= */

.pvf-validation-centered[b-h5g4v4emmb] {
    text-align: center;
}
/* /Components/Pages/MainLayout/WebsiteLeads/Leads.razor.rz.scp.css */
/* ========================================
   PAGE CONTAINER - Main Wrapper
   ======================================== */
.erp-page-container[b-7aemtlxv9z] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ========================================
   PAGE HEADER - ULTRA CLEAN (NO BOX, NO BORDER)
   ======================================== */
.erp-page-header[b-7aemtlxv9z] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
    min-height: 36px;
}

.header-left[b-7aemtlxv9z] {
    flex: 1;
    display: flex;
    align-items: center;
}

.page-title[b-7aemtlxv9z] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    margin: 0;
    line-height: 1;
}

.page-title i[b-7aemtlxv9z] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Help Icon Button */
.help-icon-btn[b-7aemtlxv9z] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    border-radius: var(--BEC-borderRadiusSmall);
}

.help-icon-btn:hover[b-7aemtlxv9z] {
    color: var(--BEC-colorBrandForeground1);
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.05);
}

.help-icon-btn:active[b-7aemtlxv9z] {
    transform: scale(0.98);
}

.header-right[b-7aemtlxv9z] {
    flex-shrink: 0;
}

/* ========================================
   STATS CONTAINER - ULTRA CLEAN (NO BORDER)
   ======================================== */
.stats-container[b-7aemtlxv9z] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.stat-card[b-7aemtlxv9z] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-value[b-7aemtlxv9z] {
    font-size: 14px;
    font-weight: var(--BEC-fontWeightBold);
    color: var(--BEC-colorBrandForeground1);
    line-height: 1;
}

.stat-label[b-7aemtlxv9z] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    font-weight: var(--BEC-fontWeightMedium);
    line-height: 1;
}

.stat-divider[b-7aemtlxv9z] {
    width: 1px;
    height: 16px;
    background: var(--BEC-colorNeutralStroke2);
}

/* ========================================
   PAGE CONTENT
   ======================================== */
.erp-page-content[b-7aemtlxv9z] {
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
}

/* ========================================
   ACTION TOOLBAR STYLING - MICROSOFT STYLE
   ======================================== */

/* Toolbar Container - MICROSOFT STYLE (ULTRA COMPACT) */
[b-7aemtlxv9z] .e-toolbar.e-control {
    position: sticky !important;
    top: 36px !important;
    z-index: 90 !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    box-shadow: none !important;
    padding: 2px 20px !important;
    min-height: 28px !important;
    margin: 3px 24px 1px 24px !important;
}

/* Toolbar Items */
[b-7aemtlxv9z] .e-toolbar .e-toolbar-item {
    margin: 0 2px !important;
}

/* Right-aligned items (Search) */
[b-7aemtlxv9z] .e-toolbar .e-toolbar-item[align="Right"] {
    margin-right: 0 !important;
}

/* Toolbar button base styling - MICROSOFT STYLE (ZERO VERTICAL PADDING) */
[b-7aemtlxv9z] .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 0 8px !important;
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    font-size: 12px !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    gap: 5px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Button Icons - MICROSOFT STYLE */
[b-7aemtlxv9z] .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 11px !important;
    margin-right: 0 !important;
    color: var(--BEC-colorNeutralForeground2) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Button Text - MICROSOFT STYLE */
[b-7aemtlxv9z] .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--BEC-colorNeutralForeground2) !important;
    font-weight: var(--BEC-fontWeightMedium) !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover Effect */
[b-7aemtlxv9z] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) {
    background: transparent !important;
}

[b-7aemtlxv9z] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-icons,
[b-7aemtlxv9z] .e-toolbar .e-toolbar-item .e-tbar-btn:hover:not(.e-disabled) .e-tbar-btn-text {
    color: var(--BEC-colorBrandBackground) !important;
}

/* Disabled Button State */
[b-7aemtlxv9z] .e-toolbar .e-toolbar-item.e-overlay {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Toolbar Separator - MICROSOFT STYLE */
[b-7aemtlxv9z] .e-toolbar .e-separator {
    background: var(--BEC-colorBrandBackground) !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 4px !important;
}

/* Make grid fill remaining page content */
.erp-page-content[b-7aemtlxv9z] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 20px 30px 20px;
    position: relative;
    overflow: hidden;
}

/* Grid container to fill available space */
[b-7aemtlxv9z] .e-grid {
    display: flex;
    flex-direction: column;
    border-radius: var(--BEC-borderRadiusMedium) !important;
    overflow: hidden;
}

/* Compact row height and font size */
[b-7aemtlxv9z] .e-grid .e-row {
    height: 32px !important;
}

[b-7aemtlxv9z] .e-grid .e-row td {
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

[b-7aemtlxv9z] .e-grid .e-gridheader .e-headercell {
    height: 32px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: var(--BEC-fontWeightSemibold) !important;
}

/* Grid content scrolls internally */
[b-7aemtlxv9z] .e-grid .e-gridcontent {
    overflow-y: auto;
}

/* ========================================
   SEARCH TEXTBOX IN TOOLBAR - MICROSOFT STYLE
   ======================================== */
[b-7aemtlxv9z] .e-toolbar .e-textbox.e-input-group {
    border-radius: var(--BEC-borderRadiusSmall) !important;
    border: 1px solid var(--BEC-colorNeutralStroke1) !important;
    background: var(--BEC-colorNeutralBackground1) !important;
    min-height: 24px !important;
}

[b-7aemtlxv9z] .e-toolbar .e-textbox.e-input-group .e-input {
    font-size: 12px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
}

[b-7aemtlxv9z] .e-toolbar .e-textbox.e-input-group:focus-within {
    border-color: var(--BEC-colorBrandBackground) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1) !important;
}

/* ========================================
   LOADING OVERLAY
   ======================================== */
.loading-overlay[b-7aemtlxv9z] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground2);
}

/* ========================================
   CUSTOM GRID CELL STYLING
   ======================================== */

/* Lead Name Cell */
.lead-name[b-7aemtlxv9z] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.name-icon[b-7aemtlxv9z] {
    color: var(--BEC-colorBrandForeground1);
    font-size: 14px;
}

/* Lead Email Cell */
.lead-email[b-7aemtlxv9z] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.email-icon[b-7aemtlxv9z] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
}

.email-link[b-7aemtlxv9z] {
    color: var(--BEC-colorBrandForeground1);
    text-decoration: none;
    transition: all 0.2s ease;
}

.email-link:hover[b-7aemtlxv9z] {
    text-decoration: underline;
    color: var(--BEC-colorBrandForeground2);
}

/* Lead Date Cell */
.lead-date[b-7aemtlxv9z] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.date-icon[b-7aemtlxv9z] {
    color: var(--BEC-colorNeutralForeground3);
    font-size: 12px;
}

/* ========================================
   ACTION BUTTONS
   ======================================== */
.action-buttons[b-7aemtlxv9z] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.action-btn[b-7aemtlxv9z] {
    background: transparent;
    border: none;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-btn:hover[b-7aemtlxv9z] {
    background: var(--BEC-colorNeutralBackground1Hover);
    transform: scale(1.1);
}

.action-btn:active[b-7aemtlxv9z] {
    transform: scale(0.95);
}

.view-btn:hover[b-7aemtlxv9z] {
    color: var(--BEC-colorBrandForeground1);
}

.email-btn:hover[b-7aemtlxv9z] {
    color: #10a37f;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .erp-page-header[b-7aemtlxv9z] {
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 16px;
    }

    .header-right[b-7aemtlxv9z] {
        width: 100%;
    }

    .stats-container[b-7aemtlxv9z] {
        width: 100%;
        justify-content: space-between;
    }

    [b-7aemtlxv9z] .e-toolbar.e-control {
        margin: 3px 16px 1px 16px !important;
    }

    .erp-page-content[b-7aemtlxv9z] {
        padding: 10px 16px 20px 16px;
    }
}

/* ========================================
   GRID ALTERNATING ROW COLORS
   ======================================== */
[b-7aemtlxv9z] .e-grid .e-row:nth-child(even) {
    background: var(--BEC-colorNeutralBackground2);
}

[b-7aemtlxv9z] .e-grid .e-row:hover {
    background: var(--BEC-colorNeutralBackground1Hover) !important;
}

/* ========================================
   GRID SELECTION HIGHLIGHT
   ======================================== */
[b-7aemtlxv9z] .e-grid .e-row.e-selectionbackground {
    background: var(--BEC-colorBrandBackground2) !important;
}

[b-7aemtlxv9z] .e-grid .e-row.e-selectionbackground:hover {
    background: var(--BEC-colorBrandBackground2Hover) !important;
}

/* ========================================
   BROCHURE MANAGEMENT PANEL
   ======================================== */
.brochure-panel[b-7aemtlxv9z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 24px;
    background: var(--BEC-colorNeutralBackground1);
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
    gap: 16px;
}

.brochure-panel-info[b-7aemtlxv9z] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brochure-icon[b-7aemtlxv9z] {
    font-size: 18px;
    color: #d32f2f;
}

.brochure-meta[b-7aemtlxv9z] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brochure-label[b-7aemtlxv9z] {
    font-size: 12px;
    font-weight: var(--BEC-fontWeightSemibold);
    color: var(--BEC-colorNeutralForeground1);
    line-height: 1;
}

.brochure-status[b-7aemtlxv9z] {
    font-size: 10px;
    color: var(--BEC-colorNeutralForeground3);
    line-height: 1;
}

.brochure-panel-actions[b-7aemtlxv9z] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.brochure-no-url[b-7aemtlxv9z] {
    font-size: 11px;
    color: var(--BEC-colorNeutralForeground3);
    font-style: italic;
}

.btn-brochure[b-7aemtlxv9z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    line-height: 1;
    text-decoration: none;
}

.btn-brochure-view[b-7aemtlxv9z] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
    border-color: var(--BEC-colorBrandStroke2);
}

.btn-brochure-view:hover[b-7aemtlxv9z] {
    background: var(--BEC-colorBrandBackground2Hover);
    color: var(--BEC-colorBrandForeground1);
}

.btn-brochure-upload[b-7aemtlxv9z] {
    background: var(--BEC-colorNeutralBackground1);
    color: var(--BEC-colorNeutralForeground2);
    border-color: var(--BEC-colorNeutralStroke1);
}

.btn-brochure-upload:hover:not(:disabled)[b-7aemtlxv9z] {
    background: var(--BEC-colorNeutralBackground1Hover);
    color: var(--BEC-colorNeutralForeground1);
    border-color: var(--BEC-colorNeutralStroke1Hover);
}

.btn-brochure-upload:disabled[b-7aemtlxv9z] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   CATEGORY FILTER TABS
   ======================================== */
.category-tabs[b-7aemtlxv9z] {
    display: flex;
    gap: 4px;
    padding: 4px 24px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2);
}

.category-tab[b-7aemtlxv9z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 12px;
    font-weight: var(--BEC-fontWeightMedium);
    cursor: pointer;
    border-radius: var(--BEC-borderRadiusSmall);
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

.category-tab:hover[b-7aemtlxv9z] {
    background: var(--BEC-colorNeutralBackground1Hover);
    color: var(--BEC-colorNeutralForeground1);
}

.category-tab.active[b-7aemtlxv9z] {
    color: var(--BEC-colorBrandForeground1);
    border-bottom-color: var(--BEC-colorBrandBackground);
    font-weight: var(--BEC-fontWeightSemibold);
}

.tab-badge[b-7aemtlxv9z] {
    background: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.category-tab.active .tab-badge[b-7aemtlxv9z] {
    background: var(--BEC-colorBrandBackground2);
    color: var(--BEC-colorBrandForeground1);
}

.tab-unread[b-7aemtlxv9z] {
    background: #d13438;
    color: #fff;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 10px;
    font-weight: var(--BEC-fontWeightBold);
}

/* ========================================
   UNREAD DOT INDICATOR
   ======================================== */
.unread-dot[b-7aemtlxv9z] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--BEC-colorBrandBackground);
}

/* ========================================
   CATEGORY BADGE IN GRID
   ======================================== */
.category-badge[b-7aemtlxv9z] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: var(--BEC-fontWeightSemibold);
}

.cat-contact[b-7aemtlxv9z] {
    background: #e8f4fd;
    color: #0078d4;
}

.cat-vendorregistration[b-7aemtlxv9z] {
    background: #fff4e5;
    color: #c87000;
}

.cat-brochuredownload[b-7aemtlxv9z] {
    background: #e8f5e9;
    color: #2e7d32;
}

/* ========================================
   ACTION BUTTONS (MARK READ / DELETE)
   ======================================== */
.btn-action[b-7aemtlxv9z] {
    background: transparent;
    border: none;
    padding: 4px 6px;
    border-radius: var(--BEC-borderRadiusSmall);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.btn-read[b-7aemtlxv9z] {
    color: var(--BEC-colorBrandForeground1);
}

.btn-read:hover[b-7aemtlxv9z] {
    background: var(--BEC-colorBrandBackground2);
}

/* Unread stat highlight */
.stat-value.unread[b-7aemtlxv9z] {
    color: #d13438;
}
/* /Components/Pages/MainLayoutLanding/MainLayoutLandingPage.razor.rz.scp.css */
/* Global Styles */
.html[b-jnowud3r9u],
.body[b-jnowud3r9u] {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    width: 100vw;
    min-width: 100vw;
    height: 100vh;
    min-height: 100vh;
}

.logo img[b-jnowud3r9u] {
    height: 110px;
    width: auto;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

.form-group select[b-jnowud3r9u] {
    position: relative;
    z-index: 10;
}

.form-group[b-jnowud3r9u] {
    position: relative;
    z-index: 5;
}

/* Animations */
@keyframes fadeInUp-b-jnowud3r9u {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* General Reset */
*[b-jnowud3r9u] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.body[b-jnowud3r9u] {
    font-family: 'Lato', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bec-bg);
    height: 100vh;
    color: var(--bec-info);
}

/* Container Styles */
.container[b-jnowud3r9u] {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 50px;
}

/* Header Styles */
.header[b-jnowud3r9u] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.header .container[b-jnowud3r9u] {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo[b-jnowud3r9u] {
    display: flex;
    align-items: center;
}

.logo img[b-jnowud3r9u] {
    height: 110px;
    width: auto;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

/* Navigation Styles */
.nav ul[b-jnowud3r9u] {
    display: flex;
    list-style: none;
    gap: 48px;
}

.nav a[b-jnowud3r9u] {
    color: var(--bec-text-white);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
    transition: color 0.3s;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.nav a:hover[b-jnowud3r9u] {
    color: var(--bec-primary);
}

/* Button Styles */
.auth-buttons[b-jnowud3r9u] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.login-btn[b-jnowud3r9u],
.login-btn.active[b-jnowud3r9u],
.signup-btn[b-jnowud3r9u],
.nav-link.login-btn[b-jnowud3r9u],
.nav-link.login-btn.active[b-jnowud3r9u] {
    padding: 8px 20px;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    height: 36px;
    text-transform: uppercase;
    font-size: 13px;
    background-color: #2B3484;
    color: #FFFFFF !important;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-decoration: none !important;
}


.login-btn:hover[b-jnowud3r9u],
.signup-btn:hover[b-jnowud3r9u] {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    background-color: #384099;
}

/* Hero Section */
.hero[b-jnowud3r9u] {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    color: var(--bec-text-white);
    padding: 20px;
    overflow: hidden;
}

/* Carousel Styles */
.hero-carousel[b-jnowud3r9u] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.carousel-item[b-jnowud3r9u] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 1;
}

.carousel-item.active[b-jnowud3r9u] {
    opacity: 1;
    z-index: 2;
}

.hero-image[b-jnowud3r9u] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
}


.grid-effect[b-jnowud3r9u] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
    z-index: 3;
}

.hero-gradient[b-jnowud3r9u] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    z-index: 4;
}

.hero .container[b-jnowud3r9u] {
    position: relative;
    z-index: 5;
    width: 100%;
    padding-left: 50px;
    margin-left: 0;
}

.hero-content[b-jnowud3r9u] {
    padding-bottom: 80px;
    max-width: 800px;
    position: relative;
    z-index: 5;
    text-align: left;
    margin-left: 0;
}

.hero-headline[b-jnowud3r9u],
.hero-subheadline[b-jnowud3r9u] {
    outline: none;
    border: none;
}

.hero-headline[b-jnowud3r9u],
.hero-subheadline[b-jnowud3r9u] {
    will-change: opacity, transform;
    transform: translateZ(0);
}


.hero-text[b-jnowud3r9u] {
    text-align: left;
    margin-left: 0;
    width: 100%;
    max-width: 700px;
}

.hero-headline[b-jnowud3r9u] {
    font-family: 'Lato', sans-serif;
    font-weight: 800;
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 20px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: left !important;
}

.hero-subheadline[b-jnowud3r9u] {
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    text-align: left !important;
}

/* Modal Styles */
.modal[b-jnowud3r9u] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(103, 103, 107, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

.modal.active[b-jnowud3r9u] {
    opacity: 1;
    visibility: visible;
}

.modal-content[b-jnowud3r9u] {
    background-color: white;
    width: 90%;
    max-width: 800px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    transform: scale(0.96) translateZ(0);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    height: 450px;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.login-modal-content[b-jnowud3r9u] {
    position: relative;
}

.login-modal-content[b-jnowud3r9u] {
    grid-template-columns: 1.5fr 1fr;
    height: auto;
    position: relative;
    min-height: 450px;
}

.login-modal-content > .login-section[b-jnowud3r9u] {
    grid-column: 1;
    grid-row: 1;
}

.modal.active .modal-content[b-jnowud3r9u] {
    transform: scale(1) translateZ(0);
}

.modal-close[b-jnowud3r9u] {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: #999;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.modal-close:hover[b-jnowud3r9u] {
    background-color: rgba(0, 0, 0, 0.05);
    color: #333;
}

.modal-close:focus[b-jnowud3r9u] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(43, 52, 132, 0.2);
}

.login-section[b-jnowud3r9u] {
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    position: relative;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-15px) translateZ(0);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s;
    will-change: opacity, transform;
    pointer-events: none;
    grid-column: 1;
    grid-row: 1;
    overflow-y: auto;
    min-height: 100%;
}

.login-section-active[b-jnowud3r9u] {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) translateZ(0);
    pointer-events: auto;
}

.login-section-hidden[b-jnowud3r9u] {
    display: none;
}

.welcome-section[b-jnowud3r9u] {
    background: linear-gradient(135deg, var(--bec-primary), #1a2266) !important;
    color: var(--BEC-colorNeutralForegroundOnBrand);
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    grid-column: 2;
    grid-row: 1;
}

.welcome-section h2[b-jnowud3r9u] {
    font-size: 1.6rem;
    margin-bottom: 12px;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
}

.welcome-section p[b-jnowud3r9u] {
    font-size: 0.95rem;
    line-height: 1.4;
}

.modal-header[b-jnowud3r9u] {
    margin-bottom: 12px;
    text-align: center;
}

.modal-header h2[b-jnowud3r9u] {
    color: var(--bec-primary);
    font-size: 1.7rem;
    margin-bottom: 4px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
}

.modal-header p[b-jnowud3r9u] {
    color: #666;
    font-size: 0.85rem;
}

.login-form[b-jnowud3r9u] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-group[b-jnowud3r9u] {
    position: relative;
    width: 100%;
    margin-bottom: 0;
}

.form-group input[b-jnowud3r9u],
.form-group select[b-jnowud3r9u] {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: 'Lato', sans-serif;
    background-color: #f8f8f8;
    transition: all 0.3s ease;
    color: #333;
    height: 36px;
}

.form-group input:focus[b-jnowud3r9u],
.form-group select:focus[b-jnowud3r9u] {
    outline: none;
    border-color: var(--bec-primary);
    box-shadow: 0 0 0 2px rgba(43, 52, 132, 0.15);
    background-color: #fff;
}

.form-group i[b-jnowud3r9u] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 14px;
}

/* Microsoft Button - Microsoft standard styling */
.microsoft-button[b-jnowud3r9u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background-color: #ffffff;
    color: #5e5e5e;
    border: 1px solid #8c8c8c;
    border-radius: 2px;
    padding: 0.7rem 1.5rem;
    font-weight: 500;
    font-family: 'Segoe UI', sans-serif;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 1.5rem;
    height: 41px;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.microsoft-button:hover[b-jnowud3r9u] {
    background-color: #f3f3f3;
    border-color: #8c8c8c;
}

.microsoft-button:active[b-jnowud3r9u] {
    background-color: #e5e5e5;
    transform: scale(0.98);
}

.microsoft-button.disabled[b-jnowud3r9u] {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

.ms-logo[b-jnowud3r9u] {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    display: inline-block;
}

/* Microsoft-first sign-in choice screen */
@keyframes formFadeCenter-b-jnowud3r9u {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes formUnfold-b-jnowud3r9u {
    from {
        opacity: 0;
        transform: scaleY(0.92) translateY(-6px);
    }

    to {
        opacity: 1;
        transform: scaleY(1) translateY(0);
    }
}

.login-choice[b-jnowud3r9u] {
    flex: 1;
    justify-content: center;
    gap: 6px;
    transform-origin: top center;
    animation: formFadeCenter-b-jnowud3r9u 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-manual[b-jnowud3r9u] {
    transform-origin: top center;
    animation: formUnfold-b-jnowud3r9u 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .login-choice[b-jnowud3r9u],
    .login-manual[b-jnowud3r9u] {
        animation: none;
    }
}

.login-choice .microsoft-button[b-jnowud3r9u] {
    margin-bottom: 0;
}

.signin-recommendation[b-jnowud3r9u] {
    font-size: 0.78rem;
    color: #888;
    text-align: center;
    line-height: 1.4;
    margin: 2px 0 6px;
}

.manual-signin-btn[b-jnowud3r9u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    height: 41px;
    background-color: var(--bec-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.manual-signin-btn:hover[b-jnowud3r9u] {
    background-color: #3a44a3;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(43, 52, 132, 0.25);
}

.manual-signin-btn:active[b-jnowud3r9u] {
    transform: translateY(0);
}

.manual-signin-btn.disabled[b-jnowud3r9u],
.manual-signin-btn:disabled[b-jnowud3r9u] {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

.manual-signin-hint[b-jnowud3r9u] {
    font-size: 0.78rem;
    color: #888;
    text-align: center;
    line-height: 1.4;
    margin: 0 0 4px;
}

/* Divider */
.divider[b-jnowud3r9u] {
    display: flex;
    align-items: center;
    margin: 12px 0;
    color: #999;
}

.divider[b-jnowud3r9u]::before,
.divider[b-jnowud3r9u]::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #e0e0e0;
}

.divider span[b-jnowud3r9u] {
    padding: 0 10px;
    font-size: 0.8rem;
    font-family: 'Lato', sans-serif;
}

/* Form Options */
.form-options[b-jnowud3r9u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
    margin-bottom: 2px;
}

/* Checkbox */
.checkbox-group[b-jnowud3r9u] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.checkbox-group input[type="checkbox"][b-jnowud3r9u] {
    width: 14px;
    height: 14px;
    accent-color: var(--bec-primary);
}

.checkbox-group label[b-jnowud3r9u] {
    font-size: 0.8rem;
    color: #666;
    cursor: pointer;
}

/* Modal Buttons */
.modal-buttons[b-jnowud3r9u] {
    margin-top: 8px;
}

.modal-btn-primary[b-jnowud3r9u] {
    width: 100%;
    padding: 8px 16px;
    background-color: var(--bec-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
}

.modal-btn-primary:hover[b-jnowud3r9u] {
    background-color: #3a44a3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(43, 52, 132, 0.25);
}

.modal-btn-primary:active[b-jnowud3r9u] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(43, 52, 132, 0.2);
}

/* Signup Link */
.signup-link[b-jnowud3r9u] {
    margin-top: 8px;
    font-size: 0.8rem;
    color: #666;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.signup-link a[b-jnowud3r9u] {
    color: var(--bec-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.text-link[b-jnowud3r9u] {
    color: var(--bec-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    font-size: 0.8rem;
}

.text-link:hover[b-jnowud3r9u] {
    color: #3a44a3;
    text-decoration: underline;
}

/* Thank You Message */
.thank-you-message[b-jnowud3r9u] {
    display: none;
    text-align: center;
    padding: 24px;
    animation: fadeInUp-b-jnowud3r9u 0.5s ease forwards;
}

.thank-you-message.active[b-jnowud3r9u] {
    display: block;
}

.success-icon[b-jnowud3r9u] {
    width: 72px;
    height: 72px;
    background-color: #4CAF50;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin: 0 auto 24px;
    box-shadow: 0 6px 16px rgba(76, 175, 80, 0.25);
}

.next-steps[b-jnowud3r9u] {
    margin-top: 24px;
    background-color: #f9f9f9;
    border-radius: 6px;
    padding: 20px;
    text-align: left;
    border: 1px solid #f0f0f0;
}

.next-steps p[b-jnowud3r9u] {
    color: #333;
    font-weight: 600;
    margin-bottom: 12px;
}

.next-steps ul[b-jnowud3r9u] {
    list-style: none;
    padding-left: 5px;
}

.next-steps li[b-jnowud3r9u] {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    color: #666;
    font-size: 0.95rem;
}

.next-steps li[b-jnowud3r9u]:before {
    position: absolute;
    left: 0;
    color: #4CAF50;
    font-weight: bold;
    font-size: 16px;
}

/* Animation for steps */
@keyframes fadeInStep-b-jnowud3r9u {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#login-step-1[b-jnowud3r9u],
#login-step-2[b-jnowud3r9u] {
    animation: fadeInStep-b-jnowud3r9u 0.5s ease forwards;
}

.form-group select option:checked[b-jnowud3r9u] {
    background-color: var(--bec-primary);
    color: white;
}

.form-group select:focus-visible[b-jnowud3r9u] {
    outline: none;
    border-color: var(--bec-primary);
}

/* Select dropdown styling */
.form-group select[b-jnowud3r9u] {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 32px;
}

.form-group select:focus[b-jnowud3r9u] {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B3484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

.form-group select.disabled[b-jnowud3r9u] {
    background-color: #f0f0f0;
    cursor: not-allowed;
    opacity: 0.7;
    color: #888;
}

/* Enhanced profile selection step */
.profile-selection select[b-jnowud3r9u],
.org-selection select[b-jnowud3r9u],
.company-selection select[b-jnowud3r9u],
.branch-selection select[b-jnowud3r9u] {
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    font-size: 0.9rem;
    color: #444;
}

.profile-selection[b-jnowud3r9u],
.org-selection[b-jnowud3r9u],
.company-selection[b-jnowud3r9u],
.branch-selection[b-jnowud3r9u] {
    margin-bottom: 10px;
}

.profile-selection i[b-jnowud3r9u],
.org-selection i[b-jnowud3r9u],
.company-selection i[b-jnowud3r9u],
.branch-selection i[b-jnowud3r9u] {
    color: #2B3484;
    font-size: 15px;
}

.profile-selection select:focus[b-jnowud3r9u],
.org-selection select:focus[b-jnowud3r9u],
.company-selection select:focus[b-jnowud3r9u],
.branch-selection select:focus[b-jnowud3r9u] {
    box-shadow: 0 4px 8px rgba(43, 52, 132, 0.15);
    transform: translateY(-1px);
}

.profile-selection select:hover[b-jnowud3r9u],
.org-selection select:hover[b-jnowud3r9u],
.company-selection select:hover[b-jnowud3r9u],
.branch-selection select:hover[b-jnowud3r9u] {
    border-color: #2B3484;
}

/* Back link styling */
.back-link[b-jnowud3r9u] {
    margin-top: 10px;
}

.back-link a[b-jnowud3r9u] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    color: #666;
    transition: all 0.2s ease;
}

.back-link a:hover[b-jnowud3r9u] {
    color: #2B3484;
}

.back-link a i[b-jnowud3r9u] {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.back-link a:hover i[b-jnowud3r9u] {
    transform: translateX(-3px);
}

/* Animation for step 2 */
#login-step-2[b-jnowud3r9u] {
    animation: fadeInRight-b-jnowud3r9u 0.4s ease forwards;
}

@keyframes fadeInRight-b-jnowud3r9u {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Enhanced welcome section for step 2 */
.welcome-section[b-jnowud3r9u] {
    position: relative;
    overflow: hidden;
}

.welcome-section[b-jnowud3r9u]:after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.welcome-section[b-jnowud3r9u]:before {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.welcome-section h2[b-jnowud3r9u] {
    position: relative;
    z-index: 2;
}

.welcome-section p[b-jnowud3r9u] {
    position: relative;
    z-index: 2;
    line-height: 1.5;
    font-size: 1rem;
    opacity: 0.9;
    max-width: 90%;
    margin: 0 auto;
}

/* Enhanced button styling */
.modal-btn-primary[b-jnowud3r9u] {
    background: linear-gradient(135deg, #2B3484, #1a2266);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: 5px;
    box-shadow: 0 4px 8px rgba(43, 52, 132, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
    height: 40px;
}

.modal-btn-primary:hover[b-jnowud3r9u] {
    background: linear-gradient(135deg, #364099, #2B3484);
    box-shadow: 0 6px 12px rgba(43, 52, 132, 0.25);
    transform: translateY(-1px);
}

.modal-btn-primary:active[b-jnowud3r9u] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(43, 52, 132, 0.2);
}

/* Microsoft SSO Overlay */
.ms-sso-overlay[b-jnowud3r9u] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1100;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ms-sso-overlay.active[b-jnowud3r9u] {
    opacity: 1;
    visibility: visible;
}

.ms-sso-loading-container[b-jnowud3r9u] {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 360px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.ms-sso-loading-container p[b-jnowud3r9u] {
    color: white;
    font-size: 1.1rem;
    margin-top: 20px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
}

.ms-logo-animation[b-jnowud3r9u] {
    animation: pulse-b-jnowud3r9u 2s infinite;
}

.loading-spinner[b-jnowud3r9u] {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-jnowud3r9u 1s linear infinite;
}

@keyframes pulse-b-jnowud3r9u {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 0.7;
        transform: scale(1);
    }
}

@keyframes spin-b-jnowud3r9u {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Loading spinner for login buttons */
.login-spinner[b-jnowud3r9u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transform: translateZ(0);
    will-change: transform;
}

.spinner-border[b-jnowud3r9u] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-jnowud3r9u 0.6s linear infinite;
    transform: translateZ(0);
    will-change: transform;
}

.visually-hidden[b-jnowud3r9u] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.d-none[b-jnowud3r9u] {
    display: none !important;
}

.text-white[b-jnowud3r9u] {
    color: white !important;
}

.spinner-border-sm[b-jnowud3r9u] {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
    transform: translateZ(0);
    will-change: transform;
}

@keyframes spinner-border-b-jnowud3r9u {
    from {
        transform: rotate(0deg) translateZ(0);
    }
    to {
        transform: rotate(360deg) translateZ(0);
    }
}

.ms-2[b-jnowud3r9u] {
    margin-left: 0.5rem !important;
}

/* Responsive design */
@media (max-width: 1200px) {
    .hero-headline[b-jnowud3r9u] {
        font-size: 3.5rem;
    }

    .hero-subheadline[b-jnowud3r9u] {
        font-size: 1.3rem;
    }

    .modal-content[b-jnowud3r9u] {
        max-width: 800px;
    }

    .welcome-section h2[b-jnowud3r9u] {
        font-size: 1.7rem;
    }

    .hero .container[b-jnowud3r9u] {
        padding-left: 40px;
    }
}

@media (max-width: 992px) {

    .modal-content[b-jnowud3r9u],
    .login-modal-content[b-jnowud3r9u] {
        grid-template-columns: 1fr;
        max-width: 450px;
        height: auto;
        min-height: 400px;
    }

    .welcome-section[b-jnowud3r9u] {
        display: none;
    }

    .login-section[b-jnowud3r9u] {
        padding: 32px 24px;
    }

    .modal-header h2[b-jnowud3r9u] {
        font-size: 1.8rem;
    }

    .hero-headline[b-jnowud3r9u] {
        font-size: 3rem;
    }

    .hero-subheadline[b-jnowud3r9u] {
        font-size: 1.2rem;
    }

    .modal-close[b-jnowud3r9u] {
        top: 12px;
        right: 12px;
    }

    .hero .container[b-jnowud3r9u] {
        padding-left: 30px;
    }
}

@media (max-width: 768px) {
    .container[b-jnowud3r9u] {
        padding: 0 20px;
    }

    .logo img[b-jnowud3r9u] {
        height: 50px;
    }

    .auth-buttons[b-jnowud3r9u] {
        gap: 12px;
    }

    .login-btn[b-jnowud3r9u],
    .signup-btn[b-jnowud3r9u] {
        padding: 8px 16px;
        min-width: 100px;
        height: 38px;
        font-size: 12px;
    }

    .hero-headline[b-jnowud3r9u] {
        font-size: 2.5rem;
    }

    .hero-subheadline[b-jnowud3r9u] {
        font-size: 1rem;
    }

    .modal-content[b-jnowud3r9u] {
        width: 95%;
        max-width: 450px;
        height: auto;
        min-height: 400px;
    }

    .login-section[b-jnowud3r9u] {
        padding: 28px 20px;
    }

    .modal-header[b-jnowud3r9u] {
        margin-bottom: 24px;
    }

    .modal-header h2[b-jnowud3r9u] {
        font-size: 1.7rem;
        margin-bottom: 8px;
    }

    .form-group input[b-jnowud3r9u],
    .form-group select[b-jnowud3r9u],
    .microsoft-button[b-jnowud3r9u],
    .modal-btn-primary[b-jnowud3r9u] {
        height: 48px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .form-options[b-jnowud3r9u] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .checkbox-group[b-jnowud3r9u] {
        margin-left: 2px;
    }

    .modal-close[b-jnowud3r9u] {
        top: 10px;
        right: 10px;
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    .form-group i[b-jnowud3r9u] {
        left: 15px;
        font-size: 16px;
    }

    .ms-sso-loading-container[b-jnowud3r9u] {
        width: 300px;
        padding: 30px;
    }

    .hero .container[b-jnowud3r9u] {
        padding-left: 20px;
    }
}

@media (max-width: 480px) {
    .logo img[b-jnowud3r9u] {
        height: 40px;
    }

    .auth-buttons[b-jnowud3r9u] {
        gap: 8px;
    }

    .login-btn[b-jnowud3r9u],
    .signup-btn[b-jnowud3r9u] {
        padding: 6px 12px;
        min-width: 80px;
        height: 34px;
        font-size: 11px;
    }

    .hero-headline[b-jnowud3r9u] {
        font-size: 2rem;
    }

    .hero-content[b-jnowud3r9u] {
        padding-bottom: 60px;
    }

    .modal-content[b-jnowud3r9u] {
        width: 95%;
        max-width: 360px;
        margin: 0 10px;
        height: auto;
        min-height: 400px;
    }

    .login-section[b-jnowud3r9u] {
        padding: 24px 16px;
    }

    .modal-header h2[b-jnowud3r9u] {
        font-size: 1.6rem;
        margin-bottom: 6px;
    }

    .modal-header p[b-jnowud3r9u] {
        font-size: 0.9rem;
    }

    .form-group input[b-jnowud3r9u],
    .form-group select[b-jnowud3r9u],
    .microsoft-button[b-jnowud3r9u],
    .modal-btn-primary[b-jnowud3r9u] {
        height: 46px;
        padding: 10px 16px 10px 42px;
        font-size: 0.9rem;
    }

    .form-group i[b-jnowud3r9u] {
        left: 15px;
        font-size: 16px;
    }

    .login-form[b-jnowud3r9u] {
        gap: 16px;
    }

    .divider[b-jnowud3r9u] {
        margin: 16px 0;
    }

    .signup-link[b-jnowud3r9u] {
        margin-top: 16px;
        font-size: 0.85rem;
    }

    .success-icon[b-jnowud3r9u] {
        width: 60px;
        height: 60px;
        font-size: 28px;
        margin-bottom: 16px;
    }

    .thank-you-message h3[b-jnowud3r9u] {
        font-size: 1.4rem;
        margin-bottom: 8px;
    }

    .next-steps[b-jnowud3r9u] {
        padding: 16px;
        margin-top: 16px;
    }

    .next-steps p[b-jnowud3r9u] {
        font-size: 0.9rem;
    }

    .next-steps li[b-jnowud3r9u] {
        font-size: 0.85rem;
        padding-left: 22px;
    }

    .modal-close[b-jnowud3r9u] {
        top: 8px;
        right: 8px;
    }

    .hero .container[b-jnowud3r9u] {
        padding-left: 15px;
    }
}

@media (max-width: 360px) {
    .modal-content[b-jnowud3r9u] {
        width: 98%;
        max-width: 340px;
    }

    .login-section[b-jnowud3r9u] {
        padding: 20px 12px;
    }

    .form-group input[b-jnowud3r9u],
    .form-group select[b-jnowud3r9u] {
        padding-left: 38px;
    }

    .form-group i[b-jnowud3r9u] {
        left: 12px;
    }

    .microsoft-button[b-jnowud3r9u] {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
}


/* BEC Toast Notifications */
.bec-toast-container[b-jnowud3r9u] {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1100000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 350px;
}

.bec-toast[b-jnowud3r9u] {
    display: flex;
    align-items: flex-start;
    background: white;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-left: 4px solid #ccc;
    overflow: hidden;
    position: relative;
    pointer-events: auto;
}

.bec-toast.active[b-jnowud3r9u] {
    transform: translateX(0);
    opacity: 1;
}

.bec-toast.dismissed[b-jnowud3r9u] {
    transform: translateX(120%);
    opacity: 0;
}

.bec-toast.info[b-jnowud3r9u] {
    border-left-color: #2B3484;
}

.bec-toast.success[b-jnowud3r9u] {
    border-left-color: #4CAF50;
}

.bec-toast.error[b-jnowud3r9u] {
    border-left-color: #F44336;
}

.bec-toast.warning[b-jnowud3r9u] {
    border-left-color: #FF9800;
}

.toast-icon[b-jnowud3r9u] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 20px;
}

.toast-icon i[b-jnowud3r9u] {
    min-width: 24px;
}

.bec-toast.info .toast-icon[b-jnowud3r9u] {
    color: #2B3484;
}

.bec-toast.success .toast-icon[b-jnowud3r9u] {
    color: #4CAF50;
}

.bec-toast.error .toast-icon[b-jnowud3r9u] {
    color: #F44336;
}

.bec-toast.warning .toast-icon[b-jnowud3r9u] {
    color: #FF9800;
}

.toast-content[b-jnowud3r9u] {
    flex: 1;
    color: #24272A;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.toast-close[b-jnowud3r9u] {
    color: #A2AAAD;
    cursor: pointer;
    margin-left: 8px;
    padding: 4px;
    transition: color 0.2s ease;
}

.toast-close:hover[b-jnowud3r9u] {
    color: #24272A;
}

.bec-toast[b-jnowud3r9u]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: rgba(0, 0, 0, 0.1);
    width: 100%;
    animation-name: toast-timer;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

/* Error Boundary Fallback */
.error-boundary-fallback[b-jnowud3r9u] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* FluentMessageBar spacing in modals */
.login-section fluent-message-bar[b-jnowud3r9u],
.login-section .fluent-message-bar[b-jnowud3r9u] {
    margin-bottom: 12px;
    border-radius: 6px;
}

/* ============================================
   FORGOT PASSWORD SIDE PANEL
   ============================================ */

.forgot-password-overlay[b-jnowud3r9u] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.forgot-password-overlay.active[b-jnowud3r9u] {
    opacity: 1;
    visibility: visible;
}

.forgot-password-panel[b-jnowud3r9u] {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    max-width: 90vw;
    height: 100vh;
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.forgot-password-panel.active[b-jnowud3r9u] {
    right: 0;
}

.panel-close[b-jnowud3r9u] {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: all 0.2s ease;
    z-index: 10;
}

.panel-close:hover[b-jnowud3r9u] {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
}

/* Wizard Progress Steps */
.wizard-progress[b-jnowud3r9u] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px 20px;
    gap: 0;
    margin-top: 40px;
}

.progress-step[b-jnowud3r9u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.progress-step.active[b-jnowud3r9u] {
    opacity: 1;
}

.progress-step.completed[b-jnowud3r9u] {
    opacity: 1;
}

.step-number[b-jnowud3r9u] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.progress-step.active .step-number[b-jnowud3r9u] {
    background: linear-gradient(135deg, #2B3484 0%, #1a2057 100%);
    color: white;
}

.progress-step.completed .step-number[b-jnowud3r9u] {
    background: #4CAF50;
    color: white;
}

.progress-step span[b-jnowud3r9u] {
    font-size: 11px;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.progress-step.active span[b-jnowud3r9u] {
    color: #2B3484;
}

.progress-line[b-jnowud3r9u] {
    width: 40px;
    height: 3px;
    background: #e0e0e0;
    margin: 0 5px 20px;
    border-radius: 2px;
    transition: background 0.3s ease;
}

.progress-line.active[b-jnowud3r9u] {
    background: linear-gradient(90deg, #4CAF50 0%, #2B3484 100%);
}

/* Panel Step Content */
.panel-step[b-jnowud3r9u] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 40px 40px;
    animation: fadeIn-b-jnowud3r9u 0.3s ease;
}

@keyframes fadeIn-b-jnowud3r9u {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.panel-header[b-jnowud3r9u] {
    text-align: center;
    margin-bottom: 30px;
}

.panel-icon[b-jnowud3r9u] {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, rgba(43, 52, 132, 0.1) 0%, rgba(43, 52, 132, 0.05) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-icon i[b-jnowud3r9u] {
    font-size: 32px;
    color: #2B3484;
}

.panel-icon.success[b-jnowud3r9u] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.05) 100%);
}

.panel-icon.success i[b-jnowud3r9u] {
    color: #4CAF50;
}

.panel-header h2[b-jnowud3r9u] {
    font-size: 24px;
    font-weight: 700;
    color: #24272A;
    margin: 0 0 10px;
}

.panel-header p[b-jnowud3r9u] {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

.email-highlight[b-jnowud3r9u] {
    font-weight: 600;
    color: #2B3484;
    background: rgba(43, 52, 132, 0.08);
    padding: 8px 16px;
    border-radius: 8px;
    display: inline-block;
    margin-top: 10px;
}

/* Panel Form */
.panel-form[b-jnowud3r9u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.panel-form .form-group[b-jnowud3r9u] {
    position: relative;
    margin-bottom: 0;
}

.panel-form .form-group i[b-jnowud3r9u] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #A2AAAD;
    font-size: 16px;
    z-index: 1;
}

.panel-form .form-group input[b-jnowud3r9u] {
    width: 100%;
    padding: 16px 16px 16px 48px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 15px;
    transition: all 0.2s ease;
    background: white;
}

.panel-form .form-group input:focus[b-jnowud3r9u] {
    outline: none;
    border-color: #2B3484;
    box-shadow: 0 0 0 4px rgba(43, 52, 132, 0.1);
}

.panel-form .form-group input[b-jnowud3r9u]::placeholder {
    color: #A2AAAD;
}

/* Panel Buttons */
.panel-btn-primary[b-jnowud3r9u] {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #2B3484 0%, #1a2057 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.panel-btn-primary:hover:not(:disabled)[b-jnowud3r9u] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(43, 52, 132, 0.3);
}

.panel-btn-primary:disabled[b-jnowud3r9u] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.panel-btn-secondary[b-jnowud3r9u] {
    width: 100%;
    padding: 14px 24px;
    background: transparent;
    color: #2B3484;
    border: 2px solid #2B3484;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.panel-btn-secondary:hover:not(:disabled)[b-jnowud3r9u] {
    background: rgba(43, 52, 132, 0.05);
}

.panel-btn-secondary:disabled[b-jnowud3r9u] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Back Link */
.panel-back-link[b-jnowud3r9u] {
    text-align: center;
    margin-top: 20px;
}

.panel-back-link a[b-jnowud3r9u] {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}

.panel-back-link a:hover[b-jnowud3r9u] {
    color: #2B3484;
}

/* Email Instructions */
.email-instructions[b-jnowud3r9u] {
    background: rgba(43, 52, 132, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin: 10px 0;
}

.email-instructions p[b-jnowud3r9u] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 8px 0;
    font-size: 13px;
    color: #666;
}

.email-instructions p i[b-jnowud3r9u] {
    color: #2B3484;
    width: 20px;
    text-align: center;
}

/* Password Requirements */
.password-requirements[b-jnowud3r9u] {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 8px;
}

.password-requirements p[b-jnowud3r9u] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 6px 0;
    font-size: 13px;
    transition: color 0.2s ease;
}

.password-requirements p.valid[b-jnowud3r9u] {
    color: #4CAF50;
}

.password-requirements p.invalid[b-jnowud3r9u] {
    color: #999;
}

.password-requirements p i[b-jnowud3r9u] {
    width: 16px;
    text-align: center;
}

/* Success Message */
.success-message[b-jnowud3r9u] {
    text-align: center;
    padding: 20px;
    background: rgba(76, 175, 80, 0.08);
    border-radius: 12px;
    margin-bottom: 20px;
}

.success-message p[b-jnowud3r9u] {
    margin: 0;
    color: #2E7D32;
    font-size: 14px;
}

/* FluentMessageBar in panel */
.panel-step fluent-message-bar[b-jnowud3r9u],
.panel-step .fluent-message-bar[b-jnowud3r9u] {
    margin-bottom: 16px;
    border-radius: 10px;
}

/* Responsive */
@media (max-width: 500px) {
    .forgot-password-panel[b-jnowud3r9u] {
        width: 100vw;
        max-width: 100vw;
    }

    .panel-step[b-jnowud3r9u] {
        padding: 20px 24px 40px;
    }

    .wizard-progress[b-jnowud3r9u] {
        padding: 20px 10px;
    }

    .progress-line[b-jnowud3r9u] {
        width: 25px;
    }

    .step-number[b-jnowud3r9u] {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .progress-step span[b-jnowud3r9u] {
        font-size: 9px;
    }
}

/* ================= MIGRATED INLINE STYLES ================= */

.lay-landing-logo[b-jnowud3r9u] {
    height: 110px;
    width: auto;
}

/* ========================================
   STEP VISIBILITY CLASSES
   ======================================== */

.bec-step--active[b-jnowud3r9u] {
    display: flex;
}

.bec-step--hidden[b-jnowud3r9u] {
    display: none;
}
/* /Components/Shared/Bec/Homepage/BecAnnouncementList.razor.rz.scp.css */
/* Card chrome/header/View All come from BecSectionCard — this just makes it
   stretch-fill its .home-col grid cell, same as the other BecSectionCard-
   based cards. .bec-section-card__body is already flex column (flex:1,
   min-height:0), so .ann-feat (flex-shrink:0, fixed height) sits above
   .ann-scroll (flex:1, min-height:0, scrolls) exactly like the mockup's
   ".feat" above ".ann-wrap". */
.bec-announcement-list-card[b-76wz7jgqrw] {
    height: 100%;
}

.ann-empty[b-76wz7jgqrw] {
    font-size: var(--type-meta-size, 12.5px);
    color: var(--bec-slate, #5A6168);
    padding: var(--space-3, 12px) 0;
}

/* Featured card — matches the mockup's ".feat" exactly: cover image, a
   category tag, title, and a date/like/comment meta row. The like toggle is
   real, existing functionality (OnToggleReaction) — the mockup's own
   ".meta" icons are static, but removing a working reaction toggle just to
   match that would be a functional regression, not a design fix. */
.ann-feat[b-76wz7jgqrw] {
    display: block;
    width: 100%;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--bec-border, #E4E8EF);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    background: none;
    cursor: pointer;
    text-align: start;
}

.ann-feat__img[b-76wz7jgqrw] {
    display: block;
    width: 100%;
    height: 130px;
    background-color: var(--bec-bg-alt, #F6F8FC);
    background-size: cover;
    background-position: center 30%;
}

/* No cover image — a --bec-placeholder-* gradient fills the same block (see
   CoverStyle in the .razor). background-size:cover is meaningless for a
   gradient and background-position would only shift it oddly, so both are
   reset; the gradient should simply fill the box at its declared 135deg.
   Replaces a hardcoded Unsplash stock photo. */
.ann-feat__img--placeholder[b-76wz7jgqrw] {
    background-size: auto;
    background-position: 0 0;
}

.ann-feat__body[b-76wz7jgqrw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 14px 13px;
}

.ann-feat__tag[b-76wz7jgqrw] {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--bec-accent-blue-tint, #EAEBF3);
    color: var(--bec-accent-blue, var(--bec-navy-700));
}

.ann-feat__title[b-76wz7jgqrw] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font: 700 14.5px/1.32 var(--font-family-base, inherit);
    color: var(--bec-ink, #24272A);
}

.ann-feat:hover .ann-feat__title[b-76wz7jgqrw] {
    color: var(--bec-navy-700, #2B3484);
}

.ann-feat__meta[b-76wz7jgqrw] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--bec-slate, #5A6168);
}

.ann-feat__meta-item[b-76wz7jgqrw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ann-feat__like[b-76wz7jgqrw] {
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
}

.ann-feat__like:hover[b-76wz7jgqrw] {
    color: var(--bec-ink, #24272A);
}

.ann-feat__like--active[b-76wz7jgqrw] {
    color: var(--bec-danger, #C0392B);
}

/* Scrollable list of smaller rows below the feature — matches the mockup's
   ".ann-wrap"/".ann-scroll" fading-bottom + thin-scrollbar treatment. */
.ann-scroll[b-76wz7jgqrw] {
    flex: 1;
    min-height: 0;
    margin-top: 10px;
    padding-right: 6px;
    margin-right: -6px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--bec-border, #E4E8EF) transparent;
}

.ann-scroll[b-76wz7jgqrw]::-webkit-scrollbar { width: 5px; }
.ann-scroll[b-76wz7jgqrw]::-webkit-scrollbar-thumb { background: var(--bec-border, #E4E8EF); border-radius: 3px; }
.ann-scroll[b-76wz7jgqrw]::-webkit-scrollbar-track { background: transparent; }

/* One row per remaining item — same tinted/photo-bleed shape as
   BecResourceTile's ".bec-res-tile", plus a colored category bar on the
   leading edge (mockup's ".ann-bar"). No real per-item category-color field
   exists on this data model, so the bar rotates blue/sage/sand by position
   for visual variety rather than encoding a specific (fabricated) meaning. */
.ann-row[b-76wz7jgqrw] {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    height: 70px;
    padding-inline: 14px;
    border: none;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    background: var(--bec-accent-blue-tint, #EAEBF3);
    text-align: start;
    cursor: pointer;
    transition: background var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

.ann-row:hover[b-76wz7jgqrw] {
    background: var(--bec-tint-100, #EEF1FB);
}

.ann-row__bar[b-76wz7jgqrw] {
    position: relative;
    z-index: 1;
    width: 3px;
    height: 30px;
    border-radius: 2px;
    flex-shrink: 0;
    background: var(--bec-accent-blue, var(--bec-navy-700));
}

.ann-row__bar--1[b-76wz7jgqrw] { background: var(--bec-accent-sage, #596D6D); }
.ann-row__bar--2[b-76wz7jgqrw] { background: var(--bec-accent-sand, #7A6A56); }

/* Photo bleeds from the end edge, masked the same way as BecResourceTile's
   ".bec-res-tile__img" — see that component for the RTL-gradient-direction
   caveat (mirrors the same known, minor limitation here). */
.ann-row__img[b-76wz7jgqrw] {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 44%;
    background-size: cover;
    background-position: center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 42%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 42%, #000 100%);
}

/* Same slot, same mask, gradient instead of a photo — so a coverless row still
   fades in from the title rather than showing nothing or a stock image. The
   background-color is a floor for the case where --bec-placeholder-* does not
   resolve (anything rendering this outside .bec-shell). */
.ann-row__img--placeholder[b-76wz7jgqrw] {
    background-color: var(--bec-accent-blue-tint, #EAEBF3);
    background-size: auto;
}

.ann-row__text[b-76wz7jgqrw] {
    position: relative;
    z-index: 1;
    min-width: 0;
    max-width: 64%;
}

.ann-row__title[b-76wz7jgqrw] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font: 700 12.5px/1.35 var(--font-family-base, inherit);
    color: var(--bec-navy-900, #1F2566);
}

.ann-row:hover .ann-row__title[b-76wz7jgqrw] {
    color: var(--bec-accent-blue, var(--bec-navy-700));
}

.ann-row__meta[b-76wz7jgqrw] {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: var(--bec-gray, #7A828C);
}
/* /Components/Shared/Bec/Homepage/BecEmployeeSummary.razor.rz.scp.css */
/* Identity card — the mirror's ".prof". Metrics live in the sibling stats card
   (page-level BecStatTile); this owns identity only. Geometry below is the
   mirror's own: 15px/20px padding, a 16px gap, a 48px avatar and a 2 x 2 fact
   grid at 28px/7px. */
.bec-emp-summary[b-72btkqnsfl] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

/* ::deep — BecAvatar's root carries its OWN CSS-isolation scope, not this
   component's, so a plain selector wouldn't match it.

   48px is the mirror's ".prof-av .ring". This was 84px, sized up when the card
   still spanned two grid tracks — but 84px plus its gap was 104px the fact grid
   never got, and that is precisely why the fields were the first thing to
   truncate. Shrinking it back is what lets the grid be a true 2 x 2. */
.bec-emp-summary[b-72btkqnsfl]  .bec-avatar--lg {
    width: 48px;
    height: 48px;
    font-size: 15px;
}

.bec-emp-summary__idtext[b-72btkqnsfl] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Flex row (not inline text) so the badge sits centered beside the name via
   align-items:center, same approach as BecHeader's .header-user-meta. */
.bec-emp-summary__name-row[b-72btkqnsfl] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Wraps to a second line rather than ellipsising — every other value here is a
   field whose full text is on its title attribute, but a person's own name is
   not something to cut. */
.bec-emp-summary__name[b-72btkqnsfl] {
    font: 700 18px/1.2 var(--font-family-base, inherit);
    letter-spacing: -0.01em;
    color: var(--bec-ink, #24272A);
    min-width: 0;
    word-break: normal;
    overflow-wrap: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --blue-300 from the mirror (#6F7FAF), which is --bec-indigo-400 here. The icon
   is stroke-only and inherits this via currentColor. */
.verified-badge[b-72btkqnsfl] {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
    color: var(--bec-indigo-400, #6F7FAF);
}

/* The mirror's .prof-grid — two equal tracks, Job Title | Department over
   Employee ID | Location. */
.bec-emp-summary__facts[b-72btkqnsfl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 28px;
    row-gap: 7px;
    margin-top: 10px;
}

.bec-emp-summary__fact[b-72btkqnsfl] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* nowrap + ellipsis: "DEPARTMENT" / "EMPLOYEE ID" have no legal break point, so
   without this they overflow their track and collide with the next column. */
.bec-emp-summary__fact-label[b-72btkqnsfl] {
    font: 700 10px/1.2 var(--font-family-base, inherit);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bec-gray, #7A828C);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bec-emp-summary__fact-value[b-72btkqnsfl] {
    margin-top: 3px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--bec-ink, #24272A);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Narrow card ────────────────────────────────────────────────────────── */
/* Queries the "identity" container (the card, in Intranet-MainPage.razor.css),
   not the viewport — this card's width depends on the sidebar state and browser
   zoom, neither of which a media query can see.

   Far less needed now that the avatar is 48px: the grid keeps ~200px per column
   at every width the row actually reaches, so these only tighten the gutters. */
@container identity (max-width: 360px) {
    .bec-emp-summary[b-72btkqnsfl] { gap: 12px; }
    .bec-emp-summary__facts[b-72btkqnsfl] { column-gap: 16px; }
}

/* Single column below ~280px — two tracks that narrow cannot hold
   "EMPLOYEE ID", and a truncated field label is worse than a taller list. */
@container identity (max-width: 280px) {
    .bec-emp-summary__facts[b-72btkqnsfl] { grid-template-columns: minmax(0, 1fr); }
}

/* The mirror's .prof-org — company name under the person's name. Muted and one
   line: it is context for the name above it, not a field of its own, which is
   why it sits outside the fact grid. */
.bec-emp-summary__org[b-72btkqnsfl] {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--bec-slate, #5A6168);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Shared/Bec/Homepage/BecEventListItem.razor.rz.scp.css */
.bec-event-item[b-1xgeelm4pi] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    width: 100%;
    text-align: start;
}

/* ── Compact — mini-calendar's event panel row ── */
.bec-event-item--compact[b-1xgeelm4pi] {
    padding: var(--space-2, 8px);
    border-radius: var(--radius-sm, 6px);
}

.bec-event-item--clickable[b-1xgeelm4pi] {
    cursor: pointer;
    transition: background var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

.bec-event-item--clickable:hover[b-1xgeelm4pi],
.bec-event-item--clickable:focus-visible[b-1xgeelm4pi] {
    background: var(--bec-bg-alt, #F6F8FC);
}

.bec-event-item--compact .bec-event-item__date[b-1xgeelm4pi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-sm, 6px);
    background: var(--bec-tint-100, #EEF1FB);
    color: var(--bec-navy-700, #2B3484);
    font-size: var(--type-caption-size, 10.5px);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.bec-event-item--compact .bec-event-item__info[b-1xgeelm4pi] {
    min-width: 0;
    flex: 1;
}

.bec-event-item--compact .bec-event-item__title[b-1xgeelm4pi] {
    font: var(--type-h3-weight, 600) var(--type-body-size, 13px)/1.3 var(--font-family-base, inherit);
    color: var(--bec-ink, #24272A);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bec-event-item--compact .bec-event-item__loc[b-1xgeelm4pi],
.bec-event-item--compact .bec-event-item__time[b-1xgeelm4pi] {
    font-size: var(--type-meta-size, 12px);
    color: var(--bec-slate, #5A6168);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Small pill link — used by the Compact variant when RsvpUrl is set (New
   Hire Orientation's sessions). Sits at the row's trailing edge, same shape
   language as other pill CTAs (AppButton's Pill variant). */
.bec-event-item--compact .bec-event-item__rsvp[b-1xgeelm4pi] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 4px var(--space-3, 12px);
    border-radius: var(--radius-full, 999px);
    background: var(--bec-navy-700, #2B3484);
    color: #fff;
    font-size: var(--type-caption-size, 11px);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

.bec-event-item--compact .bec-event-item__rsvp:hover[b-1xgeelm4pi] {
    background: var(--bec-navy-900, #1F2566);
}

/* ── Card — "All Events" list panel row ── */
.bec-event-item--card[b-1xgeelm4pi] {
    background: none;
    border: none;
    padding: var(--space-2, 8px);
    border-radius: var(--radius-md, 10px);
    cursor: pointer;
    min-height: var(--hit-target-min, 44px);
    transition: background var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

.bec-event-item--card:hover[b-1xgeelm4pi] {
    background: var(--bec-bg-alt, #F6F8FC);
}

.bec-event-item__thumb[b-1xgeelm4pi] {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
    background: var(--bec-tint-100, #EEF1FB);
}

.bec-event-item__thumb img[b-1xgeelm4pi] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bec-event-item__datebadge[b-1xgeelm4pi] {
    position: absolute;
    inset-inline-start: 4px;
    bottom: 4px;
    padding: 1px 6px;
    border-radius: var(--radius-sm, 4px);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.bec-event-item--card .bec-event-item__body[b-1xgeelm4pi] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bec-event-item__cat[b-1xgeelm4pi] {
    font-size: var(--type-caption-size, 10.5px);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--bec-indigo-400, #6F7FAF);
}

.bec-event-item--card .bec-event-item__title[b-1xgeelm4pi] {
    margin: 0;
    font: var(--type-h3-weight, 600) var(--type-body-size, 13px)/1.3 var(--font-family-base, inherit);
    color: var(--bec-ink, #24272A);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bec-event-item__meta[b-1xgeelm4pi] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    font-size: var(--type-meta-size, 12px);
    color: var(--bec-slate, #5A6168);
}

.bec-event-item__meta-item[b-1xgeelm4pi] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bec-event-item__arrow[b-1xgeelm4pi] {
    flex-shrink: 0;
    color: var(--bec-gray, #7A828C);
}
/* /Components/Shared/Bec/Homepage/BecHeroBanner.razor.rz.scp.css */
.hero-banner[b-z149l7q5qr] {
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

/* 208px is the mockup's --banner-h, stated once and applied at every desktop
   width. It was 184px jumping to 280px at >=1400px: on a 1920 screen that
   made the hero the tallest element on the page by a wide margin and pushed
   the profile row and everything under it a further ~72px down the fold,
   which is not the proportion the design has. 184px is kept below 1024px
   only, where the banner is proportionally much wider than the viewport. */
.hero-banner-inner[b-z149l7q5qr] {
    position: relative;
    height: 184px;
    width: 100%;
    max-width: 100%;
    border-radius: 1rem;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .hero-banner-inner[b-z149l7q5qr] {
        height: 208px;
    }
}

.hero-banner-link[b-z149l7q5qr] {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.hero-banner-img[b-z149l7q5qr] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
    filter: brightness(0.95);
}

.hero-banner-inner:hover .hero-banner-img[b-z149l7q5qr] {
    transform: scale(1.05);
}

/* Title overlay — matches the mockup's .bn-veil/.bn-in h2 (dark gradient,
   headline pinned left, vertically centered). Only the headline: the
   mockup's tag pill/description/CTA have no backing content field on the
   real Hero data today, so rendering them would mean fabricating copy —
   left out per explicit product decision, not an oversight. Uses
   --bec-navy-900's rgb decomposition (not a plain named color) so the veil
   is the same navy family as the rest of the shell, not the mockup's own
   slightly different #1a1f4f. pointer-events:none on both overlay layers —
   they sit on top of .hero-banner-img/.hero-banner-link but must never
   swallow the click/hover meant for the banner underneath. */
.hero-banner-veil[b-z149l7q5qr] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(31, 37, 102, .92) 0%, rgba(31, 37, 102, .75) 34%, rgba(31, 37, 102, .30) 68%, rgba(31, 37, 102, .05) 100%);
    pointer-events: none;
}

/* Was a single centred row holding only the title. Now a stacked block —
   headline, description, CTA — matching the Rev-4 mirror's .bn-in, which is a
   column justified to the middle of the banner's height with the text capped
   well short of the image's right edge so it stays over the opaque end of the
   veil. max-width, not width: a headline-only banner must not reserve the room
   a description would have taken. */
.hero-banner-overlay[b-z149l7q5qr] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding-inline-start: 44px;
    padding-inline-end: 32px;
    pointer-events: none;
}

/* The mirror's .bn-tag — Title, above the headline. Sand fill on the navy veil
   so it reads as a label rather than as a second heading, which is the whole
   point of putting it here instead of in the h2. */
.hero-banner-tag[b-z149l7q5qr] {
    align-self: flex-start;
    max-width: 100%;
    padding: 4px 9px;
    border-radius: 4px;
    background: var(--bec-accent-sand-fill, #E6DDCF);
    color: var(--bec-navy-900, #1F2566);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-banner-title[b-z149l7q5qr] {
    max-width: 560px;
    margin: 0;
    color: #fff;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

/* Clamped to three lines. The field allows 500 characters and an admin will
   eventually paste a paragraph into it; the banner is a fixed 208px and cannot
   grow, so the overflow has to be resolved here rather than by hoping nobody
   does that. */
.hero-banner-desc[b-z149l7q5qr] {
    max-width: 430px;
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Reads as a button but is a <span> — the whole slide is already inside the <a>
   that owns the destination, and a nested interactive element there would be
   invalid HTML and unreachable by keyboard. Rendered only when the banner
   actually has a DestinationURL, so it never promises a navigation that will
   not happen.

   pointer-events stays none (inherited from the overlay): the click target is
   the full-bleed anchor behind it, which is what makes "click anywhere on the
   banner" work. The hover styling is therefore driven from the anchor, below. */
/* No `gap` any more — the CTA is a bare label now that its trailing arrow
   glyph is gone, and a gap on a single-child inline-flex only pads nothing. */
.hero-banner-cta[b-z149l7q5qr] {
    display: inline-flex;
    align-items: center;
    margin-top: 2px;
    padding: 7px 14px;
    border-radius: var(--radius-pill, 999px);
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.34);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    backdrop-filter: blur(2px);
    transition: background var(--duration-hover, 150ms) var(--ease-standard, ease-out),
                border-color var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}


.hero-banner-link:hover .hero-banner-cta[b-z149l7q5qr],
.hero-banner-link:focus-visible .hero-banner-cta[b-z149l7q5qr] {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.6);
}

/* The whole banner is the link — say so with the cursor, since nothing else
   about a photograph suggests it is clickable. */
.hero-banner-link[b-z149l7q5qr] { cursor: pointer; }

@media (max-width: 768px) {
    .hero-banner-overlay[b-z149l7q5qr] {
        padding-inline-start: 24px;
        padding-inline-end: 20px;
    }

    .hero-banner-title[b-z149l7q5qr] {
        max-width: 80%;
        font-size: 19px;
    }

    .hero-carousel-dots[b-z149l7q5qr] {
        inset-inline-start: 24px;
    }
}

/* Hero Carousel */
/* Same --banner-h as .hero-banner-inner above — the carousel and the single
   banner are two renderings of the same slot and must not resolve to two
   different heights. */
.hero-carousel[b-z149l7q5qr] {
    position: relative;
    width: 100%;
    max-width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    height: 184px;
}

@media (min-width: 1024px) {
    .hero-carousel[b-z149l7q5qr] {
        height: 208px;
    }
}

.hero-carousel-track[b-z149l7q5qr] {
    display: flex;
    height: 100%;
    transition: transform 0.6s ease;
}

.hero-carousel-slide[b-z149l7q5qr] {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.hero-carousel-slide .hero-banner-img[b-z149l7q5qr] {
    transition: none;
}

/* Arrows — matches the mockup's ".arw" exactly: white circle, navy icon, a
   soft drop shadow instead of a dark translucent disc. Always visible (the
   mockup defines no hover-reveal for these), and BOTH cluster on the
   trailing edge (mockup's ".banner .arw"/".arw.l" — deliberately different
   from Project Updates' own arrows, which sit on opposite edges; that one's
   already confirmed correct, this is a genuine Hero-specific mockup choice,
   not an inconsistency to "fix"). Logical inset-inline-end (not the
   mockup's physical right) for RTL, per this app's own CSS rule. */
.hero-carousel-arrow[b-z149l7q5qr] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 31px;
    height: 31px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--bec-navy-700, #2B3484);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .45);
    transition: background 0.2s ease;
}

.hero-carousel-arrow svg[b-z149l7q5qr] {
    width: 15px;
    height: 15px;
}

.hero-carousel-arrow:hover[b-z149l7q5qr] {
    background: #fff;
}

.hero-carousel-arrow-left[b-z149l7q5qr] {
    inset-inline-end: 57px;
}

.hero-carousel-arrow-right[b-z149l7q5qr] {
    inset-inline-end: 16px;
}

/* Dots — matches the mockup's ".bn-dots": aligned under the headline (same
   44px start inset as .hero-banner-overlay, not centered), a small dim dot
   growing into a filled pill when active. */
.hero-carousel-dots[b-z149l7q5qr] {
    position: absolute;
    inset-inline-start: 44px;
    bottom: 14px;
    display: flex;
    gap: 5px;
    z-index: 2;
}

.hero-carousel-dot[b-z149l7q5qr] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .42);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, width 0.3s ease;
}

.hero-carousel-dot.active[b-z149l7q5qr] {
    width: 18px;
    border-radius: 3px;
    background: #fff;
}

.hero-carousel-dot:hover[b-z149l7q5qr] {
    background: rgba(255, 255, 255, .7);
}

/* Respect reduced-motion preference: autoplay itself is skipped in JS
   (intranet-mainpage.js), this covers the remaining CSS-driven motion
   (hover zoom, slide transition, dot scale) so nothing animates even
   when a slide change is triggered manually via the arrow/dot buttons. */
@media (prefers-reduced-motion: reduce) {
    .hero-banner-img[b-z149l7q5qr],
    .hero-carousel-track[b-z149l7q5qr],
    .hero-carousel-dot[b-z149l7q5qr],
    .hero-carousel-arrow[b-z149l7q5qr] {
        transition: none !important;
    }

    .hero-banner-inner:hover .hero-banner-img[b-z149l7q5qr] {
        transform: none;
    }
}

/* Swipe gesture surface (see initSwipe in wwwroot/js/intranet-mainpage.js).
   Repeated here rather than shared from the page's stylesheet because this
   element carries THIS component's CSS-isolation scope — a [data-swipe] rule
   written in Intranet-MainPage.razor.css cannot match it. */
.hero-carousel[data-swipe][b-z149l7q5qr] {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
/* /Components/Shared/Bec/Homepage/BecLockedCard.razor.rz.scp.css */
/* Same shell as BecSectionCard so a locked card sits in the grid exactly where the real
   one would. The head stays OUTSIDE the lid so the title reads normally; only the stage
   below it is frosted. */
.bec-locked-card[b-j6csress62] {
    position: relative;
    height: 100%;
    min-height: 220px;
    background: var(--bec-surface, #fff);
    border: 1px solid var(--bec-border, #E4E8EF);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-resting, 0 1px 2px rgba(16,24,40,.05));
    padding: var(--space-4, 16px);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    user-select: none;
}

.bec-locked-card__head[b-j6csress62] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--bec-border, #E4E8EF);
    color: var(--bec-ink, #24272A);
}

.bec-locked-card__head > i[b-j6csress62] { font-size: 12px; color: var(--bec-ink-3, #6B7280); }

.bec-locked-card__title[b-j6csress62] {
    flex: 1;
    min-width: 0;
    font: var(--type-h3-weight, 600) var(--type-h3-size, 14px)/var(--type-h3-lh, 1.35) var(--font-family-base, inherit);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bec-locked-card__badge[b-j6csress62] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--bec-pending, #B5842A);
    background: var(--bec-pending-bg, #FBF1DF);
    border: 1px solid rgba(181, 132, 42, 0.3);
    border-radius: 999px;
    padding: 2px 8px;
}

.bec-locked-card__stage[b-j6csress62] {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 8px;
}

/* ── skeleton shapes ─────────────────────────────────────────────────────── */
/* Bones are deliberately mid-tone (not the usual barely-there skeleton grey): they sit
   under a translucent lid and still have to read as a list / a grid / a picture.
   Thumbnails carry a faint blue-grey gradient so they read as images, not boxes. */
.bec-locked-card__body[b-j6csress62] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 2px;
}

.bec-locked-card__line[b-j6csress62],
.bec-locked-card__thumb[b-j6csress62],
.bec-locked-card__image[b-j6csress62],
.bec-locked-card__avatar[b-j6csress62],
.bec-locked-card__date[b-j6csress62],
.bec-locked-card__pill[b-j6csress62],
.bec-locked-card__cal span[b-j6csress62] {
    display: block;
    background: #D6DBE3;
    border-radius: 6px;
}

.bec-locked-card__line[b-j6csress62] { height: 10px; width: 100%; }
.bec-locked-card__line--heading[b-j6csress62] { height: 12px; background: #C3CAD6; }
.bec-locked-card__line--w80[b-j6csress62] { width: 80%; }
.bec-locked-card__line--w60[b-j6csress62] { width: 60%; }
.bec-locked-card__line--w40[b-j6csress62] { width: 40%; }

.bec-locked-card__item[b-j6csress62] { display: flex; flex-direction: column; gap: 7px; padding-bottom: 12px; border-bottom: 1px solid #EDF0F4; }
.bec-locked-card__item:last-child[b-j6csress62] { border-bottom: 0; }

.bec-locked-card__body--thumbs[b-j6csress62] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    align-content: start;
}
.bec-locked-card__thumb[b-j6csress62] { aspect-ratio: 4 / 3; border-radius: 8px; }
.bec-locked-card__thumb--0[b-j6csress62] { background: linear-gradient(135deg, #C9D3E3, #DCE3EE); }
.bec-locked-card__thumb--1[b-j6csress62] { background: linear-gradient(135deg, #D3D9E4, #C4CCDB); }
.bec-locked-card__thumb--2[b-j6csress62] { background: linear-gradient(160deg, #CFD8E6, #E1E6EE); }
.bec-locked-card__thumb--3[b-j6csress62] { background: linear-gradient(120deg, #BFC9DA, #D7DEE9); }

.bec-locked-card__image[b-j6csress62] {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    background: linear-gradient(135deg, #C2CCDD 0%, #D9E0EA 55%, #CBD4E2 100%);
}
.bec-locked-card__strip[b-j6csress62] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.bec-locked-card__cal-head[b-j6csress62] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bec-locked-card__pill[b-j6csress62] { width: 64px; height: 20px; border-radius: 999px; }
.bec-locked-card__cal[b-j6csress62] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.bec-locked-card__cal span[b-j6csress62] { height: 24px; border-radius: 5px; background: #E6EAF0; }
.bec-locked-card__cal span.is-event[b-j6csress62] { background: #B9C6DC; }
.bec-locked-card__date[b-j6csress62] { width: 38px; height: 38px; border-radius: 8px; flex: none; background: #C9D2E0; }

.bec-locked-card__post[b-j6csress62] { display: flex; gap: 10px; align-items: flex-start; }
.bec-locked-card__avatar[b-j6csress62] { width: 34px; height: 34px; border-radius: 50%; flex: none; background: #C3CAD6; }
.bec-locked-card__post-lines[b-j6csress62] { flex: 1; display: flex; flex-direction: column; gap: 7px; padding-top: 3px; }

/* ── the lid ─────────────────────────────────────────────────────────────── */
/* Light enough that the shapes underneath stay legible AS shapes; the blur does the
   "you cannot read this" work, not the white. */
.bec-locked-card__lid[b-j6csress62] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: inherit;
}

.bec-locked-card__lock[b-j6csress62] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bec-pending-bg, #FBF1DF);
    color: var(--bec-pending, #B5842A);
    font-size: 16px;
    margin-bottom: 6px;
    box-shadow: 0 4px 14px rgba(31, 37, 102, 0.14);
}

.bec-locked-card__lid-title[b-j6csress62] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bec-primary, #1e3c72);
    background: rgba(255, 255, 255, 0.85);
    padding: 3px 10px;
    border-radius: 999px;
}

.bec-locked-card__lid-sub[b-j6csress62] {
    font-size: 11.5px;
    color: var(--bec-ink-2, #4B5563);
    background: rgba(255, 255, 255, 0.75);
    padding: 2px 8px;
    border-radius: 999px;
}

@media (prefers-reduced-transparency: reduce) {
    .bec-locked-card__lid[b-j6csress62] { background: rgba(255, 255, 255, 0.8); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* /Components/Shared/Bec/Homepage/BecMediaGrid.razor.rz.scp.css */
/* Card chrome/header/View All now come from BecSectionCard — this just
   makes it stretch-fill its .home-col grid cell, same as the other
   BecSectionCard-based cards (see Intranet-MainPage.razor.css's
   `.home-col ::deep > .bec-section-card` rule, which this CssClass
   opts into via height:100%). */
.bec-media-grid-card[b-65vjiwr70j] {
    height: 100%;
}

.ann-empty[b-65vjiwr70j] {
    font-size: var(--type-meta-size, 12.5px);
    color: var(--bec-slate, #5A6168);
    padding: var(--space-3, 12px) 0;
}

.skel-block[b-65vjiwr70j] {
    display: inline-block;
    border-radius: var(--radius-sm, 4px);
    background: linear-gradient(90deg, var(--bec-bg-alt, #F6F8FC), var(--bec-tint-100, #EEF1FB), var(--bec-bg-alt, #F6F8FC));
    background-size: 300px 100%;
    animation: bec-media-shimmer-b-65vjiwr70j 1.4s infinite linear;
}

@keyframes bec-media-shimmer-b-65vjiwr70j {
    0% { background-position: -300px 0; }
    100% { background-position: 300px 0; }
}

.media-mosaic-skeleton[b-65vjiwr70j] {
    flex: 1;
    min-height: 0;
    border-radius: var(--radius-md, 12px);
}

/* Matches the Rev-4 mockup's ".mosaic" exactly: item 1 spans the full width
   on its own row, items 2-3 sit side by side below it. flex:1/min-height:0
   so it stretches to match its equal-height row-mates (Announcements/Top
   Resources), same pattern as every other card on this page. */
/* ── Carousel ──────────────────────────────────────────────────────────────
   Replaces the Rev-4 ".mosaic" (a lead tile plus two half-width tiles and a
   "+N More" overlay). The mosaic showed 3 of N items at postage-stamp size in
   a ~430px card; one item at the card's full width is legible, and rotation
   surfaces every item instead of only the first three. The card's own
   footprint is unchanged — flex:1/min-height:0 stretches it to its row-mates
   exactly as the mosaic did. Deliberately the same shape as the Project
   Updates card beside it, so the two picture cards read as one family. */
.media-carousel[b-65vjiwr70j] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The image band takes everything the dots do not. No aspect-ratio here: the
   card height is the fixed thing (its row is), so the frame fills it and
   object-fit:cover picks the crop — the same decision as .home-pu-frame. */
.media-carousel__frame[b-65vjiwr70j] {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--radius-md, 10px);
    background: var(--bec-bg-alt, #F6F8FC);
}

/* Every slide is in the DOM and stacked; switching is a class toggle, so all
   images are fetched once up front and changing slide costs no network and no
   server round trip. Opacity rather than display:none so the browser cannot
   skip decoding the inactive ones and flash on first show. */
.media-carousel__slide[b-65vjiwr70j] {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

.media-carousel__slide.is-active[b-65vjiwr70j] {
    opacity: 1;
    pointer-events: auto;
}

.media-carousel__slide img[b-65vjiwr70j],
.media-carousel__slide video[b-65vjiwr70j] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Biased to the top third — site/event photos usually have their subject
       there, so a centre crop cut through it more than the bottom margin needed. */
    object-position: center 25%;
    display: block;
}

/* Bottom-anchored caption over a gradient scrim — the mockup's ".mo-cap",
   kept verbatim so the card still reads the way it did, and matching
   .home-pu-cap on Project Updates. */
.media-carousel__cap[b-65vjiwr70j] {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    padding: 26px 12px 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    background: linear-gradient(to top, rgba(31, 37, 102, .85), rgba(31, 37, 102, .55) 45%, transparent);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.media-carousel__play[b-65vjiwr70j] {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(31, 37, 102, .25);
    pointer-events: none;
}

/* z-index 2 — above the caption scrim (1) so the arrows stay clickable. */
.media-carousel__nav[b-65vjiwr70j] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    z-index: 2;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: background var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

.media-carousel__nav:hover[b-65vjiwr70j] { background: #fff; }
.media-carousel__nav--prev[b-65vjiwr70j] { inset-inline-start: 8px; }
.media-carousel__nav--next[b-65vjiwr70j] { inset-inline-end: 8px; }

.media-carousel__counter[b-65vjiwr70j] {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}

.media-carousel__dots[b-65vjiwr70j] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 8px 0 0;
    flex: none;
}

.media-carousel__dot[b-65vjiwr70j] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--BEC-colorNeutralStroke2, #d1d5db);
    border: 0;
    cursor: pointer;
    padding: 0;
    transition: all var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

.media-carousel__dot.is-active[b-65vjiwr70j] {
    background: var(--bec-accent-blue, var(--bec-navy-700, #2B3484));
    width: 16px;
    border-radius: 3px;
}

/* Swipe surface — pan-y lets vertical page scrolling through the card still
   work while horizontal drags reach the swipe handler. */
.media-carousel[data-swipe][b-65vjiwr70j] {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
/* /Components/Shared/Bec/Homepage/BecMiniCalendar.razor.rz.scp.css */
/* flex:1/min-height:0 — lets this shrink inside BecSectionCard's bounded-
   height body (see .home-col ::deep > .bec-section-card, height:100%) so
   the grid can stay compact and the event panel below gets its own scroll
   region instead of pushing the whole page down. */
.bec-mini-cal[b-cb43ss1pgh] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.bec-mini-cal__nav[b-cb43ss1pgh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.bec-mini-cal__nav-btn[b-cb43ss1pgh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: var(--bec-bg-alt, #F6F8FC);
    border-radius: var(--radius-sm, 6px);
    color: var(--bec-ink, #24272A);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.bec-mini-cal__nav-btn:hover:not(:disabled)[b-cb43ss1pgh] {
    background: var(--bec-tint-100, #EEF1FB);
}

.bec-mini-cal__nav-btn:disabled[b-cb43ss1pgh] {
    opacity: 0.5;
    cursor: not-allowed;
}

.bec-mini-cal__month[b-cb43ss1pgh] {
    font: var(--type-h3-weight, 600) var(--type-body-size, 13px)/1.3 var(--font-family-base, inherit);
    color: var(--bec-ink, #24272A);
}

.bec-mini-cal__grid[b-cb43ss1pgh] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    flex-shrink: 0;
}

.bec-mini-cal__day-name[b-cb43ss1pgh] {
    text-align: center;
    font-size: var(--type-caption-size, 10px);
    font-weight: 600;
    color: var(--bec-gray, #7A828C);
    padding-bottom: 2px;
}

/* Fixed short height, NOT aspect-ratio:1 — aspect-ratio was forcing each
   cell's height to match its (wide, 1fr) column width, making rows ~40px+
   tall regardless of min-height and leaving the event panel below almost no
   room. A flat height keeps rows short no matter how wide the card is. */
.bec-mini-cal__day[b-cb43ss1pgh] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    border: none;
    background: none;
    border-radius: var(--radius-sm, 6px);
    font-size: var(--type-caption-size, 11px);
    color: var(--bec-ink, #24272A);
    cursor: pointer;
}

.bec-mini-cal__day:hover[b-cb43ss1pgh] {
    background: var(--bec-bg-alt, #F6F8FC);
}

.bec-mini-cal__day--other[b-cb43ss1pgh] {
    color: var(--bec-gray, #7A828C);
    opacity: 0.5;
}

/* "Today" — light tint circle, matching the mockup's lighter-highlight days
   (was bold text only, no fill). */
.bec-mini-cal__day--today[b-cb43ss1pgh] {
    font-weight: 700;
    color: var(--bec-navy-700, #2B3484);
    background: var(--bec-tint-100, #EEF1FB);
}

/* "Has event" — solid navy circle, white text (was a small dot under a
   plain day), matching the mockup's filled event-day circles. */
.bec-mini-cal__day--has-event[b-cb43ss1pgh] {
    background: var(--bec-navy-900, #1F2566);
    color: #fff;
    font-weight: 700;
}

.bec-mini-cal__day--has-event:hover[b-cb43ss1pgh] {
    background: var(--bec-navy-700, #2B3484);
}

/* Selected (explicit user click) always wins over today/has-event. */
.bec-mini-cal__day--selected[b-cb43ss1pgh] {
    background: var(--bec-navy-900, #1F2566);
    color: #fff;
}

.bec-mini-cal__day--selected:hover[b-cb43ss1pgh] {
    background: var(--bec-navy-700, #2B3484);
}

.bec-mini-cal__dot[b-cb43ss1pgh] {
    display: none;
}

/* The scroll region — flex:1/min-height:0 lets it take whatever space the
   (now-compact) calendar grid above doesn't use, and scrolls internally
   past ~2 rows instead of growing the card / pushing the page down. */
.bec-mini-cal__event-panel[b-cb43ss1pgh] {
    flex: 1;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--bec-border, #E4E8EF);
    padding-top: var(--space-2, 8px);
    overflow: hidden;
}

.bec-mini-cal__event-label[b-cb43ss1pgh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: var(--type-eyebrow-weight, 600) var(--type-caption-size, 11px)/1.2 var(--font-family-base, inherit);
    text-transform: uppercase;
    letter-spacing: var(--type-eyebrow-ls, 0.06em);
    color: var(--bec-gray, #7A828C);
    margin-bottom: var(--space-2, 8px);
    flex-shrink: 0;
}

.bec-mini-cal__clear[b-cb43ss1pgh] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bec-gray, #7A828C);
    font-size: 11px;
    padding: 2px;
}

.bec-mini-cal__event-list[b-cb43ss1pgh] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
    overflow-y: auto;
}

.bec-mini-cal__event-empty[b-cb43ss1pgh] {
    font-size: var(--type-meta-size, 12px);
    color: var(--bec-gray, #7A828C);
    padding: var(--space-2, 8px) 0;
}

.bec-mini-cal__event-loading[b-cb43ss1pgh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.bec-mini-cal__event-sk[b-cb43ss1pgh] {
    height: 40px;
    border-radius: var(--radius-sm, 6px);
    background: linear-gradient(90deg, var(--bec-bg-alt, #F6F8FC) 25%, var(--bec-tint-100, #EEF1FB) 37%, var(--bec-bg-alt, #F6F8FC) 63%);
    background-size: 400% 100%;
    animation: bec-mini-cal-shimmer-b-cb43ss1pgh 1.4s ease infinite;
}

@keyframes bec-mini-cal-shimmer-b-cb43ss1pgh {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
/* /Components/Shared/Bec/Homepage/BecPostCard.razor.rz.scp.css */
/* One highlight as a fixed-shape list row. Nothing here may grow with content:
   the text is clamped, the thumbnail is a fixed square, and the meta line is one
   line — so N rows are always N x the same height and the feed can scroll instead
   of stretching the whole bottom row of the home page. See BecPostCard.razor. */
.bec-post-row[b-lkvo4da0yf] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 10px);
    padding: 10px var(--space-3, 12px);
    border-radius: var(--radius-md, 10px);
    cursor: pointer;
    background: transparent;
    transition: background var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

.bec-post-row:hover[b-lkvo4da0yf],
.bec-post-row:focus-visible[b-lkvo4da0yf] {
    background: var(--bec-bg-alt, #F6F8FC);
}

.bec-post-row + .bec-post-row[b-lkvo4da0yf] {
    border-top: 1px solid var(--bec-border-soft, #EEF1F5);
}

.bec-post-row__body[b-lkvo4da0yf] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Name, status badge and date share one line. The date is pushed to the end so
   the three rows' dates align down the right edge of the text column. */
.bec-post-row__top[b-lkvo4da0yf] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.bec-post-row__name[b-lkvo4da0yf] {
    font-size: var(--type-body-size, 13px);
    font-weight: 600;
    color: var(--bec-ink, #24272A);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.bec-post-row__date[b-lkvo4da0yf] {
    margin-inline-start: auto;
    flex: none;
    font-size: var(--type-caption-size, 11px);
    color: var(--bec-gray, #7A828C);
    white-space: nowrap;
}

/* Two lines, then an ellipsis. word-break stays normal so a long word wraps at a
   space rather than shattering; the full text is one click away in the panel. */
.bec-post-row__text[b-lkvo4da0yf] {
    margin: 0;
    font-size: var(--type-meta-size, 12.5px);
    line-height: 1.45;
    color: var(--bec-slate, #5A6168);
    word-break: normal;
    overflow-wrap: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bec-post-row__meta[b-lkvo4da0yf] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 1px;
}

.bec-post-row__reaction[b-lkvo4da0yf],
.bec-post-row__comments[b-lkvo4da0yf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    font-size: var(--type-caption-size, 11.5px);
    color: var(--bec-gray, #7A828C);
}

.bec-post-row__reaction[b-lkvo4da0yf] { cursor: pointer; }
.bec-post-row__reaction:hover[b-lkvo4da0yf] { color: var(--bec-accent-blue, var(--bec-navy-700, #2B3484)); }
.bec-post-row__reaction--active[b-lkvo4da0yf] { color: var(--bec-accent-blue, var(--bec-navy-700, #2B3484)); font-weight: 600; }

/* Fixed 48px square, so a row with a photo is exactly as tall as one without. */
.bec-post-row__thumb[b-lkvo4da0yf] {
    position: relative;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md, 8px);
    background-color: var(--bec-bg-alt, #F6F8FC);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--bec-border, #E4E8EF);
    overflow: hidden;
}

/* "+N more attachments" — corner badge rather than extra tiles, so the count
   costs no width at all. */
.bec-post-row__more[b-lkvo4da0yf] {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    padding: 1px 4px;
    border-start-start-radius: var(--radius-sm, 6px);
    background: rgba(31, 37, 102, 0.78);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.4;
}

.bec-post-row__play[b-lkvo4da0yf] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(31, 37, 102, 0.32);
    color: #fff;
}

.bec-post-row__play svg[b-lkvo4da0yf] { width: 18px; height: 18px; }

/* Duplicated from BecStatTile — CSS isolation scopes that copy to its own
   component, and the app has no global utility for this yet. */
.bec-visually-hidden[b-lkvo4da0yf] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Shared/Bec/Homepage/BecPriorityBanner.razor.rz.scp.css */
/* Full-bleed notice band, not a card.

   Was an inset Fluent alert: rounded, 1px hard border, its own bottom margin, and
   sitting inside the page's content padding while the Quick Access strip directly
   below it broke out to full width. Three separate problems in the reported
   screenshot — mismatched edges, a band of dead ground between the two, and a
   palette from the wrong token set.

   Colours now come from the handoff set the rest of this page uses
   (--bec-pending / --bec-pending-bg) rather than the legacy Fluent pair
   (--BEC-Warning-Subtle #fff4ce on --BEC-Warning-Main #ffb900). That mismatch was
   most of why it read as a generic alert box dropped onto the page.

   Severity is carried by a 3px rule on the leading edge instead of an outline
   around the whole box, so the band reads as chrome — the same family as the navy
   header above it — while still being unmistakably a warning.

   HORIZONTAL PADDING is driven by --bec-priority-inline, set by whoever places
   this component. The home page sets it to that page's own responsive side
   padding (see .home-priority-breakout) so the text lines up with the content
   below even though the band itself is full width. The fallback keeps the
   component sane if it is ever dropped somewhere that does not set it. */

.bec-priority-banner[b-976ekfuonm] {
    display: flex;
    align-items: center;
    gap: var(--BEC-spacingHorizontalM, 12px);
    padding-block: 9px;
    padding-inline: var(--bec-priority-inline, 16px);
    font-size: var(--BEC-fontSizeBase300, 13px);
    line-height: 1.4;
    color: var(--bec-ink, #24272A);

    /* No radius and no margin: this shares an edge with whatever follows it. */
    border: none;
    border-radius: 0;
    margin: 0;
}

/* Leading severity rule + hairline foot. inset box-shadow rather than border-left
   so the rule cannot be flipped to the wrong side in RTL — it follows the inline
   start of the box. */
.bec-priority-banner--info[b-976ekfuonm] {
    background: var(--bec-info-bg, #EEF1FB);
    border-bottom: 1px solid rgba(111, 127, 175, 0.30);
    box-shadow: inset 3px 0 0 var(--bec-info, #6F7FAF);
}

.bec-priority-banner--warning[b-976ekfuonm] {
    background: var(--bec-pending-bg, #FBF1DF);
    border-bottom: 1px solid rgba(181, 132, 42, 0.28);
    box-shadow: inset 3px 0 0 var(--bec-pending, #B5842A);
}

.bec-priority-banner--critical[b-976ekfuonm] {
    background: var(--bec-danger-bg, #FBEAE8);
    border-bottom: 1px solid rgba(192, 57, 43, 0.28);
    box-shadow: inset 3px 0 0 var(--bec-danger, #C0392B);
}

/* Severity glyph — a filled disc, so the meaning survives without colour alone
   (the app's status rule: text + icon, never colour on its own). */
.bec-priority-banner__icon[b-976ekfuonm] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    color: #fff;
}

.bec-priority-banner--info .bec-priority-banner__icon[b-976ekfuonm] { background: var(--bec-info, #6F7FAF); }
.bec-priority-banner--warning .bec-priority-banner__icon[b-976ekfuonm] { background: var(--bec-pending, #B5842A); }
.bec-priority-banner--critical .bec-priority-banner__icon[b-976ekfuonm] { background: var(--bec-danger, #C0392B); }

.bec-priority-banner__text[b-976ekfuonm] {
    flex: 1;
    min-width: 0;
}

.bec-priority-banner__action[b-976ekfuonm] {
    flex-shrink: 0;
    border-radius: var(--BEC-borderRadiusSmall, 4px);
    padding: 5px 11px;
    font-size: var(--BEC-fontSizeBase200, 12px);
    font-weight: var(--BEC-fontWeightMedium, 600);
    cursor: pointer;
    /* Reads on the tinted band without introducing another colour: a translucent
       white fill so it lifts off the tint, outlined in the severity hue. */
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid currentColor;
    color: inherit;
    transition: background var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

.bec-priority-banner--warning .bec-priority-banner__action[b-976ekfuonm] { color: #7A5A1C; border-color: rgba(181, 132, 42, 0.55); }
.bec-priority-banner--info .bec-priority-banner__action[b-976ekfuonm] { color: #3E4A70; border-color: rgba(111, 127, 175, 0.55); }
.bec-priority-banner--critical .bec-priority-banner__action[b-976ekfuonm] { color: #8E2B21; border-color: rgba(192, 57, 43, 0.55); }

.bec-priority-banner__action:hover[b-976ekfuonm] { background: #fff; }

.bec-priority-banner__action:focus-visible[b-976ekfuonm],
.bec-priority-banner__dismiss:focus-visible[b-976ekfuonm] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.bec-priority-banner__dismiss[b-976ekfuonm] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
}

.bec-priority-banner__dismiss:hover[b-976ekfuonm] {
    opacity: 1;
}

/* Phones: the action drops under the message rather than squeezing it to a
   couple of words per line. */
@media (max-width: 560px) {
    .bec-priority-banner[b-976ekfuonm] {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .bec-priority-banner__text[b-976ekfuonm] {
        flex-basis: 100%;
        order: 2;
    }

    .bec-priority-banner__action[b-976ekfuonm] {
        order: 3;
        margin-inline-start: auto;
    }
}
/* /Components/Shared/Bec/Homepage/BecQuickAccessRow.razor.rz.scp.css */
/* Full-bleed band — matches the mockup's ".strip" exactly: a tinted band,
   no card chrome, no title, sitting between the header and the hero banner.
   Its own horizontal breakout margin lives on the host page's wrapper
   (.home-qa-strip-breakout in Intranet-MainPage.razor.css); this component
   only owns the band's own background/padding.

   (Briefly inset to the page's content box with card chrome, to line its edges
   up with the hero. The received design confirms full-bleed is the intent: the
   strip spans the whole content area edge to edge and the hero sits inset
   beneath it, so the band reads as an extension of the header rather than as
   another card in the stack.) */
.bec-qa[b-y3lhzxg73r] {
    background: var(--bec-accent-sand-tint, #F5F1EC);
    padding: 7px 10px;
    border-bottom: 1px solid var(--bec-border, #E4E8EF);
}

.bec-qa__row[b-y3lhzxg73r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 7px;
}

/* One white box per item with a colored 3px top bar (category color, not
   per-item) — matches the mockup's ".qa"/".qa::after" exactly, replacing
   the earlier tinted-icon-square tile. ::before is the mockup's own hover
   wash (a flat navy tint at 5% opacity on hover), kept as a pseudo-element
   rather than a background-color transition so it layers over the white
   box without fighting the top bar's own background. */
.bec-qa-tile[b-y3lhzxg73r] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 64px;
    padding: 4px 8px;
    background: var(--bec-surface, #fff);
    border: none;
    border-radius: 8px;
    color: var(--bec-navy-900, #1F2566);
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

.bec-qa-tile[b-y3lhzxg73r]::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: var(--bec-accent-blue, var(--bec-navy-700));
}

.bec-qa-tile--sage[b-y3lhzxg73r]::after {
    background: var(--bec-accent-sage, #596D6D);
}

.bec-qa-tile[b-y3lhzxg73r]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bec-navy-900, #1F2566);
    opacity: 0;
    transition: opacity var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

.bec-qa-tile:hover[b-y3lhzxg73r]::before {
    opacity: .05;
}

.bec-qa-tile:hover[b-y3lhzxg73r] {
    box-shadow: var(--shadow-hover, 0 6px 16px rgba(16,24,40,.10));
}

.bec-qa-tile:disabled[b-y3lhzxg73r] {
    color: var(--bec-gray, #7A828C);
    cursor: default;
}

.bec-qa-tile:disabled:hover[b-y3lhzxg73r]::before {
    opacity: 0;
}

.bec-qa-tile:disabled:hover[b-y3lhzxg73r] {
    box-shadow: none;
}

.bec-qa-tile:disabled:hover .bec-qa-tile__icon[b-y3lhzxg73r] {
    transform: none;
}

/* A tile that is not open yet says so in text, in its corner, without changing its size. */
.bec-qa-tile__soon[b-y3lhzxg73r] {
    position: absolute;
    inset-block-start: 7px;
    inset-inline-end: 8px;
    font: 600 10px/1 var(--font-family-base, inherit);
    color: var(--bec-gray, #7A828C);
}

.bec-qa-tile__icon[b-y3lhzxg73r] {
    position: relative;
    flex-shrink: 0;
    transition: transform var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

.bec-qa-tile:hover .bec-qa-tile__icon[b-y3lhzxg73r] {
    transform: translateY(-2px);
}

.bec-qa-tile__label[b-y3lhzxg73r] {
    position: relative;
    font: 700 12px/1.2 var(--font-family-base, inherit);
    letter-spacing: 0.015em;
    text-align: center;
}

.skel-block[b-y3lhzxg73r] {
    display: inline-block;
    border-radius: var(--radius-sm, 4px);
    background: linear-gradient(90deg, var(--bec-bg-alt, #f5f5f5), var(--bec-border, #f0f0f0), var(--bec-bg-alt, #f5f5f5));
    background-size: 300px 100%;
    animation: bec-qa-shimmer-b-y3lhzxg73r 1.4s infinite linear;
}

@keyframes bec-qa-shimmer-b-y3lhzxg73r {
    0% { background-position: -300px 0; }
    100% { background-position: 300px 0; }
}

@media (max-width: 640px) {
    .bec-qa__row[b-y3lhzxg73r] {
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    }}
/* /Components/Shared/Bec/Homepage/BecResourceList.razor.rz.scp.css */
/* card/card-head/sec-title/divider now handled by BecSectionCard (see
   BecResourceList.razor). res-item/res-ico/res-name (real rows) now handled by
   BecResourceTile — .res-item/.res-item--skeleton here are the loading-skeleton
   layout only. */
.bec-resource-list-card[b-bh9we2gygu] {
    height: 100%;
}

/* Single-column list, matching the mockup's `.res-scroll` — a plain
   flex-start column that scrolls.

   justify-content:space-evenly was here to spread a short list over the
   card's full height. The claim in the previous comment — that space-evenly
   "has no visible effect" once the content overflows — is not how flex
   alignment behaves: with overflow, the free space is NEGATIVE, and
   space-evenly distributes that negative space too, pushing the first item
   above the scroll container's start edge and the last item past its end.
   Overflow past the start edge is unreachable by scrolling (there is no
   negative scroll position), so the first row was clipped permanently and
   the last row ("BEC Arabia Newsletters" in the reported screenshot) was cut
   off at the card's bottom edge. flex-start is the only alignment that is
   safe to combine with overflow.

   The short-list case that space-evenly was solving is handled by the tiles
   themselves instead: `.bec-res-tile` is a fixed 76px row, so 4-6 of them
   plus the 8px gaps fill this card at its row height without any
   distribution trick. */
.res-list[b-bh9we2gygu] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-2, 8px);
    overflow-y: auto;
    /* Matches the mockup's .res-scroll — the thin rail sits in the 6px the
       list gives back with the negative margin, so it never eats tile width. */
    padding-inline-end: 6px;
    margin-inline-end: -6px;
    scrollbar-width: thin;
    scrollbar-color: var(--bec-border, #D5D6E6) transparent;
}

.res-list[b-bh9we2gygu]::-webkit-scrollbar { width: 5px; }
.res-list[b-bh9we2gygu]::-webkit-scrollbar-thumb { background: var(--bec-border, #D5D6E6); border-radius: 3px; }
.res-list[b-bh9we2gygu]::-webkit-scrollbar-track { background: transparent; }

.res-item--skeleton[b-bh9we2gygu] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: var(--space-2, 8px) 0;
    pointer-events: none;
}

.skel-block[b-bh9we2gygu] {
    display: inline-block;
    border-radius: var(--radius-sm, 4px);
    background: linear-gradient(90deg, var(--bec-bg-alt, #F6F8FC), var(--bec-tint-100, #EEF1FB), var(--bec-bg-alt, #F6F8FC));
    background-size: 300px 100%;
    animation: bec-res-shimmer-b-bh9we2gygu 1.4s infinite linear;
}

@keyframes bec-res-shimmer-b-bh9we2gygu {
    0% { background-position: -300px 0; }
    100% { background-position: 300px 0; }
}

.region-empty[b-bh9we2gygu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 20px 12px;
    color: var(--bec-slate, #5A6168);
}

.region-empty .re-ico[b-bh9we2gygu] {
    color: var(--bec-border, #E4E8EF);
}

.region-empty .re-t[b-bh9we2gygu] {
    font-size: var(--type-meta-size, 12.5px);
    font-weight: 500;
    line-height: 1.4;
    color: var(--bec-slate, #5A6168);
}


/* The Policies dropdown row that used to head this card was removed on request;
   its .res-policies* rules went with it. The card is a plain list of
   BecResourceTile rows now — nothing here styles anything but the list frame,
   the loading skeleton and the empty state. */
/* /Components/Shared/Bec/Homepage/BecResourceTile.razor.rz.scp.css */
/* Matches the Rev-4 mockup's ".res" exactly: a fixed-height tinted row with a
   masked photo bleeding in from the end edge, title on top of it. Was a flat
   borderless icon+label row (DESIGN_SYSTEM.md §11 supersedes the earlier,
   more conservative divergence — see git history — now that the actual
   Rev-4 mirror artifact is confirmed as the target, not just its general
   spirit). */
/* The wrapper, not the tile, is the list's flex item and the chooser's
   positioning context — the tile itself is either an <a> or a <button> and the
   chooser has to overlay it without being inside it (a <button> cannot contain
   the chooser's <a> links). */
.bec-res-tile-wrap[b-t551u4rjov] {
    position: relative;
    flex: none;
    border-radius: var(--radius-md, 12px);
}

.bec-res-tile[b-t551u4rjov] {
    position: relative;
    display: flex;
    align-items: center;
    /* flex:none — this is an item of the scrolling `.res-list` column
       (BecResourceList.razor.css). Without it the 76px is only a hint: flex
       shrinks the rows to fit the card and the photo band collapses instead
       of the list scrolling. The mockup states the same pair on `.res`. */
    flex: none;
    height: 76px;
    padding-inline: var(--space-4, 16px);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    background: var(--bec-accent-blue-tint, #EAEBF3);
    text-decoration: none;
    color: var(--bec-navy-900, #1F2566);
    transition: background var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

.bec-res-tile:hover[b-t551u4rjov] {
    background: var(--bec-tint-100, #EEF1FB);
}

/* Photo bleed — width:52% + a mask fading it out toward the title side so
   text stays legible without a separate scrim. inset-inline-end (not right)
   for RTL, though the mask's own gradient direction stays physical ("to
   right") — a mirrored fade in RTL is a known, minor gap, not fixed here. */
.bec-res-tile__img[b-t551u4rjov] {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 52%;
    background-size: cover;
    background-position: center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 42%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 42%, #000 100%);
}

/* No image uploaded — the SAME element, the same 52% slot and the same mask,
   filled with one of the --bec-placeholder-* gradients instead of a photo (see
   BecResourceTile.razor's ArtStyle). Because the fill goes through
   background-image on the element the mask is already applied to, the
   placeholder fades in from the title exactly like a photo does; there is no
   separate "empty" treatment to design or to keep in step.

   This replaced a 40%-wide solid colour block with a centred glyph, which read
   as a hard-edged UI chip rather than as artwork and made a resource without a
   picture look like a different component from one with a picture.

   background-color is a floor, not the design: if --bec-placeholder-* fails to
   resolve (anything rendering this outside .bec-shell), the slot still carries
   a faint tint under the mask instead of vanishing. */
.bec-res-tile__img--placeholder[b-t551u4rjov] {
    background-color: var(--bec-accent-blue-tint, #EAEBF3);
}

/* Title + language chip share one column over the artwork — the mockup's
   ".res-t", which is what caps them both at 62% so neither runs into the
   photo's opaque end. */
.bec-res-tile__text[b-t551u4rjov] {
    position: relative;
    z-index: 1;
    min-width: 0;
    max-width: 62%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.bec-res-tile__title[b-t551u4rjov] {
    font: 700 13px/1.3 var(--font-family-base, inherit);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mockup's ".res-lang" — sage chip, only rendered when the item actually has
   more than one language version, so it reads as information rather than
   decoration on every row. */
.bec-res-tile__lang[b-t551u4rjov] {
    flex: none;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--bec-accent-sage, #596D6D);
    background: #D9E1E1;
}

/* ── Language chooser ─────────────────────────────────────────────────── */
/* Covers the tile rather than floating beside it: the row is only 76px tall
   inside a scrolling list with overflow:hidden on the card, so a popover
   anchored outside the tile would be clipped by the list. Covering it also
   means the tile itself cannot be clicked while a choice is pending, which is
   the behaviour a modal choice should have without needing a backdrop. */
.bec-res-tile--chooser[b-t551u4rjov] {
    width: 100%;
    border: none;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.bec-res-tile__chooser[b-t551u4rjov] {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline: var(--space-4, 16px);
    border-radius: var(--radius-md, 12px);
    background: var(--bec-navy-900, #1F2566);
    color: #fff;
}

.bec-res-tile__chooser-label[b-t551u4rjov] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.bec-res-tile__chooser-opt[b-t551u4rjov] {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border-radius: var(--radius-sm, 6px);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

.bec-res-tile__chooser-opt:hover[b-t551u4rjov],
.bec-res-tile__chooser-opt:focus-visible[b-t551u4rjov] {
    background: rgba(255, 255, 255, 0.24);
}

.bec-res-tile__chooser-close[b-t551u4rjov] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.bec-res-tile__chooser-close:hover[b-t551u4rjov] { background: rgba(255, 255, 255, 0.16); color: #fff; }
.bec-res-tile__chooser-close .material-symbols-outlined[b-t551u4rjov] { font-size: 16px; }

/* The chooser is a single 76px row shared by two options plus a close button —
   below ~260px of tile width the options stop being readable, so the row grows
   into two lines instead of squeezing them. */
@media (max-width: 420px) {
    .bec-res-tile__chooser[b-t551u4rjov] {
        flex-wrap: wrap;
        align-content: center;
        gap: 6px;
        padding-block: 8px;
    }

    .bec-res-tile__chooser-label[b-t551u4rjov] { width: 100%; }
}
/* /Components/Shared/Bec/Homepage/BecStatTile.razor.rz.scp.css */
/* An independent CARD, not a column inside a shared one.

   This used to render no box of its own — the border/radius/shadow lived on a
   wrapper holding all three, and each tile only drew a hairline border-inline-start
   as a divider. That made the row read as 1 + 1 + 1: the gap between the identity
   card and the stats block was 10px, the "gap" between the three stats was a 1px
   line, and the gap to New Hire was 12px again. Three different spacings for what
   are conceptually five peer cards.

   Each tile now carries its own chrome and sits directly on the row's grid, so the
   single `gap` on .home-upper-layout is the only spacing anywhere in the row. */
.bec-stat-tile[b-26l860m6ey] {
    position: relative;
    container-type: inline-size;
    container-name: statcard;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 18px var(--space-4, 16px) 14px;
    background: var(--bec-surface, #fff);
    border: 1px solid var(--bec-border, #E4E8EF);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-resting, 0 1px 2px rgba(16,24,40,.05));
    overflow: hidden;
}

.bec-stat-tile:has(.bec-stat-tile__stretch):hover[b-26l860m6ey] {
    background: var(--bec-bg-alt, #F6F8FC);
}

.bec-stat-tile__label[b-26l860m6ey] {
    /* Size stays the mockup's 11px; tracking is 0.06em rather than 0.08em and
       the reveal-button gutter 18px rather than 22px — together ~12px of
       headroom on a label that has to hold "LAST ATTENDANCE" on two lines.
       The gutter still clears the 22px reveal button, which is inset 14px
       from the tile edge and so intrudes only 8px past the tile's own 20px
       padding. */
    font: 700 11px/1.3 var(--font-family-base, inherit);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bec-gray, #7A828C);
    padding-inline-end: 18px; /* clears the absolutely-positioned reveal button */

    /* Wraps BETWEEN WORDS, never inside one, and is clamped to two lines.

       This replaces overflow-wrap/word-break:break-word, which is a different
       policy entirely: break-word licenses a break at ANY character, so in a
       ~30px column "LEAVE BALANCE" came apart one letter per line.
       word-break:normal cannot do that — "BALANCE" is atomic — so the failure
       mode is structurally impossible now, not merely unlikely.

       The mockup's own answer is nowrap + ellipsis. Measured against the real
       stylesheet at the width this tile actually gets (155px at a 1920
       viewport), that truncates "LEAVE BALANCE" and "PERFORMANCE" — the
       mockup has the same geometry and would truncate them too. Two legible
       lines beat a clipped one for a metric label, so this deviates
       deliberately.

       min-height reserves the second line whether or not a given label uses
       it, so "PERFORMANCE" wrapping and "LEAVE BALANCE" wrapping do not put
       their tiles' values on different baselines — the three numbers stay on
       one line across the card, which is the whole point of the shared card.
       2.6em = the 2 lines at this 1.3 line-height. */
    word-break: normal;
    overflow-wrap: normal;

    /* One line reserved here, two reserved at <=190px (see the container query
       at the bottom of this file) — it used to reserve two at every width.

       The reservation exists so a wrapped label cannot put its tile's value on
       a different baseline from its neighbours. But above 190px none of the
       three labels wrap: the longest, "LAST ATTENDANCE", needs ~110px at this
       size and has ~141px of text width even at 191px. So the second line was
       reserved and never used, costing ~15px of the row's 160px in every tile.

       That 15px is what the caption needs when a long status wraps — "Does Not
       Meet Expectations" and "Partially Meet Expectations" are both real
       ResultCode outputs, and they are clamped to two lines. Without this, two
       lines did not fit and the caption was clipped; with it, they do. */
    min-height: 1.3em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* z-index:1 — .bec-stat-tile__stretch (below) is position:absolute and would
   otherwise sit above this button in the stacking order regardless of DOM
   position, swallowing the click meant for "hide again" once revealed. Only
   matters in the revealed state — while masked, .bec-stat-tile__stretch isn't
   in the DOM at all (see the .razor's IsMasked guard), so there's nothing to
   stack above yet, but keeping this unconditional is simpler than two rules. */
.bec-stat-tile__reveal-btn[b-26l860m6ey] {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: var(--radius-md, 8px);
    /* Sits a step lighter than the label it shares a line with, so it reads as
       an affordance you can find rather than a second piece of content
       competing with the metric. It gains weight on hover, not before. */
    color: var(--bec-border, #C6CCD6);
    cursor: pointer;
    transition: background var(--duration-hover, 150ms) var(--ease-standard, ease-out),
                color var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

.bec-stat-tile__reveal-btn svg[b-26l860m6ey] { width: 16px; height: 16px; display: block; }

.bec-stat-tile__reveal-btn:hover[b-26l860m6ey],
.bec-stat-tile__reveal-btn:focus-visible[b-26l860m6ey] {
    background: var(--bec-accent-blue-tint, var(--bec-bg-alt, #F6F8FC));
    color: var(--bec-accent-blue, var(--bec-navy-700));
}

/* While masked the control is the tile's primary action, so it is not left at
   the faint resting colour — it reads as "there is something to do here". */
.bec-stat-tile--hidden .bec-stat-tile__reveal-btn[b-26l860m6ey] { color: var(--bec-gray, #7A828C); }

/* Editorial oversized numeral — DESIGN_SYSTEM.md §10's documented exception,
   using the --type-stat-value-* / --font-family-display tokens (tokens.css).
   display:flex + align-items:baseline (matches the mockup's .stat-v) keeps
   the unit sitting on the number's baseline rather than its box-top.
   overflow-wrap/word-break are a safety net for a value wider than the tile. */
.bec-stat-tile__value[b-26l860m6ey] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: nowrap;
    margin-top: 12px;
    font-family: var(--font-family-display, var(--font-family-base));
    font-size: var(--type-stat-value-size, 34px);
    font-weight: var(--type-stat-value-weight, 300);
    line-height: var(--type-stat-value-lh, 1);
    letter-spacing: -0.02em;
    color: var(--bec-navy-900, #1F2566);
    /* Matches the mockup's `.stat-v{flex-wrap:nowrap;overflow:hidden}` — a
       metric is a single glyph run, there is no correct place to break one.
       break-word here is what turned the masked "Hidden" state into
       "Hidd / en". */
    overflow: hidden;
    white-space: nowrap;
}

/* Muted (no data yet) intentionally does NOT get the editorial treatment —
   emphasis is for a real number worth drawing the eye to, not an empty "--"
   placeholder. Same size/weight this tile used before §10 existed. */
.bec-stat-tile__value--muted[b-26l860m6ey] {
    margin-top: 16px;
    font-family: var(--font-family-base, inherit);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bec-gray, #7A828C);
}

/* Redaction. Bullets at the SAME size, weight and line-height as a real value,
   so the tile's silhouette does not change when you reveal it — the number
   simply resolves in place instead of the row reflowing around a word that was
   standing in for it.

   This was the literal word "Hidden" at 18px semibold: a sentence sitting where
   a numeral belongs, in a different size and weight from the two tiles beside
   it, which is what made the masked row read as broken rather than as private.
   Bullets are the convention every banking app uses for exactly this, and they
   carry no information even if CSS fails to load — unlike the mockup's
   blur-the-real-number approach, which keeps the value in the DOM. */
.bec-stat-tile__value--hidden[b-26l860m6ey] {
    margin-top: 16px;
    font-family: var(--font-family-base, inherit);
    font-size: var(--type-stat-value-size, 34px);
    font-weight: 500;
    line-height: var(--type-stat-value-lh, 1);
    letter-spacing: 0.06em;
    color: var(--bec-border, #C6CCD6);
    user-select: none;
}

.bec-stat-tile__unit[b-26l860m6ey] {
    font-size: 13px;
    font-weight: 500;
    color: var(--bec-slate, #5A6168);
    white-space: nowrap;
}

/* Attendance's In/Out pair — same "number near the label" rhythm as
   .bec-stat-tile__value (margin-top:16px, scaled to the same numeral family)
   so all three columns' values sit at the same height regardless of one
   column having two numbers instead of one. nowrap (not wrap) on each side —
   a wrapped HH:MM is worse than an ellipsis, and there's no acceptable
   truncated form of a time either, so min-width:0 + ellipsis is the fallback
   only for the rare case a localized time string genuinely doesn't fit. */
/* Two rows, not two columns.

   The mockup puts In and Out side by side, and its own data is "07:52" /
   "17:30" — five glyphs. This app renders whatever the attendance API returns,
   which is a 12-hour string: "02:47 PM". Side by side, each time gets half a
   tile minus padding — about 69px at a 1536px viewport — and "02:47 PM" does
   not fit that at any size that still reads as a number. It was ellipsising to
   "02:47 P…", and a time with its meridiem cut off is not a time; it is the
   one truncation on this card that destroys the value rather than abbreviating
   it.

   Stacked, each row gets the tile's full text width (~145px), so the format
   the API actually returns fits with room to spare and would keep fitting if
   it changed again. Costs ~10px of tile height in a row that has it. */
.bec-stat-tile__pair[b-26l860m6ey] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: nowrap;
}

/* Each row is "02:47 PM  IN" — value then caption on one baseline, so the two
   rows read as a pair rather than as two unrelated stats. */
.bec-stat-tile__pair-item[b-26l860m6ey] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    flex: none;
}

/* 16px, not the mockup's 18px. The mockup's Attendance pair reads "07:52" /
   "17:30"; this app renders whatever the attendance API returns, which is a
   12-hour string — "02:47 PM", three glyphs longer. Two of those plus their
   gap have to fit half a tile, and at 18px they did not: both times were
   ellipsised to "02:47 …", which is the one truncation that destroys the
   value (a time with its meridiem cut off is not a time). */
.bec-stat-tile__pair-value[b-26l860m6ey] {
    font-family: var(--font-family-display, var(--font-family-base));
    font-size: 17px;
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--bec-navy-900, #1F2566);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bec-stat-tile__pair-label[b-26l860m6ey] {
    flex: none;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bec-gray, #7A828C);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Short colored rule — DESIGN_SYSTEM.md §11's Rev-4 accent palette
   (decorative only, not semantic status; see tokens.css --bec-accent-*).
   Default (Accent.Info / Leave Balance) stays the base blue; Pending
   (Attendance) and Success (Performance) override to sand/sage below. */
.bec-stat-tile__rule[b-26l860m6ey] {
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    margin-top: 14px;
    flex-shrink: 0;
    background: var(--bec-accent-blue, var(--bec-navy-700));
}

.bec-stat-tile--pending .bec-stat-tile__rule[b-26l860m6ey] { background: var(--bec-accent-sand, #7A6A56); }
.bec-stat-tile--success .bec-stat-tile__rule[b-26l860m6ey] { background: var(--bec-accent-sage, #596D6D); }

/* margin-top:auto pushes the caption flush to the bottom regardless of value
   length, so any leftover column height becomes one clean gap above it
   rather than dead space below — all three captions still line up on one
   row. Allowed to wrap (a caption is a short 2-5 word status phrase, not
   free text), unlike the label/value above which stay single-line. */
/* 12px, not 10.5px. This is the line that says what the number MEANS — "Days
   remaining", "Meet Expectations" — and at 10.5px it read as greyed-out chrome
   rather than content, which is what "the bottom text is hidden" was describing.
   Nothing was clipped: measured, the caption sits 16px clear of the card's
   bottom edge. It was simply below the app's own density floor (14px UI text,
   BECAspire.Web/CLAUDE.md); 12px is the smallest step that still reads as a
   caption without disappearing. Contrast was never the issue — #5A6168 on white
   is ~6.6:1, comfortably past AA.

   padding-top 14px -> 10px: paired with the larger type this keeps the tile at
   the same overall height, and it stops the caption floating alone at the card
   edge, detached from the rule and value it belongs to. */
/* margin-top was `auto`, which pushed this to the very bottom edge of the card
   so the three captions would share one baseline. Two problems with that, both
   reported:

   1. It left a visible dead band between the rule and the caption whenever the
      tile had slack, so the caption read as detached from the number it
      describes — "the text is coming at the bottom a lot".
   2. It masked a real overflow. The tiles' natural heights (measured in the
      browser, not computed: 163px for Leave/Performance, 167px for Last
      Attendance) exceeded the row's fixed 160px, so the caption — being last —
      was the part clipped away. `scrollHeight` did not report it because a
      flex column compresses its children rather than overflowing, which is why
      an earlier check came back clean.

   The spacing above (card padding, value/pair and rule margins) is now tuned so
   both stack shapes land at the same height anyway, which is what actually
   keeps the captions aligned — the auto margin is no longer doing that job, and
   the caption now sits directly under its rule with real headroom below. */
.bec-stat-tile__sub[b-26l860m6ey] {
    padding-top: 10px;
    font-size: 12px;
    /* 1.3 rather than 1.35: two lines of a wrapped status cost 31.2px instead
       of 32.4px, which is the last 1.2px of slack the Last Attendance tile
       needs — its stacked In/Out pair is 6px taller than the other two tiles'
       single numeral, so it is always the tightest of the three. */
    line-height: 1.3;
    color: var(--bec-slate, #5A6168);
    /* Wrapping IS correct here (the mockup's `.stat-s` wraps too — it's a
       short phrase, not a single token), but only between words: break-word
       let "expectations" split mid-word in a narrow column. Clamped to two
       lines so a long status can never push the rule/value out of the
       now-fixed 224px row. */
    overflow-wrap: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Sits in the caption slot the revealed tile uses for its date/status line, so
   the three tiles keep one baseline along the bottom whether they are masked
   or not. A real <button> with an icon, not the bare 9.5px uppercase text this
   was — at that size, with no icon and no hit area, it read as a footnote
   rather than as the thing you are supposed to press. */
.bec-stat-tile__hint[b-26l860m6ey] {
    /* Not `auto` — matches .bec-stat-tile__sub above, whose auto margin was
       removed. The masked and revealed states have to keep the same silhouette,
       so if one stops being bottom-pinned the other has to as well; otherwise
       revealing a tile would visibly jump its bottom line. */
    padding-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    margin-inline-start: -6px; /* optical: pulls the icon back to the text grid */
    padding: 5px 8px;
    border: 0;
    border-radius: var(--radius-md, 8px);
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--bec-accent-blue, var(--bec-navy-700));
    cursor: pointer;
    transition: background var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

.bec-stat-tile__hint svg[b-26l860m6ey] { width: 13px; height: 13px; display: block; flex: none; }

.bec-stat-tile__hint:hover[b-26l860m6ey] {
    background: var(--bec-accent-blue-tint, var(--bec-bg-alt, #F6F8FC));
}

/* The tile is one click target while masked — the stretch link is not rendered
   in that state (see the .razor), so the whole column reveals. The two buttons
   inside it are decorative duplicates of that action for the pointer; keyboard
   users get the single labelled control at the top right. */
.bec-stat-tile--hidden[b-26l860m6ey] { cursor: pointer; }
.bec-stat-tile--hidden:hover[b-26l860m6ey] { background: var(--bec-bg-alt, #F6F8FC); }
.bec-stat-tile--hidden:hover .bec-stat-tile__hint[b-26l860m6ey] { background: var(--bec-accent-blue-tint, #EAEBF3); }

.bec-stat-tile__stretch[b-26l860m6ey] {
    position: absolute;
    inset: 0;
}

/* The bullets are aria-hidden (they are a graphic, not text a screen reader
   should read out as four bullet characters), so the masked state needs a real
   text equivalent. Standard clip-rect pattern — off-screen for sighted users,
   still in the accessibility tree. Defined here rather than globally because
   the app has no such utility yet and one component is not reason enough to
   add a global class. */
.bec-visually-hidden[b-26l860m6ey] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Narrow card: step the type and padding down, do not clip ───────────── */
/* Queries the "stats" container (.home-profile-stats-row__tiles), i.e. the
   card's OWN width — not the viewport, which cannot tell a 1440px window with
   the sidebar open from one with it closed, and does not move at all under
   browser zoom.

   What is being budgeted: each tile is a third of the card and spends
   2 x padding-inline + the label's reveal-button gutter before any text. The
   binding item is "PERFORMANCE" — one word, no legal break point anywhere in
   it — so when the box gets smaller than the word, the word is what has to get
   smaller. Padding is spent first (it costs nothing to read), then tracking,
   then size. The steps below keep that word inside its tile down to a ~390px
   card, which is narrower than this card ever gets before the page's own
   1200px breakpoint stacks the whole row. */
/* Below this width the label genuinely can wrap, so its second line is reserved
   again (see .bec-stat-tile__label) to keep the three values on one baseline.
   The caption steps down with it so that two lines of a long status still fit
   inside the row's fixed height — the padding here also tracks the base rule's
   own reduction rather than keeping the pre-compaction 20px/16px it had. */
@container statcard (max-width: 190px) {
    .bec-stat-tile[b-26l860m6ey] { padding: 18px 14px 14px; }
    .bec-stat-tile__label[b-26l860m6ey] { font-size: 10px; letter-spacing: 0.04em; padding-inline-end: 16px; min-height: 2.6em; }
    .bec-stat-tile__value[b-26l860m6ey] { font-size: 30px; }
    .bec-stat-tile__pair[b-26l860m6ey] { gap: 5px; margin-top: 12px; }
    .bec-stat-tile__pair-value[b-26l860m6ey] { font-size: 16px; }
    .bec-stat-tile__sub[b-26l860m6ey] { font-size: 11.5px; line-height: 1.28; }
}

@container statcard (max-width: 165px) {
    .bec-stat-tile[b-26l860m6ey] { padding: 16px 11px 14px; }
    .bec-stat-tile__label[b-26l860m6ey] { font-size: 9px; letter-spacing: 0.02em; padding-inline-end: 14px; min-height: 2.6em; }
    .bec-stat-tile__value[b-26l860m6ey] { font-size: 26px; margin-top: 12px; }
    .bec-stat-tile__pair[b-26l860m6ey] { gap: 4px; margin-top: 10px; }
    .bec-stat-tile__pair-value[b-26l860m6ey] { font-size: 14px; }
    .bec-stat-tile__rule[b-26l860m6ey] { margin-top: 12px; }
    .bec-stat-tile__sub[b-26l860m6ey], .bec-stat-tile__hint[b-26l860m6ey] { padding-top: 10px; }
    /* 11px is the floor: still above the caption's readability threshold, and
       two lines at this leading (27.5px) fit the space left once the label,
       value and rule have taken theirs at this width. */
    .bec-stat-tile__sub[b-26l860m6ey] { font-size: 11px; line-height: 1.25; }
    .bec-stat-tile__reveal-btn[b-26l860m6ey] { top: 10px; inset-inline-end: 8px; }
}

/* /Components/Shared/Bec/Panels/BecDetailPanel.razor.rz.scp.css */
/* No visible header bar — content starts flush at the panel's top edge (e.g.
   a hero image), so the close button floats over whatever renders there
   instead of sitting in a separate title bar. Title/Subtitle still exist as
   parameters (used only to build the aria-label for screen readers). White
   circle + shadow keeps it visible over both a photo hero and plain content. */
.sp-panel--headerless[b-mmfa3asmfw] {
    position: relative;
}

/* Dark translucent circle + white icon — the same treatment this app
   already uses for a close button floating over media (see
   .yt-viewer-close-btn) — reused here rather than inventing a new white-
   circle style, so a floating close button reads the same everywhere in
   the app regardless of what's behind it (photo or plain content). */
.sp-float-close[b-mmfa3asmfw] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sp-float-close:hover[b-mmfa3asmfw] {
    background: rgba(0, 0, 0, 0.7);
}

/* ── Stacking order ── Syncfusion's SfSidebar ships its own default z-index,
   which sits BELOW this page's existing overlay scheme (.sidebar-overlay--z80
   through --z85, i.e. 1080-1085, still used by panels not yet retargeted —
   e.g. the Events List wizard). Without this, opening a BecDetailPanel while
   an old-style panel is already open renders it BEHIND that panel instead of
   on top. BecDetailPanel is the "detail" tier and must stack above BecListPanel
   (the "list" tier) — mirrors the original z85 > z80 relationship. */
[b-mmfa3asmfw] .e-sidebar {
    z-index: 1095 !important;
}

[b-mmfa3asmfw] .e-sidebar-overlay {
    z-index: 1094 !important;
}

/* ── Responsive width ── SfSidebar's Width parameter is a fixed value with no
   built-in mobile behavior. Matches the established pattern already used
   elsewhere for SfSidebar (see CreateTicketWizard.razor.css) rather than
   inventing a new one — same two breakpoints, same values. */
@media (max-width: 480px) {
    [b-mmfa3asmfw] .e-sidebar {
        width: 100% !important;
        max-width: 100vw !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    [b-mmfa3asmfw] .e-sidebar {
        width: 90% !important;
        max-width: 90vw !important;
    }
}
/* /Components/Shared/Bec/Panels/BecFormPanel.razor.rz.scp.css */
/* Same 14px sizing as ITSupport's its-progress-xs (css/modules/it-support-grid.css)
   — replicated locally rather than depending on that module-scoped class
   from a cross-cutting shared component. */
[b-rye3ho7k4z] .bec-form-panel__progress {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Title/subtitle stack — same as BecDetailPanel/BecListPanel's local copy
   (kept local per those components' own comments, to avoid a cross-component
   CSS dependency for two small rules). */
[b-rye3ho7k4z] .bec-detail-panel__title-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Keep the form panel above Syncfusion's backdrop. The backdrop must dim and
   intercept the page only; if it stacks above the panel, it also blocks the
   form controls. Align this shell with the existing detail/list panels. */
[b-rye3ho7k4z] .e-sidebar {
    z-index: 1090 !important;
    position: relative !important;
    pointer-events: auto !important;
}

[b-rye3ho7k4z] .e-sidebar-content {
    pointer-events: auto !important;
}

[b-rye3ho7k4z] .e-sidebar-overlay {
    z-index: 1089 !important;
    pointer-events: none !important;
}

@media (max-width: 480px) {
    [b-rye3ho7k4z] .e-sidebar {
        width: 100% !important;
        max-width: 100vw !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    [b-rye3ho7k4z] .e-sidebar {
        width: 90% !important;
        max-width: 90vw !important;
    }
}

/* Submit button color — scoped to this component only (::deep), NOT a global
   .e-primary override. Syncfusion's SfButton e-primary class is themed via
   ThemeService.SyncfusionThemeCss app-wide; overriding it globally would
   recolor every primary button in all 243 pages. Scoping here just aligns
   this panel's own Submit/Post button with the handoff design system's
   primary color when the panel renders inside .bec-shell (Home page today). */
[b-rye3ho7k4z] .e-btn.e-primary {
    background-color: var(--bec-navy-700, #2B3484);
    border-color: var(--bec-navy-700, #2B3484);
}

[b-rye3ho7k4z] .e-btn.e-primary:hover:not(:disabled) {
    background-color: var(--bec-navy-900, #1F2566);
    border-color: var(--bec-navy-900, #1F2566);
}
/* /Components/Shared/Bec/Panels/BecListPanel.razor.rz.scp.css */
/* Headerless detail sub-state — identical to BecDetailPanel.razor.css's rule
   of the same name (kept local rather than shared, same reasoning as the
   title/subtitle stack below: two small rules don't justify a cross-component
   CSS dependency). */
.sp-panel--headerless[b-md4rkjjdgl] {
    position: relative;
}

/* Same dark-translucent-circle treatment as BecDetailPanel.razor.css's
   .sp-float-close (this app's existing floating-over-media close button
   pattern — see .yt-viewer-close-btn) so both panels' headerless mode read
   identically. */
.sp-float-close[b-md4rkjjdgl] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sp-float-close:hover[b-md4rkjjdgl] {
    background: rgba(0, 0, 0, 0.7);
}

/* Title/subtitle stack — identical to BecDetailPanel's (kept local rather than
   shared to avoid a cross-component CSS dependency for two small rules). */
[b-md4rkjjdgl] .bec-detail-panel__title-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

[b-md4rkjjdgl] .bec-detail-panel__subtitle {
    font-size: var(--BEC-fontSizeBase200, 12px);
    font-weight: var(--BEC-fontWeightRegular, 400);
    color: var(--BEC-Text-Secondary, #605e5c);
}

/* Search box — token-driven; the caller's FilterBar/ChildContent markup stays
   authored in its own file and keeps using its own existing scoped CSS, so
   only what's authored here (the search box) needs styling in this file. */
[b-md4rkjjdgl] .bec-list-panel__search {
    padding: var(--BEC-spacingHorizontalM, 12px) var(--BEC-spacingHorizontalXL, 20px);
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    background: var(--BEC-Surface-Base, #fff);
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
}

[b-md4rkjjdgl] .bec-list-panel__search-icon {
    position: absolute;
    left: calc(var(--BEC-spacingHorizontalXL, 20px) + 4px);
    color: var(--BEC-Text-Secondary, #605e5c);
    pointer-events: none;
}

[b-md4rkjjdgl] .bec-list-panel__search-input {
    width: 100%;
    padding: var(--BEC-spacingHorizontalS, 8px) var(--BEC-spacingHorizontalM, 12px) var(--BEC-spacingHorizontalS, 8px) 36px;
    border: 1px solid var(--BEC-Border-Strong, #c8c6c4);
    border-radius: var(--BEC-borderRadiusMedium, 8px);
    font-size: var(--BEC-fontSizeBase300, 14px);
    color: var(--BEC-Text-Primary, #323130);
    background: var(--BEC-Surface-Alt, #faf9f8);
    transition: border-color 0.15s ease;
    outline: none;
}

[b-md4rkjjdgl] .bec-list-panel__search-input:focus {
    border-color: var(--BEC-Brand-Primary, #0078d4);
    box-shadow: var(--BEC-focus-shadow, 0 0 0 2px rgba(0, 120, 212, 0.2));
}

[b-md4rkjjdgl] .bec-list-panel__filter-bar {
    padding: var(--BEC-spacingHorizontalM, 12px) var(--BEC-spacingHorizontalXL, 20px);
    border-bottom: 1px solid var(--BEC-Border-Subtle, #edebe9);
    overflow-x: auto;
    flex-shrink: 0;
}

/* ── Stacking order ── see BecDetailPanel.razor.css for the full explanation.
   BecListPanel is the "list" tier — stacks below BecDetailPanel (the "detail"
   tier) so opening a detail view from an open list panel renders on top of
   it, but still clears this page's pre-existing 1080-1085 overlay scheme. */
[b-md4rkjjdgl] .e-sidebar {
    z-index: 1090 !important;
}

[b-md4rkjjdgl] .e-sidebar-overlay {
    z-index: 1089 !important;
}

/* ── Responsive width (see BecDetailPanel.razor.css for why this is needed) ── */
@media (max-width: 480px) {
    [b-md4rkjjdgl] .e-sidebar {
        width: 100% !important;
        max-width: 100vw !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    [b-md4rkjjdgl] .e-sidebar {
        width: 90% !important;
        max-width: 90vw !important;
    }
}
/* /Components/Shared/Bec/Panels/MonthlyActiveUsersReportPanel.razor.rz.scp.css */
.mau-panel__subtitle[b-bvojr8ramt] {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--BEC-Text-Secondary);
}

.mau-panel__filters[b-bvojr8ramt] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.mau-panel__field[b-bvojr8ramt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    font-size: 13px;
    color: var(--BEC-Text-Primary);
}

.mau-panel__field input[type="date"][b-bvojr8ramt] {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--BEC-Border-Subtle);
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 14px;
    color: var(--BEC-Text-Primary);
    background: var(--BEC-Surface-Base);
}

.mau-panel__field input[type="date"]:focus-visible[b-bvojr8ramt] {
    outline: var(--BEC-focus-indicator, 2px solid #0078d4);
    outline-offset: 1px;
}

.mau-panel__notice[b-bvojr8ramt] {
    margin-bottom: 16px;
    padding: 10px 12px;
    border-radius: var(--BEC-borderRadiusSmall);
    font-size: 13px;
    line-height: 1.4;
}

.mau-panel__notice--warning[b-bvojr8ramt] {
    background: var(--BEC-Warning-Subtle);
    color: var(--BEC-Text-Primary);
}

.mau-panel__notice--error[b-bvojr8ramt] {
    background: var(--BEC-Error-Subtle);
    color: var(--BEC-Error-Main);
}
/* /Components/Shared/Bec/Shell/BecSocialFollowPanel.razor.rz.scp.css */
/* BecSocialFollowPanel.razor.css */

.bec-follow-panel[b-hrahh325o9] {
    position: fixed;
    inset-block-end: 24px;
    inset-inline-end: 24px;
    z-index: var(--BEC-zIndex-Toast, 1100001);
    width: 384px;
    max-width: calc(100vw - 24px);
    background: var(--bec-navy-900, #1F2566);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    /* Was a dramatic 18px/44px double shadow (rgba .34/.18) — read like a
       popup ad. Softer + tighter so it sits as a normal floating card. */
    box-shadow: 0 8px 20px rgba(31, 37, 102, 0.16), 0 1px 4px rgba(0, 0, 0, 0.08);
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease, visibility 0s linear 0.32s;
}

/* Was translateY(24px) scale(0.98) -> 1 on a springy overshoot easing (a
   "pop"/bounce entrance). Scale removed and easing swapped for a plain
   decelerate curve so it eases in once, no bounce. */
.bec-follow-panel.is-open[b-hrahh325o9] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, visibility 0s;
}

/* Was top:0/height:100% flush to the panel's own rounded corners — with
   overflow:hidden clipping it to that curve, the bar's flat top/bottom edges
   fought the curve instead of following it, reading as uneven right at the
   corners. Insetting it and giving it its own small radius makes it read as
   a floating accent line instead of a rectangle colliding with the card. */
.bec-follow-panel[b-hrahh325o9]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #6F7FAF 0%, #7F9C9B 100%);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.bec-follow-panel.is-open[b-hrahh325o9]::before {
    transform: scaleY(1);
}

.bfp-inner[b-hrahh325o9] {
    padding: 22px 24px 20px 27px;
}

.bfp-top[b-hrahh325o9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

.bfp-mark[b-hrahh325o9] {
    display: block;
    height: 22px;
    width: auto;
}

.bfp-close[b-hrahh325o9] {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 28px;
    height: 28px;
    margin: -4px -6px 0 0;
    border-radius: 4px;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.62);
    transition: color 0.18s ease, background 0.18s ease;
}

.bfp-close:hover[b-hrahh325o9] {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.bfp-close:focus-visible[b-hrahh325o9] {
    outline: 2px solid #E6DDCF;
    outline-offset: 1px;
}

.bfp-close svg[b-hrahh325o9] {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.bfp-title[b-hrahh325o9] {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: #fff;
}

.bfp-copy[b-hrahh325o9] {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
}

.bfp-actions[b-hrahh325o9] {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.bfp-btn[b-hrahh325o9] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 10px;
    background: #fff;
    border-radius: var(--radius-md, 10px);
    text-decoration: none;
    color: var(--bec-navy-700, #2B3484);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.bfp-btn svg[b-hrahh325o9] {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

.bfp-btn:hover[b-hrahh325o9] {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}

.bfp-btn:focus-visible[b-hrahh325o9] {
    outline: 2px solid #E6DDCF;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .bec-follow-panel[b-hrahh325o9] {
        inset-inline: 12px;
        width: auto;
        inset-block-end: 12px;
    }

    .bfp-inner[b-hrahh325o9] {
        padding: 20px 18px 16px 21px;
    }

    .bfp-title[b-hrahh325o9] {
        font-size: 14px;
    }

    .bfp-copy[b-hrahh325o9] {
        font-size: 13.5px;
    }

    .bfp-actions[b-hrahh325o9] {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bec-follow-panel[b-hrahh325o9],
    .bec-follow-panel[b-hrahh325o9]::before,
    .bfp-btn[b-hrahh325o9] {
        transition-duration: 0.01ms !important;
    }

    .bec-follow-panel.is-open[b-hrahh325o9]::before {
        transform: scaleY(1);
    }
}
/* /Components/Shared/Bec/UI/BecAppButton.razor.rz.scp.css */
.bec-btn[b-tqljxyhvuo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    min-height: var(--hit-target-min, 44px);
    padding: 0 var(--space-4, 16px);
    border-radius: var(--radius-md, 10px);
    border: 1px solid transparent;
    font: var(--type-body-weight, 600) var(--type-body-size, 13px)/1 var(--font-family-base, inherit);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--duration-hover, 150ms) var(--ease-standard, ease-out),
                color var(--duration-hover, 150ms) var(--ease-standard, ease-out),
                box-shadow var(--duration-hover, 150ms) var(--ease-standard, ease-out),
                transform var(--duration-press, 80ms) var(--ease-standard, ease-out);
}

.bec-btn:active[b-tqljxyhvuo] {
    transform: scale(0.98);
}

.bec-btn[disabled][b-tqljxyhvuo],
.bec-btn[aria-disabled="true"][b-tqljxyhvuo] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary — navy fill, main call-to-action */
.bec-btn--primary[b-tqljxyhvuo] {
    background: var(--bec-navy-900, #1F2566);
    color: #fff;
}

.bec-btn--primary:hover[b-tqljxyhvuo] {
    background: var(--bec-navy-700, #2B3484);
}

/* Secondary — bordered, neutral surface */
.bec-btn--secondary[b-tqljxyhvuo] {
    background: var(--bec-surface, #fff);
    border-color: var(--bec-border, #E4E8EF);
    color: var(--bec-ink, #24272A);
}

.bec-btn--secondary:hover[b-tqljxyhvuo] {
    background: var(--bec-bg-alt, #F6F8FC);
}

/* Ghost — no fill/border until interacted with */
.bec-btn--ghost[b-tqljxyhvuo] {
    background: transparent;
    color: var(--bec-slate, #5A6168);
}

.bec-btn--ghost:hover[b-tqljxyhvuo] {
    background: var(--bec-tint-100, #EEF1FB);
    color: var(--bec-navy-700, #2B3484);
}

/* Pill — rounded, tinted, bordered. This is the app's one "View All" button
   style (BecSectionCard's ShowViewAll uses it) — every card's View All/Go to
   X link renders through this same variant so they all look identical. */
.bec-btn--pill[b-tqljxyhvuo] {
    background: rgba(43, 52, 132, 0.07);
    border-color: rgba(43, 52, 132, 0.18);
    color: var(--bec-navy-700, #2B3484);
    border-radius: var(--radius-full, 999px);
    padding: 0 var(--space-3, 14px);
    min-height: 30px;
    font-size: var(--type-meta-size, 12px);
}

.bec-btn--pill:hover[b-tqljxyhvuo] {
    background: var(--bec-navy-700, #2B3484);
    border-color: var(--bec-navy-700, #2B3484);
    color: #fff;
}

.bec-btn--pill:hover .bec-btn__icon[b-tqljxyhvuo] {
    transform: translateX(3px);
}

.bec-btn__icon[b-tqljxyhvuo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--duration-hover, 150ms) var(--ease-standard, ease-out);
}

.bec-btn__label[b-tqljxyhvuo] {
    display: inline-flex;
    align-items: center;
}
/* /Components/Shared/Bec/UI/BecAvatar.razor.rz.scp.css */
.bec-avatar[b-3fyxb2rzep] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-full, 50%);
    background: var(--bec-tint-100, #EEF1FB);
    color: var(--bec-navy-700, #2B3484);
    font-weight: 600;
    overflow: hidden;
}

.bec-avatar--photo[b-3fyxb2rzep] {
    background: transparent;
}

.bec-avatar img[b-3fyxb2rzep] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bec-avatar--sm[b-3fyxb2rzep] {
    width: 28px;
    height: 28px;
    font-size: var(--type-caption-size, 10.5px);
}

.bec-avatar--md[b-3fyxb2rzep] {
    width: 36px;
    height: 36px;
    font-size: var(--type-meta-size, 12px);
}

.bec-avatar--lg[b-3fyxb2rzep] {
    width: 64px;
    height: 64px;
    font-size: var(--type-h2-size, 16px);
}

.bec-avatar__initials[b-3fyxb2rzep] {
    line-height: 1;
}

.bec-avatar__online[b-3fyxb2rzep] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 9px;
    height: 9px;
    border-radius: var(--radius-full, 50%);
    background: var(--bec-success, #2E8B57);
    border: 2px solid var(--bec-surface, #fff);
}
/* /Components/Shared/Bec/UI/BecSectionCard.razor.rz.scp.css */
.bec-section-card[b-mpkkv3su70] {
    background: var(--bec-surface, #fff);
    border: 1px solid var(--bec-border, #E4E8EF);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-resting, 0 1px 2px rgba(16,24,40,.05));
    padding: var(--space-4, 16px);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bec-section-card__head[b-mpkkv3su70] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
}

.bec-section-card__head-left[b-mpkkv3su70] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-width: 0;
}

.bec-section-card__head-right[b-mpkkv3su70] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-shrink: 0;
}

.bec-section-card__icon[b-mpkkv3su70] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bec-indigo-400, #6F7FAF);
    flex-shrink: 0;
}

.bec-section-card__title[b-mpkkv3su70] {
    font: var(--type-h3-weight, 600) var(--type-h3-size, 14px)/var(--type-h3-lh, 1.35) var(--font-family-base, inherit);
    color: var(--bec-ink, #24272A);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bec-section-card__view-all[b-mpkkv3su70] {
    min-height: auto;
    padding: 4px var(--space-2, 8px);
    font-size: var(--type-meta-size, 12px);
}

.bec-section-card__divider[b-mpkkv3su70] {
    border: none;
    border-top: 1px solid var(--bec-border, #E4E8EF);
    margin: var(--space-3, 12px) 0;
}

.bec-section-card__body[b-mpkkv3su70] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* /Components/Shared/Bec/UI/BecSidePanel.razor.rz.scp.css */
/* BecSidePanel — proposed DESIGN_SYSTEM.md §6 addition.
   Every value resolves to a token (§1). Logical properties only, so the panel
   opens from the trailing edge under both LTR and RTL without a flip. */

.bec-panel-scrim[b-qlwkt9quk4] {
    position: fixed;
    inset: 0;
    background: rgba(31, 37, 102, 0.32); /* --bec-navy-900 at scrim opacity */
    z-index: 1200;
}

.bec-panel[b-qlwkt9quk4] {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 1201;

    display: flex;
    flex-direction: column;
    inline-size: 100%;

    background: var(--bec-surface);
    box-shadow: var(--shadow-overlay);
    font-family: var(--font-family-base);
    color: var(--bec-ink);
}

/* Width contract from BECAspire.Web/CLAUDE.md. Mobile stays full-bleed; the
   named widths only apply once there is room for the page behind the panel. */
@media (min-width: 768px) {
    .bec-panel--detail[b-qlwkt9quk4] { inline-size: min(560px, 92vw); }
    .bec-panel--form[b-qlwkt9quk4]   { inline-size: min(640px, 92vw); }
    .bec-panel--wizard[b-qlwkt9quk4] { inline-size: min(800px, 55vw); }
}

.bec-panel:focus[b-qlwkt9quk4] {
    outline: none;
}

.bec-panel:focus-visible[b-qlwkt9quk4] {
    outline: 2px solid var(--bec-navy-700);
    outline-offset: -2px;
}

/* ── Head ───────────────────────────────────────────────────────────────── */

.bec-panel__head[b-qlwkt9quk4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);

    padding: var(--space-4) var(--space-6);
    border-block-end: 1px solid var(--bec-border);
    flex-shrink: 0;
}

.bec-panel__head-text[b-qlwkt9quk4] {
    flex: 1;
    min-inline-size: 0;
}

.bec-panel__icon[b-qlwkt9quk4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--hit-target-min);
    block-size: var(--hit-target-min);
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--bec-tint-100);
    color: var(--bec-navy-700);
}

.bec-panel__icon .material-symbols-outlined[b-qlwkt9quk4] {
    font-size: 24px;
}

.bec-panel__eyebrow[b-qlwkt9quk4] {
    margin: 0 0 var(--space-1);
    font-size: var(--type-eyebrow-size);
    font-weight: 700;
    line-height: var(--type-eyebrow-lh);
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: uppercase;
    color: var(--bec-navy-700);
}

.bec-panel__title[b-qlwkt9quk4] {
    margin: 0;
    font-size: var(--type-h2-size);
    font-weight: var(--type-h2-weight);
    line-height: var(--type-h2-lh);
    color: var(--bec-ink);
}

.bec-panel__subtitle[b-qlwkt9quk4] {
    margin-block: var(--space-1) 0;
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-lh);
    color: var(--bec-slate);
}

.bec-panel__close[b-qlwkt9quk4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Visible glyph is smaller, but the target meets --hit-target-min (§5). */
    inline-size: var(--hit-target-min);
    block-size: var(--hit-target-min);
    flex-shrink: 0;

    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--bec-slate);
    cursor: pointer;
    transition: background var(--duration-hover) var(--ease-standard);
}

.bec-panel__close:hover[b-qlwkt9quk4] {
    background: var(--bec-bg-alt);
    color: var(--bec-ink);
}

.bec-panel__close:focus-visible[b-qlwkt9quk4] {
    outline: 2px solid var(--bec-navy-700);
    outline-offset: 2px;
}

.bec-panel__close .material-symbols-outlined[b-qlwkt9quk4] {
    font-size: 20px;
}

.bec-panel__subhead[b-qlwkt9quk4] {
    flex-shrink: 0;
    border-block-end: 1px solid var(--bec-border);
    background: var(--bec-bg-alt);
}

/* ── Body ───────────────────────────────────────────────────────────────── */

.bec-panel__body[b-qlwkt9quk4] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6);
}

/* ── Foot ───────────────────────────────────────────────────────────────── */

.bec-panel__foot[b-qlwkt9quk4] {
    display: flex;
    flex-wrap: wrap; /* a narrow phone moves extra buttons to a second line instead of overflowing */
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);

    padding: var(--space-4) var(--space-6);
    border-block-start: 1px solid var(--bec-border);
    background: var(--bec-bg-alt);
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .bec-panel__close[b-qlwkt9quk4] {
        transition: none;
    }
}
/* /Components/Shared/Bec/UI/BecStatusBadge.razor.rz.scp.css */
.bec-status-badge[b-w4np2u8rjc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--space-2, 8px);
    border-radius: var(--radius-full, 999px);
    font: var(--type-caption-weight, 600) var(--type-caption-size, 10.5px)/1.3 var(--font-family-base, inherit);
    letter-spacing: var(--type-caption-ls, 0.02em);
    text-transform: uppercase;
    white-space: nowrap;
}

.bec-status-badge__icon[b-w4np2u8rjc] {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.bec-status-badge--neutral[b-w4np2u8rjc] {
    background: var(--bec-bg-alt, #F6F8FC);
    color: var(--bec-slate, #5A6168);
}

.bec-status-badge--info[b-w4np2u8rjc] {
    background: var(--bec-info-bg, #EEF1FB);
    color: var(--bec-info, #6F7FAF);
}

.bec-status-badge--success[b-w4np2u8rjc] {
    background: var(--bec-success-bg, #E7F5EC);
    color: var(--bec-success, #2E8B57);
}

.bec-status-badge--warning[b-w4np2u8rjc],
.bec-status-badge--pending[b-w4np2u8rjc] {
    background: var(--bec-pending-bg, #FBF1DF);
    color: var(--bec-pending, #B5842A);
}

.bec-status-badge--danger[b-w4np2u8rjc] {
    background: var(--bec-danger-bg, #FBEAE8);
    color: var(--bec-danger, #C0392B);
}
/* /Components/Shared/ErrorDialog.razor.rz.scp.css */
/* ========================================
   ERROR DIALOG - ANIMATED
   Syncfusion Dialog with Zoom animation
   Used for: Error messages (replaces toast)
   ======================================== */

/* Dialog container */
[b-96m7s5j071] .error-dialog.e-dialog {
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* Error header with icon */
[b-96m7s5j071] .error-dialog-header {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--BEC-error-color, #d13438);
    font-size: 18px;
    font-weight: 600;
}

[b-96m7s5j071] .error-dialog-header .e-icons.e-error {
    font-size: 24px;
    color: var(--BEC-error-color, #d13438);
}

/* Content area */
[b-96m7s5j071] .error-dialog-content {
    padding: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--BEC-text-primary, #323130);
}

[b-96m7s5j071] .error-dialog-content p {
    margin: 0 0 16px 0;
}

[b-96m7s5j071] .error-dialog-content p:last-child {
    margin-bottom: 0;
}

/* Error details section */
[b-96m7s5j071] .error-details {
    margin-top: 16px;
    padding: 12px;
    background-color: var(--BEC-background-secondary, #faf9f8);
    border-left: 4px solid var(--BEC-error-color, #d13438);
    border-radius: 4px;
}

[b-96m7s5j071] .error-details strong {
    display: block;
    margin-bottom: 8px;
    color: var(--BEC-error-color, #d13438);
    font-size: 13px;
    font-weight: 600;
}

[b-96m7s5j071] .error-details p {
    margin: 0;
    font-size: 13px;
    color: var(--BEC-text-secondary, #605e5c);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Footer with OK button */
[b-96m7s5j071] .error-dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 0 0 0;
}

[b-96m7s5j071] .error-dialog-footer .e-btn {
    min-width: 100px;
}

/* ========================================
   RESPONSIVE DESIGN (Syncfusion Standard)
   ======================================== */

/* Mobile (< 768px) */
@media (max-width: 767px) {
    [b-96m7s5j071] .error-dialog.e-dialog {
        width: 90vw !important;
        max-width: 90vw !important;
    }

    [b-96m7s5j071] .error-dialog-header {
        font-size: 16px;
    }

    [b-96m7s5j071] .error-dialog-header .e-icons.e-error {
        font-size: 20px;
    }

    [b-96m7s5j071] .error-dialog-content {
        padding: 16px;
        font-size: 13px;
    }

    [b-96m7s5j071] .error-details {
        padding: 10px;
    }

    [b-96m7s5j071] .error-details strong,
    [b-96m7s5j071] .error-details p {
        font-size: 12px;
    }
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    [b-96m7s5j071] .error-dialog.e-dialog {
        width: 70vw !important;
        max-width: 600px !important;
    }
}

/* Desktop (> 1024px) */
@media (min-width: 1025px) {
    [b-96m7s5j071] .error-dialog.e-dialog {
        width: 500px !important;
    }
}

/* ========================================
   ANIMATION ENHANCEMENTS
   ======================================== */

/* Smooth fade-in for content */
[b-96m7s5j071] .error-dialog.e-dialog.e-popup-open .error-dialog-content {
    animation: fadeInContent-b-96m7s5j071 0.4s ease-in-out;
}

@keyframes fadeInContent-b-96m7s5j071 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Icon pulse animation */
[b-96m7s5j071] .error-dialog-header .e-icons.e-error {
    animation: pulse-b-96m7s5j071 0.6s ease-in-out;
}

@keyframes pulse-b-96m7s5j071 {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* /Components/Shared/NewHireOrientationWizard/NewHireOrientationWizard.razor.rz.scp.css */
/* Brand navy is the page's --BEC-colorBrandBackground/-Hover custom properties
   (same tokens + same var(...,fallback) convention as the rest of
   Intranet-MainPage.razor.css), so this wizard stays in sync with the navy
   override declared on .intranet-page-root instead of duplicating a literal
   that could drift from it. Teal accent + the neutral gray ramp are left as
   literal values straight from the approved reference design, matching how
   the rest of this page already treats its own non-brand chrome colors. */

.nhw-overlay[b-11d7c676ts] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 20, 30, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: nhw-fade-in-b-11d7c676ts 0.2s ease;
    /* Defensive default: pointer-events inherits from ancestors, and when
       this component is rendered from Intranet-MainPage.razor's own "New
       Hire Orientation Program" trigger (not the mandatory instance in
       MainLayoutMS), it sits inside .erp-page-container — which briefly
       had pointer-events:none applied while mandatory onboarding was also
       pending, and cascaded into this overlay too. That mechanism was
       since replaced with `inert` on .erp-page-container (see
       MainLayoutMS.razor), which can't be overridden by a descendant's own
       CSS the way pointer-events could — but the scenario it would affect
       isn't reachable in practice anyway, since .erp-page-container being
       inert also blocks the trigger button itself. Left in place as a
       cheap, harmless guarantee that this overlay always stays interactive
       regardless of what's gated behind it. */
    pointer-events: auto;
}

@keyframes nhw-fade-in-b-11d7c676ts {
    from { opacity: 0; }
    to { opacity: 1; }
}

.nhw-dismiss[b-11d7c676ts] {
    position: absolute;
    top: 20px;
    inset-inline-end: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}
.nhw-dismiss:hover[b-11d7c676ts] { background: rgba(255, 255, 255, 0.28); }

.nhw-card[b-11d7c676ts] {
    width: 100%;
    max-width: 920px;
    max-height: calc(100vh - 32px);
    background: #FFFFFF;
    border: 0.5px solid #E2E4E8;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(15, 20, 30, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: nhw-rise-in-b-11d7c676ts 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes nhw-rise-in-b-11d7c676ts {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header / progress bar ── */
.nhw-header[b-11d7c676ts] {
    padding: 12px 18px 0;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.nhw-logo[b-11d7c676ts] {
    width: 156px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.nhw-logo img[b-11d7c676ts] { max-width: 100%; max-height: 100%; object-fit: contain; }

/* One column per step (--nhw-step-count is set on the element from TotalSteps).
   The track and the fill are derived from the same number so the line starts at
   the first dot's centre and ends at the last dot's centre — an earlier hardcoded
   10-column grid with a 5%–95% track left a dead tail past "Verify". */
.nhw-steps[b-11d7c676ts] {
    --nhw-step-count: 9;
    --nhw-half-col: calc(100% / var(--nhw-step-count) / 2);
    flex: 1;
    display: grid;
    grid-template-columns: repeat(var(--nhw-step-count), minmax(0, 1fr));
    align-items: start;
    position: relative;
}

.nhw-steps__track[b-11d7c676ts] {
    /* top recentered for the 32px dot below: dot's vertical center is 16px
       from its own top, minus half this 3px line's own height, so the
       line still runs through the middle of each dot. */
    position: absolute;
    top: 14.5px;
    inset-inline: var(--nhw-half-col);
    height: 3px;
    background: #E7E9EC;
    border-radius: 2px;
}

/* --nhw-progress is 0..1 (current-1)/(total-1), set inline by the component. */
.nhw-steps__fill[b-11d7c676ts] {
    position: absolute;
    top: 14.5px;
    inset-inline-start: var(--nhw-half-col);
    width: calc(var(--nhw-progress, 0) * (100% - 2 * var(--nhw-half-col)));
    height: 3px;
    background: #7F9C9B;
    border-radius: 2px;
    transition: width 0.25s ease;
}

.nhw-step[b-11d7c676ts] {
    text-align: center;
    position: relative;
}

/* Sized down from an earlier 42px pass — paired with the bigger logo, that
   size read as cramped/crowded rather than "bigger and bolder". The grid's
   10 equal columns don't shrink with the dot itself, so a smaller dot
   inside the same column width is what actually reads as more relaxed/
   spaced out, not a wider gap value. */
.nhw-step__dot[b-11d7c676ts] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 14px;
    background: #FFFFFF;
    border: 1.5px solid #D9DCE1;
    color: #A2AAAD;
}

.nhw-step__label[b-11d7c676ts] {
    display: block;
    font-size: 11px;
    color: #8D9296;
    margin-top: 5px;
}

.nhw-step--done .nhw-step__dot[b-11d7c676ts] { background: #7F9C9B; border-color: #7F9C9B; color: #fff; }
.nhw-step--done .nhw-step__label[b-11d7c676ts] { color: #5F7877; font-weight: 500; }

.nhw-step--active .nhw-step__dot[b-11d7c676ts] { background: var(--BEC-colorBrandBackground, #0f6cbd); border-color: var(--BEC-colorBrandBackground, #0f6cbd); color: #fff; }
.nhw-step--active .nhw-step__label[b-11d7c676ts] { color: var(--BEC-colorBrandBackground, #0f6cbd); font-weight: 500; }

.nhw-divider[b-11d7c676ts] {
    border: none;
    border-top: 0.5px solid #EDEFF2;
    margin: 12px 0 0;
    flex-shrink: 0;
}
.nhw-nav + .nhw-divider[b-11d7c676ts],
.nhw-content + .nhw-divider[b-11d7c676ts] { margin-top: 0; }

/* ── Content ── */
.nhw-content[b-11d7c676ts] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.nhw-rule[b-11d7c676ts] {
    width: 40px;
    height: 3px;
    background: #7F9C9B;
    border-radius: 2px;
    margin: 6px 0 8px;
    flex-shrink: 0;
}

.nhw-title[b-11d7c676ts] {
    font-size: 19px;
    font-weight: 600;
    color: var(--BEC-colorBrandBackground, #0f6cbd);
    letter-spacing: -0.2px;
    margin: 0;
}

.nhw-subtitle[b-11d7c676ts] {
    font-size: 13.5px;
    color: #5C6368;
    line-height: 1.55;
    margin: 0 0 12px;
    max-width: 510px;
    text-wrap: balance;
}

.nhw-caption[b-11d7c676ts] {
    font-size: 12px;
    color: #8D9296;
    line-height: 1.5;
    margin: 8px 0 0;
    text-align: center;
}

/* Step 1's own eyebrow label ("A few words from our CEO") above its video —
   the rest of step 1 now renders through the shared .nhw-slide/.nhw-title/
   .nhw-subtitle rules every other step uses, no step-1-specific layout left. */
.nhw-eyebrow[b-11d7c676ts] {
    font-size: 11.5px;
    color: #8D9296;
    font-weight: 500;
    margin-bottom: 8px;
    letter-spacing: 0.2px;
}

/* Generic step slide (used by welcome's right column + video steps + support + survey) */
.nhw-slide[b-11d7c676ts] {
    flex: 1;
    padding: 1.1rem 3rem 0.9rem;
}
.nhw-slide--fill[b-11d7c676ts] {
    display: flex;
    flex-direction: column;
}

/* Video (real playback — sample footage shared across steps 1-5).
   width:85% and max-height:42vh used to be set as two independent caps
   alongside aspect-ratio:16/9. Because width wasn't `auto`, the max-height
   clamp on short viewports shrank the box's height without shrinking its
   width to match — the rendered box drifted away from true 16:9 even
   though aspect-ratio said 16:9, so object-fit:cover on the <video> below
   had to crop harder to fill that now-flatter shape. That's the
   screen-dependent cropping bug. width is now a single `min()` between
   the same 85% and the same 42vh-tall box's equivalent width (42vh *
   16/9) — whichever is smaller wins, and since aspect-ratio then derives
   height from that width, the box is always exactly 16:9 at every
   viewport size, so nothing is ever cropped. */
.nhw-video[b-11d7c676ts] {
    width: min(85%, calc(42vh * 16 / 9));
    aspect-ratio: 16 / 9;
    margin-inline: auto;
    background: #000;
    border: 0.5px solid #E2E4E8;
    border-radius: 8px;
    overflow: hidden;
}

.nhw-video__el[b-11d7c676ts] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nhw-video__caption[b-11d7c676ts] {
    font-size: 11px;
    color: #A2AAAD;
    margin: 8px 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.nhw-video__caption i[b-11d7c676ts] { color: #7F9C9B; }

/* Acknowledgment row */
.nhw-ack[b-11d7c676ts] {
    margin-top: 12px;
    background: #F6F7F9;
    border: 0.5px solid #E7E9EC;
    border-inline-start: 3px solid #7F9C9B;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.nhw-ack--locked[b-11d7c676ts] {
    border-inline-start-color: #C9CDD8;
    cursor: default;
}
.nhw-ack input[type="checkbox"][b-11d7c676ts] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--BEC-colorBrandBackground, #0f6cbd);
}
.nhw-ack input[type="checkbox"]:disabled[b-11d7c676ts] { cursor: not-allowed; }
.nhw-ack__text[b-11d7c676ts] { font-size: 13px; color: #4B5259; }
.nhw-ack--locked .nhw-ack__text[b-11d7c676ts] { color: #A2AAAD; }
.nhw-ack__hint[b-11d7c676ts] {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #A2AAAD;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Step 3 (HR) signature — same card language as .nhw-ack above (light bg,
   thin border, sage left accent), sitting directly below it. */
.nhw-signature[b-11d7c676ts] {
    margin-top: 12px;
    background: #F6F7F9;
    border: 0.5px solid #E7E9EC;
    border-inline-start: 3px solid #7F9C9B;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nhw-signature__label[b-11d7c676ts] {
    font-size: 13px;
    color: #4B5259;
    line-height: 1.5;
}

.nhw-signature__input[b-11d7c676ts] {
    height: 42px;
    border: 1px solid #D9DCE1;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    font-family: inherit;
    color: #1F2937;
    background: #fff;
}

.nhw-signature__input:focus[b-11d7c676ts] {
    outline: none;
    border-color: var(--BEC-colorBrandBackground, #0f6cbd);
}

.nhw-signature__input:disabled[b-11d7c676ts] {
    background: #EEF0F2;
    color: #A2AAAD;
    cursor: not-allowed;
}

.nhw-signature__submit[b-11d7c676ts] {
    align-self: flex-start;
}

.nhw-signature__done[b-11d7c676ts] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nhw-signature__done i[b-11d7c676ts] {
    font-size: 20px;
    color: #7F9C9B;
    flex-shrink: 0;
}

.nhw-signature__done p[b-11d7c676ts] {
    font-size: 13px;
    color: #4B5259;
    margin: 0;
    line-height: 1.5;
}

/* Step 6 — contact grid */
/* Three cards: the first (Business Transformation) sits alone on the top row, centred at
   one column's width; the other two share the row beneath. */
.nhw-contact-grid[b-11d7c676ts] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.nhw-contact-grid > .nhw-contact-card:first-child[b-11d7c676ts] {
    grid-column: 1 / -1;
    width: calc(50% - 6px);
    justify-self: center;
}
.nhw-contact-card[b-11d7c676ts] {
    border: 0.5px solid #E2E4E8;
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
}
.nhw-contact-card__head[b-11d7c676ts] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--BEC-colorBrandBackground, #0f6cbd);
}
.nhw-contact-card__head i[b-11d7c676ts] { font-size: 17px; color: #7F9C9B; }
.nhw-contact-card p[b-11d7c676ts] {
    font-size: 12.5px;
    color: #7C8388;
    line-height: 1.6;
    margin: 0;
}

/* Step 7 — survey placeholder */
.nhw-survey-placeholder[b-11d7c676ts] {
    flex: 1;
    border: 1.5px dashed #C4C9CE;
    border-radius: 14px;
    background: #FAFBFC;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.nhw-survey-placeholder__icon[b-11d7c676ts] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #EEF0F3;
    color: #A2AAAD;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.nhw-survey-placeholder__title[b-11d7c676ts] { font-size: 14px; color: #8D9296; font-weight: 500; }
.nhw-survey-placeholder__sub[b-11d7c676ts] { font-size: 11.5px; color: #B4BABF; }

/* Survey — real question list */
.nhw-survey-done[b-11d7c676ts] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F6F7F9;
    border: 0.5px solid #E7E9EC;
    border-left: 3px solid #7F9C9B;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.nhw-survey-done i[b-11d7c676ts] { color: #7F9C9B; font-size: 18px; }
.nhw-survey-done p[b-11d7c676ts] { margin: 0; font-size: 13px; color: #4B5259; }

.nhw-survey-notice[b-11d7c676ts] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #A2AAAD;
    margin: 0 0 10px;
}
.nhw-survey-notice i[b-11d7c676ts] { color: #A2AAAD; }

.nhw-survey-list[b-11d7c676ts] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.nhw-survey-list--readonly[b-11d7c676ts] { gap: 10px; }

.nhw-survey-q[b-11d7c676ts] {
    border-inline-start: 3px solid transparent;
    padding-inline-start: 0;
    transition: border-color 0.15s ease, padding-inline-start 0.15s ease;
}
.nhw-survey-q--invalid[b-11d7c676ts] {
    border-inline-start-color: var(--BEC-colorPaletteRedForeground1, #d13438);
    padding-inline-start: 12px;
}

.nhw-survey-q__text[b-11d7c676ts] {
    font-size: 13px;
    font-weight: 500;
    color: #1F2937;
    margin: 0 0 6px;
}
.nhw-survey-q__required[b-11d7c676ts] { color: var(--BEC-colorPaletteRedForeground1, #d13438); margin-inline-start: 3px; }
.nhw-survey-q__num[b-11d7c676ts] { display: inline-block; min-width: 20px; font-weight: 700; color: var(--BEC-themePrimary, #1e3c72); }
.nhw-survey-q__optional[b-11d7c676ts] { margin-inline-start: 6px; font-size: 11.5px; font-weight: 400; color: var(--BEC-colorNeutralForeground3, #a19f9d); }

/* Conditional follow-up (e.g. "What was missing?" under the access question): indented
   under its parent with a teal rule so it reads as part of that question. */
.nhw-survey-q--follow-up[b-11d7c676ts] {
    margin-inline-start: 18px;
    padding-inline-start: 14px;
    border-inline-start: 3px solid #7F9C9B;
}

/* "Other (please specify)" detail box */
.nhw-survey-q__other[b-11d7c676ts] {
    display: block;
    width: min(420px, 100%);
    margin-top: 8px;
    height: 34px;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d2d0ce);
    border-radius: 7px;
    background: var(--BEC-colorNeutralBackground1, #fff);
    color: var(--BEC-colorNeutralForeground1, #323130);
}

.nhw-survey-q__other:focus-visible[b-11d7c676ts] {
    outline: 2px solid var(--BEC-themePrimary, #1e3c72);
    outline-offset: -1px;
}

.nhw-survey-q__required-hint[b-11d7c676ts] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--BEC-colorPaletteRedForeground1, #d13438);
    margin: 6px 0 0;
}

.nhw-survey-q__answer[b-11d7c676ts] {
    font-size: 13px;
    color: #5C6368;
    background: #F6F7F9;
    border-radius: 6px;
    padding: 8px 12px;
    margin: 0;
}

.nhw-survey-q__textarea[b-11d7c676ts] {
    width: 100%;
    border: 0.5px solid #D9DCE1;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    color: #1F2937;
    resize: vertical;
}
.nhw-survey-q__textarea:focus[b-11d7c676ts] { outline: none; border-color: var(--BEC-colorBrandBackground, #0f6cbd); }

.nhw-survey-q__rating[b-11d7c676ts] { display: flex; align-items: center; gap: 8px; }
.nhw-survey-q__rating-label[b-11d7c676ts] { font-size: 11px; color: #A2AAAD; }
.nhw-survey-q__rating-label:first-child[b-11d7c676ts] { margin-inline-end: 4px; }
.nhw-survey-q__rating-label:last-child[b-11d7c676ts] { margin-inline-start: 4px; }
.nhw-survey-q__rating-btn[b-11d7c676ts] {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 0.5px solid #D9DCE1;
    background: #fff;
    color: #5C6368;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.nhw-survey-q__rating-btn:hover[b-11d7c676ts] { border-color: #7F9C9B; }
.nhw-survey-q__rating-btn--active[b-11d7c676ts] {
    background: var(--BEC-colorBrandBackground, #0f6cbd);
    border-color: var(--BEC-colorBrandBackground, #0f6cbd);
    color: #fff;
}

.nhw-survey-q__options[b-11d7c676ts] { display: flex; flex-direction: column; gap: 6px; }
.nhw-survey-q__option[b-11d7c676ts] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4B5259;
    cursor: pointer;
}
.nhw-survey-q__option input[b-11d7c676ts] { accent-color: var(--BEC-colorBrandBackground, #0f6cbd); }

.nhw-survey-submit[b-11d7c676ts] { margin-top: 14px; align-self: flex-start; }

/* Verify email — inside step 8 (Complete) since 14 Sep 2026; final, mandatory gate */
.nhw-verify[b-11d7c676ts] { align-items: center; text-align: center; }
.nhw-verify > .nhw-title[b-11d7c676ts],
.nhw-verify > .nhw-rule[b-11d7c676ts],
.nhw-verify > .nhw-subtitle[b-11d7c676ts] { align-self: center; }

.nhw-verify__loading[b-11d7c676ts],
.nhw-verify__lockout[b-11d7c676ts],
.nhw-verify__done[b-11d7c676ts],
.nhw-verify__prompt[b-11d7c676ts],
.nhw-verify__code[b-11d7c676ts] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 340px;
    margin: 0 auto;
}

.nhw-spinner[b-11d7c676ts] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2.5px solid #E2E4E8;
    border-top-color: var(--BEC-colorBrandBackground, #0f6cbd);
    animation: nhw-spin-b-11d7c676ts 0.7s linear infinite;
}
@keyframes nhw-spin-b-11d7c676ts { to { transform: rotate(360deg); } }

.nhw-verify__lockout i[b-11d7c676ts],
.nhw-verify__done i[b-11d7c676ts] {
    font-size: 34px;
}
.nhw-verify__lockout i[b-11d7c676ts] { color: var(--BEC-colorPaletteRedForeground1, #d13438); }
.nhw-verify__done i[b-11d7c676ts] { color: #7F9C9B; }
.nhw-verify__lockout p[b-11d7c676ts],
.nhw-verify__done p[b-11d7c676ts],
.nhw-verify__prompt p[b-11d7c676ts],
.nhw-verify__code p[b-11d7c676ts] {
    font-size: 14px;
    color: #5C6368;
    line-height: 1.6;
    margin: 0;
}

.nhw-verify__input[b-11d7c676ts] {
    width: 180px;
    height: 48px;
    border: 1px solid #D9DCE1;
    border-radius: 8px;
    text-align: center;
    font-size: 22px;
    letter-spacing: 6px;
    color: #1F2937;
    font-family: inherit;
}
.nhw-verify__input:focus[b-11d7c676ts] {
    outline: none;
    border-color: var(--BEC-colorBrandBackground, #0f6cbd);
}

.nhw-verify__message[b-11d7c676ts] {
    font-size: 12.5px;
    color: #5F7877;
    margin: 0;
}
.nhw-verify__message--error[b-11d7c676ts] { color: var(--BEC-colorPaletteRedForeground1, #d13438); }

/* Step 8 — complete */
.nhw-complete[b-11d7c676ts] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.1rem 3rem 0.9rem;
}
.nhw-complete .nhw-subtitle[b-11d7c676ts] { margin: 8px 0 0; max-width: 430px; }
.nhw-complete .nhw-rule[b-11d7c676ts] { margin: 6px 0 0; }

.nhw-profile-card[b-11d7c676ts] {
    margin: 14px 0 0;
    border: 0.5px solid #E2E4E8;
    border-radius: 10px;
    padding-block: 16px;
    padding-inline: 18px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: start;
}
.nhw-profile-card__avatar-wrap[b-11d7c676ts] { position: relative; flex-shrink: 0; }
.nhw-profile-card__avatar[b-11d7c676ts] {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #3B5BC4;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.5px;
    overflow: hidden;
}
.nhw-profile-card__avatar img[b-11d7c676ts] { width: 100%; height: 100%; object-fit: cover; }
.nhw-profile-card__online[b-11d7c676ts] {
    position: absolute;
    inset-inline-end: 2px;
    bottom: 2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #4CAF50;
    border: 2px solid #fff;
}
.nhw-profile-card__name[b-11d7c676ts] { font-size: 15px; font-weight: 600; color: #1F2937; }
.nhw-profile-card__line[b-11d7c676ts] { font-size: 12.5px; color: #7C8388; line-height: 1.65; }

.nhw-complete__actions[b-11d7c676ts] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.nhw-complete__verify[b-11d7c676ts] {
    width: min(520px, 100%);
    margin-top: 22px;
    padding: 20px 22px 22px;
    border: 1px solid var(--BEC-colorNeutralStroke2, #e1dfdd);
    border-radius: 12px;
    background: var(--BEC-colorNeutralBackground1, #fff);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.nhw-complete__verify-title[b-11d7c676ts] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--BEC-themePrimary, #1e3c72);
}

.nhw-complete__verify-sub[b-11d7c676ts] {
    margin: 6px 0 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    max-width: 400px;
}

/* Inside the complete screen the verify blocks size to content, not to a filled slide. */
.nhw-complete__verify .nhw-verify__loading[b-11d7c676ts],
.nhw-complete__verify .nhw-verify__lockout[b-11d7c676ts],
.nhw-complete__verify .nhw-verify__done[b-11d7c676ts],
.nhw-complete__verify .nhw-verify__prompt[b-11d7c676ts],
.nhw-complete__verify .nhw-verify__code[b-11d7c676ts] { flex: none; }

.nhw-rating[b-11d7c676ts] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 0.5px solid #EDEFF2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.nhw-rating > span[b-11d7c676ts] { font-size: 13px; color: #5C6368; }
.nhw-rating__btns[b-11d7c676ts] { display: flex; gap: 8px; }
.nhw-rating__btn[b-11d7c676ts] {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 0.5px solid #D9DCE1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A2AAAD;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.15s ease;
}
.nhw-rating__btn:hover[b-11d7c676ts] { border-color: #7F9C9B; color: #7F9C9B; }
.nhw-rating__btn--active[b-11d7c676ts] { background: #7F9C9B; border-color: #7F9C9B; color: #fff; }

/* ── Bottom nav ── */
.nhw-nav[b-11d7c676ts] {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.nhw-nav__left[b-11d7c676ts] { display: flex; align-items: center; gap: 8px; }
.nhw-nav__step[b-11d7c676ts] { font-size: 12px; color: #A2AAAD; }
.nhw-nav__spacer[b-11d7c676ts] { width: 78px; }

.nhw-btn[b-11d7c676ts] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.nhw-btn i[b-11d7c676ts] { font-size: 13px; }

.nhw-btn--primary[b-11d7c676ts] { background: var(--BEC-colorBrandBackground, #0f6cbd); color: #fff; }
.nhw-btn--primary:hover:not(:disabled)[b-11d7c676ts] { background: var(--BEC-colorBrandBackgroundHover, #115ea3); }
.nhw-btn--primary:disabled[b-11d7c676ts] { background: #C9CDD8; cursor: not-allowed; }

.nhw-btn--outline[b-11d7c676ts] {
    background: #fff;
    color: var(--BEC-colorBrandBackground, #0f6cbd);
    border: 0.5px solid #C6CAD9;
}
.nhw-btn--outline:hover[b-11d7c676ts] { background: #F6F7F9; }

.nhw-btn--ghost[b-11d7c676ts] {
    background: #fff;
    color: #5C6368;
    border: 0.5px solid #D9DCE1;
    padding: 0 16px;
}
.nhw-btn--ghost:hover[b-11d7c676ts] { background: #F6F7F9; }

.nhw-btn--subtle[b-11d7c676ts] {
    background: #fff;
    color: #8D9296;
    border: 0.5px solid #E2E4E8;
    padding: 0 16px;
}
.nhw-btn--subtle:hover[b-11d7c676ts] { background: #F6F7F9; color: #5C6368; }

/* ── Responsive ── */
@media (max-width: 720px) {
    .nhw-overlay[b-11d7c676ts] { padding: 0; }
    .nhw-card[b-11d7c676ts] { max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
    .nhw-step__label[b-11d7c676ts] { display: none; }

    /* Desktop sizes (156px logo, 32px dots) only fit because a phone
       viewport has nowhere near that width to spare — hiding labels alone
       (the only mobile rule that existed before) still left a 156px logo
       plus ten 32px dots fighting for space, which is what was overlapping.
       Both shrink substantially here, independent of the desktop values. */
    .nhw-header[b-11d7c676ts] { gap: 8px; padding: 10px 12px 0; }
    .nhw-logo[b-11d7c676ts] { width: 56px; height: 18px; }
    .nhw-steps__track[b-11d7c676ts],
    .nhw-steps__fill[b-11d7c676ts] { top: 9px; height: 2px; }
    .nhw-step__dot[b-11d7c676ts] { width: 20px; height: 20px; font-size: 9px; border-width: 1.5px; }

    .nhw-slide[b-11d7c676ts] { padding: 1.5rem 1.25rem; }
    .nhw-contact-grid[b-11d7c676ts] { grid-template-columns: 1fr; }
    .nhw-contact-grid > .nhw-contact-card:first-child[b-11d7c676ts] { width: 100%; }
    .nhw-nav[b-11d7c676ts] { flex-wrap: wrap; gap: 8px; }
    .nhw-nav__spacer[b-11d7c676ts] { display: none; }
}


/* ══ Policy acknowledgment ═══════════════════════════════════════════════════ */

/* The card on step 3 that opens the dialog. Replaces the inline typed-name
   signature that used to sit here — the documents now get presented before the
   signature rather than being asserted above it. */
.nhw-policy-card[b-11d7c676ts] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-top: 12px;
    border: 1px solid var(--BEC-colorNeutralStroke2, #e1dfdd);
    border-radius: 10px;
    background: var(--BEC-colorNeutralBackground1, #fff);
}

.nhw-policy-card--done[b-11d7c676ts] {
    border-color: #b7dfc6;
    background: #f4fbf6;
}

.nhw-policy-card__icon[b-11d7c676ts] {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--BEC-themePrimary, #1e3c72);
    background: var(--BEC-colorNeutralBackground3, #f3f2f1);
}

.nhw-policy-card--done .nhw-policy-card__icon[b-11d7c676ts] {
    color: #0f7b3f;
    background: #e3f5ea;
}

.nhw-policy-card__text[b-11d7c676ts] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nhw-policy-card__title[b-11d7c676ts] {
    font-size: 14px;
    font-weight: 700;
    color: var(--BEC-themePrimary, #1e3c72);
}

.nhw-policy-card__sub[b-11d7c676ts] {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.nhw-policy-card__btn[b-11d7c676ts] {
    flex: none;
    height: 34px;
    padding: 0 16px;
    border-radius: 7px;
    border: 1px solid var(--BEC-themePrimary, #1e3c72);
    background: transparent;
    color: var(--BEC-themePrimary, #1e3c72);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.nhw-policy-card__btn:hover[b-11d7c676ts] {
    background: var(--BEC-themePrimary, #1e3c72);
    color: #fff;
}

/* ── Dialog ──────────────────────────────────────────────────────────────── */

/* z-index above the wizard overlay itself — this opens on top of it, not beside it. */
.nhw-policy-overlay[b-11d7c676ts] {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(31, 37, 102, 0.45);
}

.nhw-policy-modal[b-11d7c676ts] {
    width: min(720px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--BEC-colorNeutralBackground1, #fff);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.nhw-policy-modal__head[b-11d7c676ts] {
    flex: none;
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--BEC-colorNeutralStroke2, #e1dfdd);
}

.nhw-policy-modal__head h2[b-11d7c676ts] {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--BEC-themePrimary, #1e3c72);
}

.nhw-policy-modal__head p[b-11d7c676ts] {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

/* The modal scrolls as a whole; each document pane scrolls independently inside it. */
.nhw-policy-modal__body[b-11d7c676ts] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Document links inside clause 1 + the open-both gate ─────────────────── */
.nhw-policy-terms__link i[b-11d7c676ts] {
    font-size: 10px;
    margin-inline-start: 4px;
    vertical-align: 1px;
}

.nhw-policy-terms__link .nhw-policy-terms__opened[b-11d7c676ts] {
    color: #0f7b3f;
    font-size: 11px;
}

.nhw-policy-terms__link--opened[b-11d7c676ts] {
    color: #0f7b3f;
}

.nhw-policy-gate[b-11d7c676ts] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--BEC-colorNeutralBackground3, #f3f2f1);
    font-size: 12.5px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
}

.nhw-policy-gate i[b-11d7c676ts] { color: var(--BEC-colorNeutralForeground3, #a19f9d); font-size: 12px; }

.nhw-policy-gate__count[b-11d7c676ts] {
    margin-inline-start: auto;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1, #323130);
}

.nhw-policy-gate--done[b-11d7c676ts] {
    background: #f0f9f3;
    color: #0f7b3f;
}

.nhw-policy-gate--done i[b-11d7c676ts],
.nhw-policy-gate--done .nhw-policy-gate__count[b-11d7c676ts] { color: #0f7b3f; }

/* ── Terms + agreement ───────────────────────────────────────────────────── */

.nhw-policy-terms[b-11d7c676ts] {
    flex: none;
    border: 1px solid var(--BEC-colorNeutralStroke2, #e1dfdd);
    border-radius: 9px;
    padding: 16px;
}

.nhw-policy-terms h3[b-11d7c676ts] {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--BEC-colorNeutralForeground1, #323130);
}

.nhw-policy-terms ol[b-11d7c676ts] {
    margin: 0 0 14px;
    padding-inline-start: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nhw-policy-terms li[b-11d7c676ts] {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--BEC-colorNeutralForeground1, #323130);
}

.nhw-policy-agree[b-11d7c676ts] {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-inline-start: 3px solid var(--BEC-themePrimary, #1e3c72);
    background: var(--BEC-colorNeutralBackground3, #f3f2f1);
    border-radius: 0 7px 7px 0;
    cursor: pointer;
}

/* Locked until both documents are read — agreeing to terms that describe documents
   you have not opened is the exact thing this dialog exists to prevent. */
.nhw-policy-agree--locked[b-11d7c676ts] {
    opacity: 0.55;
    cursor: not-allowed;
    border-inline-start-color: var(--BEC-colorNeutralStroke1, #d2d0ce);
}

.nhw-policy-agree input[b-11d7c676ts] {
    margin-top: 2px;
    flex: none;
}

.nhw-policy-agree__text[b-11d7c676ts] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nhw-policy-agree__text > span:first-child[b-11d7c676ts] {
    font-size: 12.5px;
    color: var(--BEC-colorNeutralForeground1, #323130);
}

.nhw-policy-agree__meta[b-11d7c676ts] {
    font-size: 11.5px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

/* ── Signature ───────────────────────────────────────────────────────────── */

.nhw-policy-sign[b-11d7c676ts] {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nhw-policy-sign label[b-11d7c676ts] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--BEC-colorNeutralForeground1, #323130);
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.nhw-policy-sign__hint[b-11d7c676ts] {
    font-weight: 400;
    font-size: 11.5px;
    color: var(--BEC-colorNeutralForeground3, #a19f9d);
}

.nhw-policy-sign input[b-11d7c676ts] {
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d2d0ce);
    border-radius: 7px;
    background: var(--BEC-colorNeutralBackground1, #fff);
    color: var(--BEC-colorNeutralForeground1, #323130);
}

.nhw-policy-sign input:disabled[b-11d7c676ts] {
    background: var(--BEC-colorNeutralBackground3, #f3f2f1);
    cursor: not-allowed;
}

.nhw-policy-sign input:focus-visible[b-11d7c676ts] {
    outline: 2px solid var(--BEC-themePrimary, #1e3c72);
    outline-offset: -1px;
}

.nhw-policy-modal__foot[b-11d7c676ts] {
    flex: none;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2, #e1dfdd);
    background: var(--BEC-colorNeutralBackground1, #fff);
}

@media (max-width: 720px) {
    .nhw-policy-overlay[b-11d7c676ts] {
        padding: 0;
    }

    .nhw-policy-modal__head[b-11d7c676ts],
    .nhw-policy-modal__body[b-11d7c676ts],
    .nhw-policy-modal__foot[b-11d7c676ts] {
        padding-inline: 16px;
    }

    .nhw-policy-modal[b-11d7c676ts] {
        border-radius: 0;
        height: 100%;
        width: 100%;
    }

    .nhw-policy-card[b-11d7c676ts] {
        flex-wrap: wrap;
    }

    .nhw-policy-card__btn[b-11d7c676ts] {
        width: 100%;
    }
}

/* ══ Support step — flip cards ═══════════════════════════════════════════════
   Front: team, what it covers, "Tap to read more".
   Back:  what that team does for the reader.

   Both faces stay in the DOM and are cross-faded, with the card sized to the
   TALLER of the two (see the grid technique below). Swapping with display:none
   would resize the card on every tap and reflow the whole grid under the
   reader's finger. */

/* The card is a <div> holding its own controls (mailto link, Copy, the flip hint);
   only those are clickable, so the card itself has no pointer cursor. */
.nhw-contact-card[b-11d7c676ts] {
    position: relative;
    width: 100%;
    font: inherit;
    text-align: start;
    background: var(--BEC-colorNeutralBackground1, #fff);
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;

    /* Both faces occupy the same grid cell, so the card's height is the tallest
       of them and never changes when it flips. */
    display: grid;
}

.nhw-contact-card:hover[b-11d7c676ts] {
    border-color: #7F9C9B;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.nhw-contact-card:focus-visible[b-11d7c676ts] {
    outline: 2px solid var(--BEC-colorBrandBackground, #0f6cbd);
    outline-offset: 2px;
}

.nhw-contact-card--flipped[b-11d7c676ts] {
    background: #F7F9F9;
    border-color: #7F9C9B;
}

.nhw-contact-card__face[b-11d7c676ts] {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: opacity 0.18s ease;
}

/* Hidden face: invisible AND non-interactive, so a tap or a caret cannot land on
   text that is not being shown. */
.nhw-contact-card__face--front[b-11d7c676ts] { opacity: 1; }
.nhw-contact-card__face--back[b-11d7c676ts] { opacity: 0; pointer-events: none; }

.nhw-contact-card--flipped .nhw-contact-card__face--front[b-11d7c676ts] { opacity: 0; pointer-events: none; }
.nhw-contact-card--flipped .nhw-contact-card__face--back[b-11d7c676ts] { opacity: 1; pointer-events: auto; }

.nhw-contact-card__desc[b-11d7c676ts],
.nhw-contact-card__detail[b-11d7c676ts] {
    font-size: 12.5px;
    color: #7C8388;
    line-height: 1.6;
}

/* margin-top:auto pins the hint to the bottom of whichever face is showing, so
   both faces share one baseline for it regardless of how much text they carry. */
/* The card was a <button>; the hint now is (so the card can hold a link and a Copy
   button). Unwind the default button chrome and keep the old hint look. */
.nhw-contact-card__hint[b-11d7c676ts] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 10px 0 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 11px;
    color: #A6ADB2;
    cursor: pointer;
    align-self: flex-start;
}

.nhw-contact-card__hint:focus-visible[b-11d7c676ts] {
    outline: 2px solid var(--BEC-themePrimary, #1e3c72);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── email row ───────────────────────────────────────────────────────────── */
.nhw-contact-card__email[b-11d7c676ts] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--BEC-colorNeutralStroke2, #e1dfdd);
}

.nhw-contact-card__mail[b-11d7c676ts] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--BEC-themePrimary, #1e3c72);
    text-decoration: none;
}

.nhw-contact-card__mail i[b-11d7c676ts] { font-size: 12px; color: #7C8388; }
.nhw-contact-card__mail span[b-11d7c676ts] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nhw-contact-card__mail:hover span[b-11d7c676ts] { text-decoration: underline; }

.nhw-contact-card__copy[b-11d7c676ts] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--BEC-colorNeutralStroke1, #d2d0ce);
    border-radius: 6px;
    background: var(--BEC-colorNeutralBackground1, #fff);
    font: inherit;
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2, #605e5c);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nhw-contact-card__copy:hover[b-11d7c676ts] { background: var(--BEC-colorNeutralBackground3, #f3f2f1); }
.nhw-contact-card__copy:focus-visible[b-11d7c676ts] { outline: 2px solid var(--BEC-themePrimary, #1e3c72); outline-offset: 2px; }
.nhw-contact-card__copy--done[b-11d7c676ts] { color: #0f7b3f; border-color: rgba(15, 123, 63, 0.4); background: #f0f9f3; }

.nhw-contact-card__hint i[b-11d7c676ts] { font-size: 10px; }

.nhw-contact-card:hover .nhw-contact-card__hint[b-11d7c676ts] { color: #7F9C9B; }

/* prefers-reduced-motion: the flip is a cross-fade, which is exactly the kind of
   transition to drop — the state change is still fully conveyed by the content. */
@media (prefers-reduced-motion: reduce) {
    .nhw-contact-card[b-11d7c676ts],
    .nhw-contact-card__face[b-11d7c676ts] {
        transition: none;
    }
}

@media (max-width: 720px) {
    .nhw-contact-grid[b-11d7c676ts] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Document names in clause 1 — link-styled, but a <button>, because they jump within
   this dialog rather than navigating anywhere. Inline so they sit in the sentence
   rather than breaking it. */
.nhw-policy-terms__link[b-11d7c676ts] {
    text-decoration: underline;
    text-underline-offset: 2px;
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    color: var(--BEC-themePrimary, #1e3c72);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-underline-offset: 2px;
    cursor: pointer;
}

.nhw-policy-terms__link:hover[b-11d7c676ts] {
    color: var(--BEC-themeDark, #16305c);
}

.nhw-policy-terms__link:focus-visible[b-11d7c676ts] {
    outline: 2px solid var(--BEC-themePrimary, #1e3c72);
    outline-offset: 2px;
    border-radius: 2px;
}
/* /Components/Shared/QuestionManagementGrid.razor.rz.scp.css */
/* Question Management Grid Component Styles */

.question-management-container[b-2xqas46zg9] {
    width: 100%;
    padding: 16px;
}

/* Loading Indicator */
.loading-indicator[b-2xqas46zg9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 12px;
    color: var(--BEC-colorNeutralForeground2);
}

.spinner[b-2xqas46zg9] {
    border: 3px solid var(--BEC-colorNeutralBackground3);
    border-top: 3px solid var(--BEC-colorBrandBackground);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-2xqas46zg9 1s linear infinite;
}

@keyframes spin-b-2xqas46zg9 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error Message */
.error-message[b-2xqas46zg9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background-color: var(--BEC-colorPaletteRedBackground2);
    color: var(--BEC-colorPaletteRedForeground1);
    border-radius: var(--BEC-borderRadiusMedium);
    font-size: 14px;
}

.error-message i[b-2xqas46zg9] {
    font-size: 18px;
}

/* Total Weighting Display */
.total-weighting[b-2xqas46zg9] {
    margin-top: 16px;
    padding: 12px 16px;
    background-color: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.total-weighting strong[b-2xqas46zg9] {
    color: var(--BEC-colorNeutralForeground1);
}

.total-weighting .weighting-value[b-2xqas46zg9] {
    font-size: 16px;
    font-weight: 600;
    color: var(--BEC-colorBrandForeground1);
}

.total-weighting .weighting-status[b-2xqas46zg9] {
    margin-left: auto;
    color: var(--BEC-colorNeutralForeground2);
    font-size: 12px;
}

.total-weighting.error[b-2xqas46zg9] {
    background-color: var(--BEC-colorPaletteRedBackground2);
    border: 1px solid var(--BEC-colorPaletteRedForeground1);
}

.total-weighting.error .weighting-value[b-2xqas46zg9] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.total-weighting.error .weighting-status[b-2xqas46zg9] {
    color: var(--BEC-colorPaletteRedForeground1);
}

.total-weighting.success[b-2xqas46zg9] {
    background-color: var(--BEC-colorPaletteGreenBackground2);
    border: 1px solid var(--BEC-colorPaletteGreenForeground1);
}

.total-weighting.success .weighting-value[b-2xqas46zg9] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

.total-weighting.success .weighting-status[b-2xqas46zg9] {
    color: var(--BEC-colorPaletteGreenForeground1);
}

/* Question Edit Form */
.question-edit-form[b-2xqas46zg9] {
    padding: 16px;
}

.question-edit-form .form-row[b-2xqas46zg9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.question-edit-form .form-group[b-2xqas46zg9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.question-edit-form .form-label[b-2xqas46zg9] {
    font-size: 12px;
    font-weight: 500;
    color: var(--BEC-colorNeutralForeground1);
}

.question-edit-form .form-label.required[b-2xqas46zg9]::after {
    content: " *";
    color: var(--BEC-colorPaletteRedForeground1);
}

.question-edit-form .validation-error[b-2xqas46zg9] {
    color: var(--BEC-colorPaletteRedForeground1);
    font-size: 11px;
    margin-top: 4px;
}

/* Badge Styles */
.badge[b-2xqas46zg9] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-success[b-2xqas46zg9] {
    background-color: var(--BEC-colorPaletteGreenBackground2);
    color: var(--BEC-colorPaletteGreenForeground1);
}

.badge-inactive[b-2xqas46zg9] {
    background-color: var(--BEC-colorNeutralBackground3);
    color: var(--BEC-colorNeutralForeground2);
}

/* Delete Confirmation Dialog */
.delete-confirmation[b-2xqas46zg9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px;
    text-align: center;
}

.delete-confirmation .warning-icon[b-2xqas46zg9] {
    font-size: 48px;
    color: var(--BEC-colorPaletteRedForeground1);
}

.delete-confirmation p[b-2xqas46zg9] {
    margin: 0;
    font-size: 14px;
    color: var(--BEC-colorNeutralForeground1);
}

.delete-confirmation .question-details[b-2xqas46zg9] {
    padding: 12px;
    background-color: var(--BEC-colorNeutralBackground2);
    border-radius: var(--BEC-borderRadiusMedium);
    width: 100%;
    text-align: left;
    font-size: 13px;
}

.delete-confirmation .warning-text[b-2xqas46zg9] {
    font-size: 12px;
    color: var(--BEC-colorNeutralForeground2);
    font-style: italic;
}

.btn-danger[b-2xqas46zg9] {
    background-color: var(--BEC-colorPaletteRedBackground1) !important;
    color: white !important;
}

.btn-danger:hover[b-2xqas46zg9] {
    background-color: var(--BEC-colorPaletteRedForeground1) !important;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .question-edit-form .form-row[b-2xqas46zg9] {
        grid-template-columns: 1fr;
    }

    .question-management-container[b-2xqas46zg9] {
        padding: 8px;
    }
}

/* /Components/Shared/VendorRegistration/VendorFileUpload.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   VendorFileUpload — Scoped CSS
   Design Tokens: --BEC-* (BEC Arabia: #1B365D primary, #2E5090 accent)
   ═══════════════════════════════════════════════════════════════════════════ */

.vfu-wrapper[b-sxkrby6jxj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

/* ── Drop Zone ─────────────────────────────────────────────────────────── */
.vfu-zone[b-sxkrby6jxj] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 2px dashed var(--BEC-border-light, #d1d5db);
    border-radius: 8px;
    cursor: pointer;
    background: var(--BEC-bg-surface, #f9fafb);
    color: var(--BEC-text-secondary, #6b7280);
    font-size: 13px;
    font-weight: 500;
    transition: border-color 0.18s, background 0.18s, color 0.18s;
    min-height: 40px;
    width: fit-content;
    max-width: 100%;
    
    -webkit-user-select: none;    
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.vfu-zone:hover[b-sxkrby6jxj] {
    border-color: var(--BEC-primary, #1B365D);
    background: #eef3fb;
    color: var(--BEC-primary, #1B365D);
}

.vfu-replace[b-sxkrby6jxj] {
    border-color: var(--BEC-primary-light, #93c5fd);
    background: #f0f5ff;
    color: var(--BEC-text-secondary, #6b7280);
    font-size: 12px;
}

.vfu-uploading[b-sxkrby6jxj] {
    opacity: 0.65;
    pointer-events: none;
}

/* Hidden native input stretches over the whole label zone */
.vfu-hidden[b-sxkrby6jxj] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.vfu-zone-icon[b-sxkrby6jxj] {
    font-size: 15px;
    flex-shrink: 0;
}

.vfu-zone-text[b-sxkrby6jxj] {
    white-space: nowrap;
}

/* ── Spinner ───────────────────────────────────────────────────────────── */
.vfu-spinner[b-sxkrby6jxj] {
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: vfu-spin-b-sxkrby6jxj 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes vfu-spin-b-sxkrby6jxj {
    to { transform: rotate(360deg); }
}

/* ── Uploaded file badge ───────────────────────────────────────────────── */
.vfu-file-badge[b-sxkrby6jxj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #eef3fb;
    border: 1px solid var(--BEC-primary-light, #93c5fd);
    border-radius: 20px;
    font-size: 12px;
    color: var(--BEC-primary, #1B365D);
    max-width: 100%;
}

.vfu-file-icon[b-sxkrby6jxj] {
    font-size: 13px;
    flex-shrink: 0;
}

.vfu-file-name[b-sxkrby6jxj] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
    font-weight: 500;
}

.vfu-remove[b-sxkrby6jxj] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--BEC-text-secondary, #9ca3af);
    font-size: 11px;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vfu-remove:hover[b-sxkrby6jxj] {
    color: var(--BEC-error, #dc2626);
}

/* ── Multi-file list ───────────────────────────────────────────────────── */
.vfu-file-list[b-sxkrby6jxj] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── Error ─────────────────────────────────────────────────────────────── */
.vfu-error[b-sxkrby6jxj] {
    font-size: 12px;
    color: var(--BEC-error, #dc2626);
}