/* ──────────────────────────────────────────────────────────────────────────
   hr-saas.css — the shared "SaaS" look for redesigned pages.

   Opt-in: a page wraps its {% block content %} in <div class="hr-saas"> and
   uses the hr-* classes below. Pages without the wrapper are untouched, so
   pages can move over one at a time.

   Every tint is a color-mix() against transparent (or against the card
   colour), so one set of rules reads right on the light and the dark card.
   Sneat's --bs-tertiary-bg can't be used for a soft fill: in dark mode
   (demo.css) it is the card colour itself, so the fill disappears.
   ────────────────────────────────────────────────────────────────────────── */
/* Defined on :root as well as .hr-saas so the top bar and sidebar (outside the
   page wrapper) can use the same palette. */
:root,.hr-saas{
  --hr-brand:#2563eb; --hr-brand-hover:#1d4ed8;
  --hr-green:#16a34a; --hr-red:#ef4444; --hr-orange:#f59e0b; --hr-blue:#2563eb;
  --hr-purple:#8b5cf6; --hr-sky:#0ea5e9; --hr-slate:#64748b;
  --hr-soft:color-mix(in srgb, var(--bs-body-color) 7%, transparent);
  --hr-radius:14px;
  --hr-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 16px rgba(16,24,40,.06);
}

/* Cards: borderless, rounded, soft shadow */
.hr-saas .card{border:0;border-radius:var(--hr-radius);box-shadow:var(--hr-shadow)}
.hr-saas .card-header{background:transparent;border-bottom:0}
.hr-saas .card-footer{background:transparent;border-top:1px solid color-mix(in srgb, var(--bs-border-color) 60%, transparent)}
.hr-saas .modal .card{box-shadow:none}
.hr-card-title{font-size:1.05rem;font-weight:600;letter-spacing:-.01em}

/* Page heading: medium title + blue icon tile.
   Icons are 48×48 SVGs filled with currentColor; .cut/.ring/.sym parts are
   painted in the tile colour so they read as cut-outs (the style of HR's
   "Blue Calendar Vacation Request Icon.png"). */
.hr-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.hr-head-main{display:flex;align-items:center;gap:1rem;min-width:0}
/* Sticky page heading: the title row + its action buttons pin just under the
   fixed top bar. --hr-sticky-top is measured from #layout-navbar by
   hr-base.html; .is-stuck (also set there) only swaps in the solid panel —
   padding is constant so nothing jumps when it sticks. Solid, not frosted: a
   backdrop-filter blur has to be recomputed on every scroll frame over
   whatever passes underneath, and on a 100-row table that was the lag. No negative side
   margin: the content column and the detached top bar share the same edges,
   so this keeps the stuck panel exactly as wide as the bar. Desktop/tablet
   only: on a phone the wrapped buttons would eat half the screen. */
@media (min-width:768px){
  .hr-saas > .hr-head{position:sticky;top:var(--hr-sticky-top, 4.5rem);z-index:11;
    padding:.35rem .75rem;border-radius:14px;
    transition:background-color .18s ease, box-shadow .18s ease}
  .hr-saas > .hr-head.is-stuck{
    background:var(--bs-paper-bg, var(--bs-body-bg));
    box-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 16px rgba(16,24,40,.08)}
  .hr-saas > .hr-head.is-stuck .hr-hero-icon{box-shadow:none}
  /* Pinned = title only; hr-base.html adds the lost height back as margin so
     the content underneath doesn't jump up when it pins. */
  .hr-saas > .hr-head.is-stuck .hr-head-main p{display:none}
}
.hr-hero-icon{flex:0 0 40px;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--hr-brand);color:#fff;box-shadow:0 4px 10px color-mix(in srgb, var(--hr-brand) 28%, transparent)}
.hr-hero-icon svg{width:28px;height:28px;fill:currentColor}
.hr-hero-icon .cut{fill:var(--hr-brand)}
.hr-hero-icon .ring{stroke:var(--hr-brand);stroke-width:2.5}
.hr-hero-icon .sym{fill:none;stroke:var(--hr-brand);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hr-hero-icon .sym-fill{fill:var(--hr-brand)}
.hr-title{font-size:1.375rem;font-weight:600;letter-spacing:-.01em;line-height:1.2}

/* Buttons */
.hr-saas .hr-btn-brand{background:var(--hr-brand);border-color:var(--hr-brand);color:#fff;border-radius:10px;font-weight:600;
  box-shadow:0 4px 12px color-mix(in srgb, var(--hr-brand) 28%, transparent)}
.hr-saas .hr-btn-brand:hover,.hr-saas .hr-btn-brand:focus{background:var(--hr-brand-hover);border-color:var(--hr-brand-hover);color:#fff}
.hr-saas .hr-btn-soft{--c:var(--hr-brand);background:color-mix(in srgb, var(--c) 10%, transparent);border:0;color:var(--c);
  border-radius:10px;font-weight:600;box-shadow:none}
.hr-saas .hr-btn-soft:hover,.hr-saas .hr-btn-soft:focus{background:color-mix(in srgb, var(--c) 18%, transparent);color:var(--c)}
.hr-saas .hr-btn-soft.c-green{--c:var(--hr-green)}
.hr-saas .hr-btn-soft.c-slate{--c:var(--hr-slate)}
.hr-saas .hr-btn-soft.c-orange{--c:#d97706}
.hr-saas .hr-btn-soft.c-sky{--c:#0284c7}
.hr-saas .hr-btn-soft.c-red{--c:var(--hr-red)}
/* Pages render icons as masks painted white for solid buttons
   (inline background-color:#fff) — on a soft button they take its colour. */
.hr-saas .hr-btn-soft i{background-color:currentColor!important}
.hr-saas .hr-btn-soft.c-navy{--c:#1e3a8a}
[data-bs-theme=dark] .hr-saas .hr-btn-soft.c-navy{--c:#93c5fd}
.hr-link{display:inline-flex;align-items:center;gap:.2rem;font-size:.8125rem;font-weight:600;color:var(--hr-brand);
  padding:.3rem .7rem;border-radius:50rem;background:color-mix(in srgb, var(--hr-brand) 9%, transparent);text-decoration:none;white-space:nowrap}
.hr-link:hover{background:color-mix(in srgb, var(--hr-brand) 16%, transparent);color:var(--hr-brand)}

/* Compact KPI strip: icon | label + number. Colour via --tile / .t-* */
.hr-tile{--tile:var(--hr-brand);display:flex;align-items:center;gap:.75rem;height:100%;padding:.8rem 1rem;border-radius:var(--hr-radius);
  background:color-mix(in srgb, var(--tile) 8%, var(--bs-paper-bg, var(--bs-body-bg)));
  border:1px solid color-mix(in srgb, var(--tile) 15%, transparent);box-shadow:var(--hr-shadow)}
.hr-tile-icon{flex:0 0 38px;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--tile);color:#fff;box-shadow:0 4px 10px color-mix(in srgb, var(--tile) 28%, transparent)}
.hr-tile-icon i{font-size:1.25rem}
.hr-tile-text{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.hr-tile-label{font-size:.75rem;font-weight:500;color:var(--bs-secondary-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-saas .hr-tile-value{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;color:var(--bs-heading-color);font-variant-numeric:tabular-nums;margin:0}
.hr-tile-sub{font-size:.72rem;color:var(--bs-secondary-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-tile-sub:empty{display:none}
.t-blue{--tile:var(--hr-blue)} .t-green{--tile:var(--hr-green)} .t-orange{--tile:var(--hr-orange)}
.t-red{--tile:var(--hr-red)} .t-purple{--tile:var(--hr-purple)} .t-sky{--tile:var(--hr-sky)} .t-slate{--tile:var(--hr-slate)}

/* Segmented tabs — works on .nav-pills or .nav-tabs; the page JS keeps
   toggling .active on .nav-link exactly as before. */
.hr-saas .hr-tabs{display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;border-radius:12px;background:var(--hr-soft);border:0;max-width:100%}
.hr-saas .hr-tabs .nav-item{margin:0}
.hr-saas .hr-tabs .nav-link{border:0!important;border-radius:9px;padding:.4rem .9rem;font-weight:600;font-size:.875rem;
  color:var(--bs-secondary-color);background:transparent;box-shadow:none;white-space:nowrap}
.hr-saas .hr-tabs .nav-link:hover{color:var(--bs-body-color)}
.hr-saas .hr-tabs .nav-link.active{background:var(--bs-paper-bg, var(--bs-body-bg));color:var(--hr-brand);box-shadow:0 1px 3px rgba(16,24,40,.12)}

/* Filters: .hr-filter-panel is a soft grey strip holding the controls;
   .hr-filters is the same control styling without the strip (for a filter
   row that already sits in its own card). */
.hr-filter-panel{background:var(--hr-soft);border-radius:12px;padding:.75rem}
.hr-saas :is(.hr-filter-panel,.hr-filters) :is(.form-select,.form-control,.input-group-text){border-radius:10px}
.hr-saas :is(.hr-filter-panel,.hr-filters) .input-group > :not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}
.hr-saas :is(.hr-filter-panel,.hr-filters) .input-group > :not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}
.hr-saas :is(.hr-filter-panel,.hr-filters) .btn{border-radius:10px;font-weight:600}

/* Form fields on redesigned pages: the same 10px rounding as the filters
   (outside modals, which keep Bootstrap's own look). */
.hr-saas :not(.modal-body) > :is(.form-control,.form-select){border-radius:10px}
.hr-saas .alert{border-radius:12px}
/* Small bits shared by the list pages */
.hr-saas .progress{border-radius:50rem;background:var(--hr-soft)}
.hr-saas .progress-bar{border-radius:50rem}
.hr-saas .emp-mini-card{transition:background .15s ease}
.hr-saas .emp-mini-card:hover{background:var(--hr-soft)}

/* Tables: small uppercase headers, airy rows, light separators */
.hr-table{--bs-table-bg:transparent}
.hr-table > thead > tr > th{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--bs-secondary-color);
  background:var(--hr-soft);border-bottom:0;padding-top:.7rem;padding-bottom:.7rem;white-space:nowrap}
.hr-table > tbody > tr > td{padding-top:.7rem;padding-bottom:.7rem;vertical-align:middle;
  border-bottom:1px solid color-mix(in srgb, var(--bs-border-color) 60%, transparent)}
.hr-table > tbody > tr:last-child > td{border-bottom:0}
.hr-table .badge,.hr-table .status-badge{border-radius:50rem}
/* Row action buttons: the pages render solid .btn-icon.btn-<colour> buttons
   with a white mask icon (inline background-color:#fff). Re-skinned here as
   soft round buttons that fill on hover — no change to the page JS. */
:is(.hr-table,.hr-cards) .btn-icon{--c:var(--hr-brand);width:32px;height:32px;border:0;border-radius:50%;
  background:color-mix(in srgb, var(--c) 12%, transparent)!important;color:var(--c)!important;box-shadow:none!important}
:is(.hr-table,.hr-cards) .btn-icon i{background-color:currentColor!important;width:1.15em!important;height:1.15em!important}
:is(.hr-table,.hr-cards) .btn-icon:hover{background:var(--c)!important;color:#fff!important}
:is(.hr-table,.hr-cards) .btn-icon.btn-success,:is(.hr-table,.hr-cards) .btn-icon.btn-outline-success{--c:var(--hr-green)}
:is(.hr-table,.hr-cards) .btn-icon.btn-danger,:is(.hr-table,.hr-cards) .btn-icon.btn-outline-danger{--c:var(--hr-red)}
:is(.hr-table,.hr-cards) .btn-icon.btn-warning{--c:var(--hr-orange)}
:is(.hr-table,.hr-cards) .btn-icon:is(.btn-secondary,.btn-outline-secondary){--c:var(--hr-slate)}
:is(.hr-table,.hr-cards) .btn-icon.btn-info{--c:var(--hr-sky)}
.hr-table img.rounded-circle{box-shadow:0 0 0 2px var(--bs-paper-bg, #fff),0 1px 3px rgba(16,24,40,.15)}
/* A table at the very top of a card: round the header row's outer corners to
   match the card (overflow:hidden on the card would clip dropdowns instead). */
.hr-saas .card > :first-child > .hr-table > thead > tr:first-child > th:first-child{border-top-left-radius:var(--hr-radius)}
.hr-saas .card > :first-child > .hr-table > thead > tr:first-child > th:last-child{border-top-right-radius:var(--hr-radius)}
/* Sneat's primary is purple — on redesigned pages the brand blue takes over
   for switches/checkboxes and the primary label badge. */
.hr-saas .form-check-input:checked{background-color:var(--hr-brand);border-color:var(--hr-brand)}
.hr-saas .bg-label-primary{background-color:color-mix(in srgb, var(--hr-brand) 12%, transparent)!important;color:var(--hr-brand)!important}
.hr-saas .status-badge{border-radius:50rem}

/* ══════════════════════════════════════════════════════════════════════════
   App shell — sidebar + top bar. Global (every page), not .hr-saas-scoped:
   the sidebar and navbar live in hr-base.html, outside the page wrapper.
   Sneat drives both from --bs-menu-* variables, so most of this re-points
   those rather than fighting its selectors.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --hr-brand:#2563eb;
  --bs-menu-width:15rem;              /* Sneat's 16.25rem → a slimmer sidebar */
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
#layout-menu{
  --bs-menu-active-color:var(--hr-brand);
  --bs-menu-active-bg:color-mix(in srgb, var(--hr-brand) 10%, transparent);
  --bs-menu-sub-active-color:var(--hr-brand);
  --bs-menu-active-toggle-bg:transparent;
  --bs-menu-hover-bg:color-mix(in srgb, var(--bs-body-color) 6%, transparent);
  box-shadow:none!important;
  border-inline-end:1px solid color-mix(in srgb, var(--bs-border-color) 70%, transparent);
}
/* _injectSidebar() replaces .menu-inner, so it can't rely on the scroller
   menu.js attached at load — native scroll as the floor (PerfectScrollbar's
   own .ps overflow:hidden!important wins wherever it is re-attached). */
#layout-menu .menu-inner{overflow-y:auto;overscroll-behavior:contain}
#layout-menu .app-brand{padding-inline:1.25rem}
#layout-menu .menu-divider,#layout-menu .menu-inner-shadow{display:none}
/* Sneat paints a primary-colour bar on the right edge of the active item */
#layout-menu .menu-inner > .menu-item.active::before{display:none}
#layout-menu .menu-inner > .menu-item > .menu-link{
  margin-inline:.75rem;border-radius:10px;min-block-size:2.5rem;font-size:.9rem;font-weight:500;
  transition:background .15s ease,color .15s ease}
#layout-menu .menu-inner > .menu-item.active > .menu-link{font-weight:600}
#layout-menu .menu-inner > .menu-item.active > .menu-link.menu-toggle{color:var(--hr-brand)}
#layout-menu .menu-icon{font-size:1.2rem;margin-inline-end:.75rem}
#layout-menu .menu-header{margin-block:1rem .35rem;padding-inline:1.5rem}
#layout-menu .menu-header .menu-header-text{font-size:.6875rem;font-weight:600;letter-spacing:.08em;color:var(--bs-secondary-color)}
#layout-menu .menu-header::before{display:none}
/* Settings group: sub-items as a quiet indented list */
#layout-menu .menu-sub > .menu-item > .menu-link{border-radius:10px;margin-inline:.75rem;font-size:.875rem}
#layout-menu .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle){color:var(--hr-brand);font-weight:600;
  background:color-mix(in srgb, var(--hr-brand) 7%, transparent)}
#layout-menu .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle)::before{background-color:var(--hr-brand)}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
/* Fixed top bar (layout-navbar-fixed on <html>): once fixed, the detached
   bar's "100%" is the viewport, not the column beside the menu, but it still
   starts after the menu — so on a laptop-width screen its right end ran off
   screen by the menu's width. Sneat's core.css only corrects this for the
   collapsed menu; this is the expanded-menu counterpart. */
@media (min-width:1200px){
  .layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) #layout-navbar.navbar-detached{
    inline-size:calc(100% - 1.625rem * 2 - var(--bs-menu-width, 16.25rem));
  }
}
/* Sneat frosts the fixed bar and the strip above the content with
   backdrop-filter blur once the page scrolls — two more layers re-blurred every
   scroll frame. Solid fills look the same at a glance and scroll smoothly. */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page::before{
  -webkit-backdrop-filter:none;backdrop-filter:none}
.layout-menu.menu-vertical ~ .layout-page.window-scrolled .layout-navbar{
  -webkit-backdrop-filter:none;backdrop-filter:none;background-color:var(--bs-paper-bg)}
#layout-navbar.navbar-detached{
  border-radius:14px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 16px rgba(16,24,40,.06);
}
.hr-nav-search{display:flex;align-items:center;gap:.5rem;height:38px;width:min(320px,100%);padding:0 .8rem;border-radius:10px;
  background:color-mix(in srgb, var(--bs-body-color) 6%, transparent);color:var(--bs-secondary-color);transition:box-shadow .15s ease}
.hr-nav-search:focus-within{box-shadow:0 0 0 3px color-mix(in srgb, var(--hr-brand) 22%, transparent)}
.hr-nav-search i{font-size:1.1rem}
.hr-nav-search input{border:0;outline:0;background:transparent;color:var(--bs-body-color);font-size:.875rem;width:100%;min-width:0}
.hr-nav-search input::placeholder{color:var(--bs-secondary-color)}
/* Language / theme / bell: matching soft round buttons */
#layout-navbar .hr-nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;height:36px;min-width:36px;
  padding:0 .55rem!important;border:0;border-radius:10px;background:transparent;color:var(--bs-body-color);transition:background .15s ease}
#layout-navbar .hr-nav-btn:hover,#layout-navbar .hr-nav-btn[aria-expanded="true"]{background:color-mix(in srgb, var(--bs-body-color) 7%, transparent)}
#layout-navbar .hr-nav-btn i{font-size:1.25rem}
#layout-navbar #lang-label{font-size:.72rem;font-weight:700;letter-spacing:.02em}
#layout-navbar #notif-badge{top:3px!important;right:3px!important;box-shadow:0 0 0 2px var(--bs-paper-bg, #fff)}
.hr-nav-divider{width:1px;height:24px;margin:0 .5rem;background:color-mix(in srgb, var(--bs-border-color) 90%, transparent)}
/* User: avatar + name/role + chevron (name hidden on small screens) */
#layout-navbar .hr-nav-user{display:flex;align-items:center;gap:.6rem;padding:.25rem .5rem .25rem .25rem!important;border-radius:12px;transition:background .15s ease}
#layout-navbar .hr-nav-user:hover,#layout-navbar .hr-nav-user[aria-expanded="true"]{background:color-mix(in srgb, var(--bs-body-color) 6%, transparent)}
.hr-nav-user-text{flex-direction:column;line-height:1.15;text-align:start}
.hr-nav-user-name{font-size:.8125rem;font-weight:600;color:var(--bs-heading-color);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hr-nav-user-role{font-size:.7rem;color:var(--bs-secondary-color);text-transform:capitalize}
#layout-navbar .hr-nav-user .bx-chevron-down{color:var(--bs-secondary-color);font-size:1rem}

/* Header controls — neutral, Linear/Stripe-like: greys at rest, one accent
   only where something is "on". */
/* Language: segmented EN | KH; the active half follows <html lang> */
.hr-lang-switch{display:inline-flex;align-items:center;gap:2px;height:36px;padding:3px;border-radius:10px;text-decoration:none;
  background:color-mix(in srgb, var(--bs-body-color) 7%, transparent);cursor:pointer}
.hr-lang-opt{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:30px;padding:0 .5rem;border-radius:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.03em;color:var(--bs-secondary-color);transition:background .15s ease,color .15s ease}
html:not([lang="km"]) .hr-lang-opt[data-lang="en"],html[lang="km"] .hr-lang-opt[data-lang="km"]{
  background:var(--bs-paper-bg, #fff);color:var(--bs-heading-color);box-shadow:0 1px 3px rgba(16,24,40,.14)}
.hr-lang-switch:hover .hr-lang-opt{color:var(--bs-body-color)}
/* Dark mode: sliding switch; knob + icon follow <html data-bs-theme>.
   All three header controls are 36px tall and the switch is display:block —
   as an inline button it sat on the text baseline, ~3px above its neighbours. */
.hr-theme-switch{position:relative;display:block;width:62px;height:36px;padding:0;border:0;border-radius:50rem;cursor:pointer;
  background:color-mix(in srgb, var(--bs-body-color) 9%, transparent);transition:background .2s ease}
.hr-theme-knob{position:absolute;top:3px;left:3px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#fff;color:#f59e0b;box-shadow:0 1px 3px rgba(16,24,40,.25);transition:transform .25s cubic-bezier(.3,.7,.4,1),background .2s ease,color .2s ease}
.hr-theme-knob svg{width:17px;height:17px}
.hr-theme-knob .ico-sun circle{fill:currentColor}
.hr-theme-knob .ico-sun path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hr-theme-knob .ico-moon{display:none;fill:currentColor}
[data-bs-theme=dark] .hr-theme-switch{background:color-mix(in srgb, #6366f1 35%, transparent)}
[data-bs-theme=dark] .hr-theme-knob{transform:translateX(26px);background:#1e1b4b;color:#c7d2fe}
[data-bs-theme=dark] .hr-theme-knob .ico-sun{display:none}
[data-bs-theme=dark] .hr-theme-knob .ico-moon{display:block}
/* Bell: neutral duotone outline */
.hr-nav-bell-ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  color:color-mix(in srgb, var(--bs-body-color) 80%, transparent)}
.hr-nav-bell-ico .duo{fill:color-mix(in srgb, currentColor 14%, transparent)}
#layout-navbar .hr-nav-btn:hover .hr-nav-bell-ico{color:var(--bs-heading-color)}

/* ══════════════════════════════════════════════════════════════════════════
   Dropdowns — menus (Export, row ⋮ menu, staff pickers, profile, bell) and
   <select> boxes, on redesigned pages and in the top bar. Bootstrap/Sneat
   drive both from variables, so this mostly re-points those.
   ══════════════════════════════════════════════════════════════════════════ */
:is(.hr-saas, #layout-navbar) .dropdown-menu{
  --bs-dropdown-padding-x:.375rem;
  --bs-dropdown-padding-y:.375rem;
  --bs-dropdown-font-size:.875rem;
  --bs-dropdown-border-radius:12px;
  --bs-dropdown-border-width:1px;
  --bs-dropdown-border-color:color-mix(in srgb, var(--bs-border-color) 70%, transparent);
  --bs-dropdown-box-shadow:0 12px 32px rgba(16,24,40,.14),0 2px 6px rgba(16,24,40,.06);
  --bs-dropdown-divider-margin-y:.375rem;
  --bs-dropdown-divider-bg:color-mix(in srgb, var(--bs-border-color) 70%, transparent);
  --bs-dropdown-link-hover-bg:color-mix(in srgb, var(--bs-body-color) 6%, transparent);
  --bs-dropdown-link-active-color:var(--hr-brand);
  --bs-dropdown-link-active-bg:color-mix(in srgb, var(--hr-brand) 10%, transparent);
  --bs-dropdown-item-padding-x:.75rem;
  --bs-dropdown-item-padding-y:.5rem;
  --bs-dropdown-header-padding-x:.75rem;
}
/* The brand blue is too dark to read as text on a dark menu */
[data-bs-theme=dark] :is(.hr-saas, #layout-navbar) .dropdown-menu{--bs-dropdown-link-active-color:#93c5fd}
#btn-mark-all-read{color:var(--hr-brand);font-weight:600}
[data-bs-theme=dark] #btn-mark-all-read{color:#93c5fd}
/* Fade in only — Popper positions the menu with transform, so animating
   transform here would make it jump. */
:is(.hr-saas, #layout-navbar) .dropdown-menu.show{animation:hr-dd-in .14s ease-out}
@keyframes hr-dd-in{from{opacity:0}to{opacity:1}}
:is(.hr-saas, #layout-navbar) .dropdown-item{border-radius:8px;display:flex;align-items:center;gap:.15rem;font-weight:500;
  transition:background .12s ease,color .12s ease}
:is(.hr-saas, #layout-navbar) .dropdown-item.text-truncate{display:block}
:is(.hr-saas, #layout-navbar) .dropdown-item > i{color:var(--bs-secondary-color);font-size:1.1rem;transition:color .12s ease}
:is(.hr-saas, #layout-navbar) .dropdown-item:is(:hover,:focus,.active,:active) > i{color:currentColor}
:is(.hr-saas, #layout-navbar) .dropdown-item:active{background:var(--bs-dropdown-link-active-bg);color:var(--bs-dropdown-link-active-color)}
:is(.hr-saas, #layout-navbar) .dropdown-item-text{padding:.5rem .75rem;font-size:.8125rem}
:is(.hr-saas, #layout-navbar) .dropdown-header{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
:is(.hr-saas, #layout-navbar) .dropdown-divider{margin-inline:-.375rem}
/* A destructive item (e.g. Log out) */
:is(.hr-saas, #layout-navbar) .dropdown-item.hr-dd-danger,
:is(.hr-saas, #layout-navbar) .dropdown-item.hr-dd-danger > i{color:var(--hr-red)}
:is(.hr-saas, #layout-navbar) .dropdown-item.hr-dd-danger:hover{background:color-mix(in srgb, var(--hr-red) 9%, transparent)}

/* Profile menu: a header card for who is signed in */
.hr-dd-profile{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem .7rem}
.hr-dd-profile img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.hr-dd-profile-name{font-weight:600;color:var(--bs-heading-color);line-height:1.2}
.hr-dd-profile-role{font-size:.75rem;color:var(--bs-secondary-color);text-transform:capitalize}

/* Notifications list */
#layout-navbar .notif-item{margin:2px .375rem;border-radius:10px;transition:background .12s ease}
#layout-navbar .notif-item:hover{background:color-mix(in srgb, var(--bs-body-color) 6%, transparent)}
#layout-navbar .notif-item.is-unread{background:color-mix(in srgb, var(--hr-brand) 6%, transparent)}
#layout-navbar .notif-item.is-unread:hover{background:color-mix(in srgb, var(--hr-brand) 11%, transparent)}
#layout-navbar .notif-item .notif-ico{width:36px;height:36px;border-radius:10px}
#layout-navbar .notif-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--hr-brand)}
#layout-navbar #notif-list{padding:.25rem 0}
#layout-navbar .bg-label-primary{background-color:color-mix(in srgb, var(--hr-brand) 12%, transparent)!important;color:var(--hr-brand)!important}

/* <select>: a lighter chevron, brand focus ring, hover border */
.hr-saas .form-select{
  --bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
  background-size:16px 16px;background-position:right .75rem center;padding-right:2.25rem;cursor:pointer}
.hr-saas .form-select-sm{background-size:14px 14px;background-position:right .6rem center;padding-right:1.9rem}
.hr-saas :is(.form-control,.form-select):hover:not(:focus):not(:disabled){border-color:color-mix(in srgb, var(--bs-body-color) 32%, transparent)}
:is(.hr-saas, #layout-navbar) :is(.form-control,.form-select):focus{border-color:var(--hr-brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--hr-brand) 18%, transparent)}

/* The list a <select> opens. Browsers draw it natively (a square system
   list) unless the select opts into `appearance: base-select` — supported in
   Chrome/Edge 135+, ignored elsewhere, where the native list simply stays. */
@supports (appearance: base-select){
  .hr-saas select.form-select:not([multiple]):not([size]),
  .hr-saas select.form-select:not([multiple]):not([size])::picker(select){appearance:base-select}
  .hr-saas select.form-select:not([multiple]):not([size]){display:block;text-align:start}
  /* our own chevron (background-image above) stays; drop the built-in one */
  .hr-saas select.form-select::picker-icon{display:none}
  .hr-saas select.form-select::picker(select){
    margin-block:4px;padding:.375rem;max-height:min(340px,60vh);
    border:1px solid color-mix(in srgb, var(--bs-border-color) 70%, transparent);border-radius:12px;
    background:var(--bs-paper-bg, #fff);color:var(--bs-body-color);
    box-shadow:0 12px 32px rgba(16,24,40,.14),0 2px 6px rgba(16,24,40,.06)}
  .hr-saas select.form-select option{display:flex;align-items:center;gap:.5rem;padding:.45rem .75rem;border-radius:8px;
    font-size:.875rem;font-weight:500;color:var(--bs-heading-color);background:transparent;cursor:pointer}
  .hr-saas select.form-select option:is(:hover,:focus-visible){background:color-mix(in srgb, var(--bs-body-color) 7%, transparent);outline:0}
  .hr-saas select.form-select option:checked{background:color-mix(in srgb, var(--hr-brand) 10%, transparent);color:var(--hr-brand);font-weight:600}
  [data-bs-theme=dark] .hr-saas select.form-select option:checked{color:#93c5fd}
  .hr-saas select.form-select option::checkmark{order:1;margin-inline-start:auto;font-size:.8rem}
  .hr-saas select.form-select optgroup{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
    color:var(--bs-secondary-color);padding:.5rem .25rem .25rem}
  .hr-saas select.form-select optgroup option{text-transform:none;letter-spacing:0}
}

/* Segmented control on a .btn-group (e.g. ID Cards zoom): page JS toggles
   .active on the buttons; the active one becomes a raised white pill. */
.hr-saas .hr-seg{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--hr-soft)}
.hr-saas .hr-seg > .btn{border:0!important;border-radius:8px!important;padding:.35rem .9rem;font-weight:600;font-size:.8125rem;
  background:transparent;color:var(--bs-secondary-color);box-shadow:none}
.hr-saas .hr-seg > .btn:hover{color:var(--bs-body-color)}
.hr-saas .hr-seg > .btn.active{background:var(--bs-paper-bg, #fff);color:var(--hr-brand);box-shadow:0 1px 3px rgba(16,24,40,.12)}
[data-bs-theme=dark] .hr-saas .hr-seg > .btn.active{color:#93c5fd}