/* ==================================================================
   DASHBOARD CORE STYLESHEET
   System: Automated Employment Application and Applicant Management
           System for PESO Balayan
   File:   public/assets/css/dashboard.css

   Scope: Styles app.php, header.php, navbar.php, sidebar.php, footer.php
          and shared dashboard primitives (cards, alerts, breadcrumbs).
          Page-specific styles belong in their own CSS file, injected
          via $extraCss — do NOT add page-specific rules here.

   Design System: Poppins typeface, Blue Gradient theme, white cards,
   soft shadows. All colors are defined as CSS variables — never
   hardcode a hex value directly in a selector.
   ================================================================== */

/* ------------------------------------------------------------------
   1. DESIGN TOKENS — LIGHT THEME (default)
   ------------------------------------------------------------------ */
:root {
    /* Brand gradient */
    --peso-primary-start:   #1a56db;
    --peso-primary-end:     #ce1126;
    --peso-primary:         #1a56db;
    --peso-primary-dark:    #1442ad;
    --peso-primary-light:   #e8f0fe;

    /* Accent / status colors */
    --peso-success:         #16a34a;
    --peso-warning:         #d97706;
    --peso-danger:          #dc2626;
    --peso-info:            #0891b2;

    /* Surfaces */
    --peso-bg:              #f3f5f9;
    --peso-surface:         #ffffff;
    --peso-surface-alt:     #f8fafc;
    --peso-border:          #e5e9f0;

    /* Text */
    --peso-text-primary:    #1f2937;
    --peso-text-secondary:  #6b7280;
    --peso-text-muted:      #9ca3af;
    --peso-text-on-primary: #ffffff;

    /* Shadows */
    --peso-shadow-sm:  0 1px 2px rgba(16, 24, 40, 0.06);
    --peso-shadow-md:  0 4px 12px rgba(16, 24, 40, 0.08);
    --peso-shadow-lg:  0 12px 28px rgba(16, 24, 40, 0.12);

    /* Geometry */
    --peso-radius-sm: 8px;
    --peso-radius-md: 12px;
    --peso-radius-lg: 18px;

    /* Layout */
    --peso-sidebar-width:          292px;
    --peso-sidebar-width-collapsed: 84px;
    --peso-navbar-height:          72px;
    --peso-footer-height:          52px;

    /* Navbar top strip
       Gradient reuses the existing brand tokens (--peso-primary-start /
       --peso-primary-end — already used by .app-sidebar and the
       welcome banner) with a white midpoint, per request: blue / white
       / red. Left content (status dot + label) sits near the left
       edge (blue) and right content (clock) sits near the right edge
       (red) — the white midpoint falls in the empty space between
       them, so white text stays legible at both ends. */
    --peso-topstrip-bg:            linear-gradient(90deg, var(--peso-primary-start) 100%, #5f89e6 50%, var(--peso-primary-end) 90%);
    --peso-topstrip-text:          #ffffff;

    /* Motion */
    --peso-transition-fast: 150ms ease;
    --peso-transition-base: 300ms ease;
}

/* ------------------------------------------------------------------
   2. DESIGN TOKENS — DARK THEME OVERRIDES
   ------------------------------------------------------------------ */
[data-theme="dark"] {
    --peso-bg:              #0f1623;
    --peso-surface:         #161f2e;
    --peso-surface-alt:     #1c2638;
    --peso-border:          #2a3548;

    --peso-text-primary:    #e7ebf2;
    --peso-text-secondary:  #a3acbd;
    --peso-text-muted:      #6b7588;
    --peso-text-on-primary: #ffffff;

    --peso-primary-light:   #1b2a4a;

    --peso-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
    --peso-shadow-md:  0 4px 14px rgba(0, 0, 0, 0.45);
    --peso-shadow-lg:  0 14px 30px rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------------
   3. BASE / RESET
   ------------------------------------------------------------------ */
.app-body {
    margin: 0;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    background-color: var(--peso-bg);
    color: var(--peso-text-primary);
    transition: background-color var(--peso-transition-base), color var(--peso-transition-base);
}

.app-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* ------------------------------------------------------------------
   4. SIDEBAR
   ------------------------------------------------------------------ */
.app-sidebar {
    width: var(--peso-sidebar-width);
    flex-shrink: 0;
    background: var(--peso-primary-dark);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--peso-shadow-md);
    color: var(--peso-text-on-primary);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1040;
    transition: transform var(--peso-transition-base), width var(--peso-transition-base);
    will-change: width;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Hide the sidebar's native scrollbar (collapsed + expanded). Scrolling
   itself still works via wheel/touch/keyboard so long menus stay reachable. */
.app-sidebar {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy Edge/IE */
}

.app-sidebar::-webkit-scrollbar {
    display: none;                  /* Chrome, Edge, Safari */
}

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    transition: padding var(--peso-transition-base);
}

.sidebar-brand-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--peso-text-on-primary);
    transition: gap var(--peso-transition-base);
}

.sidebar-brand-logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    object-fit: cover;
    flex-shrink: 0;
}

.sidebar-brand-text {
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.2px;
    overflow: hidden;
    white-space: nowrap;
    max-width: 160px;
    opacity: 1;
    will-change: opacity;
    transition: opacity var(--peso-transition-fast), max-width var(--peso-transition-base);
}

.sidebar-close-btn {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: var(--peso-text-on-primary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 16px 24px;
}

.sidebar-profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.15);
}

.sidebar-profile-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--peso-text-on-primary);
}

.sidebar-profile-name {
    margin: 10px 0 2px;
    font-weight: 600;
    font-size: 0.95rem;
    max-height: 24px;
    max-width: calc(var(--peso-sidebar-width) - 32px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    will-change: opacity;
    transition: opacity var(--peso-transition-fast), max-height var(--peso-transition-base), margin var(--peso-transition-base);
}

.sidebar-profile-role {
    font-size: 0.75rem;
    opacity: 0.85;
    background: rgba(255, 255, 255, 0.15);
    padding: 2px 10px;
    border-radius: 999px;
    max-height: 20px;
    overflow: hidden;
    will-change: opacity;
    transition: opacity var(--peso-transition-fast), max-height var(--peso-transition-base), padding var(--peso-transition-base);
}

.sidebar-nav {
    flex: 1;
    padding: 4px 14px 24px;
}

.sidebar-nav-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
    padding: 8px 14px 8px;
    max-height: 28px;
    overflow: hidden;
    will-change: opacity;
    transition: opacity var(--peso-transition-fast), max-height var(--peso-transition-base), padding var(--peso-transition-base);
}

.sidebar-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.14);
    margin: 8px 10px;
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    min-height: 44px;
    margin-bottom: 2px;
    border-radius: var(--peso-radius-sm);
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color var(--peso-transition-fast), color var(--peso-transition-fast),
                padding var(--peso-transition-base), gap var(--peso-transition-base);
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

/* Fixed, never-changing box — this is what keeps the icon visually
   anchored in place while the sidebar collapses/expands around it. */
.sidebar-nav-link i {
    font-size: 1.05rem;
    width: 20px;
    flex-shrink: 0;
    text-align: center;
}

.sidebar-nav-link span {
    overflow: hidden;
    white-space: nowrap;
    max-width: calc(var(--peso-sidebar-width) - 88px);
    opacity: 1;
    will-change: opacity;
    transition: opacity var(--peso-transition-fast), max-width var(--peso-transition-base);
}

.sidebar-nav-link:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
}

.sidebar-nav-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: -2px;
}

/* Active item: stronger fill + a solid white indicator bar on the
   leading edge (inset shadow, so it adds no layout width). */
.sidebar-nav-link.is-active {
    background: rgba(255, 255, 255, 0.20);
    color: #ffffff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #ffffff;
}

.sidebar-nav-link-danger {
    color: rgba(255, 220, 220, 0.9);
}

.sidebar-nav-link-danger:hover {
    background: rgba(220, 38, 38, 0.25);
    color: #ffffff;
}

.sidebar-logout-form {
    margin: 0;
}

/* ------------------------------------------------------------------
   5. SIDEBAR OVERLAY (mobile)
   ------------------------------------------------------------------ */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 22, 35, 0.55);
    z-index: 1030;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--peso-transition-base);
}

.sidebar-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* ------------------------------------------------------------------
   6. MAIN PANEL
   ------------------------------------------------------------------ */
.main-panel {
    flex: 1;
    margin-left: var(--peso-sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left var(--peso-transition-base);
}

/* ------------------------------------------------------------------
   6B. DESKTOP SIDEBAR COLLAPSE — ICON-ONLY MODE (Batch A.2)
   Supersedes the Batch A.1 "full-hide" version of this block (which
   used transform: translateX(-100%)). Reuses --peso-sidebar-width-
   collapsed, a token already defined in :root (line ~58) but unused
   until now. New, isolated classes — independent from the mobile
   ".is-open" drawer state (scoped separately below at
   max-width: 991.98px) and from ".sidebar-overlay" (never toggled on
   desktop).
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
    /* Each rule below is matched by TWO selectors:
       - .is-desktop-collapsed  → toggled by dashboard.js on user click,
         and re-applied on DOMContentLoaded from localStorage.
       - html[data-sidebar-collapsed="true"] .xxx → set synchronously by
         the pre-paint script in header.php, before .is-desktop-collapsed
         exists, so the collapsed rail is correct on arrival. Both read
         the same 'pesoSidebarCollapsed' localStorage value, so this is
         one declaration block driven by one source of truth — not two
         parallel rulesets that could drift apart. */

    .app-sidebar.is-desktop-collapsed,
    html[data-sidebar-collapsed="true"] .app-sidebar {
        width: var(--peso-sidebar-width-collapsed);
    }

    .main-panel.is-desktop-collapsed,
    html[data-sidebar-collapsed="true"] .main-panel {
        margin-left: var(--peso-sidebar-width-collapsed);
    }

    /* Batch A.4: YouTube-style collapse — the branding block and the
       profile block each collapse/fade as ONE unit (logo+text together,
       avatar+name+role together), rather than fading their children
       individually. Uses opacity/max-height instead of display:none so
       the properties remain animatable — no instant snap. Only nav
       labels/icons are handled separately below; navigation is
       untouched by this change. */
    .app-sidebar.is-desktop-collapsed .sidebar-brand,
    html[data-sidebar-collapsed="true"] .sidebar-brand {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
    }

    .app-sidebar.is-desktop-collapsed .sidebar-profile,
    html[data-sidebar-collapsed="true"] .sidebar-profile {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
    }

    .app-sidebar.is-desktop-collapsed .sidebar-nav-label,
    html[data-sidebar-collapsed="true"] .sidebar-nav-label {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .app-sidebar.is-desktop-collapsed .sidebar-nav-link span,
    html[data-sidebar-collapsed="true"] .sidebar-nav-link span {
        opacity: 0;
        max-width: 0;
    }

    /* Exception to the rule immediately above: the unread-notification
       dot must stay visible in the icon-only rail (otherwise the
       Notifications icon becomes indistinguishable from every other
       menu icon once its label is hidden). Pinned to the icon's
       corner using position:absolute — safe here because
       .sidebar-nav-link already gains position:relative in this same
       collapsed state (see the tooltip rule a few lines below), so
       this doesn't introduce a new positioning context. */
    .app-sidebar.is-desktop-collapsed .sidebar-nav-badge,
    html[data-sidebar-collapsed="true"] .sidebar-nav-badge {
        opacity: 1;
        max-width: none;
        position: absolute;
        top: 8px;
        right: 10px;
        margin-left: 0;
    }

    /* Center nav icons in the narrow rail using padding, not
       justify-content — justify-content isn't animatable, so changing
       it caused the instant "snap" described in the Batch A.2 bug
       report. The icon itself (.sidebar-nav-link i) keeps a fixed width
       at all times (see base rule) so it stays anchored while
       padding/gap animate around it. (Brand-block centering rules
       removed in Batch A.4 — .sidebar-brand is now hidden entirely
       while collapsed, so its internal padding/gap has no visible
       effect and is no longer needed.) */
    .app-sidebar.is-desktop-collapsed .sidebar-nav-link,
    html[data-sidebar-collapsed="true"] .sidebar-nav-link {
        padding-left: 18px;
        padding-right: 18px;
        gap: 0;
    }

    /* Hover tooltip for collapsed nav icons (mirrors .peso-row-actions-menu
       z-index tier so it always floats above page content). Populated via
       the data-tooltip attribute added to each sidebar-nav-link. */
    .app-sidebar.is-desktop-collapsed .sidebar-nav-link,
    html[data-sidebar-collapsed="true"] .sidebar-nav-link {
        position: relative;
    }

    /* Pseudo-element now always exists (hidden) instead of only appearing
       on :hover, so its entrance can fade/slide with a short delay —
       hover-out has no delay, so it dismisses immediately. */
    .app-sidebar.is-desktop-collapsed .sidebar-nav-link[data-tooltip]::after,
    html[data-sidebar-collapsed="true"] .sidebar-nav-link[data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%) translateX(-4px);
        margin-left: 10px;
        background: var(--peso-text-primary);
        color: var(--peso-surface);
        padding: 6px 10px;
        border-radius: var(--peso-radius-sm);
        font-size: 0.8rem;
        font-weight: 500;
        white-space: nowrap;
        box-shadow: var(--peso-shadow-md);
        z-index: 1080;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--peso-transition-fast), transform var(--peso-transition-fast), visibility var(--peso-transition-fast);
    }

    .app-sidebar.is-desktop-collapsed .sidebar-nav-link[data-tooltip]:hover::after,
    .app-sidebar.is-desktop-collapsed .sidebar-nav-link[data-tooltip]:focus-visible::after,
    html[data-sidebar-collapsed="true"] .sidebar-nav-link[data-tooltip]:hover::after,
    html[data-sidebar-collapsed="true"] .sidebar-nav-link[data-tooltip]:focus-visible::after {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(0);
        transition-delay: 120ms;
    }
}

/* ------------------------------------------------------------------
   6C. SUPPRESS TRANSITIONS DURING INITIAL PAGE LOAD (Batch A.3)
   Set by the pre-paint script in header.php on every load, removed by
   dashboard.js on DOMContentLoaded once the first paint has committed.
   Ensures the collapsed state set via [data-sidebar-collapsed] above
   appears instantly with no animation, and animation only ever plays
   when the user actually presses the hamburger button afterwards.
   ------------------------------------------------------------------ */
html.peso-no-transitions .app-sidebar,
html.peso-no-transitions .main-panel,
html.peso-no-transitions .sidebar-brand,
html.peso-no-transitions .sidebar-profile,
html.peso-no-transitions .sidebar-nav-label,
html.peso-no-transitions .sidebar-nav-link,
html.peso-no-transitions .sidebar-nav-link span {
    transition: none;
}

/* ------------------------------------------------------------------
   7. NAVBAR
   ------------------------------------------------------------------ */
.app-navbar {
    background: var(--peso-surface);
    border-bottom: 1px solid var(--peso-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: var(--peso-shadow-sm);
}

/* ------------------------------------------------------------------
   7A. NAVBAR — TOP STATUS STRIP (new — two-tier navbar redesign)
   Dark strip, independent of light/dark theme (same pattern already
   used by .app-sidebar, which also keeps its own solid brand color
   regardless of [data-theme]). New, namespaced tokens only — no
   existing variable is renamed or removed.
   ------------------------------------------------------------------ */
.navbar-top-strip {
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: var(--peso-topstrip-bg);
    color: var(--peso-topstrip-text);
}

.navbar-top-strip-left,
.navbar-top-strip-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--peso-success);
    flex-shrink: 0;
    animation: peso-status-pulse 2s ease-in-out infinite;
}

@keyframes peso-status-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.75; }
}

.navbar-top-strip-label,
.navbar-live-clock {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--peso-topstrip-text);
    opacity: 0.85;
    /* Blue→white→red gradient means text can sit over the lighter
       midpoint on narrow viewports where left/right content is closer
       together — this keeps white text legible across the whole strip
       regardless of exact position. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------------------------
   7B. NAVBAR — MAIN ROW
   Holds the pre-existing .navbar-left / .navbar-right content.
   Inherits the height and horizontal padding the single-row
   .app-navbar used to have, so nothing inside .navbar-left/.navbar-right
   needs to change.
   ------------------------------------------------------------------ */
.navbar-main-row {
    min-height: var(--peso-navbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

.navbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.navbar-icon-btn {
    background: var(--peso-surface-alt);
    border: 1px solid var(--peso-border);
    color: var(--peso-text-secondary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    position: relative;
    cursor: pointer;
    transition: background-color var(--peso-transition-fast), color var(--peso-transition-fast),
                transform var(--peso-transition-fast);
}

.navbar-icon-btn:hover {
    background: var(--peso-primary-light);
    color: var(--peso-primary);
    transform: translateY(-1px);
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar-brand-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--peso-surface-alt);
    flex-shrink: 0;
}

.navbar-title-group {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.navbar-system-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--peso-text-primary);
}

.navbar-page-title {
    font-size: 0.78rem;
    color: var(--peso-text-secondary);
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--peso-danger);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--peso-surface);
}

/* Sidebar "Notifications" menu-item unread dot. Deliberately NOT a
   reuse of .notification-badge above: .sidebar-nav-link is a flex row,
   not a position:relative circle button, so an absolutely-positioned
   badge would escape to the wrong ancestor. margin-left: auto pushes
   this dot to the row's trailing edge within normal flex flow instead.
   NOTE: in the collapsed icon-only rail, this span would otherwise be
   hidden by the generic ".sidebar-nav-link span" collapse rule (~line
   410) — see the scoped override placed right after that rule, which
   keeps this dot (and only this dot) visible when collapsed. */
.sidebar-nav-badge {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background: var(--peso-danger);
    margin-left: auto;
    flex-shrink: 0;
}

.navbar-user-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--peso-surface-alt);
    border: 1px solid var(--peso-border);
    border-radius: 999px;
    padding: 6px 12px 6px 14px;
    cursor: pointer;
    color: var(--peso-text-primary);
    min-width: 0;
}

/* Wrapper for the greeting label + name stack (new — two-tier navbar
   redesign). Bootstrap's d-none/d-md-flex utility classes moved here
   from .navbar-user-greeting so the existing class/selector below is
   untouched and still styles the name line exactly as before. */
.navbar-user-text {
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
}

.navbar-greeting-label {
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--peso-text-muted);
}

.navbar-user-greeting {
    font-size: 0.85rem;
    font-weight: 500;

    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.navbar-user-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--peso-primary);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
}

.navbar-user-chevron {
    font-size: 0.7rem;
    color: var(--peso-text-muted);
}

.profile-summary-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-summary-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--peso-primary);
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 600;
}

/* ------------------------------------------------------------------
   8. DROPDOWNS (notifications + user menu)
   ------------------------------------------------------------------ */
.navbar-dropdown {
    position: relative;
}

.navbar-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 300px;
    background: var(--peso-surface);
    border: 1px solid var(--peso-border);
    border-radius: var(--peso-radius-md);
    box-shadow: var(--peso-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--peso-transition-fast), transform var(--peso-transition-fast), visibility var(--peso-transition-fast);
    z-index: 1050;
    overflow: hidden;
}

.navbar-dropdown-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--peso-border);
}

.dropdown-menu-subtext {
    font-size: 0.72rem;
    color: var(--peso-text-secondary);
    font-weight: 400;
}

.dropdown-menu-body {
    max-height: 320px;
    overflow-y: auto;
}

.dropdown-empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--peso-text-muted);
}

.dropdown-empty-state i {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 8px;
}

.notification-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--peso-text-primary);
    border-bottom: 1px solid var(--peso-border);
}

.notification-item:hover {
    background: var(--peso-surface-alt);
}

.notification-item.is-unread {
    background: var(--peso-primary-light);
}

.notification-item-title {
    font-size: 0.85rem;
    font-weight: 500;
}

.notification-item-time {
    font-size: 0.72rem;
    color: var(--peso-text-muted);
}

.dropdown-menu-footer {
    display: block;
    text-align: center;
    padding: 12px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--peso-primary);
    text-decoration: none;
    border-top: 1px solid var(--peso-border);
}

.user-menu-header {
    padding: 14px 16px;
}

.user-menu-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    max-width: calc(300px - 32px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.user-menu-role {
    display: block;
    font-size: 0.75rem;
    color: var(--peso-text-secondary);
}

.user-menu-divider {
    height: 1px;
    background: var(--peso-border);
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    font-size: 0.86rem;
    color: var(--peso-text-primary);
    text-decoration: none;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.user-menu-item:hover {
    background: var(--peso-surface-alt);
}

.user-menu-item-danger {
    color: var(--peso-danger);
}

.user-menu-logout-form {
    margin: 0;
}

/* ------------------------------------------------------------------
   9. PAGE CONTENT / BREADCRUMB / FLASH ALERTS
   ------------------------------------------------------------------ */
.page-content {
    flex: 1;
    padding: 24px;
}

.breadcrumb-bar {
    margin-bottom: 16px;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    font-size: 0.82rem;
}

.breadcrumb-item a {
    color: var(--peso-text-secondary);
    text-decoration: none;
}

.breadcrumb-item.active {
    color: var(--peso-text-primary);
    font-weight: 500;
}

.flash-alert {
    border: none;
    border-radius: var(--peso-radius-md);
    box-shadow: var(--peso-shadow-sm);
    margin-bottom: 18px;
}

/* ------------------------------------------------------------------
   10. SHARED CARD PRIMITIVE (for dashboard widgets/stat cards)
   ------------------------------------------------------------------ */
.peso-card {
    background: var(--peso-surface);
    border: 1px solid var(--peso-border);
    border-radius: var(--peso-radius-md);
    box-shadow: var(--peso-shadow-md);
    padding: 20px;
}

.peso-card-gradient {
    background: linear-gradient(120deg, var(--peso-primary-start) 0%, #5f89e6 42%, var(--peso-primary-end) 130%);
    color: var(--peso-text-on-primary);
    border: none;
}

/* Applicants stat card: solid brand blue instead of gradient.
   Scoped modifier — .peso-card-gradient is left untouched so text color,
   border reset and the translucent icon tile (.peso-card-gradient .fs-3)
   keep applying. Reuses the sidebar's existing token. */
.peso-card-gradient.peso-card-solid {
    background: var(--peso-primary-dark);
}

/* ------------------------------------------------------------------
   11. FOOTER
   ------------------------------------------------------------------ */
.app-footer {
    height: var(--peso-footer-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border-top: 1px solid var(--peso-border);
    background: var(--peso-surface);
    font-size: 0.78rem;
    color: var(--peso-text-secondary);
}

/* ------------------------------------------------------------------
   12. RESPONSIVE BEHAVIOR
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .app-sidebar {
        transform: translateX(-100%);
        box-shadow: none; /* no edge bleed while the drawer is closed */
    }

    .app-sidebar.is-open {
        transform: translateX(0);
        box-shadow: var(--peso-shadow-lg);
    }

    .main-panel {
        margin-left: 0;
    }

    .sidebar-close-btn {
        display: inline-flex;
    }

    .navbar-dropdown-menu {
        width: 280px;
        right: -8px;
    }

    /* Refinement (design review): once the title-group can wrap to
       two lines, allow .navbar-main-row itself to wrap rather than
       clipping/overlapping the right cluster (greeting, avatar,
       notification, theme toggle) on narrow widths. row-gap keeps
       the wrapped right cluster from touching the row above it. */
    .navbar-main-row {
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

@media (max-width: 575.98px) {
    .page-content {
        padding: 16px;
    }

    .navbar-main-row {
        padding: 0 14px;
    }

    .navbar-top-strip {
        padding: 0 14px;
    }

    .navbar-dropdown-menu {
        width: 250px;
    }
}

/* ------------------------------------------------------------------
   14. PESO ROW ACTIONS — floating action menu for table rows
   BATCH-3: Replaces Bootstrap's native .dropdown for row-action menus
   inside .table-responsive. .table-responsive sets overflow-x:auto,
   which per the CSS spec forces overflow-y to an implicit clipping
   value too — clipping any absolutely-positioned .dropdown-menu that
   overflows the container. This component uses position:fixed with
   JS-calculated coordinates (see initRowActionMenus() in
   dashboard.js) so the menu is positioned relative to the viewport
   and is never clipped by an ancestor's overflow.
   New, isolated class names — no collision with .dropdown or
   .navbar-dropdown-menu, so existing dropdowns are unaffected.
   ------------------------------------------------------------------ */
.peso-row-actions {
    position: relative;
    display: inline-block;
}

.peso-row-actions-menu {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 200px;
    background: var(--peso-surface);
    border: 1px solid var(--peso-border);
    border-radius: var(--peso-radius-md);
    box-shadow: var(--peso-shadow-lg);
    padding: 6px;
    z-index: 1080;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--peso-transition-fast), transform var(--peso-transition-fast), visibility var(--peso-transition-fast);
}

.peso-row-actions-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.peso-row-actions-menu form {
    margin: 0;
}

.peso-row-actions-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: 0;
    border-radius: var(--peso-radius-sm);
    font-size: 0.875rem;
    color: var(--peso-text-primary);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.peso-row-actions-item:hover,
.peso-row-actions-item:focus-visible {
    background: var(--peso-surface-alt);
    outline: none;
}

.peso-row-actions-item.text-danger {
    color: var(--peso-danger);
}

.peso-row-actions-divider {
    height: 1px;
    margin: 6px 4px;
    background: var(--peso-border);
}

/* ------------------------------------------------------------------
   15. SHARED DASHBOARD PRIMITIVES (stat cards, panels, status pills)
   BATCH-4: Applicant Dashboard visual baseline. These classes come
   directly from applicant/dashboard.php's existing markup (zero PHP
   changes needed — every element already carries a distinct class
   hook). Intended as reusable primitives for Employer/Admin/
   SuperAdmin dashboards per project design language, hence placed in
   the shared stylesheet rather than a page-specific file (see
   dashboard.css docblock: "shared dashboard primitives (cards,
   alerts, breadcrumbs)"). Scoped to custom class names only — no
   collision with existing sidebar/navbar/dropdown/row-actions rules.
   ------------------------------------------------------------------ */
.applicant-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Welcome banner --- */
.dashboard-welcome-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 32px;
    border-radius: var(--peso-radius-lg);
    background: linear-gradient(120deg, var(--peso-primary-start) 0%, #5f89e6 42%, var(--peso-primary-end) 130%);
    color: var(--peso-text-on-primary);
    box-shadow: var(--peso-shadow-md);
}

.dashboard-welcome-title {
    margin: 0 0 6px;
    font-size: 1.5rem;
    font-weight: 600;
}

.dashboard-welcome-subtitle {
    margin: 0;
    font-size: 0.92rem;
    opacity: 0.92;
}

.dashboard-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: var(--peso-primary-dark);
    border: none;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: var(--peso-radius-sm);
    box-shadow: var(--peso-shadow-sm);
    transition: transform var(--peso-transition-fast), box-shadow var(--peso-transition-fast);
}

.dashboard-cta-btn:hover,
.dashboard-cta-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--peso-shadow-md);
    color: var(--peso-primary-dark);
}

/* --- Profile completeness reminder --- */
.profile-reminder-alert {
    border-radius: var(--peso-radius-md);
    border: 1px solid rgba(217, 119, 6, 0.25);
    box-shadow: var(--peso-shadow-sm);
}

/* --- Stat cards --- */
.stat-card {
    height: 100%;
    border: 1px solid var(--peso-border);
    border-radius: var(--peso-radius-md);
    box-shadow: var(--peso-shadow-sm);
    transition: transform var(--peso-transition-fast), box-shadow var(--peso-transition-fast);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--peso-shadow-md);
}

.stat-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px;
}

.stat-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--peso-radius-md);
    font-size: 1.2rem;
    margin-bottom: 6px;
}

.stat-card-icon-total     { background: var(--peso-primary-light);       color: var(--peso-primary); }
.stat-card-icon-pending   { background: rgba(217, 119, 6, 0.12);  color: var(--peso-warning); }
.stat-card-icon-interview { background: rgba(8, 145, 178, 0.12);  color: var(--peso-info); }
.stat-card-icon-hired     { background: rgba(22, 163, 74, 0.12);  color: var(--peso-success); }

.stat-card-value {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--peso-text-primary);
}

.stat-card-label {
    font-size: 0.82rem;
    color: var(--peso-text-secondary);
    font-weight: 500;
}

/* --- Available Job Openings hero stat card --- */
.stat-hero-card {
    border: 1px solid var(--peso-border);
    border-radius: var(--peso-radius-lg);
    box-shadow: var(--peso-shadow-sm);
    margin-bottom: 20px;
    overflow: hidden;
}

.stat-hero-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 36px;
}

.stat-hero-main {
    display: flex;
    align-items: center;
    gap: 18px;
}

.stat-hero-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--peso-primary-light);
    color: var(--peso-primary);
    font-size: 1.4rem;
}

.stat-hero-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-hero-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--peso-text-primary);
}

.stat-hero-value {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--peso-text-primary);
}

.stat-hero-subtitle {
    font-size: 0.85rem;
    color: var(--peso-text-muted);
}

.stat-hero-illustration {
    flex-shrink: 0;
    width: 130px;
    height: auto;
    max-width: 30%;
}

@media (max-width: 991.98px) {
    .stat-hero-illustration {
        width: 100px;
    }
}

@media (max-width: 575.98px) {
    .stat-hero-body {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 20px;
        gap: 16px;
    }

    .stat-hero-main {
        flex-direction: column;
        width: 100%;
    }

    .stat-hero-text {
        align-items: center;
    }

    .stat-hero-value {
        font-size: 1.9rem;
    }

    .stat-hero-illustration {
        width: 130px;
        max-width: 60%;
    }
}

/* --- Dashboard panels (Recent Applications / Recently Posted Jobs / Interviews) --- */
.dashboard-panel {
    border: 1px solid var(--peso-border);
    border-radius: var(--peso-radius-md);
    box-shadow: var(--peso-shadow-sm);
    overflow: hidden;
}

.dashboard-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--peso-surface);
    border-bottom: 1px solid var(--peso-border);
    padding: 16px 20px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--peso-text-primary);
}

.dashboard-panel-link {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--peso-primary);
    text-decoration: none;
}

.dashboard-panel-link:hover,
.dashboard-panel-link:focus-visible {
    text-decoration: underline;
}

/* --- Recent applications table --- */
.dashboard-table {
    margin: 0;
}

.dashboard-table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--peso-text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--peso-border);
    padding: 12px 20px;
}

.dashboard-table tbody td {
    padding: 14px 20px;
    font-size: 0.88rem;
    color: var(--peso-text-primary);
    vertical-align: middle;
    border-bottom: 1px solid var(--peso-border);
}

.dashboard-table tbody tr:last-child td {
    border-bottom: none;
}

.dashboard-table tbody tr:hover {
    background: var(--peso-surface-alt);
}

/* --- Status pill badges (shared: employer job status + applicant application status) --- */
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-status-pending   { background: rgba(217, 119, 6, 0.12);  color: var(--peso-warning); }
.badge-status-review    { background: rgba(8, 145, 178, 0.12);  color: var(--peso-info); }
.badge-status-interview { background: var(--peso-primary-light); color: var(--peso-primary); }
.badge-status-hired     { background: rgba(22, 163, 74, 0.12);  color: var(--peso-success); }
.badge-status-declined  { background: rgba(220, 38, 38, 0.12);  color: var(--peso-danger); }
.badge-status-withdrawn { background: var(--peso-surface-alt);  color: var(--peso-text-secondary); }
.badge-status-default   { background: var(--peso-surface-alt);  color: var(--peso-text-secondary); }

/* --- Empty states --- */
.dashboard-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--peso-text-muted);
}

.dashboard-empty-state i {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 12px;
    opacity: 0.7;
}

.dashboard-empty-state p {
    margin: 0 0 14px;
    font-size: 0.9rem;
}

/* --- Recently posted jobs list --- */
.dashboard-job-list .list-group-item {
    padding: 14px 20px;
    border-color: var(--peso-border);
    transition: background-color var(--peso-transition-fast);
}

.dashboard-job-list .list-group-item:hover {
    background: var(--peso-surface-alt);
}

.dashboard-job-link {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--peso-text-primary);
    text-decoration: none;
}

.dashboard-job-link:hover,
.dashboard-job-link:focus-visible {
    color: var(--peso-primary);
}

.dashboard-job-salary {
    margin-top: 4px;
    color: var(--peso-success);
    font-weight: 500;
}

/* --- Upcoming interviews list --- */
.dashboard-interview-list .list-group-item {
    padding: 14px 20px;
    border-color: var(--peso-border);
}

/* --- Fade-in on load (staggered stat cards) --- */
@media (prefers-reduced-motion: no-preference) {
    .dashboard-welcome-banner,
    .dashboard-panel {
        animation: peso-fade-in-up 0.4s ease both;
    }

    .dashboard-stat-row .col-12:nth-child(1) .stat-card { animation: peso-fade-in-up 0.4s ease both 0.02s; }
    .dashboard-stat-row .col-12:nth-child(2) .stat-card { animation: peso-fade-in-up 0.4s ease both 0.07s; }
    .dashboard-stat-row .col-12:nth-child(3) .stat-card { animation: peso-fade-in-up 0.4s ease both 0.12s; }
    .dashboard-stat-row .col-12:nth-child(4) .stat-card { animation: peso-fade-in-up 0.4s ease both 0.17s; }
}

@keyframes peso-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .dashboard-welcome-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 24px;
    }

    .dashboard-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .stat-card .card-body {
        padding: 18px;
    }

    .stat-card-value {
        font-size: 1.5rem;
    }

    .dashboard-panel-header {
        padding: 14px 16px;
    }

    .dashboard-table thead th,
    .dashboard-table tbody td {
        padding: 10px 12px;
    }
}

/* ------------------------------------------------------------------
   17. ADMIN DASHBOARD (Batch 5)
   Reuses Batch 4 shared primitives via class reuse in admin/
   dashboard.php: .dashboard-welcome-banner, .dashboard-panel,
   .dashboard-panel-header, .dashboard-panel-link, .status-pill +
   .badge-status-*, .dashboard-empty-state, .dashboard-interview-list
   all apply automatically — no rules duplicated for those here.
   Only NEW pieces below: the admin welcome-banner date badge (plain
   span, not a CTA button), .peso-card hover/icon treatment (Admin's
   stat cards use the pre-existing .peso-card/.peso-card-gradient
   layout — horizontal icon+value — not Batch 4's vertical
   .stat-card, so they're styled separately to avoid breaking that
   layout), and .dashboard-quicklink (new component, no Batch 4
   counterpart).
   ------------------------------------------------------------------ */

/* Welcome banner date badge (admin variant) */
.dashboard-welcome-date {
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--peso-text-on-primary);
    opacity: 0.9;
}

/* Stat card hover + typography (Top Summary Cards) */
.dashboard-stat-row .peso-card {
    transition: transform var(--peso-transition-fast), box-shadow var(--peso-transition-fast);
}

.dashboard-stat-row .peso-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--peso-shadow-lg);
}

.dashboard-stat-row .peso-card h2 {
    font-size: 1.8rem;
    font-weight: 700;
}

/* Stat card icon treatment — background/shape only, color left to the
   existing text-secondary/text-success utility classes already on
   each icon so those aren't overridden. */
.peso-card:not(.peso-card-gradient) .fs-3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--peso-radius-md);
    background: var(--peso-surface-alt);
}

.peso-card-gradient .fs-3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--peso-radius-md);
    background: rgba(255, 255, 255, 0.18);
}

/* Quick Links */
.dashboard-quicklink {
    transition: transform var(--peso-transition-fast), box-shadow var(--peso-transition-fast), border-color var(--peso-transition-fast);
}

.dashboard-quicklink i {
    color: var(--peso-text-secondary);
    transition: color var(--peso-transition-fast);
}

.dashboard-quicklink:hover,
.dashboard-quicklink:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--peso-shadow-lg);
    border-color: var(--peso-primary);
    outline: none;
}

.dashboard-quicklink:hover i,
.dashboard-quicklink:focus-visible i {
    color: var(--peso-primary);
}

/* Stat card fade-in stagger (mirrors Batch 4 pattern; admin stat
   cards use .peso-card, not .stat-card, so this is a separate rule
   rather than a duplicate). */
@media (prefers-reduced-motion: no-preference) {
    .dashboard-stat-row .col-12:nth-child(1) .peso-card { animation: peso-fade-in-up 0.4s ease both 0.02s; }
    .dashboard-stat-row .col-12:nth-child(2) .peso-card { animation: peso-fade-in-up 0.4s ease both 0.07s; }
    .dashboard-stat-row .col-12:nth-child(3) .peso-card { animation: peso-fade-in-up 0.4s ease both 0.12s; }
    .dashboard-stat-row .col-12:nth-child(4) .peso-card { animation: peso-fade-in-up 0.4s ease both 0.17s; }
}

/* ------------------------------------------------------------------
   19. SUPERADMIN DASHBOARD (Batch 6)
   Reuses Batch 4/5 primitives via class reuse in superadmin/
   dashboard.php: .dashboard-welcome-banner/-title/-subtitle,
   .dashboard-stat-row (hover + h2 typography + fade-in stagger),
   .peso-card .fs-3 icon-circle treatment, .dashboard-panel/-header/
   -link, and .dashboard-quicklink all apply automatically — nothing
   duplicated for those here. Only NEW piece: the welcome banner's
   decorative shield icon, which has no existing counterpart (the
   Applicant banner has a CTA button, the Admin banner has a date
   badge — SuperAdmin's is a plain decorative icon reflecting its
   higher-level role).
   ------------------------------------------------------------------ */
.dashboard-welcome-icon {
    flex-shrink: 0;
    font-size: 2.5rem;
    color: var(--peso-text-on-primary);
    opacity: 0.85;
}

/* ------------------------------------------------------------------
   21. EMPLOYER DASHBOARD (Batch 6)
   Reuses Batch 4/5/6 primitives via class reuse in employer/
   dashboard.php: .dashboard-welcome-banner/-title/-subtitle,
   .dashboard-cta-btn, .dashboard-stat-row (fade-in stagger),
   .stat-card/.stat-card-icon/-value/-label, .status-pill +
   .badge-status-*, .dashboard-panel/-header/-link,
   .dashboard-empty-state all apply automatically — nothing
   duplicated for those here.
   NEW pieces only: (1) job-status icon-color modifiers — a semantic
   category (open/closed/archived/pending job postings) not covered
   by the existing applicant-stat modifiers; (2) disabled state for
   .dashboard-cta-btn, needed for this page's disabled-anchor CTA
   variant; (3) .activity-list presentation — this page's Recent
   Applications/Interviews content previously relied on the removed
   .peso-section-card wrapper's own padding (in employer.css, not
   supplied this batch); .dashboard-panel has no built-in body
   padding, so this is added here to avoid the content rendering
   flush against the panel edges.
   ------------------------------------------------------------------ */

/* Job-status stat card icon colors */
/* Job-status stat card icon colors: intentionally NOT defined here.
   employer.css already owns .bg-open/.bg-closed/.bg-archived/.bg-pending
   with solid background colors. An earlier attempt to add a color-only
   override here collided with that (icon color matched the existing
   solid background, making the glyph invisible) — see Batch 6 hotfix.
   Left as a comment so this isn't re-added by accident later. */

/* CTA disabled state (anchor-as-button, no native :disabled) */
.dashboard-cta-btn.disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

/* Activity list (Recent Applications / Upcoming Interviews content) */
.activity-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--peso-border);
    transition: background-color var(--peso-transition-fast);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-item:hover {
    background: var(--peso-surface-alt);
}

.peso-table-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--peso-primary-light);
    color: var(--peso-primary);
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.activity-item-title {
    margin: 0 0 4px;
    font-size: 0.88rem;
    color: var(--peso-text-primary);
}

.activity-item-meta {
    margin: 0;
    font-size: 0.78rem;
    color: var(--peso-text-secondary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* ------------------------------------------------------------------
   22. REDUCED MOTION SUPPORT
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .app-sidebar,
    .main-panel,
    .navbar-dropdown-menu,
    .sidebar-overlay,
    .app-body,
    .peso-row-actions-menu,
    .stat-card,
    .dashboard-cta-btn,
    .dashboard-stat-row .peso-card,
    .dashboard-quicklink,
    .activity-item {
        transition: none !important;
    }

    .navbar-status-dot {
        animation: none !important;
    }
}

/* ------------------------------------------------------------------
   23. ADMIN APPLICANT DETAIL — LONG VALUE WRAP FIX
   ------------------------------------------------------------------
   Bug: long unbroken values (email addresses, etc.) inside the
   Profile Information card's Bootstrap flex grid (admin/applicants/
   show.php) overflow their .col-6/.col-md-4 column because flex
   items default to min-width:auto, which resolves to the content's
   min-content size. overflow-wrap:anywhere (not break-word) is
   counted in that min-content calculation, so it shrinks the flex
   item's minimum width directly — no min-width:0 override needed.

   Scoped to .peso-card so the rule only applies to card content on
   this page. At present, .fw-semibold exists only in the Profile
   Information card, making the effective scope even narrower.
   ------------------------------------------------------------------ */
.admin-applicant-show .peso-card .fw-semibold {
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
   24. ADMIN EMPLOYER DETAIL — LONG VALUE WRAP FIX
   ------------------------------------------------------------------
   Same root cause as Section 23 (long unbroken values inside
   .col-6/.col-md-4 flex columns overflow their min-content width),
   reoccurring on a different page (admin/employers/show.php, wrapper
   class .admin-employer-show — NOT .admin-applicant-show, so Section
   23's rule does not reach it). Scoped identically, just to this
   page's wrapper.
   ------------------------------------------------------------------ */
.admin-employer-show .peso-card .fw-semibold {
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
   25. ADMIN APPLICATION DETAIL — LONG VALUE WRAP FIX
   ------------------------------------------------------------------
   Same root cause as Sections 23/24: long unbroken values (email)
   inside .col-6/.col-md-4 flex columns overflow their min-content
   width. Scoped to this page's wrapper only.
   ------------------------------------------------------------------ */
.admin-application-show .peso-card .fw-semibold {
    overflow-wrap: anywhere;
}