*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
}

/* Hide custom translated labels during page initialization to prevent FOUT */
body.loading-terminology [data-translate] {
    visibility: hidden !important;
}


/* The document itself is the app's one intentional scroll region (#sidebar
   is `position: fixed` and #app-header is `position: sticky`, so scrolling
   html/body is what makes long pages - a big filtered grid, a tall form -
   reachable while the sidebar/header stay in place; see #app-main's
   min-height: 100vh further down). That's correct architecture, not a bug -
   but the browser's default scrollbar is a chunky, unstyled OS widget that
   clashes with the rest of this theme. Give it the same thin/subtle
   treatment already used for .sidebar-menu's own internal scrollbar,
   instead of trying to suppress scrolling altogether (which would just
   make anything below one screen's worth of content unreachable). */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

html::-webkit-scrollbar {
    width: 8px;
}

html::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.28);
}

html::-webkit-scrollbar-track {
    background: transparent;
}

:root {
    --sidebar-width: 230px;
    --sidebar-collapsed-width: 64px;
    --header-border: #eff2f5;
    --brand-accent: #e94f7c;
    --dm-tab-border: #d9dfe7;

    /* --- Design Config (Administration -> Design Config) ---
       CORRECTION 14: every variable below is admin-configurable from that
       page and applied globally by app/static/js/theme.js on every
       authenticated page load - see app/schemas/design_config.py for the
       field <-> CSS var mapping (1:1, underscores -> dashes) and
       app/services/design_config_service.py for per-tenant storage. Values
       here are exactly what this app already shipped with before this
       feature existed (this renamed/split the old --dm-teal/--sidebar-*/
    --dm-panel-bg/--header-icon-color variables into these semantic names,
    matched 1: 1 to real usage sites below - nothing here changes what the app looks like today;
    see individual rules for where --dm-panel-bg's two different real uses - nav hover vs. card/panel
 background - were split into --nav-hover-bg and --card-bg). */
    /* Buttons - Primary = Save/Update/Apply/Create actions, Secondary =
       Cancel/Close/Reset outline actions, Danger = destructive/Delete
       actions (no delete button exists in this port yet, but this is
       wired now so one just works when built). */
    --btn-primary-bg: #1b838b;
    --btn-primary-text: #ffffff;
    --btn-primary-hover-bg: #146267;
    --btn-secondary-bg: #ffffff;
    --btn-secondary-text: #344054;
    --btn-secondary-border: #d0d5dd;
    --btn-secondary-hover-bg: #f2f4f7;
    --btn-danger-bg: #e04f5f;
    --btn-danger-text: #ffffff;
    --btn-danger-hover-bg: #c53c4b;

    /* Navigation - Top menu is covered by --header-bg/--header-text below
       (Headers section), not a separate pair - see design_config.py. */
    --nav-side-bg: #ffffff;
    --nav-side-text: #344054;
    --nav-active-bg: #eef0f6;
    --nav-active-text: #1b838b;
    --nav-hover-bg: #f2f4f7;
    --nav-icon-color: #1b838b;
    --child-page-icon-color: #1b838b;

    /* DataTable / AG Grid - icons (original scope) plus header text, zebra
       striping, row hover/selected, and footer/pagination bar background
       (DataTable UI enhancement pass - see design_config.py's comment on
       this team for why grid_header_text_color isn't just a reuse of
       grid_sort_icon_color). */
    --grid-header-bg: #eef0f6;
    --grid-header-text-color: #344054;
    --grid-sort-icon-color: #344054;
    --grid-search-icon-color: #98a2b3;
    --grid-pagination-icon-color: #344054;
    --grid-action-icon-color: #1b838b;
    --grid-zebra-bg: #f9fafb;
    --grid-row-hover-bg: #f2f4f7;
    --grid-row-selected-bg: #dcefef;
    --grid-footer-bg: #fafbfc;

    /* Form controls */
    --form-label-color: #344054;
    --form-focus-color: #1b838b;
    --form-required-color: #e04f5f;

    /* Links / Icons (general, non-nav) */
    --link-color: #4dabf7;
    --icon-color: #78829d;

    /* Cards / Panels */
    --card-bg: #f2f4f7;
    --card-border: #eef1f4;

    /* Headers / Page titles (also covers Navigation -> Top menu) */
    --header-bg: #ffffff;
    --header-text: #1e2129;
    --page-title-color: #1e2129;

    /* Alerts / Notifications - real, already-rendered Bootstrap .alert-*
       classes (e.g. #userFormError/#userListError), not a stub. */
    --alert-success-bg: #d1e7dd;
    --alert-success-text: #0f5132;
    --alert-warning-bg: #fff3cd;
    --alert-warning-text: #664d03;
    --alert-danger-bg: #f8d7da;
    --alert-danger-text: #842029;
    --alert-info-bg: #cff4fc;
    --alert-info-text: #055160;

    /* Tabs - simplified from the secondary-tab-bar's original two-tone
       gradient to flat configurable colors (a color picker can't drive a
       gradient stop pair) - deliberate, disclosed simplification. */
    --tab-bg: #f1f1f1;
    --tab-hover-bg: #d7eaea;
    --tab-active-color: #1b838b;
    --tab-text-color: #344054;
    --tab-icon-color: #1b838b;

    /* Breadcrumbs - not yet rendered anywhere in this port (no page uses
       breadcrumb navigation today) - wired end-to-end regardless so it
       just works the moment one exists; see .breadcrumb rules below. */
    --breadcrumb-text-color: #667085;
    --breadcrumb-active-color: #1e2129;
    --breadcrumb-separator-color: #98a2b3;
}

/* Generic links - real nav/menu/tab links all carry their own more-specific
   selector (#sidebar-brand a, .secondary-tab, .menu-* etc.) so they keep
   winning over this bare `a` rule regardless of source order; this only
   affects plain links that don't opt into one of those components. */
a {
    color: var(--link-color, #4dabf7);
}

a:hover {
    color: var(--link-color, #4dabf7);
    filter: brightness(0.85);
}

/* Page title utility - no page in this port currently renders a distinct
   "page title" element (admin pages use the secondary tab bar instead of
   an <h1>-style heading) - available now so future pages can opt in. */
.page-title {
    color: var(--page-title-color, #1e2129);
    font-weight: 700;
}

/* Breadcrumbs - not yet rendered anywhere in this port (see
   design_config.py's module docstring) - Bootstrap's own .breadcrumb/
   .breadcrumb-item classes, themed now so it just works the moment a page
   adds one. */
.breadcrumb .breadcrumb-item {
    color: var(--breadcrumb-text-color, #667085);
}

.breadcrumb .breadcrumb-item.active {
    color: var(--breadcrumb-active-color, #1e2129);
}

.breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    color: var(--breadcrumb-separator-color, #98a2b3);
}

/* Alerts / Notifications - real, already-rendered Bootstrap alert classes
   (#userFormError/#userListError use `alert alert-danger` today) - themed
   here instead of relying on Bootstrap's own stock alert colors, and
   extended to the other 3 severities so all 4 are ready wherever used. */
.alert-success {
    background-color: var(--alert-success-bg, #d1e7dd);
    color: var(--alert-success-text, #0f5132);
    border-color: var(--alert-success-text, #0f5132);
}

.alert-warning {
    background-color: var(--alert-warning-bg, #fff3cd);
    color: var(--alert-warning-text, #664d03);
    border-color: var(--alert-warning-text, #664d03);
}

.alert-danger {
    background-color: var(--alert-danger-bg, #f8d7da);
    color: var(--alert-danger-text, #842029);
    border-color: var(--alert-danger-text, #842029);
}

.alert-info {
    background-color: var(--alert-info-bg, #cff4fc);
    color: var(--alert-info-text, #055160);
    border-color: var(--alert-info-text, #055160);
}

body {
    font-family: "Inter", "Gilroy", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #304050;
    margin: 0;
}

/* --- Sidebar ---
   Flex column so the logo (#sidebar-brand) stays fixed at the top and only
   the menu list below it scrolls - matching the reference, where the
   scrollbar clearly starts below the logo rather than running the full
   height of the sidebar. */
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--nav-side-bg, #ffffff);
    color: var(--nav-side-text, #344054);
    border-right: 1px solid var(--card-border, #eef1f4);
    overflow: hidden;
    z-index: 1030;
    transition: width 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

body.sidebar-collapsed #sidebar {
    width: var(--sidebar-collapsed-width, 64px) !important;
    min-width: var(--sidebar-collapsed-width, 64px) !important;
    max-width: var(--sidebar-collapsed-width, 64px) !important;
    transform: none !important;
}

#sidebar-brand {
    padding: 20px 16px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

#sidebar-brand a {
    color: var(--nav-side-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.25rem;
}

.brand-text-safe {
    color: var(--btn-secondary-text, #344054);
}

.brand-text-kivi {
    color: var(--btn-primary-bg, #1b838b);
}

/* Metronic-style floating sidebar toggle - a single rounded-SQUARE white
   button straddling the sidebar/content boundary (not a second control
   duplicated inside the header - see the CORRECTION note in layout.html;
   also not a full circle - corrected per reference screenshot to match
   Metronic's actual rounded-square shape + blue arrow-bar icon). `position:
   fixed` against the viewport, NOT a child of #sidebar - #sidebar slides
   fully off-screen when collapsed, so anchoring to #sidebar's own box would
   carry the button off-screen with it and leave no way to reopen. Its `left`
   tracks the sidebar edge and animates with the same transition so it slides
   in step with the sidebar, ending up docked at the viewport edge (still
   fully visible/clickable) once collapsed. */
.sidebar-close-btn {
    position: fixed;
    top: 24px;
    left: calc(var(--sidebar-width) - 16px);
    background: #ffffff;
    border: none;
    color: #3e97ff;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    z-index: 1031;
    transition: left 0.2s ease;
}

.sidebar-close-btn:hover {
    /* This floating button sits on white/light surfaces (not the dark
       sidebar itself), so its hover tint is --card-bg (light gray), not
       --nav-hover-bg (which is the dark sidebar's own hover shade below). */
    background: var(--card-bg, #f4f5f7);
}

body.sidebar-collapsed .sidebar-close-btn {
    left: calc(var(--sidebar-collapsed-width, 64px) - 16px) !important;
}

/* Sidebar collapsed icon rail styling */
body.sidebar-collapsed #sidebar-brand {
    justify-content: center !important;
    padding: 20px 0 !important;
}

body.sidebar-collapsed #sidebar-brand .brand-text {
    display: none !important;
}

body.sidebar-collapsed .sidebar-menu {
    padding: 8px 4px 24px !important;
}

body.sidebar-collapsed .menu-team-toggle {
    justify-content: center !important;
    padding: 10px 0 !important;
    color: var(--nav-side-text, #9899ac) !important;
    border-radius: 999px !important;
    width: 44px !important;
    height: 44px !important;
    margin: 4px auto !important;
}

body.sidebar-collapsed .menu-team-toggle.active {
    background: var(--nav-active-bg) !important;
    color: var(--nav-active-text) !important;
}

body.sidebar-collapsed .menu-team-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 1.15rem !important;
    margin: 0 auto !important;
}

body.sidebar-collapsed .menu-team-label,
body.sidebar-collapsed .menu-caret,
body.sidebar-collapsed .menu-subitems,
body.sidebar-collapsed .menu-link-label {
    display: none !important;
}

body.sidebar-collapsed .sidebar-menu a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px 0 !important;
    text-align: center !important;
    color: var(--nav-side-text, #9899ac) !important;
    border-radius: 999px !important;
    width: 44px !important;
    height: 44px !important;
    margin: 4px auto !important;
}

body.sidebar-collapsed .sidebar-menu a.active {
    background: var(--nav-active-bg) !important;
    color: var(--nav-active-text) !important;
}

body.sidebar-collapsed .sidebar-menu a .menu-link-icon {
    margin-right: 0 !important;
    font-size: 1.15rem !important;
}

.brand-mark {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--brand-accent);
    border-radius: 3px;
    transform: rotate(45deg);
}

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 8px 12px 24px;
    /* Scrollable region starts here, below the fixed #sidebar-brand -
       min-height: 0 is required for a flex child to actually be allowed to
       shrink/scroll instead of forcing its parent to grow. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.sidebar-menu a,
.menu-team-toggle {
    display: block;
    width: 100%;
    padding: 10px 16px;
    color: var(--nav-side-text);
    text-decoration: none;
    background: none;
    border: none;
    border-radius: 999px;
    text-align: left;
    font-weight: 600;
    font-size: 0.95rem;
}

.sidebar-menu a:hover,
.menu-team-toggle:hover {
    /* CORRECTION 14: hover now genuinely distinct from the .active state
       below (--nav-hover-bg vs --nav-active-bg) - previously both used the
       same value, so "Hover state" wasn't actually independently
       configurable the way the Design Config feature's own requirements
       call for. */
    background: var(--nav-hover-bg);
    color: var(--nav-active-text);
}

.menu-team-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* Decorative icon before each team label - generic/neutral (not asserting
   what any specific real menu category "means"), since menu_items/
   menu_categories has no icon column to draw a real per-item icon from.
   Flagging rather than inventing per-category icon assignments. */
.menu-team-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.menu-team-label {
    flex: 1;
}

.menu-caret {
    font-size: 0.7rem;
    color: inherit;
    opacity: 0.8;
    transition: transform 0.15s ease;
}

.menu-team-toggle[aria-expanded="true"] .menu-caret {
    transform: rotate(180deg);
}

.menu-subitems {
    list-style: none;
    margin: 4px 0 8px;
    padding: 0;
    background: none;
}

.menu-subitems a {
    padding-left: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    position: relative;
}

/* Bullet marker before each sub-item label, matching the reference's small
   dot markers. If a sub-item has a custom icon, we hide the dot. */
.menu-subitems a::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}

.menu-subitems a.has-icon {
    padding-left: 22px !important;
    /* Shift text to bullet start */
}

.menu-subitems a.has-icon::before {
    display: none !important;
    /* Hide dot */
}

.menu-subitems a.has-icon .menu-link-icon {
    width: 22px;
    text-align: center;
    margin-right: 8px !important;
    font-size: 1rem !important;
    display: inline-block !important;
    vertical-align: middle !important;
    opacity: 0.8 !important;
}

.menu-subitems a:hover {
    background: var(--nav-hover-bg);
    color: var(--nav-active-text);
}

.menu-subitems a.active {
    background: var(--nav-active-bg);
    color: var(--nav-active-text);
    font-weight: 700;
    border-radius: 999px;
}

/* Top-level flat links (category id==1 items, or a single-item category
   rendered flat) get the same active highlight as sub-items. */
.menu-link-item>a.active,
.menu-team-toggle.active {
    background: var(--nav-active-bg);
    color: var(--nav-active-text);
    border-radius: 999px;
}

.menu-show-more {
    display: block;
    padding: 8px 12px 8px 40px;
    background: none;
    border: none;
    color: var(--link-color, #4dabf7);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
}

.menu-show-more:hover {
    text-decoration: underline;
}

/* Menu Builder unlimited-depth support: a team can now nest inside another
   team's .menu-subitems (previously teams only ever appeared at the top
   level, since the legacy menu_categories table had no self-nesting). Indent
   progressively by [data-depth] so deeper levels read as a clear hierarchy;
   depth 1 keeps the original fixed 40px look, deeper levels add 16px each. */
.menu-subitems[data-depth] a,
.menu-subitems[data-depth]>li>.menu-team-toggle {
    padding-left: calc(24px + (attr(data-depth type(<number>), 1) * 16px));
}

/* attr() with a type() argument isn't supported everywhere yet - the
   fallback below (plain nth-level selectors) guarantees correct indentation
   on every browser regardless of attr() support for the rule above. */
.menu-subitems a,
.menu-subitems>li>.menu-team-toggle {
    padding-left: 40px;
}

.menu-subitems .menu-subitems a,
.menu-subitems .menu-subitems>li>.menu-team-toggle {
    padding-left: 56px;
}

.menu-subitems .menu-subitems .menu-subitems a,
.menu-subitems .menu-subitems .menu-subitems>li>.menu-team-toggle {
    padding-left: 72px;
}

.menu-subitems .menu-subitems .menu-subitems .menu-subitems a,
.menu-subitems .menu-subitems .menu-subitems .menu-subitems>li>.menu-team-toggle {
    padding-left: 88px;
}

.menu-subitems .menu-subitems a::before {
    left: 38px;
}

.menu-subitems .menu-subitems .menu-subitems a::before {
    left: 54px;
}

.menu-subitems .menu-subitems .menu-subitems .menu-subitems a::before {
    left: 70px;
}

.menu-subitems .menu-team-icon {
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
}

.menu-link-icon {
    margin-right: 2px;
}

/* Thin custom scrollbar matching the dark sidebar (WebKit browsers; Firefox
   falls back to `scrollbar-color` below). Scoped to .sidebar-menu, NOT
   #sidebar - #sidebar-brand (the logo) is a fixed flex item above it, so the
   scrollbar visually starts right below the logo instead of running the
   full height of the sidebar. */
.sidebar-menu {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.sidebar-menu::-webkit-scrollbar {
    width: 6px;
}

.sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
}

.sidebar-menu::-webkit-scrollbar-track {
    background: transparent;
}

/* --- App shell / header & Sticky Layout --- */
html,
body {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden !important;
    margin: 0;
    padding: 0;
}

#app-main {
    margin-left: var(--sidebar-width);
    transition: margin-left 0.2s ease;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f5f7;
}

body.sidebar-collapsed #app-main {
    margin-left: var(--sidebar-collapsed-width, 64px) !important;
    width: calc(100% - var(--sidebar-collapsed-width, 64px)) !important;
}

#app-header {
    flex: 0 0 auto;
    background: #f4f5f7;
    padding: 8px 20px;
    position: relative;
    z-index: 1020;
    transition: padding-left 0.2s ease;
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--header-bg, #ffffff) !important;
    color: var(--header-text, #1e2129) !important;
    padding: 6px 16px;
    border-radius: 10px;
    border: 1px solid var(--header-border, #eff2f5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    width: 100%;
}

/* Joined header + secondary nav bar (NO vertical space between them) */
#app-header:has(+ .cc-nav),
#app-header:has(+ .secondary-tab-bar),
#app-header:has(+ .dl-nav),
#app-header:has(+ div > .cc-nav),
#app-header:has(+ div > .dl-nav) {
    padding-bottom: 0 !important;
}

#app-header:has(+ .cc-nav) .header-inner,
#app-header:has(+ .secondary-tab-bar) .header-inner,
#app-header:has(+ .dl-nav) .header-inner,
#app-header:has(+ div > .cc-nav) .header-inner,
#app-header:has(+ div > .dl-nav) .header-inner {
    border-radius: 10px 10px 0 0 !important;
    border-bottom: 1px solid #eff2f5 !important;
}

.cc-nav,
.secondary-tab-bar,
.dl-nav {
    flex: 0 0 auto;
    position: relative;
    z-index: 1010;
}

/* Page action toolbars & headings - sticky directly below tab bar */
.page-action-bar,
.hc-publish-bar,
.mb-toolbar,
.sticky-page-bar {
    position: sticky;
    top: -12px;
    margin-top: -12px;
    padding-top: 12px;
    padding-bottom: 12px;
    background: #f4f5f7;
    z-index: 1000;
}

/* #sidebar fully slides off-screen when collapsed (no persistent icon rail -
   see the .sidebar-close-btn comment), so #app-main's margin-left collapses
   to 0 and the header's own brand logo would otherwise slide left underneath
   the docked toggle button (left: 10px in this state), overlapping it. Push
   the header's content right to leave space for the button instead. */
body.sidebar-collapsed #app-header {
    padding-left: 20px;
}

.header-icon-btn {
    background: none;
    border: none;
    color: var(--header-text, var(--icon-color, #78829d));
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-decoration: none;
    position: relative;
}

.header-icon-btn:hover {
    background: var(--card-bg, #f4f5f7);
    color: var(--header-text);
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--header-text);
    text-decoration: none;
    font-weight: 700;
}

.header-brand-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

.sidebar-brand-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

.header-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1e3a5c;
    color: #ffffff;
    font-weight: 800;
}

.header-spacer {
    flex: 1;
}

.header-icons {
    display: flex;
    align-items: center;
    /* Metronic's header row spaces its icons out generously rather than
       packing them edge-to-edge. */
    gap: 14px;
}

/* Decorative placeholder icons (search/messages/activity/apps/appearance -
   see the CORRECTION 2 note in partials/_header.html) look identical to
   real icons but aren't clickable - cursor signals that without visually
   graying them out and breaking the requested Metronic look. */
.header-icon-btn[aria-disabled="true"] {
    cursor: default;
}

/* Small dot indicator (Metronic style) instead of an always-visible "0"
   count badge - only shown when there's an actual unread notification. */
.notification-dot {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #17c653;
    border: 1.5px solid var(--header-bg);
}

.header-avatar-wrap {
    margin-left: 4px;
}

/* Outer button (Metronic-style: circular avatar + a small dropdown chevron
   beside it, rather than the avatar alone being the whole clickable toggle
   with no visible affordance that it opens a menu). */
.header-avatar-toggle {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    border-radius: 50%;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-avatar-toggle:hover {
    background: none;
    transform: scale(1.05);
}

.header-avatar-toggle:hover .header-avatar {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    border-color: #2563eb !important;
}

.header-avatar,
.header-avatar.role-admin,
.header-avatar.role-inspector,
.header-avatar.role-user {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--header-border, #e2e8f0);
    color: var(--btn-primary-text, #ffffff) !important;
    font-weight: 700;
    font-size: 0.85rem;
    background: var(--btn-primary-bg, #1b838b) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-avatar #userAvatarInitials,
.header-avatar span {
    color: var(--btn-primary-text, #ffffff) !important;
}

.header-avatar-menu {
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
    border: none;
    padding: 8px;
    min-width: 200px;
}

.header-avatar-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    padding: 8px 10px;
}

.header-avatar-menu .dropdown-item:hover {
    background: var(--card-bg, #f4f5f7);
}

.header-avatar.role-user {
    background: #6c757d;
}

/* --- Reusable secondary admin tab bar (see layout.html's secondary_nav block) ---
   Ported directly from the real Data Manager tab strip's CSS
   (styles/safekivi_theme.css `.nav-tabs-ss` + the `.dm-nav-tabs-ss` override):
   thin rounded tabs on a light gradient, 2px margin between them, bold
   13px/700-weight text, and an inner bottom-bordered <span> that carries
   the resting/active/hover accent line rather than a background swap. */
.secondary-tab-bar {
    display: flex;
    flex-wrap: wrap;
    background: #ffffff;
    padding: 0 0.5rem;
    min-height: 0;
}

/* Section divider label inside the Edit Template modal (Settings block). */
.settings-section-label {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #55637a;
    margin: 0.25rem 0 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e9edf3;
}

/* --- Control Center two-level nav (parent "area" tabs + nested "sub" tabs) ---
   Redesigned for a clear, modern parent/child hierarchy:
   - .cc-area-bar: the top-level areas (Audit, plus future areas). Bold,
     spaced-out pills with a solid underline indicator on the active item -
     reads as the primary navigation level.
   - .cc-sub-bar: the active area's children (Templates, Questions,
     Categories, ...). Visually "hangs" off the area bar via a tinted
     background + a small "Audit" connector label on the left, so it's
     unmistakably a nested row rather than a second row of identical tabs.
   Both rows keep the same responsive horizontal-scroll behavior as the
   original .secondary-tab-bar so nothing breaks on narrow viewports. */
.cc-nav {
    background: #f4f5f7;
    padding: 0 20px 8px 20px;
    border-bottom: none;
}

.cc-area-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.25rem;
    padding: 4px 12px;
    background: #ffffff;
    border-radius: 0 0 10px 10px;
    border: 1px solid var(--header-border, #eff2f5);
    border-top: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    width: 100%;
}

.cc-area-bar:has(+ .cc-sub-bar) {
    border-radius: 0 !important;
    border-bottom: 1px solid #eff2f5 !important;
}

.cc-area-bar::-webkit-scrollbar {
    height: 4px;
}

.cc-area-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--tab-text-color, #344054);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.1px;
    white-space: nowrap;
    border-bottom: none;
    background: var(--tab-bg, transparent);
    transition: background-color 0.18s ease, color 0.18s ease;
}

.cc-area-tab i {
    font-size: 0.95em;
    color: var(--tab-icon-color, #1b838b);
    transition: color 0.18s ease;
}

.cc-area-tab:hover {
    background: var(--tab-hover-bg, #f1f5f9);
    color: var(--tab-text-color, #1f2937);
    text-decoration: none;
    border-radius: 999px;
}

.cc-area-tab:hover i {
    color: var(--tab-icon-color, var(--tab-active-color, #1b838b));
}

.cc-area-tab.active {
    color: var(--tab-active-color, #1b838b);
    background: var(--tab-hover-bg, #e6f4f4);
    border-radius: 999px;
}

.cc-area-tab.active i {
    color: var(--tab-active-color, #1b838b);
}

.cc-area-tab.is-disabled {
    color: #b7bfc9;
    cursor: not-allowed;
}

.cc-area-tab.is-disabled i {
    color: #d3d8de;
}

.cc-sub-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #ffffff;
    border-radius: 0 0 10px 10px;
    border: 1px solid var(--header-border, #eff2f5);
    border-top: none;
    padding: 6px 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    width: 100%;
    overflow-x: auto;
}

.cc-sub-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a0b3;
    padding-right: 0.5rem;
    border-right: 1px solid #dbe2ea;
}

.cc-sub-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
}

.cc-sub-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--tab-text-color, #344054);
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
    background: var(--tab-bg, transparent);
    border: none;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.cc-sub-tab i {
    font-size: 0.85rem;
    color: var(--tab-icon-color, #1b838b);
    transition: color 0.18s ease;
}

.cc-sub-tab:hover {
    background: var(--tab-hover-bg, #f1f5f9);
    color: var(--tab-text-color, #1f2937);
    text-decoration: none;
    border-radius: 999px;
}

.cc-sub-tab:hover i {
    color: var(--tab-icon-color, var(--tab-active-color, #1b838b));
}

.cc-sub-tab.active {
    color: var(--tab-active-color, #1b838b);
    background: var(--tab-hover-bg, #e6f4f4);
    border-radius: 999px;
    box-shadow: none;
}

.cc-sub-tab.active i {
    color: var(--tab-active-color, #1b838b);
}

.cc-sub-tab.active:hover {
    background: var(--tab-hover-bg, #f1f5f9);
    color: var(--tab-active-color, #1b838b);
}

@media (max-width: 768px) {
    .cc-area-bar {
        padding: 0.4rem 0.6rem 0;
    }

    .cc-area-tab {
        padding: 0.5rem 0.7rem;
        font-size: 0.88rem;
    }

    .cc-area-tab span {
        display: none;
    }

    .cc-area-tab i {
        font-size: 1.05rem;
    }

    .cc-sub-bar {
        padding: 0.4rem 0.6rem;
    }

    .cc-sub-label span {
        display: none;
    }
}

/* ============================================================
   Data Library – categorized two-row EHS navigation (dl-nav)
   Mirrors the cc-nav pattern but with four top-level category
   pills and a tinted sub-tab row per category.
   ============================================================ */
.dl-nav {
    background: #f4f5f7;
    padding: 0 20px 8px 20px;
    border-bottom: none;
}

/* Row 1: Category pill tabs */
.dl-cat-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.25rem;
    padding: 4px 12px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--header-border, #eff2f5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    width: 100%;
}

.dl-cat-bar:has(+ .dl-sub-bar) {
    border-radius: 0 !important;
    border-bottom: 1px solid #eff2f5 !important;
}

.dl-cat-bar::-webkit-scrollbar {
    height: 4px;
}

.dl-cat-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--tab-text-color, #344054);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.1px;
    white-space: nowrap;
    border-bottom: none;
    background: var(--tab-bg, transparent);
    transition: background-color 0.18s ease, color 0.18s ease;
}

.dl-cat-tab i {
    font-size: 1rem;
    color: var(--tab-icon-color, #1b838b);
    transition: color 0.18s ease;
}

.dl-cat-tab:hover {
    background: var(--tab-hover-bg, #f1f5f9);
    color: var(--tab-text-color, #1f2937);
    text-decoration: none;
    border-radius: 999px;
}

.dl-cat-tab:hover i {
    color: var(--tab-icon-color, var(--tab-active-color, #1b838b));
}

.dl-cat-tab.active {
    color: var(--tab-active-color, #1b838b);
    background: var(--tab-hover-bg, #e6f4f4);
    border-radius: 999px;
}

.dl-cat-tab.active i {
    color: var(--tab-active-color, #1b838b);
}

/* Category badge counter (optional – hidden by default) */
.dl-cat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e8f4f5;
    color: var(--tab-active-color, #1b838b);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.dl-cat-tab.active .dl-cat-count {
    background: var(--tab-active-color, #1b838b);
    color: #ffffff;
}

/* Row 2: Sub-tab strip (tinted, reads as nested under the active category) */
.dl-sub-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #ffffff;
    border-radius: 0 0 10px 10px;
    border: 1px solid var(--header-border, #eff2f5);
    border-top: none;
    padding: 6px 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    width: 100%;
    overflow-x: auto;
}

.dl-sub-bar::-webkit-scrollbar {
    height: 4px;
}

/* Connector label — small "→ Category" text on the left */
.dl-sub-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tab-active-color, #1b838b);
    padding-right: 0.6rem;
    border-right: 1px solid #c3e0e2;
    user-select: none;
}

.dl-sub-label i {
    font-size: 0.75rem;
    color: var(--tab-active-color, #1b838b);
}

/* Sub-tab pills container */
.dl-sub-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.3rem;
}

/* Individual sub-tab pill */
.dl-sub-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--tab-text-color, #344054);
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
    background: var(--tab-bg, transparent);
    border: none;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.dl-sub-tab i {
    font-size: 0.85rem;
    color: var(--tab-icon-color, #1b838b);
    transition: color 0.18s ease;
}

.dl-sub-tab:hover {
    background: var(--tab-hover-bg, #f1f5f9);
    color: var(--tab-text-color, #1f2937);
    text-decoration: none;
    border-radius: 999px;
}

.dl-sub-tab:hover i {
    color: var(--tab-icon-color, var(--tab-active-color, #1b838b));
}

.dl-sub-tab.active {
    color: var(--tab-active-color, #1b838b);
    background: var(--tab-hover-bg, #e6f4f4);
    border-radius: 999px;
    box-shadow: none;
}

.dl-sub-tab.active i {
    color: var(--tab-active-color, #1b838b);
}

.dl-sub-tab.active:hover {
    background: var(--tab-hover-bg, #f1f5f9);
    color: var(--tab-active-color, #1b838b);
}

/* Responsive: collapse category tab text on small screens, show icons only */
@media (max-width: 768px) {
    .dl-cat-bar {
        padding: 0.5rem 0.75rem 0;
    }

    .dl-cat-tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    .dl-cat-tab span {
        display: none;
    }

    .dl-cat-tab i {
        font-size: 1.1rem;
    }

    .dl-sub-bar {
        padding: 0.38rem 0.75rem;
    }

    .dl-sub-label span {
        display: none;
    }
}

/* Premium, modern secondary-tab-bar styling: card grid layout matching cc-area-bar */
.secondary-tab-bar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 0.25rem !important;
    padding: 4px 12px !important;
    background: #ffffff !important;
    border-radius: 0 0 10px 10px !important;
    border: 1px solid var(--header-border, #eff2f5) !important;
    border-top: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    width: 100% !important;
    margin: 0 !important;
}

.secondary-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.55rem 1rem !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    color: var(--tab-text-color, #4b5563) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.1px !important;
    white-space: nowrap !important;
    border: none !important;
    background: var(--tab-bg, transparent) !important;
    box-shadow: none !important;
    height: auto !important;
    transition: background-color 0.18s ease, color 0.18s ease !important;
}

.secondary-tab span {
    display: inline !important;
    padding: 0 !important;
    border: none !important;
    white-space: nowrap !important;
    color: inherit !important;
}

.secondary-tab:hover {
    background: var(--tab-hover-bg, #f1f5f9) !important;
    color: var(--tab-text-color, #1f2937) !important;
    text-decoration: none !important;
    border-radius: 999px !important;
}

.secondary-tab.active {
    color: var(--tab-active-color, #1b838b) !important;
    background: var(--tab-hover-bg, #e6f4f4) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

.secondary-tab.active span {
    color: var(--tab-active-color, #1b838b) !important;
}

.secondary-tab.disabled,
.secondary-tab[disabled],
.secondary-tab[title="Not migrated yet"] {
    color: #a1a5b7 !important;
    cursor: not-allowed !important;
    border-color: #e4e6ef !important;
    background-color: #ffffff !important;
    opacity: 0.8 !important;
}

.secondary-tab.disabled::before,
.secondary-tab[disabled]::before,
.secondary-tab[title="Not migrated yet"]::before {
    opacity: 0.65 !important;
}

.secondary-tab.disabled:hover,
.secondary-tab[title="Not migrated yet"]:hover {
    background-color: #ffffff !important;
    border-color: #e4e6ef !important;
    color: #a1a5b7 !important;
}

/* Navigation Icons (Top Header Menu & Left Sidebar Menu) */
#headerMenu i,
#headerMenu .header-menu-toggle i,
#headerMenu .header-submenu i,
#headerMenu .megamenu-dropdown i,
#sidebarMenu i,
#sidebarMenu .menu-team-icon i,
#sidebarMenu .menu-link-icon {
    color: var(--nav-icon-color, #1b838b) !important;
    transition: color 0.2s ease !important;
}

#sidebarMenu .menu-team-toggle.active .menu-team-icon i,
#sidebarMenu a.active .menu-link-icon {
    color: var(--nav-active-text, #ffffff) !important;
}

/* Child Page Icons (Secondary Tab Bar / Child Page Tabs) */
.secondary-tab i,
.secondary-tab i.bi,
.secondary-tab-bar i {
    font-size: 1.1rem !important;
    color: var(--tab-icon-color, var(--child-page-icon-color, #1b838b)) !important;
    display: inline-block !important;
    line-height: 1 !important;
    margin-right: 4px !important;
    transition: color 0.2s ease !important;
}

.secondary-tab:hover i,
.secondary-tab:hover i.bi {
    color: var(--tab-icon-color, var(--child-page-icon-color, #1b838b)) !important;
}

.secondary-tab.active i,
.secondary-tab.active i.bi {
    color: var(--tab-active-color, var(--tab-icon-color, #1b838b)) !important;
}

.users-filter-offcanvas {
    width: 420px !important;
}

.users-filter-offcanvas .offcanvas-body {
    overflow-x: hidden;
}

/* RAS's field-team card (safekivi_theme.css: .chem-ss-filter-block -
   background:#f2f4f7; border-radius:7px; padding:20px) - color/radius
   ported directly; padding/margin tightened slightly since this drawer's
   cards hold plain label+input rows, not RAS's denser date-range layout. */
.filter-card {
    background: var(--card-bg, #f2f4f7);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 0 0 12px;
}

.filter-card .filter-row+.filter-row {
    margin-top: 10px;
}

/* RAS's offcanvas-footer (safekivi_theme.css: background-color:#ddebff) - kept as
   a sticky bar so Close/Clear Filter/Apply Filters stay reachable however
   long the filter-card list scrolls above it. Button colors follow this
   app's teal accent rather than RAS's own blue, per CORRECTION 8/9's
   existing brand palette (--btn-primary-bg, renamed from --dm-teal in
   CORRECTION 14). */
.offcanvas-footer {
    background: #eef6f6;
    padding: 14px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid #d7e6e6;
}

.btn-outline-filter {
    padding: 8px 18px;
    /* Teal-outline pill (not the gray --btn-secondary-* look) - this is an
       outline variant of the PRIMARY accent, not the same "Secondary
       button" concept as e.g. the modal's gray Cancel button, so it's
       deliberately bound to --btn-primary-bg rather than a new/duplicate
       button variable. */
    border: 1.5px solid var(--btn-primary-bg);
    border-radius: 999px;
    background: #fff;
    color: var(--btn-primary-bg);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
}

.btn-outline-filter:hover {
    background: rgba(27, 131, 139, 0.08);
}

/* Footer's Apply Filters button reuses .btn-apply-filters but shouldn't
   stretch full-width like it did as the old inline panel's own submit
   button - override just the sizing, keep the teal pill styling. */
.offcanvas-footer .btn-apply-filters {
    display: inline-block;
    width: auto;
    margin-top: 0;
}

/* Toolbar trigger button that opens the drawer (RAS: .btn-ss-showAdv-filters,
   a circular icon-only button at background #f2f4f7). Adapted to an
   icon+label pill to match this toolbar's other buttons (.btn-export)
   rather than RAS's bare circular icon, since every other action here
   already carries a text label. */
.users-grid-toolbar,
.safekivi-datatable-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
}

.datatable-toolbar-primary {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.datatable-toolbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.users-export-btns {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.users-grid-toolbar .btn-create-user,
.users-grid-toolbar .btn-filter-toggle,
.users-grid-toolbar .btn-clear-filters,
.users-grid-toolbar .btn-export,
.safekivi-datatable-toolbar .btn-create-user,
.safekivi-datatable-toolbar .btn-filter-toggle,
.safekivi-datatable-toolbar .btn-clear-filters,
.safekivi-datatable-toolbar .btn-export {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 16px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

.users-grid-toolbar .btn-create-user i,
.users-grid-toolbar .btn-filter-toggle i,
.users-grid-toolbar .btn-clear-filters i,
.users-grid-toolbar .btn-export i,
.safekivi-datatable-toolbar i {
    font-size: 1rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 768px) {

    .users-grid-toolbar,
    .safekivi-datatable-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .datatable-toolbar-primary,
    .datatable-toolbar-actions,
    .users-export-btns {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .users-grid-toolbar .btn-create-user,
    .safekivi-datatable-toolbar .btn-create-user {
        width: 100% !important;
    }
}

.btn-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    background: #f2f4f7;
    color: #344054;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
}

.btn-filter-toggle:hover {
    background: #e4e7ec;
}

.btn-clear-filters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid #fda29b;
    border-radius: 999px;
    background: #fef3f2;
    color: #b42318;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-clear-filters:hover {
    background: #fee4e2;
    border-color: #f87171;
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-label {
    flex: 0 0 130px;
    font-weight: 600;
    color: var(--form-label-color, #344054);
    font-size: 0.9rem;
    margin: 0;
}

.filter-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 0.875rem;
    background: #fff;
}

.filter-input:focus {
    outline: none;
    border-color: var(--form-focus-color);
    box-shadow: 0 0 0 3px rgba(29, 122, 122, 0.15);
}

select.filter-input[multiple] {
    display: none !important;
}

/* --- Select2 & Multiselect (User Keywords / Access Roles filters) ---
   Scoped overrides so Select2 container/pill badges fit our .filter-row
   layout and match plain <select> inputs identically. */
.filter-row .multiselect-native-select,
.filter-row span.multiselect-native-select,
.filter-row .select2,
.filter-row .select2-container,
.filter-row .select2-container--bootstrap-5 {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
}

.filter-row .select2-container .selection {
    display: block !important;
    width: 100% !important;
}

.filter-row .select2-container--bootstrap-5 .select2-selection--multiple {
    min-height: 38px !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 8px !important;
    padding: 3px 8px !important;
    background-color: #fff !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.filter-row .select2-container--bootstrap-5.select2-container--focus .select2-selection--multiple {
    border-color: var(--form-focus-color, #1B838B) !important;
    box-shadow: 0 0 0 3px rgba(27, 131, 139, 0.15) !important;
}

.filter-row .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.filter-row .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: #f2f4f7 !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 6px !important;
    color: #344054 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    padding: 2px 8px !important;
    margin: 1px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.filter-row .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: #667085 !important;
    margin-right: 4px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
}

.filter-row .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #f04438 !important;
}

.filter-row .select2-container--bootstrap-5 .select2-selection--multiple .select2-search.select2-search--inline {
    flex: 1 1 auto !important;
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 80px !important;
}

.filter-row .select2-container--bootstrap-5 .select2-selection--multiple .select2-search__field {
    margin: 0 !important;
    padding: 2px 4px !important;
    font-size: 0.875rem !important;
    color: #344054 !important;
    height: 28px !important;
    line-height: 28px !important;
    width: 100% !important;
    min-width: 80px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.select2-dropdown {
    z-index: 1060 !important;
    border-radius: 8px !important;
    border: 1px solid #d0d5dd !important;
    box-shadow: 0 4px 16px rgba(16, 24, 40, 0.1) !important;
    overflow: hidden !important;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--btn-primary-bg, #1B838B) !important;
    color: #fff !important;
}

.filter-row .multiselect-filter-wrap {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    position: relative !important;
}

.multiselect-filter-wrap select {
    display: none !important;
}

.filter-multiselect-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 0.875rem !important;
    background: #fff !important;
    color: #344054 !important;
    box-sizing: border-box !important;
}

.multiselect-container .multiselect-filter input.multiselect-search {
    border: 1px solid #d0d5dd !important;
    border-radius: 8px !important;
    background: #fff;
}

.multiselect-container .multiselect-filter input.multiselect-search:focus {
    border-color: var(--form-focus-color) !important;
    box-shadow: 0 0 0 3px rgba(27, 131, 139, 0.15);
}

.multiselect-container .multiselect-filter .fa-search {
    /* This IS the DataTable filter's own search icon. */
    color: var(--grid-search-icon-color, #98a2b3);
}

.btn-apply-filters {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 8px 20px;
    border: none;
    border-radius: 999px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text, #fff);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
}

.btn-apply-filters:hover {
    background: var(--btn-primary-hover-bg);
}

.btn-create-user {
    display: inline-block;
    padding: 7px 20px;
    border: none;
    border-radius: 999px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text, #fff);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    margin-bottom: 10px;
}

.btn-create-user:hover {
    background: var(--btn-primary-hover-bg);
}

/* CORRECTION 8 (AG Grid Community migration): the hand-rolled table, its
   pagination footer, and the chevron expand-row (.col-expand/.row-expand-btn/
   .user-detail-row) are gone - replaced by a real AG Grid Community grid
   (#usersGrid, styling below) with the grid's own built-in sorting and
   pagination panel. User Keywords/Access Roles/Emplid/Roster Role moved from the
   expand-row into the view/edit modal's read-only section instead (row
   expand/Master-Detail is an AG Grid Enterprise-only feature) - the
   .user-detail-* classes just below are reused as-is for that, unchanged
   from the expand-row version. .actions-cell/.action-icon-btn (CORRECTION 7,
   further below) are also reused as-is, now rendered inside an AG Grid cell
   renderer instead of a plain <td>. */
.users-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.users-export-btns {
    display: flex;
    gap: 8px;
}

.btn-export {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

.btn-export:hover {
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-bg);
}

/* Shared shell for the grid + its custom footer (see list.html) - one
   border-radius/box-shadow/border for the whole panel, so the pagination
   footer reads as part of the same card rather than a second, separately-
   boxed element bolted on underneath. */
/* Softened, two-layer shadow (subtle "lifted card" look) and a slightly
   translucent border instead of the flat single-shadow/solid-border combo
   this had before - visual refinement only, no radius/size/spacing change. */
.users-ag-grid-panel {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    border: 1px solid color-mix(in srgb, var(--card-border) 85%, transparent);
}

/* ROOT CAUSE of "Design Config grid colour changes have zero effect" (and,
   retroactively, why earlier header-background edits never visibly changed
   anything): ag-theme-quartz.css is loaded from list.html's extra_css block,
   which layout.html renders AFTER site.css (layout.html: site.css link, then
   {% block extra_css %}). Its packaged `.ag-theme-quartz { --ag-header-
   background-color: <built-in default>; ... }` rule has the exact same
   specificity (one class, 0-1-0) as the `.users-ag-grid { --ag-header-
   background-color: var(--grid-header-bg); }` rule below - and in a
   specificity tie, whichever rule is later in the cascade wins, which was
   AG Grid's own packaged CSS, not ours. Every --ag-* override in this block
   was silently losing to the theme's built-in values regardless of what
   --grid-* variables Design Config supplied.
   Fix: target `.ag-theme-quartz.users-ag-grid` (both classes already sit on
   the real #usersGrid div - see list.html) for specificity 0-2-0, which
   always outranks the packaged theme's single-class rule no matter which
   stylesheet loads last. No selector/load-order change needed elsewhere. */
.ag-theme-quartz.users-ag-grid {
    /* No fixed height here anymore - domLayout: 'autoHeight' (users.js)
       sizes the grid to exactly however many rows the current page actually
       has (via an inline style AG Grid sets itself). The old fixed 480px
       left a large blank gap under the rows whenever a page held fewer
       rows than 480px worth (e.g. the last page, or a small filtered
       result set) - reported as unwanted empty space above the pagination
       footer. min-height keeps the "No users found" overlay (0-row state)
       from collapsing to an awkward sliver. */
    width: 100%;
    min-height: 160px;
    --ag-font-family: "Inter", "Gilroy", Arial, sans-serif;
    --ag-font-size: 13px;
    --ag-accent-color: var(--grid-action-icon-color);
    /* Light gray header + zebra-striped rows, per the chemical-inventory-
       style reference screenshot - CORRECTION 12 - now fully Design Config
       driven (DataTable UI enhancement pass): header background/text,
       zebra tone, row hover, and row selection all pull from dedicated
       --grid-* variables instead of the earlier mix of hardcoded values
       and reused --card-bg. */
    --ag-header-background-color: var(--grid-header-bg);
    --ag-header-foreground-color: var(--grid-header-text-color);
    /* AG Grid's general text/icon color, including its own pagination
       panel (page numbers, prev/next arrows, page-size dropdown) - the
       real hook for the "Pagination icons" requirement category. The
       native panel itself is hidden (suppressPaginationPanel, users.js) in
       favor of the custom #usersGridFooter below, but this still covers
       any other AG Grid chrome (column menu icons, filter icons) that
       share this same foreground concept. */
    --ag-foreground-color: var(--grid-pagination-icon-color);
    --ag-border-color: var(--card-border);
    --ag-row-hover-color: var(--grid-row-hover-bg);
    --ag-selected-row-background-color: var(--grid-row-selected-bg);
    --ag-odd-row-background-color: var(--grid-zebra-bg);
    --ag-border-radius: 10px;
    /* Slightly roomier cell padding for a cleaner, less cramped look
       (spacing/alignment requirement) - row/header height are left alone
       (34px, set in users.js) since those were deliberately tuned earlier
       to avoid reintroducing the grid's own vertical scrollbar. */
    --ag-cell-horizontal-padding: 14px;
}

/* Explicit header bottom border - Quartz's own border-color variable
   already tints internal grid lines, but a dedicated rule here guarantees
   a visible, deliberate separation between header and body rows (as
   opposed to relying on whatever the packaged theme does by default). */
/* NOTE: an earlier pass added `.users-ag-grid .ag-body-viewport { overflow-y:
   hidden !important; }` here as a defensive guard. Pulled it - fetching AG
   Grid 36's real packaged CSS showed `.ag-body-viewport` isn't even the
   element that renders the visible scrollbar (that's `.ag-body-vertical-
   scroll-viewport`, a separate synced custom-scrollbar element AG Grid
   shows/hides itself via its own `ag-invisible`/`ag-hidden` classes once
   content stops overflowing) - so the override never touched the actual
   scrollbar and would only have risked silently clipping real rows if it
   had matched something. The real fix is rowBuffer: 0 in users.js's
   gridOptions, which stops AG Grid from rendering extra buffered rows past
   the current page's real content in the first place - once there's no
   genuine overflow, AG Grid's own show/hide logic hides the scrollbar
   without any CSS override needed. suppressHorizontalScroll (JS) remains
   the belt-and-suspenders guard against the horizontal scrollbar, since
   that one is an officially documented gridOption rather than a guess at
   internal class names. */

/* ROOT CAUSE (AG Grid 36): the `--ag-header-background-color` /
   `--ag-header-foreground-color` overrides set on `.ag-theme-quartz.users-ag-grid`
   above still resolve correctly (confirmed: the grid element's computed
   `--ag-header-background-color` == the saved Design Config value), but AG
   Grid 36's Quartz CSS no longer paints `.ag-header` FROM that variable -
   the header element computes to `rgba(0,0,0,0)` (transparent) regardless of
   the variable's value, so every Design Config header colour change had no
   visible effect. AG Grid's legacy `--ag-header-*` plumbing is effectively
   dead in v36. Fix: paint the header element directly from our own
   `--grid-header-*` variables here, instead of relying on AG Grid to consume
   its `--ag-*` indirection. site.css is unlayered, so this reliably wins over
   AG Grid's own @layer-wrapped theme rules regardless of load order. */
.ag-theme-quartz.users-ag-grid .ag-header {
    border-bottom: 1px solid var(--card-border);
    background-color: var(--grid-header-bg);
}

.ag-theme-quartz.users-ag-grid .ag-header-row {
    background-color: var(--grid-header-bg);
}

/* AG Grid 36 inserts a new `.ag-grid-scrolling-cells` wrapper INSIDE the
   header row (between `.ag-header-row` and the transparent `.ag-header-cell`s)
   that carries its own opaque near-white background. It stacks ABOVE the red
   `.ag-header`/`.ag-header-row` we paint above, so without this rule it
   covers the header colour and only the row's thin edges show through - the
   "colour not applying fully" symptom. Scoped under `.ag-header` so the
   identically-named body scrolling container is left untouched. */
.ag-theme-quartz.users-ag-grid .ag-header .ag-grid-scrolling-cells {
    background-color: var(--grid-header-bg);
}

.ag-theme-quartz.users-ag-grid .ag-header-cell,
.ag-theme-quartz.users-ag-grid .ag-header-team-cell {
    color: var(--grid-header-text-color);
}

.ag-theme-quartz.users-ag-grid .ag-header-cell-label {
    font-weight: 600;
    color: var(--grid-header-text-color);
    /* Fix: on columns with a longer header label (e.g. "Username"), the
       label text and the sort-indicator icon are flex siblings with no
       shrink priority set, so the text was taking all the space and
       squeezing the icon out of view entirely - the icon only "happened"
       to show on columns with short labels like "Role"/"Status". Force the
       text to truncate (ellipsis) first and reserve fixed space for the
       icon, so every sortable column keeps a visible sort icon regardless
       of label length or column width. No column width/padding changed. */
    overflow: hidden;
}

.ag-theme-quartz.users-ag-grid .ag-header-cell-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

/* Column dividers between header cells. AG Grid's Quartz default draws the
   resize-handle line at ~30% header height (a short centred tick, 2px wide);
   this stretches it to the full header height and slims it to a clean 1px
   hairline so the columns read as fully separated. */
.ag-theme-quartz.users-ag-grid .ag-header-cell-resize::after {
    height: 100%;
    top: 0;
    width: 0.5px;
}

/* Modern, minimal row separators + a smooth hover/selection fade (color
   transitions only - AG Grid's own --ag-row-hover-color/--ag-selected-
   row-background-color vars, set above, already drive the actual colors;
   this only softens the border and makes the state change feel deliberate
   rather than an instant flip). No row height/padding/column width
   changes - purely border color/opacity and a background-color
   transition. */
.ag-theme-quartz.users-ag-grid .ag-row {
    border-bottom: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
    transition: background-color 0.12s ease;
}

.ag-theme-quartz.users-ag-grid .ag-row:last-child {
    border-bottom: none;
}

/* Sort icons (bi-sort-up/bi-sort-down/bi-arrow-down-up, supplied via
   gridOptions.icons in users.js) - matching the requested reference style:
   the neutral "not sorted yet" icon (always visible via
   defaultColDef.unSortIcon, not just on hover) is a light, minimal
   double-arrow in the app's muted grey icon tone; the active (asc/desc)
   icon on the currently-sorted column is bold and dark, using the same
   dark tone as the header text itself, so the active column is
   unmistakably highlighted rather than just a recolored variant of the
   neutral glyph. */
.ag-theme-quartz.users-ag-grid .ag-sort-icon-asc,
.ag-theme-quartz.users-ag-grid .ag-sort-icon-desc,
.ag-theme-quartz.users-ag-grid .ag-sort-icon-none {
    display: inline-block;
    transition: color 0.15s ease, opacity 0.15s ease;
    /* AG Grid swaps the icons.sort* HTML string wholesale when the sort
       state changes (unsorted -> asc -> desc -> unsorted) rather than
       toggling a class on one persistent element, so a plain `transition`
       on color/opacity never has anything to interpolate from - the new
       icon just appears already in its final state. This short entrance
       animation (fade + tiny scale-in) is what actually makes that swap
       read as a smooth state change instead of an instant snap, per
       "use smooth visual transitions when the sort order changes". */
    animation: ehs-sort-icon-in 0.18s ease;
}

@keyframes ehs-sort-icon-in {
    from {
        opacity: 0;
        transform: scale(0.6);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ag-theme-quartz.users-ag-grid .ag-sort-icon-asc,
.ag-theme-quartz.users-ag-grid .ag-sort-icon-desc {
    color: var(--grid-header-text-color);
    font-size: 0.85rem;
    font-weight: 700;
    opacity: 1;
}

.ag-theme-quartz.users-ag-grid .ag-sort-icon-none {
    color: var(--grid-search-icon-color, #98a2b3);
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.85;
}

/* Small, consistent gap between the column label and its sort icon -
   AG Grid's own sort indicator wrapper, kept regardless of the custom
   icon content supplied above. */
.ag-theme-quartz.users-ag-grid .ag-sort-indicator-container {
    margin-left: 6px;
    /* Never let the icon shrink to make space for the label text above -
       the label truncates with an ellipsis instead. This is the other half
       of the header-icon-clipping fix. */
    flex: 0 0 auto;
}

/* Custom pagination footer (list.html's #usersGridFooter) - replaces AG
   Grid's native pagination panel entirely (suppressPaginationPanel: true,
   users.js), rendered/kept in sync by renderGridPaginationFooter(). Sits
   flush under .users-ag-grid inside the shared .users-ag-grid-panel shell
   (its own border-radius/shadow/border live on that wrapper, not here) -
   only the top divider border below is this element's own. */
.ehs-grid-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 16px;
    background: var(--grid-footer-bg);
    border-top: 1px solid var(--card-border);
    font-size: 0.85rem;
    color: var(--grid-header-text-color);
}

.ehs-grid-footer-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ehs-grid-page-size-label {
    margin: 0;
    color: #667085;
    font-weight: 500;
}

.ehs-grid-page-size-select {
    padding: 4px 28px 4px 10px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: #fff;
    font-size: 0.85rem;
    color: var(--grid-header-text-color);
    cursor: pointer;
}

.ehs-grid-page-size-select:focus {
    outline: none;
    border-color: var(--form-focus-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--form-focus-color) 25%, transparent);
}

.ehs-grid-row-summary {
    color: #667085;
}

/* Numbered pagination - rounded pill buttons with visible spacing between
   them (requirement: "Add proper spacing between page numbers"), the
   active page picked out in the app's primary theme color, and distinct
   hover/focus states - the part AG Grid's own native panel can't do at all
   since it has no per-page-number buttons. */
.ehs-grid-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ehs-page-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: #fff;
    color: var(--grid-header-text-color);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ehs-page-btn:hover:not(:disabled):not(.active) {
    background: var(--grid-row-hover-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-bg);
}

.ehs-page-btn:focus-visible {
    outline: none;
    border-color: var(--form-focus-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--form-focus-color) 25%, transparent);
}

.ehs-page-btn.active {
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-text, #fff);
    cursor: default;
}

.ehs-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ehs-page-btn.ehs-page-nav {
    font-size: 0.75rem;
}

.ehs-page-ellipsis {
    min-width: 20px;
    text-align: center;
    color: #98a2b3;
    font-size: 0.85rem;
}

@media (max-width: 576px) {
    .ehs-grid-footer {
        justify-content: center;
        text-align: center;
    }

    .ehs-grid-pagination {
        justify-content: center;
        width: 100%;
    }
}

.status-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    /* Without an explicit line-height the pill inherits the grid's 34px row
       line-height, which (plus 3px vertical padding) made the pill 40px tall -
       taller than the 34px row - so it bled into the rows above and below.
       A compact line-height keeps the pill ~22px and vertical-align:middle
       centres it within the cell. */
    line-height: 1.2;
    vertical-align: middle;
}

.status-pill.status-active {
    background: #e6f4ea;
    color: #1e7e34;
}

.status-pill.status-inactive {
    background: #fdf1d6;
    color: #94640a;
}

.status-pill.status-archive {
    background: #f3f0ff;
    color: #5b21b6;
}

/* Shared loading overlay for every Data Manager AG Grid. Rendered via each
   grid's `overlayLoadingTemplate` and shown/hidden through the grid's overlay
   API while a data-manager fetch is in flight. Uses the app's Bootstrap
   spinner and the primary theme colour so it matches the rest of the UI. */
.ehs-grid-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--grid-header-text-color, #344054);
    font-size: 0.85rem;
    font-weight: 600;
}

.ehs-grid-loading .spinner-border {
    width: 2.25rem;
    height: 2.25rem;
    border-width: 3px;
    color: var(--btn-primary-bg, #1b838b);
}

/* Printable table for exportPdf() (users.js) - hidden on screen, shown only
   inside the browser print dialog via the @media print rule further below.
   No PDF library involved - this is the honest "print/Save as PDF" approach
   since AG Grid has no built-in PDF export in either edition. */
#usersPrintArea {
    display: none;
}

@media print {
    body * {
        visibility: hidden;
    }

    #usersPrintArea,
    #usersPrintArea * {
        visibility: visible;
    }

    #usersPrintArea {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .users-print-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 10px;
    }

    .users-print-table th,
    .users-print-table td {
        border: 1px solid #ccc;
        padding: 4px 6px;
        text-align: left;
    }
}

/* CORRECTION 6 (originally the expand-row detail panel, matching the
   Metronic user-management demo's stacked full-width labeled sections; now
   reused verbatim inside the view/edit modal's "User Details" section - see
   CORRECTION 8 above). Bold label row + pill-keyword values, thin divider
   between sections. */
.user-detail-sections {
    display: flex;
    flex-direction: column;
}

.user-detail-section {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 10px 0;
    border-bottom: 1px solid #eef1f4;
}

.user-detail-section:last-child {
    border-bottom: none;
}

.user-detail-label {
    flex: 0 0 130px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #1e2129;
}

.user-detail-values {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.user-detail-values .keyword-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--card-bg);
    color: #344054;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.user-detail-values .user-detail-empty {
    color: #98a2b3;
    font-size: 0.85rem;
}

/* Modifier for reusing the sections above inside the add/edit user modal
   (see CORRECTION 8) - the modal is narrower than the old table-width
   detail row, so the label column shrinks a bit and the panel background
   goes back to plain white (the panel-gray background made sense as a
   visual break from a white table row; inside the modal it's redundant). */
.user-detail-sections-modal .user-detail-label {
    flex-basis: 110px;
}

.actions-cell {
    display: flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.action-icon-btn {
    background: none;
    border: none;
    color: var(--grid-action-icon-color);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.95rem;
    cursor: pointer;
}

.action-icon-btn:hover {
    background: var(--card-bg);
    color: var(--btn-primary-hover-bg);
}

.action-icon-btn[aria-disabled="true"] {
    color: #c4cad3;
    cursor: default;
}

.action-icon-btn[aria-disabled="true"]:hover {
    background: none;
    color: #c4cad3;
}

@media (max-width: 767.98px) {
    .users-filter-offcanvas {
        width: 100% !important;
    }

    .filter-label {
        flex-basis: 110px;
    }
}

#main_body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0px 20px 20px 20px;
    position: relative;
    z-index: auto;
}

@media (max-width: 767.98px) {
    #sidebar {
        transform: translateX(calc(-1 * var(--sidebar-width)));
    }

    body.sidebar-collapsed #sidebar {
        transform: translateX(0);
    }

    #app-main {
        margin-left: 0;
    }
}

/* --- CORRECTION 10: Add/Edit User modal, Metronic "solid" form style ---
   Reference: https://preview.keenthemes.com/metronic8/demo1/?page=utilities/
   modals/forms/new-address - Metronic8's form-control-solid/form-select-solid
   input treatment (no visible border, light gray fill, generous radius/
   padding, background lightens on focus instead of a heavy blue outline)
   plus a `required` label modifier that appends a red asterisk. That page is
   a client-rendered SPA fragment; a direct fetch only returned its field
   labels (First name/Last name/Country) since Claude in Chrome wasn't
   connected this session to screenshot/audit the live DOM/CSS directly.
   The values below follow form-control-solid's well-documented, consistent
   convention used across every other form page in that same demo (it isn't
   a one-off style unique to the new-address modal), rather than an assumed
   guess. Scoped to #userForm/#userModal only - does not touch the plain
   Bootstrap .form-control/.form-select/.btn classes used elsewhere (e.g.
   login.html), consistent with this file's existing scoping discipline. */
/* Global Modal & Form Styling - Light, clean, consistent across all forms & popups */
.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.nd-modal {
    background-color: #ffffff !important;
    color: #1e2129 !important;
}

.modal-content {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.modal-header {
    border-bottom: 1px solid #eff2f5 !important;
    padding: 1.25rem 1.75rem;
}

.modal-body {
    padding: 1.5rem 1.75rem;
}

.modal-footer {
    border-top: 1px solid #eff2f5 !important;
    padding: 1rem 1.75rem;
}

/* Ensure form labels inside all modals and form panels have crisp, high-contrast text */
.modal .form-label,
.modal label,
.nd-modal .form-label,
.nd-modal label,
#userForm .form-label,
.form-label {
    color: #344054 !important;
    font-weight: 600;
}

/* Modal Title typography */
.modal-title,
.nd-title,
#userModal .modal-title {
    color: #1e2129 !important;
    font-weight: 700;
}

/* Form input text color inside modals */
.modal .form-control,
.modal .form-select,
.modal .form-control-solid,
.modal .form-select-solid {
    color: #1e2129 !important;
}

/* Modal header close button */
.modal-header .btn-close {
    filter: none !important;
    opacity: 0.65;
}

.modal-header .btn-close:hover {
    opacity: 1;
}

#userForm .form-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #344054 !important;
    margin-bottom: 6px;
}

/* Metronic's own convention: a CSS-only asterisk on the label rather than
   relying on the (invisible) native `required` attribute alone. */
#userForm .form-label.required::after {
    content: "*";
    color: var(--form-required-color, #e04f5f);
    margin-left: 4px;
}

/* CORRECTION 13 tightened this from 1.25rem - the original padding/spacing
   read as too spacious against the rest of the app's density. */
#userForm .mb-3 {
    margin-bottom: 0.9rem !important;
}

#userForm .form-control-solid,
#userForm .form-select-solid {
    background-color: #f5f8fa;
    border: 1px solid transparent;
    border-radius: 8px;
    /* CORRECTION 13: was 0.7rem 1rem - reduced per feedback that the solid
       inputs felt oversized. */
    padding: 0.5rem 0.85rem;
    font-size: 0.9rem;
    color: #3f4254;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

#userForm .form-control-solid:focus,
#userForm .form-select-solid:focus {
    background-color: #eef3f7;
    border-color: var(--form-focus-color);
    box-shadow: 0 0 0 3px rgba(27, 131, 139, 0.12);
    outline: none;
}

/* The Permissions <details> pickers keep Bootstrap's form-control-sm sizing
   - form-control-solid's own padding/font-size above would otherwise
   override it, since both classes carry equal specificity. */
#userForm .form-control-sm.form-control-solid {
    padding: 0.35rem 0.7rem;
    font-size: 0.825rem;
}

/* --- CORRECTION 13: modern inline validation (replaces the native
   reportValidity() browser tooltip - see submitUserForm()/validateUserForm()
   in users.js) - a red-bordered field plus small helper text under it,
   consistent with the rest of this form's own styling instead of the
   browser's plain default popup. */
#userForm .form-control-solid.is-invalid,
#userForm .form-select-solid.is-invalid {
    background-color: #fdf1f2;
    border-color: var(--form-required-color, #e04f5f);
}

#userForm .form-control-solid.is-invalid:focus,
#userForm .form-select-solid.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(224, 79, 95, 0.15);
}

.invalid-feedback-solid {
    color: var(--form-required-color, #e04f5f);
    font-size: 0.78rem;
    font-weight: 500;
    margin-top: 5px;
}

/* Global Bootstrap .btn-primary/.btn-secondary/.btn-outline-secondary/
   .btn-danger/.btn-outline-danger theming (CORRECTION 14) - NOT scoped to
   #userModal. This is deliberately global, not modal-only: login.html's
   "Continue"/"Sign in" buttons and dashboard.html's "Log out" button use
   these exact same Bootstrap classes and were still rendering Bootstrap's
   stock blue/gray (never themed before this feature), which is precisely
   the cross-page color inconsistency Design Config exists to eliminate.
   Applying this globally means those pages now pick up the same brand
   color as everywhere else - a real, intended visual change, not a
   regression. Save/Update-style actions = Primary, Cancel/Close-style =
   Secondary, Delete-style = Danger (no delete button exists yet in this
   port, but it's wired now so one just works when built). */
.btn-primary {
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-text, #fff);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--btn-primary-hover-bg);
    border-color: var(--btn-primary-hover-bg);
}

.btn-secondary,
.btn-outline-secondary {
    background: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-text);
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
    background: var(--btn-secondary-hover-bg);
    color: var(--btn-secondary-text);
}

.btn-danger,
.btn-outline-danger {
    background: var(--btn-danger-bg);
    border-color: var(--btn-danger-bg);
    color: var(--btn-danger-text, #fff);
}

.btn-outline-danger {
    background: transparent;
    color: var(--btn-danger-bg);
}

.btn-danger:hover,
.btn-outline-danger:hover {
    background: var(--btn-danger-hover-bg);
    border-color: var(--btn-danger-hover-bg);
    color: var(--btn-danger-text, #fff);
}

#userModal .modal-footer .btn-primary,
#userModal .modal-footer .btn-outline-secondary {
    border-radius: 999px;
    padding: 7px 22px;
    font-weight: 600;
}

#userModal .modal-footer .btn-primary {
    padding: 7px 24px;
    font-weight: 700;
}

/* --- Users grid expand-row: floating detail panel (User Keywords + Access
   Roles) - see the large comment above the expand/collapse section in
   users.js for why this replaced the earlier colSpan + variable-row-height
   "child row" approach (that mechanism relied on a getRowHeight callback,
   which AG Grid's own docs say the Infinite Row Model doesn't support -
   it's what made the old toggle unreliable). Row height/spacing/column
   widths are completely unaffected now - .name-cell is always the same
   single-line layout regardless of expand state; only the toggle button's
   own icon rotates. */
.name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
}

.name-cell-text {
    font-weight: 600;
    color: #1d2939;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: #667085;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
}

.row-expand-btn:hover {
    background: var(--grid-row-hover-bg);
    color: var(--btn-primary-hover-bg);
}

.row-expand-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--form-focus-color) 30%, transparent);
}

/* Single chevron glyph, rotated 90deg when open rather than swapped for a
   second glyph - "icon rotation" + "smooth transition" from the
   modernization requirement, applied with a real CSS transition instead of
   an instant class-driven swap. */
.row-expand-btn i {
    display: inline-flex;
    transition: transform 0.2s ease;
}

.row-expand-btn.expanded i {
    transform: rotate(90deg);
}

/* Floating detail card (User Keywords + Access Roles) - appended to <body> and
   positioned via users.js's repositionExpandPanel(), completely outside
   the grid's own DOM/layout. Sized and colored to read as an extension of
   the table (card background/border tokens shared with the rest of the
   app) rather than a generic browser tooltip. Starts translated up
   slightly + transparent; users.js adds .open one frame after insertion so
   this actually transitions in instead of snapping to its final state. */
.user-expand-panel {
    position: fixed;
    z-index: 1050;
    min-width: 260px;
    max-width: 340px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.08);
    padding: 12px 14px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.user-expand-panel.open {
    opacity: 1;
    transform: translateY(0);
}

/* Same building blocks as the modal's "User Details" section
   (.user-detail-section/.user-detail-label/.user-detail-values/.keyword-pill/
   .user-detail-empty, defined above) - compact label width and no bottom
   divider on the last section, since this panel is much narrower than the
   modal's own stacked layout. */
.user-expand-panel .user-detail-section {
    padding: 4px 0;
    border-bottom: none;
    align-items: flex-start;
}

.user-expand-panel .user-detail-section:not(:last-child) {
    border-bottom: 1px solid #eef1f4;
}

.user-expand-panel .user-detail-label {
    flex-basis: 96px;
    font-size: 0.8rem;
}

.user-expand-panel .user-detail-values .keyword-pill {
    font-size: 0.75rem;
    padding: 2px 10px;
}

/* Disable static backdrop bounce/scale animation to prevent visual flickering on click outside */
.modal.modal-static .modal-dialog {
    transform: none !important;
    transition: none !important;
}

/* Unique, premium solid input styling (Metronic 8 inspired) */
.form-control,
.form-select,
.filter-input,
.filter-multiselect-btn,
.select2-container--bootstrap-5 .select2-selection {
    background-color: #f5f8fa !important;
    border: 1px solid #e1e3ea !important;
    color: #3f4254 !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Adjust size for smaller form elements */
.form-control-sm,
.form-select-sm,
.filter-input-sm {
    padding: 6px 10px !important;
    font-size: 0.825rem !important;
}

/* Placeholder styling */
.form-control::placeholder,
.filter-input::placeholder {
    color: #a1a5b7 !important;
    font-weight: 400 !important;
}

/* Focus states */
.form-control:focus,
.form-select:focus,
.filter-input:focus,
.filter-multiselect-btn:focus,
.filter-multiselect-btn.show,
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    background-color: #ffffff !important;
    border-color: var(--btn-primary-bg, #1B838B) !important;
    box-shadow: 0 0 0 4px rgba(27, 131, 139, 0.15) !important;
    color: #181c32 !important;
    outline: 0 !important;
}

/* Adjust form select dropdown arrow appearance */
.form-select,
.filter-input select {
    background-position: right 1rem center !important;
    background-size: 16px 12px !important;
}

/* Premium Session Expiration Popup & Backdrop Overlay */
#diagModalOverlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(24, 28, 50, 0.4) !important;
    /* Soft dark slate backdrop */
    z-index: 9999 !important;
    /* Under warning popup but above nav (1000+) */
    backdrop-filter: blur(2px) !important;
    /* Modern blurred background */
}

#sk_session_timeout_warning {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    /* Overrides buggy legacy inline -100px margins */
    width: 420px !important;
    max-width: 90% !important;
    background-color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #e1e3ea !important;
    padding: 24px !important;
    z-index: 10000 !important;
    /* Above backdrop overlay */
    text-align: center !important;
}

#sk_session_timeout_warning h1 {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #f1416c !important;
    /* Warning Red */
    margin: 0 0 12px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: none !important;
    padding: 0 !important;
}

/* Warning triangle icon from bootstrap-icons */

#sk_session_timeout_warning p {
    font-size: 0.95rem !important;
    color: #5e6278 !important;
    line-height: 1.5 !important;
    margin: 0 0 20px 0 !important;
}

#sk_session_timeout_warning #sk_session_timeout_countdown_minutes,
#sk_session_timeout_warning #sk_session_timeout_countdown_seconds {
    font-weight: 700 !important;
    color: #181c32 !important;
    font-size: 1.05rem !important;
    background-color: #f5f8fa !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    margin: 0 2px !important;
}

#sk_session_timeout_warning .btn-team {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
}

#sk_session_timeout_warning .btn-blue {
    background-color: var(--btn-primary-bg, #1B838B) !important;
    border-color: var(--btn-primary-bg, #1B838B) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
    width: 100% !important;
    box-shadow: none !important;
}

#sk_session_timeout_warning .btn-blue:hover {
    background-color: #15666d !important;
    border-color: #15666d !important;
    color: #ffffff !important;
}

/* ==========================================
   Centralized UI/UX Design System Guidelines
   ========================================== */

/* --- Centralized Global Button System --- */
.btn-primary,
.btn-safekivi-primary,
.nd-btn-primary,
.nd-btn-ok,
.btn-apply-filters,
.btn-create-user {
    background-color: var(--btn-primary-bg, #1b838b) !important;
    color: var(--btn-primary-text, #ffffff) !important;
    border: 1px solid var(--btn-primary-bg, #1b838b) !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    padding: 8px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    outline: none !important;
}

.btn-primary:hover,
.btn-safekivi-primary:hover,
.nd-btn-primary:hover,
.nd-btn-ok:hover,
.btn-apply-filters:hover,
.btn-create-user:hover {
    background-color: var(--btn-primary-hover-bg, #146267) !important;
    border-color: var(--btn-primary-hover-bg, #146267) !important;
    color: var(--btn-primary-text, #ffffff) !important;
}

.btn-primary:focus,
.btn-safekivi-primary:focus,
.nd-btn-primary:focus,
.nd-btn-ok:focus,
.btn-apply-filters:focus,
.btn-create-user:focus {
    box-shadow: 0 0 0 4px rgba(27, 131, 139, 0.15) !important;
    outline: 0 !important;
}

.btn-primary:disabled,
.btn-safekivi-primary:disabled,
.nd-btn-primary:disabled,
.nd-btn-ok:disabled,
.btn-apply-filters:disabled,
.btn-create-user:disabled {
    background-color: #e1e3ea !important;
    border-color: #e1e3ea !important;
    color: #a1a5b7 !important;
    cursor: not-allowed !important;
    opacity: 0.65 !important;
}

/* Secondary & Outline Buttons */
.btn-secondary,
.btn-safekivi-secondary,
.nd-btn-secondary,
.btn-light,
.btn-outline-secondary,
.btn-outline-primary,
.btn-filter-toggle,
.btn-export,
.btn-clear-filters {
    background-color: var(--btn-secondary-bg, #ffffff) !important;
    color: var(--btn-secondary-text, #344054) !important;
    border: 1px solid var(--btn-secondary-border, #d0d5dd) !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    padding: 8px 20px !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    outline: none !important;
}

.btn-secondary:hover,
.btn-safekivi-secondary:hover,
.nd-btn-secondary:hover,
.btn-light:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-filter-toggle:hover,
.btn-export:hover,
.btn-clear-filters:hover {
    background-color: var(--btn-secondary-hover-bg, #f2f4f7) !important;
    border-color: var(--btn-secondary-border, #d0d5dd) !important;
    color: var(--btn-secondary-text, #344054) !important;
}

.btn-secondary:focus,
.btn-safekivi-secondary:focus,
.nd-btn-secondary:focus,
.btn-light:focus,
.btn-outline-secondary:focus,
.btn-outline-primary:focus,
.btn-filter-toggle:focus,
.btn-export:focus,
.btn-clear-filters:focus {
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05) !important;
    outline: 0 !important;
}

.btn-secondary:disabled,
.btn-safekivi-secondary:disabled,
.nd-btn-secondary:disabled,
.btn-light:disabled,
.btn-outline-secondary:disabled,
.btn-outline-primary:disabled,
.btn-filter-toggle:disabled,
.btn-export:disabled,
.btn-clear-filters:disabled {
    background-color: #ffffff !important;
    border-color: #eff2f5 !important;
    color: #d8d8d8 !important;
    cursor: not-allowed !important;
    opacity: 0.65 !important;
}

/* Danger / Destructive Buttons */
.btn-danger,
.btn-safekivi-danger,
.nd-btn-danger,
.btn-outline-danger {
    background-color: var(--btn-danger-bg, #e04f5f) !important;
    color: var(--btn-danger-text, #ffffff) !important;
    border: 1px solid var(--btn-danger-bg, #e04f5f) !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    padding: 8px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    outline: none !important;
}

.btn-danger:hover,
.btn-safekivi-danger:hover,
.nd-btn-danger:hover,
.btn-outline-danger:hover {
    background-color: var(--btn-danger-hover-bg, #c53c4b) !important;
    border-color: var(--btn-danger-hover-bg, #c53c4b) !important;
    color: var(--btn-danger-text, #ffffff) !important;
}

.btn-danger:focus,
.btn-safekivi-danger:focus,
.nd-btn-danger:focus,
.btn-outline-danger:focus {
    box-shadow: 0 0 0 4px rgba(224, 79, 95, 0.15) !important;
    outline: 0 !important;
}

.btn-danger:disabled,
.btn-safekivi-danger:disabled,
.nd-btn-danger:disabled,
.btn-outline-danger:disabled {
    background-color: #e1e3ea !important;
    border-color: #e1e3ea !important;
    color: #a1a5b7 !important;
    cursor: not-allowed !important;
    opacity: 0.65 !important;
}

/* Modal Footer Button Consistency */
.modal-footer .btn,
.modal-footer button {
    border-radius: 999px !important;
    padding: 8px 24px !important;
    font-weight: 600 !important;
}

/* --- Required Label Indicator --- */
.required-label::after,
.required::after {
    content: " *" !important;
    color: var(--form-required-color, #e04f5f) !important;
    font-weight: bold !important;
    margin-left: 2px !important;
}

/* --- Validation feedback & warnings --- */
.invalid-feedback-safekivi,
.invalid-feedback-solid {
    margin-top: 6px !important;
    font-size: 0.85rem !important;
    color: var(--form-required-color, #e04f5f) !important;
    font-weight: 500 !important;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--form-required-color, #e04f5f) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23e04f5f'%3e%3ccircle cx='6' cy='6' r='4.5' stroke-width='1'/%3e%3cpath d='M6 3.5v3M6 8.5h.01' stroke-width='1.5' stroke-linecap='round'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--form-required-color, #e04f5f) !important;
    box-shadow: 0 0 0 4px rgba(224, 79, 95, 0.15) !important;
}

/* --- SafeKivi Card/Panel --- */
.safekivi-card {
    background-color: var(--card-bg, #f2f4f7) !important;
    border: 1px solid var(--card-border, #eef1f4) !important;
    border-radius: 10px !important;
    padding: 20px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 20px !important;
}

/* --- SafeKivi Section Header --- */
.safekivi-section-header {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--page-title-color, #1e2129) !important;
    border-bottom: 2px solid var(--card-border, #eef1f4) !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
}

/* --- User-Selectable Navigation Layouts --- */

/* Left Navigation Mode (default) */
body.layout-left-nav #sidebar {
    display: flex;
}

body.layout-left-nav .sidebar-close-btn {
    display: inline-flex;
}

body.layout-left-nav #app-main {
    margin-left: var(--sidebar-width);
}

body.layout-left-nav #headerMenu {
    display: none !important;
}

/* Top Navigation Mode */
body.layout-top-nav #sidebar {
    display: none !important;
}

body.layout-top-nav .sidebar-close-btn {
    display: none !important;
}

body.layout-top-nav #app-main {
    margin-left: 0 !important;
}

body.layout-top-nav #app-header {
    padding-left: 20px !important;
}

body.layout-top-nav #headerMenu {
    display: flex !important;
}

/* Horizontal Top Navigation Styling */
.header-menu {
    display: none;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 0 2rem;
    padding: 0;
}

.header-menu>li {
    position: relative;
}

.header-menu a,
.header-menu-toggle {
    color: var(--nav-side-text, #9899ac);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 0.85rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.header-menu a:hover,
.header-menu-toggle:hover {
    background: var(--nav-hover-bg, #25253a);
    color: var(--nav-active-text, #ffffff);
}

.header-menu a.active,
.header-menu-toggle.active {
    background: var(--nav-active-bg, #2b2b40);
    color: var(--nav-active-text, #ffffff);
}

/* Submenu dropdowns */
.header-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--nav-side-bg, #ffffff);
    border: 1px solid var(--nav-hover-bg, #eef1f4);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    list-style: none;
    margin: 4px 0 0 0;
    padding: 6px 0;
    min-width: 220px;
    z-index: 1050;
}

.header-menu>li:hover>.header-submenu,
.header-menu>li:focus-within>.header-submenu {
    display: block;
}

.header-submenu li {
    position: relative;
}

.header-submenu a {
    padding: 8px 16px;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 0;
    color: var(--nav-side-text, #9899ac);
}

.header-submenu a::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
    display: none;
}

.header-submenu a:hover {
    background: var(--nav-hover-bg, #25253a);
    color: var(--nav-active-text, #ffffff);
}

.header-submenu a.active {
    background: var(--nav-active-bg, #2b2b40);
    color: var(--nav-active-text, #ffffff);
}

/* For nested submenus */
.header-submenu .header-submenu {
    top: 0;
    left: 100%;
    margin-top: -6px;
}

.header-submenu li:hover>.header-submenu,
.header-submenu li:focus-within>.header-submenu {
    display: block;
}

.caret-icon {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* --- Centering & Light Mode Top Navigation overrides --- */
body.layout-top-nav .header-nav {
    display: block !important;
    flex-grow: 1;
}

body.layout-top-nav #headerMenu {
    display: flex !important;
    justify-content: center;
}

body.layout-top-nav .header-spacer {
    display: none !important;
}

/* Accessibility focus indicators */
.header-menu a:focus-visible,
.header-menu-toggle:focus-visible {
    outline: 2px solid var(--btn-primary-bg, #1b838b) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(27, 131, 139, 0.25) !important;
}

body.layout-top-nav .header-menu a,
body.layout-top-nav .header-menu-toggle {
    color: var(--form-label-color, #344054);
    background: transparent;
    transition: all 0.2s ease;
    font-weight: 500;
}

body.layout-top-nav .header-menu a:hover,
body.layout-top-nav .header-menu-toggle:hover {
    background: var(--btn-secondary-hover-bg, #f2f4f7) !important;
    color: var(--header-text, #1e2129) !important;
}

body.layout-top-nav .header-menu a.active,
body.layout-top-nav .header-menu-toggle.active {
    background: var(--btn-secondary-hover-bg, #f2f4f7) !important;
    color: var(--header-text, #1e2129) !important;
    font-weight: 600;
}

/* Light dropdown styling for standard dropdowns in top nav */
body.layout-top-nav .header-submenu {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

body.layout-top-nav .header-submenu a {
    color: var(--form-label-color, #344054) !important;
    background: transparent !important;
    border-radius: 4px !important;
    margin: 0 6px !important;
    padding: 8px 12px !important;
}

body.layout-top-nav .header-submenu a:hover {
    background: var(--btn-secondary-hover-bg, #f2f4f7) !important;
    color: var(--btn-primary-bg, #1b838b) !important;
}

body.layout-top-nav .header-submenu a.active {
    background: var(--btn-secondary-hover-bg, #f2f4f7) !important;
    color: var(--btn-primary-bg, #1b838b) !important;
    font-weight: 600 !important;
}

/* --- Megamenu layout & styling --- */
.megamenu-parent {
    position: relative;
}

.megamenu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    margin-top: 12px;
    padding: 1.5rem;
    min-width: 620px;
    z-index: 1060;
}

.megamenu-arrow {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.megamenu-parent:hover .megamenu-dropdown,
.megamenu-parent:focus-within .megamenu-dropdown {
    display: block;
}

.megamenu-columns {
    display: flex;
    gap: 2rem;
    justify-content: flex-start;
    align-items: flex-start;
}

.megamenu-column {
    flex: 1;
    min-width: 130px;
}

.megamenu-column-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--header-text, #1e2129);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.megamenu-column-header i {
    font-size: 1rem;
    color: var(--icon-color, #78829d);
}

.megamenu-column-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.megamenu-column-list li {
    display: block;
}

.megamenu-column-list a {
    display: block;
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--nav-side-text, #5e6278) !important;
    text-decoration: none;
    border-radius: 6px !important;
    background: transparent !important;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.megamenu-column-list a:hover {
    background: var(--btn-secondary-hover-bg, #f2f4f7) !important;
    color: var(--btn-primary-bg, #1b838b) !important;
    padding-left: 14px !important;
}

.megamenu-column-list a.active {
    background: var(--btn-secondary-hover-bg, #f2f4f7) !important;
    color: var(--btn-primary-bg, #1b838b) !important;
    font-weight: 600 !important;
}

/* Force-hide dropdown on click */
.header-menu .force-hide {
    display: none !important;
}

/* Ensure modal overlays block parent body scrolling and modal dialog content scrolls internally */
html.modal-open,
body.modal-open {
    overflow: hidden !important;
    height: 100% !important;
}

.modal-backdrop {
    z-index: 1050 !important;
}

.modal {
    z-index: 1060 !important;
    overflow-y: hidden !important;
    overscroll-behavior: contain !important;
}

.modal-dialog {
    display: flex !important;
    margin: 1.75rem auto !important;
    max-height: calc(100% - 3.5rem) !important;
    overscroll-behavior: contain !important;
}

@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.5rem auto !important;
        max-height: calc(100% - 1rem) !important;
    }
}

.modal-content {
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.modal-body {
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    overscroll-behavior: contain !important;
}

/* --- Global responsive layout overrides --- */

/* Horizontal scrolling for top nav tabs on mobile */
@media (max-width: 768px) {
    body.layout-top-nav #headerMenu {
        justify-content: flex-start !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding: 0 16px 8px 16px !important;
    }

    body.layout-top-nav .header-menu-item {
        display: inline-block !important;
        flex: 0 0 auto !important;
    }
}

/* Responsive Megamenu on mobile */
@media (max-width: 768px) {
    .megamenu-dropdown {
        min-width: 100% !important;
        width: calc(100vw - 32px) !important;
        left: 0 !important;
        transform: none !important;
        position: fixed !important;
        top: 60px !important;
        margin: 0 16px !important;
        box-sizing: border-box !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    }

    .megamenu-arrow {
        display: none !important;
        /* Hide floating arrow on mobile */
    }

    .megamenu-columns {
        flex-direction: column !important;
        gap: 1.25rem !important;
    }

    .megamenu-column {
        width: 100% !important;
    }
}

/* Ensure data tables/panels never leak width on small screen resolutions */
.users-ag-grid-panel,
.ag-theme-quartz,
.table-responsive {
    max-width: 100% !important;
    overflow-x: auto !important;
}

/* ============================================================
   SafeKiviDialog — Centralized Modal Dialog System
   Replaces native browser alert(), confirm(), prompt() calls.
   Uses CSS custom properties from the SafeKivi design token set.
   ============================================================ */

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes ndOverlayIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ndModalIn {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% - 18px)) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes ndSpin {
    to {
        stroke-dashoffset: -280;
    }
}

@keyframes ndToastIn {
    from {
        opacity: 0;
        transform: translateX(120%);
    }

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

@keyframes ndToastOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(120%);
    }
}

/* ── Overlay backdrop ────────────────────────────────────── */
.nd-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 26, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 10500;
}

.nd-overlay.nd-visible {
    display: block;
    animation: ndOverlayIn 0.18s ease forwards;
}

/* ── Modal shell ─────────────────────────────────────────── */
.nd-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.97);
    z-index: 10501;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(10, 14, 26, 0.22), 0 4px 16px rgba(10, 14, 26, 0.10);
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    outline: none;
}

.nd-modal.nd-visible {
    display: block;
    animation: ndModalIn 0.22s cubic-bezier(0.34, 1.12, 0.64, 1) forwards;
}

/* Size variants */
.nd-modal--sm {
    max-width: 420px;
}

.nd-modal--md {
    max-width: 540px;
}

.nd-modal--lg {
    max-width: 720px;
}

.nd-modal--xl {
    max-width: 900px;
}

.nd-modal--full {
    max-width: 98vw;
    width: 98vw;
}

/* ── Content layout ──────────────────────────────────────── */
.nd-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nd-content--loading {
    align-items: center;
    padding: 2.25rem 1.5rem 2rem;
    text-align: center;
    gap: 1rem;
}

/* ── Header ──────────────────────────────────────────────── */
.nd-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.5rem 1.5rem 0.75rem;
}

/* ── Title ───────────────────────────────────────────────── */
.nd-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--header-text, #1e2129);
    margin: 0;
    line-height: 1.3;
}

.nd-title--center {
    text-align: center;
}

/* ── Body ────────────────────────────────────────────────── */
.nd-body {
    padding: 0 1.5rem 1.25rem;
}

.nd-message {
    font-size: 0.9375rem;
    color: #475467;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Footer / button row ─────────────────────────────────── */
.nd-footer {
    padding: 0.75rem 1.5rem 1.5rem;
    display: flex;
    justify-content: flex-end;
}

.nd-footer--row {
    gap: 0.625rem;
}

/* ── Buttons ─────────────────────────────────────────────── */
/* ── Universal Dialog & Modal Buttons ───────────────────── */
.nd-modal .nd-btn,
.nd-modal .btn,
.modal-dialog .btn,
.modal-content .btn,
.modal-footer .btn,
.nd-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 999px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: background 0.15s, box-shadow 0.15s, filter 0.12s !important;
    min-width: 88px !important;
    outline: none !important;
    white-space: nowrap !important;
}

.nd-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(27, 131, 139, 0.35) !important;
}

/* Primary Dialog Buttons */
.nd-modal .nd-btn-primary,
.modal-dialog .btn-primary,
.modal-content .btn-primary,
.modal-footer .btn-primary,
.nd-btn-primary {
    background: var(--btn-primary-bg, #1b838b) !important;
    color: var(--btn-primary-text, #ffffff) !important;
    border-color: var(--btn-primary-bg, #1b838b) !important;
}

.nd-modal .nd-btn-primary:hover,
.modal-dialog .btn-primary:hover,
.modal-content .btn-primary:hover,
.modal-footer .btn-primary:hover,
.nd-btn-primary:hover {
    background: var(--btn-primary-hover-bg, #146267) !important;
    border-color: var(--btn-primary-hover-bg, #146267) !important;
}

/* Secondary Dialog Buttons */
.nd-modal .nd-btn-secondary,
.modal-dialog .btn-secondary,
.modal-dialog .btn-outline-secondary,
.modal-content .btn-secondary,
.modal-content .btn-outline-secondary,
.modal-footer .btn-secondary,
.modal-footer .btn-outline-secondary,
.nd-btn-secondary {
    background: var(--btn-secondary-bg, #ffffff) !important;
    color: var(--btn-secondary-text, #344054) !important;
    border-color: var(--btn-secondary-border, #d0d5dd) !important;
}

.nd-modal .nd-btn-secondary:hover,
.modal-dialog .btn-secondary:hover,
.modal-dialog .btn-outline-secondary:hover,
.modal-content .btn-secondary:hover,
.modal-content .btn-outline-secondary:hover,
.modal-footer .btn-secondary:hover,
.modal-footer .btn-outline-secondary:hover,
.nd-btn-secondary:hover {
    background: var(--btn-secondary-hover-bg, #f2f4f7) !important;
    color: var(--btn-secondary-text, #344054) !important;
    border-color: var(--btn-secondary-border, #d0d5dd) !important;
}

/* Danger / Destructive Dialog Buttons */
.nd-modal .nd-btn-danger,
.modal-dialog .btn-danger,
.modal-content .btn-danger,
.modal-footer .btn-danger,
.nd-btn-danger {
    background: var(--btn-danger-bg, #e04f5f) !important;
    color: var(--btn-danger-text, #ffffff) !important;
    border-color: var(--btn-danger-bg, #e04f5f) !important;
}

.nd-modal .nd-btn-danger:hover,
.modal-dialog .btn-danger:hover,
.modal-content .btn-danger:hover,
.modal-footer .btn-danger:hover,
.nd-btn-danger:hover {
    background: var(--btn-danger-hover-bg, #c53c4b) !important;
    border-color: var(--btn-danger-hover-bg, #c53c4b) !important;
}

.nd-btn-danger:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

/* Warning & Action Dialog Buttons */
.nd-modal .nd-btn-warning,
.modal-dialog .btn-warning,
.modal-content .btn-warning,
.modal-footer .btn-warning,
.nd-btn-warning {
    background: var(--btn-primary-bg, #1b838b) !important;
    color: var(--btn-primary-text, #ffffff) !important;
    border-color: var(--btn-primary-bg, #1b838b) !important;
}

.nd-modal .nd-btn-warning:hover,
.modal-dialog .btn-warning:hover,
.modal-content .btn-warning:hover,
.modal-footer .btn-warning:hover,
.nd-btn-warning:hover {
    background: var(--btn-primary-hover-bg, #146267) !important;
    border-color: var(--btn-primary-hover-bg, #146267) !important;
}

.nd-btn-ok {
    min-width: 100px;
}

/* ── Icon circles ────────────────────────────────────────── */
.nd-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
}

.nd-icon--success {
    color: #16a34a;
}

.nd-icon--error {
    color: var(--btn-danger-bg, #e04f5f);
}

.nd-icon--warning {
    color: #d97706;
}

.nd-icon--info {
    color: var(--btn-primary-bg, #1b838b);
}

/* ── Input fields ────────────────────────────────────────── */
.nd-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--form-label-color, #344054);
    margin-bottom: 0.375rem;
}

.nd-input-field {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    border: 1px solid #d0d5dd;
    border-radius: 7px;
    color: var(--header-text, #1e2129);
    background: #ffffff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.nd-input-field:focus {
    border-color: var(--form-focus-color, #1b838b);
    box-shadow: 0 0 0 3px rgba(27, 131, 139, 0.18);
    outline: none;
}

.nd-textarea {
    resize: vertical;
    min-height: 100px;
}

.nd-input-error {
    font-size: 0.8125rem;
    color: var(--btn-danger-bg, #e04f5f);
    margin-top: 0.375rem;
}

/* ── Delete checkbox ─────────────────────────────────────── */
.nd-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #475467;
    margin-top: 0.875rem;
    cursor: pointer;
}

.nd-checkbox {
    width: 1rem;
    height: 1rem;
    accent-color: var(--btn-danger-bg, #e04f5f);
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Loading spinner ─────────────────────────────────────── */
.nd-spinner {
    width: 52px;
    height: 52px;
}

.nd-spinner-svg {
    width: 52px;
    height: 52px;
    animation: ndSpin 0s linear infinite;
}

.nd-spinner-track {
    stroke: #e5e7eb;
}

.nd-spinner-fill {
    stroke: var(--btn-primary-bg, #1b838b);
    stroke-dasharray: 125;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    transform-origin: center;
    animation: ndSpin 1.1s linear infinite;
}

.nd-loading-msg {
    font-size: 0.9375rem;
    color: #475467;
    margin: 0;
}

/* ── Progress bar ────────────────────────────────────────── */
.nd-progress-track {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.75rem;
}

.nd-progress-bar {
    height: 100%;
    background: var(--btn-primary-bg, #1b838b);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.nd-progress-pct {
    font-size: 0.8125rem;
    color: #98a2b3;
    margin: 0.375rem 0 0;
    text-align: right;
}

/* ── Toast notifications (Modernized 2026 Style) ─────────── */
.nd-toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
    max-width: 380px;
    width: calc(100vw - 3rem);
}

.nd-toast {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.125rem;
    border-radius: 12px;
    pointer-events: all;
    opacity: 0;
    transform: translateY(-12px) scale(0.95);
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    word-break: break-word;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.nd-toast.nd-toast--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Success Toast */
.nd-toast--success {
    background: rgba(240, 253, 244, 0.94);
    border: 1px solid rgba(187, 247, 208, 0.8);
    color: #14532d;
    box-shadow: 0 10px 30px -5px rgba(22, 163, 74, 0.08),
        0 4px 12px -2px rgba(22, 163, 74, 0.04);
}

.nd-toast--success .nd-icon {
    color: #16a34a;
}

/* Error Toast */
.nd-toast--error {
    background: rgba(254, 242, 242, 0.94);
    border: 1px solid rgba(254, 226, 226, 0.8);
    color: #7f1d1d;
    box-shadow: 0 10px 30px -5px rgba(220, 38, 38, 0.08),
        0 4px 12px -2px rgba(220, 38, 38, 0.04);
}

.nd-toast--error .nd-icon {
    color: #dc2626;
}

/* Warning Toast */
.nd-toast--warning {
    background: rgba(255, 251, 235, 0.94);
    border: 1px solid rgba(254, 243, 199, 0.8);
    color: #78350f;
    box-shadow: 0 10px 30px -5px rgba(217, 119, 6, 0.08),
        0 4px 12px -2px rgba(217, 119, 6, 0.04);
}

.nd-toast--warning .nd-icon {
    color: #d97706;
}

/* Info Toast */
.nd-toast--info {
    background: rgba(240, 253, 250, 0.94);
    border: 1px solid rgba(204, 251, 241, 0.8);
    color: #134e4a;
    box-shadow: 0 10px 30px -5px rgba(13, 148, 136, 0.08),
        0 4px 12px -2px rgba(13, 148, 136, 0.04);
}

.nd-toast--info .nd-icon {
    color: #0d9488;
}

.nd-toast-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.nd-toast-icon .nd-icon {
    width: 22px;
    height: 22px;
}

.nd-toast-msg {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 550;
    line-height: 1.4;
}

.nd-toast-close {
    background: none;
    border: none;
    color: currentColor;
    opacity: 0.45;
    font-size: 1.15rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.nd-toast-close:hover {
    opacity: 0.9;
    background: rgba(0, 0, 0, 0.05);
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
    .nd-toast--success {
        background: rgba(20, 83, 45, 0.96);
        border: 1px solid rgba(34, 197, 94, 0.25);
        color: #dcfce7;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }

    .nd-toast--success .nd-icon {
        color: #4ade80;
    }

    .nd-toast--success .nd-toast-close:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .nd-toast--error {
        background: rgba(127, 29, 29, 0.96);
        border: 1px solid rgba(239, 68, 68, 0.25);
        color: #fee2e2;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }

    .nd-toast--error .nd-icon {
        color: #f87171;
    }

    .nd-toast--error .nd-toast-close:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .nd-toast--warning {
        background: rgba(120, 53, 4, 0.96);
        border: 1px solid rgba(249, 115, 22, 0.25);
        color: #fef3c7;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }

    .nd-toast--warning .nd-icon {
        color: #fbbf24;
    }

    .nd-toast--warning .nd-toast-close:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .nd-toast--info {
        background: rgba(19, 78, 74, 0.96);
        border: 1px solid rgba(20, 184, 166, 0.25);
        color: #ccfbf1;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }

    .nd-toast--info .nd-icon {
        color: #2dd4bf;
    }

    .nd-toast--info .nd-toast-close:hover {
        background: rgba(255, 255, 255, 0.1);
    }
}


/* ── Dark mode overrides ─────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .nd-modal {
        background: #1e2129;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.3);
    }

    .nd-title {
        color: #f9fafb;
    }

    .nd-message {
        color: #9ca3af;
    }

    .nd-btn-secondary {
        background: #2d3748;
        color: #e5e7eb;
        border-color: #4b5563;
    }

    .nd-btn-secondary:hover {
        background: #374151;
    }

    .nd-input-field {
        background: #2d3748;
        border-color: #4b5563;
        color: #f9fafb;
    }

    .nd-spinner-track {
        stroke: #374151;
    }

    .nd-progress-track {
        background: #374151;
    }
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 480px) {
    .nd-modal {
        border-radius: 10px 10px 0 0;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
    }

    .nd-modal.nd-visible {
        animation: none;
    }

    .nd-footer--row {
        flex-direction: column-reverse;
    }

    .nd-btn {
        width: 100%;
    }

    .nd-toast-container {
        top: 0.75rem;
        bottom: auto;
        right: 0.75rem;
        left: 0.75rem;
        max-width: none;
    }
}

#quickLogoutBtn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#quickLogoutBtn:hover {
    color: #ef4444 !important;
    transform: scale(1.1);
}

/* ── Voice Dictation Component ───────────────────────────── */
.voice-input-wrapper {
    position: relative;
    display: block;
    width: 100%;
    flex: 1 1 auto;
}

.voice-input-wrapper>textarea.form-control,
.voice-input-wrapper>input.form-control,
.voice-input-wrapper>input,
.voice-input-wrapper>textarea,
.voice-input-wrapper>.form-control-solid {
    padding-right: 2.75rem !important;
}

.voice-dictation-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
    z-index: 5;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--text-muted, #64748b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.voice-input-wrapper > textarea ~ .voice-dictation-btn,
.voice-input-wrapper > textarea.form-control ~ .voice-dictation-btn {
    top: 8px;
    transform: none;
}

.voice-dictation-btn:hover {
    background: rgba(27, 131, 139, 0.1);
    color: var(--form-focus-color, #1b838b);
}

.voice-dictation-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(27, 131, 139, 0.25);
    color: var(--form-focus-color, #1b838b);
}

.voice-dictation-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.voice-dictation-btn.is-recording {
    background: #ef4444;
    color: #ffffff !important;
    animation: voiceRecordingPulse 1.5s infinite;
}

@keyframes voiceRecordingPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.voice-status-badge {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 46px;
    z-index: 5;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    padding: 2px 8px;
    border-radius: 999px;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.voice-input-wrapper > textarea ~ .voice-status-badge,
.voice-input-wrapper > textarea.form-control ~ .voice-status-badge {
    top: 10px;
    transform: none;
}

@media (prefers-color-scheme: dark) {
    .voice-dictation-btn {
        color: #94a3b8;
    }

    .voice-dictation-btn:hover {
        background: rgba(45, 212, 191, 0.15);
        color: #2dd4bf;
    }

    .voice-status-badge {
        color: #f87171;
        background: rgba(239, 68, 68, 0.2);
        border-color: rgba(239, 68, 68, 0.4);
    }
}

/* ── Home Page & Home Config Preview Components ──────────── */
.home-hero {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: var(--nav-active-bg, #12233d);
    color: #ffffff;
}

.home-hero-inner {
    padding: 24px 20px;
}

.home-hero-logo {
    max-height: 48px;
    margin-bottom: 10px;
    object-fit: contain;
}

.home-hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
    color: #ffffff !important;
}

.home-hero-welcome {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-top: 4px;
    color: #e2e8f0 !important;
}

.home-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.home-content {
    margin-bottom: 20px;
}

.home-columns {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.home-column {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.home-widget {
    border: 1px solid var(--card-border, #eef1f4);
    border-radius: 10px;
    padding: 14px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.home-widget h6 {
    font-weight: 700;
    margin-bottom: 10px;
    color: #1e293b;
    font-size: 0.95rem;
}

.home-widget-stat-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.home-widget-stat {
    flex: 1 1 70px;
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.home-widget-stat .num {
    font-size: 1.25rem;
    font-weight: 700;
    display: block;
    line-height: 1.2;
}

.home-widget-stat .lbl {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
}

.home-widget-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.home-widget-list li {
    padding: 5px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.85rem;
    color: #334155;
}

.home-widget-list li:last-child {
    border-bottom: none;
}

.home-widget-empty {
    color: #94a3b8;
    font-size: 0.82rem;
    font-style: italic;
}

.home-announcement {
    border-left: 3px solid var(--btn-primary-bg, #1b838b);
    padding-left: 10px;
    margin-bottom: 10px;
}

.home-announcement:last-child {
    margin-bottom: 0;
}

.home-announcement-title {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.88rem;
}

.home-announcement-date {
    font-size: 0.72rem;
    color: #64748b;
}

@media (prefers-color-scheme: dark) {
    .home-widget {
        background: #1e2129;
        border-color: #374151;
    }

    .home-widget h6,
    .home-announcement-title {
        color: #f9fafb;
    }

    .home-widget-stat {
        background: #2d3748;
        border-color: #4b5563;
    }

    .home-widget-list li {
        border-color: #374151;
        color: #cbd5e1;
    }
}

/* Standardized Active Filter Indicator Badge */
.active-filter-indicator {
    display: inline-flex;
    align-items: center !important;
}

.active-filter-indicator .badge {
    background-color: rgba(27, 131, 139, 0.08) !important;
    color: #1B838B !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(27, 131, 139, 0.15) !important;
    letter-spacing: 0.02em !important;
    transition: all 0.2s ease !important;
}

.active-filter-indicator .badge:hover {
    background-color: rgba(27, 131, 139, 0.12) !important;
    border-color: rgba(27, 131, 139, 0.25) !important;
}

/* Playbook Export Buttons Custom Branding */
.btn-export-excel {
    color: #107c41 !important;
    border-color: rgba(16, 124, 65, 0.25) !important;
    background-color: rgba(16, 124, 65, 0.04) !important;
}
.btn-export-excel:hover {
    background-color: rgba(16, 124, 65, 0.08) !important;
    border-color: rgba(16, 124, 65, 0.4) !important;
    color: #107c41 !important;
}

.btn-export-pdf {
    color: #b42318 !important;
    border-color: rgba(180, 35, 24, 0.25) !important;
    background-color: rgba(180, 35, 24, 0.04) !important;
}
.btn-export-pdf:hover {
    background-color: rgba(180, 35, 24, 0.08) !important;
    border-color: rgba(180, 35, 24, 0.4) !important;
    color: #b42318 !important;
}

/* Playbook Offcanvas Filter Header & Stacking Layout */
.offcanvas-header {
    background-color: var(--btn-primary-bg, #1B838B) !important;
    color: #ffffff !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.offcanvas-header .offcanvas-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    letter-spacing: 0.02em !important;
    margin: 0 !important;
}

.offcanvas-header .btn-close {
    filter: invert(1) grayscale(1) brightness(2) !important;
    opacity: 0.8 !important;
    outline: none !important;
    box-shadow: none !important;
}

.offcanvas-header .btn-close:hover {
    opacity: 1 !important;
}

/* Offcanvas Body Filter Rows - Stacked layout */
.offcanvas .filter-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
}

.offcanvas .filter-label {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-bottom: 2px !important;
    text-align: left !important;
}

.offcanvas .filter-input {
    width: 100% !important;
    min-height: 38px !important;
}

/* Bootstrap Multiselect full width inside filter rows */
.filter-row .btn-group,
.filter-row .multiselect-native-select .btn-group {
    width: 100% !important;
    display: block !important;
}

.filter-row button.multiselect {
    width: 100% !important;
    text-align: left !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: #fff !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #344054 !important;
    min-height: 38px !important;
}

.filter-row button.multiselect::after {
    margin-left: auto !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Premium Tooltip Design System Styling (SafeKivi Playbook)
   ───────────────────────────────────────────────────────────────────────────── */
.tooltip {
    --bs-tooltip-bg: var(--btn-primary-bg, #1b838b) !important;
    --bs-tooltip-color: var(--btn-primary-text, #ffffff) !important;
    --bs-tooltip-border-radius: 50rem !important; /* Pill-shaped borders matching standard button/pill styling */
    --bs-tooltip-padding-x: 14px !important;
    --bs-tooltip-padding-y: 6px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Fallback support: explicitly style the tooltip inner body container */
.tooltip-inner {
    background-color: var(--btn-primary-bg, #1b838b) !important;
    color: var(--btn-primary-text, #ffffff) !important;
    border-radius: 50rem !important;
}

/* Ensure the arrow pointer is a clean sharp triangle of the primary color, instead of a solid block */
.tooltip .tooltip-arrow::before {
    border-color: transparent !important;
    border-style: solid !important;
}
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--bs-tooltip-bg, #1b838b) !important;
}
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: var(--bs-tooltip-bg, #1b838b) !important;
}
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: var(--bs-tooltip-bg, #1b838b) !important;
}
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: var(--bs-tooltip-bg, #1b838b) !important;
}