/* ==========================================================================
   HRMGo Rebrand — Corporate Professional design system (LIGHT MODE)
   Loaded after style.css / custom.css / custom-color.css.
   Redefines structural tokens (neutrals, radius, shadow, typography, spacing)
   only. Accent color intentionally NOT overridden here — it continues to
   flow from --bs-primary / --color-customColor via the existing theme-N /
   custom-color switcher (see public/css/custom-color.css and style.css
   .theme-N rules), so the user's saved color choice keeps working.
   ========================================================================== */

:root {
    /* Corporate Professional neutrals — slate/graphite instead of the
       purple-leaning defaults, sharper corners, tighter shadows. */
    --brand-surface: #ffffff;
    --brand-surface-muted: #f6f7f9;
    --brand-border: #e2e5ea;
    --brand-border-strong: #d3d7de;
    --brand-text: #1f2430;
    --brand-text-muted: #626878;
    --brand-text-subtle: #8a90a0;

    --brand-radius-sm: 4px;
    --brand-radius: 6px;
    --brand-radius-lg: 8px;

    --brand-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --brand-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --brand-shadow-lg: 0 4px 12px rgba(16, 24, 40, 0.10);

    --brand-font: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    /* Accent bridge: `--bs-primary` is a STATIC value hardcoded once in
       style.css (#51459d) — it is never updated by the theme-color
       switcher, so components can't reliably use it to "follow the
       selected theme color". The app's real per-user accent instead
       lives in `--color-customColor`, which the layout (admin.blade.php)
       now always resolves to a real hex — the actual custom color when
       the picker is used, or the matching preset's hex (looked up from
       the same values style.css hardcodes per `body.theme-N`) when a
       preset swatch is selected instead. So `--color-customColor` is
       valid in both cases now and can be read unconditionally here,
       rather than only inside `body.custom-color` as before — that
       scoping was the actual bug: it left every rebrand.css component
       falling back to the static purple whenever a preset theme was
       selected. Every accent-following rule in this file should
       reference `var(--accent, …)`, never `--bs-primary` directly. */
    --accent: var(--color-customColor, var(--bs-primary, #1f2430));

    /* Bootstrap structural token overrides */
    --bs-body-font-family: var(--brand-font);
    --bs-body-color: var(--brand-text);
    --bs-body-bg: var(--brand-surface-muted);
    --bs-border-color: var(--brand-border);
    --bs-border-radius: var(--brand-radius);
    --bs-border-radius-sm: var(--brand-radius-sm);
    --bs-border-radius-lg: var(--brand-radius-lg);
    --bs-border-radius-xl: var(--brand-radius-lg);
    --bs-border-radius-2xl: var(--brand-radius-lg);
}

body {
    font-family: var(--brand-font);
    color: var(--brand-text);
    background: var(--brand-surface-muted);
    letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    color: var(--brand-text);
    letter-spacing: -0.01em;
}

.text-muted {
    color: var(--brand-text-muted) !important;
}

/* ==========================================================================
   Phase 2 — Global component re-skin
   Targets the standard Bootstrap classes used across all 359 views, so a
   single edit here cascades to every listing, form, and dashboard widget
   without touching individual Blade files.
   ========================================================================== */

/* ---- Cards -------------------------------------------------------------- */
.card {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-lg);
    box-shadow: var(--brand-shadow-sm);
}

.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--brand-border);
    padding: 1rem 1.25rem;
}

.card .card-header h5,
.card .card-header .h5 {
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-text-muted);
}

.card .card-header h5:after,
.card .card-header .h5:after {
    display: none;
}

.card .card-body {
    padding: 1.25rem;
}

/* ---- Tables --------------------------------------------------------------
   Covers both plain Bootstrap tables and the Simple-DataTables wrapper
   (#pc-dt-simple renders inside .dataTable-container / .dataTable-table). */
.table {
    --bs-table-bg: transparent;
    color: var(--brand-text);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--brand-border);
    padding: 0.75rem 1rem;
}

.table thead th,
.dataTable-table thead th {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-text-subtle);
    background: var(--brand-surface-muted);
    border-bottom: 1px solid var(--brand-border-strong);
    white-space: nowrap;
}

.table.table-hover > tbody > tr:hover > * {
    background: var(--brand-surface-muted);
}

/* Only pad the side that actually needs a gap from the table — the card
   itself already provides outer spacing (.card-body padding), so padding
   on both sides here was stacking with it and making the header/footer
   area feel oversized.

   NOTE: style.css has `.card:not(.table-card) .dataTable-top/.dataTable-bottom
   { padding: 25px 25px }` and `.card:not(.table-card) .table-responsive
   { margin: -25px -25px 0 -25px; width: calc(100% + 50px) }` — a
   deliberate "table bleeds past the card's own padding" pattern, at
   HIGHER specificity than a plain `.dataTable-top` rule, so it was
   silently winning over the reduction below. That's also the real cause
   of the table row lines appearing to overflow the card: the table is
   made 50px *wider* than the card on purpose. Both are matched/overridden
   explicitly here. */
.card:not(.table-card) .dataTable-top,
.dataTable-top {
    padding: 0 0 0.6rem 0;
    border: none;
}

.card:not(.table-card) .dataTable-bottom,
.dataTable-bottom {
    padding: 0.6rem 0 0 0;
    border: none;
}

.card:not(.table-card) .table-responsive {
    margin: 0;
    width: 100%;
}

.dataTable-input,
.dataTable-selector {
    border: 1px solid var(--brand-border-strong);
    border-radius: var(--brand-radius-sm);
}

.dataTable-pagination a.dataTable-pagination-list-item-link,
.dataTable-pagination ul {
    border-radius: var(--brand-radius-sm);
}

/* ---- Buttons -------------------------------------------------------------
   Accent colors (bg/border) still come from --bs-primary / theme-N /
   custom-color rules — only shape/weight/transitions are touched here. */
.btn {
    border-radius: var(--brand-radius-sm);
    font-weight: 500;
    font-size: 0.83rem;
    padding: 0.5rem 1rem;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-sm {
    border-radius: var(--brand-radius-sm);
    padding: 0.3rem 0.65rem;
    font-size: 0.76rem;
}

.btn:focus,
.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(31, 36, 48, 0.12);
}

.btn-light-primary,
.btn-light-danger,
.btn-light-success,
.btn-light-warning,
.btn-light-info,
.btn-light-secondary {
    border: 1px solid transparent;
    font-weight: 500;
}

.action-btn {
    border-radius: var(--brand-radius-sm);
}

/* ---- Forms ---------------------------------------------------------------*/
.form-control,
.form-select,
.dataTable-input,
.dataTable-selector {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border-strong);
    border-radius: var(--brand-radius-sm);
    color: var(--brand-text);
    font-size: 0.85rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent, var(--brand-text-muted));
    box-shadow: 0 0 0 3px rgba(31, 36, 48, 0.08);
}

.form-label {
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--brand-text-muted);
    margin-bottom: 0.4rem;
}

.input-group-text {
    background: var(--brand-surface-muted);
    border: 1px solid var(--brand-border-strong);
    color: var(--brand-text-muted);
}

/* ---- Badges / status pills -------------------------------------------- */
.badge {
    border-radius: var(--brand-radius-sm);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    padding: 0.38em 0.65em;
}

/* ---- Alerts / toasts ---------------------------------------------------*/
.alert {
    border: 1px solid transparent;
    border-radius: var(--brand-radius);
    box-shadow: none;
}

#liveToast,
.toast {
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow-lg);
}

/* ---- Modals -------------------------------------------------------------*/
.modal-content {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-lg);
    box-shadow: var(--brand-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--brand-border);
    padding: 1rem 1.25rem;
}

.modal-footer {
    border-top: 1px solid var(--brand-border);
    padding: 0.85rem 1.25rem;
}

/* ---- Dropdowns -----------------------------------------------------------*/
.dropdown-menu {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow-lg);
    padding: 0.4rem;
}

.dropdown-item {
    border-radius: var(--brand-radius-sm);
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--brand-surface-muted);
}

/* ---- Pagination ------------------------------------------------------- */
.page-link {
    border: 1px solid var(--brand-border-strong);
    color: var(--brand-text);
    border-radius: var(--brand-radius-sm);
    margin: 0 2px;
    font-size: 0.82rem;
}

.page-item.disabled .page-link {
    color: var(--brand-text-subtle);
    background: var(--brand-surface-muted);
}

/* ---- Breadcrumbs ----------------------------------------------------- */
.breadcrumb {
    font-size: 0.8rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--brand-text-subtle);
}

/* ---- Tabs --------------------------------------------------------------*/
.nav-tabs {
    border-bottom: 1px solid var(--brand-border);
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--brand-text-muted);
    font-weight: 500;
    font-size: 0.85rem;
}

.nav-tabs .nav-link.active {
    background: transparent;
    border-bottom-color: var(--accent, var(--brand-text));
    color: var(--brand-text);
}

/* ---- Avatars -------------------------------------------------------------
   Forcing width/height:100% (as the header markup does inline) without
   object-fit stretches/distorts non-square source photos, which is what
   was reading as a "broken" avatar — object-fit:cover fixes that without
   touching the markup. */
.theme-avtar {
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.theme-avtar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   Phase 3 — Shell redesign (sidebar, header, page chrome)
   The base template renders the sidebar/header as a "floating rounded card"
   on desktop (20px inset, 20px border-radius, heavy drop shadow) via the
   `:not(.transprent-bg)` branch of .dash-sidebar.light-sidebar / .dash-header
   in style.css. Corporate Professional calls for a flush, structured shell
   instead, so that branch is overridden back to edge-to-edge with a hairline
   border — this alone changes the entire app's silhouette at first glance.
   ========================================================================== */

@media (min-width: 1024px) {
    .dash-sidebar.light-sidebar:not(.transprent-bg) {
        top: 0;
        bottom: 0;
        left: 0;
        border-radius: 0;
        box-shadow: none;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
    }

    .dash-sidebar.light-sidebar:not(.transprent-bg) .navbar-content {
        height: calc(100vh - 70px);
    }

    .dash-header:not(.transprent-bg) {
        top: 0;
        left: 255px;
        right: 0;
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid var(--brand-border);
    }

    .dash-header:not(.transprent-bg) .header-wrapper {
        padding: 0 24px;
    }

    .dash-header:not(.transprent-bg):not(.dash-mob-header) ~ .dash-container {
        margin-left: 255px;
    }

    .dash-header:not(.transprent-bg):not(.dash-mob-header) ~ .dash-container .dash-content {
        padding-top: 30px;
    }
}

/* ---- Sidebar surface & nav items ----------------------------------------
   Reversed from an earlier "always-dark regardless of mode" decision to a
   light sidebar that now respects the light/dark mode toggle instead —
   `--brand-surface` already resolves to the right value in both modes via
   the token system, no separate dark-mode override needed here. */
.dash-sidebar {
    /* !important: the base template's own .dash-sidebar rule sets a fixed
       dark background directly — needed to reliably win over that. */
    background: var(--brand-surface) !important;
}

.dash-sidebar .m-header {
    border-bottom: 1px solid var(--brand-border);
}

@media (min-width: 1024px) {
    .dash-sidebar.light-sidebar:not(.transprent-bg) {
        border-right: 1px solid var(--brand-border);
    }
}

/* !important throughout this block: the base template ships a separate
   `customizer.css` with `.dash-sidebar.light-sidebar …` rules (3 classes,
   e.g. `color: #333333`) that outrank a plain `.dash-sidebar .dash-link`
   override on specificity alone — !important reliably wins against that
   file without duplicating its exact 3-class selectors everywhere. */
.dash-sidebar .dash-link,
.dash-sidebar.light-sidebar .dash-link {
    border-radius: var(--brand-radius-sm);
    font-size: 0.85rem;
    color: var(--brand-text-muted) !important;
}

.dash-sidebar .dash-caption {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--brand-text-subtle);
}

/* Active/hover nav item: solid accent-color fill + white text, per
   design feedback — reads clearly on any sidebar theme and any accent
   color, light or dark mode, since it no longer depends on a subtle
   tint against the sidebar's own background. */
.dash-sidebar .dash-navbar > .dash-item.active > .dash-link,
.dash-sidebar .dash-navbar > .dash-item:focus > .dash-link,
.dash-sidebar .dash-navbar > .dash-item:hover > .dash-link,
.dash-sidebar.light-sidebar .dash-navbar > .dash-item.active > .dash-link,
.dash-sidebar.light-sidebar .dash-navbar > .dash-item:focus > .dash-link,
.dash-sidebar.light-sidebar .dash-navbar > .dash-item:hover > .dash-link {
    background: var(--accent, #1f2430) !important;
    box-shadow: none !important;
    color: #fff !important;
    border-radius: var(--brand-radius-sm);
}

/* Icon chip stays white (matches every other nav item); only its glyph
   picks up the accent color, so it still reads as "selected" against the
   now-solid accent row. */
.dash-sidebar .dash-navbar > .dash-item.active > .dash-link .dash-micon i,
.dash-sidebar .dash-navbar > .dash-item:focus > .dash-link .dash-micon i,
.dash-sidebar .dash-navbar > .dash-item:hover > .dash-link .dash-micon i,
.dash-sidebar.light-sidebar .dash-navbar > .dash-item.active > .dash-link .dash-micon i,
.dash-sidebar.light-sidebar .dash-navbar > .dash-item:hover > .dash-link .dash-micon i {
    color: var(--accent, #1f2430) !important;
}

.dash-sidebar .dash-submenu .dash-link,
.dash-sidebar.light-sidebar .dash-submenu .dash-link {
    color: var(--brand-text-muted) !important;
    font-size: 0.82rem;
    padding-left: 2.6rem;
    position: relative;
}

/* Small dot-bullet marker in front of each submenu item, replacing the
   template's default connector line. */
/* The base template also draws its OWN decorative marker — a small
   rotated "loader ring" — via `.dash-submenu .dash-item::before` (a
   DIFFERENT element than the `.dash-link::before` dot below). Both were
   rendering at once, which is what looked like a single messy/misaligned
   icon. Disabling the template's version here rather than trying to
   reposition it, since it's redundant with the clean dot already added. */
body:not(.minimenu) .dash-sidebar .dash-submenu .dash-item:before,
.dash-sidebar .dash-submenu .dash-item:before {
    content: none !important;
}

.dash-sidebar .dash-submenu .dash-link::before,
.dash-sidebar.light-sidebar .dash-submenu .dash-link::before {
    content: "";
    position: absolute;
    left: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-text-subtle);
}

.dash-sidebar .dash-submenu .dash-item.active > .dash-link,
.dash-sidebar .dash-submenu .dash-item:hover > .dash-link,
.dash-sidebar.light-sidebar .dash-submenu .dash-item.active > .dash-link,
.dash-sidebar.light-sidebar .dash-submenu .dash-item:hover > .dash-link {
    color: var(--accent, var(--brand-text)) !important;
    background: transparent !important;
}

.dash-sidebar .dash-submenu .dash-item.active > .dash-link::before,
.dash-sidebar .dash-submenu .dash-item:hover > .dash-link::before,
.dash-sidebar.light-sidebar .dash-submenu .dash-item.active > .dash-link::before,
.dash-sidebar.light-sidebar .dash-submenu .dash-item:hover > .dash-link::before {
    background: var(--accent, var(--brand-text));
}

/* Subtle decorative accent blob near the bottom of the sidebar.
   NOTE: no `position: relative` here — the base stylesheet already makes
   `.dash-sidebar` `position: fixed`, which already establishes a
   containing block for the `::after` blob below. Adding `position:
   relative` on top of that overrides the fixed positioning entirely,
   dropping the sidebar into normal document flow — which pushes the
   header/content below it instead of beside it. Only `overflow: hidden`
   is actually needed here, to clip the blob to the sidebar's edges. */
.dash-sidebar {
    overflow: hidden;
}

.dash-sidebar::after {
    content: "";
    position: absolute;
    left: -60px;
    bottom: 40px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent, var(--brand-text)) 6%, transparent);
    pointer-events: none;
}

.dash-sidebar .navbar-wrapper {
    position: relative;
    z-index: 1;
}

/* ---- Header --------------------------------------------------------------
   Redesigned top-bar action row: the stock template renders every action
   (notifications, chat, language, profile) as its own separate bordered
   white pill button. Flattened those into quiet icon buttons that only
   pick up a background on hover, tightened their spacing into one visual
   group, and added a hairline divider before the profile control — which
   now sits last in the row (moved there in header.blade.php) instead of
   first, next to the sidebar toggle. */
.dash-header .header-wrapper > .ms-auto > ul {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.dash-header .dash-head-link {
    border: none !important;
    background: transparent !important;
    border-radius: var(--brand-radius);
    margin: 0 !important;
    padding: 0.55rem;
    color: var(--brand-text-muted);
}

.dash-header .dash-head-link:hover,
.dash-header .dash-head-link:focus,
.dash-header .dash-h-item.show > .dash-head-link {
    background: var(--brand-surface-muted) !important;
    color: var(--brand-text);
}

.dash-header .dash-head-link > i {
    color: inherit;
    font-size: 19px;
}

.dash-h-divider {
    width: 1px;
    height: 24px;
    background: var(--brand-border);
    margin: 0 0.6rem;
}

/* Page action button(s) (e.g. "Add Employee") — used to sit alone in their
   own bordered row above the page content, orphaned once the title moved
   into the header. Relocated next to the header's icon actions instead,
   right where a page-specific call-to-action reads naturally beside the
   global account/notification controls. Only takes up space on pages that
   actually define one (`@hasSection('action-button')` in the header
   partial). */
.dash-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.dash-header-actions .btn {
    padding: 0.4rem 0.9rem;
    font-size: 0.78rem;
    border-radius: 50rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.dash-header-actions .btn i {
    font-size: 0.9rem;
}

.dash-header .drp-notification .dropdown-menu,
.dash-header .dash-h-dropdown {
    border-radius: var(--brand-radius);
}

/* Icon-only action row: notifications/chat/messages were already icon +
   badge only. The language switcher is the one control that still showed
   its full name ("English") next to the globe icon — trimmed to icon-only
   here too, keeping just the small chevron as a "this opens a menu" cue.
   The profile control intentionally keeps its short "Hi, {name}!" label
   (per design direction: avatar + a little text is fine, everything else
   should be icon-only). */
.dash-header .drp-language .drp-text {
    display: none;
}

.dash-header .drp-language .dash-head-link {
    gap: 0.3rem;
}

/* ---- Page heading + breadcrumb, moved into the top bar -------------------
   Previously a full-width row above the page content (title + breadcrumb
   on the left, action button on the right) on every single page. Freed-up
   header space (icon-only actions, see above) is now used for the title +
   breadcrumb instead — this is a layout change that reaches every page in
   the app at once, since it's in the shared header partial and layout. The
   action-button row still exists below the header, but only renders when a
   page actually defines one (`@hasSection('action-button')` in
   layouts/admin.blade.php), so pages without one don't show an empty
   bordered strip. */
.dash-header-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    min-width: 0;
    flex: 1 1 auto;
    padding-left: 1rem;
    margin-right: 1rem;
}

.dash-header-heading .dash-header-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--brand-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-header-heading .dash-header-breadcrumb {
    margin: 0;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1.3;
}

.dash-header-heading .dash-header-breadcrumb:empty {
    display: none;
}

@media (max-width: 767px) {
    .dash-header-heading {
        display: none;
    }
}

/* Action-button row (only rendered when a page defines one — see
   @hasSection above): kept as its own bordered strip above the content. */
.dash-container .page-header {
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--brand-border);
}

/* ---- Footer --------------------------------------------------------------*/
.dash-footer {
    border-top: 1px solid var(--brand-border);
    color: var(--brand-text-subtle);
    font-size: 0.78rem;
}

/* ==========================================================================
   Phase 4 — Auth pages (login/register/forgot-password) + landing page
   ========================================================================== */

/* ---- Auth (resources/views/layouts/auth.blade.php) ----------------------
   Two-panel corporate login: a dark brand rail (reusing the sidebar's
   slate color for visual consistency with the app shell) + a plain white
   form panel. The base template renders `<div class="card"><div
   class="card-body">…</div></div>` — i.e. TWO nested boxes — and our
   Phase 2 global `.card` rule was giving the outer wrapper its own
   border/radius on top of custom-login.css's border on the inner
   `.card-body`, producing a visible double-border artifact. Fixed by
   fully neutralizing the outer `.card` here so only `.card-body` renders
   as the visible card. */
.custom-login {
    background: var(--brand-surface-muted);
}

.custom-login .custom-login-inner {
    padding: 24px;
}

.custom-login .auth-shell {
    display: flex;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-lg);
    box-shadow: var(--brand-shadow-lg);
    overflow: hidden;
    min-height: 560px;
}

.custom-login .auth-brand-panel {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 3rem 2rem;
    background: #171c26;
    background-image: linear-gradient(160deg, #171c26 0%, #1f2636 100%);
    text-align: center;
}

.custom-login .auth-brand-panel .logo {
    max-width: 180px;
}

.custom-login .auth-brand-tagline {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    max-width: 240px;
    margin: 0;
}

.custom-login .auth-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Neutralize the outer .card wrapper — see note above. */
.custom-login .card {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
}

.custom-login .custom-wrapper {
    padding: 0;
    max-width: none;
    width: 100%;
    margin: 0;
}

.custom-login .custom-wrapper .custom-row {
    width: 100%;
}

.custom-login .custom-wrapper .card .card-body {
    max-width: 360px;
    width: 100%;
    margin: 0 auto;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.custom-login .custom-wrapper .card .card-body h2 {
    font-size: 1.4rem;
    padding-bottom: 0.85rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--brand-border);
}

.custom-login .custom-wrapper .card .card-body h2 span,
.custom-login a {
    color: var(--accent, #1f2430);
}

.custom-login .form-control:focus {
    border-color: var(--accent, var(--brand-border-strong));
    box-shadow: 0 0 0 3px rgba(31, 36, 48, 0.08);
}

.custom-login .form-check-input:checked {
    background-color: var(--accent, var(--brand-text));
    border-color: var(--accent, var(--brand-text));
}

/* Browser autofill (Chrome/Safari) forces its own yellow/blue fill color
   via an inset box-shadow trick — override it so autofilled fields keep
   our surface color instead of clashing with the new design. */
.custom-login input:-webkit-autofill,
.custom-login input:-webkit-autofill:hover,
.custom-login input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--brand-text);
    box-shadow: 0 0 0 1000px var(--brand-surface) inset;
    transition: background-color 9999s ease-in-out 0s;
}

.custom-login .auth-footer {
    color: var(--brand-text-subtle);
    font-size: 0.78rem;
    padding: 1rem 0;
}

@media (max-width: 767.98px) {
    .custom-login .auth-shell {
        flex-direction: column;
        min-height: 0;
    }

    .custom-login .auth-brand-panel {
        padding: 2rem;
    }
}

/* ---- Landing page (resources/views/layouts/landing.blade.php) ----------- */
.landing-body .navbar,
body.landing-body .navbar {
    background: var(--brand-surface);
    border-bottom: 1px solid var(--brand-border);
    box-shadow: none;
}

.top-nav-collapse {
    background: var(--brand-surface) !important;
    box-shadow: var(--brand-shadow-sm);
}

.price-section .card {
    border-radius: var(--brand-radius-lg);
}

/* ==========================================================================
   Follow-up fixes from visual QA
   ========================================================================== */

/* ---- Top-right profile dropdown ("Hi, {name}!") -------------------------
   Was a plain bordered pill. Flattened it into a quiet, borderless trigger
   that only picks up a subtle background on hover/open, so it reads as
   part of the header instead of a separate boxed control. */
.dash-header .drp-company > .dash-head-link {
    border: none;
    background: transparent;
    padding: 0.35rem 0.6rem 0.35rem 0.35rem;
    border-radius: var(--brand-radius);
    gap: 0.5rem;
}

.dash-header .drp-company > .dash-head-link:hover,
.dash-header .drp-company > .dash-head-link:focus,
.dash-header .drp-company.show > .dash-head-link {
    background: var(--brand-surface-muted);
}

.dash-header .drp-company .theme-avtar {
    width: 32px;
    height: 32px;
}

.dash-header .drp-company .drp-arrow {
    margin-left: 0.15rem;
}

/* ---- Dashboard stat cards (.dash-info-card) ------------------------------
   Restructured from a side-by-side "icon+label | value" row into a
   top-accent-bar / icon-chip / large-value / label layout, using CSS
   `order` on the existing Bootstrap flex `.row` (no extra markup needed)
   and `:has()` to color-match each card to its own icon's semantic color
   (primary/info/warning/etc.) without hardcoding per-card classes.
   Soft gradient wash + solid icon-square styled after the reference
   mockup — every color below is `--bs-primary`/`--bs-info`/etc, i.e. it
   follows whichever accent/theme is currently selected, never a fixed hex. */
.dash-info-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--brand-border);
    border-top: 3px solid var(--brand-border-strong);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.dash-info-card:hover {
    box-shadow: var(--brand-shadow);
    transform: translateY(-1px);
}

.dash-info-card:has(.bg-primary) {
    border-top-color: var(--accent, #1f2430);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #1f2430) 10%, var(--brand-surface)) 0%, var(--brand-surface) 65%);
}
.dash-info-card:has(.bg-info) {
    border-top-color: var(--bs-info, #3ec9d6);
    background: linear-gradient(135deg, color-mix(in srgb, var(--bs-info, #3ec9d6) 12%, var(--brand-surface)) 0%, var(--brand-surface) 65%);
}
.dash-info-card:has(.bg-warning) {
    border-top-color: var(--bs-warning, #ffa21d);
    background: linear-gradient(135deg, color-mix(in srgb, var(--bs-warning, #ffa21d) 12%, var(--brand-surface)) 0%, var(--brand-surface) 65%);
}
.dash-info-card:has(.bg-danger) {
    border-top-color: var(--bs-danger, #ff3a6e);
    background: linear-gradient(135deg, color-mix(in srgb, var(--bs-danger, #ff3a6e) 12%, var(--brand-surface)) 0%, var(--brand-surface) 65%);
}
.dash-info-card:has(.bg-success) {
    border-top-color: var(--bs-success, #6fd943);
    background: linear-gradient(135deg, color-mix(in srgb, var(--bs-success, #6fd943) 12%, var(--brand-surface)) 0%, var(--brand-surface) 65%);
}
.dash-info-card:has(.bg-secondary) {
    border-top-color: var(--bs-secondary, #6b7785);
    background: linear-gradient(135deg, color-mix(in srgb, var(--bs-secondary, #6b7785) 12%, var(--brand-surface)) 0%, var(--brand-surface) 65%);
}

/* Faint decorative circle in the corner, tinted to the card's own accent —
   purely cosmetic, echoes the soft "blob" shape in the reference design. */
.dash-info-card::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -30px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 8%, transparent);
    pointer-events: none;
}

.dash-info-card:has(.bg-primary)::after { color: var(--accent, #1f2430); }
.dash-info-card:has(.bg-info)::after { color: var(--bs-info, #3ec9d6); }
.dash-info-card:has(.bg-warning)::after { color: var(--bs-warning, #ffa21d); }
.dash-info-card:has(.bg-danger)::after { color: var(--bs-danger, #ff3a6e); }
.dash-info-card:has(.bg-success)::after { color: var(--bs-success, #6fd943); }
.dash-info-card:has(.bg-secondary)::after { color: var(--bs-secondary, #6b7785); }

.dash-info-card .card-body.stats {
    position: relative;
    z-index: 1;
}

/* Single row: icon chip, label, value — left to right, vertically
   centered (this is the original Bootstrap row's own layout; we just add
   breathing room and enlarge the value). */
.dash-info-card .card-body.stats .row {
    align-items: center !important;
}

.dash-info-card .card-body.stats .ms-3 {
    margin-left: 1rem !important;
}

.dash-info-card .card-body.stats h4 {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
}

.dash-info-card .card-body.stats h6 a {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--brand-text-muted) !important;
}

.dash-info-card {
    border-radius: var(--brand-radius-lg);
}

.dash-info-card .theme-avtar {
    width: 44px;
    height: 44px;
    border-radius: var(--brand-radius);
    color: #fff !important;
    box-shadow: var(--brand-shadow-sm);
}

/* Solid accent-filled icon square (matches the reference mockup) instead
   of a light tint — still 100% driven by the theme's semantic colors. */
.dash-info-card .theme-avtar.bg-primary { background: var(--accent, #1f2430) !important; }
.dash-info-card .theme-avtar.bg-info { background: var(--bs-info, #3ec9d6) !important; }
.dash-info-card .theme-avtar.bg-warning { background: var(--bs-warning, #ffa21d) !important; }
.dash-info-card .theme-avtar.bg-danger { background: var(--bs-danger, #ff3a6e) !important; }
.dash-info-card .theme-avtar.bg-success { background: var(--bs-success, #6fd943) !important; }
.dash-info-card .theme-avtar.bg-secondary { background: var(--bs-secondary, #6b7785) !important; }

/* ---- Dashboard section heading (e.g. "Team Members" above employee cards) */
.dashboard-section-heading {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

.dashboard-section-heading h5 {
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-text-muted);
    margin: 0;
}

/* ---- Dashboard employee cards --------------------------------------------
   Restructured from a centered, stacked "avatar over name over role" card
   into a compact horizontal directory-style row (avatar left, name+role
   stacked right), styled after the reference mockup: accent-ringed circular
   photo, accent-colored name, a small decorative corner badge and a faint
   accent "blob" wash in the corner — every accent color below is
   `--bs-primary`, so it follows whichever theme color is selected. */
.employee-card-col .card {
    text-align: left !important;
    position: relative;
    overflow: hidden;
    border-radius: var(--brand-radius-lg);
}

.employee-card-col .card::before {
    content: "";
    position: absolute;
    left: -36px;
    bottom: -36px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent, #1f2430) 8%, transparent);
    pointer-events: none;
}

.employee-card-col .card::after {
    content: "";
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--accent, #1f2430) 14%, var(--brand-surface));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525b69' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}

.employee-card-col .card-body {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem !important;
    position: relative;
    z-index: 1;
}

.employee-card-col .avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--brand-surface-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.employee-card-col .avatar img {
    width: 56px !important;
    height: 56px !important;
    max-width: none;
    border-radius: 50% !important;
    object-fit: cover;
    display: block;
}

.employee-card-col .employee-info {
    min-width: 0;
}

.employee-card-col .employee-name {
    margin: 0 !important;
    font-size: 0.92rem !important;
    font-weight: 700;
    color: var(--accent, var(--brand-text)) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.employee-card-col .employee-designation {
    color: var(--brand-text);
    font-size: 0.78rem;
    font-weight: 500;
}

.employee-card-col .employee-department,
.employee-card-col .employee-code {
    color: var(--brand-text-muted);
    font-size: 0.72rem;
    margin-top: 0.15rem;
}

/* ---- Employee Profile grid (Staff > Employee Profile) --------------------
   Reuses the .employee-card-col component (accent ring avatar, decorative
   corner + blob, name/designation styling) but stacked and centered instead
   of the dashboard's compact horizontal row, since this page has more room
   and an extra "view profile" chip action per card. */
.employee-profile-card-header {
    background: transparent !important;
    padding: 0 !important;
    min-height: 0;
}

.employee-profile-card-col .card-body {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1.1rem 1.25rem !important;
}

.employee-profile-card-col .avatar {
    width: 76px;
    height: 76px;
}

.employee-profile-card-col .avatar img {
    width: 76px !important;
    height: 76px !important;
}

.employee-profile-card-col .employee-info {
    min-width: 0;
    width: 100%;
}

.employee-profile-card-col .employee-name,
.employee-profile-card-col .employee-designation,
.employee-profile-card-col .employee-department {
    white-space: normal;
    text-overflow: initial;
}

.employee-profile-card-col .chip {
    display: inline-flex;
}

/* ==========================================================================
   Table redesign — reference: employee list mockup (avatar+email cell,
   pill "chip" tags, dotted status pill, neutral circular action icons,
   pill search box and pagination).

   Split into two layers:
   1. GLOBAL, markup-free wins below — reach every table across the app
      immediately because they target patterns already reused everywhere
      (.action-btn icon buttons, Simple-DataTables' search/pagination
      markup). No Blade files needed for this part.
   2. New utility classes (.table-avatar-cell, .chip, .badge-dot) that
      opt individual tables into the fuller mockup look (avatar+email
      combo cell, chip-style tags, dotted status pill) — wired up on the
      Employee list as the reference implementation. Rolling these same
      utilities onto other tables is a per-page markup change, not a
      global one, since each table's columns/data differ.
   ========================================================================== */

/* ---- 1. Action icon buttons (.action-btn) --------------------------------
   Reused across nearly every list page for row actions (edit/delete/
   login-enable/etc). Was solid colored squares (bg-success/warning/danger/
   info + white icon) — restyled to neutral bordered circles with a
   semantic-colored icon, matching the mockup's clean icon-button look,
   app-wide, with zero markup changes. */
.action-btn:has(> .btn) {
    display: inline-flex;
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    /* was Bootstrap's `me-2` utility (8px) — tightened per feedback; the
       !important is needed to beat that utility class. */
    margin-right: 3px !important;
}

.action-btn .btn {
    /* The markup carries a leftover `mx-3` utility (1rem/16px margin each
       side) from the old solid-square design — that's what was making
       the wrapper measure 66px for a 34px button. Reset it here. */
    margin: 0 !important;
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--brand-surface) !important;
    border: 1px solid var(--brand-border-strong) !important;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.action-btn .btn:hover {
    background: var(--brand-surface-muted) !important;
    border-color: var(--brand-text-subtle) !important;
}

.action-btn .btn i,
.action-btn .btn .text-white {
    color: var(--brand-text-muted) !important;
    font-size: 0.95rem;
}

/* Explicit per-variant background/border, at 3-class specificity — one
   button (the payslip "Click to Paid" bg-primary one) was rendering as a
   solid accent-filled circle instead of neutral-bordered like its
   siblings, i.e. the generic 2-class `.action-btn .btn` rule above was
   somehow losing to Bootstrap's own `.bg-primary` utility for that one
   variant. This removes any ambiguity by matching/beating it directly,
   per color, rather than relying on the generic rule alone. */
.action-btn .btn.bg-success,
.action-btn .btn.bg-warning,
.action-btn .btn.bg-danger,
.action-btn .btn.bg-info,
.action-btn .btn.bg-primary {
    background: var(--brand-surface) !important;
    border: 1px solid var(--brand-border-strong) !important;
}

.action-btn .btn.bg-success i,
.action-btn .btn.bg-success .text-white { color: var(--bs-success, #2e7d32) !important; }
.action-btn .btn.bg-warning i,
.action-btn .btn.bg-warning .text-white { color: var(--bs-warning, #b8860b) !important; }
.action-btn .btn.bg-danger i,
.action-btn .btn.bg-danger .text-white { color: var(--bs-danger, #c0392b) !important; }
.action-btn .btn.bg-info i,
.action-btn .btn.bg-info .text-white { color: var(--bs-info, #1f6f8b) !important; }
.action-btn .btn.bg-primary i,
.action-btn .btn.bg-primary .text-white { color: var(--accent, #1f2430) !important; }

/* ---- 1b. Simple-DataTables search box + pagination ------------------------
   Every list page rendered through Simple-DataTables (the vast majority)
   gets this automatically — no per-page markup needed.

   NOTE: an earlier version of this rule tried to move the "entries per
   page" dropdown into the footer using `display: contents` on
   `.dataTable-top`/`.dataTable-bottom` to reach across DOM containers.
   That broke containment (content overflowing the card) on every table
   in the app, not just this one — reverted. The library actually has a
   built-in, supported way to control this: an `options.layout` object
   passed to `new simpleDatatables.DataTable(el, { layout: { top: "...",
   bottom: "..." } })`, using `{search}`, `{select}`, `{info}`, `{pager}`
   placeholders (default is `top: "{select}{search}", bottom:
   "{info}{pager}"`). Moving the dropdown to the footer is done per-page
   by passing `layout: { top: "{search}", bottom: "{info}{pager}{select}" }`
   to that page's own DataTable init — see employee/index.blade.php for
   the reference implementation. This CSS only styles whichever pieces
   end up in each container, wherever the JS layout option puts them. */
.dataTable-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Now that it's the only thing left in the table header row (entries-per-
   page moved to the footer), a fixed 280px search box read as too small.
   Scaling it as a percentage of the header row (~30%) keeps it
   proportionate to the table itself rather than a fixed pixel value that
   would look cramped on a wide table and oversized on a narrow one — with
   min/max bounds so it never gets absurdly narrow or wide, and drops to
   full width on small screens where there's no room to share the row. */
.dataTable-search {
    flex: 1 1 30%;
    min-width: 220px;
    max-width: 420px;
}

@media (max-width: 575.98px) {
    .dataTable-search {
        flex-basis: 100%;
        max-width: none;
    }
}

.dataTable-input {
    border-radius: 50rem !important;
    padding: 0.5rem 1rem;
}

.dataTable-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-height: 0;
}

.dataTable-pagination ul {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.dataTable-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border-radius: 50rem !important;
    border: 1px solid transparent;
    color: var(--brand-text-muted);
    font-size: 0.76rem;
}

.dataTable-pagination li.active a,
.dataTable-pagination li.datatable-active a {
    background: var(--accent, var(--brand-text)) !important;
    color: #fff !important;
}

.dataTable-info {
    color: var(--brand-text-muted);
    font-size: 0.76rem;
}

/* Pushed to the true right edge with margin-left:auto — more reliable
   than justify-content:space-between, which left a gap here when the
   pagination nav in between was empty (a single page of results). */
.dataTable-dropdown {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    color: var(--brand-text-muted);
    margin-left: auto;
}

.dataTable-selector {
    border-radius: var(--brand-radius-sm);
    padding: 0.2rem 0.4rem;
    font-size: 0.76rem;
    height: auto;
}

/* ---- 2. Avatar + name/email combo cell ------------------------------------
   Opt-in via .table-avatar-cell — wired up on the Employee list. */
.table-avatar-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.table-avatar-cell .table-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent, var(--brand-text));
    background: color-mix(in srgb, var(--accent, var(--brand-text)) 14%, var(--brand-surface));
    overflow: hidden;
}

.table-avatar-cell .table-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.table-avatar-cell .table-avatar-name {
    font-weight: 600;
    color: var(--brand-text);
    white-space: nowrap;
}

.table-avatar-cell .table-avatar-sub {
    color: var(--brand-text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

/* ---- 2b. Chip tag (light pill for a compact value like an ID or branch) -- */
.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 50rem;
    background: var(--brand-surface-muted);
    color: var(--brand-text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

a.chip {
    text-decoration: none;
}

a.chip:hover {
    background: var(--brand-border);
    color: var(--brand-text);
}

/* Accent-tinted chip variant, for a highlighted numeric value (e.g. a
   timesheet row's total hours) rather than a plain metadata tag. */
.chip-total {
    background: color-mix(in srgb, var(--accent, var(--brand-text)) 12%, var(--brand-surface));
    color: var(--accent, var(--brand-text));
    font-weight: 700;
}

/* ---- 2c. Status pill with a leading dot ----------------------------------*/
.badge-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.badge-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ==========================================================================
   Accent guarantee for stock Bootstrap "primary" classes
   The app's own custom-color.css already re-points `.btn-primary` etc at
   `--color-customColor` when custom-color mode is active — but given how
   often the static `--bs-primary` (#51459d) has leaked through elsewhere
   in this rebrand, this is a blanket, unconditional safety net so these
   very commonly used classes reliably follow `--accent` (which itself
   already resolves correctly in both custom-color and preset-theme modes
   — see the --accent definition near the top of this file), no matter
   what. Every new component built from here on should use `--accent`
   directly rather than depending on `.btn-primary` at all. */
.btn-primary {
    --bs-btn-bg: var(--accent) !important;
    --bs-btn-border-color: var(--accent) !important;
    --bs-btn-hover-bg: var(--accent) !important;
    --bs-btn-hover-border-color: var(--accent) !important;
    --bs-btn-active-bg: var(--accent) !important;
    --bs-btn-active-border-color: var(--accent) !important;
    --bs-btn-disabled-bg: var(--accent) !important;
    --bs-btn-disabled-border-color: var(--accent) !important;
}

.btn-outline-primary {
    --bs-btn-color: var(--accent) !important;
    --bs-btn-border-color: var(--accent) !important;
    --bs-btn-hover-bg: var(--accent) !important;
    --bs-btn-hover-border-color: var(--accent) !important;
    --bs-btn-active-bg: var(--accent) !important;
    --bs-btn-active-border-color: var(--accent) !important;
}

.text-primary {
    color: var(--accent) !important;
}

.border-primary {
    border-color: var(--accent) !important;
}

/* ==========================================================================
   Reusable components: action hero panel + quick-action cards
   Built for the Payslip page's "Generate Payslip" panel and "Bulk
   Export/Bulk Payment" row, but deliberately generic (no payslip-specific
   naming) so the same classes can be reused on other pages with a
   similar "generate/filter + bulk action" header pattern, without
   duplicating this CSS. Every color reference is `--accent` or a
   Bootstrap semantic color (`--bs-success` etc.) via `color-mix()` — never
   a fixed hex — so it always follows the selected theme color.
   ========================================================================== */

/* ---- Action hero: icon + title/subtitle + inline controls + CTA -------- */
.action-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--brand-surface)) 0%, var(--brand-surface) 65%);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.action-hero::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    pointer-events: none;
}

.action-hero-main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.action-hero-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--brand-radius-lg);
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: var(--brand-shadow);
}

.action-hero-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.action-hero-subtitle {
    margin: 0;
    font-size: 0.8rem;
    color: var(--brand-text-muted);
}

.action-hero-controls {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    flex: 1 1 auto;
}

/* Filter fields on their own row, evenly distributed and wrapping as a
   group — was previously mixed in the same flex row as the action
   buttons, which wrapped inconsistently between pages with different
   field counts (e.g. the timesheet grid's 5 fields vs the list view's 4).
   `flex: 1 1 200px` lets each field grow/shrink together rather than the
   row's wrap point depending on how many buttons happened to fit after
   them. */
.action-hero-fields {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.action-hero-fields .action-hero-field {
    flex: 1 1 200px;
}

/* Toolbar row below the fields — small utility icon toggles grouped on
   the left, the one or two prominent quick-action-cards grouped on the
   right (`margin-left: auto` on .quick-action-row), so the small buttons
   never sit between the cards and split them apart. Same structure on
   every "select period & filter" panel now, regardless of field count. */
.action-hero-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.action-hero-toolbar-utility {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.action-hero-toolbar .quick-action-row {
    margin-left: auto;
}

.action-hero-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border-strong);
    border-radius: var(--brand-radius);
    padding: 0.5rem 0.9rem;
}

.action-hero-field > i {
    color: var(--accent);
    font-size: 1.1rem;
}

.action-hero-field-label {
    display: block;
    margin: 0 0 0.1rem;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--brand-text-subtle);
}

/* Was scoped to `select.action-hero-select` only — native `<input
   type="month">`/`type="date">` fields (used on the Timesheet grid page)
   have the same class but aren't a <select>, so they fell back to the
   generic bordered .form-control box model instead of this compact one,
   making that one field visibly bigger/misaligned next to its siblings.
   Broadened to match both, and normalized the native picker's own height
   and calendar-icon sizing so it lines up exactly. */
.action-hero-select.form-control {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 600;
    font-size: 0.85rem;
    min-width: 100px;
    height: 1.3rem;
    line-height: 1.3rem;
}

input.action-hero-select.form-control::-webkit-calendar-picker-indicator {
    width: 14px;
    height: 14px;
    padding: 0;
    margin-left: 0.4rem;
    opacity: 0.6;
}

.action-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--brand-radius);
    padding: 0.65rem 1.25rem;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    box-shadow: var(--brand-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.action-hero-cta:hover,
.action-hero-cta:focus {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--brand-shadow-lg);
}

/* ---- Quick action cards (e.g. Bulk Export / Bulk Payment) --------------- */
.quick-action-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.quick-action-card {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 200px;
    border: 1px solid transparent;
    border-radius: var(--brand-radius-lg);
    padding: 0.6rem 1rem;
    background: var(--brand-surface-muted);
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.quick-action-card:hover {
    filter: brightness(0.97);
    transform: translateY(-1px);
}

.quick-action-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--brand-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.quick-action-title {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--brand-text);
    text-align: left;
}

.quick-action-subtitle {
    display: block;
    font-size: 0.7rem;
    color: var(--brand-text-muted);
    text-align: left;
}

.quick-action-chevron {
    margin-left: auto;
    color: var(--brand-text-subtle);
}

.quick-action-card--accent {
    background: color-mix(in srgb, var(--accent) 10%, var(--brand-surface));
}

.quick-action-card--accent .quick-action-icon {
    background: var(--accent);
}

.quick-action-card--success {
    background: color-mix(in srgb, var(--bs-success, #2e7d32) 12%, var(--brand-surface));
}

.quick-action-card--success .quick-action-icon {
    background: var(--bs-success, #2e7d32);
}

/* ==========================================================================
   FullCalendar theming (Leave Calendar, and any other page using it)
   FullCalendar renders its own DOM (`themeSystem: 'bootstrap'`, so its
   buttons already extend Bootstrap's .btn/.btn-primary and inherit the
   --accent fix from those rules automatically) — this section only adds
   the extra polish Bootstrap alone doesn't cover: pill-shaped button
   group, a cleaner toolbar title, today/selection highlight, and event
   pill styling, all via --accent/--brand-* tokens.
   ========================================================================== */
.fc .fc-toolbar-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-text);
}

.fc .fc-button-group .fc-button {
    border-radius: var(--brand-radius-sm) !important;
    font-size: 0.78rem;
    text-transform: capitalize;
    box-shadow: none !important;
}

.fc .fc-today-button {
    border-radius: var(--brand-radius-sm) !important;
    font-size: 0.78rem;
    text-transform: capitalize;
}

.fc .fc-daygrid-day.fc-day-today {
    background: color-mix(in srgb, var(--accent, var(--brand-text)) 8%, transparent);
}

.fc .fc-daygrid-day-number {
    color: var(--brand-text-muted);
    font-size: 0.78rem;
}

.fc-theme-standard .fc-scrollgrid,
.fc-theme-standard td,
.fc-theme-standard th {
    border-color: var(--brand-border);
}

.fc .fc-event {
    border-radius: var(--brand-radius-sm);
    border: none;
    padding: 1px 4px;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Light-tinted pill per leave type instead of a solid bar — the
   `className` on each event is a Bootstrap semantic color (bg-primary,
   bg-info, etc, assigned per leave type in LeaveController::get_leave_data)
   and FullCalendar also sets an inline `color: #fff` from the event's
   `textColor` — `!important` is needed here to win over that inline style. */
.fc .fc-event.bg-primary { background: color-mix(in srgb, var(--accent, #1f2430) 16%, var(--brand-surface)) !important; color: var(--accent, #1f2430) !important; }
.fc .fc-event.bg-info { background: color-mix(in srgb, var(--bs-info, #3ec9d6) 20%, var(--brand-surface)) !important; color: var(--bs-info, #3ec9d6) !important; }
.fc .fc-event.bg-warning { background: color-mix(in srgb, var(--bs-warning, #ffa21d) 20%, var(--brand-surface)) !important; color: var(--bs-warning, #ffa21d) !important; }
.fc .fc-event.bg-danger { background: color-mix(in srgb, var(--bs-danger, #ff3a6e) 20%, var(--brand-surface)) !important; color: var(--bs-danger, #ff3a6e) !important; }
.fc .fc-event.bg-success { background: color-mix(in srgb, var(--bs-success, #2e7d32) 20%, var(--brand-surface)) !important; color: var(--bs-success, #2e7d32) !important; }
.fc .fc-event.bg-secondary { background: color-mix(in srgb, var(--brand-text-subtle) 20%, var(--brand-surface)) !important; color: var(--brand-text-muted) !important; }