/* build:v298-theme-scroll-chat */
:root {
    color-scheme: light;

    /* Tier 1 — primitive palette (raw values, never used directly in components) */
    --color-indigo-50:   #eef8fd;
    --color-indigo-100:  #dcf1fb;
    --color-indigo-500:  #14a1db;
    --color-indigo-700:  #4338ca;
    --color-violet-500:  #4fb8e6;
    --color-violet-600:  #1488c7;
    --color-slate-900:   #1e1b4b;
    --color-slate-500:   #6b5f8a;
    --color-slate-400:   #94a3b8;
    --color-slate-300:   #e2e8f0;
    --color-emerald-700: #047857;
    --color-amber-500:   #f59e0b;
    --color-red-500:     #ef4444;
    --color-cyan-500:    #06b6d4;
    --color-pink-500:    #ec4899;
    --color-white:       #ffffff;

    /* Tier 2 — semantic tokens (what components reference) */
    --bg:          var(--color-indigo-50);
    --shell:       var(--color-indigo-50);
    --card:        var(--color-white);
    --ink:         var(--color-slate-900);
    --muted:       var(--color-slate-500);
    --border:      var(--color-indigo-100);
    --accent:      var(--color-indigo-500);
    --accent-soft: var(--color-indigo-100);
    --ok:          var(--color-emerald-700);

    /* HR aliases — back-compat with .hr-* rules already in this file */
    --hr-bg:      var(--bg);
    --hr-card-bg: #faf9ff;
    --hr-border:  var(--border);
    --hr-text:    var(--ink);
    --hr-muted:   var(--muted);
    --hr-blue:    var(--accent);
    --hr-green:   var(--ok);
    --hr-orange:  var(--color-amber-500);
    --hr-red:     var(--color-red-500);
    --hr-purple:  var(--color-violet-500);
    --hr-cyan:    var(--color-cyan-500);
    --hr-pink:    var(--color-pink-500);

    /* Spacing scale (8px base, with smaller steps for tight UI) */
    --space-2:  0.125rem;
    --space-4:  0.25rem;
    --space-6:  0.375rem;
    --space-8:  0.5rem;
    --space-12: 0.75rem;
    --space-16: 1rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --dash-space-xs: var(--space-8);
    --dash-space-sm: var(--space-16);
    --dash-space-md: var(--space-24);
    --dash-space-lg: var(--space-32);

    /* Radii */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-pill: 999px;
    --dash-radius:    var(--radius-lg);
    --dash-radius-sm: var(--radius-md);

    /* Motion */
    --motion-fast:     120ms;
    --motion-base:     200ms;
    --motion-slow:     320ms;
    --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);

    /* Layout */
    --sidebar-w: 260px;

    /* Typography */
    --font-sans: 'DM Sans', sans-serif;
    --font-mono: 'DM Mono', 'Menlo', monospace;
    /* Form-control text on small screens (≤620px). Desktop keeps the
       browser/component sizes (~0.83rem). iOS focus-zoom is handled by the
       viewport patch in staff-calendar-core.js, NOT by inflating this. */
    --control-font-mobile: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0ms;
        --motion-base: 0ms;
        --motion-slow: 0ms;
    }
}

:where(button, a, [role="button"], input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

@keyframes toastSlideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes toastFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes confirmFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Toast notification system */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100010;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font-sans);
    color: #fff;
    background: #334155;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: toastSlideIn 0.25s ease-out;
    max-width: 380px;
    word-break: break-word;
}
.toast-success { background: #059669; }
.toast-error { background: #dc2626; }
.toast-info { background: #14a1db; }
.toast-fade-out { animation: toastFadeOut 0.3s ease-in forwards; }
.toast-undo { background: #1e293b; display: flex; align-items: center; gap: 12px; min-width: 260px; white-space: nowrap; }
.toast-undo span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast-undo-btn { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; border-radius: 4px; padding: 3px 10px; font-size: 13px; cursor: pointer; flex-shrink: 0; font-family: var(--font-sans); }
.toast-undo-btn:hover { background: rgba(255,255,255,0.25); }
.hr-btn-undo { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; border-radius: 20px; padding: 4px 14px; font-size: 13px; cursor: pointer; font-weight: 500; }
.hr-btn-undo:hover { background: #fde68a; }
.hr-stage-pill-edit { cursor: pointer; user-select: none; }
.hr-stage-pill-edit:hover { opacity: 0.8; }
.hr-stage-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hr-stage-pick-btn { border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; border-radius: 20px; padding: 3px 12px; font-size: 12px; cursor: pointer; text-transform: capitalize; }
.hr-stage-pick-btn:hover { background: #e2e8f0; }
.hr-stage-pick-current { background: #14a1db; color: #fff; border-color: #14a1db; }
.hr-stage-pick-cancel { background: transparent; color: #94a3b8; border-color: transparent; font-size: 11px; }

/* Global loading spinner */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2.5px solid #e2e0f0;
    border-top-color: var(--primary, #14a1db);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
.loading-spinner-lg {
    width: 36px;
    height: 36px;
    border-width: 3.5px;
}
.loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.7);
    z-index: 50;
    border-radius: inherit;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--bg);
    min-height: 100svh;
    height: 100dvh;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body::-webkit-scrollbar,
html::-webkit-scrollbar {
    display: none;
}

html,
body,
button,
input,
select,
textarea,
table,
th,
td,
label,
a,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-sans);
}

.shell {
    width: 100%;
    height: 100dvh;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    scrollbar-width: none;
}

.shell::-webkit-scrollbar {
    display: none;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1.15rem;
    box-shadow: 0 4px 24px rgba(20, 161, 219, 0.07);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* ── Login animations ── */
@keyframes loginFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes loginMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes loginPulseRing {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50%      { transform: scale(1.15); opacity: 0.2; }
}
@keyframes loginBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}
@keyframes loginGradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Kill all login animations when the login view is hidden */
#loginView.hidden,
#loginView.hidden * {
    animation: none !important;
}

/* ── Login split-screen layout ── */
.login-split {
    display: flex;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}

.login-fade-up {
    animation: loginFadeUp 0.7s ease-out both;
}
.login-fade-up-delay {
    animation-delay: 0.2s;
}

/* ── Brand panel ── */
.login-brand-panel {
    flex: 0 0 42%;
    background: linear-gradient(145deg, #4338ca, #14a1db, #1488c7, #4fb8e6);
    background-size: 300% 300%;
    animation: loginGradientShift 8s ease infinite;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 2rem;
}

#loginParticleCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.login-brand-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
    width: 100%;
    max-width: 340px;
}

.login-brand-logo-wrap {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 0 auto 1.2rem;
}

.login-brand-logo {
    width: 130px;
    height: 130px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    padding: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    display: block;
    border: 0;
    position: relative;
    z-index: 1;
}

.login-logo-ring {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.25);
    animation: loginPulseRing 3s ease-in-out infinite;
}

.login-brand-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
    color: #fff;
}

.login-marquee {
    width: 100%;
    overflow: hidden;
    margin: 0 0 1.2rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.login-marquee-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: loginMarquee 20s linear infinite;
}

.login-marquee-track span {
    flex-shrink: 0;
    padding: 0.35rem 1rem;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    border: none;
}

/* Rotating colors for marquee pills — 8 items per set */
.login-marquee-track span:nth-child(8n+1) { background: #ef4444; }  /* red */
.login-marquee-track span:nth-child(8n+2) { background: #f59e0b; color: #1e1b4b; } /* amber */
.login-marquee-track span:nth-child(8n+3) { background: #10b981; }  /* emerald */
.login-marquee-track span:nth-child(8n+4) { background: #3b82f6; }  /* blue */
.login-marquee-track span:nth-child(8n+5) { background: #ec4899; }  /* pink */
.login-marquee-track span:nth-child(8n+6) { background: #4fb8e6; }  /* violet */
.login-marquee-track span:nth-child(8n+7) { background: #06b6d4; }  /* cyan */
.login-marquee-track span:nth-child(8n+8) { background: #f97316; }  /* orange */

.login-brand-tagline {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.78);
    margin: 0 0 1.2rem;
    font-weight: 400;
}

.login-typing-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.6em;
    gap: 2px;
}

.login-typing-text {
    font-size: 0.88rem;
    font-weight: 500;
    color: rgba(255,255,255,0.92);
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.01em;
}

.login-typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: rgba(255,255,255,0.85);
    animation: loginBlink 0.75s step-end infinite;
    vertical-align: text-bottom;
}

/* ── Form panel ── */
.login-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #faf9ff;
    padding: 2rem;
    overflow-y: auto;
}

.login-form-inner {
    width: 100%;
    max-width: 380px;
}

.login-form-header {
    margin-bottom: 1.8rem;
}

.login-form-logo {
    width: 140px;
    height: 36px;
    object-fit: contain;
    object-position: left center;
    display: block;
    margin: 0 0 1.2rem;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

.login-form-header h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    color: var(--ink);
    letter-spacing: -0.03em;
}

@keyframes loginCursorBlink {
    0%, 100% { border-right-color: var(--accent, #14a1db); }
    50%      { border-right-color: transparent; }
}

.login-welcome-text {
    font-size: 2.2rem;
    display: inline-block;
    border-right: 3px solid var(--accent, #14a1db);
    padding-right: 4px;
    animation: loginCursorBlink 0.75s step-end infinite;
    white-space: nowrap;
    overflow: hidden;
    min-height: 1.2em;
    background: linear-gradient(
        90deg,
        #1e1b4b 0%, #1e1b4b 35%,
        #14a1db 45%, #4fb8e6 50%, #14a1db 55%,
        #1e1b4b 65%, #1e1b4b 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-welcome-text.typing-done {
    border-right-color: transparent;
    animation: loginTextShimmer 3s ease-in-out infinite;
}

@keyframes loginTextShimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.login-form-header p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--muted);
}

.login-field {
    margin-bottom: 1rem;
}

.login-field label {
    display: block;
    margin: 0 0 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #4a4570;
    letter-spacing: 0.01em;
}

.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-icon {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    color: var(--muted);
    pointer-events: none;
    flex-shrink: 0;
}

.login-input-wrap input {
    width: 100%;
    padding: 0.7rem 0.85rem 0.7rem 2.5rem;
    border: 1.5px solid #e2dff0;
    border-radius: 10px;
    font-size: 0.9rem;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-input-wrap input::placeholder {
    color: #b8b2d0;
}

.login-input-wrap input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(20, 161, 219,0.10);
    outline: none;
}

.login-eye-btn {
    position: absolute;
    right: 4px;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.login-eye-btn:hover {
    background: #f0edff;
    transform: none;
}

.eye-icon {
    width: 18px;
    height: 12px;
    border: 2px solid #5d688a;
    border-radius: 14px / 10px;
    position: relative;
    display: inline-block;
}

.eye-icon::before {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 4px; height: 4px;
    background: #5d688a;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

#togglePasswordBtn.is-visible .eye-icon::after {
    content: '';
    position: absolute;
    left: -2px; top: 50%;
    width: 22px; height: 2px;
    background: #5d688a;
    transform: rotate(-32deg);
    transform-origin: center;
}

.login-split button[type="submit"] {
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.75rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    color: #fff;
    background: #14a1db;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(20, 161, 219,0.25);
}

.login-split button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(20, 161, 219,0.4);
}

.login-btn-arrow {
    width: 18px;
    height: 18px;
    color: #fff;
    transition: transform 0.2s;
}

.login-split button[type="submit"]:hover .login-btn-arrow {
    transform: translateX(3px);
}

.login-footer-text {
    text-align: center;
    font-size: 0.78rem;
    color: var(--muted);
    margin: 1.5rem 0 0;
    opacity: 0.7;
}

.login-error {
    margin: 0.6rem 0 0;
    color: #dc2626;
    font-size: 0.85rem;
    font-weight: 500;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
}

.small-btn {
    width: auto;
    min-width: 72px;
    padding: 0.6rem 0.8rem;
}

.password-wrap {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.password-wrap input {
    flex: 1;
}

/* ── Login Doodle Illustration ── */
.login-doodle-wrap {
    display: flex;
    justify-content: center;
    margin: 0.6rem 0 0;
}

#loginAvatar {
    width: 100%;
    max-width: 360px;
    height: auto;
    overflow: visible;
}

.avatar-mouth-neutral, .avatar-mouth-smile {
    transition: opacity 0.3s ease;
}

@keyframes avatarShake {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-6px) rotate(-2deg); }
    30%      { transform: translateX(5px) rotate(1.5deg); }
    45%      { transform: translateX(-4px) rotate(-1deg); }
    60%      { transform: translateX(3px) rotate(0.5deg); }
    75%      { transform: translateX(-1px); }
}

#loginAvatar.shake {
    animation: avatarShake 0.5s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    #loginAvatar, #loginAvatar * {
        transition: none !important;
        animation: none !important;
    }
}

/* ── Login responsive ── */

/* Tablet: hide brand panel, center form */
@media (max-width: 850px) {
    .login-brand-panel { display: none; }
    .login-form-panel {
        padding: 2rem 1.5rem;
        min-height: 100dvh;
        align-items: flex-start;
        padding-top: max(env(safe-area-inset-top, 0px), 2rem);
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 1rem);
    }
    .login-form-inner { max-width: 420px; }
    #loginAvatar { max-width: 300px; }
}

/* Mobile phones */
@media (max-width: 480px) {
    .login-form-panel {
        padding: 1.25rem 1rem;
        padding-top: max(env(safe-area-inset-top, 0px), 1.25rem);
    }
    .login-form-inner { max-width: 100%; }
    .login-form-header { margin-bottom: 1.2rem; }
    .login-form-header h1 { font-size: 1.5rem; }
    .login-form-header p { font-size: 0.85rem; }

    .login-welcome-text { font-size: 1.5rem; }

    .login-field { margin-bottom: 0.75rem; }
    .login-field label { font-size: 0.8rem; margin-bottom: 0.3rem; }

    /* Larger touch targets for inputs */
    .login-input-wrap input {
        padding: 0.8rem 0.85rem 0.8rem 2.5rem;
        font-size: 1rem;
        border-radius: 12px;
        min-height: 48px;
    }

    /* Larger touch target for submit */
    .login-split button[type="submit"] {
        padding: 0.85rem 1.2rem;
        font-size: 1rem;
        border-radius: 12px;
        min-height: 50px;
        margin-top: 0.5rem;
    }

    /* Larger eye toggle for touch */
    .login-eye-btn {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    /* Smaller avatar to save space */
    #loginAvatar { max-width: 200px; }
    .login-doodle-wrap { margin-top: 0.4rem; }
    .login-footer-text { margin-top: 0.8rem; font-size: 0.72rem; }
    .login-error { font-size: 0.82rem; padding: 0.5rem 0.65rem; }
}

/* Very small phones (iPhone SE, Galaxy S size) */
@media (max-width: 360px) {
    .login-form-panel { padding: 1rem 0.75rem; }
    .login-form-header h1 { font-size: 1.3rem; }
    .login-form-header { margin-bottom: 1rem; }
    #loginAvatar { max-width: 160px; }
}

/* Landscape mode on mobile phones */
@media (max-height: 500px) and (orientation: landscape) {
    .login-brand-panel { display: none; }
    .login-form-panel {
        align-items: center;
        padding: 0.75rem 2rem;
        overflow-y: auto;
    }
    .login-form-inner {
        max-width: 400px;
    }
    .login-form-header { margin-bottom: 0.8rem; }
    .login-form-header h1 { font-size: 1.3rem; }
    .login-field { margin-bottom: 0.5rem; }
    #loginAvatar { display: none; }
    .login-doodle-wrap { display: none; }
    .login-footer-text { margin-top: 0.5rem; }
}

h1,
h2,
h3,
h4 {
    margin: 0 0 0.6rem;
    font-weight: 600;
}

p {
    margin: 0 0 0.9rem;
    color: var(--muted);
}

label {
    display: block;
    margin: 0.5rem 0 0.35rem;
    font-size: 0.86rem;
    color: #575f75;
}

input,
select,
textarea,
button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-family: inherit;
    border-radius: 10px;
    border: 1px solid var(--border);
    padding: 0.66rem 0.8rem;
    background: #fff;
    box-sizing: border-box;
}

select {
    color-scheme: light;
    background-color: #fff;
}

.muted-input,
input:disabled.muted-input {
    background: #f0edff !important;
    color: var(--hr-muted, #8b80b0) !important;
    cursor: not-allowed;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent, #14a1db);
    box-shadow: 0 0 0 3px rgba(20, 161, 219, 0.12);
}

button {
    cursor: pointer;
    font-weight: 600;
    border: none;
    color: #fff;
    background: linear-gradient(135deg, var(--accent, #14a1db), #1488c7);
}

button:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

button.ghost {
    background: #fff;
    color: var(--hr-text, #1e1b4b);
    border: 1px solid var(--border);
}

button.ghost:hover {
    background: var(--hr-card-bg, #faf9ff);
    color: var(--hr-text, #1e1b4b);
    border-color: var(--accent, #14a1db);
}

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-rows: 1fr;
    gap: 0;
    background: var(--shell);
    border: 0;
    border-radius: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    box-shadow: none;
}

.side-nav {
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 0;
    height: 100%;
    position: relative;
    z-index: 3;
    background: #0e7bb0;
    border: 0;
    box-shadow: none;
    overflow: hidden;
    min-width: auto;
    max-width: none;
    border-radius: 0;
}

#topbarParticleCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.brand-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1.35rem 1.25rem 1rem;
    color: #ffffff;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    position: relative;
    z-index: 1;
}

.brand-block strong {
    color: #ffffff;
    margin-bottom: 0.15rem;
    font-size: 1.05rem;
    line-height: 1.25;
}

.brand-logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 14px;
    padding: 7px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
    margin-bottom: 0.55rem;
}

.brand-dot {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: var(--ok);
}

.brand-logo {
    width: auto;
    height: 50px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    border-radius: 0;
    background: transparent;
    border: 0;
    padding: 0;
    display: block;
    margin: 0 0 2px 0;
    animation: brandLogoBreathe 5s ease-in-out infinite;
    transition: transform 0.35s ease, filter 0.35s ease;
    transform-origin: left center;
    will-change: transform, filter;
}

.brand-logo:hover {
    transform: scale(1.04);
    filter: drop-shadow(0 4px 14px rgba(255, 255, 255, 0.35));
    animation-play-state: paused;
}

@keyframes brandLogoBreathe {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    }
    50% {
        transform: translateY(-2px) scale(1.018);
        filter: drop-shadow(0 3px 10px rgba(255, 255, 255, 0.18));
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-logo {
        animation: none;
    }
    .brand-logo:hover {
        transform: none;
    }
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.85rem 0.5rem 0.75rem;
    position: relative;
    z-index: 1;
}

/* Thin scrollbar for sidebar menu */
.menu::-webkit-scrollbar { width: 3px; }
.menu::-webkit-scrollbar-track { background: transparent; }
.menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
.menu::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }
.menu { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; }

.menu-item-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
}

.menu-item-icon svg {
    width: 18px;
    height: 18px;
}

/* ── Colorful sidebar icon palette ── */
.menu .menu-item[data-section="reports"] .menu-item-icon   { color: #f59e0b; }
.menu .menu-item[data-section="events"] .menu-item-icon    { color: #10b981; }
.menu .menu-item[data-section="calendar"] .menu-item-icon  { color: #38bdf8; }
.menu .menu-item[data-section="extensions"] .menu-item-icon { color: #5cc3ea; }
.menu .menu-item[data-section="messages"] .menu-item-icon  { color: #22d3ee; }
.menu .menu-item[data-section="circulars"] .menu-item-icon { color: #fbbf24; }
.menu .menu-item[data-section="performance"] .menu-item-icon { color: #84cc16; }
.menu .menu-item[data-section="staff"] .menu-item-icon     { color: #4fb8e6; }
.menu .menu-item[data-section="hrms"] .menu-item-icon      { color: #2dd4bf; }
.menu .menu-item[data-section="timetable"] .menu-item-icon { color: #f472b6; }
.menu #emailsMenuItem .menu-item-icon                      { color: #fb923c; }
#emailsSideSubMenu .req-side-item[data-emailsub="wishes"] svg       { color: #ef4444; }
#emailsSideSubMenu .req-side-item[data-emailsub="event_emails"] svg { color: #0ea5e9; }

/* HR submenu icon colors */
[data-hrsub="employees"] svg   { color: #60a5fa; }
[data-hrsub="onboarding"] svg  { color: #4fb8e6; }
[data-hrsub="attendance"] svg  { color: #2dd4bf; }
[data-hrsub="leave"] svg       { color: #34d399; }
[data-hrsub="payroll"] svg     { color: #fbbf24; }
[data-hrsub="recruitment"] svg { color: #60a5fa; }
[data-hrsub="exit"] svg        { color: #fb923c; }
[data-hrsub="grievances"] svg  { color: #fb7185; }

/* Request submenu icon colors */
[data-reqsub="overview"] svg          { color: #5cc3ea; }
[data-reqsub="wrong-assign"] svg      { color: #fb7185; }
[data-reqsub="report-approvals"] svg  { color: #34d399; }
[data-reqsub="subtask-approvals"] svg { color: #fbbf24; }
[data-reqsub="history"] svg           { color: #22d3ee; }

/* Footer icon colors */
.side-nav-footer [data-section="profile"] .menu-item-icon { color: #94a3b8; }
.side-nav-logout-btn .menu-item-icon { color: #f87171; }
.side-nav-mobile-actions [data-section="profile"] .menu-item-icon { color: #94a3b8; }
#mobileLogoutBtn .menu-item-icon { color: #f87171; }

.menu .menu-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    text-decoration: none;
    color: rgba(255,255,255,0.78);
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    font-size: 0.9rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    margin: 0;
    font-weight: 500;
    position: relative;
    min-height: 42px;
    line-height: 1.2;
    flex-shrink: 0;
    box-shadow: none !important;
}

.menu .menu-item.has-chat-unread::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #26d964;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.menu .menu-item.active {
    color: #ffffff !important;
    background: rgba(255,255,255,0.16) !important;
    border-color: transparent;
    font-weight: 600;
}

.menu .menu-item.active::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    background: #a9dcf1;
    border-radius: 0 3px 3px 0;
}

.menu .menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: transparent;
    color: #ffffff;
    transform: none;
}

.side-nav-footer {
    margin-top: auto;
    padding: 0.75rem 0.75rem calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    background: linear-gradient(180deg, rgba(8, 78, 115,0) 0%, rgba(8, 78, 115,0.96) 22%, rgba(8, 78, 115,1) 100%);
    /* No backdrop-filter: sits on the opaque drawer; blur risks Android GPU noise */
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* No separator line — clean look */
.side-nav-footer::before { display: none; }

/* ── Footer buttons: Profile & Logout ── */
.side-nav-footer button {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    height: 40px !important;
    min-height: unset !important;
    padding: 0 1.1rem !important;
    border-radius: 12px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap;
    transform: none !important;
    filter: none !important;
}
/* Icon span inside footer buttons */
.side-nav-footer button .menu-item-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    flex-shrink: 0 !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}
.side-nav-footer button .menu-item-icon svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
}

/* Profile — indigo fill */
.side-nav-footer-btn {
    background: rgba(20, 161, 219,0.88) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(20, 161, 219,0.28) !important;
    transition: background 0.15s !important;
}
.side-nav-footer-btn:hover {
    background: #14a1db !important;
    filter: none !important;
    transform: none !important;
}

/* Logout — ghost secondary */
.side-nav-logout-btn {
    background: transparent !important;
    color: rgba(255,255,255,0.58) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: none !important;
}
.side-nav-logout-btn:hover {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.85) !important;
    border-color: rgba(255,255,255,0.25) !important;
    filter: none !important;
    transform: none !important;
}

.content-shell {
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
    padding: 1.35rem 1.75rem 2.5rem;
    scrollbar-width: thin;
    scrollbar-color: #4fb8e6 #dcf1fb;
}

.content-shell::-webkit-scrollbar {
    width: 12px;
}

.content-shell::-webkit-scrollbar-track {
    background: #dcf1fb;
    border-radius: 12px;
}

.content-shell::-webkit-scrollbar-thumb {
    background: #4fb8e6;
    border-radius: 12px;
    border: 2px solid #dcf1fb;
}

.content-shell::-webkit-scrollbar-thumb:hover {
    background: #1488c7;
}

.topbar {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 1.35rem;
    position: sticky;
    top: 0;
    z-index: 20;
    max-width: none;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(10, 94, 136, 0.06);
}

.grid {
    min-height: 0;
    overflow: visible;
    padding-right: 0.2rem;
    box-sizing: border-box;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.topbar-mobile-icons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: auto;
    justify-content: flex-start;
}

.topbar-mobile-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.topbar-welcome {
    min-width: 0;
}

@keyframes dashboardCursorBlink {
    0%, 100% { border-right-color: var(--accent, #14a1db); }
    50%      { border-right-color: transparent; }
}

@keyframes dashboardTextShimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.dashboard-welcome-text {
    display: inline-block;
    border-right: 2px solid var(--accent, #14a1db);
    padding-right: 3px;
    animation: dashboardCursorBlink 0.75s step-end infinite;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    background: linear-gradient(
        90deg,
        #1e1b4b 0%, #1e1b4b 35%,
        #14a1db 45%, #4fb8e6 50%, #14a1db 55%,
        #1e1b4b 65%, #1e1b4b 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dashboard-welcome-text.typing-done {
    border-right-color: transparent;
    animation: dashboardTextShimmer 3s ease-in-out infinite;
}

.mobile-icon-btn {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    padding: 0;
    background: #ffffff;
    border: 1px solid #e6eaf7;
    align-items: center;
    justify-content: center;
}

.topbar-mobile-actions .mobile-icon-btn {
    display: none !important;
}

.mobile-icon-btn svg {
    width: 18px;
    height: 18px;
}

.mobile-side-btn {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-radius: 12px;
    min-height: 42px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    justify-content: flex-start;
}

.side-nav-mobile-actions {
    display: none;
}

.mobile-nav-close {
    display: none;
}

.mobile-nav-close svg {
    width: 18px;
    height: 18px;
}

.mobile-bottom-nav {
    display: none;
}

.topbar-tools {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-left: auto;
    min-width: 0;
    flex-wrap: nowrap;
    position: relative;
    z-index: 1;
}

.top-search {
    position: relative;
    display: flex;
    align-items: center;
    width: clamp(260px, 34vw, 480px);
    overflow: visible;
    /* Unified pill container */
    background: #eef8fd;
    border: 1.5px solid #c9e9f7;
    border-radius: 24px;
    padding-right: 5px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.top-search:focus-within {
    border-color: #14a1db;
    box-shadow: 0 0 0 3px rgba(20, 161, 219,0.12);
    background: #fff;
}

.top-search::before {
    content: none;
}

.search-glyph {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #8b80b0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: color 0.15s;
}
.top-search:focus-within .search-glyph { color: #14a1db; }

.search-glyph svg {
    width: 16px;
    height: 16px;
}

#globalSearchInput {
    height: 40px;
    border-radius: 24px;
    padding-left: 2.3rem;
    padding-right: 0.5rem;
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 0.84rem;
    color: #1e1b4b;
    flex: 1;
    outline: none;
}
#globalSearchInput::placeholder { color: #8b80b0; }
#globalSearchInput::-webkit-search-cancel-button {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23e2e0f0'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='%23555' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
    cursor: pointer;
}

.search-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    border: 1px solid #dfe6f8;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(32, 45, 79, 0.16);
    z-index: 1400;
    overflow: hidden;
    max-height: 290px;
    overflow-y: auto;
}

.search-suggest-item {
    width: 100%;
    border: 0;
    background: #fff;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.62rem 0.74rem;
    border-bottom: 1px solid #edf2fb;
    color: #2d3757;
    cursor: pointer;
}

.search-suggest-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.search-suggest-sub {
    font-size: 0.72rem;
    color: #8a96b4;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.search-suggest-item:last-child {
    border-bottom: 0;
}

.search-suggest-item:hover {
    background: #f5f8ff;
}

.search-suggest-main {
    font-weight: 500;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-suggest-kind {
    color: #6f7ea7;
    font-size: 0.78rem;
    font-weight: 600;
}

.top-search-go {
    display: none !important; /* hidden — live search replaces Go button */
    align-items: center;
    justify-content: center;
    background: #14a1db !important;
    color: #fff !important;
    border: none !important;
    border-radius: 18px !important;
    padding: 0 1.1rem !important;
    font-size: 0.80rem !important;
    font-weight: 700 !important;
    height: 32px !important;
    min-height: unset !important;
    width: auto !important;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(20, 161, 219,0.28) !important;
    transition: opacity 0.15s, box-shadow 0.15s !important;
    filter: none !important;
    transform: none !important;
    letter-spacing: 0.02em;
}
.top-search-go:hover {
    opacity: 0.90 !important;
    box-shadow: 0 4px 14px rgba(20, 161, 219,0.38) !important;
    filter: none !important;
    transform: none !important;
}

.top-icon-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef8fd;
    border: 1.5px solid #c9e9f7;
    color: #14a1db;
    box-shadow: none !important;
    transition: background 0.15s, border-color 0.15s;
    overflow: visible;
}
.top-icon-btn:hover {
    background: #dcf1fb;
    border-color: #a5b4fc;
}

.top-create-btn {
    width: auto;
    min-width: 110px;
    height: 44px;
    padding: 0 1.25rem;
    border-radius: 22px;
    background: #14a1db;
    box-shadow: 0 6px 18px rgba(20, 161, 219, 0.28);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    transition: opacity 0.15s, transform 0.1s;
}
.top-create-btn:hover { opacity: 0.9; transform: translateY(-1px); }

.notif-wrap {
    position: relative;
}

.notif-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    position: relative;
    background: #ffffff;
    color: #1f2937;
    border: 1px solid var(--border);
    box-shadow: none;
    overflow: visible;
}

.notif-glyph {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notif-glyph svg {
    width: 18px;
    height: 18px;
}

.notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.68rem;
    padding: 0 0.25rem;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(239, 68, 68, 0.35);
    line-height: 1;
    z-index: 10;
    pointer-events: none;
}

.notif-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: min(360px, calc(100vw - 2rem));
    border: 1px solid #dfe6f8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 34px rgba(32, 45, 79, 0.2);
    z-index: 1300;
    overflow: hidden;
}

.notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid #edf1f8;
}

.notif-head button {
    width: auto;
    min-width: 96px;
    padding: 0.4rem 0.55rem;
    font-size: 0.78rem;
}

.notif-list {
    max-height: 320px;
    overflow-x: hidden;
    overflow-y: auto;
}

.notif-item {
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid #e8ecf6;
    border-radius: 0;
    cursor: pointer;
    background: #fff;
    color: #1f2937;
    padding: 0.7rem 0.8rem 0.72rem 0.95rem;
    display: grid;
    gap: 0.28rem;
    position: relative;
    transition: background 120ms ease;
}

.notif-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #c8cfdf;
}

.notif-item:not(.read) {
    background: #f5f8ff;
}

.notif-item:hover {
    transform: none;
    filter: none;
    background: #eef2ff;
}

.notif-item.read {
    opacity: 0.7;
}
.notif-item.read::before {
    opacity: 0.55;
}

/* Tone accents (left stripe) */
.notif-item.notif-tone-error::before    { background: #ef4444; }
.notif-item.notif-tone-success::before  { background: #10b981; }
.notif-item.notif-tone-warning::before  { background: #f59e0b; }
.notif-item.notif-tone-info::before     { background: #3b82f6; }
.notif-item.notif-tone-deadline::before { background: #f97316; }
.notif-item.notif-tone-assign::before   { background: #14a1db; }

.notif-item-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.notif-item-title {
    font-weight: 700;
    font-size: 0.86rem;
    color: #111827;
    line-height: 1.3;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.notif-item-msg {
    font-size: 0.81rem;
    color: #4b5563;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

.notif-item-time {
    font-size: 0.7rem;
    color: #6b7280;
    font-weight: 500;
    flex: 0 0 auto;
    white-space: nowrap;
}

.notif-item-msg .notif-em-actor {
    color: #4338ca !important;
    font-weight: 700 !important;
    background: rgba(18, 118, 194, 0.08);
    padding: 0 0.18em;
    border-radius: 3px;
}
.notif-item-msg .notif-em-entity {
    color: #111827 !important;
    font-weight: 700 !important;
    font-style: italic;
}
.notif-item.read .notif-item-msg .notif-em-actor,
.notif-item.read .notif-item-msg .notif-em-entity {
    color: inherit !important;
    background: transparent;
}

.notif-empty {
    padding: 0.8rem;
    color: #7883a4;
    font-size: 0.84rem;
}

.profile-avatar-wrap {
    position: relative;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
}

.profile-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #6b5cff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid #e7ecfb;
    background-size: cover;
    background-position: center;
}

.profile-avatar-plus {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
    border: 1px solid #d5dcf0;
    background: #fff;
    color: #4e5d86;
}

.profile-avatar-plus:hover {
    background: #f1edff;
    color: #3f3b75;
}

.profile-photo-menu {
    position: fixed;
    z-index: 1200;
    min-width: 170px;
    border: 1px solid #dfe6f8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(31, 41, 71, 0.2);
    padding: 0.45rem;
    display: grid;
    gap: 0.35rem;
}

.profile-photo-menu button {
    width: 100%;
}

.topbar h2 {
    margin-bottom: 0.18rem;
}

.topbar p {
    margin: 0;
}

.grid {
    display: block;
    gap: 0;
    margin-bottom: 1rem;
    min-width: 0;
    max-width: 100%;
}

.section-card {
    border-radius: 20px;
    padding: 1.25rem;
    background: var(--hr-bg, #eef8fd);
    box-shadow: 0 4px 24px rgba(20, 161, 219, 0.07);
    border: 1px solid var(--border);
}

.grid:not(:has(> :not(.hidden))) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.grid:last-of-type {
    grid-template-columns: 1fr 1fr;
}

.grid:last-of-type > .section-card[data-section="profile"] {
    grid-column: 1 / -1;
}

.actions {
    display: flex;
    gap: 0.55rem;
    margin-top: 0.8rem;
}

.actions > * {
    flex: 1;
}

.table-wrap {
    overflow-x: auto;
    margin-top: 0.75rem;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
    background: transparent;
}

th,
td {
    text-align: left;
    padding: 0.62rem 0.52rem;
    border-bottom: 1px solid #f0edf7;
    vertical-align: top;
}

th {
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.task-cards-grid {
    margin-top: 0.7rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.events-view-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 0.7rem;
    align-items: stretch;
}

.events-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 16px;
    background: #f4f8fb;
}

.events-filter-group-label {
    display: inline-flex;
    align-items: center;
    min-width: 100%;
    padding: 0;
    margin-bottom: 0.1rem;
    color: #1488c7;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Consolidated insight band — 3 compact chips (~40px tall) ─────────────── */
.events-summary-band {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8, 0.5rem);
    margin: 0 0 0.4rem;
}

.events-summary-tile {
    width: auto;
    min-width: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    flex: 0 1 auto;
    min-height: 38px;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border, #dcf1fb);
    border-radius: var(--radius-pill, 999px);
    background: var(--card, #fff);
    cursor: pointer;
    text-align: left;
    transition: box-shadow var(--motion-base, 200ms) var(--ease-emphasized), border-color var(--motion-base, 200ms);
}

.events-summary-tile > svg { flex-shrink: 0; color: var(--color-violet-600, #1488c7); }
.events-summary-tile.est-tone-danger > svg { color: var(--hr-red, #ef4444); }
.events-summary-tile.est-tone-warn > svg { color: var(--hr-orange, #f59e0b); }

.events-summary-tile:hover {
    box-shadow: 0 4px 14px rgba(20, 161, 219, 0.14);
    border-color: #a9dcf1;
}

.events-summary-tile.is-active {
    background: var(--color-indigo-100, #dcf1fb);
    border-color: #a9dcf1;
}

.events-summary-tile .est-count {
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-violet-600, #1488c7);
}

.events-summary-tile .est-count.est-danger { color: var(--hr-red, #ef4444); }
.events-summary-tile .est-count.est-warn { color: var(--hr-orange, #f59e0b); }

.events-summary-tile .est-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--muted, #6b5f8a);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* ── Primary strip — scope control, search, sort, filters, view-mode ──────── */
.events-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8, 0.5rem);
    margin: 0 0 0.4rem;
}

.events-primary-strip { gap: 0.4rem; row-gap: 0.4rem; }
/* Keep the whole primary strip on one row on the 1366 college display: the
   scope control + search + sort + Filters + view-mode toggle add up to ~1020px,
   well under the ~1150px content width once the sidebar is subtracted. The
   view-mode toggle no longer hard-pushes right (that was wrapping it to a 2nd
   line); it just sits at the end of the row. */
.events-primary-strip .events-viewmode-toggle { margin-left: auto; }
@media (min-width: 1100px) {
    .events-primary-strip { flex-wrap: nowrap; }
    .events-primary-strip .dash-filter-chip--search { flex: 1 1 120px; max-width: 220px; }
}

/* ── Compact SCOPE segmented control + More popover ───────────────────────── */
.events-scope-control {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    padding: 2px;
    border: 1px solid #e2ddf0;
    border-radius: var(--radius-pill, 999px);
    background: #eef8fd;
    flex: 0 1 auto;
    max-width: 100%;
    overflow: visible;
}

.events-scope-seg {
    width: auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 32px;
    padding: 0 0.7rem;
    border: none;
    border-radius: var(--radius-pill, 999px);
    background: transparent;
    color: #4a3f6b;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.events-scope-seg:hover { color: #0a5e88; }

.events-scope-seg .ess-count {
    min-width: 1.3rem;
    padding: 0.04rem 0.38rem;
    border-radius: 999px;
    background: #fff;
    color: var(--ink, #1e1b4b);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.events-scope-seg.is-active {
    background: var(--color-violet-600, #1488c7);
    color: #fff;
}

.events-scope-seg.is-active .ess-count {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.events-scope-seg[data-filter="focus"] > svg { flex-shrink: 0; }

.events-scope-more-wrap { position: relative; display: inline-flex; }

.events-scope-more-btn { gap: 0.3rem; }

.events-scope-more-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    min-width: 220px;
    padding: 0.35rem;
    background: #fff;
    border: 1px solid #e2ddf0;
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 12px 32px rgba(8, 78, 115, 0.16);
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* The menu is absolutely positioned, so it never grows the page's scroll
       height. On a short page (e.g. the empty "No tasks available" state) a tall
       list ran past the bottom of the viewport and the last items (the Subtasks
       scopes) became unreachable. Cap the height to the viewport and scroll
       internally so every item is always reachable. The mobile/tablet bottom-
       sheet variants set their own max-height and win in those ranges. */
    max-height: min(70vh, 380px);
    overflow-y: auto;
}

.events-scope-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 34px;
    padding: 0 0.6rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #3f3663;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}

.events-scope-item:hover { background: #f3edff; color: #0a5e88; }

.events-scope-item.is-active { background: #dcf1fb; color: #0a5e88; }

.events-scope-item .esi-count {
    min-width: 1.3rem;
    padding: 0.04rem 0.4rem;
    border-radius: 999px;
    background: #f1edfb;
    color: #0a5e88;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.events-scope-sep { height: 1px; margin: 0.18rem 0.3rem; background: #efeafb; }

/* ── Sort chip + Filters button/badge/panel ───────────────────────────────── */
.events-sort-chip { flex: 0 0 auto; }

.events-filters-wrap { position: relative; display: inline-flex; }

.events-filters-btn { gap: 0.4rem; }

.events-filters-btn.has-facets {
    background: var(--color-indigo-100, #dcf1fb);
    border-color: #a9dcf1;
    color: #0a5e88;
}

.ess-badge {
    min-width: 1.15rem;
    padding: 0.02rem 0.34rem;
    border-radius: 999px;
    background: var(--color-violet-600, #1488c7);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.35;
}

.events-filters-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    width: min(640px, 92vw);
    padding: 0.7rem;
    background: #fff;
    border: 1px solid #e2ddf0;
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 14px 36px rgba(8, 78, 115, 0.18);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.events-filters-panel .efp-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.events-filters-panel .efp-row--views {
    padding-top: 0.5rem;
    border-top: 1px dashed #ece6fa;
}

/* ── Active-filter chip row ───────────────────────────────────────────────── */
.events-active-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.45rem;
}

.events-active-chip {
    width: auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 28px;
    padding: 0 0.55rem;
    border: 1px solid #d8cffc;
    border-radius: var(--radius-pill, 999px);
    background: #f3effd;
    color: #0a5e88;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.events-active-chip:hover { background: #e9e1fb; border-color: #b9a7f5; }
.events-active-chip > svg { flex-shrink: 0; opacity: 0.7; }
.events-active-chip:hover > svg { opacity: 1; }

.events-active-chip--clear {
    background: transparent;
    border-color: transparent;
    color: var(--muted, #6b5f8a);
    text-decoration: underline;
}

.events-active-chip--clear:hover { background: #f5f1fd; color: #0a5e88; }

.events-facet-date-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--muted, #6b5f8a);
}

.events-facet-toggle,
.events-facet-clear {
    width: auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 38px;
    padding: 0 0.7rem;
    border: 1px solid #e2ddf0;
    border-radius: var(--radius-md, 10px);
    background: #fff;
    color: var(--ink, #1e1b4b);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.events-facet-toggle:hover,
.events-facet-clear:hover {
    border-color: #4fb8e6;
    box-shadow: 0 0 0 2px rgba(79, 184, 230, 0.08);
}

.events-facet-toggle[aria-pressed="true"],
.events-facet-toggle.is-active {
    background: var(--color-indigo-100, #dcf1fb);
    border-color: #a9dcf1;
    color: #0a5e88;
}

/* ── WS2: View-mode toggle (segmented pill) ──────────────────────────────── */
.events-viewmode-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid #e2ddf0;
    border-radius: var(--radius-pill, 999px);
    background: #eef8fd;
}

.evm-btn {
    width: auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 0.85rem;
    border: none;
    border-radius: var(--radius-pill, 999px);
    background: transparent;
    color: #4a3f6b;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.evm-btn:hover { color: #0a5e88; }

.evm-btn.is-active {
    background: var(--color-violet-600, #1488c7);
    color: #fff;
}

/* ── WS2: Compact LIST view ──────────────────────────────────────────────── */
.events-list-wrap {
    margin-top: 0;
    width: 100%;
    /* The list wrap is its OWN bounded vertical scroller so the sticky <thead>
       pins reliably within it — an ancestor `.section-card{overflow-x:clip}`
       otherwise captures sticky containment and the header scrolls away. This
       also keeps the heading / insight band / toolbar fixed while only the rows
       scroll (the intended "sticky header" feel). max-height fills the fold on
       the 1366×768 college display; rows beyond it scroll in place. */
    max-height: calc(100vh - 18rem);
    overflow-y: auto;
    overflow-x: auto;
}

.events-list-table {
    width: 100%;
    /* border-collapse: separate (not collapse) — Chromium ignores position:sticky
       on <th> in collapsed-border tables, which broke the sticky header. With
       border-spacing:0 + the per-cell border-bottom rules below, this renders
       identically while letting the header pin. */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
}

.events-list-table thead th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted, #6b5f8a);
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border, #dcf1fb);
    white-space: nowrap;
    /* Sticky header — stays pinned while the task list scrolls. Opaque purple-
       tinted background so rows don't bleed through; subtle shadow when stuck. */
    position: sticky;
    top: 0;
    z-index: 5;
    background: #faf8ff;
    box-shadow: 0 1px 0 var(--border, #dcf1fb), 0 4px 8px -6px rgba(8, 78, 115, 0.25);
}

.events-list-table td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border, #dcf1fb);
    vertical-align: middle;
}

/* Compact subtask tail for List/Board views — dense rows matching the task
   list (replaces the bulky subtask card panel, which clashed under the table).
   Violet left spine distinguishes a subtask row from a task row. */
.events-subtask-section { margin-top: 0.5rem; }
.events-subtask-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted, #6b5f8a);
}
.events-subtask-head .esh-count {
    background: var(--accent-soft, #dcf1fb);
    color: var(--color-violet-600, #1488c7);
    border-radius: 999px;
    padding: 0.02rem 0.42rem;
    font-size: 0.68rem;
    font-weight: 700;
}
.events-subtask-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.45rem 0.6rem 0.45rem 0.7rem;
    border-bottom: 1px solid var(--border, #dcf1fb);
    border-left: 3px solid #4fb8e6;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
}
.events-subtask-row:hover { background: #faf8ff; }
.events-subtask-row:focus-visible { outline: 2px solid var(--accent, #14a1db); outline-offset: -2px; }
.events-subtask-row .esr-main {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}
.events-subtask-row .esr-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink, #1e1b4b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.events-subtask-row .esr-parent {
    font-size: 0.72rem;
    color: var(--muted, #6b5f8a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.events-subtask-row .esr-status { flex-shrink: 0; }

.events-list-row {
    cursor: pointer;
    transition: background 0.12s;
}

.events-list-row:hover { background: #faf8ff; }

.events-list-row.is-pinned {
    background: #fbf9ff;
}

.events-list-row .elr-pin {
    width: 44px;
    position: relative;
    padding-left: 0.9rem;
}

.events-list-row .elr-pin::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: 999px;
    background: var(--pri, var(--accent, #14a1db));
}

.events-list-row .elr-pin .task-pin-btn {
    /* Reset the card-context absolute anchor (.task-pin-btn is position:absolute;
       right:36px for the card layout). In the list cell the pin must flow
       normally after the cell's padding-left, otherwise right:36px inside the
       44px cell pushes it past the card's clipped left edge and crops it. */
    position: static;
    top: auto;
    right: auto;
    width: auto;
    height: auto;
    display: inline-flex;
}

.events-list-row .elr-title {
    font-weight: 600;
    color: var(--ink, #1e1b4b);
}

.events-list-row .elr-task .task-dept-badge,
.events-list-row .elr-task .pipeline-link-chip {
    margin-left: 0.35rem;
    vertical-align: middle;
}

.events-list-row .elr-assignee-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.events-list-row .elr-progcell {
    min-width: 110px;
    white-space: nowrap;
}

.elr-progress {
    display: inline-block;
    width: 70px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent-soft, #dcf1fb);
    overflow: hidden;
    vertical-align: middle;
}

.elr-progress-bar {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent, #14a1db);
}

.elr-progress.is-overdue .elr-progress-bar { background: var(--hr-red, #ef4444); }

.elr-progress-label {
    margin-left: 0.4rem;
    font-size: 0.72rem;
    color: var(--muted, #6b5f8a);
}

/* Urgency discipline: only genuine overdue is RED, only due-today is AMBER;
   every other relative date stays neutral so the column reads calm. */
.elr-due { white-space: nowrap; color: var(--muted, #6b5f8a); }
.elr-due.is-overdue,
.elr-due.elr-due--overdue { color: var(--hr-red, #ef4444); font-weight: 600; }
.elr-due.elr-due--today { color: var(--hr-orange, #f59e0b); font-weight: 600; }

/* Completed rows recede — lower contrast so finished work doesn't compete with
   active items. The priority spine stays the single primary urgency cue. */
.events-list-row--done { opacity: 0.7; }
.events-list-row--done .elr-title { color: var(--muted, #6b5f8a); font-weight: 500; }

.elr-activity { white-space: nowrap; color: var(--muted, #6b5f8a); font-size: 0.78rem; }

.events-list-more-row td { text-align: center; padding: 1rem; border-bottom: none; }

/* ── WS2: Kanban BOARD view (read-only v1) ───────────────────────────────── */
/* Wrapper owns the horizontal scroll so the assigned-subtask tail (a block
   sibling appended after the flex board) sits BELOW the columns, not inside
   the scroll row. */
.events-board-wrap {
    display: block;
    overflow-x: auto;
}
.events-board {
    margin-top: 0.7rem;
    display: flex;
    gap: var(--space-12, 0.75rem);
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.board-col {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--hr-card-bg, #faf9ff);
    border: 1px solid var(--border, #dcf1fb);
    border-radius: var(--radius-lg, 14px);
    padding: 0.6rem;
}

.board-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-violet-600, #1488c7);
}

.board-col-head .board-col-count {
    min-width: 1.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: #fff;
    color: var(--ink, #1e1b4b);
    font-size: 0.72rem;
    text-align: center;
}

.board-col-body { display: flex; flex-direction: column; gap: 0.45rem; }
.board-col-empty { color: var(--muted, #6b5f8a); font-size: 0.78rem; padding: 0.3rem 0.1rem; }
.board-col-more { color: var(--muted, #6b5f8a); font-size: 0.74rem; padding: 0.25rem 0.1rem; }

.board-card {
    background: #fff;
    border: 1px solid var(--border, #dcf1fb);
    border-radius: var(--radius-md, 10px);
    padding: 0.5rem 0.6rem;
    cursor: pointer;
    transition: box-shadow 0.12s, border-color 0.12s;
}

.board-card:hover { box-shadow: 0 3px 10px rgba(20, 161, 219, 0.14); border-color: #a9dcf1; }
.board-card.is-pinned { border-left: 3px solid var(--accent, #14a1db); }

.board-card-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink, #1e1b4b);
    margin-bottom: 0.35rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.board-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.board-card-due { font-size: 0.72rem; color: var(--muted, #6b5f8a); }
.board-card-due.is-overdue,
.board-card-due.board-card-due--overdue { color: var(--hr-red, #ef4444); font-weight: 600; }
.board-card-due.board-card-due--today { color: var(--hr-orange, #f59e0b); font-weight: 600; }

.board-card-foot { display: flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; color: var(--muted, #6b5f8a); }

/* ── WS2: slim card density modifier (card mode) ─────────────────────────── */
.task-cards-grid--slim .task-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.events-view-tab {
    width: auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--hr-border, #dcf1fb);
    background: var(--hr-card-bg, #faf9ff);
    color: #4a3f6b;
    font-weight: 600;
}

.events-view-tab:hover {
    background: #f3edff;
    border-color: #a9dcf1;
}

.events-view-tab strong {
    min-width: 1.4rem;
    padding: 0.08rem 0.42rem;
    border-radius: 999px;
    background: #ffffff;
    color: var(--hr-text, #1e1b4b);
    font-size: 0.78rem;
    text-align: center;
}

.events-view-tab.is-active {
    background: #dcf1fb;
    border-color: #a9dcf1;
    color: #0a5e88;
}

.events-view-tab.is-active strong {
    background: #1488c7;
    color: #ffffff;
}

.events-view-tab[data-filter="overdue"] {
    color: #dc2626;
}

.events-view-tab[data-filter="overdue"] strong {
    background: #fee2e2;
    color: #dc2626;
}

.events-view-tab[data-filter="overdue"].is-active {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}

.events-view-tab[data-filter="overdue"].is-active strong {
    background: #dc2626;
    color: #ffffff;
}

/* Delegated Overdue — amber, distinct from the red "My Overdue" tab. These are
   tasks I assigned to others that are now overdue (follow-up, not my own action). */
.events-view-tab[data-filter="delegated-overdue"] {
    color: #b45309;
}

.events-view-tab[data-filter="delegated-overdue"] strong {
    background: #fef3c7;
    color: #b45309;
}

.events-view-tab[data-filter="delegated-overdue"].is-active {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
}

.events-view-tab[data-filter="delegated-overdue"].is-active strong {
    background: #d97706;
    color: #ffffff;
}

.task-card {
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(10, 94, 136, 0.06);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.46rem;
    cursor: pointer;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.task-card:hover {
    box-shadow: 0 14px 30px rgba(10, 94, 136, 0.12);
    transform: translateY(-1px);
    border-color: #a9dcf1;
}

/* Staff-side visual marker for tasks assigned by admin/department head.
   Keep card neutral and show only a small orange strip accent. */
.task-card.admin-source,
.task-card.admin-assigned-task {
    position: relative;
    background: #ffffff;
    border-color: var(--hr-border, #dcf1fb);
}

.task-card.admin-source::before,
.task-card.admin-assigned-task::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 14px;
    width: 4px;
    height: 22px;
    border-radius: 999px;
    background: #ff8a00;
}

.task-card-head {
    position: relative;
    display: block;
    min-width: 0;
    /* Reserve space for the kebab (30px) + pin button (28px) + gaps. */
    padding-right: 4.25rem;
}

.task-card-title {
    margin: 0;
    min-width: 0;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--hr-text, #1e1b4b);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.task-dept-badge {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.1em 0.5em;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    color: #0a5e88;
    background: #dcf1fb;
    border-radius: 9999px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Per-user pinned task — left accent on the card + inline pin button next
   to the kebab. The accent + sort-to-top do the heavy lifting; the icon
   button is the affordance to toggle. */
.task-card.is-pinned {
    border-left: 3px solid var(--brand-2, #6c5ce7);
}
.task-pin-btn {
    /* Anchored next to the kebab (kebab is right:0, 30px wide). 4px gap
       between them. The card-head reserves padding-right=4.25rem for both. */
    position: absolute;
    top: 0;
    right: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.task-pin-btn:hover {
    background: rgba(108, 92, 231, 0.10);
    color: var(--brand-2, #6c5ce7);
}
.task-pin-btn:active { transform: translateY(1px); }
.task-pin-btn:focus-visible {
    outline: 2px solid var(--brand-2, #6c5ce7);
    outline-offset: 2px;
}
.task-pin-btn.is-pinned {
    color: var(--brand-2, #6c5ce7);
}
.task-pin-btn.is-pinned:hover {
    background: rgba(108, 92, 231, 0.16);
}

.task-card-menu {
    position: absolute;
    top: 0;
    right: 0;
}

.task-card-menu summary {
    list-style: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--hr-border, #dcf1fb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4a3f6b;
    cursor: pointer;
    background: #fff;
    font-size: 1rem;
}

.task-card-menu summary::-webkit-details-marker {
    display: none;
}

.task-card-menu[open] summary {
    background: #f3edff;
}

.task-card-menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 116px;
    z-index: 5;
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(10, 94, 136, 0.15);
    padding: 0.35rem;
    display: grid;
    gap: 0.25rem;
}

.task-card-menu-list button {
    width: 100%;
    text-align: left;
    padding: 0.38rem 0.5rem;
    font-size: 0.82rem;
}

.task-card-menu-list button:hover {
    background: #f3edff;
}

.task-card-menu-list button.danger {
    color: #b0364c;
}

.task-card-desc {
    margin: 0;
    color: #6b6294;
    font-size: 0.83rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-card-schedule {
    color: #4a3f6b;
    font-size: 0.8rem;
}

.task-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    color: #6b6294;
    font-size: 0.78rem;
}

.task-card-meta--two-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.task-card-meta-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.task-meta-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #a099c0;
    min-width: 18px;
}

.task-own-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: #8338ec;
    background: #f3eaff;
    border: 1px solid #d9c5f9;
    border-radius: 6px;
    padding: 0.1rem 0.45rem;
}

.task-mini-avatar {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #f3edff;
    border: 1px solid #a9dcf1;
    color: #0a5e88;
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    background-repeat: no-repeat;
}

.task-meta-sep {
    color: #a099c0;
}

.task-card-foot {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: flex-end;
    margin-top: 0.2rem;
}

.task-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WS4 — Task Tags (labels). Colour-safe pills + drawer/form pickers. Inline
   styles supply the per-tag tint/colour/border (computed for legibility); these
   rules own shape, sizing, and layout only. Kept tight for 1366×768.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wrapper that groups a task's pills inline (list/card/board). */
.task-tag-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-4, 0.25rem);
    align-items: center;
    vertical-align: middle;
}

/* The pill itself. Background/colour/border-color come from inline style. */
.task-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4, 0.25rem);
    max-width: 11rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill, 999px);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #f1f5f9;
    color: #475569;
}

/* "+N" overflow chip — neutral, slightly muted. */
.task-tag-pill--more {
    background: #eef2f7 !important;
    color: #64748b !important;
    border-color: #d8dee9 !important;
    font-weight: 700;
}

/* List rows: nudge off the title/dept-badge run; cap pill width tighter. */
.events-list-row .elr-task .task-tag-pills {
    margin-left: 0.35rem;
}
.task-tag-pill--list { max-width: 8.5rem; font-size: 0.66rem; }

/* Board mini-cards: pills sit on their own tight row under the foot. */
.board-card .task-tag-pills {
    margin-top: 0.25rem;
}
.task-tag-pill--board { max-width: 7rem; font-size: 0.64rem; padding: 0.02rem 0.35rem; }

/* ── Drawer Tags section ── */
.edv-tags-section .edv-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6, 0.375rem);
    align-items: center;
}
.edv-tags-empty {
    font-size: 0.78rem;
    color: var(--muted, #6b5f8a);
}
/* Chips in the drawer carry an inline remove (×). */
.edv-tag-chip {
    max-width: 14rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.74rem;
}
.edv-tag-remove {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 -0.1rem 0 0.05rem;
    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    border-radius: var(--radius-pill, 999px);
}
.edv-tag-remove:hover { opacity: 1; }

/* "+ Tag" trigger — honours the global button-width gotcha. */
.edv-tag-add-btn {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.12rem 0.5rem;
    border: 1px dashed var(--color-slate-300, #e2e8f0);
    border-radius: var(--radius-pill, 999px);
    background: #fff;
    color: var(--muted, #6b5f8a);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--motion-fast, 120ms) ease, color var(--motion-fast, 120ms) ease;
}
.edv-tag-add-btn:hover {
    border-color: var(--accent, #14a1db);
    color: var(--accent, #14a1db);
}

/* ── Picker dropdown (shared by drawer + quick-add) ── */
.edv-tag-add-wrap,
.qa-tag-add-wrap {
    position: relative;
    display: inline-flex;
}
.edv-tag-picker {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    min-width: 12rem;
    max-width: 16rem;
    max-height: 16rem;
    overflow: auto;
    padding: var(--space-6, 0.375rem);
    background: #fff;
    border: 1px solid var(--color-slate-300, #e2e8f0);
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 12px 32px rgba(30, 27, 75, 0.16);
}
.edv-tag-opt-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.edv-tag-opt {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.4rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm, 6px);
    font-size: 0.78rem;
    color: var(--ink, #1e1b4b);
    text-align: left;
    cursor: pointer;
}
.edv-tag-opt:hover { background: var(--accent-soft, #eef2ff); }
.edv-tag-opt-swatch {
    width: 0.7rem;
    height: 0.7rem;
    flex: 0 0 auto;
    border-radius: var(--radius-pill, 999px);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.edv-tag-opt-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.edv-tag-opt-empty {
    padding: 0.35rem 0.4rem;
    font-size: 0.74rem;
    color: var(--muted, #6b5f8a);
}
.edv-tag-create {
    display: flex;
    gap: var(--space-6, 0.375rem);
    margin-top: var(--space-6, 0.375rem);
    padding-top: var(--space-6, 0.375rem);
    border-top: 1px solid var(--color-slate-300, #e2e8f0);
}
.edv-tag-create-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--color-slate-300, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
    font-size: 0.78rem;
}
.edv-tag-create-btn {
    width: auto;
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    border: none;
    border-radius: var(--radius-sm, 6px);
    background: var(--accent, #14a1db);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
}
.edv-tag-create-btn:hover { filter: brightness(0.95); }

/* ── Quick-Add / Edit form tag field ── */
.qa-tags-field {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6, 0.375rem);
    align-items: center;
}
.qa-tag-chip {
    max-width: 14rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.74rem;
}

.task-activity {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    color: #6b6294;
    font-size: 0.76rem;
}

/* ── 18-inch desktop (1366×768) optimisation ── */
@media (max-width: 1400px) {
    /* Narrow the sidebar */
    :root {
        --sidebar-w: 220px;
    }

    /* Dashboard KPI — fit 5 cards at 1366px */
    .dash-kpi-zone .info-cards {
        gap: 0.5rem;
    }

    .dash-kpi-zone .info-card {
        padding: 0.65rem;
        min-height: 80px;
    }

    .dash-kpi-zone .info-card .info-value {
        font-size: 1.45rem;
    }

    .dash-main-grid {
        gap: var(--dash-space-sm);
    }

    /* Tighten content shell padding */
    .content-shell {
        padding: 1rem 1.25rem 1.75rem;
    }

    /* Compact topbar */
    .topbar {
        padding: 0.7rem 1rem;
        margin-bottom: 0.7rem;
    }

    /* Smaller brand block */
    .brand-block {
        padding: 0.75rem 0.85rem 0.6rem;
    }
    .brand-logo {
        width: auto;
        height: 48px;
    }
    .brand-block strong {
        font-size: 0.88rem;
    }

    /* Compact sidebar menu items */
    .menu {
        padding: 0.5rem 0.4rem 0.5rem;
        gap: 0.1rem;
    }
    .menu .menu-item {
        padding: 0.45rem 0.7rem;
        font-size: 0.82rem;
        min-height: 34px;
    }

    /* Sidebar footer — compact */
    .side-nav-footer {
        padding: 0.5rem 0.6rem calc(env(safe-area-inset-bottom, 0px) + 0.5rem);
        gap: 0.35rem;
    }
    .side-nav-footer button {
        height: 36px !important;
        padding: 0 0.85rem !important;
        font-size: 0.8rem !important;
    }

    /* Submenu items (Requests, HR sub-items) */
    .req-side-submenu {
        padding: 0.05rem 0 0.2rem 0.65rem;
        gap: 0.04rem;
    }
    .req-side-item {
        padding: 0.32rem 0.6rem 0.32rem 0.75rem;
        font-size: 0.74rem;
    }

    /* Reduce section card padding */
    .section-card {
        padding: 1rem;
        border-radius: 16px;
    }

    /* KPI grid adjustments — prevent cramped cards */
    .info-cards,
    .info-cards.kpi-extended,
    .info-cards.kpi-managed {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    }

    /* Compact info cards */
    .info-card {
        padding: 0.6rem 0.65rem;
        min-height: 66px;
    }

    /* Tighten card base padding */
    .card {
        padding: 0.95rem;
    }

    /* Compact table cells */
    th, td {
        padding: 0.5rem 0.45rem;
    }

    /* Reduce general spacing */
    .table-wrap {
        margin-top: 0.55rem;
    }
    .actions {
        margin-top: 0.6rem;
    }

    /* Topbar welcome text */
    .topbar-welcome h2 {
        font-size: 0.95rem;
    }
    .topbar p {
        font-size: 0.78rem;
    }

    /* Constrain search bar width */
    .top-search {
        width: clamp(200px, 28vw, 380px);
    }
}

@media (max-width: 1240px) {
    .task-cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .task-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    /* Uniform control text on phones — proportionate to mobile body text
       (labels 0.84–0.86rem). !important keeps every existing/future control
       (filters, date pickers, selects, search fields, inline-styled inputs)
       on the same size. iOS auto-zoom-on-focus (which needs >=16px) is
       neutralised by the iOS-only viewport patch in staff-calendar-core.js. */
    input,
    select,
    textarea,
    .date-display-text {
        font-size: var(--control-font-mobile, 0.875rem) !important;
    }

    .events-view-tabs {
        width: 100%;
        gap: 0.75rem;
    }

    .events-filter-group {
        width: 100%;
        padding: 0.7rem;
    }

    .events-filter-group-label {
        padding: 0;
    }

    .events-view-tab {
        flex: 1 1 calc(50% - 0.4rem);
        justify-content: space-between;
    }

    /* Compact scope control: let the segment row wrap and scroll horizontally
       rather than overflow the card edge on narrow screens. */
    .events-scope-control {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .events-scope-seg { flex: 0 0 auto; }
    .events-scope-more-menu { left: auto; right: 0; }

    /* Filters panel spans the card width and anchors left on mobile. */
    .events-filters-wrap { flex: 1 1 auto; }
    .events-filters-btn { width: 100%; justify-content: center; }
    .events-filters-panel { right: auto; left: 0; width: min(92vw, 420px); }

    /* On narrow screens let the list flow and the whole card/page scroll
       (a nested scroller would trap touch scrolling); horizontal table scroll
       stays available. */
    .events-list-wrap { max-height: none; overflow-y: visible; overflow-x: auto; }

    .task-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALL TASKS — responsive tiers (added 2026-06-16, local polish, no ?v= bump)
   Breakpoint scheme (chosen to NOT fight the existing 620px block above or the
   768px drawer-bottom-sheet block at ~line 12510):
     • PHONE  ≤640px  → List <table> transforms into stacked card-rows (this
                        block). Complements the ≤620px rules above (scope
                        scroll, filters panel, 1-col cards) — they agree, never
                        contradict; 621–640px gets the stacking too.
     • TABLET 641–1024px → keep the <table>, hide Progress + Activity columns so
                        the remaining 6 cells fit with no horizontal scroll.
     • DESKTOP ≥1025px → untouched (no rule below applies above 1024px).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   PHONE (≤640px) — PREMIUM mobile task app (2026-06-16 redesign, local only).
   Calm, scannable, single-row control chrome + clean 2-line task rows. Goal:
   collapse the ~360px control stack to ~150–180px and make rows ~64–76px with
   minimal pills. Scoped ENTIRELY to ≤640 — iPad (641–1024) + desktop untouched.
   Complements the ≤620px block above (which provides the base mobile padding,
   bottom-nav, full-control-font); this block REFINES the All Tasks surface and
   intentionally overrides a few of that block's earlier toolbar/scope rules.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* ── Heading: keep small; drop the description row to save vertical space. ── */
    .events-list-card > h3#eventsHeading {
        font-size: 1.05rem;
        margin: 0 0 0.4rem;
    }
    /* !important: the base (non-media) clamp rule for #eventsDescription sits
       LATER in the file with equal specificity and would otherwise win. */
    .events-list-card > p#eventsDescription { display: none !important; }

    /* Bottom breathing room so the floating "+" (mobile-bottom-create) and the
       bottom nav never cover the last task row / Show-more button. */
    .events-list-card { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); }

    /* ── Summary chips: one compact horizontal-scroll strip, slightly smaller,
          with a subtle right-edge fade so it reads as scrollable. ── */
    .events-summary-band {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0.4rem;
        margin: 0 0 0.5rem;
        padding-bottom: 1px;
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
                mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
    }
    .events-summary-band::-webkit-scrollbar { display: none; }
    .events-summary-tile {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 0.28rem 0.6rem;
        gap: 0.32rem;
    }
    .events-summary-tile .est-count { font-size: 0.92rem; }
    .events-summary-tile .est-label { font-size: 0.72rem; }

    /* ════ COMPACT TOOLBAR ════════════════════════════════════════════════════
       Row 1 : scope segmented control (horizontal-scroll, edge-fade).
       Row 2 : [🔍 search (flex:1)] [Sort icon-btn] [Filters icon-btn + badge].
       Row 3 : view-mode segmented (List/Cards/Board/Calendar), short.
       The Sort <select> and Filters <button> are squeezed to ~42px icon tiles —
       handlers untouched; the native select still opens on tap. ════════════════ */
    .events-toolbar.events-primary-strip {
        flex-wrap: wrap;
        gap: 0.4rem;
        row-gap: 0.4rem;
        margin: 0 0 0.45rem;
    }

    /* Row 1 — scope segmented, scrollable with a right-edge fade affordance. */
    .events-scope-control {
        order: 1;
        flex: 1 1 100%;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
                mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
    }
    .events-scope-control::-webkit-scrollbar { display: none; }
    .events-scope-seg {
        flex: 0 0 auto;
        min-height: 40px;
        font-size: 0.82rem;
    }
    /* "More" must stay reachable — extra trailing space so the fade never hides it
       and the popover (bottom-sheet below) is always tappable. */
    .events-scope-more-wrap { padding-right: 0.35rem; }

    /* Row 2 — search grows, sort + filters collapse to icon tiles on the right.
       flex-basis:0 (not auto) so the search field does NOT claim its content
       width during wrap calc — that kept pushing the sort/filters tiles onto a
       4th line. With basis 0 all three share one row: search grows, tiles fixed. */
    .events-primary-strip .dash-filter-chip--search {
        order: 2;
        flex: 1 1 0;
        width: auto;            /* beat the ≤620px `.dash-filter-chip{width:100%}` */
        min-width: 120px;
        max-width: none;
        min-height: 42px;
    }
    .events-primary-strip .dash-filter-chip--search > input {
        font-size: var(--control-font-mobile, 0.875rem) !important;
    }

    /* Sort: icon-only square tile. Keep the leading sort icon; collapse the
       <select>'s visible text to a tap surface (transparent overlay, fixed
       width) so the native picker still opens. The `.events-primary-strip`
       ancestor lifts specificity to (0,2,0) so it beats the later ≤620px
       `.dash-filter-chip { width:100% }` rule (which would otherwise stretch
       this chip full-width and force it to wrap to its own line). */
    .events-primary-strip .events-sort-chip {
        order: 3;
        flex: 0 0 auto;
        width: 42px;
        min-width: 42px;
        max-width: 42px;
        min-height: 42px;
        padding: 0;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    .events-primary-strip .events-sort-chip > svg { color: #0a5e88; }
    .events-primary-strip .events-sort-chip > select {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0;
        opacity: 0;             /* invisible but fully tappable over the icon */
        cursor: pointer;
        -webkit-appearance: none;
                appearance: none;
    }

    /* Filters: icon-only square tile; hide the "Filters" word, keep the funnel
       icon + the active-count badge (which floats top-right of the tile).
       The wrap is a <button> (global button{width:100%}) → must force 42px. */
    .events-primary-strip .events-filters-wrap { order: 4; flex: 0 0 auto; width: auto; }
    .events-primary-strip .events-filters-btn {
        width: 42px;
        min-width: 42px;
        max-width: 42px;
        min-height: 42px;
        padding: 0;
        justify-content: center;
        gap: 0;
        position: relative;
    }
    .events-filters-btn > span:not(.ess-badge) {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .events-filters-btn .ess-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        box-shadow: 0 0 0 2px var(--card, #fff);
    }

    /* Row 3 — view-mode segmented, short and full-width (no tall standalone row). */
    .events-viewmode-toggle {
        order: 5;
        flex: 1 1 100%;
        margin-left: 0;
        width: 100%;
        justify-content: stretch;
        overflow: hidden;
    }
    .evm-btn {
        flex: 1 1 0;
        min-height: 36px;
        padding: 0 0.4rem;
        font-size: 0.78rem;
    }

    /* ════ LIST VIEW — clean, premium stacked rows (~64–76px) ═════════════════
       The <table> collapses to blocks. Line 1 = title (2-line clamp) + status
       pill. Line 2 = muted meta (due · assignee · dept). Priority spine on the
       left is the ONLY priority cue; Normal pill, progress, activity, pin all
       hidden to declutter. ════════════════════════════════════════════════════ */
    .events-list-wrap {
        overflow-x: hidden;
        max-height: none;
        overflow-y: visible;
    }
    .events-list-table,
    .events-list-table tbody {
        display: block;
        width: 100%;
        min-width: 0;                     /* kill any 980px table floor */
        font-size: 0.86rem;
    }
    .events-list-table thead { display: none; }

    .events-list-row {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: start;
        column-gap: 0.6rem;
        row-gap: 0.25rem;
        width: 100%;
        padding: 0.78rem 0.85rem 0.78rem 0.95rem;
        /* Priority spine — coloured per-row via the inline --pri var. */
        border-left: 3px solid var(--pri, var(--accent, #14a1db));
        border-bottom: 1px solid var(--border, #dcf1fb);
    }
    .events-list-row:last-child { border-bottom: none; }
    /* Urgent reads clearly red regardless of inline --pri fallbacks. */
    .events-list-row[style*="ef4444"] { border-left-color: #ef4444; }

    /* Declutter: drop pin + progress + activity, AND the "Normal" priority pill
       (Normal is the default → pure noise; Urgent/Lowest still inform). */
    .events-list-row .elr-pin,
    .events-list-row .elr-progcell,
    .events-list-row .elr-activity { display: none; }
    .events-list-row .elr-priority { display: none; }
    .events-list-row .elr-pin::before { content: none; }

    .events-list-table td {
        padding: 0;
        border-bottom: none;
        vertical-align: baseline;
    }

    /* Line 1 — title (2-line clamp, 15px/600) takes the left column. */
    .events-list-row .elr-task {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        white-space: normal;
    }
    .events-list-row .elr-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 0.94rem;
        font-weight: 600;
        line-height: 1.3;
        color: var(--ink, #1e1b4b);
    }
    /* Status pill — top-right, aligned with the title's first line. */
    .events-list-row .elr-status {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: start;
        white-space: nowrap;
        margin-top: 1px;
    }

    /* Tag pills under the title: show at most one inline; tighten width.
       The dept badge stays small; the pipeline chip is shrunk (below). */
    .events-list-row .elr-task .task-tag-pills { margin-left: 0; margin-top: 0.18rem; }
    .events-list-row .elr-task .task-tag-pill--list { max-width: 9rem; }
    .events-list-row .elr-task .task-tag-pill--list:nth-of-type(n+2) { display: none; }
    .events-list-row .elr-task .task-tag-pill--more { display: inline-flex; }

    /* Pipeline chip → tiny, muted, sits below the title (line-2 feel). */
    .events-list-row .elr-task .pipeline-link-chip {
        display: inline-flex;
        margin: 0.18rem 0 0;
        max-width: 100%;
        font-size: 0.68rem;
        padding: 0.04rem 0.45rem;
        color: var(--muted, #6b5f8a);
        background: #eef8fd;
        border-color: #ece6fa;
    }
    .events-list-row .elr-task .task-dept-badge {
        font-size: 0.66rem;
        padding: 0.06em 0.45em;
    }

    /* Line 2 — single muted meta row spanning full width: due · assignee. */
    .events-list-row .elr-due {
        grid-column: 1;
        grid-row: 2;
        align-self: center;
        font-size: 0.78rem;
        white-space: nowrap;
        color: var(--muted, #6b5f8a);
    }
    .events-list-row .elr-assignee {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        align-self: center;
        min-width: 0;
        font-size: 0.78rem;
    }
    .events-list-row .elr-assignee-cell {
        max-width: 100%;
        overflow: hidden;
        gap: 0.3rem;
    }
    .events-list-row .elr-assignee-cell .task-mini-avatar {
        width: 19px;
        height: 19px;
        font-size: 0.6rem;
    }
    .events-list-row .elr-assignee-cell .task-meta-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 7.5rem;
        color: var(--muted, #6b5f8a);
    }

    /* Completed rows: keep the receding treatment, title weight a touch lighter. */
    .events-list-row--done .elr-title { font-weight: 500; }

    /* Load-more spans the full block width. */
    .events-list-more-row,
    .events-list-more-row td { display: block; width: 100%; text-align: center; }

    /* Subtask tail rows — match the new aesthetic (slightly roomier tap target,
       same hairline + violet spine, calmer title). */
    .events-subtask-row {
        padding: 0.6rem 0.7rem 0.6rem 0.9rem;
        gap: 0.5rem;
    }
    .events-subtask-row .esr-title { font-size: 0.86rem; }
    .events-subtask-row .esr-parent { font-size: 0.7rem; }
    .events-subtask-head { padding: 0.55rem 0.7rem 0.35rem; }

    /* ── Filters popover + scope "More" menu → full-width bottom sheet ───────── */
    .events-filters-panel:not(.hidden),
    .events-scope-more-menu:not(.hidden) {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100vw;
        max-width: 100vw;
        max-height: 75vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -16px 40px rgba(8, 78, 115, 0.22);
        z-index: 1300;
        -webkit-overflow-scrolling: touch;
    }
    .events-filters-panel .efp-row { flex-direction: column; align-items: stretch; }
    .events-filters-panel .efp-row .dash-filter-chip,
    .events-filters-panel .efp-row .events-facet-toggle,
    .events-filters-panel .efp-row .events-facet-clear { width: 100%; }
    .events-scope-more-menu .events-scope-item { min-height: 44px; }

    /* ── Card view: clean single column of slim cards. ── */
    .task-cards-grid,
    .task-cards-grid.task-cards-grid--slim { grid-template-columns: 1fr; }

    /* ── Board: one ~80vw column at a time, swipe to the next. ── */
    .events-board .board-col { flex: 0 0 80vw; }
}

/* ── TABLET (641–1024px): keep the table, hide Progress + Activity to fit ─── */
@media (min-width: 641px) and (max-width: 1024px) {
    /* Drop the two least-essential columns (both <th> and <td>) so Task / Status
       / Priority / Assigned / Due fit within ~692px+ with no horizontal scroll.
       At 768px the table was 980px (overflowed); minus these two it fits. */
    .events-list-table th.elr-progcell,
    .events-list-table td.elr-progcell,
    .events-list-table th.elr-activity,
    .events-list-table td.elr-activity { display: none; }

    /* Pin the table to the wrap width with table-layout:fixed so a long Task
       title TRUNCATES instead of pushing the table past the viewport. Without
       this, a long title grew the Task column to ~293px → 714px table in a
       667px wrap, and overflow-x:hidden then CLIPPED the Due column. Fixed
       widths below are authoritative; Task takes the remainder and ellipsizes. */
    .events-list-table { table-layout: fixed; width: 100%; }
    .events-list-table .elr-pin { width: 34px; }
    .events-list-table .elr-status { width: 112px; }
    .events-list-table .elr-priority { width: 84px; }
    .events-list-table .elr-assignee { width: 120px; }
    .events-list-table .elr-due { width: 100px; }
    .events-list-table td.elr-task { overflow: hidden; }
    .events-list-table td.elr-task .elr-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* The list wrap need not scroll sideways once the table fits. */
    .events-list-wrap { overflow-x: hidden; }

    /* The desktop Filters popover is a 640px-wide absolute box anchored to a
       right-positioned button; at tablet widths that overflows the viewport
       (off the left edge at 768, below the fold at 1024). Make both the Filters
       panel and the scope "More" menu a viewport-constrained bottom sheet —
       consistent with the detail drawer, which also bottom-sheets ≤768px. */
    .events-filters-panel:not(.hidden),
    .events-scope-more-menu:not(.hidden) {
        position: fixed;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 0;
        top: auto;
        width: min(560px, 96vw);
        max-width: 96vw;
        max-height: 80vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -16px 40px rgba(8, 78, 115, 0.22);
        z-index: 1300;
        -webkit-overflow-scrolling: touch;
    }
}

.section-card[data-section="reports"] {
    grid-column: 1 / -1;
    overflow-x: clip;
}

.section-card[data-section="reports"] .table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #dcf1fb;
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: #fff;
    padding: 0;
    margin-top: 0;
}

.section-card[data-section="reports"] table {
    width: 100%;
    min-width: 940px;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

.section-card[data-section="reports"] th {
    white-space: normal;
    border-bottom: 1px solid #dcf1fb;
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b5f8a;
    padding: 0.85rem 1.25rem;
    vertical-align: bottom;
    background: #faf8ff;
}

/* Fix table-layout:fixed — widths must be on th (header row), not td */
.section-card[data-section="reports"] thead th:nth-child(1) { width: 25%; }
.section-card[data-section="reports"] thead th:nth-child(2) { width: 18%; }
.section-card[data-section="reports"] thead th:nth-child(3) { width: 17%; }
.section-card[data-section="reports"] thead th:nth-child(4) { width: 14%; }
.section-card[data-section="reports"] thead th:nth-child(5) { width: 12%; }
.section-card[data-section="reports"] thead th:nth-child(6) { width: 14%; }
.section-card[data-section="reports"] tbody td:last-child,
.section-card[data-section="reports"] thead th:last-child { padding-left: 0.6rem; padding-right: 0.85rem; }

.section-card[data-section="reports"] td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    background: #ffffff;
    border-top: none;
    border-bottom: 1px solid #f0edf7;
    padding: 0.85rem 1.25rem;
    vertical-align: middle;
    line-height: 1.28;
    transition: background 0.15s ease;
}

.section-card[data-section="reports"] tbody tr td:first-child {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.section-card[data-section="reports"] tbody tr td:last-child {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.section-card[data-section="reports"] tbody tr:hover td {
    background: #faf8ff;
}

.filters {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    align-items: stretch;
    max-width: 100%;
}

.filters > * {
    min-width: 0;
}

.filters.compact {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

/* ── Dashboard Filters (2-row labeled layout) ── */
/* ── Dashboard Header ── */
.dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.dash-header h3 {
    margin: 0 !important;
}

.dash-header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.dash-header-actions > button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
    border-radius: 8px;
    white-space: nowrap;
    width: auto !important;
}

.dash-header-actions > button svg {
    flex-shrink: 0;
}

/* ── Dashboard Filters (toolbar) ── */
.dash-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f8f7fc;
    border: 1px solid #e8e4f4;
    border-radius: 14px;
    padding: 0.45rem;
}

.dash-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 0;
    min-width: 0;
}

/* ── Filter Chips ── */
.dash-filter-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid #e2ddf0;
    border-radius: 10px;
    padding: 0 0.6rem;
    min-height: 38px;
    flex: 0 1 auto;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.dash-filter-chip:hover,
.dash-filter-chip:focus-within {
    border-color: #4fb8e6;
    box-shadow: 0 0 0 2px rgba(79, 184, 230, 0.08);
}

.dash-filter-chip svg {
    flex-shrink: 0;
    color: #8b7fb0;
}

.dash-filter-chip > select,
.dash-filter-chip > input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0.35rem 0 !important;
    min-height: 0 !important;
    height: auto !important;
    width: auto !important;
    max-width: 100%;
    font-size: 0.82rem !important;
    font-weight: 500;
    color: var(--ink, #1e1b4b);
    cursor: pointer;
}

.dash-filter-chip > select {
    padding-right: 1.2rem !important;
}

.dash-filter-chip--search {
    flex: 1 1 100px;
    min-width: 100px;
    max-width: 180px;
}

.dash-filter-chip--search > input {
    cursor: text !important;
    width: 100% !important;
    flex: 1 1 0;
}

.dash-filter-chip--date {
    cursor: pointer;
    overflow: visible;
    flex-shrink: 0;
    padding: 0 0.65rem;
}

.dash-filter-chip--date .report-date-range {
    display: inline-flex !important;
    align-items: center;
    border: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    gap: 0.45rem;
    box-shadow: none !important;
}

.dash-filter-chip--date .date-display-field {
    position: relative;
    min-height: 38px !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    cursor: pointer;
}

.dash-filter-chip--date .date-display-field > input[type="date"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dash-filter-chip--date .date-display-text {
    padding: 0 0.1rem !important;
    min-height: 38px !important;
    width: auto !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.82rem !important;
    font-weight: 500;
    color: var(--ink, #1e1b4b);
    white-space: nowrap;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.dash-filter-chip--date .date-display-field::after,
.dash-filter-chip--date .date-display-field::before {
    display: none !important;
}

.dash-filter-chip--date .report-date-sep {
    font-size: 0.78rem !important;
    font-weight: 600;
    color: #9892ac;
    flex-shrink: 0;
}

/* ── Load Report Button (in toolbar) ── */
.dash-filters > .report-btn-primary {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1.1rem !important;
    min-height: 38px;
    width: auto !important;
    max-width: none;
    border-radius: 10px !important;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    flex-grow: 0;
}

.dash-filters > .report-btn-primary svg {
    flex-shrink: 0;
}

/* ── Dashboard KPI Zone ── */
.dash-kpi-zone {
    margin-top: var(--dash-space-sm);
}

.dash-kpi-zone:empty {
    display: none;
}

.dash-kpi-zone .info-cards {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0;
}

.dash-kpi-zone .info-card {
    border-radius: 12px;
    padding: 1.25rem;
    min-height: 120px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
    cursor: default;
}

.dash-kpi-zone .info-card.info-card-clickable {
    cursor: pointer;
}

.dash-kpi-zone .info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(20, 161, 219, 0.13);
}

.dash-kpi-zone .info-card .info-icon {
    display: none;
}

.dash-kpi-zone .info-card .info-value {
    font-family: 'Manrope', 'DM Sans', sans-serif;
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1;
    margin-top: 0.5rem;
}

.dash-kpi-zone .info-card .info-label {
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.dash-kpi-zone .info-card .info-sub {
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 0.15rem;
}

/* ── Dashboard 2-Column Grid ── */
.dash-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dash-space-md);
    margin-top: var(--dash-space-md);
}

.dash-main-grid:has(.dash-col-right:empty) {
    grid-template-columns: 1fr;
}

.dash-main-grid:has(.dash-col-left:empty) {
    display: none;
}

.dash-col-left:empty,
.dash-col-right:empty {
    display: none;
}

/* ── My Work / Delegated Work stat grid ── */
.dash-insight-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dash-space-xs);
    margin-top: 0.35rem;
}

.dash-insight-stat {
    display: flex;
    align-items: center;
    gap: var(--dash-space-xs);
    padding: 0.6rem;
    border: 1px solid #e7ebf7;
    border-radius: var(--dash-radius-sm);
    background: #fff;
}

.dash-insight-stat .stat-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.dash-insight-stat .stat-icon svg {
    width: 18px;
    height: 18px;
}

.dash-insight-stat .stat-content {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.dash-insight-stat .stat-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2a48;
    line-height: 1.2;
}

.dash-insight-stat .stat-label {
    font-size: 0.74rem;
    color: #5f6d93;
    line-height: 1.25;
}

/* ── Dashboard Right Panel (Recent Activity) ── */
.dash-right-section {
    border: 1px solid #e5eaf8;
    border-radius: var(--dash-radius);
    padding: var(--dash-space-sm);
    background: #fbfcff;
}

.dash-right-section h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2a48;
    margin: 0 0 var(--dash-space-xs);
}

.dash-activity-list {
    display: grid;
    gap: 0.3rem;
}

.dash-activity-item {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    gap: var(--dash-space-xs);
    align-items: center;
    font-size: 0.82rem;
    color: #3a4563;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f0f3fc;
}

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

.dash-activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dash-activity-time {
    font-size: 0.72rem;
    color: #8892a8;
    white-space: nowrap;
}

/* ── Completion History Zone ── */
.dash-completion-history {
    margin-top: var(--dash-space-sm);
}

.dash-completion-history:empty {
    display: none;
}

.dash-completion-history .insight-history {
    border: 1px solid #e5eaf8;
    border-radius: var(--dash-radius);
    padding: var(--dash-space-sm);
    background: #fbfcff;
}

.dash-empty-state {
    text-align: center;
    padding: var(--dash-space-lg) var(--dash-space-sm);
    color: #7c6f9f;
    border: 1px dashed var(--border, #dcf1fb);
    border-radius: var(--dash-radius);
    background: #f4f8fb;
}

.dash-empty-state .empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--dash-space-xs);
    opacity: 0.5;
}

.dash-empty-state .empty-message {
    font-size: 0.92rem;
    margin-bottom: var(--dash-space-xs);
    color: #6b5f8a;
}

.dash-empty-state .empty-cta {
    font-size: 0.82rem;
    color: var(--accent, #14a1db);
    cursor: pointer;
    background: none;
    border: none;
    text-decoration: underline;
    font-weight: 600;
    padding: 0;
}

/* ── Dashboard section title ── */
.section-card[data-section="reports"] > h3,
.section-card[data-section="reports"] .dash-header h3 {
    font-family: 'Manrope', 'DM Sans', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ink, #1e1b4b);
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

/* ── Insight card detailed (refactored) ── */
.dash-col-left .insight-card-detailed {
    border: 1px solid #e5eaf8;
    border-radius: var(--dash-radius);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-size: 0.82rem;
    background: #fbfcff;
    margin-bottom: var(--dash-space-xs);
}

.dash-col-left .insight-card-detailed:last-child {
    margin-bottom: 0;
}

.dash-col-left .insight-card-detailed > strong {
    font-size: 1rem;
    color: #1f2a48;
}

.dash-col-left .insight-section {
    display: grid;
    gap: 0.3rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid #e7ebf7;
    border-radius: var(--dash-radius-sm);
    background: #ffffff;
}

.dash-col-left .insight-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #253056;
    letter-spacing: 0.01em;
}

/* ── Overview Mode: single-column when staff search card is shown ── */
.dash-main-grid.dash-overview-mode {
    grid-template-columns: 1fr;
}

/* ── Staff Overview Card Layout ── */
.ov-card-layout {
    display: grid;
    gap: var(--dash-space-sm);
}

/* Greeting */
.ov-greeting {
    padding: 0.25rem 0;
}

.ov-greeting-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 0.15rem;
    line-height: 1.2;
}

.ov-greeting-sub {
    font-size: 0.82rem;
    color: var(--muted);
    margin: 0;
    font-weight: 400;
}

/* Top Row: Progress + Side Cards */
.ov-top-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 0.75rem;
    align-items: stretch;
}

/* Progress Card */
.ov-progress-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--dash-radius);
    padding: 1.1rem 1.25rem;
    box-shadow: 0 2px 8px rgba(20, 161, 219, 0.06);
}

.ov-card-tag {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent);
    text-transform: uppercase;
}

.ov-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0.2rem 0 0.6rem;
}

.ov-progress-hero {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.ov-progress-pct {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--ink);
    line-height: 1;
}

.ov-progress-pct-sign {
    font-size: 1.6rem;
    font-weight: 700;
}

.ov-progress-bar-wrap {
    width: 100%;
    height: 8px;
    background: var(--accent-soft);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.ov-progress-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--accent), var(--hr-purple));
    transition: width 0.6s ease;
    min-width: 2px;
}

.ov-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--muted);
    text-transform: uppercase;
}

/* Side Cards (Tasks Assigned + Overdue) */
.ov-side-cards {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 0.75rem;
}

.ov-stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--dash-radius);
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 2px 8px rgba(20, 161, 219, 0.06);
}

.ov-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--dash-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ov-stat-icon--accent {
    background: var(--accent-soft);
    color: var(--accent);
}

.ov-stat-icon--red {
    background: #fef2f2;
    color: var(--hr-red);
}

.ov-stat-icon svg {
    width: 20px;
    height: 20px;
}

.ov-stat-body {
    display: flex;
    flex-direction: column;
}

.ov-stat-tag {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--muted);
    text-transform: uppercase;
}

.ov-stat-num {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.15;
}

.ov-stat-urgent--active {
    border-color: #fecaca;
    background: #fff5f5;
}

.ov-stat-urgent--active .ov-stat-icon--red {
    background: #fee2e2;
}

.ov-stat-urgent--active .ov-stat-num {
    color: var(--hr-red);
}

/* Clickable dashboard cards */
.ov-progress-card[data-dash-nav],
.ov-stat-card[data-dash-nav],
.ov-delegated-count[data-dash-nav],
.ov-delegated-item[data-dash-nav],
.ov-completed-item[data-dash-nav] {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ov-progress-card[data-dash-nav]:hover,
.ov-stat-card[data-dash-nav]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(20, 161, 219, 0.13);
}

.ov-delegated-item[data-dash-nav]:hover {
    background: var(--accent-soft);
    border-radius: 8px;
}

.ov-completed-item[data-dash-nav]:hover {
    background: var(--accent-soft);
    border-radius: 8px;
}

.ov-delegated-count[data-dash-nav]:hover {
    text-decoration: underline;
}

/* Mid Row: Delegated Work + Completed Activity */
.ov-mid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.ov-delegated-card,
.ov-completed-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--dash-radius);
    padding: 1rem 1.1rem;
    box-shadow: 0 2px 8px rgba(20, 161, 219, 0.06);
}

.ov-delegated-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.ov-delegated-header h4,
.ov-completed-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.ov-delegated-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    cursor: default;
}

.ov-delegated-items {
    display: grid;
    gap: 0.55rem;
}

.ov-delegated-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.7rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--dash-radius-sm);
}

.ov-delegated-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ov-dicon--accent { background: var(--accent-soft); }
.ov-dicon--green  { background: #ecfdf5; }

.ov-delegated-item-icon svg {
    width: 18px;
    height: 18px;
}

.ov-delegated-item-info {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
    flex: 1;
}

.ov-delegated-item-info strong {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
}

.ov-delegated-item-info span {
    font-size: 0.72rem;
    color: var(--muted);
}

.ov-delegated-item-badge {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    margin-left: auto;
    flex-shrink: 0;
}

.ov-delegated-empty {
    font-size: 0.82rem;
    color: var(--muted);
    text-align: center;
    padding: 1rem 0;
}

/* Completed Activity */
.ov-completed-card h4 {
    margin-bottom: 0.75rem;
}

.ov-completed-card {
    border-style: dashed;
    border-color: var(--border);
}

.ov-completed-list {
    display: grid;
    gap: 0.45rem;
}

.ov-completed-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border);
}

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

.ov-completed-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
    margin-top: 0.35rem;
    flex-shrink: 0;
}

.ov-completed-info {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
}

.ov-completed-title {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ov-completed-time {
    font-size: 0.7rem;
    color: var(--muted);
}

.ov-completed-empty {
    text-align: center;
    padding: 1.2rem 0.5rem;
    color: var(--muted);
}

.ov-completed-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.5rem;
    opacity: 0.4;
}

.ov-completed-empty p {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
    margin: 0 0 0.2rem;
}

.ov-completed-empty span {
    font-size: 0.72rem;
    color: var(--muted);
}

/* Bottom Stats Row */
.ov-bottom-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.ov-bottom-stat {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--dash-radius);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ov-bottom-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--muted);
    text-transform: uppercase;
}

.ov-bottom-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
}

.ov-bottom-done {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ok);
}

/* Responsive: stack on small screens */
@media (max-width: 900px) {
    .ov-top-row {
        grid-template-columns: 1fr;
    }
    .ov-side-cards {
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr;
    }
    .ov-mid-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .ov-side-cards {
        grid-template-columns: 1fr;
    }
    .ov-bottom-row {
        grid-template-columns: 1fr;
    }
    .ov-progress-pct {
        font-size: 2.2rem;
    }
}

/* Legacy compat for report-action-buttons (in case referenced by other sections) */
.report-action-buttons {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: nowrap;
}

.report-action-buttons > button {
    flex: 1 1 0;
    min-width: 0;
}
.report-btn-primary {
    background: #0e7bb0 !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600;
    transition: filter 0.2s ease, transform 0.15s ease;
}
.report-btn-primary:hover { filter: brightness(1.08); }
.report-btn-secondary {
    background: #fff !important;
    color: #0e7bb0 !important;
    border: 1.5px solid #0e7bb0 !important;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.report-btn-secondary:hover { background: #eef8fd !important; }
.report-btn-ghost {
    background: transparent !important;
    color: var(--muted, #6b5f8a) !important;
    border: 1px solid var(--border, #dcf1fb) !important;
    font-weight: 500;
}
.report-btn-ghost:hover { background: #f9f8fc !important; color: var(--ink, #1e1b4b) !important; }

.report-date-range {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    border: 1px solid #d7dff1;
    border-radius: 12px;
    background: #fff;
    padding: 0.2rem 0.45rem;
}

.report-date-range:focus-within {
    border-color: #8f78ff;
    box-shadow: 0 0 0 3px rgba(122, 92, 255, 0.12);
}

.report-date-range input {
    width: auto;
    max-width: none;
    flex: 1 1 0;
    min-height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    padding: 0.35rem 0.25rem;
}

.report-date-range input:focus {
    outline: none;
    box-shadow: none;
}

.report-date-sep {
    font-size: 0.82rem;
    font-weight: 600;
    color: #7f89a5;
    white-space: nowrap;
}

.btn-all-time {
    padding: 4px 12px;
    border: 1.5px solid #1488c7;
    border-radius: 6px;
    background: #fff;
    color: #1488c7;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.btn-all-time:hover { background: #f3eeff; }
.btn-all-time.active { background: #1488c7; color: #fff; }

.date-display-field {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 44px;
}

.date-display-field > input[type="date"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
}

.date-display-text {
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-family: inherit;
    font-size: 0.83rem;
    font-weight: 400;
    padding: 0.72rem 2.2rem 0.72rem 0.9rem;
    border: 1px solid #d7dff1;
    border-radius: 12px;
    background: #fff;
    color: #8b94ac;
    line-height: 1.2;
    /* Keep the placeholder/value on a single line so the box height stays
       identical to the sibling time inputs — a wrapping placeholder (e.g.
       "Select end date") otherwise makes the End Date box taller. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.date-display-field.has-value .date-display-text {
    color: #223056;
}

.date-display-field::after {
    content: '';
    position: absolute;
    right: 0.9rem;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    border: 1.8px solid #243048;
    border-radius: 4px;
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0.88;
}

.date-display-field::before {
    content: '';
    position: absolute;
    right: 0.9rem;
    top: calc(50% - 6px);
    width: 16px;
    height: 4px;
    border-top: 1.8px solid #243048;
    pointer-events: none;
    opacity: 0.88;
    z-index: 1;
}

.date-display-field.is-locked {
    pointer-events: none;
}

.date-display-field.is-locked .date-display-text {
    background: #f5f6fa;
    color: #8b94ac;
    cursor: default;
}

.date-display-field.is-locked::after,
.date-display-field.is-locked::before {
    opacity: 0.35;
}

.date-display-field:focus-within .date-display-text {
    border-color: #8f78ff;
    box-shadow: 0 0 0 3px rgba(122, 92, 255, 0.12);
    color: #223056;
}

.date-display-field--range {
    min-width: 0;
    flex: 1 1 0;
}

.report-date-range .date-display-text {
    min-height: 36px;
    padding: 0.35rem 1.7rem 0.35rem 0.25rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
}

.report-date-range .date-display-field {
    min-height: 0;
    align-self: center;
}

.report-date-range .date-display-field::after,
.report-date-range .date-display-field::before {
    right: 0.2rem;
}

.report-date-range .date-display-field:focus-within .date-display-text {
    box-shadow: none;
}

#loadReportBtn {
    background: linear-gradient(135deg, var(--hr-blue, #14a1db), #1488c7);
}

#exportCsvBtn,
#refreshEventsBtn {
    border-color: #d5dcf0;
}

#reportBody button.ghost {
    min-width: 110px;
    width: auto;
    border-radius: 10px;
    background: #f9fbff;
    border-color: #d7dff1;
    font-weight: 600;
}

#reportInfographics {
    margin-top: 0.75rem;
    max-width: 100%;
    overflow-x: hidden;
}

#reportInfographics:empty {
    display: none;
}

.report-table-tools {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}

.report-type-filter {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    flex-shrink: 0;
}

.report-type-filter span {
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    color: #6b5f8a;
    white-space: nowrap;
}

.report-type-filter select {
    height: 32px;
    min-width: 72px;
    font-size: 0.78rem;
    padding: 0 0.4rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    cursor: pointer;
}
.report-type-filter select:focus {
    border-color: #4fb8e6;
    box-shadow: 0 0 0 2px rgba(79, 184, 230, 0.12);
    outline: none;
}

.report-table-tools input[type="search"] {
    height: 32px;
    min-height: 0;
    width: 200px !important;
    max-width: 220px;
    flex: 0 1 200px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0 0.55rem;
    font-size: 0.78rem;
    background: #fff;
    color: #1f2937;
}
.report-table-tools input[type="search"]::placeholder {
    color: #9ca3af;
    font-size: 0.75rem;
}
.report-table-tools input[type="search"]:focus {
    outline: none;
    border-color: #4fb8e6;
    box-shadow: 0 0 0 2px rgba(79, 184, 230, 0.12);
}

/* ── Tasks Registry From/To date-range filter ── */
.report-table-tools .report-date-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}
.report-table-tools .report-date-filter .report-date-ico {
    color: #9ca3af;
    flex-shrink: 0;
}
.report-table-tools .report-date-filter .report-date-sep {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b5f8a;
}
.report-table-tools .report-date-filter input[type="date"] {
    height: 32px;
    min-height: 0;
    width: auto !important;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0 0.4rem;
    font-size: 0.76rem;
    color: #374151;
    background: #fff;
    cursor: pointer;
}
.report-table-tools .report-date-filter input[type="date"]:focus {
    outline: none;
    border-color: #4fb8e6;
    box-shadow: 0 0 0 2px rgba(79, 184, 230, 0.12);
}
.report-table-tools .report-date-clear {
    width: auto !important;
    min-height: 0;
    height: 26px;
    padding: 0 0.45rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #6b5f8a;
    cursor: pointer;
}
.report-table-tools .report-date-clear:hover { background: #eef8fd; color: #0e7bb0; }
.report-table-tools .report-date-clear.hidden { display: none !important; }

/* Push export + pager to right */
.report-table-tools .report-btn-secondary {
    height: 32px;
    min-height: 0;
    width: auto !important;
    margin-left: auto;
    padding: 0 0.65rem !important;
    font-size: 0.76rem;
    border-radius: 6px !important;
    white-space: nowrap;
    gap: 0.3rem;
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0;
}
.report-table-tools .report-btn-secondary svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.report-table-pager {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.25rem;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.report-pager-info {
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-size: 0.73rem;
    font-weight: 500;
    color: #9ca3af;
    margin-right: 0.25rem;
    white-space: nowrap;
}

.report-table-pager span:not(.report-pager-info) {
    min-width: 0;
    text-align: center;
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 0.73rem;
    color: #4b5563;
    padding: 0 0.2rem;
}

.report-table-pager .ghost {
    width: auto;
    min-width: 0;
    height: 28px;
    padding: 0 0.55rem;
    border-radius: 6px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    font-size: 0.73rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    display: inline-flex;
    align-items: center;
}
.report-table-pager .ghost:hover:not(:disabled) {
    background: #e5e7eb;
    border-color: #d1d5db;
}
.report-table-pager .ghost:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Table footer wrapper for pager inside report-table-tools */
.section-card[data-section="reports"] .report-table-tools + .table-wrap {
    margin-top: 0;
}

.section-card[data-section="reports"] .report-table-tools ~ .report-table-pager-footer {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid #dcf1fb;
    border-top: none;
    border-radius: 0 0 12px 12px;
}

@media (max-width: 1180px) {
    .report-table-tools {
        flex-wrap: wrap;
    }

    .report-table-tools .report-btn-secondary {
        margin-left: 0;
    }

    .report-table-pager {
        width: 100%;
        justify-content: flex-start;
        margin-top: 0.25rem;
    }
}

.report-task-main {
    font-family: 'Manrope', 'DM Sans', sans-serif;
    font-weight: 700;
    color: #1e1b4b;
    font-size: 0.88rem;
    line-height: 1.2;
}

.report-task-sub {
    margin-top: 0.25rem;
    font-size: 0.7rem;
    color: #6b5f8a;
    letter-spacing: 0.01em;
}

.report-task-performer {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: #4a5568;
    font-weight: 500;
}

.report-time-main {
    font-weight: 600;
    color: #2c3658;
    font-size: 0.84rem;
}

.report-time-sub {
    color: #6f7a99;
    font-size: 0.79rem;
    margin-top: 0.22rem;
}

.report-cell-task {
    width: 30% !important;
}

.report-cell-people {
    width: 16% !important;
}

.report-person-cell {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #4a5568;
    font-weight: 500;
}

.report-person-cell .report-person-name {
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

.report-person-secondary {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: #8a93ad;
    font-weight: 400;
    margin-top: 0.3rem;
}

.report-person-secondary .report-person-name {
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

.report-person-secondary .task-mini-avatar {
    width: 18px;
    height: 18px;
    font-size: 0.6rem;
    flex-shrink: 0;
}

.report-na {
    color: #aab0c6;
    font-size: 0.9rem;
}

.report-cell-schedule {
    width: 16% !important;
}

.report-cell-status {
    width: 15% !important;
    overflow: hidden;
}

.report-cell-report {
    width: 10% !important;
    color: #223056;
    font-weight: 500;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.report-cell-actions {
    width: 15% !important;
    text-align: left;
    white-space: nowrap;
}

.report-schedule-stack {
    display: grid;
    gap: 0.14rem;
}

.report-status-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    max-width: 100%;
    overflow: hidden;
}
.report-status-wrap .status-badge,
.report-status-wrap .status-sub-tag {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-task-card .task-card-head {
    padding-right: 0;
}

.report-task-card .task-card-schedule {
    font-size: 0.82rem;
}

.report-task-card .task-card-foot {
    margin-top: 0.35rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
}

.report-task-card .task-tags {
    align-items: center;
    gap: 0.45rem;
}

.report-task-card .task-tags .status-badge,
.report-task-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    min-height: 32px;
    padding: 0.42rem 0.82rem;
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1;
    font-weight: 600;
    border: 1px solid transparent;
}

.report-task-card .status-completed {
    background: #edf8f1;
    color: #226b44;
    border-color: #cae6d6;
}

.report-task-card .status-in_progress {
    background: #f3efff;
    color: #5a38b4;
    border-color: #ddd2fb;
}

.report-task-card .status-pending_approval,
.report-task-card .status-report_submitted {
    background: #fcf4e8;
    color: #9a6716;
    border-color: #efd8b3;
}

.report-task-card .status-rejected {
    background: #fff0f2;
    color: #af4354;
    border-color: #f3cad1;
}

.report-task-chip-submitted {
    background: #fcf4e8;
    color: #9a6716;
    border-color: #efd8b3;
}

.report-task-card .status-ended {
    background: #f1f4fa;
    color: #5a6783;
    border-color: #d5ddeb;
}

.report-task-card .status-report_pending,
.report-task-chip-pending {
    background: #fcf4e8;
    color: #9a6716;
    border-color: #efd8b3;
}

.report-task-card .status-overdue,
.report-task-chip-overdue {
    background: #fff0f0;
    color: #b04c55;
    border-color: #f2c7cc;
}

.report-task-card .status-scheduled,
.report-task-chip-scheduled {
    background: #eef4ff;
    color: #3555a6;
    border-color: #d1ddfb;
}

.report-cell-status .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    min-height: 26px;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-size: 0.625rem;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.report-task-activity {
    align-items: stretch;
}

#reportBody button.report-task-view-btn {
    width: auto;
    min-width: 0;
    min-height: 28px;
    padding: 0.28rem 0.58rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #14a1db;
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

#reportBody button.report-task-view-btn:hover {
    background: transparent;
    border-color: transparent;
    color: #1276c2;
    box-shadow: none;
    transform: none;
    filter: none;
    text-decoration: underline;
}

#reportBody button.report-task-view-btn:active,
#reportBody button.report-task-view-btn:focus-visible {
    background: #f4f7fc;
    border-color: #bcc8e1;
    color: #17233f;
    box-shadow: none;
    transform: none;
    filter: none;
}

.calendar-toolbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    align-items: center;
    padding-bottom: 0.15rem;
}

.calendar-studio {
    background: #ffffff;
    border-color: #e8e5f0;
    grid-column: 1 / -1;
    max-width: none;
    box-shadow: 0 1px 8px rgba(20, 161, 219,0.04);
}

.events-list-card {
    grid-column: 1 / -1;
    overflow-x: clip;
    background: var(--hr-bg, #eef8fd);
    padding-bottom: 2.5rem;
}

/* Compressed header chrome — the All Tasks page leads with content, not a big
   title block. Heading + one-line description sit tight above the insight band
   so the first task row lands high in the fold. */
.events-list-card > h3#eventsHeading {
    color: var(--hr-text, #1e1b4b);
    font-size: 1.1rem;
    margin: 0 0 0.05rem;
    line-height: 1.15;
}

.events-list-card > p#eventsDescription {
    color: #7c6f9f;
    font-size: 0.76rem;
    margin: 0 0 0.45rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.section-card[data-section="messages"] {
    grid-column: 1 / -1;
    overflow-x: clip;
    padding: 0;
    border-radius: 18px;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

.content-shell:has(> .grid > .section-card[data-section="messages"]:not(.hidden)) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    height: 100%;
    max-height: 100%;
    padding: 0;
}

.content-shell:has(> .grid > .section-card[data-section="messages"]:not(.hidden)) > .topbar {
    margin-bottom: 0;
    border-radius: 0;
    flex-shrink: 0;
}

.content-shell > .grid:has(> .section-card[data-section="messages"]:not(.hidden)) {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.content-shell > .grid:has(> .section-card[data-section="messages"]:not(.hidden)) > .section-card[data-section="messages"] {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    border-radius: 0;
}

.section-card[data-section="staff"] {
    grid-column: 1 / -1;
    overflow-x: clip;
}

.section-card[data-section="staff"] .staff-layout,
.staff-layout {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 1.1rem;
    margin-top: 0.75rem;
    align-items: start;
    min-width: 0;
    max-width: 100%;
}

.section-card[data-section="staff"] .staff-panel,
.staff-panel {
    border: 1px solid #e7ebf8;
    border-radius: 14px;
    padding: 0.85rem;
    background: #ffffff;
    min-width: 0;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
}

.staff-layout .staff-panel:first-child {
    width: 100%;
}

.staff-layout .staff-panel:last-child {
    width: 100%;
}

.staff-panel h4 {
    margin: 0 0 0.6rem;
    font-size: 1.02rem;
}

.staff-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.staff-list-head p {
    margin: 0;
    font-size: 0.82rem;
    color: #6a7597;
}

.staff-list-filters {
    margin-bottom: 0.75rem;
}

.staff-list-filters select {
    padding: 0.38rem 0.7rem;
    border: 1px solid #d0d8f0;
    border-radius: 8px;
    font-size: 0.87rem;
    color: #26355d;
    background: #f4f7ff;
    cursor: pointer;
    min-width: 180px;
}

.section-card[data-section="staff"] .table-wrap {
    margin-top: 0.4rem;
    max-width: 100%;
    overflow-x: auto;
}

.section-card[data-section="staff"] table {
    min-width: 560px;
}

.section-card[data-section="staff"] td:last-child {
    white-space: nowrap;
}

.section-card[data-section="staff"] td:last-child button {
    width: auto;
    min-width: 74px;
    margin-right: 0.35rem;
}

.section-card[data-section="staff"] td:last-child button:last-child {
    margin-right: 0;
}

.staff-profile-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Staff Form Sections ─────────────────────── */
.staff-form-section {
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 16px;
    padding: 1.25rem 1.35rem;
    background: #fff;
    transition: box-shadow 0.2s;
}

.staff-form-section:hover {
    box-shadow: 0 2px 12px rgba(20, 161, 219, 0.06);
}

.staff-form-section--highlight {
    border-color: rgba(20, 161, 219, 0.25);
    background: #faf8ff;
}

.staff-form-section-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--hr-border, #dcf1fb);
}

.staff-form-repeat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--hr-border, #dcf1fb);
}

.staff-form-repeat-head > .staff-form-section-head {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.staff-form-section-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #dcf1fb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--hr-blue, #14a1db);
}

.staff-form-section-text {
    flex: 1 1 auto;
    min-width: 0;
}

.staff-form-section-head h5,
.staff-form-repeat-head h5 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--hr-text, #1e1b4b);
    letter-spacing: 0.01em;
}

.staff-form-section-head p,
.staff-form-repeat-head p {
    margin: 0.2rem 0 0;
    color: var(--hr-muted, #8b80b0);
    font-size: 0.76rem;
    font-weight: 400;
}

/* ── Form Grids ─────────────────────── */
.staff-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    align-items: start;
    min-width: 0;
    max-width: 100%;
}

.staff-form-grid--3col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.staff-form-field {
    min-width: 0;
    overflow: hidden;
}

.staff-form-field.full,
#userForm .actions,
#userForm .staff-form-actions {
    grid-column: 1 / -1;
}

.staff-form-field label {
    display: block;
    margin-bottom: 0.32rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hr-muted, #8b80b0);
}

/* Staff form only (Add/Edit Staff) — sentence-case, AA-contrast labels.
   Scoped so the shared .staff-form-field component (e.g. newStaffOnboardForm)
   keeps its original styling until we decide to unify. */
.staff-profile-form .staff-form-field label {
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: 0;
    color: #475569;
}

.required-mark {
    color: #ef4444;
    font-weight: 700;
}

.staff-inline-check label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0;
    font-weight: 600;
}

/* ── Toggle Switch ─────────────────────── */
.staff-toggle-check {
    display: inline-flex !important;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    margin: 0.35rem 0;
    text-transform: none !important;
    letter-spacing: 0 !important;
    position: relative;
}
.staff-toggle-check input[type="checkbox"] {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
.staff-toggle-track {
    position: relative;
    width: 36px;
    height: 20px;
    background: #d4d0e6;
    border-radius: 99px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.staff-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 0.2s;
}
.staff-toggle-check input:checked + .staff-toggle-track {
    background: var(--hr-blue, #14a1db);
}
.staff-toggle-check input:checked + .staff-toggle-track .staff-toggle-knob {
    transform: translateX(16px);
}
.staff-toggle-check input:focus-visible + .staff-toggle-track {
    box-shadow: 0 0 0 3px rgba(20, 161, 219, 0.18);
}
.staff-toggle-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hr-text, #1e1b4b);
}

/* ── Subsections ─────────────────────── */
.staff-form-subsection {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid #eef2f7;
}

.staff-form-subsection-title {
    margin: 0 0 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hr-blue, #14a1db);
}

.staff-form-help {
    display: block;
    margin: 0.25rem 0 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--hr-text-muted, #6b7280);
}
.staff-form-help strong {
    color: var(--hr-text, #111827);
    font-weight: 600;
}

.staff-subsection-header-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}
.staff-subsection-header-row .staff-form-subsection-title {
    margin: 0;
}
.staff-subsection-header-row .staff-toggle-check {
    margin: 0;
    flex-shrink: 0;
}

/* ── Toggle Row ─────────────────────── */
.staff-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.2rem;
}
.staff-toggle-row input[type="checkbox"] { width: auto; }
.staff-toggle-row label { font-size: 0.78rem; color: var(--hr-muted); margin: 0; text-transform: none; letter-spacing: 0; }

/* ── Multi-Department Tag Selector ────────────── */
.multi-dept-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.multi-dept-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-height: 1.4rem;
}
/* When tags container holds rows, stack vertically */
.multi-dept-tags:has(.multi-dept-row) {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
}
.multi-dept-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--hr-accent, #1488c7);
    color: #fff;
    font-size: 0.72rem;
    padding: 0.15rem 0.45rem;
    border-radius: 10px;
    line-height: 1.3;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.multi-dept-tag .multi-dept-tag-x {
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.8;
    margin-left: 0.15rem;
    flex-shrink: 0;
}
.multi-dept-tag .multi-dept-tag-x:hover {
    opacity: 1;
}
/* Row-based layout for additional departments with role */
.multi-dept-tags-with-roles {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.multi-dept-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 8px;
    background: #faf9ff;
    margin-bottom: 0.35rem;
    box-sizing: border-box;
}
.multi-dept-row .multi-dept-row-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hr-heading, #1e1b4b);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.multi-dept-row.multi-dept-row--primary {
    background: linear-gradient(0deg, rgba(20, 161, 219, 0.06), rgba(20, 161, 219, 0.06)), #faf9ff;
    border-color: rgba(20, 161, 219, 0.35);
}
.multi-dept-row-primary-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    background: var(--hr-accent, #1488c7);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
}
.multi-dept-role-select {
    border: 1px solid var(--hr-border, #dcf1fb);
    background: #fff;
    color: var(--hr-heading, #1e1b4b);
    font-size: 0.74rem;
    padding: 0.22rem 0.4rem;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    min-width: 130px;
    max-width: 170px;
}
.multi-dept-role-select:focus {
    border-color: var(--hr-accent, #1488c7);
}
.multi-dept-row .multi-dept-row-x {
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: var(--hr-muted, #6b7280);
    opacity: 0.6;
    flex-shrink: 0;
    line-height: 1;
    padding: 0 0.15rem;
    transition: opacity 0.15s, color 0.15s;
}
.multi-dept-row .multi-dept-row-x:hover {
    opacity: 1;
    color: #dc2626;
}
.multi-dept-picker {
    font-size: 0.78rem;
    padding: 0.3rem 0.5rem;
    border: 1px dashed var(--hr-border, #dcf1fb);
    border-radius: 8px;
    background: #faf9ff;
    color: var(--hr-muted, #6b7280);
    cursor: pointer;
}
.multi-dept-picker:focus {
    border-color: var(--hr-accent, #1488c7);
    outline: none;
}

/* ── Repeating Sections ─────────────────────── */
.staff-repeat-list {
    display: grid;
    gap: 0.75rem;
}

.staff-repeat-row {
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 12px;
    padding: 1rem;
    background: #faf9ff;
    transition: border-color 0.15s;
}

.staff-repeat-row:hover {
    border-color: rgba(20, 161, 219, 0.3);
}

/* ── Add Row Button ─────────────────────── */
.staff-form-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: auto;
    padding: 0.4rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hr-blue, #14a1db);
    background: rgba(20, 161, 219, 0.08);
    border: 1px solid rgba(20, 161, 219, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.staff-form-add-btn:hover {
    background: rgba(20, 161, 219, 0.14);
    border-color: rgba(20, 161, 219, 0.35);
}

/* ── Form Actions (bottom bar) ─────────────────────── */
.staff-form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 0 0.2rem;
    border-top: 1px solid var(--hr-border, #dcf1fb);
    margin-top: 0.25rem;
}

.staff-form-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: auto;
    padding: 0.65rem 1.6rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--hr-blue, #14a1db), #5cc3ea);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(20, 161, 219, 0.25);
}

.staff-form-submit-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(20, 161, 219, 0.3);
}

.staff-form-clear-btn {
    width: auto;
    padding: 0.65rem 1.2rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hr-muted, #8b80b0);
    background: transparent;
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.staff-form-clear-btn:hover {
    background: var(--hr-card-bg, #faf9ff);
    color: var(--hr-text, #1e1b4b);
}

/* ── Responsive: 3-col → 2-col → 1-col ─────────────────────── */
@media (max-width: 820px) {
    .staff-form-grid--3col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .staff-form-grid--3col .staff-form-field[style*="span 2"] { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .staff-form-grid--3col,
    .staff-form-grid { grid-template-columns: 1fr; }
    .staff-form-grid--3col .staff-form-field[style*="span 2"] { grid-column: auto; }
}

/* ── Legacy action buttons (backward compat) ─────────────────────── */
#editUserModalBody .actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0.5rem;
}

#editUserModalBody .actions button[type="submit"] {
    background: linear-gradient(135deg, var(--hr-blue, #14a1db), #5cc3ea);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.65rem 1.6rem;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    box-shadow: 0 2px 8px rgba(20, 161, 219, 0.25);
}

#editUserModalBody .actions button[type="submit"]:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

#editUserModalBody .actions button.ghost {
    background: transparent;
    color: var(--hr-muted, #8b80b0);
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 10px;
    padding: 0.65rem 1.2rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

#editUserModalBody .actions button.ghost:hover {
    background: var(--hr-card-bg, #faf9ff);
    color: var(--hr-text, #1e1b4b);
}

.staff-repeat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 0.9rem;
}

.staff-repeat-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.7rem;
}

.staff-document-list {
    display: grid;
    gap: 0.55rem;
}

.staff-document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    border-radius: 10px;
    border: 1px solid var(--hr-border, #dcf1fb);
    background: var(--hr-card-bg, #faf9ff);
    color: var(--hr-text, #1e1b4b);
    text-decoration: none;
}

.staff-document-item strong {
    font-size: 0.86rem;
}

.staff-document-meta {
    color: #6a7597;
    font-size: 0.76rem;
}

.staff-document-empty {
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    border: 1px dashed #d8dff3;
    background: #fbfcff;
    color: #6a7597;
    font-size: 0.82rem;
}

.extension-requests-card {
    grid-column: 1 / -1;
    background: #ffffff;
    overflow-x: clip;
}

.extension-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.extension-head p {
    margin-bottom: 0;
    max-width: 60ch;
}

.extension-kpi-grid {
    margin-top: 0.9rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    max-width: 100%;
}

.extension-kpi-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem 1.05rem;
    background: #fff;
    display: flex;
    align-items: flex-start;
    gap: 0.62rem;
    min-height: 88px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.extension-kpi-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
    background: #eef3ff;
    color: #314a8a;
    margin-top: 0.06rem;
    flex: 0 0 auto;
}

.extension-kpi-icon svg {
    width: 15px;
    height: 15px;
}

.extension-kpi-card.tone-pending .extension-kpi-icon { background: #fef3e2; color: #b76b13; }
.extension-kpi-card.tone-total .extension-kpi-icon { background: #e8f1ff; color: #2d5fb2; }
.extension-kpi-card.tone-risk-staff .extension-kpi-icon { background: #ffe8eb; color: #c63b59; }
.extension-kpi-card.tone-risk-task .extension-kpi-icon { background: #f0ecff; color: #6a4fd4; }

.extension-kpi-card .label {
    display: block;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7180a6;
}

.extension-kpi-card strong {
    display: block;
    margin-top: 0.34rem;
    font-size: 1.72rem;
    line-height: 1;
    color: #1f2a4d;
}

.extension-panel {
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}

.extension-panel h4 {
    margin: 0 0 0.7rem;
    font-size: 1rem;
    color: #1f2a4d;
}

.extension-panel .table-wrap {
    margin-top: 0.25rem;
}

.extension-tracking-wrap,
.extension-pending-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.extension-tracking-wrap table,
.extension-pending-table table {
    width: 100%;
    min-width: 580px;
}

.extension-tracking-wrap table {
    table-layout: auto;
}

.extension-tracking-wrap th:nth-child(1),
.extension-tracking-wrap td:nth-child(1) { width: 26%; }
.extension-tracking-wrap th:nth-child(2),
.extension-tracking-wrap td:nth-child(2) { width: 12%; }
.extension-tracking-wrap th:nth-child(3),
.extension-tracking-wrap td:nth-child(3) { width: 13%; }
.extension-tracking-wrap th:nth-child(4),
.extension-tracking-wrap td:nth-child(4) { width: 13%; }
.extension-tracking-wrap th:nth-child(5),
.extension-tracking-wrap td:nth-child(5) { width: 8%; }
.extension-tracking-wrap th:nth-child(6),
.extension-tracking-wrap td:nth-child(6) { width: 10%; }
.extension-tracking-wrap th:nth-child(7),
.extension-tracking-wrap td:nth-child(7) { width: 18%; }

.extension-tracking-wrap th,
.extension-pending-table th {
    font-size: 0.76rem;
    color: #7b87aa;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.extension-tracking-wrap td,
.extension-pending-table td {
    white-space: normal;
    word-break: break-word;
    vertical-align: top;
}

.extension-tracking-wrap td:nth-child(1) {
    font-weight: 600;
    color: var(--req-ink, #1e1b4b);
}

.extension-task-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.28;
}

.extension-tracking-wrap td:nth-child(3),
.extension-tracking-wrap td:nth-child(4),
.extension-tracking-wrap td:nth-child(5),
.extension-tracking-wrap td:nth-child(6),
.extension-tracking-wrap td:nth-child(7) {
    white-space: nowrap;
}

.extension-tracking-wrap tbody tr:hover,
.extension-pending-table tbody tr:hover {
    background: var(--req-accent-wash, #eef8fd);
}

.extension-action-cell {
    min-width: 196px;
    white-space: nowrap;
    text-align: right;
}

.extension-action-stack {
    display: grid;
    gap: 0.45rem;
    justify-items: end;
}

.extension-action-stack > button {
    min-width: 88px;
    white-space: nowrap;
}

.extension-request-actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.extension-request-actions button {
    width: auto;
    min-width: 86px;
    padding: 0.36rem 0.65rem;
    white-space: nowrap;
}

.extension-date-modify {
    font-size: 0.82rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid #d1d5e8;
    border-radius: 6px;
    background: #f8f9fc;
    color: #1e293b;
    min-width: 130px;
    max-width: 160px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.extension-date-modify:focus {
    outline: none;
    border-color: #14a1db;
    box-shadow: 0 0 0 2px rgba(20, 161, 219, 0.15);
}
.extension-date-modify:hover {
    border-color: #a5b4fc;
}

.exh-modified-note {
    color: #d97706;
    font-weight: 600;
    font-size: 0.82rem;
}

.extension-action-icons {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    flex-wrap: wrap;
}

.ext-icon-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #dde4f5;
    background: #ffffff;
    color: #4a5880;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.ext-icon-btn svg {
    width: 15px;
    height: 15px;
    display: block;
    pointer-events: none;
}

.ext-icon-btn--view:hover {
    background: var(--accent-soft, #dcf1fb);
    border-color: var(--accent, #14a1db);
    color: var(--color-violet-600, #1488c7);
}

.ext-icon-btn--approve {
    background: var(--accent, #14a1db);
    border-color: var(--accent, #14a1db);
    color: #ffffff;
}

.ext-icon-btn--approve:hover {
    background: var(--color-violet-600, #1488c7);
    border-color: var(--color-violet-600, #1488c7);
}

.ext-icon-btn--reject {
    color: #e53e3e;
    border-color: #fecaca;
}

.ext-icon-btn--reject:hover {
    background: #fff5f5;
    border-color: #e53e3e;
}

.extension-main-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 1rem;
    align-items: start;
    max-width: 100%;
}

.extension-recent {
    margin-top: 1.05rem;
}

.extension-empty {
    border: 1px dashed var(--req-border-strong, #c9e9f7);
    border-radius: var(--radius-md, 12px);
    padding: 1rem 0.9rem;
    text-align: left;
    color: var(--req-muted, #6b5f8a);
    background: #fafcff;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.65rem;
}

.extension-empty .icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f9ec;
    color: #2f9e57;
    font-weight: 700;
}

.extension-empty strong {
    color: var(--req-ink, #1e1b4b);
}

.extension-empty p {
    margin: 0.1rem 0 0;
    font-size: 0.9rem;
    color: #69779f;
}

.extension-recent h4 {
    margin: 0 0 0.55rem;
    font-size: 0.98rem;
}

#extensionRecentList {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.extension-recent-item {
    border: 1px solid var(--req-border, #dcf1fb);
    border-radius: var(--radius-md, 10px);
    padding: 0.8rem 0.85rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    background: #ffffff;
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.extension-recent-item:hover {
    background: var(--req-accent-wash, #eef8fd);
    border-color: var(--req-border-strong, #c9e9f7);
    box-shadow: var(--req-e2);
}

.extension-recent-main {
    min-width: 0;
    display: grid;
    gap: 0.14rem;
}

.extension-recent-item strong {
    color: var(--req-ink, #1e1b4b);
    font-size: 1.02rem;
    line-height: 1.25;
    word-break: break-word;
}

.extension-recent-item span {
    color: #5f6b8f;
    font-size: 0.84rem;
}

.extension-recent-item .meta-line {
    font-size: 0.89rem;
    color: #61709a;
}

.extension-risk-list {
    display: grid;
    gap: 0.64rem;
}

.extension-risk-item {
    border: 1px solid var(--req-border, #dcf1fb);
    border-radius: var(--radius-md, 12px);
    padding: 0.66rem 0.72rem;
    background: #fcfdff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.extension-risk-item:hover {
    background: var(--req-accent-wash, #eef8fd);
    border-color: var(--req-border-strong, #c9e9f7);
    box-shadow: var(--req-e2);
}

.extension-risk-meta {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.extension-risk-meta strong {
    color: var(--req-ink, #1e1b4b);
}

.extension-risk-meta span {
    font-size: 0.9rem;
    color: #65739b;
}

.risk-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.22rem 0.62rem;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
}

.risk-pill.warn {
    color: #b76b13;
    background: #fff3e3;
    border-color: #f1d3ac;
}

.risk-pill.limit {
    color: #b1273f;
    background: #ffe7ed;
    border-color: #f3b8c4;
}

@media (max-width: 1180px) {
    .staff-layout {
        grid-template-columns: 1fr;
    }

    .staff-form-grid,
    .staff-repeat-grid {
        grid-template-columns: 1fr;
    }

    .extension-kpi-grid {
        grid-template-columns: 1fr;
    }

    .extension-main-grid {
        grid-template-columns: 1fr;
    }

    #extensionRecentList {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .extension-tracking-wrap td:nth-child(3),
    .extension-tracking-wrap td:nth-child(4),
    .extension-tracking-wrap td:nth-child(5),
    .extension-tracking-wrap td:nth-child(6),
    .extension-tracking-wrap td:nth-child(7) {
        white-space: normal;
    }

    .extension-action-cell {
        min-width: 0;
        text-align: left;
    }

    .extension-action-stack {
        justify-items: start;
    }

    .extension-request-actions {
        justify-content: flex-start;
    }

    .extension-date-modify {
        min-width: 110px;
        max-width: 130px;
        font-size: 0.75rem;
        padding: 0.25rem 0.3rem;
    }
}

.photo-upload-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.45rem;
    align-items: center;
}

.photo-upload-row button {
    width: auto;
    min-width: 84px;
}

/* ── Pupil Eye staff-form polish ──────────────────────────────────────────
   Stronger, visible field borders + a real styled file control (replaces the
   raw OS "Choose File" input). Scoped to .staff-profile-form (the Add/Edit
   Staff form, inline and in the edit modal) so the rest of the HR module is
   untouched. ── */
.staff-profile-form .staff-form-field input:not([type="file"]),
.staff-profile-form .staff-form-field select,
.staff-profile-form .staff-form-field textarea {
    border: 1px solid #cbd5e1;            /* slate-300: a boundary you can actually see */
    border-radius: 9px;
    padding: 0.55rem 0.7rem;
    background: #fff;
    font-size: 0.86rem;
    color: var(--hr-text, #1e1b4b);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.staff-profile-form .staff-form-field input::placeholder,
.staff-profile-form .staff-form-field textarea::placeholder {
    color: #9aa3b2;                       /* lighter than the label, so hierarchy reads right */
}
.staff-profile-form .staff-form-field input:not([type="file"]):focus,
.staff-profile-form .staff-form-field select:focus,
.staff-profile-form .staff-form-field textarea:focus {
    border-color: var(--brand-blue, #14a1db);
    box-shadow: 0 0 0 3px rgba(20, 161, 219, 0.14);
    outline: none;
}
/* Styled file inputs — dashed drop-field + branded picker button */
.staff-profile-form input[type="file"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.55rem;
    font-size: 0.8rem;
    color: #475569;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 9px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.staff-profile-form input[type="file"]:hover {
    border-color: var(--brand-blue, #14a1db);
    background: #f1f8fc;
}
.staff-profile-form input[type="file"]::file-selector-button {
    margin-right: 0.7rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: var(--brand-blue, #14a1db);
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s;
}
.staff-profile-form input[type="file"]::file-selector-button:hover {
    background: var(--brand-blue-deep, #0e7bb0);
}

.profile-layout {
    display: flex;
    gap: 1.15rem;
    margin-top: 0.5rem;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
}

.profile-left,
.profile-right {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    min-width: 0;
}

.profile-left {
    flex: 1 1 68%;
}

.profile-right {
    flex: 0 0 34%;
    max-width: 420px;
}

.profile-form,
.profile-password-form {
    margin: 0;
}
.profile-form input,
.profile-form select,
.profile-form textarea,
.profile-password-form input {
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    background: #fff;
    font-size: 0.88rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.profile-form input:focus,
.profile-form select:focus,
.profile-form textarea:focus,
.profile-password-form input:focus {
    outline: none;
    border-color: #4fb8e6;
    box-shadow: 0 0 0 3px rgba(59, 176, 229,0.12);
}

.profile-card {
    background: var(--hr-card-bg, #faf9ff);
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 12px;
    padding: 0.95rem;
    box-shadow: 0 8px 24px rgba(10, 94, 136, 0.06);
    min-width: 0;
    max-width: 100%;
}

.profile-form.profile-card {
    padding: 1rem;
}

.profile-nested-card {
    margin-top: 0.95rem;
    box-shadow: none;
    background: #f8f5ff;
}

.profile-card-title {
    margin: 0 0 0.7rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--hr-text, #1e1b4b);
}

.profile-hr-managed-banner {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: #92400e;
    margin-bottom: 0.85rem;
}

.profile-hr-managed-icon {
    font-size: 0.95rem;
    flex-shrink: 0;
}

.profile-hr-managed-section {
    background: #eef8fd;
    border: 1px solid #c9e9f7;
    border-radius: 8px;
    padding: 0.7rem 0.8rem 0.6rem;
    margin-bottom: 0.75rem;
}

.profile-hr-managed-fields-header {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1488c7;
    margin-bottom: 0.55rem;
}

.profile-self-edit-section {
    padding: 0.1rem 0 0;
}

.profile-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 0.8rem;
}

.profile-grid-single {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

.profile-grid-two label,
.profile-grid-single label,
.profile-summary-grid label,
.profile-kpi label {
    display: block;
    margin-bottom: 0.32rem;
}

.profile-summary-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}

.profile-summary-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid #a9dcf1;
    background: #1488c7;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.profile-summary-text {
    min-width: 0;
}

.profile-summary-text strong,
.profile-summary-text span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-summary-text strong {
    font-size: 1rem;
    color: var(--hr-text, #1e1b4b);
}

.profile-summary-text span {
    color: #6b7280;
    font-size: 0.82rem;
}

.profile-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.profile-summary-grid p {
    margin: 0;
    color: var(--hr-text, #1e1b4b);
    font-weight: 600;
}

.profile-work-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.profile-kpi {
    border: 1px solid var(--hr-border, #dcf1fb);
    background: #f8f5ff;
    border-radius: 10px;
    padding: 0.55rem 0.62rem;
}

.profile-kpi strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.25rem;
    color: var(--hr-text, #1e1b4b);
}

.profile-password-form .actions button,
.profile-form .actions button {
    width: 100%;
    background: #1488c7;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.65rem 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.18s ease;
}
.profile-password-form .actions button:hover,
.profile-form .actions button:hover {
    opacity: 0.92;
}

.profile-save-feedback {
    margin: 0.65rem 0 0;
    padding: 0.5rem 0.66rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.84rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.profile-save-feedback.show {
    opacity: 1;
    transform: translateY(0);
}

.profile-save-feedback.success {
    color: #14532d;
    background: #ecfdf3;
    border-color: #bbf7d0;
}

.profile-save-feedback.success::before {
    content: 'OK: ';
}

.profile-save-feedback.error {
    color: #7f1d1d;
    background: #fef2f2;
    border-color: #fecaca;
}

.profile-save-feedback.error::before {
    content: '! ';
}

.profile-subsection-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin: 0.9rem 0 0.4rem;
}

.profile-repeat-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.profile-repeat-empty {
    color: #9ca3af;
    font-size: 0.85rem;
    padding: 0.5rem 0;
}

.profile-add-row-btn {
    font-size: 0.78rem;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    background: #eef8fd;
    color: #1488c7;
    border: 1px solid #c9e9f7;
    cursor: pointer;
    white-space: nowrap;
}

.profile-add-row-btn:hover {
    background: #dcf1fb;
}

.profile-toggle-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    cursor: pointer;
}

.profile-toggle-check input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.section-card[data-section="profile"] {
    max-height: none;
    overflow-x: clip;
    overflow-y: visible;
    background: var(--hr-bg, #eef8fd);
    padding-bottom: 2.5rem;
}

@media (max-width: 1380px) {
    .profile-layout {
        flex-direction: column;
    }

    .profile-right {
        flex: 1 1 auto;
        max-width: none;
        width: 100%;
    }
}

.quick-department-other {
    margin-top: 0.45rem;
}

.quick-assign-dept-picker-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4rem;
    align-items: center;
}

.quick-dept-add-btn {
    min-width: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
}

.quick-dept-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 34px;
    margin-top: 0.45rem;
}

.quick-dept-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid #a9dcf1;
    background: #f3edff;
    color: #4a3f6b;
    border-radius: 999px;
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
}

.quick-dept-chip button {
    border: 0;
    background: transparent;
    color: #1488c7;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 0.82rem;
}

.quick-assign-empty {
    color: #7c6f9f;
    font-size: 0.78rem;
    align-self: center;
}

.quick-assign-helper {
    display: block;
    margin: 0.25rem 0 0.5rem;
    color: #7c6f9f;
    font-size: 0.78rem;
}

.quick-assignee-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.quick-assignee-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4rem;
    align-items: start;
}

.quick-assignee-row select {
    width: 100%;
}

/* ── Quick Add: searchable assignee combobox ─────────────────── */
.qa-combo {
    position: relative;
    min-width: 0;
}

/* Hidden native <select> remains the value source-of-truth. */
.qa-combo-native {
    display: none;
}

.qa-combo-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.62rem;
}

.qa-combo-input::placeholder {
    color: #b3acce;
}

.qa-combo-input:disabled {
    background: #f6f5fb;
    color: #9890b5;
    cursor: not-allowed;
}

/* In-flow results list (not absolute) so the scrollable quick-add body never clips it. */
.qa-combo-menu {
    margin-top: 0.3rem;
    border: 1px solid #e0daf0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(49, 36, 87, 0.12);
    max-height: 230px;
    overflow-y: auto;
    overflow-x: hidden;
}

.qa-combo-menu[hidden] {
    display: none;
}

.qa-combo-option {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #f1eef8;
    background: transparent;
    color: #273055;
    display: grid;
    gap: 0.12rem;
    padding: 0.5rem 0.65rem;
    text-align: left;
    cursor: pointer;
}

.qa-combo-option:last-child {
    border-bottom: 0;
}

.qa-combo-option:hover,
.qa-combo-option.is-highlighted {
    background: #f6f1ff;
    color: #5f28cf;
}

.qa-combo-option.active {
    background: #f2eaff;
}

.qa-combo-option-name {
    font-size: 0.84rem;
    font-weight: 600;
}

.qa-combo-option-meta {
    font-size: 0.74rem;
    color: #7d86a4;
}

.qa-combo-empty {
    padding: 0.55rem 0.7rem;
    font-size: 0.8rem;
    color: #8b80b0;
}

/* ── Quick Add: Assignee workload chips ─────────────────── */
#quickAssigneeWorkload {
    margin-top: 0.45rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
#quickAssigneeWorkload.hidden { display: none !important; }
#quickAssigneeWorkload .qa-workload-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    line-height: 1.2;
    border: 1px solid transparent;
    background: #f1f5f9;
    color: #334155;
}
#quickAssigneeWorkload .qa-workload-chip__name { font-weight: 600; }
#quickAssigneeWorkload .qa-workload-chip__count {
    font-weight: 700;
    padding: 0 0.35rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.65);
}
#quickAssigneeWorkload .qa-workload-chip--low  { background: #ecfdf5; color: #166534; border-color: #bbf7d0; }
#quickAssigneeWorkload .qa-workload-chip--med  { background: #fefce8; color: #854d0e; border-color: #fde68a; }
#quickAssigneeWorkload .qa-workload-chip--high { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
#quickAssigneeWorkload .qa-workload-advisory {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #78350f;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
}

/* ── Quick Add: Department suggestion panel ─────────────────
   Scoped via #quickAssigneeDeptSuggest to outrank the global
   `button { width:100%; background: gradient }` rule. */
#quickAssigneeDeptSuggest {
    margin-top: 0.55rem;
}
#quickAssigneeDeptSuggest.hidden { display: none !important; }

#quickAssigneeDeptSuggest .qa-dept-suggest-card {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

#quickAssigneeDeptSuggest .qa-dept-suggest-card--auto {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #14532d;
}
#quickAssigneeDeptSuggest .qa-dept-suggest-card--auto .qa-dept-suggest-ico { color: #059669; }

#quickAssigneeDeptSuggest .qa-dept-suggest-card--choose {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #312e81;
}
#quickAssigneeDeptSuggest .qa-dept-suggest-card--choose .qa-dept-suggest-ico { color: #1276c2; }

#quickAssigneeDeptSuggest .qa-dept-suggest-card--warn {
    background: #fffbeb;
    border-color: #fde68a;
    color: #78350f;
}
#quickAssigneeDeptSuggest .qa-dept-suggest-card--warn .qa-dept-suggest-ico { color: #d97706; }

#quickAssigneeDeptSuggest .qa-dept-suggest-ico {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    display: inline-block;
}

#quickAssigneeDeptSuggest .qa-dept-suggest-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

#quickAssigneeDeptSuggest .qa-dept-suggest-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.78;
    line-height: 1.2;
}

#quickAssigneeDeptSuggest .qa-dept-suggest-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
}

#quickAssigneeDeptSuggest .qa-dept-suggest-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: #fff;
    border: 1px solid currentColor;
    line-height: 1.2;
    white-space: nowrap;
}

#quickAssigneeDeptSuggest .qa-dept-suggest-chip--auto {
    color: #047857;
    border-color: #6ee7b7;
    background: #ffffff;
}

#quickAssigneeDeptSuggest .qa-dept-suggest-note {
    color: inherit;
    opacity: 0.72;
    font-size: 0.76rem;
    font-weight: 500;
}

#quickAssigneeDeptSuggest button.qa-dept-suggest-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0.38rem 0.85rem;
    margin: 0;
    background: #ffffff;
    color: #4338ca;
    border: 1.5px solid #c7d2fe;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    box-shadow: none;
    opacity: 0.92;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
#quickAssigneeDeptSuggest button.qa-dept-suggest-choice:hover {
    background: #eef2ff;
    border-color: #5cc3ea;
    color: #3730a3;
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(18, 118, 194, 0.14);
    filter: none;
}
#quickAssigneeDeptSuggest button.qa-dept-suggest-choice:active {
    transform: translateY(0);
    box-shadow: none;
}
#quickAssigneeDeptSuggest button.qa-dept-suggest-choice.is-active {
    background: #1276c2;
    color: #ffffff;
    border-color: #1276c2;
    box-shadow: 0 3px 10px rgba(18, 118, 194, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    opacity: 1;
    padding-left: 0.75rem;
    padding-right: 0.95rem;
}
#quickAssigneeDeptSuggest button.qa-dept-suggest-choice.is-active:hover {
    background: #4338ca;
    border-color: #4338ca;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(18, 118, 194, 0.38);
}

#quickAssigneeDeptSuggest .qa-dept-suggest-choice-tick {
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    color: #ffffff;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}
#quickAssigneeDeptSuggest .qa-dept-suggest-choice-label {
    line-height: 1.25;
}

#quickAssigneeDeptSuggest .qa-dept-suggest-tick {
    font-size: 0.72rem;
    line-height: 1;
    opacity: 0.9;
}

#quickAssigneeDeptSuggest .qa-dept-suggest-note strong {
    font-weight: 700;
    color: inherit;
}

@media (max-width: 900px) {
    #quickAssigneeDeptSuggest .qa-dept-suggest-card {
        padding: 0.6rem 0.7rem;
        gap: 0.5rem;
    }
    #quickAssigneeDeptSuggest .qa-dept-suggest-sub { font-size: 0.8rem; }
    #quickAssigneeDeptSuggest button.qa-dept-suggest-choice { padding: 0.32rem 0.7rem; font-size: 0.77rem; }
}

.quick-assignee-remove {
    min-width: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fecaca;
    border-radius: 10px;
}
.quick-assignee-remove:hover {
    background: #fee2e2;
    border-color: #f87171;
}

.quick-add-assignee-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    width: auto;
    padding: 0.4rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hr-blue, #14a1db);
    background: rgba(20, 161, 219, 0.08);
    border: 1px solid rgba(20, 161, 219, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.quick-add-assignee-btn:hover {
    background: rgba(20, 161, 219, 0.14);
    border-color: rgba(20, 161, 219, 0.35);
    transform: none;
}

/* ── Assignment Section ──────────────────────── */
.assign-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 0.7rem;
}
.assign-header-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hr-blue, #14a1db);
}
.assign-header-actions {
    display: flex;
    gap: 1rem;
}
.assign-action-link {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #842cd3;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
    width: auto;
}
.assign-action-link:hover {
    opacity: 0.7;
    text-decoration: underline;
}
.assign-action-link:last-child {
    color: var(--hr-blue, #14a1db);
}
.assign-dept-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.assign-dept-field {
    flex: 1;
    min-width: 0;
    position: relative;
}
.assign-dept-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}
.assign-dept-select {
    width: 100%;
    padding: 0.65rem 0.8rem 0.65rem 2.6rem;
    background: #f0f4f7;
    border: 1px solid rgba(116, 124, 128, 0.15);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #2c3437;
    appearance: none;
    transition: box-shadow 0.15s, background 0.15s;
}
.assign-dept-select:focus {
    background: #fff;
    box-shadow: 0 0 0 2px rgba(20, 161, 219, 0.2);
    outline: none;
}
.assign-add-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: auto;
    padding: 0.65rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #2c3437;
    background: #e3e9ed;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.assign-add-user-btn:hover {
    background: #dce4e8;
}
.assign-add-user-btn svg { color: #596064; }
.assign-avatar-strip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
    flex-wrap: nowrap;
}
.assign-avatar-group {
    display: flex;
    flex-shrink: 0;
}
.assign-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.7rem;
    color: #fff;
    background-size: cover;
    background-position: center;
    border: 2px solid #fff;
    margin-left: -10px;
    flex-shrink: 0;
    cursor: default;
}
.assign-avatar:first-child { margin-left: 0; }
.assign-avatar-overflow {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.62rem;
    color: #000022;
    background: #787ff9;
    border: 2px solid #fff;
    margin-left: -10px;
    flex-shrink: 0;
    cursor: default;
}
.assign-summary-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #596064;
    font-style: italic;
    margin: 0;
}
.fav-group-overlay {
    z-index: 1700 !important;
    transition: opacity 0.2s ease;
}
.fav-group-overlay.anim-enter { animation: backdropFadeIn 0.22s ease-out forwards; }
.fg-list-empty {
    text-align: center;
    padding: 1.2rem 0.5rem;
    color: #888;
    font-size: 0.85rem;
}
.fg-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.fg-list-item:last-child { border-bottom: none; }
.fg-list-info { flex: 1; min-width: 0; }
.fg-list-name {
    font-weight: 500;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fg-list-count {
    font-size: 0.73rem;
    color: #888;
}
.fg-list-actions {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}
.fg-list-actions button {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s;
    width: auto;
}
.fg-list-actions button:hover { background: #f3f4f6; }
.fg-list-actions button.fg-apply {
    background: var(--hr-blue, #14a1db);
    color: #fff;
    border-color: var(--hr-blue, #14a1db);
}
.fg-list-actions button.fg-apply:hover {
    background: #1276c2;
}
.fg-list-actions button.fg-delete:hover {
    background: #fee2e2;
    border-color: #f87171;
    color: #dc2626;
}
.fg-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px dashed rgba(20, 161, 219, 0.3);
    border-radius: 8px;
    background: transparent;
    color: var(--hr-blue, #14a1db);
    cursor: pointer;
    transition: background 0.15s;
}
.fg-create-btn:hover { background: rgba(20, 161, 219, 0.08); }
.fg-form-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 0.25rem;
    margin-top: 0.6rem;
}
.fg-name-input {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.85rem;
    box-sizing: border-box;
}
.fg-name-input:focus {
    border-color: var(--hr-blue, #14a1db);
    outline: none;
    box-shadow: 0 0 0 2px rgba(20, 161, 219,0.15);
}
.fg-search-input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.82rem;
    margin-bottom: 0.4rem;
    box-sizing: border-box;
}
.fg-member-list {
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.3rem;
    box-sizing: border-box;
}
.fg-member-dept-header {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    padding: 0.35rem 0.3rem 0.1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    position: sticky;
    top: 0;
    background: #fff;
}
.fg-member-item {
    display: flex !important;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.4rem;
    margin: 0;
    font-size: 0.82rem;
    border-radius: 6px;
    cursor: pointer;
    color: #1e1b4b;
}
.fg-member-item:hover { background: #f3f4f6; }
.fg-member-item input[type="checkbox"] { width: auto; min-width: auto; max-width: none; flex-shrink: 0; }
.fg-member-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-member-item-meta {
    font-size: 0.7rem;
    color: #9ca3af;
}
.fg-form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.8rem;
    justify-content: flex-end;
}
.fg-form-actions button {
    padding: 0.4rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s;
    width: auto;
}
.fg-form-actions button:hover { background: #f3f4f6; }
.fg-form-actions button.fg-save-btn {
    background: var(--hr-blue, #14a1db);
    color: #fff;
    border-color: var(--hr-blue, #14a1db);
}
.fg-form-actions button.fg-save-btn:hover { background: #1276c2; }
.fg-selected-count {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.calendar-note {
    margin-bottom: 0.6rem;
    color: #5b6788;
    font-size: 0.85rem;
}

.calendar-nav-buttons,
.calendar-actions {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.calendar-nav-buttons button,
.calendar-actions button {
    width: auto;
    min-width: 72px;
}

#calendarRangeLabel {
    margin: 0;
    text-align: center;
}

.full-calendar {
    margin-top: 0.9rem;
    border: 1px solid #e8e5f0;
    border-radius: 18px;
    padding: 0.75rem;
    background: #fcfbff;
    box-shadow: 0 2px 12px rgba(20, 161, 219,0.04), inset 0 1px 0 #fff;
}

.calendar-grid.month .cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin-bottom: 0.35rem;
    padding-bottom: 0.4rem;
    border-bottom: 1.5px solid #dcf1fb;
}

.calendar-grid.month .cal-weekdays div {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 0.25rem;
}

/* Weekday label colors matching column border colors */
.calendar-grid.month .cal-weekdays div:nth-child(1) { color: var(--hr-pink,   #ec4899); }
.calendar-grid.month .cal-weekdays div:nth-child(2) { color: var(--hr-blue,   #14a1db); }
.calendar-grid.month .cal-weekdays div:nth-child(3) { color: var(--hr-cyan,   #06b6d4); }
.calendar-grid.month .cal-weekdays div:nth-child(4) { color: var(--hr-green,  #10b981); }
.calendar-grid.month .cal-weekdays div:nth-child(5) { color: var(--hr-orange, #f59e0b); }
.calendar-grid.month .cal-weekdays div:nth-child(6) { color: var(--hr-purple, #4fb8e6); }
.calendar-grid.month .cal-weekdays div:nth-child(7) { color: var(--hr-red,    #ef4444); }

.calendar-grid.month .cal-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: 128px;
    column-gap: 0.4rem;
    row-gap: 0.45rem;
    background: transparent;
    border: none;
    border-radius: 12px;
}

.cal-day {
    border: 1px solid #e8e5f0;
    border-top-width: 3px;
    border-radius: 11px;
    background: #fff;
    height: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.45rem;
    text-align: left;
    transition: box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Colorful top borders by day of week (Sun→Sat) */
.calendar-grid.month .cal-days .cal-day:nth-child(7n+1) { border-top-color: var(--hr-pink,   #ec4899); }
.calendar-grid.month .cal-days .cal-day:nth-child(7n+2) { border-top-color: var(--hr-blue,   #14a1db); }
.calendar-grid.month .cal-days .cal-day:nth-child(7n+3) { border-top-color: var(--hr-cyan,   #06b6d4); }
.calendar-grid.month .cal-days .cal-day:nth-child(7n+4) { border-top-color: var(--hr-green,  #10b981); }
.calendar-grid.month .cal-days .cal-day:nth-child(7n+5) { border-top-color: var(--hr-orange, #f59e0b); }
.calendar-grid.month .cal-days .cal-day:nth-child(7n+6) { border-top-color: var(--hr-purple, #4fb8e6); }
.calendar-grid.month .cal-days .cal-day:nth-child(7n+0) { border-top-color: var(--hr-red,    #ef4444); }

.cal-day:hover {
    box-shadow: 0 6px 20px rgba(20, 161, 219,0.10), 0 2px 6px rgba(20, 161, 219,0.06);
    transform: translateY(-1px);
}

.cal-day.muted {
    background: #f9f8fc;
    opacity: 0.45;
}
.cal-day.muted:hover {
    opacity: 0.65;
}

.cal-day.selected {
    box-shadow: inset 0 0 0 2px var(--hr-blue, #14a1db), 0 2px 8px rgba(20, 161, 219,0.10);
    background: #fafaff;
}

/* Today highlight */
.cal-day.today {
    background: #f8f7ff;
    border-color: #c7c3f4;
    border-top-width: 3px;
}
.cal-day.today .cal-day-num-btn {
    background: var(--accent, #14a1db);
    color: #fff !important;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.cal-day.has-events.pastel-0,
.week-day.has-events.pastel-0,
.calendar-grid.day.day-pastel.has-events.pastel-0 .day-mode-head {
    background: #f4f9ff;
}

.cal-day.has-events.pastel-1,
.week-day.has-events.pastel-1,
.calendar-grid.day.day-pastel.has-events.pastel-1 .day-mode-head {
    background: #f7f4fe;
}

.cal-day.has-events.pastel-2,
.week-day.has-events.pastel-2,
.calendar-grid.day.day-pastel.has-events.pastel-2 .day-mode-head {
    background: #f2fdf3;
}

.cal-day.has-events.pastel-3,
.week-day.has-events.pastel-3,
.calendar-grid.day.day-pastel.has-events.pastel-3 .day-mode-head {
    background: #fefaf0;
}

.cal-day.has-events.pastel-4,
.week-day.has-events.pastel-4,
.calendar-grid.day.day-pastel.has-events.pastel-4 .day-mode-head {
    background: #fef2f6;
}

.cal-day.has-events.pastel-5,
.week-day.has-events.pastel-5,
.calendar-grid.day.day-pastel.has-events.pastel-5 .day-mode-head {
    background: #f3f4fb;
}

.cal-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
    flex-shrink: 0;
}

.cal-day-num {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #49506a;
}

.cal-day-events {
    margin-top: 3px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(20, 161, 219,0.25) transparent;
}
.cal-day-events::-webkit-scrollbar { width: 3px; }
.cal-day-events::-webkit-scrollbar-track { background: transparent; }
.cal-day-events::-webkit-scrollbar-thumb { background: rgba(20, 161, 219,0.25); border-radius: 3px; }
.cal-day-events::-webkit-scrollbar-thumb:hover { background: rgba(20, 161, 219,0.45); }

.cal-day-events span {
    display: block;
    font-size: 0.72rem;
    padding: 0.14rem 0.32rem;
    border-radius: 999px;
    background: #efeaff;
    color: #443f74;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* Month-view event pills: white bg + colored left accent for readability.
   Uses #fullCalendar ID for maximum specificity (1-3-0) — beats all status/tone rules. */
#fullCalendar .calendar-grid.month .event-pill {
    background: #fff !important;
    color: #1a1a2e !important;
    border: 1px solid #d8d4e8 !important;
    border-left: 4px solid #9b8fc8 !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    padding: 0.22rem 0.38rem 0.22rem 0.5rem !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex-shrink: 0 !important;
}
/* Status left-border colors — month view */
#fullCalendar .calendar-grid.month .event-pill.status-scheduled       { border-left-color: #2570c5 !important; }
#fullCalendar .calendar-grid.month .event-pill.status-in-progress      { border-left-color: #0e7bb0 !important; }
#fullCalendar .calendar-grid.month .event-pill.status-pending-approval,
#fullCalendar .calendar-grid.month .event-pill.status-report-submitted { border-left-color: #c47a00 !important; }
#fullCalendar .calendar-grid.month .event-pill.status-rejected         { border-left-color: #c82040 !important; }
#fullCalendar .calendar-grid.month .event-pill.status-report-pending   { border-left-color: #c47a00 !important; }
#fullCalendar .calendar-grid.month .event-pill.status-completed        { border-left-color: #158537 !important; }
#fullCalendar .calendar-grid.month .event-pill.status-completed_on_time { border-left-color: #158537 !important; }
#fullCalendar .calendar-grid.month .event-pill.status-completed_late   { border-left-color: #158537 !important; }
#fullCalendar .calendar-grid.month .event-pill.status-completed_ext_1  { border-left-color: #c5a417 !important; }
#fullCalendar .calendar-grid.month .event-pill.status-completed_ext_2  { border-left-color: #d97706 !important; }
#fullCalendar .calendar-grid.month .event-pill.status-completed_ext_3  { border-left-color: #c41a2e !important; }
#fullCalendar .calendar-grid.month .event-pill.status-failed           { border-left-color: #9ca3af !important; opacity: 0.6; }
#fullCalendar .calendar-grid.month .event-pill.status-overdue          { border-left-color: #c41a2e !important; }
#fullCalendar .calendar-grid.month .event-pill.admin-assigned-task     { border-left-color: #d48a00 !important; }

/* "+N more" overflow label */
.cal-day-more {
    font-size: 0.62rem;
    font-weight: 600;
    color: #14a1db;
    padding: 0.1rem 0.3rem;
    text-align: right;
    letter-spacing: 0.01em;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    width: 100%;
}
.cal-day-more:hover {
    color: #4338ca;
    text-decoration: underline;
}

/* Meeting type pill */
.event-pill.type-meeting {
    border-left-color: #f59e0b !important;
    background: #fffbeb !important;
}

.calendar-grid.week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.45rem;
    align-items: stretch;
}

.week-day {
    border: 1px solid #e8e5f0;
    border-radius: 12px;
    padding: 0.4rem;
    background: #fff;
    min-height: 180px;
    min-width: 0;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.week-day:hover {
    box-shadow: 0 4px 16px rgba(20, 161, 219,0.08);
    transform: translateY(-1px);
}

.week-day.today {
    background: #f8f7ff;
    border-color: #c7c3f4;
}

.week-day.selected {
    border-color: #8338ec;
    box-shadow: 0 0 0 2px rgba(131, 56, 236, 0.15);
}

.week-day-head-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.week-day-head {
    width: 100%;
    text-align: left;
    color: #2f3558;
    font-weight: 600;
    border: 0;
    padding: 0;
    background: transparent;
}

.week-day-events {
    margin-top: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.34rem;
    min-width: 0;
}

.week-day-events span {
    display: block;
    padding: 0.24rem 0.34rem;
    border-radius: 8px;
    font-size: 0.75rem;
    background: #eef4ff;
    color: #39405d;
}

.calendar-grid.day .day-mode-head {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.day-mode-events {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.day-mode-item {
    border: 1px solid #e7ebf8;
    border-radius: 10px;
    padding: 0.55rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.84rem;
}

.day-mode-item.pill-tone-0 { background: #fff4ea; border-color: #ffd9be; color: #8a5400; }
.day-mode-item.pill-tone-1 { background: #edf6ff; border-color: #cde7ff; color: #1f5b8a; }
.day-mode-item.pill-tone-2 { background: #f3efff; border-color: #dfd4ff; color: #4f3f99; }
.day-mode-item.pill-tone-3 { background: #ecfff5; border-color: #c7f0da; color: #1c6a46; }
.day-mode-item.pill-tone-4 { background: #fff0f6; border-color: #ffd0e0; color: #8a2d5c; }
.day-mode-item.pill-tone-5 { background: #f0f4ff; border-color: #d3defe; color: #3a4d94; }
.day-mode-item.pill-tone-6 { background: #fff6e8; border-color: #ffe0b8; color: #8a5a1f; }
.day-mode-item.pill-tone-7 { background: #effbff; border-color: #cdefff; color: #1f6079; }

.day-events-panel {
    margin-top: 0.75rem;
    border: 1px solid #e6ebf7;
    border-radius: 12px;
    padding: 0.65rem;
    background: #fff;
}

.day-events-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.day-events-list li {
    border: 1px solid #e7ebf8;
    border-radius: 10px;
    padding: 0.45rem 0.55rem;
    font-size: 0.82rem;
    color: #404967;
}

.day-events-list .day-event-head {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
}

.day-events-list .day-event-head span {
    font-weight: 500;
    color: #657094;
}

.empty {
    color: #7c6f9f;
    text-align: center;
    padding: 2.5rem 1rem;
    font-size: 0.92rem;
    border: 1px dashed var(--hr-border, #dcf1fb);
    border-radius: 14px;
    background: #f4f8fb;
    margin-top: 0.5rem;
}

.insights {
    margin-top: 0.7rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: 0.55rem;
}

.report-infographics {
    margin-top: 1.25rem;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.report-infographics-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
}

.report-infographics-head-meta {
    display: grid;
    gap: 0.15rem;
}

.report-infographics h4 {
    margin: 0;
    font-family: 'Manrope', 'DM Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #1e1b4b;
}

.report-infographics p {
    margin: 0;
    font-size: 0.8rem;
    color: #6b5f8a;
}

.info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.info-cards.kpi-extended {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.info-cards.kpi-managed {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Force all dashboard KPI cards onto a single row (no wrap), shrinking equally
   to fit the available width regardless of how many cards the role shows. */
.info-cards.kpi-single-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}

.info-card {
    border-radius: 12px;
    padding: 1rem 1.1rem;
    color: #1f2944;
    border: 1px solid transparent;
    background: #fff;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Card backgrounds set per info-card-* variant class */

.info-card.info-card-total {
    background: #eef2ff;
    border-left: 4px solid #14a1db;
}
.info-card.info-card-total .info-label { color: #4338ca; }
.info-card.info-card-total .info-value { color: #1e1b4b; }

.info-card.info-card-active {
    background: #eef8fd;
    border-left: 4px solid #0e7bb0;
}
.info-card.info-card-active .info-label { color: #0a5e88; }
.info-card.info-card-active .info-value { color: #084e73; }

.info-card.info-card-selected {
    outline: 2.5px solid #0e7bb0;
    outline-offset: -2px;
    box-shadow: 0 0 0 4px rgba(14, 123, 176, 0.13);
}

.info-card.info-card-scheduled {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
}

.info-card.info-card-in-progress {
    background: #eef8fd;
    border-left: 4px solid #4fb8e6;
}

.info-card.info-card-report-submitted {
    background: #fff7ed;
    border-left: 4px solid #ea580c;
}
.info-card.info-card-report-submitted .info-label { color: #9a3412; }
.info-card.info-card-report-submitted .info-value { color: #7c2d12; }

.info-card.info-card-created {
    background: #eef8fd;
    border-left: 4px solid #4fb8e6;
}

.info-card.info-card-completed {
    background: #ecfdf5;
    border-left: 4px solid #047857;
}
.info-card.info-card-completed .info-label { color: #065f46; }
.info-card.info-card-completed .info-value { color: #047857; }

.info-card.info-card-overdue {
    background: #fef2f2;
    border-left: 4px solid #dc2626;
}
.info-card.info-card-overdue .info-label { color: #991b1b; }
.info-card.info-card-overdue .info-value { color: #dc2626; }

/* Delegated Overdue — amber, for overdue tasks I assigned to others (follow-up). */
.info-card.info-card-overdue-delegated {
    background: #fff6e0;
    border-left: 4px solid #d97706;
}
.info-card.info-card-overdue-delegated .info-label { color: #92400e; }
.info-card.info-card-overdue-delegated .info-value { color: #b45309; }

.info-card.info-card-assigned-out {
    background: #ecfdf5;
    border-left: 4px solid #10b981;
}

.info-card.info-card-assigned-to-me {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
}
.info-card.info-card-assigned-to-me .info-label { color: #1d4ed8; }
.info-card.info-card-assigned-to-me .info-value { color: #1e3a8a; }

.info-card.info-card-managing {
    background: #faf5ff;
    border-left: 4px solid #1488c7;
}
.info-card.info-card-managing .info-label { color: #0e7bb0; }
.info-card.info-card-managing .info-value { color: #084e73; }

.info-card.info-card-cross-dept {
    background: #fff6e0;
    border-left: 4px solid #f59e0b;
}
.info-card.info-card-cross-dept .info-label {
    color: #92400e;
}
.info-card.info-card-cross-dept .info-value {
    color: #78350f;
}

/* Monitoring KPI — indigo gradient, paired with the eye icon used elsewhere
   for the monitor badge. Only renders when the viewer oversees ≥1 task. */
.info-card.info-card-monitoring {
    background: #eef2ff;
    border-left: 4px solid #14a1db;
}
.info-card.info-card-monitoring .info-label { color: #4338ca; }
.info-card.info-card-monitoring .info-value { color: #312e81; }
.info-card.info-card-monitoring .info-sub   { color: #1276c2; }
.info-card-clickable {
    cursor: pointer;
}
.info-card-clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.info-label {
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-size: 0.7rem;
    color: #556184;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.info-value {
    font-family: 'Manrope', 'DM Sans', sans-serif;
    font-size: 1.75rem;
    font-weight: 900;
    margin-top: 0.3rem;
    color: #16294d;
    line-height: 1.05;
}

.info-split {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.info-donut {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    margin: 0 auto;
    background: conic-gradient(var(--donut, #8338ec 0deg 360deg));
    position: relative;
}

.info-donut::after {
    display: none;
}

.info-donut-center {
    position: absolute;
    inset: 12px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
}

.info-donut-value {
    font-family: 'Manrope', 'DM Sans', sans-serif;
    font-size: 1.75rem;
    font-weight: 900;
    color: #1e1b4b;
    line-height: 1;
}

.info-donut-label {
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #6b5f8a;
}

.info-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    align-content: start;
    width: 100%;
}

.info-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: #5a6062;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.info-legend-clickable {
    cursor: pointer;
    border-radius: 0.25rem;
    padding: 0.15rem 0.35rem;
    margin: -0.15rem -0.35rem;
    transition: background 0.15s;
}

.info-legend-clickable:hover {
    background: rgba(20, 161, 219, 0.08);
}

.info-legend-item strong {
    display: none;
}

/* Section divider line (heading + horizontal rule) */
.dash-section-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.dash-section-divider h4 {
    font-family: 'Manrope', 'DM Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: #1e1b4b;
    letter-spacing: -0.01em;
    margin: 0;
    white-space: nowrap;
}

.dash-section-divider-line {
    height: 1px;
    flex: 1;
    background: #dcf1fb;
}

.info-legend-title {
    font-family: 'Manrope', 'DM Sans', sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    color: #1e1b4b;
    margin-top: 0.25rem;
}

.info-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.info-dot.status-active_tasks { background: #6b5cff; }
.info-dot.status-scheduled { background: #63b3ff; }
.info-dot.status-in_progress { background: #4fb8e6; }
.info-dot.status-pending_approval,
.info-dot.status-report_submitted { background: #ffb84d; }
.info-dot.status-overdue { background: #ff6b78; }
.info-dot.status-rejected { background: #ff6b78; }
.info-dot.status-completed { background: #4bd08a; }

.report-chart-grid {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 1.25rem;
    margin-top: 0.3rem;
    align-items: stretch;
}

.report-chart-grid.single-chart {
    grid-template-columns: minmax(0, 1fr);
}

.chart-card {
    border: none;
    border-radius: 12px;
    background: #fff;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    min-width: 0;
    overflow: hidden;
}

.chart-card h5 {
    margin: 0 0 1.25rem;
    font-family: 'Manrope', 'DM Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #1e1b4b;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.chart-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.chart-card-header h5 {
    margin: 0;
}

.chart-inline-filter {
    width: auto !important;
    min-width: 0;
    padding: 0.3rem 1.6rem 0.3rem 0.55rem;
    font-size: 0.76rem;
    font-weight: 500;
    color: #3a4067;
    border: 1px solid #dfe6fa;
    border-radius: 8px;
    background: #f8f9ff;
    cursor: pointer;
    transition: border-color 0.15s;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chart-inline-filter:hover,
.chart-inline-filter:focus {
    border-color: #4fb8e6;
    outline: none;
}

.bar-list {
    display: grid;
    gap: 1.15rem;
}

.bar-list.bar-list--scrollable {
    max-height: 19rem;
    overflow-y: auto;
    padding-right: 0.4rem;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

.bar-list.bar-list--scrollable::-webkit-scrollbar {
    width: 6px;
}

.bar-list.bar-list--scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.bar-list.bar-list--scrollable::-webkit-scrollbar-thumb {
    background: rgba(20, 161, 219, 0.18);
    border-radius: 999px;
}

.bar-list.bar-list--scrollable:hover::-webkit-scrollbar-thumb {
    background: rgba(20, 161, 219, 0.45);
}

.bar-row {
    display: grid;
    gap: 0.35rem;
    font-size: 0.8rem;
}

.bar-row-clickable {
    cursor: pointer;
    border-radius: 0.5rem;
    padding: 0.4rem 0.5rem;
    margin: 0 -0.5rem;
    transition: background 0.15s;
}

.bar-row-clickable:hover {
    background: rgba(20, 161, 219, 0.06);
}

.bar-row-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.bar-row-top .bar-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}

.bar-row-top .bar-value {
    flex: 0 0 auto;
    white-space: nowrap;
}

.bar-label-wrap {
    display: grid;
    gap: 0.12rem;
}

.bar-label {
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-weight: 700;
    color: #1e1b4b;
    font-size: 0.8rem;
}

.bar-designation {
    font-size: 0.7rem;
    color: #6b5f8a;
    line-height: 1.2;
}

.bar-meta {
    font-size: 0.7rem;
    color: #6b5f8a;
    line-height: 1.25;
}

.bar-meta-stacked {
    display: grid;
    gap: 0.04rem;
}

.bar-meta-line {
    display: block;
}

.bar-meta-key {
    font-weight: 700;
    color: #4a3f6b;
}

.bar-value {
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
}

.bar-track {
    width: 100%;
    height: 5px;
    background: #f1f4f5;
    border-radius: 999px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 999px;
    /* Grown via JS rAF animating transform: scaleX (GPU compositor, no per-frame
       layout like width did). Origin left so it fills from the start of the track. */
    transform-origin: left center;
}

.bar-fill.bar-faculty { background: #14a1db; }
.bar-fill.bar-trend { background: #047857; }
.bar-fill.bar-dept { background: #047857; }
.bar-fill.bar-color-0 { background: #14a1db; }
.bar-fill.bar-color-1 { background: #ec4899; }
.bar-fill.bar-color-2 { background: #f59e0b; }
.bar-fill.bar-color-3 { background: #10b981; }
.bar-fill.bar-color-4 { background: #3b82f6; }
.bar-fill.bar-color-5 { background: #4fb8e6; }

/* ── Needs Attention Alert Strip ── */
.dash-attention-strip {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-left: 4px solid #dc2626;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}
.dash-attention-strip-icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: #dc2626;
}
.dash-attention-strip-body {
    flex: 1;
    min-width: 0;
}
.dash-attention-strip-title {
    font-family: 'Manrope', 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    color: #991b1b;
    margin: 0 0 0.35rem;
}
.dash-attention-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.dash-attention-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #7f1d1d;
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    transition: background 0.15s;
}
.dash-attention-item:hover {
    background: rgba(220, 38, 38, 0.08);
}
.dash-attention-item .att-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #dc2626;
    flex-shrink: 0;
}
.dash-attention-item .att-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}
.dash-attention-item .att-meta {
    color: #b91c1c;
    font-size: 0.72rem;
    white-space: nowrap;
    margin-left: auto;
}
.dash-attention-more {
    font-size: 0.72rem;
    color: #b91c1c;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.15rem;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
}
.dash-attention-more:hover {
    background: rgba(220, 38, 38, 0.08);
}

/* ── Collapsible chart sections ── */
.dash-section-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #dfe6fa;
    border-radius: 6px;
    background: #f8f9ff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.2s;
    color: #6b5f8a;
    padding: 0;
}
.dash-section-toggle:hover {
    background: #dcf1fb;
    border-color: #4fb8e6;
}
.dash-section-toggle svg {
    transition: transform 0.25s ease;
}
.dash-section-toggle.collapsed svg {
    transform: rotate(-90deg);
}
.dash-section-collapsible {
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    max-height: 2000px;
    opacity: 1;
}
.dash-section-collapsible.collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ── Cross-dept compact inline card ── */
.dash-crossdept-compact {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.dash-crossdept-compact-title {
    font-family: 'Manrope', 'DM Sans', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    color: #92400e;
    white-space: nowrap;
}
.dash-crossdept-compact-stats {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.dash-crossdept-compact-stat {
    font-size: 0.78rem;
    color: #78350f;
    font-weight: 600;
}
.dash-crossdept-compact-stat strong {
    font-weight: 800;
}
.dash-crossdept-expand-btn {
    margin-left: auto;
    font-size: 0.72rem;
    color: #b45309;
    font-weight: 600;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    border: 1px solid #fde68a;
    background: transparent;
    transition: background 0.15s;
}
.dash-crossdept-expand-btn:hover {
    background: rgba(245, 158, 11, 0.1);
}

/* ── Status filter pills for task registry ── */
.report-status-filters {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.report-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #4b5563;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
    white-space: nowrap;
}
.report-status-pill:hover {
    border-color: #4fb8e6;
    background: #eef8fd;
}
.report-status-pill.active {
    border-color: transparent;
    color: #fff;
}
.report-status-pill.active[data-status="all"] {
    background: #14a1db;
    border-color: #14a1db;
}
.report-status-pill.active[data-status="in_progress"] {
    background: #4fb8e6;
    border-color: #4fb8e6;
}
.report-status-pill.active[data-status="report_submitted"] {
    background: #ea580c;
    border-color: #ea580c;
}
.report-status-pill.active[data-status="completed"] {
    background: #047857;
    border-color: #047857;
}
.report-status-pill.active[data-status="overdue"] {
    background: #dc2626;
    border-color: #dc2626;
}
.report-status-pill .pill-count {
    background: rgba(255,255,255,0.25);
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
}
.report-status-pill:not(.active) .pill-count {
    background: #e5e7eb;
    color: #6b7280;
}

/* ── Status badge accessibility icons ── */
.status-badge {
    position: relative;
}
.status-icon-inline {
    display: inline-flex;
    width: 12px;
    height: 12px;
    vertical-align: -1px;
    margin-right: 2px;
    flex-shrink: 0;
}

.insight-summary {
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 0.75rem;
}

.insight-summary > div {
    border: 1px solid transparent;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.75rem 0.85rem;
    display: grid;
    gap: 0.2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.insight-summary span {
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: #6b5f8a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.insight-summary strong {
    font-family: 'Manrope', 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: #1e1b4b;
}

.insight-card {
    border: 1px solid #e5eaf8;
    border-radius: 10px;
    padding: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    background: #fbfcff;
}

.insight-card-detailed {
    gap: 0.35rem;
    padding: 0.75rem;
}

.insight-card-detailed strong {
    font-size: 0.96rem;
    color: #253056;
}

.insight-section {
    display: grid;
    gap: 0.22rem;
    padding: 0.48rem 0.56rem;
    border: 1px solid #e7ebf7;
    border-radius: 10px;
    background: #ffffff;
}

.insight-section-title {
    font-size: 0.76rem;
    font-weight: 700;
    color: #253056;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.insight-card-detailed span {
    color: #5f6d93;
    line-height: 1.35;
}

.insight-history {
    margin-top: 0.2rem;
    padding-top: 0.45rem;
    border-top: 1px solid #e5eaf8;
    display: grid;
    gap: 0.35rem;
}

.insight-history-title {
    font-size: 0.76rem;
    font-weight: 700;
    color: #253056;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.insight-history ul {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: 0.22rem;
    color: #5f6d93;
}

.insight-history li {
    line-height: 1.35;
}

.status {
    min-height: 1.1rem;
    margin: 0.2rem 0 0;
    color: #596585;
    font-size: 0.86rem;
}

#statusLine {
    display: none !important;
}

.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1120px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .side-nav {
        min-height: auto;
    }

    .menu {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .calendar-grid.week {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 920px) {
    .grid,
    .grid:last-of-type {
        grid-template-columns: 1fr;
    }

    .filters {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    #reportFilters.dash-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .dash-filter-bar {
        flex-wrap: wrap;
        width: 100%;
        box-sizing: border-box;
    }

    .dash-filter-chip {
        max-width: 100%;
        box-sizing: border-box;
    }

    .dash-filter-chip--search {
        max-width: none;
        flex: 1 1 100%;
    }

    .dash-filter-chip--date {
        flex-shrink: 1;
    }

    .dash-filters > .report-btn-primary {
        width: 100% !important;
        justify-content: center;
    }

    #reportFilters:not(.dash-filters) {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    /* Dashboard responsive — 920px */
    .dash-header-actions {
        gap: 0.3rem;
    }

    .dash-header-actions > button {
        padding: 0.35rem 0.55rem;
        font-size: 0.74rem;
    }

    .dash-main-grid {
        grid-template-columns: 1fr;
    }

    .dash-kpi-zone .info-cards {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    .dash-insight-grid {
        grid-template-columns: 1fr;
    }

    .info-cards,
    .info-cards.kpi-extended,
    .info-cards.kpi-managed {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    .info-split {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .info-donut {
        width: 160px;
        height: 160px;
    }

    .info-donut::after {
        inset: 22px;
    }

    .report-chart-grid {
        grid-template-columns: 1fr;
    }

    .insight-summary {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .report-table-tools {
        flex-wrap: wrap;
    }

    .report-type-filter {
        min-width: 0;
    }

    .report-type-filter select {
        width: 100%;
        min-width: 0;
    }

    .report-table-pager {
        justify-content: flex-start;
    }

    .calendar-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "nav actions"
            "range range";
        column-gap: 0.45rem;
        row-gap: 0.4rem;
        align-items: center;
    }

    .calendar-nav-buttons {
        grid-area: nav;
        justify-content: flex-start;
    }

    .calendar-actions {
        grid-area: actions;
        width: auto;
        justify-content: flex-end;
    }

    .calendar-actions select {
        width: auto;
        min-width: 140px;
    }

    .calendar-actions button {
        width: auto;
        min-width: 64px;
    }

    .staff-layout {
        grid-template-columns: 1fr;
    }

    .staff-list-head {
        flex-direction: column;
        align-items: flex-start;
    }

    #calendarRangeLabel {
        grid-area: range;
        text-align: left;
    }

    .calendar-grid.month .cal-days {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 112px;
        column-gap: 0.4rem;
        row-gap: 0.5rem;
        min-width: 0;
        border-radius: 12px;
    }

    .calendar-grid.month .cal-weekdays {
        display: none;
    }

    .quick-add-form .quick-row {
        grid-template-columns: 1fr 1fr;
    }

    .topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
        position: relative;
    }

    .topbar-user {
        width: 100%;
    }

    .topbar-tools {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .top-search {
        width: 100%;
        min-width: 0;
        order: 1;
    }

    .top-create-btn,
    .notif-wrap,
    #logoutBtn {
        order: 2;
    }

    .notif-menu {
        position: fixed;
        top: 60px;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-height: calc(100vh - 80px);
        z-index: 1300;
    }

    /* Was min-width:980px to force horizontal table-scroll on phones. The All
       Tasks List now STACKS into card-rows at ≤640px (see the phone block near
       the ≤620 events rules above), so a 980px floor would reintroduce the very
       sideways scroll we removed. Neutralised to 0. */
    .section-card[data-section="events"] table {
        min-width: 0;
    }

    .section-card[data-section="staff"] table {
        min-width: 820px;
    }

    .section-card[data-section="messages"] {
        padding: 0.6rem;
    }

    .profile-grid-two {
        grid-template-columns: 1fr;
    }

    .profile-layout {
        flex-direction: column;
        gap: 0.8rem;
    }

    .profile-right {
        flex: 1 1 auto;
        max-width: none;
        width: 100%;
    }

    .profile-summary-grid,
    .profile-work-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    /* Kill ALL scrollbars on mobile */
    * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .shell {
        margin: 0;
        padding: env(safe-area-inset-top, 0px) 0 0;
        height: 100dvh;
        min-height: 100dvh;
        max-width: none;
    }

    .app-shell {
        border-radius: 0;
        border: 0;
        padding: 0;
        gap: 0;
        height: calc(100dvh - env(safe-area-inset-top, 0px));
        min-height: calc(100dvh - env(safe-area-inset-top, 0px));
    }

    .side-nav {
        padding: 0.7rem 0.55rem;
        min-height: auto;
    }

    .brand-block {
        padding: 0.15rem 0.3rem 0.5rem;
    }

    .brand-logo {
        width: auto;
        height: 46px;
    }

    .brand-block strong {
        font-size: 0.95rem;
        line-height: 1.2;
        margin-bottom: 0.3rem;
    }

    .menu {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.32rem;
    }

    .menu .menu-item {
        text-align: center;
        padding: 0.52rem 0.45rem;
        font-size: 0.84rem;
        border-radius: 9px;
    }

    .topbar {
        padding: 0.78rem;
        margin-bottom: 0.45rem;
        margin-top: 0;
        border-radius: 18px;
        position: relative;
        overflow: visible;
        background: #0e7bb0;
        border: none;
        box-shadow: 0 8px 32px rgba(10, 94, 136, 0.28);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Smart-scroll: hide topbar when scrolling down */
    #appView.topbar-hidden .topbar:not(.mobile-chat-hide) {
        transform: translateY(-110%);
        opacity: 0;
        pointer-events: none;
    }

    /* Fully hide topbar in messages/chat section */
    .topbar.mobile-chat-hide {
        display: none !important;
    }

    #topbarParticleCanvas {
        border-radius: 18px;
    }

    .topbar-user {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.72rem;
    }

    .topbar-mobile-icons {
        width: 100%;
        justify-content: space-between;
        gap: 0.6rem;
    }

    .mobile-icon-btn {
        display: inline-flex !important;
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.15) !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
        color: #ffffff !important;
        backdrop-filter: blur(4px);
    }

    .topbar-mobile-actions .mobile-icon-btn {
        display: inline-flex !important;
    }

    .topbar-mobile-actions {
        position: absolute;
        top: 0.78rem;
        right: 0.78rem;
        z-index: 2;
        display: flex !important;
        align-items: center;
        gap: 0.75rem;
        padding: 0;
    }

    #mobileCreateBtn {
        display: none !important;
    }

    #mobileMenuBtn {
        position: static;
        transform: none;
        box-shadow: none;
    }

    #profileAvatarActionBtn.profile-avatar-plus {
        display: none;
    }

    .profile-avatar {
        border-color: rgba(255, 255, 255, 0.4) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    }

    .topbar-welcome h2 {
        margin-top: 0;
        line-height: 1.18;
        color: #ffffff !important;
    }

    .topbar-welcome h2.dashboard-welcome-text {
        background: linear-gradient(
            90deg,
            #ffffff 0%, #ffffff 35%,
            #fef3c7 45%, #fde68a 50%, #fef3c7 55%,
            #ffffff 65%, #ffffff 100%
        );
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        border-right-color: rgba(255, 255, 255, 0.85);
    }
    .topbar-welcome h2.dashboard-welcome-text.typing-done {
        border-right-color: transparent;
    }

    .topbar h2 {
        font-size: 1.05rem;
        color: #ffffff !important;
    }

    .topbar p {
        font-size: 0.82rem;
        line-height: 1.35;
        margin-bottom: 0;
        color: rgba(255, 255, 255, 0.85) !important;
    }

    /* Hide full-width search bar and desktop-only tools on mobile */
    .topbar-tools {
        display: none !important;
    }

    /* Show mobile search icon in topbar-mobile-actions */
    #mobileSearchBtn {
        display: inline-flex !important;
    }

    .content-shell {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.15rem 0.35rem 0;
    }

    .content-shell > .grid {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        align-content: flex-start;
        gap: 0.55rem;
        flex: 0 0 auto;
        min-height: 0;
        overflow: visible;
        padding-top: 0;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4.2rem);
        max-width: 100%;
    }

    .content-shell > .grid::-webkit-scrollbar {
        display: none;
    }

    /* Hide all scrollbars on mobile */
    .content-shell,
    .content-shell *,
    .extension-requests-card,
    .section-card {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .content-shell::-webkit-scrollbar,
    .content-shell *::-webkit-scrollbar,
    .extension-requests-card::-webkit-scrollbar,
    .section-card::-webkit-scrollbar {
        display: none;
    }

    .grid {
        padding-right: 0;
        margin-bottom: 0.5rem;
    }

    .content-shell > .grid:not(:has(> :not(.hidden))) {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        min-height: 0 !important;
        height: 0 !important;
        flex: 0 0 0 !important;
        overflow: hidden !important;
    }

    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        width: 100%;
        z-index: 95;
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        background: #ffffff;
        border-top: 1px solid #f0ecf5;
        border-radius: 0;
        padding: 0.35rem 0.2rem calc(env(safe-area-inset-bottom, 0px) + 0.25rem);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04);
        transform: none;
    }

    .mobile-bottom-item {
        flex: 1;
        min-width: 0;
        height: auto;
        min-height: 44px;
        border-radius: 0;
        border: 0;
        background: transparent;
        color: #9ca3af;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        padding: 0.25rem 0;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s;
    }

    .mobile-bottom-item svg {
        width: 23px;
        height: 23px;
    }

    .mobile-bottom-item span {
        font-size: 0.64rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        line-height: 1;
    }

    .mobile-bottom-item.active {
        background: transparent;
        color: var(--accent, #1488c7);
    }
    .mobile-bottom-item.active svg {
        stroke-width: 2.2;
    }
    .mobile-bottom-item.active svg path,
    .mobile-bottom-item.active svg rect {
        fill: currentColor;
        fill-opacity: 0.15;
    }
    .mobile-bottom-item.active span {
        font-weight: 700;
    }

    /* Active indicator line */
    .mobile-bottom-item.active::after {
        content: '';
        position: absolute;
        top: -1px;
        left: 20%;
        right: 20%;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: var(--accent, #1488c7);
    }

    /* Unread dot on Chat tab */
    .mobile-bottom-item.has-chat-unread::before {
        content: '';
        position: absolute;
        top: 0.15rem;
        right: calc(50% - 16px);
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--accent, #1488c7);
        border: 2px solid #fff;
    }

    /* Center create button — slightly smaller, less dominant */
    .mobile-bottom-create {
        flex: 0 0 auto;
        width: 46px;
        height: 46px;
        border-radius: 999px;
        background: #8338ec;
        color: #ffffff !important;
        box-shadow: 0 4px 14px rgba(131, 56, 236, 0.3);
        padding: 0;
        margin-top: -14px;
        position: relative;
        z-index: 2;
    }
    /* No active indicator on create button */
    .mobile-bottom-create.active::after { display: none; }

    .mobile-bottom-create svg {
        width: 22px;
        height: 22px;
    }

    .mobile-bottom-create:active {
        transform: scale(0.92);
    }

    .mobile-bottom-nav.hidden-in-thread {
        display: none !important;
    }

    #appView.mobile-nav-open .mobile-bottom-nav {
        display: none !important;
    }

    #statusLine {
        display: none !important;
        min-height: 0;
        margin: 0;
    }

    #appView {
        position: relative;
    }

    #appView::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(12, 16, 36, 0.34);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 89;
    }

    #appView.mobile-nav-open::before {
        opacity: 1;
        pointer-events: auto;
    }

    .side-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: env(safe-area-inset-top, 0px);
        right: 0;
        width: min(56vw, 272px);
        max-width: min(56vw, 272px);
        max-height: calc(100dvh - env(safe-area-inset-top, 0px));
        min-height: 0;
        border-radius: 16px 0 0 16px;
        z-index: 90;
        box-shadow: 0 20px 48px rgba(30, 22, 94, 0.36);
        padding: 0.72rem 0.58rem calc(env(safe-area-inset-bottom, 0px) + 0.7rem);
        /* No backdrop-filter: the drawer gradient is fully opaque, and blur(8px)
           here triggers GPU noise corruption on some Android (Mali/Exynos) devices */
        overflow: hidden;
        transform: translateX(104%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.24s ease, opacity 0.2s ease;
    }

    #appView.mobile-nav-open .side-nav {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-nav-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        min-width: 36px;
        height: 36px;
        border-radius: 999px;
        margin: 0 0 0.18rem auto;
        border-color: rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.95);
        color: #4a5574;
        padding: 0;
    }

    .mobile-nav-close svg {
        width: 18px;
        height: 18px;
    }

    #appView.mobile-nav-open .brand-block {
        padding: 0.06rem 0.1rem 0.22rem;
    }

    #appView.mobile-nav-open .brand-logo {
        width: auto;
        height: 42px;
        margin: 0 0 2px 0;
    }

    #appView.mobile-nav-open .brand-block strong {
        font-size: 0.76rem;
        line-height: 1.18;
        margin-bottom: 0.08rem;
        opacity: 0.95;
    }

    #appView.mobile-nav-open .menu {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: min-content;
        gap: 0.3rem;
        margin-top: 0.02rem;
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 0;
        flex: 1 1 auto;
        padding-bottom: 0.18rem;
        align-content: start;
        justify-items: stretch;
    }

    #appView.mobile-nav-open .menu .menu-item {
        text-align: left;
        padding: 0.34rem 0.5rem !important;
        min-height: 38px !important;
        height: 38px;
        border-radius: 10px;
        font-size: 0.79rem;
        font-weight: 600;
        line-height: 1.15;
        color: #f3f4ff;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: none;
        align-items: center;
        align-content: center;
        gap: 0.5rem;
        margin: 0;
    }

    #appView.mobile-nav-open .menu .menu-item:hover {
        background: rgba(255, 255, 255, 0.14);
        color: #ffffff;
    }

    #appView.mobile-nav-open .menu .menu-item.active {
        background: rgba(22, 28, 64, 0.62) !important;
        border-color: rgba(255, 255, 255, 0.2);
        color: #ffffff !important;
    }

    #appView.mobile-nav-open .menu .menu-item .menu-item-icon {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }

    #appView.mobile-nav-open .menu .menu-item .menu-item-icon svg {
        width: 14px;
        height: 14px;
    }

    #appView.mobile-nav-open .menu .menu-item.has-chat-unread::after {
        right: 10px;
        width: 8px;
        height: 8px;
    }

    #appView.mobile-nav-open .side-nav-mobile-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.18rem;
        margin-top: auto;
        padding-top: 0.22rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.14rem);
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    #appView.mobile-nav-open .mobile-side-btn {
        min-height: 0;
        padding: 0.34rem 0.5rem !important;
        height: 36px;
        border-radius: 10px;
        font-size: 0.78rem;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.06);
    }

    .side-nav-footer {
        display: none;
    }

    .top-create-btn,
    .top-search-go,
    .top-icon-btn {
        min-height: 38px;
    }

    .filters {
        gap: 0.42rem;
        grid-template-columns: 1fr;
    }

    .insights {
        grid-template-columns: 1fr;
    }

    /* Dashboard mobile — filters stack */
    .dash-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .dash-header-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .dash-header-actions > button {
        flex: 1 1 auto;
    }

    .dash-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
        padding: 0.35rem;
        overflow: hidden;
        max-width: 100%;
        box-sizing: border-box;
    }

    .dash-filter-bar {
        flex-direction: column;
        gap: 0.3rem;
        width: 100%;
        flex: none;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .dash-filter-chip {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .dash-filter-chip--date {
        flex-shrink: 0;
        overflow: hidden;
    }

    .dash-filter-chip--search {
        max-width: 100%;
    }

    .dash-filter-chip > select {
        width: 100% !important;
        min-width: 0 !important;
    }

    .dash-filters > .report-btn-primary {
        width: 100% !important;
        justify-content: center;
        min-height: 40px;
    }

    .dash-kpi-zone .info-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-kpi-zone .info-card .info-value {
        font-size: 1.25rem;
    }

    .dash-main-grid {
        grid-template-columns: 1fr;
        gap: var(--dash-space-sm);
    }

    /* Legacy #reportFilters compat (non-dash-filters only) */
    #reportFilters:not(.dash-filters) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
        margin-bottom: 0.5rem;
        overflow: visible;
        padding-bottom: 0;
    }

    #reportFilters:not(.dash-filters) #reportKind,
    #reportFilters:not(.dash-filters) #reportDateRange,
    #reportFilters:not(.dash-filters) #filterDepartment,
    #reportFilters:not(.dash-filters) #filterStaff,
    #reportFilters:not(.dash-filters) #reportRowTypeFilter,
    #reportFilters:not(.dash-filters) #reportActionButtons {
        grid-column: 1 / -1;
        min-width: 0 !important;
    }

    #reportFilters:not(.dash-filters) input,
    #reportFilters:not(.dash-filters) select,
    #reportFilters:not(.dash-filters) button {
        min-height: 40px;
        padding: 0.48rem 0.64rem;
        border-radius: 10px;
    }

    .report-action-buttons {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .report-action-buttons > button {
        min-height: 40px;
        height: 40px;
        flex: 1 1 calc(50% - 0.4rem);
        font-size: 0.82rem;
        padding: 0.5rem 0.6rem;
        white-space: nowrap;
    }

    /* ── Dashboard layout balance ── */
    .section-card[data-section="reports"] > h3,
    .section-card[data-section="reports"] .dash-header h3 {
        font-size: 1.05rem;
        margin-bottom: 0;
    }

    .report-infographics {
        margin-top: 0.6rem;
        padding: 0.55rem 0.5rem;
    }

    .report-infographics-head {
        margin-bottom: 0.55rem;
    }

    #reportFilters:not(.dash-filters) {
        gap: 0.35rem;
        margin-bottom: 0.35rem;
    }

    #reportFilters:not(.dash-filters) input,
    #reportFilters:not(.dash-filters) select {
        height: 40px;
        min-height: 40px;
    }

    /* Prevent horizontal overflow on reports section */
    .section-card[data-section="reports"] {
        overflow-x: hidden;
        overflow-y: visible;
        max-width: 100%;
        box-sizing: border-box;
    }

    .section-card[data-section="reports"] * {
        max-width: 100%;
        box-sizing: border-box;
    }

    .section-card {
        overflow-x: hidden;
        padding: 0.65rem;
        box-sizing: border-box;
        max-width: 100%;
    }

    /* ── Task cards — prevent right-side cropping on mobile ── */
    .events-list-card {
        overflow-x: hidden;
        max-width: 100%;
        box-sizing: border-box;
    }

    .task-cards-grid {
        max-width: 100%;
        overflow: visible;
    }

    .task-card {
        max-width: 100%;
        box-sizing: border-box;
        min-width: 0;
        overflow: hidden;
        padding: 0.75rem;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(10, 94, 136, 0.05);
    }

    .task-card-head {
        min-width: 0;
        padding-right: 2rem;
    }

    .task-card-title {
        font-size: 0.92rem;
    }

    .task-card-desc {
        font-size: 0.78rem;
    }

    .task-card-schedule {
        font-size: 0.75rem;
    }

    .task-card-meta-row {
        min-width: 0;
        overflow: hidden;
    }

    .task-meta-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .task-card-foot {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .task-tags {
        min-width: 0;
    }

    .task-activity {
        font-size: 0.72rem;
    }

    /* ── Request Page Mobile Redesign ── */

    /* 2-column compact grid */
    .req-stat-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.45rem;
        margin-bottom: 0.7rem;
    }

    /* Horizontal card layout: icon left, text right */
    .req-stat-card {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.55rem;
        padding: 0.6rem 0.7rem;
        border-radius: 12px;
        min-height: 0;
    }

    /* Remove hover lift on mobile (no hover on touch) */
    .req-stat-card:hover {
        transform: none;
    }

    /* Smaller icon */
    .req-stat-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        flex-shrink: 0;
    }

    .req-stat-icon svg {
        width: 17px;
        height: 17px;
    }

    /* Compact text */
    .req-stat-body {
        padding-left: 0;
    }

    .req-stat-label {
        font-size: 0.62rem;
        letter-spacing: 0.03em;
        margin-bottom: 1px;
    }

    .req-stat-value {
        font-size: 1.3rem;
        line-height: 1.1;
    }

    /* Sub-nav pills: horizontally scrollable */
    .req-subnav {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 3px;
        margin-bottom: 0.8rem;
        gap: 3px;
    }

    .req-subnav::-webkit-scrollbar {
        display: none;
    }

    .req-subnav-btn {
        padding: 6px 11px;
        font-size: 0.75rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Extension requests card — full width, no inner padding gaps */
    .extension-requests-card {
        padding: 0.3rem !important;
        overflow-x: hidden !important;
    }

    /* Page header compact */
    .req-page-header {
        flex-direction: column;
        gap: 0.15rem;
        margin-bottom: 0.4rem;
    }

    .req-page-header h3 {
        font-size: 0.92rem !important;
        margin: 0 !important;
    }

    .req-page-header p {
        font-size: 0.73rem !important;
        margin: 0 !important;
        color: #7d86a0;
    }

    /* Panels — compact, minimal gaps */
    .req-panel {
        padding: 0.5rem;
        border-radius: 10px;
        margin-bottom: 0;
        border-color: #e8ecf4;
    }

    .req-panel-head {
        margin-bottom: 0.35rem;
        gap: 0.3rem;
        flex-wrap: wrap;
    }

    .req-panel-head h4 {
        font-size: 0.82rem;
        flex: 1;
        min-width: 0;
    }

    .req-two-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.35rem !important;
    }

    .req-two-col--mt {
        margin-top: 0.35rem;
    }

    /* Buttons compact — inline with heading */
    .req-btn {
        padding: 5px 10px;
        font-size: 0.72rem;
        border-radius: 7px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .req-btn-sm {
        padding: 4px 9px;
        font-size: 0.7rem;
    }

    /* Tables inside request panels */
    .req-panel .table-wrap,
    .req-panel .extension-tracking-wrap,
    .extension-tracking-wrap,
    .extension-pending-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 0;
    }

    .req-panel table {
        min-width: 520px;
    }

    .req-panel th,
    .req-panel td {
        font-size: 0.72rem;
        padding: 0.35rem 0.4rem;
        white-space: nowrap;
    }

    .req-panel th {
        font-size: 0.65rem;
        letter-spacing: 0.03em;
    }

    /* Empty state messages */
    .req-panel .extension-empty,
    .req-panel .req-empty {
        font-size: 0.8rem;
        padding: 0.6rem;
    }

    /* Risk items compact */
    .extension-risk-item {
        padding: 0.4rem;
        gap: 0.35rem;
        border-radius: 8px;
    }

    .extension-risk-meta strong {
        font-size: 0.8rem;
    }

    .extension-risk-meta span {
        font-size: 0.7rem;
    }

    /* Recent request items */
    .extension-recent-item {
        padding: 0.5rem;
        border-radius: 8px;
    }

    /* History type badges */
    .req-history-type {
        font-size: 0.68rem;
        padding: 0.18rem 0.45rem;
    }

    /* Mobile touch-target overrides for small buttons */
    .toast-undo-btn {
        padding: 8px 14px;
        font-size: 14px;
        min-height: 36px;
        border-radius: 6px;
    }

    .hr-stage-pick-btn {
        padding: 6px 14px;
        font-size: 13px;
        min-height: 34px;
    }

    .hr-stage-pick-cancel {
        font-size: 12px;
        min-height: 34px;
        padding: 6px 10px;
    }

    .report-date-range {
        min-height: 40px;
        padding: 0.15rem 0.4rem;
    }

    .report-date-range input {
        min-height: 34px;
        padding: 0.28rem 0.2rem;
    }

    /* Profile mobile optimizations */
    .section-card[data-section="profile"] {
        padding: 0.45rem;
        overflow-x: clip;
        border-radius: 18px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .section-card[data-section="profile"] > h3 {
        font-size: 1.02rem;
        margin-bottom: 0.35rem;
        padding: 0 0.2rem;
    }

    .profile-layout {
        flex-direction: column;
        gap: 0.6rem;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    .profile-left {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .profile-right {
        flex: 1 1 auto;
        max-width: none;
        width: 100%;
        min-width: 0;
    }

    .profile-card {
        padding: 0.68rem;
        border-radius: 14px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow-x: clip;
        border-color: var(--hr-border, #dcf1fb);
        background: var(--hr-card-bg, #faf9ff);
        box-shadow: 0 8px 22px rgba(10, 94, 136, 0.05);
    }

    .profile-form.profile-card {
        padding: 0.75rem;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    .profile-nested-card {
        margin-top: 0.55rem;
        padding: 0.62rem;
        border-radius: 12px;
        background: #f8f5ff;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow-x: clip;
    }

    .profile-card-title {
        font-size: 0.94rem;
        margin-bottom: 0.45rem;
    }

    .profile-grid-two {
        grid-template-columns: 1fr;
        gap: 0.42rem;
        width: 100%;
    }

    .profile-grid-two > div {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .profile-grid-two input,
    .profile-grid-two select,
    .profile-grid-single input,
    .profile-grid-single textarea {
        width: 100% !important;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .profile-grid-single {
        gap: 0.42rem;
    }

    .profile-grid-two label,
    .profile-grid-single label,
    .profile-summary-grid label,
    .profile-kpi label {
        margin-bottom: 0.18rem;
        font-size: 0.8rem;
        color: #66718f;
    }

    .profile-form input,
    .profile-form select,
    .profile-form textarea,
    .profile-password-form input {
        min-height: 44px;
        padding: 0.62rem 0.78rem;
        border-radius: 12px;
        background: #fff;
        border-color: var(--hr-border, #dcf1fb);
        max-width: 100%;
        box-sizing: border-box;
    }

    .profile-form textarea {
        min-height: 92px;
    }

    .profile-summary-head {
        gap: 0.55rem;
        margin-bottom: 0.5rem;
    }

    .profile-summary-avatar {
        width: 44px;
        height: 44px;
        font-size: 0.95rem;
    }

    .profile-summary-text strong {
        font-size: 0.92rem;
    }

    .profile-summary-text span {
        font-size: 0.78rem;
    }

    .profile-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
    }

    .profile-work-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
    }

    .profile-kpi {
        padding: 0.45rem 0.5rem;
        border-radius: 8px;
    }

    .profile-kpi strong {
        font-size: 1.1rem;
    }

    .profile-kpi label {
        font-size: 0.74rem;
    }

    .profile-password-form .actions button,
    .profile-form .actions button {
        width: 100%;
        min-width: 0;
    }

    .profile-form .actions,
    .profile-password-form .actions {
        position: static;
        background: transparent;
        padding-top: 0.35rem;
        margin-top: 0.55rem;
        z-index: auto;
    }

    .profile-left {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4.8rem);
    }

    .profile-password-form,
    .profile-form.profile-card {
        margin-bottom: 0.3rem;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .profile-save-feedback {
        font-size: 0.8rem;
        padding: 0.45rem 0.55rem;
        border-radius: 8px;
    }

    .profile-form .actions,
    .profile-password-form .actions {
        margin-top: 0.6rem;
    }

    /* Mobile: flatten sub-toggles, remove indent, add top separator */
    .sound-settings-sub {
        padding-left: 0;
        margin-left: 0;
        border-left: none;
        border-top: 1px solid var(--hr-border, #dcf1fb);
        padding-top: 0.15rem;
        margin-top: 0.15rem;
    }
    .sound-setting-row,
    .perm-status-row {
        padding: 0.6rem 0.15rem;
        min-height: 48px;
    }

    .section-card[data-section="reports"] {
        overflow-x: clip;
        overflow-y: visible;
        padding: 0.55rem;
        border-radius: 14px;
    }

    .section-card[data-section="reports"] h3 {
        font-size: 1.02rem;
        margin-bottom: 0.35rem;
    }

    .info-cards,
    .info-cards.kpi-extended,
    .info-cards.kpi-managed {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.45rem;
    }

    /* 6 cards: 3 per row, 2 rows — neat alignment */
    .info-cards:has(.info-card-cross-dept) {
        grid-template-columns: repeat(3, 1fr);
    }

    .info-card {
        padding: 0.55rem 0.55rem;
        min-height: 68px;
    }

    .info-label {
        font-size: 0.72rem;
        line-height: 1.2;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: none;
    }

    .info-value {
        font-size: 1.1rem;
    }

    .info-split {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .info-donut {
        width: 140px;
        height: 140px;
    }

    .info-legend {
        max-width: 100%;
    }

    .report-infographics {
        margin-top: 0.52rem;
        padding: 0.62rem 0.52rem;
        border-radius: 12px;
    }

    .report-infographics-head {
        flex-direction: column;
        gap: 0.3rem;
    }

    .report-table-tools {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .report-table-pager {
        flex-wrap: wrap;
        gap: 0.3rem;
    }

    .section-card[data-section="reports"] .table-wrap {
        padding: 0.2rem;
    }

    /* Scroll shadow indicators — shows edge shadows only when content is scrollable */
    .section-card[data-section="reports"] .table-wrap,
    .extension-tracking-wrap {
        background:
            linear-gradient(to right, #fcfdff 30%, transparent) left center / 40px 100% no-repeat local,
            linear-gradient(to left, #fcfdff 30%, transparent) right center / 40px 100% no-repeat local,
            linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent 70%) left center / 20px 100% no-repeat scroll,
            linear-gradient(to left, rgba(0, 0, 0, 0.08), transparent 70%) right center / 20px 100% no-repeat scroll;
    }

    .section-card[data-section="reports"] table {
        min-width: 600px;
    }

    .task-cards-grid {
        grid-template-columns: 1fr;
    }

    /* === Extension Requests Mobile Optimizations === */

    .extension-requests-card {
        padding: calc(env(safe-area-inset-top, 0px) + 0.9rem) 0.7rem 0.7rem;
        overflow: visible;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: clip;
    }

    .extension-requests-card * {
        max-width: 100%;
        box-sizing: border-box;
    }

    .extension-head {
        flex-direction: column;
        gap: 0.2rem;
    }

    .extension-head h3 {
        font-size: 1rem;
        margin-bottom: 0.1rem;
    }

    .extension-head p {
        font-size: 0.78rem;
        max-width: none;
        line-height: 1.4;
    }

    /* KPI cards: 2-column compact grid */
    .extension-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.4rem;
        margin-top: 0.5rem;
        width: 100%;
    }

    .extension-kpi-card {
        padding: 0.5rem;
        gap: 0.35rem;
        min-height: 0;
        border-radius: 10px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
        overflow: hidden;
    }

    .extension-kpi-icon {
        width: 22px;
        height: 22px;
        min-width: 22px;
        border-radius: 6px;
        font-size: 0.68rem;
    }

    .extension-kpi-card .label {
        font-size: 0.68rem;
        letter-spacing: 0.02em;
        line-height: 1.3;
        word-break: break-word;
    }

    .extension-kpi-card strong {
        font-size: 1.15rem;
        margin-top: 0.1rem;
    }

    /* Main grid: single column */
    .extension-main-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem;
        margin-top: 0.5rem;
        width: 100%;
    }

    /* Panels: tighter */
    .extension-panel {
        margin-top: 0.5rem;
        padding: 0.5rem;
        border-radius: 10px;
        overflow: hidden;
    }

    .extension-panel h4 {
        font-size: 0.88rem;
        margin-bottom: 0.35rem;
    }

    /* Tracking table: horizontal scroll */
    .extension-tracking-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
    }

    .extension-tracking-wrap table {
        min-width: 480px;
    }

    .extension-tracking-wrap th,
    .extension-tracking-wrap td {
        font-size: 0.72rem;
        padding: 0.3rem 0.35rem;
    }

    .extension-action-cell {
        min-width: 68px;
        text-align: left;
    }

    .extension-action-stack {
        gap: 0.25rem;
        justify-items: start;
    }

    .extension-action-stack > button,
    .extension-request-actions button {
        min-width: 72px;
        padding: 0.4rem 0.55rem;
        font-size: 0.75rem;
        min-height: 36px;
    }

    .extension-request-actions {
        gap: 0.25rem;
        justify-content: flex-start;
    }

    .extension-date-modify {
        min-width: 100px;
        font-size: 0.7rem;
    }

    /* Risk sidebar compact */
    .extension-risk {
        order: 2;
    }

    .extension-tracking {
        order: 1;
    }

    .extension-risk-list {
        gap: 0.3rem;
    }

    .extension-risk-item {
        padding: 0.4rem 0.5rem;
        border-radius: 8px;
        gap: 0.4rem;
    }

    .extension-risk-meta strong {
        font-size: 0.82rem;
    }

    .extension-risk-meta span {
        font-size: 0.72rem;
    }

    .risk-pill {
        font-size: 0.65rem;
        padding: 0.12rem 0.4rem;
    }

    /* Recent extensions compact */
    .extension-recent {
        margin-top: 0.5rem;
    }

    .extension-recent h4 {
        font-size: 0.88rem;
        margin-bottom: 0.3rem;
    }

    #extensionRecentList {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .extension-recent-item {
        padding: 0.45rem 0.5rem;
        gap: 0.4rem;
        border-radius: 8px;
    }

    .extension-recent-item strong {
        font-size: 0.84rem;
    }

    .extension-recent-item span,
    .extension-recent-item .meta-line {
        font-size: 0.72rem;
    }

    .extension-empty {
        padding: 0.55rem;
        gap: 0.4rem;
        border-radius: 8px;
        grid-template-columns: auto 1fr;
    }

    /* Pending table: horizontal scroll */
    .extension-pending-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
    }

    .extension-pending-table table {
        min-width: 400px;
    }

    .extension-pending-table th,
    .extension-pending-table td {
        font-size: 0.72rem;
        padding: 0.3rem 0.35rem;
    }

    .extension-empty .icon {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        font-size: 0.82rem;
    }

    .extension-empty p {
        font-size: 0.78rem;
    }

    /* === Calendar Mobile Optimizations === */

    .calendar-studio {
        padding: 0.55rem;
        border-radius: 14px;
    }

    .calendar-studio > h3 {
        font-size: 0.95rem;
        margin-bottom: 0.3rem;
        letter-spacing: -0.01em;
    }

    /* Toolbar: streamlined compact layout */
    .calendar-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "range"
            "nav"
            "actions";
        gap: 0.3rem;
        align-items: center;
    }

    #calendarRangeLabel {
        grid-area: range;
        text-align: center;
        font-size: 0.92rem;
        font-weight: 700;
        margin: 0;
        color: var(--ink);
        letter-spacing: -0.01em;
    }

    .calendar-nav-buttons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.25rem;
        grid-area: nav;
    }

    .calendar-nav-buttons button {
        min-width: 0;
        padding: 0.38rem 0.25rem;
        font-size: 0.76rem;
        border-radius: 8px;
    }

    .calendar-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        grid-area: actions;
        margin-left: 0;
        width: 100%;
        gap: 0.25rem;
    }

    .calendar-actions select {
        font-size: 0.76rem;
        padding: 0.38rem 0.5rem;
        min-width: 0;
        width: 100%;
        border-radius: 8px;
    }

    .calendar-actions button {
        min-width: 68px;
        padding: 0.38rem 0.5rem;
        font-size: 0.76rem;
        border-radius: 8px;
    }

    /* Calendar container */
    .full-calendar {
        padding: 0.3rem;
        border-radius: 10px;
        margin-top: 0.35rem;
        overflow-x: hidden;
    }

    /* ── Month: single-column card layout ── */
    .calendar-grid.month {
        width: 100%;
        min-width: 0;
    }

    .calendar-grid.month .cal-weekdays {
        display: none;
    }

    .calendar-grid.month .cal-days {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(auto, auto);
        column-gap: 0;
        row-gap: 0.45rem;
        min-width: 0;
        border-radius: 10px;
    }

    .cal-day {
        padding: 0.5rem;
        border-radius: 10px;
        border-top-width: 3px;
    }

    .cal-day.muted {
        opacity: 0.35;
    }

    .cal-day-head {
        gap: 0.3rem;
        align-items: center;
    }

    .cal-day-num {
        font-size: 0.88rem;
    }

    .cal-add-btn {
        opacity: 1;
        width: 24px;
        height: 24px;
        min-width: 24px;
    }

    .cal-day-events {
        position: static;
        margin-top: 0.35rem;
        max-height: none;
        gap: 0.25rem;
        overflow-y: visible;
    }

    .cal-day-events span {
        font-size: 0.72rem;
        padding: 0.2rem 0.35rem;
        white-space: normal;
        line-height: 1.25;
    }

    .event-pill {
        font-size: 0.72rem;
        padding: 0.22rem 0.38rem;
        border-radius: 8px;
    }

    /* ── Week view ── */
    .calendar-grid.week {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0.3rem;
        row-gap: 0.35rem;
    }

    .week-day {
        min-height: 100px;
        padding: 0.28rem;
        border-radius: 8px;
    }

    .week-day-head {
        font-size: 0.72rem;
    }

    .week-day-events {
        margin-top: 0.18rem;
        gap: 0.15rem;
    }

    .week-day-events span {
        font-size: 0.62rem;
        padding: 0.12rem 0.2rem;
        border-radius: 5px;
    }

    /* ── Day view ── */
    .calendar-grid.day {
        padding: 0.3rem;
    }

    .calendar-grid.day .day-mode-head {
        font-size: 0.85rem;
        margin-bottom: 0.28rem;
    }

    .day-mode-item {
        padding: 0.35rem;
        font-size: 0.72rem;
        border-radius: 7px;
    }

    .day-events-panel {
        padding: 0.35rem;
        border-radius: 8px;
        margin-top: 0.35rem;
    }

    .day-events-list li {
        padding: 0.28rem 0.38rem;
        font-size: 0.72rem;
        border-radius: 6px;
    }

    /* Quick-add panel compact */
    .quick-add-form .quick-row {
        grid-template-columns: 1fr;
    }

    .event-details-box {
        /* full-screen sheet pinned in place — no swiping */
        position: fixed;
        inset: 0;
        left: 0;
        top: 0;
        transform: none;
        width: 100vw;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
        padding: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .report-submit-modal {
        /* full-screen flex layout — form scrolls, footer stays pinned */
        position: fixed;
        inset: 0;
        left: 0;
        top: 0;
        transform: none;
        width: 100vw;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .quick-add-panel {
        /* full-screen sheet with flex layout to pin buttons at bottom */
        position: fixed;
        inset: 0;
        transform: none;
        width: 100vw;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        overscroll-behavior: contain;
    }

    .event-details-box {
        bottom: auto;
        height: auto;
        max-height: 100dvh;
        scroll-padding-top: 1rem;
    }

    .edv-body {
        grid-template-columns: 1fr;
        padding: 0.7rem 0.8rem;
    }

    .event-details-meta {
        grid-template-columns: repeat(2, 1fr);
    }

    .edv-header {
        position: relative !important;
        top: auto !important;
        z-index: 3;
        padding: 0.75rem 0.8rem 0.55rem;
        flex-wrap: wrap;
    }

    .edv-header-left {
        flex: 0 0 100%;
        order: 2;
    }

    .edv-header-left h4,
    #eventDetailsTitle {
        font-size: 1.05rem;
    }

    .edv-header-right {
        flex: 0 0 100%;
        order: 1;
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .edv-status-pill {
        font-size: 0.68rem;
    }

    .edv-actions {
        position: static !important;
        bottom: auto !important;
        z-index: auto;
        padding: 0.6rem 0.8rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.6rem);
    }

    .quick-add-head,
    .report-submit-head {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .quick-add-close,
    #closeReportSubmitBtn {
        min-width: 40px;
    }

    .report-submit-head h4,
    .quick-add-head h4 {
        font-size: 1rem;
        line-height: 1.25;
        margin: 0;
        max-width: none;
        word-break: break-word;
    }

    .event-details-meta {
        grid-template-columns: repeat(2, 1fr);
    }

    .event-details-description {
        margin-top: 0;
        margin-bottom: 0;
    }

    .subtask-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .subtask-head h5 {
        min-width: 0;
    }

    #toggleAddSubtaskBtn {
        justify-self: end;
        min-width: 0;
        width: max-content;
        max-width: 100%;
        padding: 0.38rem 0.55rem;
        white-space: nowrap;
    }

    .edv-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .edv-actions > * {
        min-width: 0;
        flex: 1 1 auto;
        white-space: normal;
        line-height: 1.25;
        padding: 0.65rem 0.55rem;
    }

    .edv-actions > *:first-child:not(.hidden) {
        flex: 1 1 100%;
    }

    #useForReportBtn {
        min-width: 0;
    }

    .messages-studio {
        min-height: 0;
        height: auto;
        flex: 1 1 0;
        padding: 0;
    }

    .chat-layout {
        height: 100%;
    }

    .chat-users-list {
        max-height: 180px;
    }

    .chat-messages-list {
        min-height: 0;
        max-height: none;
    }

    .chat-compose-bar {
        grid-template-columns: auto auto 1fr auto;
        gap: 0.32rem;
    }

    .chat-attach-btn,
    .chat-send-btn {
        width: 38px;
        min-width: 38px;
        height: 38px;
    }

    #chatMessageInput {
        height: 38px;
        min-height: 38px;
        max-height: 120px;
    }

    /* ── Task Notes panel — mobile optimisation ── */
    .task-notes-panel {
        margin-top: 0.5rem;
        padding: 0.45rem;
        border-radius: 8px;
    }

    .task-notes-header h5 {
        font-size: 0.82rem;
        margin-bottom: 0.35rem;
    }

    .task-notes-list {
        max-height: 220px;
    }

    .task-notes-composer textarea {
        font-size: 0.82rem;
        padding: 0.55rem 0.6rem;
        min-height: 60px;
    }

    .task-notes-composer-actions {
        gap: 0.3rem;
    }

    .task-notes-attach-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #f0f2f8;
        padding: 0;
    }

    .task-notes-send-btn {
        padding: 0.45rem 1rem;
        font-size: 0.8rem;
        min-height: 40px;
        border-radius: 8px;
    }

    .task-note-avatar {
        width: 26px;
        height: 26px;
        font-size: 0.68rem;
    }

    .task-note-image img {
        max-width: 160px;
        max-height: 140px;
    }
}

.cal-day-num-btn {
    width: auto;
    border: 0;
    background: transparent;
    color: #2d3250;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0;
    transition: color 0.15s;
}

.cal-day-num-btn:hover {
    transform: none;
    filter: none;
    color: var(--accent, #14a1db);
}

.cal-add-btn {
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 0;
    border-radius: 7px;
    border: 1.5px solid transparent;
    background: transparent;
    color: #a5a0c0;
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    opacity: 0;
}
.cal-day:hover .cal-add-btn,
.week-day:hover .cal-add-btn {
    opacity: 1;
}

.cal-add-btn:hover {
    transform: none;
    filter: none;
    background: #dcf1fb;
    border-color: #a9dcf1;
    color: #14a1db;
}
.cal-add-btn:disabled,
.cal-add-btn.disabled {
    opacity: 0 !important;
    cursor: not-allowed;
}

.week-add-btn {
    min-width: 22px;
}

.day-add-btn {
    width: auto;
    min-width: auto;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    border: 1px solid #d4d0e8;
    background: #f8f7ff;
    color: #14a1db;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 1;
}
.day-add-btn:hover {
    background: #dcf1fb;
    border-color: #a9dcf1;
}

.event-pill {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #c8c2e0;
    border-left: 4px solid #7c6fc0;
    padding: 0.25rem 0.4rem 0.25rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #eae6f5;
    color: #1f2937;
    transition: opacity 0.15s;
    cursor: pointer;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.event-pill.pill-tone-0 { background: #ffe6c2; border-color: #f5bf72; border-left: 4px solid #d48a00; color: #6b4000; }
.event-pill.pill-tone-1 { background: #d4e8ff; border-color: #96c4f5; border-left: 4px solid #2874c0; color: #14406a; }
.event-pill.pill-tone-2 { background: #ddd4ff; border-color: #b5a3f0; border-left: 4px solid #0e7bb0; color: #362080; }
.event-pill.pill-tone-3 { background: #c8f0d0; border-color: #88d49e; border-left: 4px solid #1a8c3c; color: #145028; }
.event-pill.pill-tone-4 { background: #ffd6e5; border-color: #f0a0be; border-left: 4px solid #cc2954; color: #6b1a38; }
.event-pill.pill-tone-5 { background: #cceff5; border-color: #88d4e0; border-left: 4px solid #148a9c; color: #0f4a54; }
.event-pill.pill-tone-6 { background: #ffedba; border-color: #f5d060; border-left: 4px solid #b08000; color: #5a4200; }
.event-pill.pill-tone-7 { background: #d8ddff; border-color: #a8b2f0; border-left: 4px solid #4252c0; color: #283668; }
.event-pill.admin-assigned-task {
    background: #ffe9cf !important;
    border-color: #ffc57e !important;
    color: #8a4700 !important;
}

/* Staff-only marker: assigned by admin/department head (keeps status color intact). */
.event-pill.admin-source {
    position: relative;
    padding-left: 0.58rem;
}

.event-pill.admin-source::before {
    content: '';
    position: absolute;
    left: 0.16rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 65%;
    border-radius: 999px;
    background: #ff8a00;
}

.event-pill.status-scheduled {
    background: #cce4ff !important;
    border-color: #85bbf5 !important;
    border-left: 4px solid #2570c5 !important;
    color: #14436b !important;
}

.event-pill.status-in-progress {
    background: #e0d4ff !important;
    border-color: #b8a4f0 !important;
    border-left: 4px solid #0e7bb0 !important;
    color: #3b1a8c !important;
}

.event-pill.status-pending-approval,
.event-pill.status-report-submitted {
    background: #ffe3b0 !important;
    border-color: #f5b84a !important;
    border-left: 4px solid #c47a00 !important;
    color: #6b4008 !important;
}

.event-pill.status-rejected {
    background: #ffd4d9 !important;
    border-color: #f0909e !important;
    border-left: 4px solid #c82040 !important;
    color: #7d1628 !important;
}

.event-pill.status-report-pending {
    background: #ffe3b0 !important;
    border-color: #f5b84a !important;
    border-left: 4px solid #c47a00 !important;
    color: #6b4008 !important;
}

.event-pill.status-completed {
    background: #c0edce !important;
    border-color: #7dd49a !important;
    border-left: 4px solid #158537 !important;
    color: #0f4d24 !important;
}

.event-pill.status-overdue {
    background: #ffc8ce !important;
    border-color: #f07888 !important;
    border-left: 4px solid #c41a2e !important;
    color: #721420 !important;
}

.day-mode-item.admin-assigned-task {
    background: #fff0dc !important;
    border-color: #ffc983 !important;
    color: #7b4300 !important;
}

.day-mode-item.admin-source {
    border-left: 4px solid #ff8a00 !important;
}

.day-mode-item.status-scheduled {
    background: #eaf3ff !important;
    border-color: #c6dcff !important;
    color: #1f5f95 !important;
}

.day-mode-item.status-in-progress {
    background: #f3efff !important;
    border-color: #ddd2fb !important;
    color: #5a38b4 !important;
}

.day-mode-item.status-pending-approval,
.day-mode-item.status-report-submitted {
    background: #fff2e2 !important;
    border-color: #ffd09d !important;
    color: #8b5a14 !important;
}

.day-mode-item.status-rejected {
    background: #fff0f2 !important;
    border-color: #f4c9d0 !important;
    color: #aa3649 !important;
}

.day-mode-item.status-report-pending {
    background: #fff2e2 !important;
    border-color: #ffd09d !important;
    color: #8b5a14 !important;
}

.day-mode-item.status-completed {
    background: #ebf9ef !important;
    border-color: #c4e7cf !important;
    color: #1f7140 !important;
}

.day-mode-item.status-overdue {
    background: #ffe9ec !important;
    border-color: #ffb7c0 !important;
    color: #9a2131 !important;
}

.event-pill:hover {
    transform: none;
    filter: none;
    opacity: 0.82;
}
.day-event-actions .ghost:hover {
    transform: none;
    filter: none;
}

/* ── Quick Add Panel ─────────────────────── */
.quick-add-panel {
    position: fixed;
    /* Centred via inset+margin, NOT transform: a non-none transform on a modal
       <dialog> mispositions native date/time picker popups in Chromium, which
       made the time field's clock picker unusable. */
    inset: 0;
    margin: auto;
    transform: none;
    width: min(640px, calc(100vw - 2rem));
    max-height: min(calc(100vh - 2.5rem), 90vh);
    overflow: clip;
    z-index: 1600;
    border: 1px solid rgba(20, 161, 219, 0.12);
    border-radius: 20px;
    background: #fff;
    padding: 0;
    box-shadow: 0 25px 60px rgba(20, 161, 219, 0.15), 0 8px 20px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}

dialog.quick-add-panel {
    margin: auto;
    overflow: clip;
    color-scheme: light;
}

dialog.quick-add-panel::backdrop {
    background: transparent;
}

dialog.quick-add-panel:not([open]) {
    display: none !important;
}

dialog.quick-add-panel[open] {
    display: flex;
    height: min(calc(100vh - 2.5rem), 90vh);
}

.quick-add-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--hr-border, #dcf1fb);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.quick-add-head-left {
    flex: 1 1 auto;
    min-width: 0;
}

.quick-add-head h4 {
    margin: 0;
    color: var(--hr-text, #1e1b4b);
    font-size: 1.08rem;
    font-weight: 800;
}

/* Header icon badge sits left of the title. */
.quick-add-head-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--hr-bg, #eef8fd);
    border: 1px solid var(--hr-border, #dcf1fb);
    color: #14a1db;
}

/* Mode-aware subtitle: the markup carries both a Normal and a Pipeline line;
   only the one matching the active task kind is shown. The panel gains
   .is-pipeline-kind when Pipeline is selected (setQuickAddTaskKind). Without
   this rule both lines render together ("Assign and schedule a task Ordered,
   multi-stage workflow"). */
.quick-add-subtitle {
    margin: 3px 0 0;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--muted, #6b7280);
}
.quick-add-subtitle .qa-sub-pipeline { display: none; }
.quick-add-panel.is-pipeline-kind .quick-add-subtitle .qa-sub-normal { display: none; }
.quick-add-panel.is-pipeline-kind .quick-add-subtitle .qa-sub-pipeline { display: inline; }

.quick-add-close {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    position: relative;
    z-index: 3;
    pointer-events: auto;
    touch-action: manipulation;
    border: 1px solid var(--hr-border, #dcf1fb) !important;
    border-radius: 10px !important;
    background: var(--hr-bg, #eef8fd) !important;
    color: #4b5563 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    flex-shrink: 0;
    font-size: 1.1rem !important;
    line-height: 1 !important;
}
.quick-add-close:hover {
    background: #dcf1fb !important;
    color: var(--hr-text, #1e1b4b) !important;
    border-color: rgba(20, 161, 219, 0.3) !important;
    transform: none;
}

.quick-add-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: clip;
}

.quick-add-fields {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-anchor: none;
    padding: 0.25rem 1.35rem 1rem;
    scrollbar-gutter: stable;
}


.quick-add-fields > label:first-child {
    margin-top: 0;
}

.quick-add-form label {
    color: var(--hr-muted, #8b80b0);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.quick-add-form input,
.quick-add-form select,
.quick-add-form textarea {
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.quick-add-form input:focus,
.quick-add-form select:focus,
.quick-add-form textarea:focus {
    outline: none;
    border-color: var(--hr-blue, #14a1db);
    box-shadow: 0 0 0 3px rgba(20, 161, 219, 0.1);
}

/* ── QA Sections ─────────────────────── */
.qa-section {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--hr-border, #dcf1fb);
}

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

.qa-section-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hr-blue, #14a1db);
    margin-bottom: 0.65rem;
}

.qa-optional {
    font-weight: 500;
    color: var(--hr-muted, #8b80b0);
    text-transform: none;
    letter-spacing: 0;
}

.qa-monitor-wrap {
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(120, 110, 180, 0.25);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.qa-monitor-wrap.hidden { display: none; }

.qa-monitor-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hr-blue, #14a1db);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.qa-monitor-select {
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(120, 110, 180, 0.35);
    border-radius: 6px;
    font-size: 0.85rem;
    background: #fff;
}

/* Compact info icon next to the Monitored By label — replaces the verbose
 * inline hint that previously took two extra lines of vertical space. The
 * full explanation is in the `title` attribute (native tooltip on hover). */
.qa-monitor-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 0.15rem;
    font-size: 0.78rem;
    line-height: 1;
    color: var(--hr-muted, #8b80b0);
    cursor: help;
    user-select: none;
    transition: color 120ms ease;
}
.qa-monitor-info:hover,
.qa-monitor-info:focus {
    color: var(--hr-blue, #14a1db);
    outline: none;
}

/* Monitoring badge shown in task details header when current user is a monitor */
.task-monitor-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(20, 161, 219, 0.12);
    color: #1276c2;
    border: 1px solid rgba(20, 161, 219, 0.25);
}

.task-monitor-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--hr-muted, #6b7280);
    margin-top: 0.25rem;
}

.task-monitor-row strong { color: var(--hr-text, #1f2937); font-weight: 600; }

.qa-field-label {
    display: block;
    margin-top: 0.65rem;
    margin-bottom: 0.3rem;
}

.qa-grid {
    display: grid;
    gap: 0.65rem 0.75rem;
}

.qa-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qa-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Quick Add schedule row: the date fields (.date-display-field, 44px) and the
   custom time pickers (.sec-tp-trigger, 36px) are different shared components
   with different default heights. Inside the schedule grid only, normalize all
   four boxes to one height (42px — matches the Priority select below) so the
   Start/End Date and Start/End Time boxes are the same size. Scoped to
   .qa-order-schedule so other screens' date/time controls are untouched. */
.qa-order-schedule .date-display-field,
.qa-order-schedule .date-display-text {
    min-height: 42px;
    height: 42px;
}
.qa-order-schedule .sec-tp-trigger {
    padding-top: 11px;
    padding-bottom: 11px;
}

.qa-field {
    min-width: 0;
}

.qa-field label {
    display: block;
    margin-bottom: 0.3rem;
}

.qa-field--full {
    grid-column: 1 / -1;
}

/* Live character counter under the Quick Add title input */
.qa-char-count {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    line-height: 1;
    text-align: right;
    color: var(--text-muted, #94a3b8);
    transition: color 0.15s ease;
}

.qa-char-count.is-warn {
    color: #d97706; /* amber — approaching the limit */
}

.qa-char-count.is-max {
    color: #dc2626; /* red — at the limit */
    font-weight: 600;
}

/* ── File Drop Zone ─────────────────────── */
.qa-file-drop {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem 1.25rem !important;
    border: 1.5px dashed #a9dcf1 !important;
    border-radius: 12px !important;
    background: #faf8ff;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-align: center;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.qa-file-drop:hover {
    background: #f3edff;
    border-color: #4fb8e6 !important;
}
.qa-file-drop svg {
    color: var(--hr-blue, #14a1db);
    opacity: 0.6;
}
.qa-file-drop span {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hr-text, #1e1b4b);
}
.qa-file-drop small {
    font-size: 0.7rem;
    color: var(--hr-muted, #8b80b0);
    font-weight: 400;
}
.qa-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    border: 0 !important;
}

/* ── QA Actions ─────────────────────── */
.quick-add-actions {
    flex-shrink: 0;
    display: flex;
    gap: 0.6rem;
    padding: 0.85rem 1.35rem;
    border-top: 1px solid var(--hr-border, #dcf1fb);
    background: #faf9ff;
    border-radius: 0 0 20px 20px;
}

.qa-submit-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    width: auto !important;
    padding: 0.6rem 1.4rem !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--hr-blue, #14a1db), #5cc3ea) !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(20, 161, 219, 0.25);
}
.qa-submit-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(20, 161, 219, 0.3);
}

.qa-cancel-btn {
    width: auto !important;
    padding: 0.6rem 1.1rem !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--hr-muted, #8b80b0) !important;
    background: transparent !important;
    border: 1px solid var(--hr-border, #dcf1fb) !important;
    border-radius: 10px !important;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.qa-cancel-btn:hover {
    background: #fff !important;
    color: var(--hr-text, #1e1b4b) !important;
}

/* Legacy compat */
.quick-add-actions button.ghost {
    background: transparent;
    border: 1px solid var(--hr-border, #dcf1fb);
    color: var(--hr-muted, #8b80b0);
    width: auto;
}
.quick-add-actions button.ghost:hover {
    background: #fff;
    border-color: #a9dcf1;
}

.quick-add-form .quick-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 0.55rem;
}

.quick-add-form .quick-row.quick-row-datetime {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.quick-add-form .quick-row.quick-row-single {
    grid-template-columns: 1fr;
}

.quick-add-form .quick-row + .quick-row {
    margin-top: 0.2rem;
}

@media (max-width: 640px) {
    .qa-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(30, 27, 75, 0.38);
    z-index: 1100;
    /* align-items/justify-content only take effect when display is explicitly set to flex inline
       by the opening JS (e.g. modal.style.display = 'flex'). Left as default (block) for other
       callers that render a nested .modal-backdrop inside innerHTML — those continue to work. */
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 24px;
}
.modal-panel {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.modal-header h3 {
    margin: 0;
    font-size: 17px;
    color: #111827;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modal-close {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    color: #4b5563;
    cursor: pointer;
    font-size: 0;
    line-height: 1;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    position: relative;
}
.modal-close::before,
.modal-close::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 1.75px;
    background: currentColor;
    border-radius: 2px;
    top: 50%;
    left: 50%;
}
.modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.modal-close:hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;
}
.modal-close:active { transform: scale(0.92); }
.modal-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(20, 161, 219, 0.35);
}
@media (max-width: 640px) {
    .modal-header { padding: 14px 16px; }
    .modal-header h3 { font-size: 15px; }
}
.modal-body {
    padding: 20px 24px 24px;
    overflow-y: auto;
}

/* HR payroll preview modal */
.hr-preview-panel { max-width: 920px; }
.hr-preview-banner {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #3730a3;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 14px;
}
.hr-preview-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.hr-preview-totals > div {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hr-preview-totals span {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hr-preview-totals strong {
    font-size: 16px;
    color: #111827;
}
.hr-preview-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 10px;
}
.hr-preview-warning strong { color: #78350f; }
.hr-preview-table-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: auto;
}
.hr-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.hr-preview-table th,
.hr-preview-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f3f4f6;
    text-align: left;
}
.hr-preview-table thead th {
    background: #f9fafb;
    color: #374151;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}
.hr-preview-table tbody tr:hover { background: #f9fafb; }
.hr-preview-lop {
    color: #b91c1c;
    font-weight: 600;
}


#quickAddBackdrop {
    z-index: 1598 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
}

#quickAddPanel {
    z-index: 1602 !important;
    pointer-events: auto !important;
    isolation: isolate;
}

body.modal-open {
    overflow: hidden;
}

body.quick-add-open > :not(#quickAddPanel):not(#quickAddBackdrop):not(#favGroupModalOverlay):not(script):not(style) {
    pointer-events: none !important;
}

body.quick-add-close-shield::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1700;
    pointer-events: auto;
    background: transparent;
}

.form-error {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.75rem 0 0.25rem;
    padding: 0.7rem 0.85rem 0.7rem 0.75rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 3px solid #dc2626;
    border-radius: 8px;
    color: #7f1d1d;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.005em;
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.05);
}

.form-error:empty {
    display: none;
}

.form-error::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background-color: #dc2626;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>") no-repeat center / contain;
}

.type-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.73rem;
    font-weight: 600;
    line-height: 1.3;
}

.priority-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid;
    line-height: 1.3;
}

.priority-badge.priority-urgent {
    background: #ffe9ee;
    border-color: #ffc3d1;
    color: #b3224c;
}

.priority-badge.priority-normal {
    background: #eaf2ff;
    border-color: #c9dcff;
    color: #2457a5;
}

.priority-badge.priority-lowest {
    background: #eef8ea;
    border-color: #cde8c2;
    color: #3f7c2f;
}

.type-workshop {
    background: #ffefd8;
    color: #8f5c07;
}

.type-webinar {
    background: #e4f2ff;
    color: #1a5789;
}

.type-seminar {
    background: #ebe9ff;
    color: #4840a2;
}

.type-fdp {
    background: #e7f8ea;
    color: #1f6a39;
}

.type-placement_drive {
    background: #ffe8ed;
    color: #8b1f3f;
}

.type-guest_lecture {
    background: #fff6d9;
    color: #8a6a00;
}

.type-training_program {
    background: #e7fbff;
    color: #0f5a68;
}

.type-other {
    background: #f2f3f8;
    color: #4f5b78;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.73rem;
    font-weight: 600;
    border: 1px solid transparent;
    line-height: 1.3;
}

.status-scheduled {
    background: #ecf3ff;
    color: #1f5f95;
    border-color: #c7ddff;
}

.status-in_progress {
    background: #f3efff;
    color: #5a38b4;
    border-color: #ddd2fb;
}

.status-pending_approval,
.status-report_submitted {
    background: #fff3e6;
    color: #8b5a14;
    border-color: #f6d2a2;
}

.status-rejected {
    background: #fff0f2;
    color: #aa3649;
    border-color: #f3cad1;
}

.status-ended {
    background: #f1f4fa;
    color: #5a6783;
    border-color: #d5ddeb;
}

.status-report_pending {
    background: #fff3e6;
    color: #8b5a14;
    border-color: #f6d2a2;
}

.status-completed {
    background: #e9faee;
    color: #1d6f3b;
    border-color: #bfe8ca;
}

.status-overdue {
    background: #ffe8ea;
    color: #a8323d;
    border-color: #ffc2c9;
}

/* Completion stage statuses — color-coded by extension count */
.status-completed_on_time {
    background: #e9faee;
    color: #1d6f3b;
    border-color: #bfe8ca;
}
.status-completed_late {
    background: #e9faee;
    color: #1d6f3b;
    border-color: #bfe8ca;
}
.status-completed_ext_1 {
    background: #fef9e7;
    color: #8b6914;
    border-color: #f5e6a3;
}
.status-completed_ext_2 {
    background: #fff3e6;
    color: #b45309;
    border-color: #f6d2a2;
}
.status-completed_ext_3 {
    background: #ffe8ea;
    color: #a8323d;
    border-color: #ffc2c9;
}
.status-in_progress_subtask_overdue {
    background: #fff3e6;
    color: #b45309;
    border-color: #f6d2a2;
}
.status-failed {
    background: #f1f4fa;
    color: #6b7280;
    border-color: #d5ddeb;
}

/* Status sub-tag (e.g. "Subtask Overdue" beneath badge) */
.status-sub-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    margin-top: 3px;
    line-height: 1.3;
}
.status-sub-tag--warn {
    background: #fff3e6;
    color: #b45309;
    border: 1px solid #f6d2a2;
}
.status-sub-tag--ext {
    background: #fef9e7;
    color: #8b6914;
    border: 1px solid #f5e6a3;
}
.status-sub-tag--subtask {
    background: #fff8e1;
    color: #b45309;
    border: 1px solid #f6d2a2;
}
.status-badge.status-badge-sm {
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    opacity: 0.75;
}

/* Failed / locked task card styling */
.task-card.task-failed {
    opacity: 0.55;
    border-left: 4px solid #9ca3af;
}
.task-card.task-failed .task-card-title {
    text-decoration: line-through;
    color: #6b7280;
}
.task-card.task-failed:hover {
    opacity: 0.7;
}

/* Extension count badge */
.extension-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
}
.ext-badge-1 { background: #fef9e7; color: #8b6914; }
.ext-badge-2 { background: #fff3e6; color: #b45309; }
.ext-badge-3 { background: #ffe8ea; color: #a8323d; }

/* Locked task notice in details modal */
.task-locked-notice {
    background: #fef3cd;
    border: 1px solid #f6d96b;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
    font-size: 0.82rem;
    color: #856404;
    line-height: 1.4;
}

/* Overdue warning shown to assignees blocked by the deadline gate */
.task-overdue-notice {
    background: #fde8e8;
    border: 1px solid #f5a3a3;
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    margin: 0.6rem 0;
    font-size: 0.82rem;
    color: #842029;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.task-overdue-notice strong { color: #6c1d24; }
.task-overdue-notice-text { display: block; }
.task-overdue-notice-actions { display: flex; }
.task-overdue-notice-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    background: #b42318;
    color: #fff;
    border: 1px solid #91160c;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
    box-shadow: 0 1px 2px rgba(180, 35, 24, 0.25);
}
.task-overdue-notice-btn:hover { background: #91160c; }
.task-overdue-notice-btn:active { transform: translateY(1px); }
.task-overdue-notice-btn:focus-visible { outline: 2px solid #842029; outline-offset: 2px; }
.task-overdue-notice-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Extension warning text colors */
.extension-warning-text { color: #b45309; font-weight: 600; }
.extension-final-text { color: #a8323d; font-weight: 600; }

/* Calendar pill for failed tasks */
.event-pill.status-failed {
    border-left-color: #9ca3af !important;
    opacity: 0.6;
}
.day-mode-item.status-failed {
    background: #f1f4fa !important;
    border-color: #d5ddeb !important;
    color: #6b7280 !important;
    opacity: 0.6;
}

/* Legacy staff-perf-card / .perf-metric / .perf-bar styles removed —
   the old in-Requests Staff Performance card was promoted to the top-level
   Performance section, which is built entirely with Tailwind via .tw-scope. */

/* ── Performance section (top-level, role-scoped staff dashboard) ───── */
/* The interior is built with Tailwind via .tw-scope (see Stitch design). */
/* This wrapper just needs to fill the full content width — without it
   the .grid:last-of-type 1fr 1fr parent traps it in column 1. */
.performance-section {
    grid-column: 1 / -1;
}

/* Quick date-range pills */
.tw-scope .perf-range-pill {
    background: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.tw-scope .perf-range-pill:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.tw-scope .perf-range-pill.is-active {
    background: #1488c7;
    color: #ffffff;
    border-color: #1488c7;
    box-shadow: 0 1px 2px rgba(20, 161, 219, 0.25);
}
.tw-scope .perf-range-pill.is-active:hover {
    background: #0e7bb0;
}

.day-event-actions {
    margin-top: 0.35rem;
}

.day-event-actions button {
    width: auto;
    min-width: 72px;
    padding: 0.35rem 0.55rem;
}

.event-details-box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(920px, calc(100vw - 1.6rem));
    max-height: calc(100vh - 1.6rem);
    overflow-x: hidden;
    z-index: 1200;
    border: 1px solid #e8ecf4;
    border-radius: 18px;
    padding: 0;
    background: #f7f8fb;
    box-shadow: 0 32px 64px -12px rgba(38, 53, 93, 0.16), 0 0 0 1px rgba(20, 161, 219,0.04);
}

/* ── WS3: task detail is a premium right-side slide-in drawer ──
   All drawer geometry lives in this ID block so it can't bleed onto the
   shared .event-details-box base (which #reportPreviewModal etc. reuse).
   The box is a flex column: sticky .edv-header (top) + scrolling .edv-body
   + sticky .task-details-footer (bottom). It is moved to <body> at startup
   (liftModalToBody), so it sits above the dimmed app shell + parked collab
   list. Off-canvas by default (translateX(100%)); .is-open slides it in. */
#eventDetailsBox {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    transform: translateX(100%);           /* off-canvas */
    width: min(720px, 92vw);
    max-width: 92vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    box-shadow: -24px 0 60px -12px rgba(38, 53, 93, 0.20);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform var(--motion-base) var(--ease-emphasized);
    overscroll-behavior: contain;
    overflow-anchor: none;
}
#eventDetailsBox.is-open { transform: translateX(0); }
#eventDetailsBox .edv-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: 1fr;
}
/* Drawer has square corners — drop the footer's rounded bottom so its white
   bar meets the drawer edge flush (the base footer rounds for the old modal). */
#eventDetailsBox .task-details-footer {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ── Activity rail (wide viewports ≥1180px) ──
   The body becomes [main tabs column | persistent Activity rail]. JS toggles
   .has-rail on .edv-body and hides the Activity tab when the rail is shown.
   Wrapped in a media query so the grid can never apply on narrow screens even
   if the class lingers during a resize. Below 1180px Activity is a normal tab. */
@media (min-width: 1180px) {
    .edv-body.has-rail {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 268px;
        column-gap: 1rem;
        row-gap: 0.75rem;
        align-content: start;
    }
    .edv-body.has-rail > #taskActionBanner { grid-column: 1 / -1; }
    /* In the rail grid, .edv-tabs' overflow-x:auto collapses its min-content
       height to 0 — the bar becomes a 1px row and the tabs vanish behind the
       meta card. Tabs always fit at rail widths (≥1180px), so drop the scroll
       container here and pin the bar to the top of its track. */
    .edv-body.has-rail > .edv-tabs { grid-column: 1; overflow: visible; align-self: start; }
    .edv-body.has-rail > #tabPanelOverview,
    .edv-body.has-rail > #tabPanelReports,
    .edv-body.has-rail > #tabPanelSubtasks { grid-column: 1; }
    .edv-body.has-rail > #tabPanelActivity {
        grid-column: 2;
        grid-row: 2 / 100;
        border-left: 1px solid #e8ecf4;
        padding-left: 1rem;
        align-self: start;
    }
    .edv-body.has-rail > #tabPanelActivity .task-notes-panel {
        margin-top: 0;
        background: transparent;
        border: none;
        padding: 0;
    }
    .edv-body.has-rail > #tabPanelActivity .task-notes-header h5 { margin-top: 0; }
}

/* WS3: tablet / small viewports — the right drawer becomes a full-width
   bottom-sheet that slides up. Additive override above the existing 620px
   hard full-screen rule: between 621–768px this wins; at ≤620px the
   transform:none !important full-screen override (and mobile keyframes)
   takes over (instant full-screen, acceptable). */
@media (max-width: 768px) {
    #eventDetailsBox {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100vw;
        max-width: none;
        transform: translateY(100%);
        border-left: 0;
        box-shadow: 0 -24px 60px -12px rgba(38, 53, 93, 0.20);
    }
    #eventDetailsBox.is-open { transform: translateY(0); }
    #eventDetailsBox.anim-enter { animation: sheetInUp .24s var(--ease-emphasized) forwards; }
    #eventDetailsBox.anim-exit  { animation: sheetOutDown .2s ease-in forwards; pointer-events: none; }
    @keyframes sheetInUp   { from { transform: translateY(100%); } to { transform: translateY(0); } }
    @keyframes sheetOutDown { from { transform: translateY(0); } to { transform: translateY(100%); } }
}

/* Mobile + tablet (≤768px is touch): comfortable tap targets across the task
   drawer, and an equal-width tab strip instead of a tiny scroller. Heights only
   — every selector already escapes the global button{width:100%}; font stays at
   --control-font-mobile so the iOS focus-zoom guard isn't defeated. */
@media (max-width: 768px) {
    /* ID-scoped so these win over the base .edv-tabs/.edv-tab rules that appear
       later in the file (source-order cascade). */
    #taskDetailTabs { overflow-x: visible; }
    #taskDetailTabs .edv-tab {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        min-height: 44px;
        padding: 0.55rem 0.4rem;
        font-size: 0.82rem;
    }
    .task-details-footer .tdf-primary,
    .task-details-footer .tdf-reject-btn,
    .tdf-more-btn,
    .report-review-actions .tdf-primary,
    .report-review-actions .tdf-reject-btn,
    .subtask-report-submit,
    .task-notes-send-btn { min-height: 44px; }
    .edv-tag-add-btn,
    .pipeline-step-action { min-height: 40px; }
    .subtask-edit-btn,
    .subtask-delete-btn { min-height: 40px; display: inline-flex; align-items: center; }
}

#eventReportSummaryBlock {
    min-height: 0;
}

/* ── Redesigned Header ── */
.edv-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 1.1rem 1.25rem 0.7rem;
    background: #fff;
    border-bottom: 1px solid #e8ecf4;
    position: sticky;
    top: 0;
    z-index: 5;
}
.edv-header-left {
    flex: 1;
    min-width: 0;
}
.edv-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
}
.edv-crumb-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #14a1db;
}
.edv-header-left h4,
#eventDetailsTitle {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.25;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.edv-header-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}
.edv-status-pill {
    max-width: 220px;
    white-space: nowrap;
}
.edv-close-btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: #374151;
    background: #f3f4f6;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.edv-close-btn:hover {
    background: #e5e7eb;
    color: #111827;
    transform: none;
    filter: none;
}
.edv-close-btn svg {
    width: 18px;
    height: 18px;
}

/* ── Body — single scroll column, tabbed ── */
.edv-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
}
/* ── Task-detail tabs ── */
.edv-tabs {
    display: flex;
    gap: 0.15rem;
    border-bottom: 1px solid #e8ecf4;
    overflow-x: auto;
    scrollbar-width: none;
}
.edv-tabs::-webkit-scrollbar { display: none; }
.edv-tab {
    width: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.edv-tab:hover { color: #1e293b; }
.edv-tab.is-active {
    color: #4338ca;
    border-bottom-color: #14a1db;
}
.edv-tab-count {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    background: #eef2f7;
    border-radius: 9px;
    padding: 0.02rem 0.34rem;
    min-width: 1.1rem;
    text-align: center;
}
.edv-tab.is-active .edv-tab-count { color: #4338ca; background: #e0e7ff; }
.edv-tabpanel {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
}
.edv-col-left {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
}
.edv-col-right {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
}

/* ── Action Required banner — single "what's next" surface ──
   Spans both columns as the first child of .edv-body. Replaces the old
   triple-printed rejection (meta row + #reportReviewNotice + report card). */
.task-action-banner {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.7rem 0.85rem;
}
.task-action-banner.hidden { display: none; }
.task-action-banner-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.task-action-banner-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}
.task-action-banner-title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
}
.task-action-banner-detail {
    font-size: 0.8rem;
    line-height: 1.4;
    color: #475569;
    overflow-wrap: anywhere;
}
.task-action-banner-cta {
    width: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    background: #fff;
    transition: filter 0.15s, background 0.15s;
}
.task-action-banner-cta:hover { filter: brightness(0.97); }
.task-action-banner--danger  { background: #fef2f2; border-color: #fecaca; }
.task-action-banner--danger  .task-action-banner-icon,
.task-action-banner--danger  .task-action-banner-title { color: #991b1b; }
.task-action-banner--danger  .task-action-banner-cta { color: #fff; background: #dc2626; border-color: #dc2626; }
.task-action-banner--warning { background: #fffbeb; border-color: #fde68a; }
.task-action-banner--warning .task-action-banner-icon,
.task-action-banner--warning .task-action-banner-title { color: #92400e; }
.task-action-banner--warning .task-action-banner-cta { color: #fff; background: #d97706; border-color: #d97706; }
.task-action-banner--info    { background: #eff6ff; border-color: #bfdbfe; }
.task-action-banner--info    .task-action-banner-icon,
.task-action-banner--info    .task-action-banner-title { color: #1e40af; }
.task-action-banner--info    .task-action-banner-cta { color: #fff; background: #2563eb; border-color: #2563eb; }
.task-action-banner--success { background: #ecfdf5; border-color: #a7f3d0; }
.task-action-banner--success .task-action-banner-icon,
.task-action-banner--success .task-action-banner-title { color: #065f46; }
.task-action-banner--success .task-action-banner-cta { color: #fff; background: #059669; border-color: #059669; }
@media (max-width: 620px) {
    .task-action-banner { flex-wrap: wrap; }
    .task-action-banner-cta { width: 100%; justify-content: center; margin-top: 0.3rem; }
}

/* Mobile: collapse the task-detail body to a single column. The main
   max-width:620px mobile block lives earlier in this file than the base
   .edv-body rule above, so its single-column override loses the cascade
   tie-break. Re-declaring it here (after the base rule) makes it stick —
   without this, phones render the modal as two cramped side-by-side columns. */
@media (max-width: 620px) {
    .edv-body {
        grid-template-columns: 1fr;
        padding: 0.7rem 0.8rem;
    }
}

/* ── Meta Card ── */
.edv-meta-card {
    background: #fff;
    border: 1px solid #e8ecf4;
    border-radius: 14px;
    padding: 0.75rem 0.85rem;
}

/* ── Section Title ── */
.edv-section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.45rem;
}
.edv-section-title svg {
    color: #5cc3ea;
    flex-shrink: 0;
}

/* ── Report Card (right column) ── */
.edv-report-card {
    background: #eef0ff;
    border: 1px solid #dde3f8;
    border-radius: 18px;
    padding: 1rem 1.1rem;
    position: relative;
    overflow: hidden;
}
.edv-report-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: rgba(20, 161, 219,0.05);
    border-radius: 0 0 0 60px;
    pointer-events: none;
}

/* ── Actions Bar ── */
.edv-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    background: #fff;
    border-top: 1px solid #e8ecf4;
    flex-wrap: wrap;
    position: sticky;
    bottom: 0;
    z-index: 5;
}

/* Legacy selectors kept for compatibility */
.event-details-head {
    display: none;
}

.event-details-head-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
}

#eventStatusBadge {
    max-width: 100%;
    white-space: normal;
}

#closeEventDetailsBtn {
    /* Now styled via .edv-close-btn */
}

#closeEventDetailsBtn svg {
    width: 18px;
    height: 18px;
}

.event-details-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem 0.75rem;
    font-size: 0.8rem;
    color: #3e4867;
}

.event-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border: none;
    border-radius: 0;
    padding: 0.45rem 0;
    background: transparent;
    border-bottom: 1px solid #f0f2f8;
}

.event-meta-label {
    font-size: 0.62rem;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.event-meta-value {
    color: #1e293b;
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1.3;
}

.edv-priority-dot {
    font-size: 0.7rem;
    vertical-align: middle;
    margin-right: 0.1rem;
}

.event-meta-item--full {
    grid-column: 1 / -1;
    background: #fef2f2;
    border-color: #fecaca;
    border-radius: 8px;
    padding: 0.4rem 0.55rem;
    border-bottom: none;
}

.event-meta-item--full .event-meta-label {
    color: #991b1b;
}

.rejection-reason-text {
    color: #991b1b;
    font-size: 0.82rem;
    line-height: 1.4;
}

.report-rejection-reason {
    margin-top: 0.35rem;
    padding: 0.4rem 0.55rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 7px;
    color: #991b1b;
    font-size: 0.8rem;
    line-height: 1.4;
}
.report-review-comment {
    margin-top: 0.35rem;
    padding: 0.4rem 0.55rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 7px;
    color: #166534;
    font-size: 0.8rem;
    line-height: 1.4;
}
.label-optional {
    font-weight: 400;
    color: #94a3b8;
    font-size: 0.85em;
}

.event-details-description {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
    font-style: italic;
    border: 1px solid #e8ecf4;
    border-radius: 12px;
    background: #fff;
    padding: 0.65rem 0.75rem;
    line-height: 1.5;
    min-height: 60px;
}

.extension-notice,
.assignment-request-notice {
    margin: 0 0 0.6rem;
    border: 1px solid #e7dcff;
    border-radius: 10px;
    background: #f8f3ff;
    color: #4f3f7e;
    font-size: 0.82rem;
    padding: 0.48rem 0.58rem;
}
.assignment-request-reason {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px dashed #d6c6f5;
    color: #3d2f63;
    line-height: 1.4;
    word-break: break-word;
}
.assignment-request-reason strong {
    color: #2d2148;
    margin-right: 0.25rem;
}

/* ── Pending Extension Detail Card (inside extensionNotice) ── */
.ext-pending-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.82rem;
    color: #b45309;
    margin-bottom: 0.5rem;
}
.ext-pending-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #d97706;
}
.extension-notice:has(.ext-pending-header) {
    background: #fffbeb;
    border-color: #fde68a;
    color: #78350f;
    padding: 0.7rem 0.85rem;
}
.ext-pending-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.65rem;
    font-size: 0.78rem;
}
.ext-pending-label {
    font-weight: 600;
    color: #92400e;
    white-space: nowrap;
}
.ext-pending-value {
    color: #451a03;
    font-weight: 500;
    min-width: 0;
    overflow-wrap: anywhere;
}
.ext-pending-value--highlight {
    color: #14a1db;
    font-weight: 700;
}
.ext-pending-value--reason {
    font-style: italic;
    color: #78350f;
    line-height: 1.4;
}
.ext-pending-review {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-top: 0.7rem;
    padding-top: 0.55rem;
    border-top: 1px dashed #fcd34d;
}
.ext-pending-review-label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #92400e;
    flex: 1 1 160px;
    min-width: 0;
}
.ext-pending-review-label input[type="date"] {
    padding: 0.32rem 0.45rem;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    font-size: 0.78rem;
    background: #fffbeb;
    color: #451a03;
    width: 100%;
    box-sizing: border-box;
}
.ext-pending-review-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}
.ext-pending-btn {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.42rem 0.85rem;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.ext-pending-btn--approve {
    background: #16a34a;
    color: #ffffff;
    border-color: #16a34a;
}
.ext-pending-btn--approve:hover {
    background: #15803d;
    border-color: #15803d;
}
.ext-pending-btn--reject {
    background: #ffffff;
    color: #b91c1c;
    border-color: #fca5a5;
}
.ext-pending-btn--reject:hover {
    background: #fef2f2;
    border-color: #f87171;
}
.ext-pending-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Approved Extension History (inside extensionNotice) ── */
.ext-approved-summary {
    margin-bottom: 0.5rem;
}
.ext-approved-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.45rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #a9dcf1;
}
.ext-approved-card {
    background: #ffffff;
    border: 1px solid #c9e9f7;
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
}
.ext-approved-card-header {
    font-size: 0.74rem;
    font-weight: 700;
    color: #0a5e88;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.ext-approved-card .ext-pending-grid {
    font-size: 0.76rem;
}
.ext-approved-card .ext-pending-label {
    color: #0e7bb0;
}
.ext-approved-card .ext-pending-value {
    color: #3c2a6e;
}
.ext-approved-card .ext-pending-value--highlight {
    color: #16a34a;
}

.extension-request-panel,
.assignment-request-panel,
.assignment-manage-panel {
    margin-bottom: 0.65rem;
    border: 1px solid #e7ecf9;
    border-radius: 10px;
    background: #fcfdff;
    padding: 0.56rem;
}

/* Initial preferred-date proposal banner — shown in the task detail
   panel during the 48h post-assignment window. */
.initial-proposal-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.65rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid #cfe1ff;
    border-radius: 10px;
    background: #eef5ff;
}
.initial-proposal-banner-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #1d3a6b;
}
.initial-proposal-banner-text strong {
    font-size: 0.86rem;
    line-height: 1.25;
    color: #143372;
}
.initial-proposal-banner-btn {
    flex: 0 0 auto;
    width: auto;
    padding: 0.42rem 0.95rem;
    border: 0;
    border-radius: 8px;
    background: #2d5fb2;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.initial-proposal-banner-btn:hover { background: #234e96; }
@media (max-width: 480px) {
    .initial-proposal-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .initial-proposal-banner-btn {
        align-self: flex-end;
    }
}
.initial-proposal-used-note {
    margin: 0 0 0.5rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.78rem;
    color: #166534;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
}
.initial-proposal-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.42rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: #1e3a8a;
    background: #dbeafe;
    border-radius: 999px;
    vertical-align: middle;
}

.extension-request-panel h5,
.assignment-request-panel h5,
.assignment-manage-panel h5 {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
}

.extension-remaining-hint {
    margin: 0 0 0.4rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    color: #5a6282;
    background: #eef2ff;
    border-radius: 6px;
    border-left: 3px solid #6c7ae0;
}

.assignment-request-meta {
    margin: 0 0 0.35rem;
    color: #6e789a;
    font-size: 0.79rem;
}

.assignment-request-text {
    margin: 0 0 0.5rem;
    border: 1px solid #e8ebf7;
    border-radius: 8px;
    background: #ffffff;
    color: #313a5b;
    font-size: 0.82rem;
    line-height: 1.35;
    white-space: pre-wrap;
    padding: 0.45rem 0.52rem;
}

.subtask-section {
    margin-bottom: 0;
    border: 1px solid #e8ecf4;
    border-radius: 14px;
    background: #fff;
    padding: 0.65rem 0.75rem;
}
.edv-body > .subtask-section {
    grid-column: 1 / -1;
}

.subtask-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.subtask-head h5 {
    margin: 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.subtask-count-badge {
    font-size: 0.62rem;
    font-weight: 700;
    color: #14a1db;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 20px;
    padding: 0.12rem 0.55rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

#toggleAddSubtaskBtn {
    width: auto;
    min-width: 124px;
    padding: 0.42rem 0.62rem;
    border-color: transparent;
    background: #8f46ff;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(131, 56, 236, 0.22);
}

#toggleAddSubtaskBtn:hover,
#toggleAddSubtaskBtn:focus-visible {
    border-color: transparent;
    background: #9b59ff;
    color: #ffffff;
}

#toggleAddSubtaskBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Subtask form card ── */
.subtask-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0.6rem;
    padding: 0.75rem 0.85rem 0.7rem;
    background: #faf8ff;
    border: 1.5px solid #e6dcfb;
    border-radius: 14px;
    overflow: visible;
}

.subtask-form--no-assign #subtaskAssigneePicker { display: none; }

.subtask-form button {
    width: auto;
    min-width: 76px;
}

/* Row 1: title + due date */
.subtask-form-row {
    display: grid;
    grid-template-columns: 1fr 146px;
    gap: 0.5rem;
    align-items: center;
}

.subtask-form .date-display-field { min-width: 0; }

.date-display-field--compact .date-display-text {
    min-height: 40px;
    padding: 0.65rem 2rem 0.65rem 0.8rem;
}

/* Row 3: action buttons */
.subtask-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    padding-top: 0.55rem;
    border-top: 1px solid #ede8f7;
    margin-top: 0.55rem;
}

.subtask-form-actions button[type="submit"] {
    min-width: 88px;
}

.subtask-form-actions button[type="submit"]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Assignee picker row ── */
.subtask-assignee-picker {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    padding-top: 0.55rem;
    margin-top: 0.55rem;
    border-top: 1px solid #ede8f7;
    background: transparent;
    min-width: 0;
}

/* Selected staff chip (shown inline before the toolbar) */
.subtask-assign-selected {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.42rem 0.22rem 0.55rem;
    background: #ede8ff;
    border: 1px solid #d4c5f9;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0a5e88;
    max-width: 220px;
    cursor: default;
    flex-shrink: 0;
}

.subtask-assign-selected-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subtask-assign-clear {
    border: 0;
    background: transparent;
    color: #4fb8e6;
    width: 18px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    border-radius: 50%;
}

.subtask-assign-clear:hover {
    background: #ddd5f5;
}

.subtask-assignee-toolbar {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(120px, 0.75fr) minmax(0, 1.25fr);
    gap: 0.4rem;
    min-width: 0;
}

/* Hide toolbar row when a staff member is already selected (chip replaces it) */
.subtask-assignee-picker.has-selection .subtask-assignee-toolbar {
    display: none;
}

.subtask-assign-results {
    display: none;
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 25;
    grid-column: 1 / -1;
    max-height: 220px;
    overflow: auto;
    border: 1px solid #e0daf0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(49, 36, 87, 0.12);
}

.subtask-assignee-picker.is-open .subtask-assign-results {
    display: block;
}

.subtask-assign-option,
.subtask-assign-empty {
    width: 100%;
    padding: 0.58rem 0.72rem;
    text-align: left;
}

.subtask-assign-option {
    border: 0;
    border-bottom: 1px solid #f1eef8;
    background: transparent;
    color: #273055;
    display: grid;
    gap: 0.14rem;
    cursor: pointer;
}

.subtask-assign-option:last-child {
    border-bottom: 0;
}

.subtask-assign-option:hover,
.subtask-assign-option:focus-visible {
    background: #f6f1ff;
    color: #5f28cf;
}

.subtask-assign-option.active {
    background: #f2eaff;
}

.subtask-assign-option-name {
    font-size: 0.84rem;
    font-weight: 600;
}

.subtask-assign-option-meta {
    font-size: 0.74rem;
    color: #7d86a4;
}

.subtask-assign-empty {
    color: #7d86a4;
    font-size: 0.8rem;
}

.subtask-list {
    display: grid;
    gap: 0.4rem;
}

.subtask-item {
    border: 1px solid #e5ebf8;
    border-radius: 9px;
    background: #fff;
    padding: 0.4rem 0.5rem;
}

.subtask-main {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.12rem;
    cursor: pointer;
}

.subtask-check {
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #6b5cff;
}

.subtask-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    min-width: 20px;
    height: 20px;
}

.subtask-check-icon svg {
    display: block;
}

.subtask-title {
    color: #273055;
    font-weight: 600;
    margin-bottom: 0.12rem;
    font-size: 0.84rem;
}

.subtask-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    color: #697493;
    font-size: 0.74rem;
}

.subtask-item.is-done .subtask-title {
    text-decoration: none;
    color: #273055;
}

.subtask-item.is-done .subtask-meta {
    color: #96a0b8;
}

.subtask-status {
    font-weight: 600;
    font-size: 0.72rem;
    padding: 0.1rem 0.45rem;
    border-radius: 20px;
}

.subtask-status-pending,
.subtask-status-in-progress {
    color: #b45309;
    background: #fef3c7;
}

.subtask-status-completed {
    color: #047857;
    background: #d1fae5;
}

.subtask-status-submitted {
    color: #1e40af;
    background: #dbeafe;
}

.subtask-status-rejected {
    color: #b91c1c;
    background: #fee2e2;
}

.subtask-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.subtask-top-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.subtask-edit-btn {
    font-size: 0.74rem;
    padding: 0.15rem 0.5rem;
    color: #6b5cff;
    border: 1px solid #d6d0ff;
    border-radius: 5px;
}

.subtask-edit-btn:hover {
    background: #f0eeff;
}

.subtask-delete-btn {
    font-size: 0.74rem;
    padding: 0.15rem 0.5rem;
    color: #d13c2f;
    border: 1px solid #f5c6c2;
    border-radius: 5px;
}

.subtask-delete-btn:hover {
    background: #fff0ef;
}

.subtask-assignee {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #4a5568;
    font-weight: 500;
    white-space: nowrap;
}

.subtask-assignee-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subtask-report-form {
    margin-top: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.subtask-report-input {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid #d1d9ef;
    border-radius: 7px;
    font-size: 0.82rem;
    resize: vertical;
    color: #273055;
    font-family: inherit;
    box-sizing: border-box;
}

.subtask-report-input:focus {
    outline: none;
    border-color: #6b5cff;
    box-shadow: 0 0 0 2px rgba(107,92,255,0.12);
}

.subtask-report-submit {
    align-self: flex-start;
    background: #6b5cff;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 0.32rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    width: auto;
}

.subtask-report-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.subtask-report-submitted {
    margin-top: 0.5rem;
    padding: 0.4rem 0.55rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 7px;
}

.subtask-report-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #166534;
    background: #dcfce7;
    border-radius: 20px;
    padding: 0.1rem 0.55rem;
    margin-bottom: 0.3rem;
}

.subtask-report-text {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: #374151;
    white-space: pre-wrap;
}

/* Approval states */
.subtask-report-pending {
    background: #fffbeb;
    border-color: #fde68a;
}

.subtask-report-rejected {
    margin-top: 0.5rem;
    padding: 0.4rem 0.55rem;
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: 7px;
}

.subtask-report-approved {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.subtask-report-badge--pending {
    color: #92400e;
    background: #fef3c7;
}

.subtask-report-badge--rejected {
    color: #991b1b;
    background: #fee2e2;
}

.subtask-report-badge--approved {
    color: #166534;
    background: #dcfce7;
}

.subtask-rejection-reason {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: #991b1b;
}

/* Photo upload in report form */
.subtask-photo-label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
    color: #697493;
    cursor: pointer;
}

.subtask-photo-input {
    font-size: 0.78rem;
    color: #4a5568;
}

.subtask-report-photo-link {
    display: inline-block;
    margin-top: 0.4rem;
}

.subtask-report-file-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: #3b82f6;
    text-decoration: underline;
    word-break: break-all;
}

.subtask-photo-label .required-mark {
    color: #e53e3e;
    font-weight: 700;
}

.subtask-paste-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
    padding: 0.3rem 0.5rem;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #4338ca;
}

.subtask-paste-remove {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: #14a1db;
    padding: 0 0.2rem;
    line-height: 1;
}
.subtask-paste-remove:hover {
    color: #e53e3e;
}

.subtask-report-photo {
    max-width: 100%;
    max-height: 160px;
    border-radius: 6px;
    border: 1px solid #e5ebf8;
    object-fit: cover;
    display: block;
}

/* Manager approve / reject panel */
.subtask-review-panel {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.subtask-approve-btn {
    align-self: flex-start;
    background: #166534;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 0.3rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    width: auto;
}

.subtask-approve-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.subtask-reject-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}

.subtask-reject-reason {
    flex: 1;
    min-width: 0;
    padding: 0.28rem 0.5rem;
    border: 1px solid #d1d9ef;
    border-radius: 7px;
    font-size: 0.8rem;
    color: #273055;
    font-family: inherit;
}

.subtask-reject-btn {
    background: #991b1b;
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 0.3rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    width: auto;
    white-space: nowrap;
}

.subtask-reject-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Approved item highlight */
.subtask-item.subtask-approved {
    border-color: #bbf7d0;
    background: #f0fdf4;
    position: relative;
}
.subtask-item.subtask-approved::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: #22c55e;
}

/* ── Refined subtask report card (approved state) ─────────────── */
.subtask-report-card {
    margin-top: 0.55rem;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5ebf8;
}
.subtask-report-card--approved {
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 60%);
    border-color: #bbf7d0;
}
.subtask-report-card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid rgba(187, 247, 208, 0.6);
}
.subtask-report-card--approved .subtask-report-card-head {
    background: rgba(220, 252, 231, 0.55);
}
.subtask-report-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.22rem 0.55rem 0.22rem 0.45rem;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1;
}
.subtask-report-chip svg { flex-shrink: 0; }
.subtask-report-chip--approved {
    color: #15803d;
    background: #dcfce7;
    border-color: #86efac;
}
.subtask-report-reviewer {
    font-size: 0.76rem;
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.subtask-report-reviewer strong {
    color: #111827;
    font-weight: 600;
}
.subtask-report-sep {
    color: #9ca3af;
    font-weight: 700;
}
.subtask-report-card-body {
    padding: 0.55rem 0.8rem 0.65rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.85rem;
}
/* Approved report = compact media object: the proof photo sits on the LEFT with
   the note beside it. Removes the greedy notes column and the far-right image
   that left a large empty gap when the note was short. */
.subtask-report-card-body--split .subtask-report-field--attachment {
    flex: 0 0 auto;
    order: 0;
    margin-left: 0;
}
.subtask-report-card-body--split .subtask-report-field--notes {
    flex: 1 1 auto;
    min-width: 0;
    order: 1;
    align-self: center;
}
.subtask-report-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1 1 auto;
    min-width: 0;
}
@media (max-width: 600px) {
    .subtask-report-card-body { gap: 0.7rem; }
    .subtask-report-card-body--split .subtask-report-field--attachment { flex: 0 0 auto; }
    .subtask-report-card-body--split .subtask-report-field--notes { flex: 1 1 auto; align-self: center; }
}
/* The photo+note media object (120px photo + note) fits down to ~300px, so it
   stays a row on phones — no stacking that would re-enlarge the photo. Guard
   only against a long unbroken token overflowing the note column. */
.subtask-report-card .subtask-report-text { overflow-wrap: anywhere; }
.subtask-report-field-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
}
.subtask-report-card .subtask-report-text {
    margin: 0;
    font-size: 0.84rem;
    color: #1f2937;
    line-height: 1.45;
}
.subtask-report-attachment-wrap {
    display: inline-block;
}
.subtask-report-card .subtask-report-photo-link {
    position: relative;
    display: inline-block;
    margin-top: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.subtask-report-card .subtask-report-photo-link::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.72) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/><path d='M8 11h6M11 8v6'/></svg>") center / 14px 14px no-repeat;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}
.subtask-report-card .subtask-report-photo-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}
.subtask-report-card .subtask-report-photo-link:hover::after { opacity: 1; }
/* In the compact media-object layout the "NOTES"/"ATTACHMENT" labels are
   redundant — the photo and the note speak for themselves. */
.subtask-report-card .subtask-report-field-label { display: none; }
.subtask-report-card .subtask-report-photo {
    display: block;
    max-width: 120px;
    max-height: 90px;
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    object-fit: cover;
}
.subtask-report-card .subtask-report-file-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #1f2937;
    text-decoration: none;
    margin-top: 0;
}
.subtask-report-card .subtask-report-file-link:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
    text-decoration: none;
}

/* Stronger status pill */
.subtask-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.64rem;
    padding: 0.2rem 0.5rem;
}
.subtask-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.85;
}

/* Completed subtasks section in task list */
.subtask-completed-sep {
    grid-column: 1 / -1;
    margin: 1rem 0 0.4rem;
    padding-top: 0.25rem;
    border-top: 1px solid #e6ebf8;
    font-size: 0.78rem;
    font-weight: 700;
    color: #697493;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.subtask-completed-card {
    border-left: 3px solid #6b5cff;
}

.subtask-type-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #6b5cff;
    background: #dcf1fb;
    border-radius: 20px;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
    align-self: flex-start;
}

.subtask-parent-label {
    font-size: 0.75rem;
    color: #697493;
    margin-bottom: 0.1rem;
}

/* --- Task Report Section --- */

.event-report-section {
    margin-top: 0;
}

.event-report-label {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.55rem;
    letter-spacing: -0.01em;
}

/* Empty state: compact single-line hint, no big box */
.report-section--empty .event-report-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    color: #697493;
    font-weight: 500;
    font-size: 0.82rem;
}

.report-section--empty .event-report-label::after {
    content: '— No report submitted';
    font-weight: 400;
    font-size: 0.78rem;
    color: #9ca3be;
}

.report-section--empty .event-report-summary,
.report-section--empty .event-report-photos {
    display: none;
}

/* Has report state */
.report-section--has-report .event-report-summary {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.event-report-summary {
    font-size: 0.82rem;
    color: #3a4464;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.report-loading {
    color: #9ca3be;
    font-size: 0.8rem;
    padding: 0.4rem 0;
    margin: 0;
}

.report-detail-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(20, 161, 219,0.1);
    margin-bottom: 0.15rem;
}

.report-status-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.report-status-badge--approved {
    background: #dcfce7;
    color: #166534;
}

.report-status-badge--pending {
    background: #fef3c7;
    color: #92400e;
}

.report-status-badge--rejected {
    background: #fee2e2;
    color: #991b1b;
}

.report-status-badge--reverted {
    background: #e0e7ff;
    color: #3730a3;
}

/* ── Report history (previous submissions) ── */
.report-history {
    margin-top: 0.55rem;
    border-top: 1px dashed #e2e8f0;
    padding-top: 0.5rem;
}

.report-history-summary {
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    color: #14a1db;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    list-style: none;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.report-history-summary::-webkit-details-marker { display: none; }

.report-history-summary::before {
    content: '\25B6';
    font-size: 0.6rem;
    transition: transform 0.15s ease;
    color: #94a3b8;
}

.report-history[open] > .report-history-summary::before {
    transform: rotate(90deg);
}

.report-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.report-history-item {
    background: rgba(148, 163, 184, 0.08);
    border-left: 3px solid #cbd5e1;
    border-radius: 0 10px 10px 0;
    padding: 0.5rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.report-history-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.report-history-date {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 500;
}

.report-history-reviewer {
    font-size: 0.7rem;
    color: #64748b;
}

.report-history-reason {
    font-size: 0.78rem;
    line-height: 1.45;
    color: #991b1b;
    background: rgba(239, 68, 68, 0.07);
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
}

.report-history-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.78rem;
    line-height: 1.45;
}

.report-history-field span:last-child {
    color: #1e293b;
}

.report-history-files {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.15rem;
}

.report-history-audio {
    width: 100%;
    max-width: 260px;
    height: 34px;
}

.rpv-history:empty {
    display: none;
}

.report-submitted-info {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 500;
}

.report-detail-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    line-height: 1.5;
}

.report-detail-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    min-width: 0;
    flex-shrink: 0;
}

.report-detail-row span:last-child {
    color: #1e293b;
    font-size: 0.82rem;
    background: rgba(255,255,255,0.5);
    padding: 0.4rem 0.55rem;
    border-radius: 10px;
    line-height: 1.5;
}

.report-detail-row--outcome span:last-child {
    background: rgba(22, 163, 74, 0.08);
    border-left: 3px solid #16a34a;
    border-radius: 0 10px 10px 0;
    color: #15803d;
    font-weight: 600;
    font-style: italic;
}

/* ── Reviewer Block ── */
.report-reviewer-block {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.report-reviewer-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.report-reviewer-avatar {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #5cc3ea;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.03em;
}

.auto-link {
    color: #1276c2;
    text-decoration: underline;
    word-break: break-all;
}
.auto-link:hover {
    color: #3730a3;
}
.chat-msg-text .auto-link {
    color: inherit;
    text-decoration: underline;
}

.report-reviewer-info {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.report-reviewer-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
}

.report-reviewer-date {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 500;
}

.event-report-head {
    font-weight: 600;
    color: #273155;
}

/* Hide photos block when empty (no inner content) */
.event-report-photos:empty {
    display: none;
}

.event-task-photo-wrap {
    margin-top: 0.65rem;
}

.event-report-photos {
    margin-top: 0.6rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(90px, 1fr));
    gap: 0.45rem;
}

.photo-link {
    display: block;
    border: 1px solid #dde3f4;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.photo-link img {
    width: 100%;
    height: 92px;
    object-fit: cover;
    display: block;
}

/* --- Image Lightbox --- */
.img-lightbox { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; }
.img-lightbox.hidden { display: none; }
.img-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); }
.img-lightbox-body { position: relative; max-width: 92vw; max-height: 88vh; display: flex; align-items: center; justify-content: center; }
.img-lightbox-img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); user-select: none; -webkit-user-drag: none; }
.img-lightbox-close { position: fixed; top: 16px; right: 16px; z-index: 100002; background: rgba(0,0,0,0.55); border: 2px solid rgba(255,255,255,0.5); color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; overflow: visible; transition: background 0.2s, border-color 0.2s; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); -webkit-tap-highlight-color: transparent; touch-action: manipulation; transform: none !important; filter: none !important; }
.img-lightbox-close:hover:not(:disabled) { background: rgba(0,0,0,0.75); border-color: #fff; transform: none !important; filter: none !important; }
.img-lightbox-close:active:not(:disabled) { background: rgba(0,0,0,0.85); transform: none !important; }
.img-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.img-lightbox-close svg { display: block; }
.img-lightbox-prev, .img-lightbox-next { position: fixed; top: 50%; transform: translateY(-50%) !important; z-index: 100002; background: rgba(0,0,0,0.55); border: 2px solid rgba(255,255,255,0.5); color: #fff; font-size: 1.6rem; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; overflow: visible; transition: background 0.2s, border-color 0.2s; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); -webkit-tap-highlight-color: transparent; touch-action: manipulation; filter: none !important; }
.img-lightbox-prev { left: 10px; }
.img-lightbox-next { right: 10px; }
.img-lightbox-prev:hover:not(:disabled), .img-lightbox-next:hover:not(:disabled) { background: rgba(0,0,0,0.75); border-color: #fff; transform: translateY(-50%) !important; filter: none !important; }
.img-lightbox-prev:active:not(:disabled), .img-lightbox-next:active:not(:disabled) { background: rgba(0,0,0,0.85); transform: translateY(-50%) !important; }
.img-lightbox-prev:focus-visible, .img-lightbox-next:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.img-lightbox-prev:disabled, .img-lightbox-next:disabled { opacity: 0.25; cursor: default; border-color: rgba(255,255,255,0.2); pointer-events: none; }
.img-lightbox-counter { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.95rem; font-weight: 600; z-index: 100002; background: rgba(0,0,0,0.55); padding: 6px 18px; border-radius: 20px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); letter-spacing: 0.5px; }
.img-lightbox-frame { display: block; width: min(900px, 92vw); height: 86vh; background: #fff; border: 0; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
.img-lightbox-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; width: min(420px, 88vw); padding: 36px 28px; background: #fff; color: #374151; border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); font-weight: 500; }
.img-lightbox-fallback svg { color: #0e7bb0; }
.img-lightbox-fallback-sub { font-size: 0.85rem; opacity: 0.7; }
.img-lightbox-open { position: fixed; top: 16px; left: 16px; z-index: 100002; display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.55); border: 2px solid rgba(255,255,255,0.5); color: #fff; font-size: 0.85rem; font-weight: 600; padding: 8px 14px; border-radius: 22px; text-decoration: none; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background 0.2s, border-color 0.2s; }
.img-lightbox-open:hover { background: rgba(0,0,0,0.75); border-color: #fff; }
.img-lightbox-open:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.img-lightbox-open svg { display: block; }
.img-lightbox-caption { position: fixed; bottom: 52px; left: 50%; transform: translateX(-50%); max-width: 80vw; color: #fff; font-size: 0.9rem; font-weight: 600; z-index: 100002; background: rgba(0,0,0,0.55); padding: 6px 16px; border-radius: 18px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.img-lightbox-caption:empty { display: none; }
@media (max-width: 768px) {
    .img-lightbox-open { top: 12px; left: 12px; font-size: 0.78rem; padding: 6px 10px; }
    .img-lightbox-frame { width: 96vw; height: 82vh; }
    .img-lightbox-caption { bottom: 50px; font-size: 0.82rem; max-width: 88vw; }
    .img-lightbox-prev, .img-lightbox-next { width: 42px; height: 42px; font-size: 1.5rem; }
    .img-lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }
    .img-lightbox-close svg { width: 18px; height: 18px; }
    .img-lightbox-swipe-hint { position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 0.8rem; z-index: 2; display: flex; align-items: center; gap: 6px; animation: lightbox-hint-fade 3s ease-out forwards; pointer-events: none; }
    @keyframes lightbox-hint-fade { 0%,60% { opacity: 1; } 100% { opacity: 0; } }
}
.photo-link, .subtask-report-photo-link { cursor: zoom-in; }

/* --- Voice Note Recorder --- */
.voice-note-recorder {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.voice-note-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid #d1d9f0;
    border-radius: 8px;
    background: #f8faff;
    color: #3a4a70;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.voice-note-btn:hover {
    background: #eef2ff;
    border-color: #b0bce0;
}
.voice-note-btn.voice-note-recording {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
    animation: voice-pulse 1.2s ease-in-out infinite;
}
@keyframes voice-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.voice-note-timer {
    font-size: 0.82rem;
    font-weight: 600;
    color: #dc2626;
    font-variant-numeric: tabular-nums;
    min-width: 2.5rem;
}
.voice-note-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}
.voice-note-preview audio {
    display: none;
}
.vn-player {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    background: #f0f4ff;
    border: 1px solid #d1d9f0;
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    overflow: hidden;
}
.vn-play-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #6b5cff;
    color: #fff;
    font-size: 0.82rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
    line-height: 1;
    padding: 0;
}
.vn-play-btn:hover {
    background: #5a4de6;
}
.vn-progress-wrap {
    flex: 1;
    height: 6px;
    background: #d1d9f0;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    min-width: 60px;
}
.vn-progress-bar {
    height: 100%;
    background: #6b5cff;
    border-radius: 3px;
    width: 0%;
    transition: width 0.15s linear;
}
.vn-time {
    font-size: 0.76rem;
    font-weight: 600;
    color: #3a4a70;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    text-align: right;
}
.voice-note-delete {
    font-size: 0.78rem;
    color: #dc2626;
    padding: 0.3rem 0.5rem;
    flex-shrink: 0;
}
.voice-note-delete:hover {
    background: #fef2f2;
}
#voiceNoteError {
    width: 100%;
}
.report-voice-section {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.2rem;
    grid-column: 1 / -1;
}

/* Attached report documents (PDF/DOCX/etc.) — full-width, high-visibility rows.
   Span the whole image grid so the filename is never clipped. */
.report-doc-section {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.2rem;
    grid-column: 1 / -1;
}
.report-doc-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.report-doc-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border-radius: 9px;
    border: 1px solid var(--accent-soft, #c9e9f7);
    background: linear-gradient(0deg, rgba(20, 161, 219, 0.06), rgba(20, 161, 219, 0.06)), #fff;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.report-doc-link:hover {
    border-color: var(--accent, #14a1db);
    box-shadow: 0 2px 10px rgba(20, 161, 219, 0.18);
    background: #fff;
}
.report-doc-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--accent, #14a1db);
    color: #fff;
}
.report-doc-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 0.12rem;
}
.report-doc-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
    word-break: break-word;
}
.report-doc-type {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--accent, #14a1db);
    text-transform: uppercase;
}
.report-doc-open {
    flex-shrink: 0;
    color: var(--accent, #14a1db);
    display: flex;
    align-items: center;
}

.vn-inline-player {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #1276c2;
    border: none;
    border-radius: 16px;
    padding: 0.55rem 0.85rem;
    margin-top: 0.3rem;
    box-shadow: 0 4px 14px rgba(20, 161, 219,0.18);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.vn-inline-player audio {
    display: none;
}
.vn-inline-player .vn-play-btn {
    background: #fff;
    color: #4338ca;
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.vn-inline-player .vn-play-btn svg {
    width: 16px;
    height: 16px;
}
.vn-inline-player .vn-play-btn:hover {
    background: #eef2ff;
}
.vn-inline-player .vn-progress-wrap {
    background: rgba(255,255,255,0.25);
    flex: 1 1 0%;
    min-width: 30px;
    border-radius: 4px;
    height: 5px;
    cursor: pointer;
}
.vn-inline-player .vn-progress-bar {
    background: #fff;
    border-radius: 4px;
}
.vn-inline-player .vn-time {
    display: none;
}
.vn-inline-player .vn-time-current,
.vn-inline-player .vn-time-duration {
    color: rgba(255,255,255,0.9);
    font-size: 0.74rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}
.vn-inline-player .vn-time-sep {
    display: none;
}
.vn-inline-player .vn-speaker-icon {
    width: 18px;
    height: 18px;
    color: rgba(255,255,255,0.75);
    flex-shrink: 0;
}
.report-preview-voice-note {
    margin-bottom: 0.5rem;
}
.report-preview-voice-note .empty {
    font-size: 0.82rem;
    color: #9ca3be;
    margin: 0;
}

#useForReportBtn {
    width: auto;
    min-width: 210px;
}

.report-submit-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(640px, calc(100vw - 1.6rem));
    max-height: calc(100vh - 1.6rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1200;
    border: 1px solid #e8ecf4;
    border-radius: 18px;
    padding: 0;
    background: #f7f8fb;
    box-shadow: 0 32px 64px -12px rgba(38, 53, 93, 0.14), 0 0 0 1px rgba(20, 161, 219,0.04);
}

.report-submit-modal .rsm-header {
    flex-shrink: 0;
}

#reportSubmitModal {
    top: clamp(1rem, 6vh, 3.5rem);
    transform: translateX(-50%);
}

#reportSubmitModal form {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0 1.25rem 1.25rem;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* ── Report Submit Header ── */
.rsm-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 1.25rem 1.25rem 0.75rem;
    position: relative;
}
.rsm-header-left {
    flex: 1;
    min-width: 0;
}
.rsm-accent-bar {
    width: 36px;
    height: 4px;
    background: #14a1db;
    border-radius: 2px;
    margin-bottom: 0.65rem;
}
.rsm-header h4 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.02em;
    line-height: 1.3;
}
.rsm-meta {
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
}
.rsm-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.rsm-close-btn:hover {
    background: #e5e7eb;
    color: #111827;
    transform: none;
    filter: none;
}

/* ── Bento Cards ── */
.rsm-bento-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}
.rsm-card {
    background: #fff;
    border: 1px solid #e8ecf4;
    border-radius: 14px;
    padding: 1rem 1.1rem;
}
.rsm-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 0.7rem;
}
.rsm-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.7rem;
}
.rsm-label-row .rsm-label {
    margin-bottom: 0;
}
.rsm-optional-badge {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}
.rsm-muted-note {
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── Upload Dropzone ── */
.rsm-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.5rem 1rem;
    border: 2px dashed #dfe4ee;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
    position: relative;
    background: #fafafd;
}
.rsm-dropzone:hover {
    border-color: #a5b4fc;
    background: #eef8fd;
}
.rsm-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.rsm-upload-icon {
    flex-shrink: 0;
}
.rsm-dropzone-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
}
.rsm-dropzone-hint {
    font-size: 0.72rem;
    color: #94a3b8;
}

/* ── Voice Note Area ── */
.rsm-voice-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0;
}
.rsm-waveform {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 28px;
}
.rsm-waveform span {
    width: 3px;
    border-radius: 2px;
    background: #dfe4ee;
}
.rsm-waveform span:nth-child(1) { height: 10px; }
.rsm-waveform span:nth-child(2) { height: 16px; }
.rsm-waveform span:nth-child(3) { height: 24px; }
.rsm-waveform span:nth-child(4) { height: 12px; }
.rsm-waveform span:nth-child(5) { height: 20px; }
.rsm-waveform span:nth-child(6) { height: 10px; }
.rsm-voice-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.45rem;
}
.rsm-voice-limit {
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

/* ── Textareas ── */
.rsm-textarea {
    width: 100%;
    border: 1px solid #e8ecf4;
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    font-size: 0.85rem;
    color: #1e293b;
    background: #fafafd;
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
    line-height: 1.55;
}
.rsm-textarea::placeholder {
    color: #94a3b8;
}
.rsm-textarea:focus {
    outline: none;
    border-color: #a5b4fc;
    box-shadow: 0 0 0 3px rgba(20, 161, 219,0.08);
    background: #fff;
}

/* ── Actions ── */
.rsm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    position: sticky;
    bottom: 0;
    background: #f7f8fb;
    padding: 0.75rem 0;
    margin: 0 -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    border-top: 1px solid #e8ecf4;
    z-index: 2;
}
.rsm-cancel-btn {
    padding: 0.6rem 1.4rem;
    border-radius: 10px;
    border: 1px solid #e8ecf4;
    background: #fff;
    color: #475569;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.rsm-cancel-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.rsm-submit-btn {
    padding: 0.6rem 1.8rem;
    border-radius: 10px;
    border: none;
    background: #1276c2;
    color: #fff;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(20, 161, 219,0.25);
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.rsm-submit-btn:hover {
    opacity: 0.92;
    box-shadow: 0 6px 20px rgba(20, 161, 219,0.3);
}
.rsm-submit-btn:active {
    transform: scale(0.97);
}
.rsm-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#reportSubmitError {
    display: block !important;
    min-height: 1.2rem;
    margin: 0.2rem 0 0;
    visibility: hidden;
}

#reportSubmitError:not(.hidden) {
    visibility: visible;
}

.report-submit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

/* ── Report Preview Modal (edv-style) ── */
#reportPreviewModal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#reportPreviewModal .rpv-header {
    border-radius: 18px 18px 0 0;
    flex-shrink: 0;
}

.rpv-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.85rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.rpv-section {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rpv-section .event-details-description {
    background: #fff;
    border: 1px solid #e8ecf4;
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    font-size: 0.92rem;
    color: #334155;
    min-height: 2rem;
}

.rpv-section .report-preview-voice-note {
    background: #fff;
    border: 1px solid #e8ecf4;
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    min-height: 2rem;
}

.rpv-section .event-report-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
}

.rpv-actions {
    margin-top: 0.5rem;
}

.rpv-download-btn {
    width: 100%;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 12px;
    background: #14a1db;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.rpv-download-btn:hover {
    opacity: 0.9;
}

/* Edit Staff Modal */
/* ── Edit User Modal ─────────────────────── */
.edit-user-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(960px, calc(100vw - 2rem));
    max-height: calc(100vh - 2.5rem);
    overflow: hidden;
    z-index: 1200;
    border: 1px solid rgba(20, 161, 219, 0.12);
    border-radius: 20px;
    background: var(--hr-bg, #eef8fd);
    box-shadow: 0 25px 60px rgba(20, 161, 219, 0.15), 0 8px 20px rgba(0,0,0,0.08);
    padding: 0;
    display: flex;
    flex-direction: column;
}

.edit-user-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 20px 20px 0 0;
    flex-shrink: 0;
}

.edit-user-modal-head-left {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 auto;
    min-width: 0;
}

.edit-user-modal-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hr-blue, #14a1db);
}

.edit-user-modal-head h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--hr-text, #1e1b4b);
    line-height: 1.25;
}

.edit-user-modal-head-sub {
    margin: 0;
    font-size: 0.76rem;
    color: var(--hr-muted, #8b80b0);
}

.edit-user-modal-body {
    padding: 1.25rem 1.5rem 1.5rem;
    overflow-y: auto;
}

#editUserModalBody {
    padding: 1.25rem 1.5rem 1.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
}

#editUserModalBody .staff-profile-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Sticky save bar — pins the Save/Clear actions to the bottom of the modal
   so users don't have to scroll to the end after editing a long profile.
   Scoped to the modal context only; the inline Staff Directory form keeps
   its natural at-end layout. */
#editUserModalBody .staff-form-actions {
    position: sticky;
    bottom: -1.5rem;
    background: #ffffff;
    margin: 0.25rem -1.5rem -1.5rem;
    padding: 0.85rem 1.5rem;
    z-index: 10;
    border-top: 1px solid var(--hr-border, #dcf1fb);
    box-shadow: 0 -6px 14px rgba(15, 23, 42, 0.05);
}

.modal-close-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    background: var(--hr-bg, #eef8fd) !important;
    border: 1px solid var(--hr-border, #dcf1fb) !important;
    color: #4b5563 !important;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--hr-muted, #8b80b0) !important;
    cursor: pointer;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    flex-shrink: 0;
    transform: none !important;
    box-shadow: none !important;
}

.modal-close-btn:hover {
    background: #dcf1fb !important;
    color: var(--hr-text, #1e1b4b) !important;
    border-color: rgba(20, 161, 219, 0.3) !important;
    filter: none !important;
    transform: none !important;
}

#closeReportSubmitBtn {
    width: auto;
    min-width: 86px;
}

.report-submit-event {
    margin: 0.25rem 0 0.7rem;
    font-size: 0.84rem;
    color: #596585;
}

@media (max-width: 920px) {
    .event-details-meta {
        grid-template-columns: repeat(2, 1fr);
    }

    .subtask-form-row {
        grid-template-columns: 1fr 136px;
    }

    .subtask-assignee-toolbar {
        min-width: 0;
        width: 100%;
        grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
    }

    .subtask-assign-results {
        max-height: 184px;
    }

    .event-report-photos {
        grid-template-columns: repeat(2, minmax(90px, 1fr));
    }
}

.muted-note {
    color: #7a87a8;
    font-size: 0.85rem;
    font-weight: 600;
}

.messages-studio {
    padding: 0;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    border-radius: 18px;
    overflow: hidden;
    gap: 0;
    background: var(--hr-bg, #eef8fd);
}

/* ── Chat list header ──────────────────────────────────────────────── */
.chat-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem 0.25rem;
    flex-shrink: 0;
}
.chat-list-header h3 {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 750;
    color: #1e1b2e;
    letter-spacing: -0.01em;
}
.chat-list-header .chat-new-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 0;
    background: rgba(131, 56, 236, 0.08);
    color: #1488c7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.chat-list-header .chat-new-btn:hover { background: rgba(131, 56, 236, 0.15); }
.chat-list-header .chat-new-btn:active { transform: scale(0.92); }
.chat-list-header .chat-new-btn svg { width: 16px; height: 16px; }

/* ── Chat search highlight pulse (New Chat button) ───────────────── */
.chat-users-search-wrap.chat-search-highlight .chat-search-inner {
    animation: chatSearchPulse 1.2s ease-out;
}
@keyframes chatSearchPulse {
    0%   { box-shadow: 0 0 0 0 rgba(20, 161, 219, 0.5); }
    40%  { box-shadow: 0 0 0 6px rgba(20, 161, 219, 0.25); }
    100% { box-shadow: 0 0 0 0 rgba(20, 161, 219, 0); }
}

/* ── Chat search (redesigned) ─────────────────────────────────────── */
.chat-users-search-wrap .chat-search-inner {
    position: relative;
    display: flex;
    align-items: center;
}
.chat-users-search-wrap .chat-search-icon {
    position: absolute;
    left: 0.7rem;
    width: 15px;
    height: 15px;
    color: #a0a4b8;
    pointer-events: none;
}
.chat-users-search-wrap #chatUserSearch {
    width: 100%;
    color: #1e1b2e;
    font-size: 0.82rem;
    height: auto;
    box-sizing: border-box;
    padding: 0.55rem 2.2rem 0.55rem 2.1rem;
    border: 1px solid #dcf1fb;
    border-radius: 12px;
    background: #f8f6fc;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.chat-users-search-wrap #chatUserSearch:focus {
    border-color: #1488c7;
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(20, 161, 219, 0.08);
}
.chat-users-search-wrap #chatUserSearch::placeholder { color: #b0a8c0; }
.chat-search-clear {
    position: absolute;
    right: 0.4rem;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 0;
    background: #e0dae8;
    color: #6b5e80;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-size: 0;
    transition: background 0.12s;
}
.chat-search-clear svg { width: 12px; height: 12px; }
.chat-search-clear:hover { background: #d0c8dc; }
.chat-users-search-wrap.has-value .chat-search-clear { display: inline-flex; }

.chat-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: 1fr;
    gap: 0;
    min-height: 0;
    flex: 1 1 0;
    width: 100%;
    align-items: stretch;
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}

.chat-layout.chat-shared-open {
    grid-template-columns: 300px 1fr;
}

.chat-users-panel,
.chat-thread-panel,
.chat-shared-panel {
    border: none;
    border-radius: 0;
    background: #fff;
    min-height: 0;
}

.chat-users-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--hr-border, #dcf1fb);
    background: var(--hr-card-bg, #faf9ff);
}

/* Remove old title row & search head */
.chat-users-title-row { display: none; }
.chat-users-head { display: none; }

.chat-users-search-wrap {
    padding: 0.5rem 0.75rem 0.35rem;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 2;
    background: inherit;
}

.chat-users-list {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.25rem 0;
    display: flex;
    flex-direction: column;
}

/* ── Chat section label (Pinned / Recent) ─────────────────────────── */
.chat-section-label {
    padding: 0.55rem 0.55rem 0.25rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9b8fb8;
}

/* ── Chat user item (redesigned) ──────────────────────────────────── */
.chat-user-item {
    width: 100%;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    text-align: left;
    border-radius: 0;
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    color: #2e3759;
    margin: 0;
    flex-shrink: 0;
    transition: background 0.15s;
    position: relative;
}

.chat-user-item:hover {
    background: rgba(131, 56, 236, 0.05);
}

.chat-user-item.active {
    background: rgba(131, 56, 236, 0.08);
    box-shadow: inset 3px 0 0 #1488c7;
}

/* ── Avatar ───────────────────────────────────────────────────────── */
.chat-avatar {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: var(--accent, #14a1db);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    position: relative;
}

.chat-avatar-lg {
    width: 44px;
    height: 44px;
}

.chat-avatar-xl {
    width: 76px;
    height: 76px;
}

/* Online indicator dot on avatar */
.chat-avatar .chat-online-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: #22c55e;
    border: 2px solid #faf9ff;
}

/* ── Chat user main content area ──────────────────────────────────── */
.chat-user-main {
    min-width: 0;
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 0.5rem;
    row-gap: 0.12rem;
    align-items: center;
}

.chat-user-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-column: 1;
    grid-row: 1;
    line-height: 1.25;
}

.chat-user-time {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.68rem;
    color: #a0a4b8;
    white-space: nowrap;
    text-align: right;
    align-self: center;
}

.chat-user-sub {
    display: block;
    font-size: 0.78rem;
    color: #8b8fa8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    line-height: 1.3;
}

.chat-user-meta {
    text-align: right;
    font-size: 0.7rem;
    color: #a0a4b8;
    grid-column: 2;
    grid-row: 2;
    align-self: center;
}

.chat-user-main .chat-unread {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
}

/* ── Unread badge ─────────────────────────────────────────────────── */
.chat-unread {
    display: inline-flex;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;
    background: #1488c7;
    color: #fff;
    font-weight: 700;
    font-size: 0.68rem;
    line-height: 1;
}

/* ── Unread state — bold name, message & accent time ──────────────── */
.chat-user-item.has-unread .chat-user-name {
    font-weight: 750;
    color: #111827;
}
.chat-user-item.has-unread .chat-user-sub {
    color: #374151;
    font-weight: 600;
}
.chat-user-item.has-unread .chat-user-time {
    color: #1488c7;
    font-weight: 600;
}

/* ── Full-width divider between items ─────────────────────────────── */
.chat-user-item {
    border-bottom: 1px solid #e5e2ec;
}
.chat-user-item:last-child {
    border-bottom: none;
}

/* ── Swipe action hints ───────────────────────────────────────────── */
.chat-user-item .chat-swipe-hint {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 72px;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    border-radius: 12px;
    pointer-events: none;
}
.chat-swipe-hint.pin { left: -72px; background: #3b82f6; }
.chat-swipe-hint.delete { right: -72px; background: #ef4444; }

.chat-thread-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: #f5f5f0;
    position: relative;
}

.chat-thread-head {
    padding: 0.72rem 1rem;
    border-bottom: 1px solid #ece5f8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.7rem;
    background: #fff;
    flex-shrink: 0;
}

.chat-thread-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.chat-head-icon-btn {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-head-icon-btn svg {
    width: 17px;
    height: 17px;
}

.chat-back-btn {
    display: none;
    min-width: 34px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.chat-back-btn svg {
    width: 18px;
    height: 18px;
}

.chat-thread-profile {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    flex: 1 1 0;
}

.chat-thread-text {
    min-width: 0;
}

#chatThreadName {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#chatThreadMeta {
    margin: 0;
    font-size: 0.78rem;
    color: #8b8fa8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#chatMessageSearch {
    width: min(320px, 52%);
    height: 38px;
    border-radius: 10px;
    background: #f0ebf8;
    border-color: transparent;
}

#chatMessageSearch:focus {
    background: #fff;
    border-color: #8338ec;
    box-shadow: 0 0 0 3px rgba(131, 56, 236, 0.1);
}

.chat-messages-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 1rem 1.1rem;
    padding-right: 1.55rem;
    display: block;
    background: #ede8d8;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5c1.5 0 2.7 1.2 2.7 2.7S31.5 10.3 30 10.3 27.3 9.1 27.3 7.6 28.5 5 30 5zm-20 20c1.5 0 2.7 1.2 2.7 2.7S11.5 30.3 10 30.3 7.3 29.1 7.3 27.6 8.5 25 10 25zm40 0c1.5 0 2.7 1.2 2.7 2.7S51.5 30.3 50 30.3 47.3 29.1 47.3 27.6 48.5 25 50 25zm-20 20c1.5 0 2.7 1.2 2.7 2.7S31.5 50.3 30 50.3 27.3 49.1 27.3 47.6 28.5 45 30 45z' fill='%23d8d3c4' fill-opacity='0.35'/%3E%3C/svg%3E");
}

.chat-empty-state {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(circle at top, rgba(131, 56, 236, 0.08), transparent 42%),
        #f9f7ff;
}

.chat-empty-state-card {
    width: min(100%, 420px);
    padding: 2rem 1.6rem;
    border-radius: 24px;
    border: 1px solid rgba(131, 56, 236, 0.14);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 18px 38px rgba(103, 80, 164, 0.12);
    text-align: center;
    display: grid;
    gap: 0.7rem;
    justify-items: center;
}

.chat-empty-state-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #8338ec;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 10px 22px rgba(131, 56, 236, 0.22);
}

.chat-empty-state-card strong {
    font-size: 1.08rem;
    color: #241b3a;
}

.chat-empty-state-card p {
    margin: 0;
    max-width: 28ch;
    color: #786f93;
    line-height: 1.5;
}

.chat-messages-list::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.chat-messages-list::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages-list::-webkit-scrollbar-thumb {
    background: transparent;
    border: 0;
}

.chat-messages-list::-webkit-scrollbar-thumb:hover {
    background: transparent;
}

.chat-messages-list::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

.chat-scroll-rail {
    position: absolute;
    right: 5px;
    z-index: 8;
    width: 10px;
    border-radius: 999px;
    background: #efefef;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    user-select: none;
}

.chat-scroll-thumb {
    position: absolute;
    left: 0;
    width: 100%;
    min-height: 44px;
    border-radius: 999px;
    background: #8f8f8f;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.chat-msg-row {
    display: flex;
    margin-top: 0.35rem;
}

.chat-msg-row:first-child {
    margin-top: 0;
}

.chat-msg-row.me {
    justify-content: flex-end;
    align-items: flex-end;
    gap: 0.3rem;
}

.chat-msg-edited {
    font-size: 0.65rem;
    font-style: italic;
    opacity: 0.7;
}

.chat-msg-edit-wrap {
    margin-bottom: 0.3rem;
}

.chat-msg-edit-textarea {
    width: 100%;
    min-width: 160px;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.15);
    color: inherit;
    font: inherit;
    font-size: 0.9rem;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

.chat-msg-edit-textarea:focus {
    border-color: rgba(255, 255, 255, 0.7);
}

.chat-msg-edit-actions {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.3rem;
    justify-content: flex-end;
}

.chat-msg-save-btn,
.chat-msg-cancel-btn {
    padding: 0.18rem 0.6rem;
    border-radius: 5px;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.chat-msg-save-btn {
    background: #fff;
    color: #8338ec;
}

.chat-msg-save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.chat-msg-cancel-btn {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.chat-msg-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ── Message body wrapper (bubble + reaction row) ── */
.chat-msg-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: min(77%, 560px);
}

.chat-msg-row.me .chat-msg-body {
    align-items: flex-end;
}

/* ── Reaction pill strip ── */
.chat-msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 3px;
    padding: 0 4px;
}

/* element.class selector (0,1,1) to beat global `button` (0,0,1) */
button.chat-msg-reaction {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px 2px 5px;
    border-radius: 999px;
    border: 1px solid #e2daf0;
    background: #f5f3fb;
    color: #1a1a2e;
    font-size: 0.82rem;
    line-height: 1.4;
    cursor: pointer;
    max-width: none;
    width: auto;
    transform: none;
    filter: none;
    transition: background 0.1s, border-color 0.1s;
}

button.chat-msg-reaction:hover {
    background: #ede8fb;
    border-color: #8338ec;
    transform: none;
    filter: none;
}

button.chat-msg-reaction.mine {
    background: #ede0ff;
    border-color: #a678f0;
    color: #5b1fa8;
}

button.chat-msg-reaction.mine:hover {
    background: #e0ceff;
    border-color: #8338ec;
}

.chat-reaction-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: inherit;
}

.chat-msg-bubble {
    max-width: 100%;
    border-radius: 8px 18px 18px 18px;
    padding: 0.55rem 0.75rem;
    border: none;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    position: relative;
}

.chat-msg-row.me .chat-msg-bubble {
    background: #8338ec;
    color: #fff;
    border-color: transparent;
    border-radius: 18px 8px 18px 18px;
    box-shadow: 0 2px 8px rgba(131, 56, 236, 0.2);
}

.chat-msg-file {
    display: inline-block;
    margin-top: 0.34rem;
    color: inherit;
    text-decoration: underline;
    font-size: 0.83rem;
    word-break: break-all;
}

.chat-msg-meta {
    margin-top: 0.24rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    opacity: 0.78;
}

.chat-msg-time {
    font-size: 0.7rem;
    opacity: 0.9;
}

.chat-msg-read {
    font-weight: 700;
    letter-spacing: -0.04em;
}

.chat-msg-read.sent {
    opacity: 0.78;
}

.chat-msg-read.read {
    color: #c4b5ff;
}

.chat-msg-row:not(.me) .chat-msg-read.read {
    color: #60709a;
}

.chat-date-sep {
    margin: 0.15rem 0 0.3rem;
    display: flex;
    justify-content: center;
}

.chat-date-sep span {
    display: inline-block;
    padding: 0.28rem 0.7rem;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    color: #6b7ba5;
    font-size: 0.72rem;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.chat-msg-image-link {
    display: block;
    margin-top: 0.4rem;
}

.chat-msg-image {
    max-width: min(220px, 100%);
    max-height: 180px;
    display: block;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    object-fit: cover;
}

.chat-image-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: none;
}

.chat-image-preview-modal.hidden {
    display: none;
}

.chat-image-preview-frame {
    position: relative;
    display: inline-block;
    max-width: min(92vw, 1280px);
    max-height: 86vh;
    pointer-events: auto;
}

.chat-image-preview-modal img {
    display: block;
    max-width: min(92vw, 1280px);
    max-height: 86vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    border: none;
    background: #0f1220;
    box-shadow: 0 28px 62px rgba(20, 30, 64, 0.4);
}

.chat-image-preview-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(15, 18, 32, 0.65);
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: background 0.15s ease, transform 0.15s ease;
}

.chat-image-preview-close:hover,
.chat-image-preview-close:focus-visible {
    background: rgba(15, 18, 32, 0.9);
    transform: scale(1.08);
    outline: none;
}

.chat-msg-file-doc span {
    opacity: 0.75;
    font-size: 0.75rem;
}

.chat-send-form {
    border-top: 1px solid #ece5f8;
    padding: 0.65rem 0.85rem 0.75rem;
    background: #fff;
    flex-shrink: 0;
    position: relative;
}

.chat-send-form.is-disabled {
    opacity: 0.72;
}

/* ── Emoji toggle button (same shape as attach button) ── */
button.chat-emoji-toggle-btn {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0dae8;
    background: #fff;
    color: #6b5e80;
    cursor: pointer;
    padding: 0;
    transform: none;
    filter: none;
    transition: background 0.12s, border-color 0.12s;
}

button.chat-emoji-toggle-btn:hover {
    background: #f5f3fa;
    border-color: #8338ec;
    color: #8338ec;
    transform: none;
    filter: none;
}

button.chat-emoji-toggle-btn svg {
    width: 18px;
    height: 18px;
}

.chat-emoji-picker {
    position: fixed;
    width: 352px;
    background: #fff;
    border: 1px solid #e0dae8;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: min(420px, 60vh);
}

/* ── Tab bar ── */
.chat-emoji-tabs {
    display: flex;
    border-bottom: 1px solid #ede8f5;
    background: #fff;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
    padding: 0 4px;
}

.chat-emoji-tabs::-webkit-scrollbar { display: none; }

button.chat-emoji-tab {
    flex: 1;
    min-width: 36px;
    padding: 8px 4px 6px;
    background: transparent;
    border: none;
    border-bottom: 2.5px solid transparent;
    cursor: pointer;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: none;
    width: auto;
    border-radius: 0;
    transform: none;
    filter: none;
    transition: color 0.12s, border-color 0.12s;
}

button.chat-emoji-tab:hover {
    color: #8338ec;
    background: transparent;
    transform: none;
    filter: none;
}

button.chat-emoji-tab.active {
    color: #8338ec;
    border-bottom-color: #8338ec;
}

/* ── Search bar ── */
.chat-emoji-search-wrap {
    position: relative;
    padding: 8px 10px 4px;
    flex-shrink: 0;
}

.chat-emoji-search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%) translateY(2px);
    color: #9ca3af;
    pointer-events: none;
    display: flex;
    align-items: center;
}

.chat-emoji-search {
    width: 100%;
    padding: 7px 10px 7px 34px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 0.85rem;
    background: #f3f4f6;
    color: #1a1a2e;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}

.chat-emoji-search:focus {
    border-color: #8338ec;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(131, 56, 236, 0.1);
}

/* ── Category label ── */
.chat-emoji-cat-label {
    padding: 4px 10px 2px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #9ca3af;
    text-transform: uppercase;
    flex-shrink: 0;
    user-select: none;
}

/* ── Emoji grid ── */
.chat-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1px;
    padding: 4px 6px 8px;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: #e0dae8 transparent;
}

.chat-emoji-grid::-webkit-scrollbar { width: 4px; }
.chat-emoji-grid::-webkit-scrollbar-thumb { background: #e0dae8; border-radius: 4px; }

button.chat-emoji-item {
    font-size: 1.35rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 4px 2px;
    line-height: 1.4;
    text-align: center;
    width: 100%;
    max-width: none;
    transform: none;
    filter: none;
    transition: background 0.08s, transform 0.08s;
    overflow: visible;
}

button.chat-emoji-item:hover {
    background: #f0ebff;
    transform: scale(1.2);
    filter: none;
}

/* ── Reply preview bar ── */
.chat-reply-preview {
    margin-bottom: 0.4rem;
    border-left: 3px solid #8338ec;
    background: #f5f0ff;
    border-radius: 0 7px 7px 0;
    padding: 0.3rem 0.5rem;
}

.chat-reply-preview-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chat-reply-preview-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.chat-reply-preview-sender {
    font-size: 0.75rem;
    font-weight: 700;
    color: #8338ec;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-reply-preview-text {
    font-size: 0.78rem;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-reply-cancel-btn {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: #e0d4f8;
    color: #7929d4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s;
    padding: 0;
}

.chat-reply-cancel-btn:hover { background: #cdb8f0; }

/* ── Reply button on hover ── */
/* Use element.class for higher specificity than the global `button` rule */
button.chat-msg-reply-btn {
    display: none;            /* removed from layout when hidden — no phantom space */
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: 0.15rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    width: 26px;
    max-width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #d5dcf0;
    background: #f3f4f6;
    color: #60709a;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    transform: none;
    filter: none;
    font-size: 0;
}

.chat-msg-row:hover button.chat-msg-reply-btn {
    display: inline-flex;
}

button.chat-msg-reply-btn:hover {
    background: #eef2ff;
    color: #4338ca;
    border-color: #c7d0f0;
    transform: none;
    filter: none;
}

/* ── Quote block inside bubble ── */
.chat-msg-quote {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    border-left: 3px solid rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    padding: 0.25rem 0.45rem;
    margin-bottom: 0.35rem;
    cursor: pointer;
    transition: background 0.12s;
}

.chat-msg-row:not(.me) .chat-msg-quote {
    border-left-color: #8338ec;
    background: rgba(131, 56, 236, 0.07);
}

.chat-msg-quote:hover { background: rgba(0, 0, 0, 0.1); }
.chat-msg-row:not(.me) .chat-msg-quote:hover { background: rgba(131, 56, 236, 0.13); }

.chat-msg-quote-sender {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.chat-msg-row:not(.me) .chat-msg-quote-sender { color: #8338ec; }

.chat-msg-quote-text {
    font-size: 0.75rem;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Highlight animation for jumped-to message ── */
@keyframes chatMsgHighlight {
    0% { box-shadow: 0 0 0 3px rgba(131, 56, 236, 0.5); }
    100% { box-shadow: none; }
}

.chat-msg-highlight .chat-msg-bubble {
    animation: chatMsgHighlight 1.5s ease-out forwards;
    border-radius: 8px;
}

#chatMessageInput {
    height: 42px;
    min-height: 42px;
    max-height: 140px;
    border-radius: 22px;
    padding: 0.6rem 1rem;
    background: #f5f3fa;
    border: 1px solid transparent;
    resize: none;
    overflow-y: hidden;
    line-height: 1.45;
    font-family: inherit;
    font-size: inherit;
    box-sizing: border-box;
    display: block;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

#chatMessageInput:focus {
    background: #fff;
    border-color: #8338ec;
    box-shadow: 0 0 0 3px rgba(131, 56, 236, 0.1);
    outline: none;
}

.chat-compose-bar {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: end;
    gap: 0.45rem;
}

.chat-attach-btn {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 999px;
    padding: 0;
    border: 1px solid #e0dae8;
    background: #fff;
    color: #6b5e80;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.chat-attach-btn:hover {
    background: #f5f3fa;
    border-color: #8338ec;
    color: #8338ec;
}

.chat-attach-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-attach-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.chat-attach-btn.disabled .chat-attach-file-input {
    pointer-events: none;
}

.chat-send-btn {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 999px;
    padding: 0;
    background: #8338ec;
    color: #fff;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(131, 56, 236, 0.3);
    transition: transform 0.1s, box-shadow 0.15s;
}

.chat-send-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 5px 14px rgba(131, 56, 236, 0.35);
    background: #7329d4;
}

.chat-attach-btn svg,
.chat-send-btn svg {
    width: 18px;
    height: 18px;
}

.chat-file-chosen {
    margin-top: 0.45rem;
    border: 1px solid #e0dae8;
    background: #faf8ff;
    border-radius: 8px;
    padding: 0.38rem 0.6rem;
    font-size: 0.76rem;
    color: #6b5e80;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.chat-file-chosen.hidden {
    display: none;
}

.chat-file-chosen-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.chat-file-chosen-remove {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #d5d0e0;
    background: #fff;
    color: #9b8fb8;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
    padding: 0;
}

.chat-file-chosen-remove:hover {
    background: #fff0f0;
    color: #dc2626;
    border-color: #fca5a5;
}

.chat-file-multi-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-width: 0;
    flex: 1;
}

.chat-file-multi-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #eef0ff;
    border: 1px solid #c3c9f7;
    border-radius: 6px;
    padding: 0.2rem 0.45rem;
    max-width: 180px;
}

.chat-file-item-remove {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #d5d0e0;
    background: #fff;
    color: #9b8fb8;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.chat-file-item-remove:hover {
    background: #fff0f0;
    color: #dc2626;
    border-color: #fca5a5;
}

.paste-attach-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #eef0ff;
    border: 1px solid #c3c9f7;
    border-radius: 6px;
    padding: 0.18rem 0.5rem;
    font-size: 0.76rem;
    color: #4040b8;
    font-weight: 500;
}

.file-list-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.file-list-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #f0eeff;
    border: 1px solid #d5cef7;
    border-radius: 6px;
    padding: 0.2rem 0.35rem 0.2rem 0.55rem;
    font-size: 0.76rem;
    color: #4b3fa0;
    max-width: 260px;
}

.file-list-item--has-thumb {
    padding: 0.2rem 0.35rem 0.2rem 0.2rem;
}

.file-list-item-thumb {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.file-list-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.file-list-item-remove {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #9b8fb8;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.12s, color 0.12s;
}

.file-list-item-remove:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Upload progress items */
.file-upload-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.35rem 0;
}
.file-upload-name {
    font-size: 0.78rem;
    font-weight: 500;
    color: #4b3fa0;
    min-width: 0;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}
.file-upload-bar {
    flex: 1;
    height: 6px;
    background: #e4f1f8;
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}
.file-upload-fill {
    height: 100%;
    width: 0%;
    background: #5cc3ea;
    border-radius: 3px;
    transition: width 0.2s ease;
}
.file-upload-fill.file-upload-waiting {
    background: #e0e7ff;
    background-size: 200% 100%;
    animation: uploadPulse 1.5s ease-in-out infinite;
}
@keyframes uploadPulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.file-upload-fill.file-upload-done {
    background: #4ade80;
}
.file-upload-fill.file-upload-error {
    background: #fca5a5;
}
.file-upload-pct {
    font-size: 0.72rem;
    font-weight: 600;
    color: #14a1db;
    min-width: 32px;
    text-align: right;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 1180px) {
    .chat-layout {
        grid-template-columns: minmax(240px, 300px) 1fr;
    }

    .chat-layout.chat-shared-open {
        grid-template-columns: minmax(240px, 300px) 1fr;
    }
}

@media (max-width: 980px) {
    .content-shell:has(> .grid > .section-card[data-section="messages"]:not(.hidden)) {
        height: 100%;
        max-height: none;
    }

    .chat-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .messages-studio {
        min-height: 0;
        height: auto;
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
    }

    .chat-layout {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .chat-thread-panel {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .chat-users-list {
        max-height: 220px;
    }

    .chat-messages-list {
        min-height: 0;
        max-height: none;
        flex: 1 1 auto;
    }

    .chat-thread-head {
        align-items: center;
        flex-wrap: wrap;
    }

    #chatMessageSearch {
        width: 100%;
    }
}

/* Final mobile-first safety overrides for modal forms */
@media (max-width: 620px) {
    .quick-add-panel {
        position: fixed !important;
        inset: 0 !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        height: 100dvh !important;
        min-height: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        overflow: hidden !important;
        isolation: isolate;
        z-index: 1602 !important;
        pointer-events: auto !important;
    }

    .quick-add-head {
        display: grid !important;
        /* icon | title-block | close — keeps the close button top-right on a
           single row. (Was a 2-col grid sized for title + close only; the
           header icon added later pushed close onto a stranded second row.) */
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: flex-start;
        gap: 0.75rem;
        position: relative !important;
        top: auto !important;
        z-index: auto !important;
        background: transparent;
        padding: max(1rem, calc(env(safe-area-inset-top, 0px) + 0.85rem)) 1rem 0.55rem;
        margin: 0;
        flex-shrink: 0;
    }

    .quick-add-head h4 {
        font-size: 1.05rem;
        line-height: 1.25;
        margin: 0;
        min-width: 0;
        max-width: none;
        word-break: break-word;
    }

    .quick-add-close {
        align-self: flex-start;
        width: auto;
        min-width: 76px;
        min-height: 44px;
        height: 44px;
        padding: 0.5rem 0.9rem;
        border-radius: 14px;
        white-space: nowrap;
        pointer-events: auto !important;
    }

    .quick-add-form {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        gap: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        position: static;
        z-index: auto;
    }

    .quick-add-fields {
        min-height: 0 !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        padding: 0 1rem 0.5rem !important;
    }

    .quick-add-fields > label:first-child {
        margin-top: 0;
    }

    .quick-add-form .quick-row,
    .quick-add-form .quick-row.quick-row-datetime,
    .quick-add-form .quick-row.quick-row-single {
        grid-template-columns: 1fr !important;
        gap: 0.48rem;
    }

    .quick-add-form .quick-row > div {
        min-width: 0;
    }

    .quick-add-form input,
    .quick-add-form select,
    .quick-add-form textarea {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        min-height: 46px;
        padding: 0.72rem 0.82rem;
        border-radius: 14px;
        background: #fff;
        border-color: var(--hr-border, #dcf1fb);
        font-size: var(--control-font-mobile, 0.875rem);
    }

    /* Preserve left padding for selects that have an absolutely-positioned
       leading icon — otherwise the mobile .quick-add-form rule above collapses
       padding-left to 0.82rem and the icon overlaps the placeholder text.
       Also nudge the icon down-and-in slightly to match the larger 46px height. */
    .quick-add-form .assign-dept-select {
        padding-left: 2.75rem !important;
    }
    .quick-add-form .assign-dept-icon {
        left: 0.95rem;
    }

    .quick-add-form textarea {
        min-height: 110px;
    }

    .quick-add-form label {
        margin: 0.35rem 0 0.3rem;
        font-size: 0.84rem;
        color: #4a3f6b;
    }

    .quick-add-form input[type="file"] {
        padding: 0.7rem;
        min-height: 54px;
        background: #f8f5ff;
        border: 1.5px dashed #a9dcf1;
    }

    .quick-assign-dept-picker-row,
    .quick-assignee-row {
        grid-template-columns: 1fr auto !important;
    }

    .quick-dept-add-btn,
    .quick-assignee-remove {
        width: 38px;
        min-width: 38px;
        height: 38px;
    }

    .quick-add-assignee-btn {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        border-radius: 12px;
    }

    .assign-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }
    .assign-header-actions {
        gap: 0.7rem;
    }
    .assign-action-link {
        font-size: 0.65rem;
    }
    .assign-dept-row {
        flex-direction: column;
    }
    .assign-add-user-btn {
        width: 100%;
        justify-content: center;
        min-height: 38px;
    }

    .quick-assign-helper {
        display: block;
        margin-top: 0.3rem;
        font-size: 0.76rem;
        line-height: 1.35;
    }

    .quick-add-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
        flex-shrink: 0 !important;
        padding: 0.75rem 1rem calc(env(safe-area-inset-bottom, 0px) + 0.75rem) !important;
        border-top: 1px solid var(--hr-border, #dcf1fb);
        background: #fff !important;
        border-radius: 0 !important;
    }

    .quick-add-actions button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px;
        border-radius: 14px !important;
        pointer-events: auto !important;
        touch-action: manipulation;
    }

    .content-shell > .grid:has(> .section-card[data-section="messages"]:not(.hidden)) {
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
        padding-bottom: max(0.65rem, calc(env(safe-area-inset-bottom, 0px) + 4.5rem));
    }

    .messages-studio {
        height: 100%;
        min-height: 0;
        padding: 0.2rem 0 0;
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        overflow: hidden;
        border-radius: 0;
        background: transparent;
    }

    .content-shell > .grid > .section-card[data-section="messages"] {
        height: 100%;
        min-height: 0;
        margin: 0 -0.2rem 0 !important;
        padding: 0 !important;
        align-self: stretch;
        flex: 1 1 0;
        overflow: hidden;
        border: 0;
        box-shadow: none;
        background: transparent;
        padding-bottom: 0 !important;
    }

    .chat-layout {
        display: flex !important;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        flex: 1 1 0;
    }

    .chat-users-panel,
    .chat-thread-panel {
        flex: 1 1 0;
        min-height: 0;
        height: 100%;
        border-radius: 18px;
    }

    .chat-users-panel {
        overflow: hidden;
        border: 1px solid #ece5f8;
        background: #fcfbff;
        box-shadow: 0 10px 28px rgba(84, 61, 132, 0.06);
        border-radius: 24px;
        min-height: 0;
    }

    .section-card[data-section="reports"] .table-wrap.report-table-mobile {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 0;
    }

    .section-card[data-section="reports"] .table-wrap.report-table-mobile table {
        min-width: 0;
        width: 100%;
        border-spacing: 0;
    }

    .section-card[data-section="reports"] .table-wrap.report-table-mobile thead {
        display: none;
    }

    .section-card[data-section="reports"] .table-wrap.report-table-mobile tbody,
    .section-card[data-section="reports"] .table-wrap.report-table-mobile tr,
    .section-card[data-section="reports"] .table-wrap.report-table-mobile td {
        display: block;
        width: 100%;
    }

    .section-card[data-section="reports"] .table-wrap.report-table-mobile tbody tr {
        margin-bottom: 0.7rem;
    }

    .section-card[data-section="reports"] .table-wrap.report-table-mobile tbody tr:last-child {
        margin-bottom: 0;
    }

    .section-card[data-section="reports"] .table-wrap.report-table-mobile td {
        border: 0;
        background: transparent;
        padding: 0;
    }

    .section-card[data-section="reports"] .table-wrap.report-table-mobile tbody tr td:first-child,
    .section-card[data-section="reports"] .table-wrap.report-table-mobile tbody tr td:last-child {
        border: 0;
        border-radius: 0;
    }

    .section-card[data-section="reports"] .table-wrap.report-table-mobile .empty {
        display: block;
        padding: 1rem 0.8rem;
        border: 1px solid #e4e9f7;
        border-radius: 14px;
        background: #ffffff;
        text-align: center;
    }

    .report-table-pager {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 0.35rem;
        padding: 0.24rem;
    }

    .report-table-pager span {
        min-width: 0;
        text-align: center;
        font-size: 0.94rem;
    }

    .report-table-pager .ghost {
        min-width: 84px;
    }

    .report-task-card .task-tags .status-badge,
    .report-task-chip {
        white-space: nowrap;
    }

    .report-task-card {
        padding: 0.9rem;
        gap: 0.42rem;
        box-shadow: 0 8px 20px rgba(36, 52, 95, 0.07);
    }

    .report-task-card .task-card-title {
        font-size: 0.98rem;
    }

    .report-task-card .task-card-meta {
        font-size: 0.78rem;
    }

    .report-task-card .task-card-foot {
        margin-top: 0.45rem;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.55rem;
        flex-wrap: wrap;
    }

    .report-task-card .task-activity.report-task-activity {
        margin-left: auto;
        align-items: center;
        flex: 0 0 auto;
    }

    #reportBody button.report-task-view-btn {
        width: auto;
        min-width: 118px;
        min-height: 38px;
        padding: 0.58rem 0.92rem;
        white-space: nowrap;
    }

    /* ── Mobile chat list header ──────────────────────────────────── */
    .chat-list-header {
        padding: 0.75rem 0.85rem 0.2rem;
    }
    .chat-list-header h3 {
        font-size: 1.22rem;
    }

    .chat-users-title-row { display: none; }
    .chat-users-head { display: none; }

    #chatUserSearch {
        height: 42px;
        border-radius: 14px;
        background: #f4effb;
        font-size: 0.88rem;
        padding-left: 2.3rem;
        padding-right: 2.3rem;
    }

    .chat-users-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        padding: 0.15rem 0 calc(env(safe-area-inset-bottom, 0px) + 4.5rem);
        background: #ffffff;
        display: flex;
        flex-direction: column;
    }

    .chat-user-item {
        gap: 0.75rem;
        padding: 0.72rem 0.85rem;
        border-radius: 0;
        margin-bottom: 0;
    }

    .chat-users-panel .chat-avatar {
        width: 50px;
        height: 50px;
        font-size: 0.95rem;
    }

    .chat-user-item.active {
        background: rgba(131, 56, 236, 0.06);
        border-radius: 0;
        box-shadow: inset 3px 0 0 #1488c7;
    }

    .chat-user-name {
        font-size: 0.97rem;
        font-weight: 650;
    }

    .chat-user-sub {
        font-size: 0.82rem;
        color: #7a7e94;
    }

    .chat-user-meta {
        font-size: 0.72rem;
        align-self: center;
    }

    .chat-user-time {
        font-size: 0.72rem;
    }

    .chat-layout .chat-thread-panel {
        display: none;
    }

    .chat-layout.mobile-thread-view .chat-users-panel {
        display: none;
    }

    .chat-layout.mobile-thread-view .chat-thread-panel {
        display: flex;
        flex: 1 1 auto;
        border-color: transparent;
        box-shadow: none;
    }

    .chat-back-btn {
        display: inline-flex;
        width: 30px;
        min-width: 30px;
        height: 30px;
    }

    .chat-thread-profile {
        flex: 1;
        min-width: 0;
    }

    .chat-thread-actions {
        gap: 0.32rem;
    }

    .chat-head-icon-btn {
        width: 30px;
        min-width: 30px;
        height: 30px;
    }

    .chat-head-icon-btn svg {
        width: 16px;
        height: 16px;
    }

    #appView.mobile-chat-fullscreen {
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 0;
        border: 0;
        background: #ffffff;
    }

    #appView.mobile-chat-fullscreen .topbar {
        display: none !important;
    }

    #appView.mobile-chat-fullscreen #mobileBottomNav {
        display: none !important;
    }

    #appView.mobile-chat-fullscreen .content-shell {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    #appView.mobile-chat-fullscreen .content-shell > .grid {
        flex: 1 1 0;
        margin: 0;
        padding: 0 !important;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    #appView.mobile-chat-fullscreen .messages-studio,
    #appView.mobile-chat-fullscreen .section-card[data-section="messages"] {
        flex: 1 1 0;
        min-height: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        padding: 0 !important;
        padding-bottom: 0 !important;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #appView.mobile-chat-fullscreen .chat-layout {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 0;
        min-height: 0;
    }

    #appView.mobile-chat-fullscreen .chat-layout .chat-users-panel {
        display: none !important;
    }

    #appView.mobile-chat-fullscreen .chat-layout .chat-thread-panel {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 0;
        min-height: 0;
        height: 100%;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #ede8d8;
    }

    #appView.mobile-chat-fullscreen .chat-thread-head {
        gap: 0.5rem;
        padding: 0.6rem 0.65rem;
        border-bottom: 1px solid #ece5f8;
        background: #ffffff;
    }

    #appView.mobile-chat-fullscreen #chatMessageSearch {
        display: none !important;
    }

    #appView.mobile-chat-fullscreen .chat-avatar-lg {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }

    #appView.mobile-chat-fullscreen #chatThreadName {
        font-size: 1rem;
        line-height: 1.15;
    }

    #appView.mobile-chat-fullscreen #chatThreadMeta {
        font-size: 0.75rem;
        line-height: 1.2;
    }

    #appView.mobile-chat-fullscreen .chat-messages-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0.7rem;
        padding-right: 0.72rem;
        gap: 0.4rem;
        background: #ede8d8;
    }

    .chat-scroll-rail {
        display: none !important;
    }


    #appView.mobile-chat-fullscreen .chat-msg-body {
        max-width: 84%;
    }

    #appView.mobile-chat-fullscreen .chat-msg-bubble {
        max-width: 100%;
        border-radius: 8px 16px 16px 16px;
        padding: 0.55rem 0.7rem;
        border: none;
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }

    #appView.mobile-chat-fullscreen .chat-msg-row.me .chat-msg-bubble {
        background: #8338ec;
        color: #ffffff;
        border-color: transparent;
        border-radius: 16px 8px 16px 16px;
        box-shadow: 0 2px 8px rgba(131, 56, 236, 0.2);
    }

    #appView.mobile-chat-fullscreen .chat-msg-meta {
        margin-top: 0.22rem;
        font-size: 0.68rem;
    }

    #appView.mobile-chat-fullscreen .chat-send-form {
        position: sticky;
        bottom: 0;
        margin-top: auto;
        padding: 0.5rem 0.56rem calc(env(safe-area-inset-bottom, 0px) + 0.5rem);
        border-top: 1px solid #ece5f8;
        background: #ffffff;
    }

    #appView.mobile-chat-fullscreen .chat-compose-bar {
        grid-template-columns: auto auto 1fr auto;
        gap: 0.42rem;
    }

    #appView.mobile-chat-fullscreen #chatMessageInput {
        height: 38px;
        min-height: 38px;
        max-height: 120px;
        border-radius: 20px;
        padding: 0.5rem 0.85rem;
        border: 1px solid #e0dae8;
        background: #f5f3fa;
        resize: none;
        overflow-y: hidden;
    }

    #appView.mobile-chat-fullscreen .chat-attach-btn,
    #appView.mobile-chat-fullscreen .chat-send-btn {
        width: 38px;
        min-width: 38px;
        height: 38px;
        border-radius: 999px;
        padding: 0;
    }

    #appView.mobile-chat-fullscreen .chat-attach-btn {
        border: 1px solid #e0dae8;
        background: #ffffff;
        color: #6b5e80;
    }

    #appView.mobile-chat-fullscreen .chat-send-btn {
        border: 0;
        background: #8338ec;
        color: #ffffff;
        box-shadow: 0 3px 10px rgba(131, 56, 236, 0.3);
    }

    #appView.mobile-chat-fullscreen .chat-attach-btn svg,
    #appView.mobile-chat-fullscreen .chat-send-btn svg {
        width: 16px;
        height: 16px;
    }

    /* ── Mobile chat feature additions ─────────────────────────────────── */

    /* Chevron menu button: hidden on mobile — long-press bubble opens menu instead */
    #appView.mobile-chat-fullscreen button.chat-msg-menu-btn {
        display: none !important;
    }

    /* Emoji picker: full-width on mobile */
    #appView.mobile-chat-fullscreen .chat-emoji-picker {
        width: calc(100vw - 16px) !important;
        max-height: 280px;
    }

    #appView.mobile-chat-fullscreen .chat-emoji-grid {
        max-height: 180px;
    }

    /* Context menu: wider on mobile */
    #appView.mobile-chat-fullscreen #chatContextMenu {
        width: min(260px, calc(100vw - 24px));
        min-width: 200px;
    }

    /* Reaction pills: slightly larger tap targets on mobile */
    #appView.mobile-chat-fullscreen button.chat-msg-reaction {
        padding: 3px 8px;
        min-height: 30px;
        font-size: 0.85rem;
    }

    /* Quick reaction panel: 8-wide but bigger cells on mobile */
    #appView.mobile-chat-fullscreen .chat-ctx-reactions {
        padding: 6px 4px;
    }

    #appView.mobile-chat-fullscreen button.chat-ctx-reaction-btn {
        padding: 6px 4px;
        font-size: 1.1rem;
    }

    /* Emoji toggle button: same sizing as desktop */
    #appView.mobile-chat-fullscreen button.chat-emoji-toggle-btn {
        width: 38px;
        min-width: 38px;
        height: 38px;
    }

    /* Reply preview on mobile */
    #appView.mobile-chat-fullscreen .chat-reply-preview {
        border-radius: 8px;
        margin-bottom: 0.35rem;
    }

    .content-shell.mobile-chat-thread-active #statusLine {
        display: none;
    }

    .content-shell.mobile-chat-thread-active > .grid {
        padding-bottom: 0 !important;
    }

    .event-details-box:not(.hidden) {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        max-height: 100dvh !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding:
            max(2rem, calc(env(safe-area-inset-top, 0px) + 1.35rem))
            max(1.15rem, calc(env(safe-area-inset-right, 0px) + 1.15rem))
            max(1.8rem, calc(env(safe-area-inset-bottom, 0px) + 1.5rem))
            max(1rem, calc(env(safe-area-inset-left, 0px) + 1rem)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scroll-padding-top: max(1rem, calc(env(safe-area-inset-top, 0px) + 0.9rem));
        scroll-padding-bottom: max(1.5rem, calc(env(safe-area-inset-bottom, 0px) + 1.2rem));
    }

    .report-submit-modal:not(.hidden) {
        position: fixed !important;
        inset: 0 !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        height: 100dvh !important;
        min-height: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }
    /* CRITICAL: the global .hidden rule appears earlier in this stylesheet, so the
       mobile .report-submit-modal/.event-details-box rules above (with display:flex !important)
       were overriding it on mobile — making the modal permanently visible on every
       screen, including the login page. The :not(.hidden) guards above prevent that,
       and this explicit override is a safety net in case other modal rules below
       repeat the pattern. */
    .report-submit-modal.hidden,
    .event-details-box.hidden,
    #reportPreviewModal.hidden {
        display: none !important;
    }

    .report-submit-modal .rsm-header {
        flex-shrink: 0;
        padding: max(1.35rem, calc(env(safe-area-inset-top, 0px) + 1.35rem)) 1rem 0.75rem;
    }

    .report-submit-modal form,
    #reportSubmitModal form {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 0 1rem 1rem !important;
    }

    /* Report preview modal uses .rpv-body instead of form */
    #reportPreviewModal .rpv-body {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .report-submit-modal .rsm-actions {
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        background: #fff;
        padding: 0.75rem 1rem max(0.75rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
        border-top: 1px solid #e8ecf4;
        margin: 0 -1rem;
        width: calc(100% + 2rem);
        z-index: 2;
    }

    /* File preview items – bigger touch target for remove button */
    .report-submit-modal .file-list-item {
        padding: 0.35rem 0.4rem 0.35rem 0.55rem;
    }
    .report-submit-modal .file-list-item--has-thumb {
        padding: 0.35rem 0.4rem 0.35rem 0.25rem;
    }
    .report-submit-modal .file-list-item-remove {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    .report-submit-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.7rem;
        align-items: flex-start;
        margin-bottom: 0.7rem;
    }

    .report-submit-head h4 {
        font-size: 1.05rem;
        line-height: 1.25;
        margin: 0;
        word-break: break-word;
    }

    #reportPreviewModal {
        overflow: hidden;
    }

    #reportPreviewModal .rpv-header {
        flex-shrink: 0;
        border-radius: 0;
        padding: 0.75rem 0.8rem 0.55rem;
    }

    .rpv-body {
        padding: 0.7rem 0.8rem 1rem;
    }

    .rsm-bento-row {
        grid-template-columns: 1fr;
    }

    .rsm-actions {
        flex-direction: column;
    }
    .rsm-actions button {
        width: 100%;
        min-height: 46px;
        border-radius: 12px;
    }

    .report-submit-modal .event-details-meta {
        grid-template-columns: 1fr;
    }

    .report-submit-modal .event-report-photos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .event-details-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 0.65rem;
        position: relative !important;
        top: auto !important;
        align-items: flex-start;
        margin-bottom: 0.6rem;
        padding-top: 0;
        padding-bottom: 0.15rem;
        padding-right: 0;
        min-height: 0;
        background: transparent;
        z-index: auto;
    }

    .event-details-head-main {
        min-width: 0;
    }

    #closeEventDetailsBtn {
        position: relative !important;
        top: auto;
        right: auto;
        margin-top: 0;
        width: 44px !important;
        max-width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        flex: 0 0 44px !important;
        justify-self: end;
        align-self: start;
        z-index: 1;
        box-shadow: none;
    }

    .event-details-box .actions {
        position: static;
        bottom: auto;
        z-index: auto;
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 1rem;
        margin-bottom: 0;
        padding-top: 0.85rem;
        padding-bottom: 0;
        background: transparent;
    }

    .event-details-box .actions > * {
        grid-column: 1 / -1 !important;
    }
}


/* ── Report table: Completed Subtasks section ─────────────────────────── */
.report-subtask-sep {
    background: #f0f4ff;
    color: #3b55a0;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.45rem 1rem;
    border-top: 2px solid #c7d4f5;
}

.report-subtask-row td {
    background: #fafbff;
}

.report-subtask-row:hover td {
    background: #f0f4ff;
}

.report-subtask-parent {
    font-size: 0.73rem;
    color: #7a8ab0;
    margin-top: 0.18rem;
}

/* ── Chat message dropdown chevron button ─────────────────────────────────── */
/* Use element.class selector (0,1,1) to beat global `button` rule (0,0,1)    */
button.chat-msg-menu-btn {
    display: none;
    position: absolute;
    top: 5px;
    right: 6px;
    align-items: center;
    justify-content: center;
    width: 20px;
    max-width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.13);
    color: inherit;
    cursor: pointer;
    padding: 0;
    opacity: 0.75;
    transform: none;
    filter: none;
    z-index: 2;
    line-height: 1;
}

.chat-msg-row:hover button.chat-msg-menu-btn {
    display: inline-flex;
}

button.chat-msg-menu-btn:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.22);
    transform: none;
    filter: none;
}

/* ── Chat context menu panel ─────────────────────────────────────────────── */
#chatContextMenu {
    position: fixed;
    z-index: 9990;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.07);
    padding: 4px 0;
    min-width: 158px;
    overflow: hidden;
}

#chatContextMenu.hidden {
    display: none;
}

/* Use element.class selector to override global `button` styles */
button.chat-ctx-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    padding: 9px 16px;
    border: none;
    background: transparent;
    color: #1a1a2e;
    font-size: 0.875rem;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    border-radius: 0;
    transform: none;
    filter: none;
    line-height: 1.3;
}

button.chat-ctx-item:hover {
    background: #f5f4fb;
    transform: none;
    filter: none;
}

button.chat-ctx-item-danger {
    color: #dc2626;
}

button.chat-ctx-item-danger:hover {
    background: #fff1f1;
}

.chat-ctx-sep {
    height: 1px;
    background: #f0eef8;
    margin: 3px 0;
}

/* ── Quick reaction row ─────────────────────────────────────────────────── */
.chat-ctx-reactions {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1px;
    padding: 6px 8px 8px;
    border-top: 1px solid #f0eef8;
}

.chat-ctx-reactions.hidden {
    display: none;
}

button.chat-ctx-reaction-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    max-width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 1.05rem;
    cursor: pointer;
    padding: 0;
    transform: none;
    filter: none;
    transition: background 0.1s, transform 0.1s;
    line-height: 1;
}

button.chat-ctx-reaction-btn:hover {
    background: #f0eef8;
    transform: scale(1.2);
    filter: none;
}


/* ═══════════════════════════════════════════════
   REQUESTS MODULE — modern sub-page UI
   ═══════════════════════════════════════════════ */

/* ── Sidebar sub-menu ── */
.req-nav-chevron {
    margin-left: auto;
    opacity: 0.6;
    display: flex;
    align-items: center;
    transition: transform 0.22s;
}
.req-nav-chevron.open { transform: rotate(180deg); }

.req-side-submenu {
    display: none;
    flex-direction: column;
    padding: 0.1rem 0 0.35rem 0.85rem;
    gap: 0.08rem;
}
.req-side-submenu.open { display: flex; }

.req-side-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.45rem 0.75rem 0.45rem 0.95rem;
    border-radius: 9px;
    font-size: 0.79rem;
    font-weight: 500;
    color: rgba(255,255,255,0.68);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
    width: calc(100% - 0.35rem) !important;
    position: relative;
}
.req-side-item:hover { background: rgba(255,255,255,0.1); color: #fff; }
.req-side-item.active { background: rgba(255,255,255,0.15); color: #fff; }
.req-side-item.active::before {
    content: '';
    position: absolute;
    left: -0.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 0 3px 3px 0;
    background: #a9dcf1;
}

.req-nav-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

/* ── Requests module: scoped premium design tokens ──────────────
   Self-scoped to .extension-requests-card (same pattern as .hrms-card).
   Unifies the module on the real brand purple and gives it a small,
   consistent elevation system. Does NOT touch :root or global rules. */
.extension-requests-card {
    --req-accent:        var(--accent);            /* #14a1db */
    --req-accent-strong: var(--color-violet-600);  /* #1488c7 */
    --req-accent-wash:   #eef8fd;                  /* indigo-50 row hover */
    --req-accent-soft:   var(--color-indigo-100);  /* #dcf1fb */
    --req-ink:           var(--ink);               /* #1e1b4b */
    --req-muted:         var(--muted);             /* #6b5f8a */
    --req-border:        var(--border);            /* #dcf1fb */
    --req-border-strong: #c9e9f7;                  /* violet-200 hover border */
    --req-e1: 0 1px 2px rgba(76,57,160,.05), 0 1px 3px rgba(20, 161, 219,.06);
    --req-e2: 0 2px 8px rgba(20, 161, 219,.08), 0 1px 2px rgba(76,57,160,.04);
    --req-e3: 0 8px 24px rgba(76,57,160,.12), 0 2px 6px rgba(20, 161, 219,.08);
    --req-ring: 0 0 0 3px rgba(20, 161, 219,.16);
}

/* ── Premium in-page header band + segmented tabs ── */
.req-header-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.15rem;
    margin-bottom: var(--space-16, 1rem);
    background: linear-gradient(135deg, #faf8ff 0%, #fff 60%);
    border: 1px solid var(--req-border, #dcf1fb);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--req-e1);
}
.req-header-titles { min-width: 0; }
/* The band now owns the page title/subtitle; the per-sub-page headers
   are redundant — hide them for a single clean hierarchy. */
.extension-requests-card .req-page-header { display: none; }
.req-header-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--req-ink, #1e1b4b);
    letter-spacing: -0.01em;
}
.req-header-sub {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--req-muted, #6b5f8a);
}
@media (prefers-reduced-motion: reduce) {
    .req-stat-card:hover, .rh-card:hover { transform: none; }
}
/* Header band stacks on mobile; subnav reuses the existing scrollable strip */
@media (max-width: 620px) {
    .req-header-band {
        flex-direction: column;
        align-items: stretch;
        padding: 0.6rem 0.7rem;
        gap: 0.5rem;
    }
    .req-header-title { font-size: 1rem; }
    .extension-requests-card .req-panel .table-wrap { max-height: none; }
}

/* ── KPI Stat Cards ── */
.req-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}
@media (max-width: 900px) {
    .req-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .req-stat-grid { grid-template-columns: 1fr; }
}

.req-stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    width: 100%;
    padding: 1.1rem 1.15rem 1rem;
    border-radius: var(--radius-lg, 14px);
    border: 1.5px solid transparent;
    background: #fff;
    cursor: pointer;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--motion-base, 0.18s) var(--ease-standard, ease),
                transform var(--motion-base, 0.18s) var(--ease-standard, ease),
                border-color var(--motion-base, 0.18s) var(--ease-standard, ease);
    box-shadow: var(--req-e1);
}
/* Top-edge highlight for layered-glass feel */
.req-stat-card::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
    pointer-events: none;
}
/* Coloured left accent bar */
.req-stat-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: var(--radius-lg, 14px) 0 0 var(--radius-lg, 14px);
}
.req-stat-card:hover {
    box-shadow: var(--req-e3);
    transform: translateY(-2px);
}
.req-stat-card:focus-visible {
    outline: 2px solid rgba(20, 161, 219,0.35);
    outline-offset: 2px;
}
/* Current sub-page marker */
.req-stat-card.is-active {
    border-color: var(--req-accent, #14a1db);
    box-shadow: var(--req-e2), var(--req-ring);
}

/* Accent colours per tone */
.req-tone-amber::before  { background: #f59e0b; }
.req-tone-blue::before   { background: #3b82f6; }
.req-tone-red::before    { background: #ef4444; }
.req-tone-purple::before { background: #4fb8e6; }
.req-tone-green::before  { background: #10b981; }

.req-tone-amber  { border-color: #fde68a; background: linear-gradient(135deg,#fffbeb 0%,#fff 60%); }
.req-tone-blue   { border-color: #bfdbfe; background: linear-gradient(135deg,#eff6ff 0%,#fff 60%); }
.req-tone-red    { border-color: #fecaca; background: linear-gradient(135deg,#fff1f2 0%,#fff 60%); }
.req-tone-purple { border-color: #c9e9f7; background: linear-gradient(135deg,#eef8fd 0%,#fff 60%); }
.req-tone-green  { border-color: #a7f3d0; background: linear-gradient(135deg,#ecfdf5 0%,#fff 60%); }

.req-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.req-stat-icon svg { width: 20px; height: 20px; }

.req-tone-amber-icon { background: rgba(245,158,11,0.14); color: #b45309; }
.req-tone-blue-icon  { background: rgba(59,130,246,0.14);  color: #1d4ed8; }
.req-tone-red-icon   { background: rgba(239,68,68,0.14);   color: #b91c1c; }
.req-tone-purple-icon{ background: rgba(79, 184, 230,0.14);  color: #0e7bb0; }
.req-tone-green-icon { background: rgba(16,185,129,0.14);  color: #065f46; }

.req-stat-body { padding-left: 0.1rem; }

.req-stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--req-muted, #6b5f8a);
    margin-bottom: 3px;
}
.req-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--req-ink, #1e1b4b);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.req-history-type {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: #f3f5fc;
    color: #54658f;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   Request History – Card-Based Redesign
   ══════════════════════════════════════════════════════════════ */

/* ── Toolbar: search + filters ── */
.rh-toolbar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
    flex-wrap: nowrap;
}
.rh-search-wrap {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    max-width: 280px;
}
.rh-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: #8b98b8;
    pointer-events: none;
}
.rh-search-input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border: 1px solid #dde4f5;
    border-radius: 10px;
    font-size: 0.82rem;
    color: #1e2a4a;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.rh-search-input::placeholder { color: #a0aec0; }
.rh-search-input:focus {
    outline: none;
    border-color: var(--req-accent, #14a1db);
    box-shadow: var(--req-ring, 0 0 0 3px rgba(20, 161, 219,0.16));
}
.rh-filters {
    display: flex;
    gap: 0.45rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
}
.rh-filter-select {
    padding: 8px 26px 8px 10px;
    border: 1px solid #dde4f5;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #3d4f7c;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237b87aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 9px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.15s;
    white-space: nowrap;
}
.rh-filter-select:focus {
    outline: none;
    border-color: var(--req-accent, #14a1db);
    box-shadow: var(--req-ring, 0 0 0 3px rgba(20, 161, 219,0.16));
}

/* ── Date Group Divider ── */
.rh-date-group {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--req-muted, #6b5f8a);
    padding: 0.85rem 0 0.4rem 4px;
}
.rh-date-group:first-child { padding-top: 0; }

/* ── Card Row ── */
.rh-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid var(--req-border, #dcf1fb);
    border-radius: var(--radius-md, 12px);
    margin-bottom: 0.5rem;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.rh-card:hover {
    border-color: var(--req-border-strong, #c9e9f7);
    box-shadow: var(--req-e2);
    background: var(--req-accent-wash, #eef8fd);
}
.rh-card--clickable { cursor: pointer; }
.rh-card--clickable:active { background: var(--req-accent-soft, #dcf1fb); }

/* ── Card Left (type + main) ── */
.rh-card-left {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}
.rh-card-main {
    min-width: 0;
    flex: 1;
}
.rh-card-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--req-ink, #1e1b4b);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rh-card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 3px;
    font-size: 0.78rem;
    color: var(--req-muted, #6b5f8a);
}
.rh-card-meta svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    vertical-align: -2px;
    margin-right: 3px;
}
.rh-card-requester,
.rh-card-date {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.rh-card-date { font-variant-numeric: tabular-nums; }
.rh-card-detail {
    margin-top: 5px;
    font-size: 0.8rem;
    color: #5c6b8a;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 520px;
}

/* ── Card Right (status + button) ── */
.rh-card-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

/* ── Type Badges ── */
.rh-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.65rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    min-width: 76px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.rh-type--task {
    background: var(--req-accent-soft, #dcf1fb);
    color: var(--req-accent-strong, #1488c7);
}
.rh-type--subtask {
    background: #e8f4fd;
    color: #1a73b5;
}
.rh-type--extension {
    background: #fef3e2;
    color: #b47318;
}
.rh-type--wrong {
    background: #fee2e2;
    color: #c53030;
}
.rh-type--default {
    background: #f3f5fc;
    color: #54658f;
}

/* ── Status Badges ── */
.rh-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 700;
    white-space: nowrap;
}
.rh-status-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rh-status--approved {
    background: #ecfdf5;
    color: #047857;
}
.rh-status--approved::before { background: #10b981; }
.rh-status--pending {
    background: #fefce8;
    color: #a16207;
}
.rh-status--pending::before { background: #f59e0b; }
.rh-status--rejected {
    background: #fef2f2;
    color: #b91c1c;
}
.rh-status--rejected::before { background: #ef4444; }
.rh-status--default {
    background: #f3f5fc;
    color: #54658f;
}
.rh-status--default::before { background: #94a3b8; }

/* ── Open/View Button ── */
.rh-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: 1px solid #dde4f5;
    border-radius: 9px;
    background: #fff;
    color: #4a5880;
    font-size: 0.79rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.rh-open-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.rh-open-btn:hover {
    background: var(--req-accent-soft, #dcf1fb);
    border-color: var(--req-accent, #14a1db);
    color: var(--req-accent-strong, #1488c7);
    box-shadow: var(--req-e2);
}

/* ── Empty State ── */
.rh-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--req-muted, #6b5f8a);
}
.rh-empty-icon {
    margin: 0 auto 0.85rem;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--req-accent-soft, #dcf1fb);
    display: grid;
    place-items: center;
}
.rh-empty-icon svg {
    width: 30px;
    height: 30px;
    stroke: var(--req-accent, #14a1db);
    opacity: 0.8;
}
.rh-empty h4 {
    margin: 0 0 0.35rem;
    font-size: 0.97rem;
    color: var(--req-ink, #1e1b4b);
}
.rh-empty p {
    margin: 0;
    font-size: 0.84rem;
}

/* ── Pagination ── */
.rh-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.rh-page-info {
    font-size: 0.78rem;
    color: #7080a8;
    font-weight: 600;
}
.rh-page-btns {
    display: flex;
    gap: 4px;
}
.rh-page-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dde4f5;
    border-radius: 8px;
    background: #fff;
    color: #3d4f7c;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rh-page-btn svg {
    width: 15px;
    height: 15px;
}
.rh-page-btn:hover:not(:disabled) {
    background: var(--req-accent-soft, #dcf1fb);
    border-color: var(--req-accent, #14a1db);
    color: var(--req-accent-strong, #1488c7);
}
.rh-page-btn--active {
    background: var(--req-accent, #14a1db) !important;
    border-color: var(--req-accent, #14a1db) !important;
    color: #fff !important;
}
.rh-page-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ── Responsive ── */
@media (max-width: 860px) {
    .rh-toolbar { flex-wrap: wrap; }
    .rh-search-wrap { max-width: 100%; flex-basis: 100%; }
    .rh-filters { flex-wrap: wrap; }
}
@media (max-width: 700px) {
    .rh-toolbar { flex-direction: column; align-items: stretch; }
    .rh-search-wrap { max-width: 100%; }
    .rh-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
        padding: 0.75rem;
    }
    .rh-card-right {
        width: 100%;
        justify-content: space-between;
    }
    .rh-card-title { white-space: normal; }
    .rh-card-detail { max-width: 100%; }
    .rh-card-meta { flex-wrap: wrap; gap: 0.5rem; }
    .rh-type-badge { min-width: auto; font-size: 0.66rem; padding: 0.2rem 0.5rem; }
    .rh-pagination { justify-content: center; }
}

/* ── Sub-page Pill Navigation ── */
.req-subnav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 3px;
    background: var(--req-accent-wash, #eef8fd);
    border: 1px solid var(--req-border, #dcf1fb);
    border-radius: 12px;
    margin-bottom: 0;
}
.req-subnav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;            /* escape the global button{width:100%} rule */
    padding: 7px 14px;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--req-muted, #6b5f8a);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.req-subnav-btn:hover { background: #fff; color: var(--req-ink, #1e1b4b); }
.req-subnav-btn.active {
    background: #fff;
    color: var(--req-accent-strong, #1488c7);
    box-shadow: var(--req-e1);
}
.req-pill-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #e53e3e;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Sub-pages ── */
.req-sub-page { display: none; }
.req-sub-page.active { display: block; }

/* ── Page header row ── */
.req-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* ── Panel card ── */
.req-panel {
    background: #fff;
    border: 1px solid var(--req-border, #dcf1fb);
    border-radius: var(--radius-lg, 14px);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--req-e1);
}
.req-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}
.req-panel-head h4 {
    margin: 0;
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--req-ink, #1e1b4b);
}

/* ── Soft data tables (Stripe-style) — scoped to the module only ──
   Leaves the global table rule untouched; gives the four approval/
   tracking queues hairline dividers, a sticky tinted header, calm
   hover wash, and tabular numerals. */
.extension-requests-card .table-wrap {
    border: 1px solid var(--req-border, #dcf1fb);
    border-radius: var(--radius-md, 10px);
    overflow: auto;
    max-height: 62vh;
    background: #fff;
}
.extension-requests-card .table-wrap table {
    border-spacing: 0;
    width: 100%;
}
.extension-requests-card .table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #faf8ff;
    color: var(--req-muted, #6b5f8a);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--req-border, #dcf1fb);
    white-space: nowrap;
}
.extension-requests-card .table-wrap tbody td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid #f3f0fb;
    color: var(--req-ink, #1e1b4b);
    font-size: 0.84rem;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.extension-requests-card .table-wrap tbody tr:last-child td {
    border-bottom: none;
}
.extension-requests-card .table-wrap tbody tr {
    transition: background var(--motion-fast, 0.12s) var(--ease-standard, ease);
}
.extension-requests-card .table-wrap tbody tr:hover {
    background: var(--req-accent-wash, #eef8fd);
}
.extension-requests-card .table-wrap tbody td:first-child {
    font-weight: 600;
    color: var(--req-ink, #1e1b4b);
}

/* ── Scoped status-badge premium pill + dot (reuses each status's
   existing colour tokens via currentColor; never touches the global
   .status-badge used by HR/Reports). ── */
.extension-requests-card .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.25rem 0.6rem 0.25rem 0.55rem;
    border-radius: var(--radius-pill, 999px);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid transparent;
}
.extension-requests-card .status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
    flex: none;
}

/* ── Two-column grid ── */
.req-two-col {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 1rem;
    align-items: start;
}
.req-two-col--mt { margin-top: 1rem; }
@media (max-width: 860px) {
    .req-two-col { grid-template-columns: 1fr; }
}

/* ── Buttons ── */
.req-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s, box-shadow 0.15s;
}
.req-btn-primary {
    background: var(--req-accent, #14a1db);
    color: #fff;
}
.req-btn-primary:hover { background: var(--req-accent-strong, #1488c7); box-shadow: 0 2px 8px rgba(20, 161, 219,0.3); }
.req-btn-ghost {
    background: transparent;
    color: var(--req-accent-strong, #1488c7);
    border: 1px solid var(--req-border-strong, #c9e9f7);
}
.req-btn-ghost:hover { background: var(--req-accent-soft, #dcf1fb); }
.req-btn-sm { padding: 5px 11px; font-size: 0.77rem; }

/* ── Empty state ── */
.req-empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--req-muted, #6b5f8a);
}
.req-empty-icon {
    font-size: 1.6rem;
    margin: 0 auto 0.7rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--req-accent-soft, #dcf1fb);
    color: var(--req-accent, #14a1db);
    display: grid;
    place-items: center;
}
.req-empty-state h4, .req-empty-state strong { margin: 0 0 0.4rem; color: var(--req-ink, #1e1b4b); font-size: 0.97rem; display: block; }
.req-empty-state p { margin: 0 0 1rem; font-size: 0.85rem; max-width: 38ch; margin-left: auto; margin-right: auto; }

/* ── HR Management – Purple Theme ──────────────────────────────
   Self-contained class-scoped palette: .hrms-card redefines the --hr-* tokens
   to a deeper-purple variant used only inside the HR Management surface.
   This is intentional — global tokens are defined in :root at the top of the
   file; descendants of .hrms-card see the values below instead. */
.hrms-card button {
    width: auto;
}
.hrms-card {
    grid-column: 1 / -1;
    display: grid;
    gap: 1.1rem;
    background: #eef8fd;
    border: 1px solid #ece7ff;
    border-radius: 22px;
    padding: 1.35rem 1.35rem 2.5rem;
    box-shadow: 0 18px 40px rgba(10, 94, 136, 0.08);
    --hr-purple: #1488c7;
    --hr-purple-dark: #0a5e88;
    --hr-purple-light: #4fb8e6;
    --hr-accent: #3bb0e5;
    --hr-green: #10B981;
    --hr-red: #EF4444;
    --hr-orange: #F59E0B;
    --hr-blue: #3B82F6;
    --hr-cyan: #06B6D4;
    --hr-text: #1E1B2E;
    --hr-muted: #6B7280;
    --hr-border: #E5E7EB;
    --hr-card-bg: #FFFFFF;
    --hr-page-bg: #eef8fd;
}
.hrms-top-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0 0.35rem;
}
.hrms-top-left {
    display: grid;
    gap: 0.28rem;
}
.hrms-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1488c7;
    display: none; /* replaced by breadcrumb */
}
/* HR Breadcrumb */
.hr-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    margin-bottom: 0.15rem;
}
.hr-breadcrumb-root {
    color: var(--hr-muted, #6b5f8a);
    font-weight: 500;
}
.hr-breadcrumb-sep {
    color: var(--hr-border, #a9dcf1);
    font-size: 0.8rem;
}
.hr-breadcrumb-current {
    color: var(--hr-purple, #1488c7);
    font-weight: 700;
    text-transform: capitalize;
}
.hrms-top-left h3 {
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.05;
    color: #1e1b2e;
}
.hrms-top-left p {
    margin: 0;
    color: #6b7280;
    font-size: 0.82rem;
}
.hrms-top-right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
    align-items: center;
}
.hrms-field-inline {
    display: grid;
    gap: 0.24rem;
    min-width: 140px;
    color: #5b5f74;
    font-size: 0.72rem;
    font-weight: 600;
}
.hrms-field-inline input {
    border: 1px solid #c9e9f7;
    border-radius: 10px;
    background: #fff;
    color: #1e1b2e;
    padding: 0.58rem 0.8rem;
    font-size: 0.82rem;
}
.hrms-search-inline {
    min-width: 250px;
}
/* HR Management top search bar */
.hrms-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 260px;
}
.hrms-search-icon {
    position: absolute;
    left: 11px;
    color: var(--hr-muted, #8b80b0);
    width: 16px;
    height: 16px;
    pointer-events: none;
    flex-shrink: 0;
}
.hrms-search-input {
    width: 100%;
    border: 1.5px solid var(--hr-border, #c9e9f7);
    border-radius: 10px;
    background: #fff;
    color: var(--hr-text, #1e1b4b);
    padding: 0.6rem 0.9rem 0.6rem 2.2rem;
    font-size: 0.83rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 42px;
    -webkit-appearance: none;
}
.hrms-search-input:focus {
    border-color: var(--hr-blue, #14a1db);
    box-shadow: 0 0 0 3px rgba(20, 161, 219,0.12);
}
.hrms-reload-btn {
    gap: 0.4rem !important;
    white-space: nowrap;
    font-size: 0.78rem !important;
    padding: 0.6rem 0.85rem !important;
    min-height: 42px;
    transition: background 0.2s, border-color 0.2s, opacity 0.2s !important;
}
.hrms-reload-btn.refreshing {
    pointer-events: none;
    opacity: 0.7;
}
.hrms-reload-btn.refreshing svg {
    animation: hrSpinRefresh 0.8s linear infinite;
}
@keyframes hrSpinRefresh {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.hrms-search-input:focus {
    outline: 2px solid var(--hr-blue, #14a1db) !important;
    outline-offset: -1px;
    border-color: var(--hr-blue, #14a1db) !important;
}
.hrms-search-wrap {
    position: relative;
}
.hrms-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 1rem;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
    display: none;
}
.hrms-search-clear:hover {
    color: var(--hr-red, #ef4444);
    background: #fef2f2;
}
.hrms-search-wrap.has-query .hrms-search-clear {
    display: block;
}
.hrms-search-result-count {
    position: absolute;
    right: 38px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.68rem;
    color: var(--hr-muted, #94a3b8);
    pointer-events: none;
    white-space: nowrap;
}
.hrms-btn-primary,
.hrms-btn-outline {
    width: auto !important;
    min-height: 42px;
    padding: 0.65rem 1rem !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    font-size: 0.8rem;
    box-shadow: none !important;
    transform: none !important;
}
.hrms-btn-primary {
    background: linear-gradient(135deg, var(--hr-blue, #14a1db), #1488c7) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.hrms-btn-outline {
    background: #fff !important;
    color: var(--hr-blue, #14a1db) !important;
    border: 1.5px solid var(--hr-border, #c9e9f7) !important;
    transition: background 0.15s, border-color 0.15s !important;
}
.hrms-btn-outline:hover {
    background: var(--hr-card-bg, #faf9ff) !important;
    border-color: var(--hr-blue, #14a1db) !important;
    filter: none !important;
    transform: none !important;
}
.hrms-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    min-height: 0;
}
.hrms-sidebar {
    display: none;
}
.hrms-nav-item {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    color: rgba(255,255,255,0.76) !important;
    border-radius: 12px !important;
    padding: 0.72rem 0.8rem !important;
    display: flex !important;
    align-items: center;
    gap: 0.68rem;
    justify-content: flex-start;
    font-weight: 600;
    font-size: 0.82rem;
    position: relative;
    box-shadow: none !important;
    transform: none !important;
    transition: background 0.2s ease, padding-left 0.2s ease;
}
.hrms-nav-item svg {
    flex: 0 0 auto;
}
.hrms-nav-item:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
}
.hrms-nav-item.active {
    background: rgba(255,255,255,0.16) !important;
    color: #fff !important;
}
.hrms-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: #a9dcf1;
}
.hrms-nav-divider {
    height: 1px;
    background: rgba(255,255,255,0.12);
    margin: 0.35rem 0.25rem;
}
.hrms-nav-badge {
    margin-left: auto;
    min-width: 1.2rem;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    background: rgba(196,181,253,0.24);
    color: #eef8fd;
    font-size: 0.62rem;
    line-height: 1.2;
    text-align: center;
}
.hrms-nav-badge.green { background: rgba(16,185,129,0.22); color: #bbf7d0; }
.hrms-nav-badge.purple { background: rgba(59, 176, 229,0.22); color: #c9e9f7; }
.hrms-content {
    min-width: 0;
    display: grid;
    /* minmax(0,1fr) caps the pane track at the container width. Without it
       the auto track inherits each pane's intrinsic min-content width — the
       Attendance summary table (min-width: 920px) dragged the whole pane to
       ~970px on phones, stretching stat cards and filters 2.5x off-screen. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}
.hrms-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--hr-border);
}
.hrms-head h3 {
    margin: 0 0 0.15rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--hr-text);
}
.hrms-head p {
    margin: 0;
    color: var(--hr-muted);
    font-size: 0.82rem;
}
.hrms-quick-actions,
.hrms-inline-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.hrms-quick-actions button,
.hrms-inline-actions button {
    width: auto !important;
    background: var(--hr-purple, #1488c7) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.48rem 1.1rem !important;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transform: none !important;
    letter-spacing: 0.01em;
    transition: background 0.15s, box-shadow 0.15s;
}
.hrms-quick-actions button:hover,
.hrms-inline-actions button:hover {
    background: var(--hr-purple-dark, #0e7bb0) !important;
    box-shadow: 0 2px 8px rgba(20, 161, 219,0.18);
}
.hrms-quick-actions button.ghost,
.hrms-inline-actions button.ghost {
    background: #fff !important;
    color: #1488c7 !important;
    border: 1px solid #c9e9f7 !important;
}

/* ── Stat Cards ───────────────────────────────────────────── */
.hrms-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}
.hrms-stat {
    background: var(--hr-card-bg);
    border: 1px solid var(--hr-border);
    border-radius: 14px;
    padding: 1rem;
    position: relative;
    overflow: hidden;
}
.hrms-stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 14px 14px 0 0;
}
.hrms-stat[data-color="blue"]::before   { background: var(--hr-blue); }
.hrms-stat[data-color="green"]::before  { background: var(--hr-green); }
.hrms-stat[data-color="orange"]::before { background: var(--hr-orange); }
.hrms-stat[data-color="red"]::before    { background: var(--hr-red); }
.hrms-stat[data-color="purple"]::before { background: var(--hr-purple); }
.hrms-stat[data-color="cyan"]::before   { background: var(--hr-cyan); }
.hrms-stat label {
    display: block;
    font-size: 0.69rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hr-muted);
    font-weight: 500;
    margin-bottom: 0.35rem;
}
.hrms-stat strong {
    font-size: 1.55rem;
    font-weight: 700;
    font-family: 'DM Mono', 'Menlo', monospace;
}
.hrms-stat[data-color="blue"] strong   { color: var(--hr-blue); }
.hrms-stat[data-color="green"] strong  { color: var(--hr-green); }
.hrms-stat[data-color="orange"] strong { color: var(--hr-orange); }
.hrms-stat[data-color="red"] strong    { color: var(--hr-red); }
.hrms-stat[data-color="purple"] strong { color: var(--hr-purple); }
.hrms-stat[data-color="cyan"] strong   { color: var(--hr-cyan); }

/* ── Tab Bar ──────────────────────────────────────────────── */
.hrms-tab-bar {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.45rem;
    border-bottom: 1px solid var(--hr-border);
    padding-bottom: 0;
}
.hrms-tab {
    width: auto !important;
    border: none !important;
    background: transparent !important;
    color: var(--hr-muted) !important;
    border-radius: 0 !important;
    padding: 0.55rem 1rem !important;
    font-weight: 600;
    font-size: 0.82rem;
    border-bottom: 2px solid transparent !important;
    transition: color 0.15s, border-color 0.15s;
    cursor: pointer;
    transform: none !important;
}
.hrms-tab:hover {
    color: var(--hr-purple) !important;
    filter: none !important;
    transform: none !important;
}
.hrms-tab.active {
    background: transparent !important;
    color: var(--hr-purple) !important;
    border-bottom: 2px solid var(--hr-purple) !important;
}
.hrms-pane {
    display: block;
}
.hrms-pane.hidden {
    display: none;
}

/* ── Two-Column Layout ────────────────────────────────────── */
.hrms-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
/* Left column stack: Balance + Comp-Off stack vertically with no gaps */
.hr-leave-left-stack {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
/* Give payroll table panel more room */
#hrPanePayroll .hrms-two-col {
    grid-template-columns: 340px 1fr;
}

/* ── Panels (Cards) ───────────────────────────────────────── */
.hrms-panel {
    border: 1px solid var(--hr-border);
    border-radius: 16px;
    background: var(--hr-card-bg);
    padding: 1.15rem;
}
.hrms-panel-head {
    margin-bottom: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem;
}
.hrms-panel-head p {
    flex-basis: 100%;
}
.hrms-panel-head h4 {
    margin: 0 0 0.15rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--hr-text);
}
.hrms-panel-head p,
.hrms-helper {
    margin: 0;
    color: var(--hr-muted);
    font-size: 0.75rem;
}

/* ── HR Table ─────────────────────────────────────────────── */
.hrms-panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hrms-panel table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    min-width: 600px;
}
.hrms-panel table th {
    text-align: left;
    color: var(--hr-muted);
    font-weight: 600;
    font-size: 0.69rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 0 0.6rem;
    border-bottom: 1px solid var(--hr-border);
}
.hrms-panel table td {
    padding: 0.6rem 0;
    border-bottom: 1px solid #F3F4F6;
    vertical-align: middle;
}
.hrms-panel table tr:last-child td {
    border-bottom: none;
}

/* ── Employee Row with Avatar ─────────────────────────────── */
.hr-emp-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.hr-emp-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.hr-emp-name {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--hr-text);
}
.hr-emp-dept {
    font-size: 0.69rem;
    color: var(--hr-muted);
}

/* ── Status Pills ─────────────────────────────────────────── */
.hr-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.6rem;
    border-radius: 20px;
    font-size: 0.69rem;
    font-weight: 600;
    /* Neutral default so zero-value pills stay visible as equal-sized tokens
       in data tables. Color modifiers (.present, .late, etc.) still override. */
    background: #F1F5F9;
    color: #94A3B8;
}
.hr-pill.present  { background: #D1FAE5; color: #065F46; }
.hr-pill.absent   { background: #FEE2E2; color: #991B1B; }
.hr-pill.late     { background: #FEF3C7; color: #92400E; }
.hr-pill.leave    { background: #dcf1fb; color: #0a5e88; }
.hr-pill.pending  { background: #FEF3C7; color: #92400E; }
.hr-pill.approved { background: #D1FAE5; color: #065F46; }
.hr-pill.rejected { background: #FEE2E2; color: #991B1B; }
.hr-pill.active   { background: #DBEAFE; color: #1E40AF; }
.hr-pill.warn     { background: #FEF3C7; color: #92400E; }
.hr-pill.muted    { background: #F1F5F9; color: #64748B; }
.hr-pill.generated{ background: #dcf1fb; color: #0a5e88; }
.hr-pill.paid     { background: #D1FAE5; color: #065F46; }
.hr-pill.closed   { background: #F3F4F6; color: #6B7280; }
.hr-pill.on-hold  { background: #FEF3C7; color: #92400E; }
.hr-pill.skipped  { background: #F3F4F6; color: #6B7280; }
.hr-pill.selected { background: #DCFCE7; color: #065F46; }
.hr-pill.half-day     { background: #FFEDD5; color: #9A3412; }
.hr-pill.incomplete   { background: #FEE2E2; color: #991B1B; }
.hr-pill.on-duty      { background: #E0F2FE; color: #0C4A6E; }
.hr-pill.wfh          { background: #E0E7FF; color: #3730A3; }
.hr-pill.comp-off-work{ background: #CFFAFE; color: #155E75; }
.hr-pill.week-off     { background: #F1F5F9; color: #64748B; }
.hr-pill.paid-holiday { background: #FAE8FF; color: #86198F; }
/* Leave-type-specific pills (shown instead of generic "On Leave") */
.hr-pill.leave-cl     { background: #DBEAFE; color: #1E40AF; }
.hr-pill.leave-ml     { background: #FCE7F3; color: #9D174D; }
.hr-pill.leave-el     { background: #D1FAE5; color: #065F46; }
.hr-pill.leave-rh     { background: #FEF3C7; color: #92400E; }
.hr-pill.leave-co     { background: #CFFAFE; color: #155E75; }

/* Medical proof attachment link on ML leave cards */
.hr-leave-proof {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin-top: 4px;
}
.hr-proof-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #1488c7;
    font-weight: 600;
    text-decoration: none;
    padding: 3px 10px;
    background: #eef8fd;
    border: 1px solid #c9e9f7;
    border-radius: 6px;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.hr-proof-link:hover {
    background: #dcf1fb;
    border-color: #a9dcf1;
}
.hr-proof-link svg { flex-shrink: 0; }
.hr-proof-time {
    font-size: 10px;
    color: #94a3b8;
    margin-left: 4px;
}
.hr-proof-missing {
    color: #dc2626;
    font-weight: 600;
    font-size: 11px;
    gap: 5px;
}
.hr-proof-missing svg { color: #dc2626; }

/* Skill assessment table styling */
.iv-skill-table { table-layout: fixed; }
.iv-skill-table th,
.iv-skill-table td { border-bottom: 1px solid #f3f4f6; }
.iv-skill-table tbody tr:hover { background: #fafaff; }
.iv-skill-table thead tr:hover { background: #f9fafb; }
.iv-skill-table input[type="number"] { transition: border-color 0.15s, box-shadow 0.15s; -moz-appearance: textfield; }
.iv-skill-table input[type="number"]::-webkit-outer-spin-button,
.iv-skill-table input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.iv-skill-table input[type="number"]:focus { outline: none; border-color: #14a1db; box-shadow: 0 0 0 2.5px rgba(20, 161, 219,0.15); background: #fff; }
.iv-skill-table input[type="number"]:not(:placeholder-shown) { background: #f0fdf4; border-color: #86efac; }

/* Interview modal independent scroll columns */
#interviewDetailModal > div:last-child > div:nth-child(2) > div { scrollbar-width: thin; scrollbar-color: #d1d5db transparent; }
#interviewDetailModal > div:last-child > div:nth-child(2) > div::-webkit-scrollbar { width: 5px; }
#interviewDetailModal > div:last-child > div:nth-child(2) > div::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
#interviewDetailModal > div:last-child > div:nth-child(2) > div::-webkit-scrollbar-track { background: transparent; }

/* Grievance tracker enhancements */
.hr-grievance-item { transition: background 0.15s; }
.hr-grievance-item:hover { background: var(--hr-card-bg, #faf9ff); }
.hr-grievance-detail { border-top: 1px solid var(--hr-border, #dcf1fb); margin-top: 0.5rem; padding-top: 0.6rem; }
#hrGrievanceFilters .hr-grief-filter {
    cursor: pointer;
    font-size: 0.78rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--hr-border, #dcf1fb);
    background: var(--hr-card-bg, #faf9ff);
    color: #4a3f6b;
    font-weight: 600;
    opacity: 1;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
#hrGrievanceFilters .hr-grief-filter:hover { background: #f3edff; border-color: #a9dcf1; }
#hrGrievanceFilters .hr-grief-filter.active {
    background: #dcf1fb;
    border-color: #a9dcf1;
    color: #0a5e88;
    outline: none;
}

/* Grievance action modal */
#hrGrievanceActionModal .hrms-form-stack { gap: 1rem; }
#hrGrievanceActionModal .hrms-form-stack label { font-weight: 500; }
#hrGrievanceActionModal .hrms-form-stack textarea { resize: vertical; min-height: 80px; }
#hrGrievanceActionModal .hr-alloc-actions { gap: 0.6rem; }
#hrGrievanceActionModal .hrms-btn-primary { flex: 1.4; padding: 0.6rem 1rem; font-size: 0.85rem; font-weight: 600; }
#hrGrievanceActionModal .hrms-btn-outline { flex: 1; padding: 0.6rem 1rem; font-size: 0.85rem; }

/* Multi-level approval statuses */
.hr-pill.pending-hod        { background: #FEF3C7; color: #92400E; }
.hr-pill.pending-principal  { background: #E0F2FE; color: #0C4A6E; }
.hr-pill.pending-hr         { background: #DBEAFE; color: #1E40AF; }
.hr-pill.hod-approved       { background: #E0E7FF; color: #3730A3; }

/* Approval flow tag */
.hr-flow-tag {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 500;
    color: var(--hr-muted, #94a3b8);
    background: var(--hr-bg, #f8fafc);
    border: 1px solid var(--hr-border, #e2e8f0);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

/* Approval trail inside leave request items */
.hr-approval-trail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-top: 0.45rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--hr-border, #e2e8f0);
}
.hr-trail-step {
    font-size: 0.68rem;
    color: var(--hr-fg, #334155);
}
.hr-trail-role {
    font-weight: 600;
    color: var(--hr-purple, #1488c7);
}
.hr-trail-time {
    font-size: 0.62rem;
    color: var(--hr-muted, #94a3b8);
}
.hr-trail-note {
    font-size: 0.68rem;
    font-style: italic;
    color: var(--hr-muted, #64748b);
}

/* Approval timeline — rendered above the step-by-step trail */
.hr-approval-timeline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    margin-bottom: 0.35rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px dashed var(--hr-border, #e2e8f0);
    font-size: 0.7rem;
}
.hr-timeline-step {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-weight: 600;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}
.hr-timeline-step.done {
    background: #D1FAE5;
    color: #065F46;
    border-color: #A7F3D0;
}
.hr-timeline-step.current {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FDE68A;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}
.hr-timeline-step.rejected {
    background: #FEE2E2;
    color: #991B1B;
    border-color: #FCA5A5;
}
.hr-timeline-step.pending {
    background: #f8fafc;
    color: #94a3b8;
    border-color: #e2e8f0;
}
.hr-timeline-sep {
    color: #94a3b8;
    font-weight: 700;
}
.hr-btn-reject-confirm {
    background: #DC2626 !important;
    color: #fff !important;
    border-color: #DC2626 !important;
}
.hr-btn-reject-confirm:hover {
    background: #B91C1C !important;
}

/* ── Comp-Off Approvals Pane ────────────────────────────────
   The global `input, select, textarea, button { width: 100%; min-width: 0 }`
   reset (~line 773) collapses the flex filter bar into a vertical stack and
   forces per-row ✓/✗ action buttons to take the full table-cell width. Inline
   styles handle padding/border/radius — only the layout sizing needs unsetting. */
#hrPaneCompoff input,
#hrPaneCompoff select,
#hrPaneCompoff button {
    width: auto;
    max-width: none;
}
#hrPaneCompoff .hr-compoff-filters input[type="search"] { flex: 1; min-width: 220px; }
#hrPaneCompoff .hr-compoff-stats > div { flex: 1; min-width: 140px; }
#hrPaneCompoff table { width: 100%; }
#hrPaneCompoff table th,
#hrPaneCompoff table td { vertical-align: middle; }
#hrPaneCompoff table tbody tr:hover td { background: #f9fafb; }

/* ── Attendance Module (Lumina-Inspired Redesign) ────────── */

/* Bento Metrics Row */
#hrPaneAttendance .att-stats-strip {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 0.6rem;
    margin-bottom: 1rem;
}
#hrPaneAttendance .att-stat {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0.85rem 0.9rem 0.7rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #f1f0f5;
    border-bottom: 3.5px solid #d1d0d9;
    transition: transform 0.2s, box-shadow 0.2s;
    min-width: 0;
}
#hrPaneAttendance .att-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
#hrPaneAttendance .att-stat-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
#hrPaneAttendance .att-stat label {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hr-muted, #8b80b0);
    display: block;
    white-space: nowrap;
}
#hrPaneAttendance .att-stat strong {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--hr-text, #1e1b4b);
    line-height: 1.2;
}
#hrPaneAttendance .att-stat-icon {
    flex-shrink: 0;
    opacity: 0.15;
}

/* Bento card border colors */
#hrPaneAttendance .att-stat[data-color="blue"]   { border-bottom-color: var(--hr-blue, #14a1db); }
#hrPaneAttendance .att-stat[data-color="green"]  { border-bottom-color: #10b981; }
#hrPaneAttendance .att-stat[data-color="orange"] { border-bottom-color: #f59e0b; }
#hrPaneAttendance .att-stat[data-color="sky"]    { border-bottom-color: #0ea5e9; }
#hrPaneAttendance .att-stat[data-color="indigo"] { border-bottom-color: #14a1db; }
#hrPaneAttendance .att-stat[data-color="purple"] { border-bottom-color: #3bb0e5; }
#hrPaneAttendance .att-stat[data-color="slate"]  { border-bottom-color: #94a3b8; }
#hrPaneAttendance .att-stat[data-color="teal"]   { border-bottom-color: #0d9488; }
#hrPaneAttendance .att-stat[data-color="cyan"]   { border-bottom-color: #06b6d4; }
#hrPaneAttendance .att-stat[data-color="red"]    { border-bottom-color: #ef4444; }

/* Icon tinting per color */
#hrPaneAttendance .att-stat[data-color="blue"] .att-stat-icon   { color: var(--hr-blue, #14a1db); }
#hrPaneAttendance .att-stat[data-color="green"] .att-stat-icon  { color: #10b981; }
#hrPaneAttendance .att-stat[data-color="orange"] .att-stat-icon { color: #f59e0b; }
#hrPaneAttendance .att-stat[data-color="sky"] .att-stat-icon    { color: #0ea5e9; }
#hrPaneAttendance .att-stat[data-color="indigo"] .att-stat-icon { color: #14a1db; }
#hrPaneAttendance .att-stat[data-color="purple"] .att-stat-icon { color: #3bb0e5; }
#hrPaneAttendance .att-stat[data-color="slate"] .att-stat-icon  { color: #94a3b8; }
#hrPaneAttendance .att-stat[data-color="teal"] .att-stat-icon   { color: #0d9488; }
#hrPaneAttendance .att-stat[data-color="cyan"] .att-stat-icon   { color: #06b6d4; }
#hrPaneAttendance .att-stat[data-color="red"] .att-stat-icon    { color: #ef4444; }

/* Legacy SVG color compat (JS uses .att-stat svg selectors) */
.att-stat[data-color="blue"] svg   { color: var(--hr-blue, #14a1db); }
.att-stat[data-color="green"] svg  { color: #10b981; }
.att-stat[data-color="orange"] svg { color: #f59e0b; }
.att-stat[data-color="purple"] svg { color: #3bb0e5; }
.att-stat[data-color="cyan"] svg   { color: #06b6d4; }
.att-stat[data-color="red"] svg    { color: #ef4444; }
.att-stat[data-color="teal"] svg   { color: #0d9488; }
.att-stat[data-color="indigo"] svg { color: #14a1db; }

/* Filter Bar — Flexbox layout */
#hrPaneAttendance .att-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: flex-end;
    padding: 0.85rem 1rem;
    border-radius: 18px;
    background: #f5f4f8;
    margin-bottom: 1rem;
}
#hrPaneAttendance .att-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 105px;
    min-width: 95px;
    max-width: 170px;
}
#hrPaneAttendance .att-filter-field label {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hr-muted, #8b80b0);
    margin-left: 0.15rem;
    white-space: nowrap;
}
#hrPaneAttendance .att-filter-field select,
#hrPaneAttendance .att-filter-field input[type="date"] {
    padding: 0.45rem 0.5rem;
    border: none;
    border-radius: 10px;
    font-size: 0.76rem;
    font-weight: 500;
    background: #fff;
    color: var(--hr-text, #1e1b4b);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s;
    height: 2.15rem;
    width: 100%;
}
#hrPaneAttendance .att-filter-field select:focus,
#hrPaneAttendance .att-filter-field input[type="date"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(20, 161, 219, 0.2);
}

/* Filter Actions (Load + View Toggle + Download) — always horizontal */
#hrPaneAttendance .att-filter-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    margin-left: auto;
}
#hrPaneAttendance .att-load-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 1rem;
    height: 2.15rem;
    border: none;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--hr-blue, #14a1db);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(20, 161, 219, 0.25);
    white-space: nowrap;
}
#hrPaneAttendance .att-load-btn:hover {
    background: #1276c2;
    box-shadow: 0 4px 12px rgba(20, 161, 219, 0.35);
}
#hrPaneAttendance .att-load-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}
#hrPaneAttendance .att-load-btn svg { flex-shrink: 0; }
#hrPaneAttendance .att-load-btn-inline {
    width: 100%;
    justify-content: center;
    height: 2.15rem;
    padding: 0 0.85rem;
}
#hrPaneAttendance .att-filter-field[hidden] { display: none !important; }
#hrPaneAttendance .att-filter-range { flex: 1 1 180px; min-width: 160px; max-width: 260px; }
#hrPaneAttendance .att-stats-hint {
    margin: -0.25rem 0 0.9rem;
    padding: 0.55rem 0.9rem;
    background: #eef2ff;
    color: #3730a3;
    border-radius: 10px;
    font-size: 0.78rem;
    border: 1px solid #e0e7ff;
}
.att-range-info {
    font-size: 0.72rem;
    color: var(--hr-muted, #8b80b0);
    padding: 0.25rem 0;
    font-style: italic;
}

/* Month Picker */
.hrms-month-picker {
    /* width:auto so it doesn't inherit the global input{width:100%} and hog a
       full row in the flex-wrap header (which stacked search/month/refresh tall). */
    width: auto;
    min-width: 150px;
    padding: 0.45rem 0.6rem;
    border: none;
    border-radius: 10px;
    font-size: 0.78rem;
    background: #fff;
    color: var(--hr-text, #1e1b4b);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    height: 2.25rem;
}
.hrms-month-picker:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(20, 161, 219, 0.2);
}

/* View Toggle */
#hrPaneAttendance .att-view-toggle {
    display: flex;
    gap: 0.2rem;
    background: #e8e6ee;
    border-radius: 10px;
    padding: 0.2rem;
}
#hrPaneAttendance .att-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--hr-muted, #8b80b0);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    min-height: 0;
}
#hrPaneAttendance .att-view-btn:hover { background: rgba(255,255,255,0.5); }
#hrPaneAttendance .att-view-btn.active {
    background: #fff;
    color: var(--hr-blue, #14a1db);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Download Button */
#hrPaneAttendance .att-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    background: #fff;
    color: var(--hr-text, #1e1b4b);
    border: 1px solid #e1dfe8;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    padding: 0;
    min-height: 0;
}
#hrPaneAttendance .att-download-btn:hover {
    background: #eef8fd;
    border-color: var(--hr-blue, #14a1db);
    color: var(--hr-blue, #14a1db);
}
#hrPaneAttendance .att-download-btn svg { flex-shrink: 0; }

/* Date Group Headers */
.att-date-group-header td {
    background: #eef8fd;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hr-muted, #8b80b0);
    padding: 0.6rem 0.75rem !important;
    border-bottom: 2px solid var(--hr-border, #dcf1fb);
    border-top: 1px solid var(--hr-border, #dcf1fb);
}
.att-date-group-header td::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hr-blue, #14a1db);
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Flex Toggle Button */
.att-flex-toggle {
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: var(--hr-muted, #8b80b0);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
    white-space: nowrap;
}
.att-flex-toggle:hover {
    border-color: var(--hr-blue, #14a1db);
    color: var(--hr-blue, #14a1db);
}
.att-flex-toggle.att-flex-on {
    background: #14a1db;
    color: white;
    border-color: #14a1db;
}
.att-flex-toggle.att-flex-on:hover {
    background: #1276c2;
    color: white;
}

/* Detail Table */
#hrPaneAttendance .att-detail-panel {
    overflow: visible;
    border-radius: 18px;
    border: 1px solid #f1f0f5;
}
.att-table-wrap {
    overflow-x: auto;
}

/* ── Attendance Monthly Summary — 8px design system ───────────── */

/* Panel header: title block + checkbox share a baseline rhythm. */
.att-summary-panel {
    padding: 24px;
}
.att-summary-head {
    display: flex;
    justify-content: space-between;
    align-items: center;   /* checkbox vertically centered with title block */
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.att-summary-titleblock h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--hr-text);
    line-height: 1.3;
}
.att-summary-titleblock p {
    margin: 0;
    font-size: 12px;
    color: var(--hr-muted, #8b80b0);
    line-height: 1.4;
}
.att-summary-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #475569;
    white-space: nowrap;
    cursor: pointer;
}
.att-summary-toggle input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.att-summary-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 340px);
    min-height: 200px;
    border-radius: 8px;
    border: 1px solid var(--hr-border, #dcf1fb);
    /* Visible, styled scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #a9dcf1 #eef8fd;
}
.att-summary-table-wrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.att-summary-table-wrap::-webkit-scrollbar-track {
    background: #eef8fd;
    border-radius: 4px;
}
.att-summary-table-wrap::-webkit-scrollbar-thumb {
    background: #a9dcf1;
    border-radius: 4px;
}
.att-summary-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #4fb8e6;
}
/* Selectors are scoped to `.att-summary-panel .att-summary-table` (specificity
   0,2,1) so they beat the generic `.hrms-panel table th/td` rule (0,1,2) that
   otherwise forces headers to text-align: left and zeros out horizontal padding
   — that mismatch is why the header labels never lined up with the data pills. */
.att-summary-panel .att-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
    min-width: 920px;
}
.att-summary-panel .att-summary-table th,
.att-summary-panel .att-summary-table td {
    box-sizing: border-box;
    padding: 16px 8px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    height: 56px;
}
.att-summary-panel .att-summary-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}
.att-summary-panel .att-summary-table th {
    height: 48px;
    color: var(--hr-muted, #8b80b0);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    background: #eef8fd;
    border-bottom: 2px solid var(--hr-border, #dcf1fb);
    box-shadow: 0 1px 0 var(--hr-border, #dcf1fb);
}
.att-summary-panel .att-summary-table td {
    border-bottom: 1px solid #f1f5f9;
}
.att-summary-panel .att-summary-table th:first-child,
.att-summary-panel .att-summary-table td:first-child {
    text-align: left;
    padding-left: 16px;
    padding-right: 32px; /* reserves room for the absolutely-positioned drilldown hint */
    /* Identity column carries avatar + name + dept — the equal-width split
       from table-layout:fixed across 12 columns leaves only ~77px here,
       causing long names (e.g. "Dr. V. Vijaya Chamundeeswaran") to bleed
       into the Present column. Pin it wide enough for realistic names. */
    width: 280px;
    position: relative; /* anchor for .att-summary-drilldown-hint overlay */
}
/* Truncate name / dept inside the fixed identity column instead of letting
   them overflow horizontally. `min-width: 0` on the flex item is the
   usual "let me shrink below content size" escape hatch that flexbox
   needs before ellipsis can kick in. */
.att-summary-panel .att-summary-table .hr-emp-row {
    min-width: 0;
}
.att-summary-panel .att-summary-table .hr-emp-row > :nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.att-summary-panel .att-summary-table .hr-emp-name,
.att-summary-panel .att-summary-table .hr-emp-dept {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Lift the drilldown hint out of the flex row so it doesn't reserve ~90px
   of horizontal space when invisible — that was crushing names to
   unreadable 4-char stubs ("AARU...", "ABINA..."). Absolute positioning
   keeps the hover affordance without stealing space from identity text. */
.att-summary-panel .att-summary-table .att-summary-drilldown-hint {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.att-summary-panel .att-summary-table td .hr-pill,
.att-summary-panel .att-summary-table td .att-tag {
    min-width: 36px;
    min-height: 24px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    border-radius: 12px;
}
.att-summary-panel .att-summary-table td .marked-cell {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: 'DM Mono', ui-monospace, monospace;
    font-weight: 600;
    font-size: 13px;
}
.att-summary-table tr:last-child td { border-bottom: none; }
/* Clickable row styles */
.att-summary-table tbody tr {
    cursor: pointer;
    transition: background 0.12s;
}
.att-summary-table tbody tr:hover td {
    background: #f0ebff;
}
.att-summary-table tbody tr:active td {
    background: #e5d9ff;
}
/* Subtle drill-down hint icon on the last cell */
.att-summary-drilldown-hint {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    opacity: 0;
    font-size: 0.7rem;
    color: var(--hr-muted, #8b80b0);
    transition: opacity 0.15s;
}
.att-summary-table tbody tr:hover .att-summary-drilldown-hint {
    opacity: 1;
}
.att-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    min-width: 820px;
}
.att-detail-table th {
    text-align: left;
    color: var(--hr-muted, #8b80b0);
    font-weight: 600;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.6rem 0.5rem 0.65rem;
    border-bottom: 1px solid var(--hr-border, #dcf1fb);
    white-space: nowrap;
}
.att-detail-table td {
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}
.att-detail-table tr:last-child td { border-bottom: none; }
.att-detail-table tbody tr:hover td {
    background: #faf9ff;
}

/* Time & Hours cells */
.att-mono {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #4338ca;
}
.att-time-val {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--hr-text, #1e1b4b);
}
.att-time-val.att-flag-late { color: #dc2626; }
.att-time-val.att-flag-early { color: #d97706; }
.att-hours-cell { white-space: nowrap; }

/* Late/Early Flag Tags */
.att-flag {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.08rem 0.4rem;
    border-radius: 4px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #fef2f2;
    color: #dc2626;
    vertical-align: middle;
}
.att-flag.att-flag-warn {
    background: #fffbeb;
    color: #d97706;
}
.att-expected-time {
    font-size: 0.6rem;
    color: #64748b;
    margin-top: 0.15rem;
    font-weight: 500;
    white-space: nowrap;
}
.att-perm-blocked {
    display: inline-block;
    color: #cbd5e1;
    font-size: 0.8rem;
    cursor: help;
}
.att-perm-credit {
    font-size: 0.6rem;
    color: #1488c7;
    font-weight: 600;
    margin-top: 0.15rem;
    white-space: nowrap;
}
.att-emp-clickable {
    cursor: pointer;
    transition: background-color 0.15s;
    border-radius: 6px;
    padding: 2px 4px;
    margin: -2px -4px;
}
.att-emp-clickable:hover {
    background-color: #f1f5f9;
}

/* ═══ Employee Cycle Drill-Down Modal ═══ */
.emp-cycle-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(2px);
    z-index: 9700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: empCycleFadeIn 0.18s ease-out;
}
@keyframes empCycleFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.emp-cycle-modal {
    background: #ffffff;
    border-radius: 14px;
    width: min(1040px, 100%);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.25), 0 10px 25px rgba(15, 23, 42, 0.1);
    overflow: hidden;
    animation: empCycleSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes empCycleSlideIn {
    from { transform: translateY(12px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* ─────────────────────────────────────────────
 * Design system: all sections share 28px horizontal padding (--emp-pad-x)
 * so the header, stats bar, and table columns all sit on the same gutter.
 * Vertical rhythm uses 8px multiples.
 * ───────────────────────────────────────────── */
.emp-cycle-modal {
    --emp-pad-x: 28px;
}

/* Header */
.emp-cycle-header {
    padding: 22px var(--emp-pad-x) 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
    background: linear-gradient(to bottom, #ffffff, #fafbfc);
}
.emp-cycle-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 17px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
    letter-spacing: 0.5px;
}
.emp-cycle-heading {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}
.emp-cycle-name {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 2px 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.emp-cycle-meta {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}
.emp-cycle-meta-dot {
    margin: 0 6px;
    color: #cbd5e1;
}
.emp-cycle-range {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f1f5f9;
    padding: 3px 9px;
    border-radius: 12px;
    font-weight: 500;
}
.emp-cycle-range svg {
    color: #64748b;
    width: 12px;
    height: 12px;
}
.emp-cycle-close {
    background: none;
    border: 1px solid #e2e8f0;
    color: #64748b;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.emp-cycle-close:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}

/* Stats — hero-sized values, color-coded, uniform height, icon as subtle accent */
.emp-cycle-stats {
    padding: 11px var(--emp-pad-x) 12px;
    border-bottom: 1px solid #f1f5f9;
    display: grid;
    /* All 10 KPI cards on a single compact row so the attendance rows below
       rise into view (was repeat(5) → 2 stacked rows ~230px tall). */
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 7px;
    flex-shrink: 0;
    background: #fafbfc;
    align-items: stretch;
}
.emp-stat-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 7px 8px;
    transition: background-color 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s, opacity 0.18s;
    min-width: 0;
    min-height: 0;
    position: relative;
    overflow: hidden;
}
/* Compact single-row variant: drop the icon + the tiny sub-annotation
   ("/ 2 mo", "days") and tighten value/label so 10 cards fit one clean
   line inside the 1040px modal. */
.emp-cycle-stats .emp-stat-icon { display: none; }
.emp-cycle-stats .emp-stat-sub { display: none; }
.emp-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    opacity: 0.85;
}
.emp-stat-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}
.emp-stat-card-clickable {
    cursor: pointer;
    user-select: none;
}
.emp-stat-card-clickable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.emp-stat-card-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, #ffffff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}
.emp-cycle-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 14px;
    margin: 0 0 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #1e40af;
    font-size: 13px;
    line-height: 1.2;
    max-width: 100%;
}
.emp-cycle-filter-chip[hidden] {
    display: none;
}
.emp-cycle-filter-chip > span {
    white-space: nowrap;
    flex: 0 1 auto;
}
.emp-cycle-filter-chip-clear {
    flex: 0 0 auto;
    background: #ffffff;
    border: 1px solid #93c5fd;
    color: #1e40af;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    width: auto;
    white-space: nowrap;
}
.emp-cycle-filter-chip-clear:hover {
    background: #dbeafe;
}
.emp-cycle-unlock-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
    padding: 6px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 12px;
    color: #475569;
}
.emp-cycle-unlock-hint {
    line-height: 1.2;
}
.emp-cycle-unlock-btn {
    flex: 0 0 auto;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    width: auto;
    white-space: nowrap;
}
.emp-cycle-unlock-btn:hover {
    background: #f1f5f9;
}
.emp-cycle-unlock-btn.is-active {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}
.emp-cycle-unlock-btn.is-active:hover {
    background: #fde68a;
}

/* Leave-type row — standalone below the main grid so the grid column count
   stays stable regardless of whether On Leave is selected. Appears only
   when Status transitions to On Leave. */
.emp-cycle-leave-type-row {
    margin: -4px 0 12px;
    padding: 10px 12px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}
.emp-cycle-leave-type-label {
    font-size: 11px;
    color: #075985;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 6px;
}
.emp-cycle-leave-type-hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: #0369a1;
    font-size: 11px;
}
.emp-cycle-leave-type-select {
    width: 100%;
    max-width: 360px;
    padding: 7px 9px;
    border: 1px solid #7dd3fc;
    border-radius: 6px;
    font-size: 12px;
    background: #ffffff;
    color: #0f172a;
    height: 34px;
    box-sizing: border-box;
    font-family: inherit;
}
.emp-cycle-leave-type-select:focus {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18);
}
.emp-stat-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 6px;
    margin-top: 2px;
}
.emp-stat-icon svg {
    width: 12px;
    height: 12px;
}
.emp-stat-body {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
}
.emp-stat-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}
.emp-stat-label {
    font-size: 8.5px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
    margin-top: 2px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.emp-stat-sub {
    color: #94a3b8;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 8px;
    margin-left: 2px;
}

/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .emp-stat-icon { background: rgba(20, 161, 219, 0.14); }
}

/* Table */
.emp-cycle-table-wrap {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.emp-cycle-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}
.emp-cycle-table thead {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 2;
    box-shadow: inset 0 -1px 0 #e2e8f0;
}
.emp-cycle-table thead th {
    text-align: left;
    padding: 14px 14px;
    color: #64748b;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    white-space: nowrap;
    background: #ffffff;
}
/* First and last column hug the modal gutter so the content visually aligns
 * with the header and stats sections above. */
.emp-cycle-table thead th:first-child,
.emp-cycle-table tbody td:first-child {
    padding-left: var(--emp-pad-x);
}
.emp-cycle-table thead th:last-child,
.emp-cycle-table tbody td:last-child {
    padding-right: var(--emp-pad-x);
}
.emp-cycle-table tbody tr {
    transition: background 0.12s;
}
/* Subtle zebra striping for scan-ability across long cycles */
.emp-cycle-table tbody tr.emp-cycle-row:nth-child(odd) {
    background: #fcfdfe;
}
.emp-cycle-table tbody tr.emp-cycle-row:hover {
    background: #f1f5f9;
}
.emp-cycle-table tbody td {
    padding: 14px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.emp-cycle-table tbody tr:last-child td {
    border-bottom: none;
}
/* Weekend — warmer tint, overrides zebra */
.emp-cycle-weekend,
.emp-cycle-table tbody tr.emp-cycle-weekend:nth-child(odd) {
    background: #fefce8 !important;
}
.emp-cycle-weekend:hover,
.emp-cycle-table tbody tr.emp-cycle-weekend:hover {
    background: #fef9c3 !important;
}
/* Today — left accent bar */
.emp-cycle-row-today > td:first-child {
    border-left: 3px solid #1488c7;
    position: relative;
}
.emp-cycle-row-today .emp-cycle-day {
    color: #1488c7;
}
/* Non-working rows (Week Off, Paid Holiday) — muted placeholder, not interactive */
.emp-cycle-row-nonwork > td,
.emp-cycle-table tbody tr.emp-cycle-row-nonwork:nth-child(odd) > td {
    background: #f8fafc !important;
    color: #94a3b8;
}
.emp-cycle-row-nonwork .emp-cycle-day {
    color: #94a3b8;
}
.emp-cycle-row-nonwork:hover > td {
    background: #f1f5f9 !important;
}
.emp-cycle-date {
    width: 80px;
    white-space: nowrap;
}
.emp-cycle-day {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
}
.emp-cycle-mon {
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
    font-weight: 600;
}
.emp-cycle-dow {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 1px;
}
.emp-cycle-time {
    font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
    color: #0f172a;
    font-feature-settings: 'tnum';
    white-space: nowrap;
}
.emp-cycle-hours {
    font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
    color: #0f172a;
    font-feature-settings: 'tnum';
    white-space: nowrap;
}
/* "+1h Perm" as a proper chip under worked hours, not free-floating text */
.emp-cycle-perm-credit {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: #1488c7;
    font-weight: 700;
    margin-top: 4px;
    background: #eef8fd;
    border: 1px solid #c9e9f7;
    padding: 2px 6px;
    border-radius: 10px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.emp-cycle-perm-type {
    font-size: 10px;
    color: #64748b;
    margin-top: 3px;
    text-transform: capitalize;
}
/* Nicer empty-state dash in Permission column — muted, larger, centered */
.emp-cycle-dash {
    display: inline-block;
    color: #e2e8f0;
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
}

/* Responsive — narrower screens (e.g. 1366×768).
   8 stat cards must fit on one row; tighten paddings + value font so the
   widest label ("On Duty/WFH") still fits without wrapping the row. */
@media (max-width: 1400px) {
    .emp-cycle-modal {
        --emp-pad-x: 18px;
    }
    .emp-cycle-stats {
        gap: 6px;
    }
    .emp-stat-card {
        padding: 7px 7px;
        min-height: 0;
    }
    .emp-stat-value {
        font-size: 17px;
    }
    .emp-stat-label {
        font-size: 8px;
        letter-spacing: 0.02em;
        margin-top: 2px;
    }
    .emp-cycle-table thead th,
    .emp-cycle-table tbody td {
        padding: 12px 12px;
    }
}
/* Below ~1040px the modal goes full-width and 10 cards get too tight — wrap to
   two compact rows of 5, then 4 on small tablets. */
@media (max-width: 1040px) {
    .emp-cycle-stats {
        grid-template-columns: repeat(5, 1fr);
    }
}
@media (max-width: 900px) {
    .emp-cycle-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Inline edit button — force compact size regardless of ambient button styles */
button.emp-cycle-edit-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 0 0 8px !important;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #94a3b8;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    border-radius: 6px;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
    vertical-align: middle;
    flex-shrink: 0;
    box-sizing: border-box;
}
button.emp-cycle-edit-btn:hover {
    background: #f8fafc;
    color: #1488c7;
    border-color: #a9dcf1;
}
.emp-cycle-row-expanded > td {
    background: #faf5ff !important;
}
.emp-cycle-row-expanded > td:last-child {
    border-right: 3px solid #1488c7;
}
button.emp-cycle-row-expanded-btn,
.emp-cycle-row-expanded button.emp-cycle-edit-btn {
    background: #1488c7 !important;
    color: #ffffff !important;
    border-color: #1488c7 !important;
}
.emp-cycle-row-expanded button.emp-cycle-edit-btn:hover {
    background: #0e7bb0 !important;
    border-color: #0e7bb0 !important;
}

/* Ensure the last column doesn't let the edit button stretch */
.emp-cycle-table td:last-child {
    white-space: nowrap;
}

/* Inline edit form row */
.emp-cycle-edit-row > td {
    padding: 0 !important;
    background: #faf5ff !important;
    border-bottom: 1px solid #c9e9f7 !important;
}
.emp-cycle-edit-form {
    padding: 18px var(--emp-pad-x) 16px;
    animation: empCycleEditExpand 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top;
}
@keyframes empCycleEditExpand {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.emp-cycle-edit-fields {
    display: grid;
    grid-template-columns: 110px 110px 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 12px;
}
.emp-cycle-edit-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.emp-cycle-edit-field label {
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 4px;
}
.emp-cycle-edit-field input[type="time"],
.emp-cycle-edit-field select {
    padding: 7px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    background: #ffffff;
    color: #0f172a;
    transition: background-color 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s, transform 0.12s, opacity 0.12s;
    font-family: inherit;
    min-width: 0;
    width: 100%;
    height: 34px;
    box-sizing: border-box;
}
.emp-cycle-edit-field input[type="time"]:focus,
.emp-cycle-edit-field select:focus {
    outline: none;
    border-color: #1488c7;
    box-shadow: 0 0 0 3px rgba(20, 161, 219, 0.15);
}
.emp-cycle-edit-field-check {
    padding-bottom: 8px;
    white-space: nowrap;
}

/* Read-only biometric display inside the edit form */
.emp-cycle-biometric-field {
    position: relative;
}
.emp-cycle-bio-display {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    height: 34px;
    box-sizing: border-box;
    justify-content: center;
}
.emp-cycle-bio-value {
    font-size: 13px;
    color: #0f172a;
    font-weight: 600;
    font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    font-feature-settings: 'tnum';
    line-height: 1;
}
.emp-cycle-bio-source {
    font-size: 9px;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    line-height: 1;
    margin-top: 3px;
}
.emp-cycle-bio-source svg {
    width: 9px;
    height: 9px;
    color: #cbd5e1;
}
.emp-cycle-bio-input[disabled] {
    display: none;
}

/* Override warning banner */
.emp-cycle-override-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 14px;
}
.emp-cycle-override-banner svg {
    flex-shrink: 0;
    color: #d97706;
}
.emp-cycle-override-banner span {
    flex: 1;
}
.emp-cycle-undo-override {
    background: none;
    border: 1px solid #fbbf24;
    color: #92400e;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.emp-cycle-undo-override:hover {
    background: #fef3c7;
    border-color: #f59e0b;
}

/* Footer with override toggle on left, save/cancel on right */
.emp-cycle-edit-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #c9e9f7;
    padding-top: 10px;
    gap: 12px;
}
.emp-cycle-override-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.emp-cycle-override-btn:hover {
    border-color: #f59e0b;
    color: #92400e;
    background: #fffbeb;
}
.emp-cycle-override-btn svg {
    flex-shrink: 0;
}

/* When override is active, inputs replace the bio display */
.emp-cycle-edit-form[data-override="1"] .emp-cycle-biometric-field .emp-cycle-bio-input {
    display: block;
}
.emp-cycle-edit-field-check label.emp-cycle-edit-checkbox-label {
    font-size: 12px;
    color: #334155;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.emp-cycle-edit-checkbox-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #1488c7;
    margin: 0;
    flex-shrink: 0;
}
.emp-cycle-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    /* Border/padding moved to .emp-cycle-edit-footer which now wraps this */
}
.emp-cycle-edit-cancel,
.emp-cycle-edit-save {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
    border: 1px solid transparent;
    min-width: 80px;
    flex: 0 0 auto;
    width: auto;
    box-sizing: border-box;
}
.emp-cycle-edit-cancel {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #475569;
}
.emp-cycle-edit-cancel:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}
.emp-cycle-edit-save {
    background: #1488c7;
    color: #ffffff;
    min-width: 120px;
}
.emp-cycle-edit-save:hover {
    background: #0e7bb0;
}
.emp-cycle-edit-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 1200px) {
    .emp-cycle-edit-fields {
        grid-template-columns: 100px 100px 1fr 1fr;
    }
    .emp-cycle-edit-field-check {
        grid-column: 1 / -1;
        padding-bottom: 0;
        padding-top: 4px;
    }
}
@media (max-width: 720px) {
    .emp-cycle-edit-fields {
        grid-template-columns: 1fr 1fr;
    }
}

/* Hour Status Badge */
.att-hour-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.6rem;
    border-radius: 20px;
    font-size: 0.67rem;
    font-weight: 600;
    white-space: nowrap;
}
.att-hrs-ok      { background: #d1fae5; color: #065f46; }
.att-hrs-short   { background: #fef3c7; color: #92400e; }
.att-hrs-overtime { background: #dbeafe; color: #1e40af; }
.att-hrs-na      { background: #f3f4f6; color: #9ca3af; }
/* Comp-Off grading on Sunday / declared holiday presence. */
.att-hrs-compoff-full { background: #e0e7ff; color: #3730a3; }
.att-hrs-compoff-half { background: #fef9c3; color: #854d0e; }
.att-hrs-compoff-none { background: #fee2e2; color: #991b1b; }

/* Late/Permission Tags */
.att-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
}
.att-tag-late1    { background: #FEF3C7; color: #92400E; }
.att-tag-late2    { background: #FFEDD5; color: #C2410C; }
.att-tag-exceeded { background: #FEE2E2; color: #991B1B; }
.att-tag-perm1    { background: #DBEAFE; color: #1E40AF; }
.att-tag-perm2    { background: #CFFAFE; color: #0E7490; }
.att-tag-perm-exceeded { background: #FEE2E2; color: #991B1B; }
.att-tag-special  { background: #dcf1fb; color: #0e7bb0; }

/* Flexible Work Chip */
.att-flex-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    background: #eef8fd;
    color: #1488c7;
    font-size: 0.58rem;
    font-weight: 700;
    margin-left: 0.3rem;
    vertical-align: middle;
    letter-spacing: 0.03em;
}

/* Status Pills */
.hr-pill.half-day    { background: #FFEDD5; color: #C2410C; }
.hr-pill.incomplete  { background: #FEE2E2; color: #991B1B; }
.hr-pill.on-duty     { background: #DBEAFE; color: #1E40AF; }

/* Permission Apply Button */
.att-perm-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border: 1px solid #C7D2FE;
    border-radius: 10px;
    background: #EEF2FF;
    color: #4338CA;
    font-size: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
    white-space: nowrap;
}
.att-perm-btn:hover {
    background: #C7D2FE;
    border-color: #A5B4FC;
}

.att-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    padding: 0;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    background: #F8FAFC;
    color: #475569;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.att-edit-btn:hover {
    background: #1488c7;
    border-color: #1488c7;
    color: #fff;
}
.att-edited-chip {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 6px;
    background: #FEF3C7;
    color: #92400E;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
}

/* Result Count */
.att-result-count {
    padding: 0.6rem 0.5rem 0.3rem;
    font-size: 0.72rem;
    color: var(--hr-muted, #8b80b0);
    font-weight: 500;
}

/* Empty State Canvas */
#hrPaneAttendance .att-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1.5rem;
    text-align: center;
    min-height: 320px;
}
#hrPaneAttendance .att-empty-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: #f5f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
    color: #c7c4d7;
}
#hrPaneAttendance .att-empty-title {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hr-text, #1e1b4b);
    margin: 0 0 0.4rem;
}
#hrPaneAttendance .att-empty-desc {
    font-size: 0.8rem;
    color: var(--hr-muted, #8b80b0);
    max-width: 360px;
    line-height: 1.5;
    margin: 0 0 1.5rem;
}
#hrPaneAttendance .att-empty-actions {
    display: flex;
    gap: 0.6rem;
}
#hrPaneAttendance .att-empty-btn {
    padding: 0.55rem 1.2rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
    border: none;
}
#hrPaneAttendance .att-empty-btn-primary {
    background: rgba(20, 161, 219, 0.1);
    color: var(--hr-blue, #14a1db);
}
#hrPaneAttendance .att-empty-btn-primary:hover {
    background: rgba(20, 161, 219, 0.18);
}
#hrPaneAttendance .att-empty-btn-secondary {
    background: transparent;
    border: 1px solid #e1dfe8;
    color: var(--hr-muted, #8b80b0);
}
#hrPaneAttendance .att-empty-btn-secondary:hover {
    background: #f5f4f8;
    border-color: #c7c4d7;
}

/* View Panels */
.att-view-panel.hidden { display: none; }

/* Responsive */
@media (max-width: 1200px) {
    #hrPaneAttendance .att-stats-strip { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 768px) {
    #hrPaneAttendance .att-filter-field { flex: 1 1 45%; max-width: none; }
    #hrPaneAttendance .att-filter-actions { width: 100%; justify-content: flex-end; }
    #hrPaneAttendance .att-stats-strip { grid-template-columns: repeat(2, 1fr); }
    #hrPaneAttendance .att-stat { min-width: 0; }
}

/* ── Staff Table Chips ────────────────────────────────────── */
.hr-role-chip {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    background: #dcf1fb;
    color: #0a5e88;
    white-space: nowrap;
}
.hr-status-badge {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: capitalize;
}
.hr-status-badge.hr-badge-green { background: #D1FAE5; color: #065F46; }
.hr-status-badge.hr-badge-grey  { background: #F3F4F6; color: #6B7280; }

/* ══════════════════════════════════════════════════════════
   UNIFIED STAFF DIRECTORY
   ══════════════════════════════════════════════════════════ */

/* ── Filter Toolbar ───────────────────────────────────────── */
.hr-dir-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: var(--hr-card-bg, #faf9ff);
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 16px;
    margin-bottom: 1rem;
}

/* Row 1: search + right controls */
.hr-dir-toolbar-top {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.hr-dir-top-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.hr-dir-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border: 1.5px solid var(--hr-border, #c9e9f7);
    border-radius: 10px;
    background: #fff;
    padding: 0.48rem 0.75rem;
    flex: 1;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.hr-dir-search-wrap:focus-within {
    border-color: var(--hr-blue, #14a1db);
    box-shadow: 0 0 0 3px rgba(20, 161, 219,0.1);
}
.hr-dir-search-wrap svg { color: var(--hr-muted, #8b80b0); flex-shrink: 0; }
.hr-dir-search-wrap input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.83rem;
    color: var(--hr-text, #1e1b4b);
    width: 100%;
    min-width: 0;
}
.hr-dir-search-wrap input::placeholder { color: var(--hr-muted, #8b80b0); }

/* Row 2: filter pills */
.hr-dir-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.hr-dir-filters select,
.hr-dir-desig-input {
    border: 1px solid var(--hr-border, #c9e9f7);
    border-radius: 20px;
    background: #fff;
    color: var(--hr-text, #1e1b4b);
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.38rem 0.75rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    appearance: auto;
}
.hr-dir-filters select:hover,
.hr-dir-desig-input:hover {
    background: var(--hr-card-bg, #faf9ff);
}
.hr-dir-filters select:focus,
.hr-dir-desig-input:focus {
    border-color: var(--hr-blue, #14a1db);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(20, 161, 219,0.08);
    outline: none;
}
.hr-dir-desig-input { width: 180px; }

.hr-dir-group-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--hr-muted, #8b80b0);
    cursor: pointer;
    white-space: nowrap;
    padding: 0.38rem 0.65rem;
    border: 1px solid var(--hr-border, #c9e9f7);
    border-radius: 20px;
    background: #fff;
    transition: background 0.15s, color 0.15s;
}
.hr-dir-group-label:hover { background: var(--hr-card-bg, #faf9ff); color: var(--hr-text, #1e1b4b); }
.hr-dir-group-label input { accent-color: var(--hr-blue, #14a1db); margin: 0; }

.hr-dir-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--hr-blue, #14a1db);
    background: rgba(20, 161, 219,0.1);
    padding: 0.32rem 0.7rem;
    border-radius: 20px;
    white-space: nowrap;
}

.hr-dir-view-btns {
    display: flex;
    border: 1px solid var(--hr-border, #c9e9f7);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.hr-dir-view-btn {
    border: none !important;
    background: transparent !important;
    padding: 0.42rem 0.58rem !important;
    color: var(--hr-muted, #9ca3af) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: background 0.15s, color 0.15s;
    min-height: unset !important;
}
.hr-dir-view-btn.active {
    background: var(--hr-blue, #14a1db) !important;
    color: #fff !important;
}
.hr-dir-view-btn:hover:not(.active) { background: var(--hr-card-bg, #eef8fd) !important; color: var(--hr-text, #1e1b4b) !important; }

.hr-dir-add-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem !important;
    font-size: 0.82rem !important;
    white-space: nowrap;
}

/* ── Directory Content Area ───────────────────────────────── */
.hr-dir-content { min-height: 200px; }

/* ── Card Grid ────────────────────────────────────────────── */
.hr-dir-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
    padding: 0.25rem 0;
}
.hr-dir-card {
    background: var(--hr-card-bg, #fff);
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.hr-dir-card:hover {
    box-shadow: 0 4px 18px rgba(20, 161, 219,0.10);
    border-color: #a9dcf1;
}
.hr-dir-card-top {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}
.hr-dir-avatar {
    width: 38px !important;
    height: 38px !important;
    font-size: 0.82rem !important;
    flex-shrink: 0;
}
.hr-dir-card-info {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}
.hr-dir-card-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--hr-text, #1e1b2e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hr-dir-edit-btn {
    border: 1px solid #c9e9f7 !important;
    background: #faf9ff !important;
    color: #1488c7 !important;
    border-radius: 8px !important;
    padding: 0.3rem 0.55rem !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: none !important;
    min-height: unset !important;
    transition: background 0.15s, border-color 0.15s;
}
.hr-dir-edit-btn:hover {
    background: #dcf1fb !important;
    border-color: #1488c7 !important;
}
.hr-dir-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.75rem;
}
.hr-dir-field { display: grid; gap: 0.1rem; }
.hr-dir-label {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hr-muted, #9ca3af);
}
.hr-dir-value {
    font-size: 0.78rem;
    color: var(--hr-text, #1e1b2e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hr-dir-mono { font-family: 'DM Mono', monospace; font-size: 0.73rem !important; }
.hr-dir-email { font-size: 0.7rem !important; word-break: break-all; white-space: normal !important; }
.hr-dir-card-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px solid var(--hr-border, #f3f4f6);
}
.hr-dir-stage {
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: auto;
}
.hr-dir-docs {
    font-size: 0.68rem;
    color: var(--hr-muted, #9ca3af);
    background: #f3f4f6;
    padding: 0.1rem 0.4rem;
    border-radius: 20px;
}
.hr-dir-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #059669;
    background: #d1fae5;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.hr-dir-view-btn:hover { background: #a7f3d0; }
.hr-dir-view-btn-sm { padding: 0.2rem 0.5rem; font-size: 0.7rem; }
.hr-dir-docs-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--hr-blue, #14a1db);
    background: #dcf1fb;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.hr-dir-docs-btn:hover { background: #c9e9f7; }
.hr-dir-docs-btn-sm { padding: 0.2rem 0.5rem; font-size: 0.7rem; }

/* ── Documents View Modal ────────────────────────────── */
.docs-view-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1000;
}
.docs-view-backdrop.hidden,
.docs-view-modal.hidden { display: none; }
.docs-view-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 560px;
    max-width: 92vw;
    max-height: 80vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.docs-view-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.2rem 1.4rem 0.8rem;
    border-bottom: 1px solid #f3f4f6;
}
.docs-view-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--hr-text, #1e1b2e);
}
.docs-view-sub {
    font-size: 0.78rem;
    color: var(--hr-muted, #9ca3af);
    margin: 0.15rem 0 0;
}
.docs-view-body {
    padding: 1rem 1.4rem 1.4rem;
    overflow-y: auto;
    flex: 1;
}
.docs-view-loading,
.docs-view-empty {
    text-align: center;
    color: var(--hr-muted, #9ca3af);
    font-size: 0.85rem;
    padding: 2rem 0;
}
.docs-view-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--hr-text, #1e1b2e);
    transition: background 0.15s;
    margin-bottom: 0.35rem;
}
.docs-view-item:hover { background: #eef8fd; }
.docs-view-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dcf1fb;
    border-radius: 8px;
    color: var(--hr-blue, #14a1db);
    flex-shrink: 0;
}
.docs-view-info {
    flex: 1;
    min-width: 0;
}
.docs-view-info strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.docs-view-meta {
    font-size: 0.7rem;
    color: var(--hr-muted, #9ca3af);
}
.docs-view-open {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--hr-blue, #14a1db);
    flex-shrink: 0;
}
.docs-view-item--nolink { cursor: default; }
.docs-view-item--nolink:hover { background: transparent; }
.docs-view-open--muted { color: var(--hr-muted, #9ca3af); font-weight: 500; font-style: italic; }

/* ── Docs completeness badge (directory) ──────────────────── */
.hr-dir-docs-btn.hr-docs-complete { background: #dcfce7; color: #15803d; }
.hr-dir-docs-btn.hr-docs-complete:hover { background: #bbf7d0; }
.hr-dir-docs-btn.hr-docs-partial { background: #fef3c7; color: #b45309; }
.hr-dir-docs-btn.hr-docs-partial:hover { background: #fde68a; }
.hr-dir-docs-btn.hr-docs-none { background: #fee2e2; color: #b91c1c; }
.hr-dir-docs-btn.hr-docs-none:hover { background: #fecaca; }

/* ── Docs checklist hub (modal) ───────────────────────────── */
.docs-chk-summary {
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    background: #eef8fd;
    margin-bottom: 0.9rem;
}
.docs-chk-summary-text { font-size: 0.82rem; color: var(--hr-text, #1e1b2e); margin-bottom: 0.45rem; }
.docs-chk-summary-text strong { font-size: 0.95rem; }
.docs-chk-bar { height: 6px; border-radius: 6px; background: #e5e7eb; overflow: hidden; }
.docs-chk-bar > span { display: block; height: 100%; border-radius: 6px; background: #14a1db; transition: width 0.3s; }
.docs-chk-summary.hr-docs-complete { background: #dcfce7; }
.docs-chk-summary.hr-docs-complete .docs-chk-bar > span { background: #16a34a; }
.docs-chk-summary.hr-docs-partial { background: #fffbeb; }
.docs-chk-summary.hr-docs-partial .docs-chk-bar > span { background: #f59e0b; }
.docs-chk-summary.hr-docs-none { background: #fef2f2; }
.docs-chk-summary.hr-docs-none .docs-chk-bar > span { background: #ef4444; }

.docs-chk-list { display: flex; flex-direction: column; gap: 0.4rem; }
.docs-chk-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    border: 1px solid #eceaf3;
    background: #fff;
}
.docs-chk-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: #cbd5e1;
}
.docs-chk-row.is-present .docs-chk-icon { background: #14a1db; }
.docs-chk-row.is-verified .docs-chk-icon { background: #16a34a; }
.docs-chk-row.is-missing .docs-chk-icon { background: #ef4444; }
.docs-chk-row.is-missing { background: #fef6f6; border-color: #fbd9d9; }
.docs-chk-row.is-optional-missing .docs-chk-icon { background: #cbd5e1; }

/* Content column — must be allowed to shrink so long names wrap instead of
   forcing horizontal overflow. */
.docs-chk-main { flex: 1 1 auto; min-width: 0; }
.docs-chk-label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.docs-chk-name {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--hr-text, #1e1b2e);
    overflow-wrap: anywhere;
}
.docs-chk-req, .docs-chk-opt {
    flex: 0 0 auto;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.4rem;
    border-radius: 20px;
}
.docs-chk-req { background: #dcf1fb; color: #0e7bb0; }
.docs-chk-opt { background: #f1f3f5; color: #6b7280; }
.docs-chk-files { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.3rem; }
.docs-chk-fileitem { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.docs-chk-file {
    font-size: 0.76rem;
    color: var(--hr-blue, #14a1db);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.docs-chk-file:hover { text-decoration: underline; }
.docs-chk-nofile { font-size: 0.74rem; color: #9ca3af; font-style: italic; }
.docs-chk-verified {
    flex: 0 0 auto;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #15803d;
    background: #dcfce7;
    padding: 0.08rem 0.4rem;
    border-radius: 20px;
}
.docs-chk-missing-label { font-size: 0.74rem; color: #b91c1c; margin-top: 0.25rem; }
.docs-chk-row.is-optional-missing .docs-chk-missing-label { color: #9ca3af; }

/* Action button — explicitly opt out of the global `button { width:100% }`
   rule (which otherwise stretches it to fill the row and collapses .docs-chk-main
   to zero width). Must stay intrinsic-width and never shrink. */
.docs-chk-upload {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    align-self: center;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--hr-blue, #14a1db);
    background: #dcf1fb;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 0.34rem 0.7rem;
    cursor: pointer;
}
.docs-chk-upload:hover { background: #c9e9f7; }
/* Missing-required rows get a stronger call-to-action to nudge the upload. */
.docs-chk-row.is-missing .docs-chk-upload { background: #14a1db; color: #fff; }
.docs-chk-row.is-missing .docs-chk-upload:hover { background: #1276c2; }
.docs-chk-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--hr-muted, #9ca3af);
    margin: 1.1rem 0 0.55rem;
}

/* ── Department Groups ────────────────────────────────────── */
.hr-dir-dept-group { margin-bottom: 1.25rem; }
.hr-dir-dept-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.25rem;
    margin-bottom: 0.6rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--hr-text, #1e1b2e);
    border-bottom: 2px solid #dcf1fb;
}
.hr-dir-dept-badge {
    background: #1488c7;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 20px;
}

/* ── Table View ───────────────────────────────────────────── */
.hr-dir-table-wrap { overflow-x: auto; }
.hr-dir-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.81rem;
}
.hr-dir-table th {
    text-align: left;
    color: var(--hr-muted, #9ca3af);
    font-weight: 600;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 0 0.65rem;
    border-bottom: 1px solid var(--hr-border, #dcf1fb);
    white-space: nowrap;
}
.hr-dir-table td {
    padding: 0.65rem 0;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}
.hr-dir-table tr:last-child td { border-bottom: none; }
.hr-dir-table tr:hover td { background: #faf9ff; }

/* ── Empty State ──────────────────────────────────────────── */
.hr-dir-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1rem;
    color: var(--hr-muted, #9ca3af);
    gap: 0.85rem;
    text-align: center;
}
.hr-dir-empty p { margin: 0; font-size: 0.85rem; }

/* ── Document Section ─────────────────────────────────────── */
.hr-dir-docs-section {
    margin-top: 1rem;
    border-radius: 14px;
}
.hr-dir-docs-section summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--hr-text, #1e1b2e);
    padding: 0.35rem 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    list-style: none;
    user-select: none;
}
.hr-dir-docs-section summary::-webkit-details-marker { display: none; }
.hr-dir-docs-section summary::after {
    content: '▾';
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--hr-muted);
}
.hr-dir-docs-section[open] summary::after { content: '▴'; }
.hr-dir-docs-body { margin-top: 0.85rem; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .hr-dir-toolbar { flex-direction: column; align-items: stretch; }
    .hr-dir-actions { justify-content: flex-end; }
    .hr-dir-card-grid { grid-template-columns: 1fr; }
    .hr-dir-card-body { grid-template-columns: 1fr; }
}

/* ── Leave Request Items ──────────────────────────────────── */
.hr-leave-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #F3F4F6;
}
.hr-leave-item:last-child {
    border-bottom: none;
}
.hr-leave-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.hr-leave-info {
    flex: 1;
    min-width: 0;
}
.hr-leave-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hr-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hr-leave-meta {
    font-size: 0.72rem;
    color: var(--hr-muted);
    margin-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hr-leave-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* ── Recruitment Tab Layout ───────────────────────────────── */
.hr-rec-tab-content.hidden { display: none; }

/* ── Recruitment Page – Material Design 3 Redesign ────────── */

/* Page header */
.hr-rec-page-header {
    margin-bottom: 2rem;
}
.hr-rec-page-title-block {
    margin-bottom: 1.25rem;
}
.hr-rec-page-title {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.hr-rec-page-subtitle {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 400;
}

/* Navigation links (underline style like reference) */
.hr-rec-nav {
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0;
}
.hr-rec-nav-link {
    background: none;
    border: none;
    padding: 0.5rem 0;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    color: #64748b;
    cursor: pointer;
    position: relative;
    transition: color 0.15s;
}
.hr-rec-nav-link:hover {
    color: #0f172a;
}
.hr-rec-nav-link.active {
    color: #0f172a;
}
.hr-rec-nav-link.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #14a1db;
    border-radius: 2px;
}

/* Form card */
.hr-rec-form-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    position: relative;
    margin-bottom: 0.75rem;
}
.hr-rec-form-card.hr-rec-form-collapsed { padding: 0.5rem 1rem; }
.hr-rec-form-card::before {
    display: none;
}
.hr-rec-form-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}
.hr-rec-form-toggle {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    padding: 0.35rem 0;
    transition: opacity 0.15s;
}
.hr-rec-form-toggle:hover { opacity: 0.85; }
.hr-rec-form-card.hr-rec-form-collapsed .hr-rec-form-header { margin-bottom: 0; }
.hr-rec-form-hint {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 500;
    color: #94a3b8;
}
#hrJobFormIcon { transition: transform 0.18s ease; }

/* Required field marker */
.hr-req { color: #dc2626; font-weight: 700; margin-left: 2px; }

/* Jobs toolbar row */
.hr-jobs-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.hr-jobs-count { font-size: 0.78rem; color: #64748b; }
.hr-jobs-count strong { color: #0f172a; font-weight: 700; }
.hr-jobs-toolbar-spacer { flex: 1; }

/* Semantic job-status pill */
.hr-job-status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px; border-radius: 999px;
    font-size: 0.64rem; font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}
.hr-job-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.hr-job-status-open    { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.hr-job-status-closed  { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.hr-job-status-on_hold { background: #fffbeb; color: #b45309; border-color: #fde68a; }

/* Clickable applicant-count buttons */
.hr-job-applicants {
    display: flex; align-items: center; gap: 0.4rem;
    flex-wrap: wrap;
}
.hr-job-app-btn {
    display: inline-flex; align-items: baseline; gap: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 3px 10px;
    font-size: 0.72rem;
    color: #334155;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.hr-job-app-btn:hover:not(.hr-job-app-empty) {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4338ca;
}
.hr-job-app-btn.hr-job-app-empty {
    opacity: 0.55;
}
.hr-job-app-btn.hr-job-app-empty:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    opacity: 0.85;
}
.hr-job-app-num { font-weight: 800; font-size: 0.82rem; color: #0f172a; }
.hr-job-app-btn:hover:not(.hr-job-app-empty) .hr-job-app-num { color: #4338ca; }
.hr-job-app-lbl { font-weight: 500; color: #94a3b8; }

/* Close date meta in job row */
.hr-job-close-date { color: #64748b; }
.hr-job-close-soon { color: #b45309; font-weight: 600; }
.hr-job-close-past { color: #991b1b; font-weight: 600; }

/* Editing banner in form actions */
.hr-job-editing-hint {
    margin-right: auto;
    font-size: 0.76rem;
    font-weight: 600;
    color: #4338ca;
    background: #eef2ff;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #c7d2fe;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Kebab action menu */
.hr-job-kebab-wrap { position: relative; display: inline-block; }
.hr-job-kebab-btn {
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #e2e8f0; color: #64748b;
    cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.hr-job-kebab-btn:hover { background: #f8fafc; color: #334155; border-color: #cbd5e1; }
.hr-job-kebab-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
    min-width: 140px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
    padding: 4px;
    display: none;
    flex-direction: column;
    gap: 1px;
}
.hr-job-kebab-menu.open { display: flex; }
.hr-job-kebab-item {
    background: none; border: none; text-align: left;
    padding: 8px 12px; border-radius: 6px;
    font-size: 0.8rem; font-weight: 500; color: #334155;
    cursor: pointer; font-family: inherit;
    transition: background 0.1s;
}
.hr-job-kebab-item:hover { background: #eef2ff; color: #4338ca; }
.hr-job-kebab-item.hr-job-kebab-danger { color: #dc2626; }
.hr-job-kebab-item.hr-job-kebab-danger:hover { background: #fef2f2; }

/* Scope-only: allow kebab menu to escape the jobs table wrapper.
   Last-row menu opens upward so it isn't clipped by bottom corner. */
#hrRecTabJobs .lum-pipe-table-wrap { overflow: visible; }
#hrRecTabJobs .lum-pipe-list .lum-pipe-row:last-child .hr-job-kebab-menu {
    top: auto; bottom: calc(100% + 4px);
}
.hr-rec-form-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eef2ff;
    color: #14a1db;
    flex-shrink: 0;
}
.hr-rec-form-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

/* Form grid — 3 columns */
.hr-rec-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.hr-rec-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.hr-rec-field-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hr-text, #1e1b4b);
    padding-left: 0.15rem;
}
.hr-rec-field-full {
    grid-column: 1 / -1;
}
.hr-rec-field select,
.hr-rec-field input,
.hr-rec-field textarea {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.82rem;
    font-family: inherit;
    background: #fff;
    color: #0f172a;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.hr-rec-field select,
.hr-rec-field input {
    height: 40px;
}
.hr-rec-field select:focus,
.hr-rec-field input:focus,
.hr-rec-field textarea:focus {
    outline: none;
    border-color: #14a1db;
    box-shadow: 0 0 0 2px rgba(20, 161, 219,0.15);
}
.hr-rec-field textarea {
    resize: none;
    border-radius: 8px;
}

/* Form action buttons */
.hr-rec-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.hr-rec-btn-discard {
    background: #f1f5f9;
    border: none;
    padding: 7px 20px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s;
}
.hr-rec-btn-discard:hover {
    background: #e2e8f0;
}
.hr-rec-btn-publish {
    background: #14a1db;
    color: #fff;
    border: none;
    padding: 7px 20px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
}
.hr-rec-btn-publish:hover {
    opacity: 0.88;
}

/* Active Postings section */
.hr-rec-postings-section {
    margin-top: 2rem;
}
.hr-rec-postings-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding: 0 0.25rem;
}
.hr-rec-postings-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.hr-rec-postings-count {
    font-size: 0.78rem;
    font-weight: 500;
    color: #64748b;
}

/* ── Unified Recruitment Components ─────────────────────── */
.rec-card {
    background: #fff;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #e2e8f0;
    transition: box-shadow 0.15s;
    cursor: pointer;
    position: relative;
}
.rec-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
}
.rec-card-job  { border-left-color: #14a1db; }
.rec-card-pipe { border-left-color: #cbd5e1; }
.rec-card-pipe.rec-card-interview { border-left-color: #14a1db; }
.rec-card-pipe.rec-card-selected  { border-left-color: #10b981; }
.rec-card-applicant { border-left-color: #e2e8f0; }

.rec-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.rec-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.rec-card-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.rec-card-title h5 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.rec-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: #64748b;
}
.rec-card-meta span,
.rec-card-meta .pipe-meta-row {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.rec-card-meta svg {
    width: 14px;
    height: 14px;
    opacity: 0.55;
    flex-shrink: 0;
}
.rec-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Unified buttons */
.rec-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
    border: none;
}
.rec-btn svg { width: 14px; height: 14px; }
.rec-btn-primary {
    background: #14a1db;
    color: #fff;
}
.rec-btn-primary:hover { opacity: 0.88; }
.rec-btn-outline {
    background: rgba(20, 161, 219,0.05);
    color: #14a1db;
    border: 1px solid rgba(20, 161, 219,0.2);
}
.rec-btn-outline:hover { background: rgba(20, 161, 219,0.1); }
.rec-btn-secondary {
    background: #f1f5f9;
    color: #475569;
}
.rec-btn-secondary:hover { background: #e2e8f0; color: #334155; }
.rec-btn-success {
    background: #10b981;
    color: #fff;
}
.rec-btn-success:hover { background: #059669; }
.rec-btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(0,0,0,0.07);
    background: transparent;
    color: #64748b;
    border-radius: 8px;
}
.rec-btn-icon:hover {
    background: #fee2e2;
    color: #991b1b;
    border-color: transparent;
}
.rec-btn-danger-icon:hover {
    background: #fee2e2;
    color: #991b1b;
}

/* Unified avatar */
.rec-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}

/* Unified status pill */
.rec-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.6;
}
.rec-pill-open   { background: #d1fae5; color: #065f46; }
.rec-pill-closed { background: #fee2e2; color: #991b1b; }
.rec-pill-draft  { background: #fef3c7; color: #92400e; }

/* Unified stats chip (used in job cards) */
.rec-stats-chip {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 0.4rem 0.75rem;
    flex-shrink: 0;
}
.rec-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.55rem;
}
.rec-stat-val {
    font-size: 1rem;
    font-weight: 700;
    color: #14a1db;
    line-height: 1.2;
}
.rec-stat-label {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-top: 1px;
}
.rec-stats-divider {
    width: 1px;
    height: 24px;
    background: #e2e8f0;
}

/* Pipeline card name section */
.rec-card-name {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.rec-card-name .rec-avatar {
    box-shadow: 0 0 0 2px #edeef0;
}
.rec-card-name-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.rec-card-name-text {
    font-weight: 800;
    font-size: 0.95rem;
    color: #0f172a;
    transition: color 0.15s;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.rec-card:hover .rec-card-name-text { color: #14a1db; }
.rec-card-role {
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1rem;
}
.rec-card-time {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    flex-shrink: 0;
    margin-left: auto;
    white-space: nowrap;
    line-height: 1;
    align-self: flex-start;
}
.rec-card-time.rec-time-today { color: #14a1db; background: #eef2ff; }
.rec-card-time.rec-time-success { color: #059669; background: #ecfdf5; }

/* Pipeline card meta & actions */
.rec-card-pipe .rec-card-meta {
    font-size: 0.75rem;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    flex-direction: column;
    gap: 0.25rem;
}
.rec-card-pipe .rec-card-meta .pipe-meta-row {
    margin-bottom: 0;
}
.rec-card-pipe .rec-card-meta .hr-pill {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}
.rec-card-pipe .rec-card-actions {
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
}
.rec-card-pipe .rec-card-actions .hr-btn-sm {
    flex: 1;
    padding: 0.375rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    border: none;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}
.rec-card-pipe .rec-card-actions .hr-btn-sm:hover {
    background: #eef2ff;
    color: #14a1db;
}
.rec-card-pipe .rec-card-actions .hr-btn-sm.hr-btn-approve {
    background: #14a1db;
    color: #fff;
}
.rec-card-pipe .rec-card-actions .hr-btn-sm.hr-btn-approve:hover {
    background: #1276c2;
}
.rec-card-pipe .rec-card-actions .hr-btn-sm.pipe-btn-green {
    background: #10b981;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem;
}
.rec-card-pipe .rec-card-actions .hr-btn-sm.pipe-btn-green:hover {
    background: #059669;
}

@media (max-width: 900px) {
    .rec-card-row { flex-direction: column; align-items: flex-start; }
    .rec-stats-chip { align-self: flex-start; }
    .rec-card-actions { align-self: flex-end; }
}

/* DEPRECATED: Job posting card classes — replaced by .rec-card .rec-card-job */
.hr-rec-postings-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.hr-job-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 20px;
    padding: 1.15rem 1.4rem;
    transition: background 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}
.hr-job-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 20px 20px 0 0;
    background: var(--hr-purple, #1488c7);
}
.hr-job-card:hover {
    background: #faf9ff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.hr-job-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.hr-job-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.hr-job-card-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.hr-job-card-title h5 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--hr-text, #1e1b4b);
    letter-spacing: -0.01em;
}

/* Status pill */
.hr-pill-status {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.hr-pill-status.open { background: #D1FAE5; color: #065F46; }
.hr-pill-status.closed { background: #FEE2E2; color: #991B1B; }
.hr-pill-status.draft { background: #FEF3C7; color: #92400E; }

/* Meta row with icons */
.hr-job-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.15rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--hr-muted, #6b5f8a);
}
.hr-job-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.hr-job-card-meta svg {
    width: 14px;
    height: 14px;
    opacity: 0.55;
}

/* Stats chip */
.hr-job-stats {
    display: flex;
    align-items: center;
    background: var(--hr-bg, #eef8fd);
    border-radius: 16px;
    padding: 0.45rem 0.75rem;
    flex-shrink: 0;
}
.hr-job-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.55rem;
}
.hr-job-stat-val {
    font-size: 1rem;
    font-weight: 800;
    color: var(--accent, #14a1db);
    line-height: 1.2;
}
.hr-job-stat:last-child .hr-job-stat-val {
    color: var(--hr-text, #1e1b4b);
}
.hr-job-stat-label {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hr-muted, #6b5f8a);
    margin-top: 1px;
}
.hr-job-stats-divider {
    width: 1px;
    height: 26px;
    background: rgba(0,0,0,0.08);
}

/* Card action buttons */
.hr-job-card-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}
.hr-job-btn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    background: var(--hr-bg, #eef8fd);
    border: none;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--hr-text, #1e1b4b);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.hr-job-btn-link:hover {
    background: #dcf1fb;
    color: var(--accent, #14a1db);
}
.hr-job-btn-link svg {
    width: 14px;
    height: 14px;
}
.hr-job-btn-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    color: #374151;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.hr-job-btn-close:hover {
    background: #FEE2E2;
    color: #991B1B;
    border-color: transparent;
}

/* Owner label */
.hr-job-owner {
    font-size: 0.72rem;
    color: var(--hr-muted);
    font-weight: 500;
}

@media (max-width: 768px) {
    .hr-rec-page-title { font-size: 1.5rem; }
    .hr-rec-form-card { padding: 1.25rem; }
    .hr-rec-form-grid { grid-template-columns: 1fr; }
    .hr-job-card-row { flex-direction: column; align-items: flex-start; }
    .hr-job-stats { align-self: flex-start; }
    .hr-job-card-actions { align-self: flex-end; }
}
/* Pipeline candidate card */
/* ── Pipeline Kanban Layout ─────────────────────────────── */
.pipe-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.pipe-header-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}
.pipe-filter-bar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.pipe-search,
.pipe-job-filter {
    padding: 7px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    background: transparent;
    color: #0f172a;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.pipe-search:focus,
.pipe-job-filter:focus {
    outline: none;
    border-color: #14a1db;
    box-shadow: 0 0 0 2px rgba(20, 161, 219,0.15);
}
.pipe-btn-add {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #14a1db;
    color: #fff;
    border: none;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.pipe-btn-add:hover {
    opacity: 0.88;
}
.pipe-btn-add:active { transform: scale(0.97); }
.pipe-quick-add {
    margin-bottom: 0.75rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0;
}
.pipe-quick-add[open] {
    padding: 1rem 1.25rem;
}
.pipe-quick-add > summary {
    cursor: pointer;
    font-size: 0.82rem;
    color: #fff;
    background: #14a1db;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    list-style: none;
    transition: opacity 0.15s;
}
.pipe-quick-add[open] > summary {
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid #e2e8f0;
    margin: -1rem -1.25rem 1rem;
    padding: 0.75rem 1.25rem;
    background: #eef2ff;
    color: #14a1db;
}
.pipe-quick-add > summary:hover {
    opacity: 0.9;
}
.pipe-quick-add > summary::-webkit-details-marker { display: none; }

/* Kanban grid */
.pipe-kanban {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: start;
}
@media (max-width: 960px) {
    .pipe-kanban { grid-template-columns: 1fr; }
}
.pipe-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-height: 200px;
}
.pipe-col-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem;
}
.pipe-col-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.pipe-col-title h5 {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    color: #0f172a;
}
.pipe-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.pipe-dot-slate  { background: #94a3b8; }
.pipe-dot-primary { background: #14a1db; }
.pipe-dot-green  { background: #10b981; }
.pipe-count {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    line-height: 1rem;
}
.pipe-count-slate  { background: #e8e8ea; color: #475569; }
.pipe-count-primary { background: #eef2ff; color: #14a1db; }
.pipe-count-green  { background: #ecfdf5; color: #059669; }
.pipe-col-menu {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    letter-spacing: 2px;
    font-family: inherit;
}
.pipe-col-menu:hover { color: #14a1db; background: #f3f3f5; }
.pipe-col-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 80px;
}

/* ── Applicants Unified List Layout ─────────────────────── */
.pipe-list-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.pipe-list-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 260px;
}
.pipe-list-info {
    min-width: 0;
}
.pipe-list-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.5rem;
    min-width: 0;
}
.pipe-list-name-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.15rem;
}
.pipe-list-meta {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pipe-time-label {
    align-self: flex-end;
    margin-bottom: 0.15rem;
}
.pipe-list-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    flex-shrink: 0;
    max-width: 280px;
}
.pipe-list-actions .hr-btn-sm {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.pipe-list-actions .hr-btn-sm:hover {
    background: #eef2ff;
    color: #14a1db;
}
.pipe-list-actions .hr-btn-sm.hr-btn-approve {
    background: #14a1db;
    color: #fff;
}
.pipe-list-actions .hr-btn-sm.hr-btn-approve:hover {
    background: #1276c2;
}
.pipe-list-actions .hr-btn-sm.pipe-btn-green {
    background: #10b981;
    color: #fff;
}
.pipe-list-actions .hr-btn-sm.pipe-btn-green:hover {
    background: #059669;
}
.pipe-actions-primary {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.pipe-actions-secondary {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    justify-content: flex-end;
}
.pipe-btn-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.pipe-btn-icon:hover {
    background: #eef2ff;
    color: #14a1db;
    border-color: #c7d2fe;
}
.pipe-list-actions .hr-btn-sm {
    font-size: 0.72rem;
    padding: 5px 11px;
    border-radius: 7px;
    white-space: nowrap;
}
/* Confirm Selection — green outline style, clearly an action */
.pipe-list-actions .hr-btn-sm[data-stage="selected"] {
    background: #f0fdf4;
    color: #15803d;
    border: 1.5px solid #86efac;
    font-weight: 700;
}
.pipe-list-actions .hr-btn-sm[data-stage="selected"]:hover {
    background: #dcfce7;
    border-color: #4ade80;
}
@media (max-width: 900px) {
    .pipe-list-row { flex-direction: column; align-items: flex-start; }
    .pipe-list-left { max-width: none; }
    .pipe-list-center { justify-content: flex-start; padding: 0; }
    .pipe-list-actions { align-self: flex-end; }
}

/* Stage progress track */
.pipe-stage-track {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 0.3rem;
}
.pipe-step {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    position: relative;
}
.pipe-step + .pipe-step {
    margin-left: 0.2rem;
}
.pipe-step + .pipe-step::before {
    content: '';
    width: 14px;
    height: 2px;
    background: #e2e8f0;
    margin-right: 0.15rem;
    flex-shrink: 0;
}
.pipe-step.pipe-step-done + .pipe-step::before { background: #10b981; }
.pipe-step.pipe-step-done + .pipe-step.pipe-step-current::before { background: #10b981; }
.pipe-step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #e2e8f0;
    transition: background 0.15s;
}
.pipe-step-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
}
.pipe-step-done .pipe-step-dot {
    background: #10b981;
}
.pipe-step-done .pipe-step-label {
    color: #10b981;
}
.pipe-step-current .pipe-step-dot {
    background: #14a1db;
    box-shadow: 0 0 0 3px rgba(20, 161, 219,0.18);
}
.pipe-step-current .pipe-step-label {
    color: #4338ca;
    font-weight: 800;
}
.pipe-step-pending .pipe-step-dot {
    background: #e2e8f0;
    border: 1.5px solid #cbd5e1;
}
.pipe-step-pending .pipe-step-label {
    color: #d1d5db;
}

/* ── Lumina-inspired Pipeline Layout ─────────────────────── */
.lum-pipe-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.lum-pipe-subtabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e2e8f0;
}
.lum-pipe-subtab {
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    padding: 0.45rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
    white-space: nowrap;
}
.lum-pipe-subtab:hover { color: #475569; }
.lum-pipe-subtab.active {
    color: #4648d4;
    border-bottom-color: #4648d4;
    font-weight: 700;
}
.lum-pipe-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #4648d4;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.45rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.lum-pipe-add-btn:hover { background: #3730a3; }
.lum-pipe-filters {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}
.lum-filter-search {
    flex: 1;
    min-width: 200px;
    position: relative;
    display: flex;
    align-items: center;
}
.lum-search-icon {
    position: absolute;
    left: 0.75rem;
    color: #94a3b8;
    pointer-events: none;
    flex-shrink: 0;
}
.lum-search-input {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.45rem 0.75rem 0.45rem 2.25rem;
    font-size: 0.82rem;
    font-family: inherit;
    background: #f8f9fa;
    color: #1e293b;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.lum-search-input:focus {
    border-color: #a5b4fc;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(20, 161, 219,0.1);
}
.lum-filter-selects { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.lum-filter-select {
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    font-family: inherit;
    background: #fff;
    color: #374151;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
    max-width: 170px;
}
.lum-filter-select:focus { border-color: #a5b4fc; }
.lum-filter-clear {
    width: auto;
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    font-family: inherit;
    background: #fff;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.lum-filter-clear:hover { background: #f1f5f9; border-color: #cbd5e1; color: #1e293b; }
/* ── Candidate Management – Lumina v2 ──────────────────────── */
/* Shared table wrapper */
.lum-pipe-table-wrap {
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
/* Table header */
.lum-pipe-table-hdr {
    display: grid;
    grid-template-columns: 1.3fr 140px 1fr 140px 1.1fr;
    padding: 0.85rem 2rem;
    background: rgba(248,249,250,0.6);
    border-bottom: 1px solid #e2e8f0;
    gap: 1rem;
    align-items: center;
}
.lum-pipe-table-hdr > div {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
/* Rows */
.lum-pipe-list {}
.lum-pipe-row {
    display: grid;
    grid-template-columns: 1.3fr 140px 1fr 140px 1.1fr;
    padding: 0.85rem 2rem;
    gap: 1rem;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.12s;
}
.lum-pipe-row > div { min-width: 0; }
.lum-pipe-row:last-child { border-bottom: none; }
.lum-pipe-row:hover { background: rgba(241,245,249,0.5); }
/* Date-group section headers (Today / Yesterday / Earlier This Week / Older) */
.lum-pipe-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 2rem;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
}
.lum-pipe-group-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}
.lum-pipe-group-count {
    font-size: 0.64rem;
    font-weight: 700;
    color: #64748b;
    background: rgba(15,23,42,0.06);
    border-radius: 999px;
    padding: 1px 8px;
    line-height: 1.5;
}
.lum-pipe-group-today .lum-pipe-group-label { color: #1276c2; }
.lum-pipe-group-today .lum-pipe-group-count { color: #1276c2; background: rgba(18, 118, 194,0.1); }
.lum-pipe-group-today { background: #eef8fd; }
/* Candidate column */
.lum-col-candidate {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.lum-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.lum-candidate-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #191c1d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lum-candidate-sub {
    font-size: 0.72rem;
    font-weight: 400;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.15rem;
}
/* Let the name/email/job wrapper shrink so all three lines truncate with ellipsis */
.lum-candidate-meta { min-width: 0; flex: 1 1 auto; }
/* Position · department the candidate applied for */
.lum-candidate-job {
    font-size: 0.72rem;
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lum-candidate-pos { font-weight: 600; color: #1276c2; }
.lum-candidate-dept { color: #64748b; }
.lum-candidate-jobsep { color: #cbd5e1; }
/* Status column */
.lum-col-status { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.2rem; }
.lum-stage-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 0.65rem;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}
.lum-stage-applied, .lum-stage-form_in_progress { background: #dbeafe; color: #1e40af; }
.lum-stage-form_sent { background: #fef3c7; color: #92400e; }
.lum-stage-form_submitted { background: #dcf1fb; color: #0a5e88; }
.lum-stage-shortlisted { background: #eef8fd; color: #1488c7; }
.lum-stage-interview { background: #fef3c7; color: #92400e; }
.lum-stage-selected, .lum-stage-offer_accepted { background: #dcfce7; color: #15803d; }
.lum-stage-offer_sent { background: #dcfce7; color: #15803d; }
.lum-stage-onboarding, .lum-stage-joined { background: #ccfbf1; color: #134e4a; }
.lum-stage-on_hold { background: #fef3c7; color: #92400e; }
.lum-stage-rejected, .lum-stage-offer_declined { background: #fee2e2; color: #991b1b; }
.lum-stage-completed { background: #dcfce7; color: #15803d; }
/* Review status badges for form_submitted workflow */
.lum-review-badge { font-size: 0.72rem; padding: 2px 7px; border-radius: 8px; display: inline-block; font-weight: 600; }
.lum-review-awaiting { background: #fef3c7; color: #92400e; }
.lum-review-under { background: #dbeafe; color: #1e40af; }
.lum-review-done { background: #dcfce7; color: #166534; }
.lum-stage-pill-edit { cursor: pointer; }
.lum-stage-pill-edit:hover { opacity: 0.82; }
/* Stage dropdown overlay — floats over layout */
.lum-stage-wrap { position: relative; }
.lum-stage-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
    max-height: 280px;
    overflow-y: auto;
}
.lum-stage-opt {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    color: #334155;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
    white-space: nowrap;
}
.lum-stage-opt:hover { background: #eef2ff; color: #4648d4; }
.lum-stage-opt-current { background: #f1f5f9; color: #94a3b8; pointer-events: none; }
.lum-stage-opt-cancel { color: #94a3b8; border-top: 1px solid #f1f5f9; margin-top: 2px; padding-top: 0.4rem; }
.lum-stage-opt-cancel:hover { background: #fef2f2; color: #dc2626; }
/* Progress column */
.lum-col-progress { min-width: 0; }
/* Simplified progress — label + % on top, bar below, no track labels */
.lum-prog-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.3rem;
}
.lum-prog-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
}
.lum-prog-pct {
    font-size: 0.62rem;
    font-weight: 700;
    color: #94a3b8;
}
.lum-prog-bar {
    height: 5px;
    background: #e7e8e9;
    border-radius: 999px;
    overflow: hidden;
}
.lum-prog-fill {
    height: 100%;
    background: #4648d4;
    border-radius: 999px;
    transition: width 0.3s ease;
}
/* Track labels hidden in new design — kept for backwards compat */
.lum-prog-track { display: none; }
.lum-track-current {}
/* Owner/Activity column */
.lum-col-owner { min-width: 0; }
.lum-owner-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #191c1d;
}
.lum-owner-time {
    font-size: 0.72rem;
    color: #94a3b8;
    display: block;
    margin-top: 0.15rem;
}
.lum-owner-warning {
    font-size: 0.8rem;
    font-weight: 600;
    font-style: italic;
    color: #94a3b8;
}
/* Actions column — icon buttons only */
.lum-col-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    flex-wrap: nowrap;
}
/* Icon-only action buttons */
.lum-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
    padding: 0;
    flex-shrink: 0;
}
.lum-action-icon:hover { background: #e7e8e9; color: #4648d4; }
.lum-action-icon.lum-icon-primary { color: #4648d4; }
.lum-action-icon.lum-icon-secondary { color: #765b00; }
.lum-action-icon.lum-icon-danger { color: #dc2626; }
/* Compact text action button (text + icon together) */
.lum-action-text {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: 1.5px solid #e2e8f0;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    flex-shrink: 0;
}
.lum-action-text:hover { background: #eef2ff; color: #4648d4; border-color: #a5b4fc; }
.lum-action-text svg { flex-shrink: 0; }
.lum-action-text.lum-text-primary {
    background: #4648d4;
    color: #fff;
    border-color: #4648d4;
}
.lum-action-text.lum-text-primary:hover { background: #3730a3; border-color: #3730a3; }
/* Text action buttons — kept for backwards compat */
.lum-action-btn {
    background: none;
    border: none;
    color: #4648d4;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background 0.15s;
    white-space: nowrap;
}
.lum-action-btn:hover { background: #eef2ff; }
.lum-action-btn.lum-action-primary {
    background: #4648d4;
    color: #fff;
    padding: 0.3rem 0.75rem;
    border-radius: 8px;
}
.lum-action-btn.lum-action-primary:hover { background: #3730a3; }
.lum-action-btn.lum-action-outline {
    background: transparent;
    color: #4648d4;
    border: 1.5px solid #c7d2fe;
    padding: 0.22rem 0.6rem;
    border-radius: 7px;
}
.lum-action-btn.lum-action-outline:hover { background: #eef2ff; border-color: #a5b4fc; }
.lum-action-btn.lum-action-green {
    background: #f0fdf4;
    color: #15803d;
    border: 1.5px solid #86efac;
    padding: 0.25rem 0.6rem;
    border-radius: 7px;
    font-weight: 700;
}
.lum-action-btn.lum-action-green:hover { background: #dcfce7; border-color: #4ade80; }
.lum-actions-sep {
    width: 1px;
    height: 14px;
    background: #e2e8f0;
    flex-shrink: 0;
    margin: 0 0.1rem;
}
/* Old hr-btn-sm inside new lum-col-actions picks up lum styling */
.lum-col-actions .hr-btn-sm {
    background: none;
    border: none;
    color: #4648d4;
    font-size: 0.77rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    transition: background 0.15s;
    white-space: nowrap;
}
.lum-col-actions .hr-btn-sm:hover { background: #eef2ff; }
.lum-col-actions .hr-btn-sm.hr-btn-approve {
    background: #4648d4;
    color: #fff;
    padding: 0.28rem 0.7rem;
    border-radius: 7px;
}
.lum-col-actions .hr-btn-sm.hr-btn-approve:hover { background: #3730a3; }
.lum-col-actions .hr-btn-sm.pipe-btn-green {
    background: #10b981;
    color: #fff;
    padding: 0.28rem 0.7rem;
    border-radius: 7px;
}
/* Stat cards — new white-card style with icon circle */
.lum-stat-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.lum-stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.lum-stat-card-body {}
.lum-stat-label {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin-bottom: 0.35rem;
}
.lum-stat-value {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
}
.lum-stat-card-vacancies .lum-stat-value { color: #4648d4; }
.lum-stat-card-interviews .lum-stat-value { color: #765b00; }
.lum-stat-card-applications .lum-stat-value { color: #712ae2; }
.lum-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.3rem;
}
.lum-stat-card-vacancies .lum-stat-icon { background: rgba(70,72,212,0.1); color: #4648d4; }
.lum-stat-card-interviews .lum-stat-icon { background: rgba(118,91,0,0.1); color: #765b00; }
.lum-stat-card-applications .lum-stat-icon { background: rgba(113,42,226,0.1); color: #712ae2; }
/* Bottom insight cards */
.lum-bottom-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.lum-insight-card {
    border-radius: 16px;
    padding: 2rem;
}
.lum-insight-card-primary {
    background: #4648d4;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.lum-insight-card-primary .lum-insight-bg {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 7rem;
    opacity: 0.08;
    line-height: 1;
    padding: 1rem;
    pointer-events: none;
}
.lum-insight-card-primary h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; }
.lum-insight-card-primary p { font-size: 0.82rem; color: rgba(255,255,255,0.75); max-width: 320px; line-height: 1.5; margin-bottom: 1.25rem; }
.lum-insight-btn {
    display: inline-block;
    background: #fff;
    color: #4648d4;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.5rem 1.25rem;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.lum-insight-btn:hover { background: #eef2ff; }
.lum-insight-card-secondary {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.lum-insight-card-secondary .lum-insight-accent {
    width: 3px;
    height: 36px;
    background: #765b00;
    border-radius: 999px;
    flex-shrink: 0;
}
.lum-insight-card-secondary h4 { font-size: 1.05rem; font-weight: 700; color: #191c1d; }
.lum-insight-card-secondary p { font-size: 0.82rem; color: #94a3b8; line-height: 1.5; margin: 0.75rem 0; }
.lum-insight-link {
    color: #4648d4;
    font-weight: 700;
    font-size: 0.82rem;
    text-decoration: none;
    cursor: pointer;
}
.lum-insight-link:hover { text-decoration: underline; }
/* Pagination */
.lum-pagination {
    padding: 0.75rem 2rem;
    background: rgba(248,249,250,0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f1f5f9;
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
}
.lum-pagination-btns { display: flex; gap: 0.35rem; }
.lum-page-btn {
    padding: 0.3rem 0.7rem;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}
.lum-page-btn:hover { background: #f8f9fa; }
.lum-page-btn.active { background: #4648d4; color: #fff; border-color: #4648d4; }
.lum-page-btn:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 1100px) {
    .lum-pipe-table-hdr,
    .lum-pipe-row { grid-template-columns: 2fr 1fr 1.8fr 1.2fr 1fr; }
}
/* Grid variants for Job Postings and Applicant Database tables */
.lum-grid-jobs { grid-template-columns: 2fr 90px 130px 140px 120px; }
.lum-grid-applicants { grid-template-columns: 1.5fr 1fr 190px 0.9fr 90px; }
/* Job meta line inside candidate column */
.lum-job-meta {
    font-size: 0.7rem;
    font-weight: 400;
    color: #b0bac6;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.1rem;
}
.lum-job-meta svg { flex-shrink: 0; opacity: 0.6; }
/* Stats chip in job row */
.lum-stats-inline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.72rem;
}
.lum-stat-num { font-weight: 800; color: #1e293b; }
.lum-stat-txt { font-weight: 500; color: #94a3b8; margin-left: 0.15rem; }
/* Applicant row meta */
.lum-ap-dept {
    font-size: 0.75rem;
    font-weight: 500;
    color: #475569;
}
.lum-ap-job {
    font-size: 0.68rem;
    font-weight: 400;
    color: #94a3b8;
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Applicant row — Job title column */
.ap-col-job { display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 2px; }
.ap-job-title {
    font-size: 0.78rem; font-weight: 600; color: #334155;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
}
.ap-job-sub {
    font-size: 0.7rem; font-weight: 400; color: #94a3b8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
}
.ap-no-job { font-size: 0.75rem; color: #cbd5e1; font-style: italic; }
/* Applicant row — Department column */
.ap-col-dept { display: flex; align-items: center; min-width: 0; }
/* Applicant row — Status badge (inline with name, only for non-active) */
.ap-status-badge {
    display: inline-block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 1px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle;
}
.ap-status-hired { background: #d1fae5; color: #065f46; }
.ap-status-blacklisted { background: #fee2e2; color: #991b1b; }
.ap-status-inactive { background: #f1f5f9; color: #64748b; }
/* Applications count badge */
.ap-apps-count {
    display: inline-block; font-size: 0.6rem; font-weight: 600; color: #14a1db;
    background: #eef2ff; padding: 1px 5px; border-radius: 4px; margin-left: 4px; vertical-align: middle;
}
/* Pipeline progress indicator */
.ap-col-pipeline { display: flex; align-items: center; min-width: 0; }
.ap-pipe-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%;
}
.ap-pipe-track {
    display: flex; align-items: center; gap: 0; width: 100%;
}
.ap-pipe-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: #e2e8f0; border: 1.5px solid #cbd5e1; box-sizing: border-box;
}
.ap-pipe-dot-done { background: #a5b4fc; border-color: #5cc3ea; }
.ap-pipe-dot-active {
    width: 10px; height: 10px; background: #1276c2; border-color: #1276c2;
    box-shadow: 0 0 0 2px rgba(18, 118, 194,0.2);
}
.ap-pipe-dot-rejected { background: #fecaca; border-color: #f87171; }
.ap-pipe-line { flex: 1; height: 2px; background: #e2e8f0; min-width: 2px; }
.ap-pipe-line-rejected { background: #fecaca; }
.ap-pipe-label {
    font-size: 0.65rem; font-weight: 600; color: #1276c2; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.ap-pipe-label-rejected { color: #dc2626; }
.ap-pipe-na { font-size: 0.75rem; color: #cbd5e1; }
@media (max-width: 900px) {
    .lum-pipe-table-hdr { display: none; }
    .lum-pipe-row,
    .lum-grid-jobs,
    .lum-grid-applicants { grid-template-columns: 1fr; gap: 0.5rem; padding: 0.75rem 1rem; }
    .lum-col-actions { justify-content: flex-start; }
    .lum-pipe-header { flex-direction: column; align-items: flex-start; }
    .lum-stat-cards { grid-template-columns: 1fr; }
    .lum-bottom-cards { grid-template-columns: 1fr; }
}

/* DEPRECATED: Pipeline card classes — replaced by .rec-card .rec-card-pipe */
.hr-rec-card {
    background: #fff;
    border: none;
    border-radius: 0.75rem;
    padding: 1.25rem;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border-left: 4px solid #cbd5e1;
    position: relative;
}
.hr-rec-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}
.hr-rec-card.pipe-card-interview { border-left-color: #14a1db; }
.hr-rec-card.pipe-card-selected  { border-left-color: #10b981; }

.hr-rec-card-name {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.hr-rec-card-name .hr-rec-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px #edeef0;
}
.hr-rec-card-name .pipe-card-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.hr-rec-card-name .pipe-card-info .pipe-card-name-text {
    font-weight: 700;
    font-size: 0.875rem;
    color: #1a1c1d;
    transition: color 0.15s;
    line-height: 1.25;
}
.hr-rec-card:hover .pipe-card-name-text {
    color: #14a1db;
}
.hr-rec-card-name .pipe-card-info .pipe-card-role {
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1rem;
}
.pipe-card-time {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    background: #f3f3f5;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
    margin-left: auto;
    white-space: nowrap;
    line-height: 1;
    align-self: flex-start;
}
.pipe-card-time.pipe-time-today {
    color: #14a1db;
    background: #eef2ff;
}
.pipe-card-time.pipe-time-success {
    color: #059669;
    background: #ecfdf5;
}
.hr-rec-card-meta {
    font-size: 0.75rem;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 1rem;
}
.hr-rec-card-meta .pipe-meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.hr-rec-card-meta .pipe-meta-row svg {
    flex-shrink: 0;
    opacity: 0.5;
}
/* Stage pill inside meta */
.hr-rec-card-meta .hr-pill {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    display: inline-block;
}
.hr-rec-card-actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f8fafc;
    flex-wrap: wrap;
}
.hr-rec-card-actions .hr-btn-sm {
    flex: 1 !important;
    padding: 0.375rem 0.5rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    background: #f8fafc !important;
    color: #475569 !important;
    border: none !important;
    cursor: pointer !important;
    text-align: center !important;
    font-family: inherit !important;
    transition: background 0.15s, color 0.15s !important;
}
.hr-rec-card-actions .hr-btn-sm:hover {
    background: #eef2ff !important;
    color: #14a1db !important;
}
.hr-rec-card-actions .hr-btn-sm.hr-btn-approve {
    background: #14a1db !important;
    color: #fff !important;
}
.hr-rec-card-actions .hr-btn-sm.hr-btn-approve:hover {
    background: #1276c2 !important;
}
.hr-rec-card-actions .hr-btn-sm.pipe-btn-green {
    background: #10b981 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    padding: 0.5rem !important;
}
.hr-rec-card-actions .hr-btn-sm.pipe-btn-green:hover {
    background: #059669 !important;
}
.hr-rec-empty {
    text-align: center;
    color: #9ca3af;
    font-size: 0.875rem;
    padding: 2rem 0.5rem;
}
.pipe-empty-drop {
    border: 2px dashed #e2e8f0;
    border-radius: 0.75rem;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.pipe-empty-drop:hover {
    border-color: rgba(75,41,192,0.4);
    background: rgba(230,222,255,0.2);
}
.pipe-empty-drop:hover svg {
    transform: scale(1.1);
}
.pipe-empty-drop svg {
    margin-bottom: 0.5rem;
    transition: transform 0.15s;
}
.pipe-empty-drop span {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ── Leave Request Sections ───────────────────────────────── */
.hr-leave-section {
    margin-bottom: 1rem;
}
.hr-leave-section:last-child {
    margin-bottom: 0;
}
.hr-leave-section-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    background: var(--hr-card-bg, #faf9ff);
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 8px;
    margin-bottom: 0.15rem;
}
.hr-leave-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--hr-blue, #14a1db);
    display: flex;
    align-items: center;
    gap: 4px;
}
.hr-leave-section-sub {
    font-size: 0.68rem;
    color: var(--hr-muted, #8b80b0);
    flex: 1;
}
.hr-leave-section-count {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--hr-muted, #8b80b0);
    background: var(--hr-border, #dcf1fb);
    border-radius: 999px;
    padding: 0 6px;
    line-height: 1.6;
}
.hr-leave-section .hr-leave-item:first-of-type {
    padding-top: 0.5rem;
}

/* ── Segmented scope switcher (My requests / Needs my action / All) ── */
.hr-leave-scope-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}
.hr-leave-scope-btn {
    width: auto;                /* override the global button{width:100%} rule */
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--hr-border, #dcf1fb);
    background: #fff;
    color: var(--hr-muted, #6b7280);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.hr-leave-scope-btn:hover { background: var(--hr-card-bg, #faf9ff); }
.hr-leave-scope-btn.active {
    background: var(--hr-blue, #14a1db);
    color: #fff;
    border-color: var(--hr-blue, #14a1db);
}
.hr-leave-scope-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(20, 161, 219, 0.12);
    color: inherit;
}
.hr-leave-scope-btn.active .hr-leave-scope-count { background: rgba(255, 255, 255, 0.28); }
.hr-leave-scope-btn.needs-me { border-color: #fca5a5; color: #b91c1c; }
.hr-leave-scope-btn.needs-me .hr-leave-scope-count { background: #dc2626; color: #fff; }
.hr-leave-scope-btn.needs-me.active { background: #dc2626; color: #fff; border-color: #dc2626; }
.hr-leave-scope-btn.needs-me.active .hr-leave-scope-count { background: rgba(255, 255, 255, 0.28); }

/* ── Collapsible approval-detail trail (keeps the stepper glanceable) ── */
.hr-trail-details { margin-top: 0.3rem; }
.hr-trail-summary {
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--hr-blue, #14a1db);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    user-select: none;
}
.hr-trail-summary::-webkit-details-marker { display: none; }
.hr-trail-summary::before { content: '▸'; font-size: 0.6rem; transition: transform .15s; }
.hr-trail-details[open] .hr-trail-summary::before { transform: rotate(90deg); }
.hr-trail-body { margin-top: 0.3rem; display: flex; flex-direction: column; gap: 0.2rem; }

/* ── Reclaimed left column: needs-action card + Who's Out list ── */
#hrLeaveLeftExtras:empty { display: none; }
#hrLeaveLeftExtras > section { margin-top: 16px; }
.hr-leave-action-card { border-left: 3px solid #dc2626; }
.hr-leave-action-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 0.7rem; }
.hr-leave-action-count {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #fee2e2; color: #b91c1c;
    font-size: 1.05rem; font-weight: 700;
}
.hr-leave-action-title { font-size: 0.9rem; font-weight: 700; color: var(--hr-text, #1f2937); }
.hr-leave-action-sub { font-size: 0.72rem; color: var(--hr-muted, #6b7280); }
.hr-leave-action-btn {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 8px; border: none;
    background: #dc2626; color: #fff;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    transition: background .15s;
}
.hr-leave-action-btn:hover { background: #b91c1c; }
.hr-whosout-list { display: flex; flex-direction: column; gap: 0.55rem; }
.hr-whosout-item { display: flex; align-items: center; gap: 10px; }
.hr-whosout-avatar {
    flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.7rem; font-weight: 700;
}
.hr-whosout-info { min-width: 0; }
.hr-whosout-name { font-size: 0.82rem; font-weight: 600; color: var(--hr-text, #1f2937); display: flex; align-items: center; gap: 6px; }
.hr-whosout-you { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; background: var(--hr-border, #dcf1fb); color: var(--hr-blue, #14a1db); border-radius: 999px; padding: 1px 6px; }
.hr-whosout-meta { font-size: 0.72rem; color: var(--hr-muted, #6b7280); }
.hr-whosout-more { font-size: 0.72rem; color: var(--hr-muted, #6b7280); padding-top: 0.2rem; }

/* ── Option-A layout: top ecosystem band + full-width workspace ── */
/* Leave ecosystem: a full-width Balance row (responsive equal-card grid)
   stacked above the Who's-Out row. Comp-Off is the CO card in the grid — no
   separate half-empty panel. */
.hr-leave-eco { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.hr-leave-eco > .hr-eco-balance { width: 100%; }
.hr-eco-balance .hrms-balance-grid { display: grid; gap: 16px; align-items: stretch; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hr-eco-balance .hrms-balance-item { height: 100%; }
@media (max-width: 1024px) { .hr-eco-balance .hrms-balance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .hr-eco-balance .hrms-balance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px)  { .hr-eco-balance .hrms-balance-grid { grid-template-columns: 1fr; } }
.hr-leave-eco > #hrLeaveLeftExtras { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; }
.hr-leave-eco > #hrLeaveLeftExtras > section { flex: 1 1 300px; min-width: 0; margin-top: 0; }
.hr-leave-workspace { width: 100%; }

/* ── Approvals tab: Leave | Permission side by side ── */
.hr-approvals-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.hr-approvals-2col > .hrms-panel { margin-top: 0; }
.hr-appr-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; background: var(--hr-border, #dcf1fb); color: var(--hr-blue, #14a1db); margin-left: 6px; vertical-align: middle; }
@media (max-width: 900px) { .hr-approvals-2col { grid-template-columns: 1fr; } }

/* ── Approval workspace: request table ── */
.hr-lt-scroll { width: 100%; overflow-x: auto; }
.hr-lt-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.hr-lt-table thead th { text-align: left; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hr-muted, #8b80b0); padding: 0.45rem 0.55rem; border-bottom: 1px solid var(--hr-border, #dcf1fb); white-space: nowrap; }
.hr-lt-table td { padding: 0.6rem 0.55rem; border-bottom: 1px solid var(--hr-border, #dcf1fb); vertical-align: middle; font-size: 0.8rem; }
.hr-lt-c-chev { width: 28px; text-align: center; }
.hr-lt-c-emp { width: 25%; }
.hr-lt-c-type { width: 9%; }
.hr-lt-c-dates { width: 19%; white-space: nowrap; }
.hr-lt-c-stage { width: 15%; }
.hr-lt-c-status { width: 17%; }
.hr-lt-c-applied { width: 11%; white-space: nowrap; color: var(--hr-muted, #8b80b0); font-size: 0.74rem; }
.hr-lt-row { cursor: pointer; }
.hr-lt-row.hr-lt-norow { cursor: default; }
.hr-lt-row:hover { background: var(--hr-card-bg, #faf9ff); }
.hr-lt-row.expanded { background: var(--hr-card-bg, #faf9ff); }
.hr-lt-chev { color: var(--hr-muted, #8b80b0); transition: transform .15s; vertical-align: middle; }
.hr-lt-row.expanded .hr-lt-chev { transform: rotate(90deg); }
.hr-lt-avatar { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: middle; }
.hr-lt-emp-txt { display: inline-flex; flex-direction: column; vertical-align: middle; max-width: calc(100% - 18px); }
.hr-lt-name { font-weight: 600; color: var(--hr-text, #1f2937); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-lt-dept { font-size: 0.66rem; color: var(--hr-muted, #8b80b0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-lt-muted { color: var(--hr-muted, #8b80b0); }
.hr-lt-stage { display: inline-flex; align-items: center; }
.hr-lt-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.hr-lt-dot.done { background: #10b981; }
.hr-lt-dot.current { background: #f59e0b; }
.hr-lt-dot.pending { background: transparent; border: 1.5px solid #cbd5e1; }
.hr-lt-dot.rejected { background: #ef4444; }
.hr-lt-seg { display: inline-block; width: 9px; height: 2px; background: #e2e8f0; }
.hr-lt-n { font-size: 0.64rem; color: var(--hr-muted, #8b80b0); margin-left: 6px; }
.hr-lt-detail { display: none; }
.hr-lt-detail.open { display: table-row; }
.hr-lt-detail-cell { background: var(--hr-card-bg, #faf9ff); padding: 0.6rem 0.85rem 0.85rem 2.2rem !important; border-bottom: 1px solid var(--hr-border, #dcf1fb); }
.hr-lt-detail-flow { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hr-blue, #14a1db); margin-bottom: 0.5rem; }
.hr-lt-reason { font-size: 0.78rem; color: var(--hr-text, #1f2937); margin: 0.4rem 0; }
.hr-lt-reason-lbl { font-weight: 600; color: var(--hr-muted, #6b7280); }
/* Balance cards keep FULL detail (allocated / tag / eligibility + CL-provisional
   notes). Cap the Who's-Out list height. */
.hr-leave-eco .hr-whosout-list { max-height: 200px; overflow: auto; }

/* ── Date-group dividers (requests grouped by applied date) ── */
.hr-leave-date-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0.85rem 0 0.3rem;
    padding: 0 0.15rem;
}
.hr-leave-date-group:first-of-type {
    margin-top: 0.45rem;
}
.hr-leave-date-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hr-muted, #8b80b0);
    white-space: nowrap;
}
.hr-leave-date-count {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--hr-blue, #14a1db);
    background: var(--hr-border, #dcf1fb);
    border-radius: 999px;
    padding: 0 6px;
    line-height: 1.7;
    min-width: 16px;
    text-align: center;
}
.hr-leave-date-line {
    flex: 1;
    height: 1px;
    background: var(--hr-border, #dcf1fb);
}

/* ── Small Buttons (Approve/Reject) ───────────────────────── */
.hr-btn-sm {
    width: auto !important;
    padding: 0.3rem 0.7rem !important;
    border-radius: 7px !important;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    border: none !important;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease, background 0.2s ease !important;
}
.hr-btn-sm:hover {
    transform: translateY(-2px) scale(1.04) !important;
    filter: none !important;
}
.hr-btn-sm:active {
    transform: translateY(1px) scale(0.96) !important;
    transition-duration: 0.08s !important;
}
.hr-btn-approve { background: #D1FAE5 !important; color: #065F46 !important; }
.hr-btn-approve:hover { background: #A7F3D0 !important; box-shadow: 0 4px 14px rgba(16,185,129,0.35) !important; }
.hr-btn-reject  { background: #FEE2E2 !important; color: #991B1B !important; }
.hr-btn-reject:hover { background: #FECACA !important; box-shadow: 0 4px 14px rgba(239,68,68,0.3) !important; }
.hr-btn-info    { background: #DBEAFE !important; color: #1E40AF !important; }
.hr-btn-info:hover { background: #BFDBFE !important; box-shadow: 0 4px 14px rgba(20, 161, 219,0.3) !important; }

/* ── Salary Section Labels ── */
.hr-salary-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hr-muted, #8b80b0);
    grid-column: 1 / -1;
    margin-top: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--hr-border, #dcf1fb);
}

/* ── LOP Badge ── */
.hr-lop-badge {
    background: #FEF2F2;
    color: #DC2626;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'DM Mono', monospace;
}

/* ── Payroll Table Compact ── */
#hrPanePayroll .hrms-panel table {
    min-width: 720px;
}
#hrPanePayroll .hrms-panel table th {
    padding: 0.5rem 0.6rem 0.6rem;
    font-size: 0.7rem;
}
#hrPanePayroll .hrms-panel table td {
    padding: 0.55rem 0.6rem;
}
#hrPayrollRunsBody td {
    font-size: 0.78rem;
    white-space: nowrap;
}
.hr-payroll-month {
    font-family: 'DM Mono', monospace;
    font-size: 0.74rem;
    color: var(--hr-muted);
}
/* Right-align money column headers to match data */
#hrPanePayroll .hrms-panel table th:nth-child(3),
#hrPanePayroll .hrms-panel table th:nth-child(4),
#hrPanePayroll .hrms-panel table th:nth-child(5) {
    text-align: right;
}
#hrPanePayroll .hrms-panel table th:nth-child(6) {
    text-align: center;
}
.hr-payroll-money {
    font-family: 'DM Mono', monospace;
    font-size: 0.76rem;
    text-align: right;
}
.hr-money-gross  { color: #059669; }
.hr-money-deduct { color: #dc2626; }
.hr-money-net    { font-weight: 700; color: var(--hr-text); }
.hr-payroll-lop  { text-align: center; }
.hr-payroll-actions {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

/* ── Payroll Table Zebra Striping & Hover ── */
#hrPayrollRunsBody tr:nth-child(even) {
    background: rgba(20, 161, 219,0.02);
}
#hrPayrollRunsBody tr:hover {
    background: rgba(20, 161, 219,0.05);
}

/* ── Payroll Header Layout ── */
.hr-payroll-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.hr-payroll-header p {
    flex-basis: auto;
}
.hr-payroll-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.hr-annual-tax-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-left: 0.5rem;
    border-left: 1px solid #c9e9f7;
    margin-left: 0.25rem;
}
.hr-annual-tax-select {
    height: 2.1rem;
    border-radius: 8px;
    border: 1px solid #c9e9f7;
    padding: 0 0.5rem;
    font-size: 0.78rem;
    color: var(--hr-text, #1e1b4b);
    background: #fff;
    cursor: pointer;
}
.hr-payroll-month-input {
    height: 2.1rem;
    border-radius: 8px;
    border: 1px solid #c9e9f7;
    padding: 0 0.6rem;
    font-size: 0.8rem;
    font-family: inherit;
    width: auto;
    background: var(--hr-card-bg, #fff);
    color: var(--hr-text);
}
.hr-payroll-month-input:focus {
    outline: none;
    border-color: var(--hr-accent, #3bb0e5);
    box-shadow: 0 0 0 3px rgba(59, 176, 229,0.12);
}
.hr-payroll-generate-btn {
    white-space: nowrap;
    min-width: max-content;
    height: 2.1rem;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    background: #1488c7;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    margin-bottom: 3px;
}
.hr-payroll-generate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 161, 219,0.3);
}

/* ── Download PDF Report Button ── */
.hr-payroll-report-btn {
    white-space: nowrap;
    min-width: max-content;
    padding: 0.45rem 1rem;
    border-radius: 8px;
    border: 1.5px solid var(--hr-purple, #1488c7);
    background: transparent;
    color: var(--hr-purple, #1488c7);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}
.hr-payroll-report-btn:hover {
    background: var(--hr-purple, #1488c7);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 161, 219,0.3);
}

/* ── Payroll Report Filter Panel ── */
.hr-payroll-report-filters {
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
    padding: 1rem 1.15rem;
    margin-bottom: 0.75rem;
    background: var(--hr-bg, #eef8fd);
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 12px;
}
.hr-payroll-report-filters.hidden { display: none; }
.hr-payroll-report-filters label {
    display: grid;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hr-muted, #8b80b0);
}
.hr-payroll-report-filters input,
.hr-payroll-report-filters select {
    width: 100%;
    height: 2.1rem;
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 8px;
    padding: 0 0.6rem;
    font-size: 0.8rem;
    font-family: inherit;
    background: var(--hr-card-bg, #fff);
    color: var(--hr-text, #1e1b4b);
}
.hr-payroll-report-filters input:focus,
.hr-payroll-report-filters select:focus {
    outline: none;
    border-color: var(--hr-accent, #3bb0e5);
    box-shadow: 0 0 0 3px rgba(59, 176, 229,0.12);
}
@media (max-width: 900px) {
    .hr-payroll-report-filters {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Payroll Bars ─────────────────────────────────────────── */
.hr-payroll-bar {
    margin-bottom: 0.7rem;
}
.hr-payroll-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    margin-bottom: 0.3rem;
    color: var(--hr-text);
}
.hr-payroll-label span:last-child {
    font-weight: 600;
}
.hr-bar-bg {
    height: 8px;
    background: #F3F4F6;
    border-radius: 10px;
    overflow: hidden;
}
.hr-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.6s ease;
}

/* ── Forms ─────────────────────────────────────────────────── */
.hrms-form-grid,
.hrms-form-stack {
    display: grid;
    gap: 0.8rem;
}
.hrms-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hrms-form-grid .full {
    grid-column: 1 / -1;
}
.hrms-form-grid label,
.hrms-form-stack label {
    display: grid;
    gap: 0.35rem;
    color: #394962;
    font-size: 0.82rem;
    font-weight: 500;
}
.hrms-form-grid input:not([type="checkbox"]),
.hrms-form-grid select,
.hrms-form-grid textarea,
.hrms-form-stack input:not([type="checkbox"]),
.hrms-form-stack select,
.hrms-form-stack textarea {
    width: 100%;
    border: 1px solid var(--hr-border);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    font-family: inherit;
    background: var(--hr-card-bg);
    color: var(--hr-text);
}
.hrms-form-grid input:not([type="checkbox"]):focus,
.hrms-form-grid select:focus,
.hrms-form-grid textarea:focus,
.hrms-form-stack input:not([type="checkbox"]):focus,
.hrms-form-stack select:focus,
.hrms-form-stack textarea:focus {
    outline: none;
    border-color: var(--hr-accent);
    box-shadow: 0 0 0 3px rgba(59, 176, 229,0.12);
}
/* ── Deduction Toggle Switch ── */
.hr-deduction-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: #394962;
    cursor: pointer;
    user-select: none;
}
.hr-deduction-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.hr-deduction-toggle-track {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    border-radius: 9px;
    background: #d1d5db;
    flex-shrink: 0;
    transition: background 0.2s ease;
}
.hr-deduction-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}
.hr-deduction-label input[type="checkbox"]:checked + .hr-deduction-toggle-track {
    background: var(--hr-accent, #3bb0e5);
}
.hr-deduction-label input[type="checkbox"]:checked + .hr-deduction-toggle-track::after {
    transform: translateX(16px);
}
/* Dim the number input when deduction is disabled */
.hrms-form-grid input[type="number"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f3f4f6;
}

/* ── Payroll Sub-Tabs ── */
.hr-payroll-subtabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: var(--hr-bg, #eef8fd);
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 12px;
    padding: 4px;
}
.hr-payroll-subtab {
    flex: 1;
    padding: 9px 16px;
    border: none;
    background: transparent;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--hr-muted, #8b80b0);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.hr-payroll-subtab:hover {
    color: var(--hr-text, #1e1b4b);
    background: rgba(20, 161, 219,0.06);
}
.hr-payroll-subtab.active {
    background: #fff;
    color: var(--hr-purple, #1488c7);
    box-shadow: 0 1px 4px rgba(20, 161, 219,0.12);
}
.hr-payroll-tab-content.hidden { display: none; }

/* ── Payroll Table Filters (toolbar) ──
 * Designed as a single horizontal row: search (flex-grow), then fixed-width dropdowns.
 * Overrides the global `input, select { width: 100% }` rule so filters don't stack. */
.hr-payroll-filters {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px 0 10px;
    flex-wrap: wrap;
}
.hr-payroll-filters > select,
.hr-payroll-filters > input {
    height: 38px;
    width: auto;
    max-width: none;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0 34px 0 12px;
    font-size: 13px;
    font-family: inherit;
    background-color: #fff;
    color: #1f2937;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.hr-payroll-filters > select {
    flex: 0 0 auto;
    min-width: 170px;
    max-width: 210px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}
.hr-payroll-filters > select:hover { border-color: #a9dcf1; background-color: #faf5ff; }
.hr-payroll-search-input {
    flex: 1 1 260px;
    min-width: 220px;
    padding-left: 38px !important;
    padding-right: 12px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
}
.hr-payroll-filters > select:focus,
.hr-payroll-filters > input:focus {
    outline: none;
    border-color: #1488c7;
    box-shadow: 0 0 0 3px rgba(20, 161, 219, 0.15);
    background-color: #fff;
}
.hr-payroll-filters > select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
@media (max-width: 720px) {
    .hr-payroll-filters { gap: 8px; }
    .hr-payroll-filters > select { flex: 1 1 calc(50% - 4px); min-width: 0; max-width: none; }
    .hr-payroll-search-input { flex: 1 1 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   PREMIUM PAYROLL REDESIGN  —  scoped to #hrPanePayroll
   Elevates the existing violet theme: KPI band, refined toolbar/buttons,
   premium table + empty state, salary & incentives polish. All selectors
   are id-scoped so nothing leaks into other HR panes.
   ════════════════════════════════════════════════════════════════════ */
#hrPanePayroll {
    --pay-shadow-sm: 0 1px 2px rgba(30,27,75,.04), 0 1px 3px rgba(30,27,75,.06);
    --pay-shadow-md: 0 6px 20px -8px rgba(20, 161, 219,.20);
    --pay-shadow-lg: 0 14px 34px -12px rgba(20, 161, 219,.24);
    --pay-ring: 0 0 0 3px rgba(20, 161, 219,.12);
    --pay-grad: #1488c7;
    --pay-border: #dcf1fb;
}

/* ── Subtab nav — elevated segmented control ── */
#hrPanePayroll .hr-payroll-subtabs {
    background: #fff;
    border: 1px solid var(--pay-border);
    box-shadow: var(--pay-shadow-sm);
    padding: 5px;
    gap: 5px;
}
#hrPanePayroll .hr-payroll-subtab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
}
#hrPanePayroll .hr-subtab-ico { font-size: 18px; line-height: 1; }
#hrPanePayroll .hr-payroll-subtab:hover {
    background: rgba(20, 161, 219,.06);
    color: var(--hr-text, #1e1b4b);
}
#hrPanePayroll .hr-payroll-subtab.active,
#hrPanePayroll .hr-payroll-subtab.active:hover {
    background: var(--pay-grad);
    color: #fff;
    box-shadow: var(--pay-shadow-md);
}
#hrPanePayroll .hr-subtab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dcf1fb;
    color: #0e7bb0;
    font-size: 0.64rem;
    font-weight: 700;
    font-family: 'DM Mono', monospace;
}
#hrPanePayroll .hr-subtab-badge[hidden] { display: none; }
#hrPanePayroll .hr-payroll-subtab.active .hr-subtab-badge {
    background: rgba(255,255,255,.25);
    color: #fff;
}

/* ── KPI summary band ── */
#hrPanePayroll .hr-pay-kpis {
    display: grid;
    grid-template-columns: 1.25fr repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
#hrPanePayroll .hr-pay-kpis[hidden] { display: none; }
#hrPanePayroll .hr-pay-kpi {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--pay-border);
    border-radius: 16px;
    box-shadow: var(--pay-shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
#hrPanePayroll .hr-pay-kpi::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--kpi-accent, #1488c7);
}
#hrPanePayroll .hr-pay-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--pay-shadow-md);
}
#hrPanePayroll .hr-pay-kpi-ico {
    font-size: 22px;
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--kpi-soft, #eef8fd);
    color: var(--kpi-accent, #1488c7);
    flex: 0 0 auto;
}
#hrPanePayroll .hr-pay-kpi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#hrPanePayroll .hr-pay-kpi-label {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--hr-muted, #8b80b0);
}
#hrPanePayroll .hr-pay-kpi-value {
    font-family: 'DM Mono', monospace;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--hr-text, #1e1b4b);
    line-height: 1.15;
    letter-spacing: -.02em;
    white-space: nowrap;
}
#hrPanePayroll .hr-pay-kpi-sub {
    font-size: 0.66rem;
    color: var(--hr-muted, #8b80b0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#hrPanePayroll .hr-pay-kpi-net {
    --kpi-accent: #1488c7;
    --kpi-soft: #eef8fd;
    background: linear-gradient(135deg, #faf7ff, #fff);
    box-shadow: var(--pay-shadow-md);
}
#hrPanePayroll .hr-pay-kpi-net .hr-pay-kpi-value { font-size: 1.2rem; color: #0e7bb0; }
#hrPanePayroll .hr-pay-kpi-gross  { --kpi-accent: #059669; --kpi-soft: #d1fae5; }
#hrPanePayroll .hr-pay-kpi-gross  .hr-pay-kpi-value { color: #047857; }
#hrPanePayroll .hr-pay-kpi-deduct { --kpi-accent: #dc2626; --kpi-soft: #fee2e2; }
#hrPanePayroll .hr-pay-kpi-deduct .hr-pay-kpi-value { color: #b91c1c; }
#hrPanePayroll .hr-pay-kpi-head   { --kpi-accent: #14a1db; --kpi-soft: #e0e7ff; }
#hrPanePayroll .hr-pay-kpi-lop    { --kpi-accent: #f59e0b; --kpi-soft: #fef3c7; }
#hrPanePayroll .hr-pay-kpi-lop    .hr-pay-kpi-value { color: #b45309; }
@media (max-width: 1100px) { #hrPanePayroll .hr-pay-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { #hrPanePayroll .hr-pay-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ── Toolbar ── */
#hrPanePayroll .hr-payroll-header { gap: 12px 14px; }
#hrPanePayroll .hr-payroll-head-text h4 { font-size: 1rem; }
#hrPanePayroll .hr-payroll-controls { gap: 8px; }
#hrPanePayroll .hr-payroll-btn-group { display: inline-flex; gap: 6px; }
#hrPanePayroll .hr-payroll-month-input {
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--pay-border);
    box-shadow: var(--pay-shadow-sm);
    font-weight: 600;
    color: var(--hr-text, #1e1b4b);
}
#hrPanePayroll .hr-payroll-month-input:focus { border-color: #1488c7; box-shadow: var(--pay-ring); }
#hrPanePayroll .hr-payroll-generate-btn {
    width: auto;
    height: 38px;
    border-radius: 10px;
    box-shadow: var(--pay-shadow-md);
    margin-bottom: 0;
}
#hrPanePayroll .hr-payroll-report-btn {
    width: auto;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-width: 1.5px;
    background: #fff;
    box-shadow: var(--pay-shadow-sm);
}
#hrPanePayroll .hr-payroll-report-btn:hover {
    background: var(--pay-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--pay-shadow-md);
}
#hrPanePayroll .hr-annual-tax-controls {
    border-left: 1px solid var(--pay-border);
    padding-left: 10px;
    margin-left: 4px;
    gap: 6px;
}
#hrPanePayroll .hr-annual-tax-select {
    height: 38px;
    border-radius: 10px;
    border-color: var(--pay-border);
    box-shadow: var(--pay-shadow-sm);
}
/* leading icons via CSS mask — survive textContent rewrites (Generate btn) */
#hrPanePayroll .hr-ico-btn::before {
    content: '';
    width: 15px; height: 15px;
    margin-right: 7px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--ico) no-repeat center / contain;
            mask: var(--ico) no-repeat center / contain;
}
#hrPanePayroll .hr-ico-bolt { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E"); }
#hrPanePayroll .hr-ico-eye  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
#hrPanePayroll .hr-ico-pdf  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E"); }
#hrPanePayroll .hr-ico-tax  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='9' y1='13' x2='15' y2='13'/%3E%3Cline x1='9' y1='17' x2='15' y2='17'/%3E%3C/svg%3E"); }

/* ── Filter bar ── */
#hrPanePayroll .hr-payroll-filters {
    background: #faf9ff;
    border: 1px solid var(--pay-border);
    border-radius: 12px;
    padding: 10px 12px;
    margin-top: 14px;
}
#hrPanePayroll .hr-payroll-filters > select,
#hrPanePayroll .hr-payroll-filters > input {
    border-radius: 10px;
    box-shadow: var(--pay-shadow-sm);
    background-color: #fff;
}
#hrPanePayroll .hr-payroll-count {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--hr-muted, #8b80b0);
    white-space: nowrap;
    padding-right: 4px;
}

/* ── Table polish ── */
#hrPanePayroll .hrms-panel table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #faf9ff;
    border-bottom: 1px solid var(--pay-border);
}
#hrPayrollRunsBody tr { transition: background-color .12s, box-shadow .12s; }
#hrPayrollRunsBody tr:hover {
    background: #f6f3ff;
    box-shadow: inset 3px 0 0 #1488c7;
}
#hrPayrollRunsBody td { border-bottom-color: #f1edfb; }
/* status pill (column 8) gets a leading status dot */
#hrPanePayroll #hrPayrollRunsBody td:nth-child(8) .hr-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#hrPanePayroll #hrPayrollRunsBody td:nth-child(8) .hr-pill::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .65;
}

/* ── Premium empty state ── */
#hrPanePayroll .hr-payroll-empty-cell { padding: 0 !important; border-bottom: none !important; }
#hrPanePayroll .hr-payroll-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
    padding: 44px 24px;
}
#hrPanePayroll .hr-payroll-empty-ico {
    font-size: 30px;
    width: 64px; height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #dcf1fb;
    color: #1488c7;
    box-shadow: var(--pay-shadow-md);
    margin-bottom: 6px;
}
#hrPanePayroll .hr-payroll-empty-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--hr-text, #1e1b4b);
}
#hrPanePayroll .hr-payroll-empty-text {
    font-size: 0.8rem;
    color: var(--hr-muted, #8b80b0);
    max-width: 340px;
    line-height: 1.45;
}
#hrPanePayroll .hr-payroll-empty-cta { margin-top: 12px; }

/* ── Salary Structure tab ── */
#hrPanePayroll .hr-salary-form-wide { gap: 0 20px; }
#hrPanePayroll .hr-salary-col-left,
#hrPanePayroll .hr-salary-col-right {
    background: #fff;
    border: 1px solid var(--pay-border);
    border-radius: 16px;
    box-shadow: var(--pay-shadow-sm);
    padding: 16px 18px;
}
#hrPanePayroll .hr-salary-col-left { background: #faf9ff; }
#hrPanePayroll .hr-salary-col-left .hr-salary-section-label,
#hrPanePayroll .hr-salary-col-right .hr-salary-section-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 0 !important;
    border-bottom: none !important;
    color: #0e7bb0 !important;
}
#hrPanePayroll .hr-salary-section-label::before {
    content: '';
    width: 3px; height: 13px;
    border-radius: 2px;
    background: var(--pay-grad);
}
#hrPanePayroll .hr-regime-pill.active {
    background: var(--pay-grad);
    border-color: transparent;
    box-shadow: var(--pay-shadow-md);
}
#hrPanePayroll .hr-salary-preview {
    background: #fff;
    border: 1px solid var(--pay-border);
    border-radius: 14px;
    box-shadow: var(--pay-shadow-md);
    overflow: hidden;
    padding: 14px 16px 12px;
    position: relative;
}
#hrPanePayroll .hr-salary-preview::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: var(--pay-grad);
}
#hrPanePayroll .hr-preview-net {
    margin: 8px -16px -12px;
    padding: 10px 16px;
    background: #f0fdf4;
    border-top: 1px solid #bbf7d0 !important;
}
#hrPanePayroll .hr-salary-submit-row { display: flex; justify-content: flex-end; }
#hrPanePayroll .hr-salary-submit-row button[type="submit"] {
    width: auto;
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 24px;
    border: none;
    border-radius: 10px;
    background: var(--pay-grad);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--pay-shadow-md);
}

/* ── Incentives tab ── */
#hrIncentivesPanel #hrIncentiveForm {
    background: #faf9ff;
    border: 1px solid var(--pay-border);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: var(--pay-shadow-sm);
}
#hrIncentivesPanel #hrIncentiveForm button[type="submit"] {
    width: auto;
    height: 38px;
    border: none;
    border-radius: 10px;
    background: var(--pay-grad);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--pay-shadow-md);
}
#hrIncentivesPanel table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #faf9ff;
}
#hrIncentivesPanel #hrIncentivesBody tr:hover {
    background: #f6f3ff;
    box-shadow: inset 3px 0 0 #1488c7;
}

/* ── Salary Form Wide Layout (two-column side-by-side) ── */
/* ── New Staff Payroll Alert ── */
.hr-new-staff-alert {
    margin: 0 16px 16px;
    padding: 14px 16px;
    background: #fff6e0;
    border: 1px solid #fcd34d;
    border-radius: 12px;
    border-left: 4px solid #f59e0b;
}
.hr-new-staff-alert-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #92400e;
}
.hr-new-staff-alert-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.hr-new-staff-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s, opacity .15s;
    font-family: inherit;
    text-align: left;
}
.hr-new-staff-chip:hover {
    border-color: #14a1db;
    box-shadow: 0 2px 8px rgba(20, 161, 219,.15);
    background: #eef8fd;
}
.hr-new-staff-chip-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.hr-new-staff-chip-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #1e1b4b;
}
.hr-new-staff-chip-meta {
    font-size: 11px;
    color: #6b7280;
}

.hr-salary-form-wide {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    align-items: start;
}
.hr-salary-col-left,
.hr-salary-col-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hr-salary-col-left .hr-salary-section-label,
.hr-salary-col-right .hr-salary-section-label {
    margin-top: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--hr-border, #dcf1fb);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hr-muted, #8b80b0);
}
.hr-salary-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.hr-salary-submit-row {
    grid-column: 1 / -1;
    margin-top: 8px;
}
@media (max-width: 900px) {
    .hr-salary-form-wide {
        grid-template-columns: 1fr;
    }
}

/* ── Payroll Policy: Staff Category Badge ── */
.hr-staff-category-badge {
    grid-column: 1 / -1;
    display: inline-block;
    padding: 3px 12px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    width: fit-content;
}
.hr-cat-teaching      { background: #DBEAFE; color: #1E40AF; }
.hr-cat-non-teaching  { background: #E0E7FF; color: #3730A3; }
.hr-cat-housekeeping  { background: #FEF3C7; color: #92400E; }
.hr-cat-driver        { background: #D1FAE5; color: #065F46; }

/* ── Salary Preview Panel ── */
.hr-salary-preview {
    grid-column: 1 / -1;
    background: var(--hr-bg, #eef8fd);
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 10px;
    padding: 0.75rem 1rem;
}
.hr-preview-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.78rem;
    color: var(--hr-text, #1e1b4b);
}
.hr-preview-row span:last-child {
    font-weight: 600;
    font-family: 'DM Mono', monospace;
}
.hr-preview-gross {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1.5px solid var(--hr-border, #dcf1fb);
    font-weight: 600;
}
.hr-preview-gross span:last-child { color: #1e1b4b; font-size: 0.82rem; }
.hr-preview-deductions {
    color: #b91c1c;
}
.hr-preview-deductions span:last-child { color: #b91c1c; }
.hr-preview-net {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 2px solid #14a1db;
    font-weight: 700;
    font-size: 0.85rem !important;
}
.hr-preview-net span:first-child { color: #065f46; }
.hr-preview-net span:last-child { color: #065f46; font-size: 0.88rem; }
.hr-preview-pt-note {
    font-size: 0.7rem;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: 4px 8px;
    margin-top: 4px;
    text-align: center;
    font-weight: 500;
}
.hr-preview-tds {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--hr-border, #dcf1fb);
    color: #DC2626;
}
.hr-preview-tds span:last-child { color: #DC2626; }

/* ── Tax Regime pills ── */
.hr-regime-pills {
    display: flex;
    gap: 8px;
}
.hr-regime-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border: 1.5px solid var(--hr-border, #dcf1fb);
    border-radius: 9px;
    background: var(--hr-card-bg, #fff);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--hr-muted, #8b80b0);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    user-select: none;
}
.hr-regime-pill:hover {
    border-color: var(--hr-accent, #3bb0e5);
    color: var(--hr-text, #1e1b4b);
}
.hr-regime-pill.active {
    background: var(--hr-purple, #1488c7);
    border-color: var(--hr-purple, #1488c7);
    color: #fff;
    font-weight: 600;
}
.hr-regime-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ── Old Regime Exemptions ── */
.hr-old-exemptions {
    margin-top: 4px;
}
.hr-exemptions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.hr-exemptions-grid label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--hr-text, #1e1b4b);
}
.hr-exemptions-grid label small {
    color: var(--hr-muted, #8b80b0);
    font-weight: 400;
}
.hr-exemptions-grid input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 8px;
    font-size: 0.8rem;
    font-family: inherit;
    background: #fff;
    margin-top: 2px;
}
.hr-exemptions-grid input:focus {
    outline: none;
    border-color: var(--hr-purple, #1488c7);
    box-shadow: 0 0 0 2px rgba(20, 161, 219,0.12);
}
.hr-exemptions-summary {
    margin-top: 8px;
    padding: 7px 12px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    font-size: 0.78rem;
    color: #92400e;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hr-exemptions-summary strong {
    font-family: 'DM Mono', monospace;
    font-size: 0.82rem;
}

/* ── Auto-calc toggle ── */
.hr-auto-calc-toggle {
    grid-column: 1 / -1;
}

/* ── Read-only inputs when auto-calc is on ── */
.hrms-form-grid input[type="number"][readonly] {
    background: #f9fafb;
    color: #6b7280;
    cursor: default;
    border-style: dashed;
}

/* ── Category pills in payroll table ── */
.hr-pill.hr-cat-teaching      { background: #DBEAFE; color: #1E40AF; }
.hr-pill.hr-cat-non-teaching  { background: #E0E7FF; color: #3730A3; }
.hr-pill.hr-cat-housekeeping  { background: #FEF3C7; color: #92400E; }
.hr-pill.hr-cat-driver        { background: #D1FAE5; color: #065F46; }

/* ── Incentives Panel ── */
#hrIncentivesPanel .hrms-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}
#hrIncentivesPanel table {
    font-size: 0.8rem;
}
@media (max-width: 900px) {
    #hrIncentivesPanel .hrms-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Lists ─────────────────────────────────────────────────── */
.hrms-card-list,
.hrms-mini-list,
.hrms-doc-list,
.hrms-balance-grid {
    display: grid;
    gap: 0.6rem;
}
.hrms-balance-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    margin-bottom: 1rem;
}
.hrms-balance-item {
    border: 1px solid var(--hr-border);
    border-radius: 14px;
    background: var(--hr-card-bg);
    padding: 0.85rem 1rem;
    position: relative;
    overflow: hidden;
}
.hrms-balance-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--hr-purple);
    border-radius: 14px 14px 0 0;
}
.hrms-balance-item label {
    font-size: 0.72rem;
    color: var(--hr-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hrms-balance-item strong {
    display: block;
    font-size: 1.1rem;
    color: var(--hr-purple);
    margin-top: 0.2rem;
    font-weight: 700;
}
.hr-alloc-meta {
    display: block;
    font-size: 0.68rem;
    color: var(--hr-muted);
    margin-top: 0.15rem;
}
.hr-alloc-tag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 9999px;
    margin-top: 0.35rem;
}
.hr-alloc-tag-default {
    background: #DBEAFE;
    color: #1E40AF;
}
.hr-alloc-tag-custom {
    background: #FEF3C7;
    color: #92400E;
}
/* Manage Leave button in directory card */
.hr-btn-manage-leave {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid var(--hr-purple, #1488c7);
    background: transparent;
    color: var(--hr-purple, #1488c7);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    margin-left: auto;
}
.hr-btn-manage-leave:hover {
    background: var(--hr-purple, #1488c7);
    color: #fff;
}
/* Leave Allocation Modal */
.hr-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(22, 29, 48, 0.45);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hr-modal-overlay.hidden {
    display: none;
}
.hr-modal-box {
    background: var(--hr-card-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
}
/* Wizard variant: fixed header + sticky footer + scrollable body.
 * The leave wizard modal needs the primary action (Next/Submit) always
 * visible, even when there are 7+ leave-type cards in step 1. We override
 * the legacy padded-and-scrolled box layout with a flex column.
 *
 * IMPORTANT: we use `height` (not just `max-height`) so the flex children
 * have a real container height to divide. With only `max-height` the box
 * collapses to its content size and `flex: 1` panels get 0 extra space. */
#hrLeaveWizardModal .hr-modal-box {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: min(88vh, 760px);
    max-width: 760px;
    width: 92%;
}
#hrLeaveWizardModal .hr-modal-header {
    padding: 1.1rem 1.4rem 0.9rem;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 0;
    flex-shrink: 0;
    background: linear-gradient(to bottom, #ffffff, #fafbfc);
}
#hrLeaveWizardModal #hrWizardSteps {
    flex-shrink: 0;
    padding: 0.9rem 1.4rem;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfc;
    margin: 0;
}
#hrLeaveWizardModal .hr-wizard-panel {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: 1.2rem 1.4rem 1.4rem;
}
/* Override the legacy min-height: 180px which prevented proper flex sizing */
#hrLeaveWizardModal .hr-wizard-panel.hidden {
    display: none;
}
#hrLeaveWizardModal .hr-wizard-footer {
    flex-shrink: 0;
    padding: 1rem 1.4rem;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 -8px 16px -8px rgba(15, 23, 42, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
#hrLeaveWizardModal .hr-wizard-footer .hrms-btn-primary {
    min-width: 140px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
}
#hrLeaveWizardModal .hr-wizard-footer .hrms-btn-outline {
    min-width: 90px;
    padding: 10px 18px;
    font-size: 13px;
}
/* Pulse the Next button briefly when a leave type is selected so the user
 * knows the next action is now enabled. */
#hrLeaveWizardModal .hr-wizard-footer.has-selection .hrms-btn-primary {
    animation: hrWizardNextPulse 1.2s ease-out 1;
    box-shadow: 0 0 0 0 rgba(20, 161, 219, 0.7);
}
@keyframes hrWizardNextPulse {
    0%   { box-shadow: 0 0 0 0 rgba(20, 161, 219, 0.55); }
    50%  { box-shadow: 0 0 0 8px rgba(20, 161, 219, 0); }
    100% { box-shadow: 0 0 0 0 rgba(20, 161, 219, 0); }
}
/* Helper hint that appears between Back and Next when a card is selected */
#hrLeaveWizardModal .hr-wizard-selection-hint {
    flex: 1 1 0;
    text-align: center;
    font-size: 12px;
    color: #1488c7;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
#hrLeaveWizardModal .hr-wizard-footer.has-selection .hr-wizard-selection-hint {
    opacity: 1;
}
/* Selected card gets a more prominent treatment + checkmark badge */
.hr-leave-type-card {
    position: relative;
}
.hr-leave-type-card.selected::before {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1488c7;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(20, 161, 219, 0.3);
}
/* On 1366×768, force the leave type grid to 3 columns so all 7 cards
 * fit visible without scrolling — that's the screens HR actually uses. */
@media (min-width: 1024px) {
    #hrLeaveWizardModal .hr-leave-type-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}
.hr-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}
.hr-modal-header h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hr-fg, #1e293b);
    margin: 0;
}
.hr-modal-close {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    flex: 0 0 32px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border-radius: 50%;
    background: #f3f4f6;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: #374151;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.hr-modal-close:hover {
    background: #e5e7eb;
    color: #111827;
    transform: none;
    filter: none;
}

/* ── Incentive CSV Upload Modal ── */
.hr-incentive-csv-step {
    background: var(--hr-card-bg, #faf9ff);
    border: 1.5px solid var(--hr-border, #c9e9f7);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.hr-incentive-csv-step h5 {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--hr-purple, #1488c7);
    letter-spacing: 0.01em;
}
.hr-incentive-csv-step p {
    font-size: 0.8rem;
    color: var(--hr-muted, #94a3b8);
    margin: 0 0 0.6rem;
}
/* ── CSV Upload Mode Pills ── */
.hr-csv-mode-pills {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.hr-csv-mode-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border: 1.5px solid var(--hr-border, #c9e9f7);
    border-radius: 9px;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--hr-muted, #8b80b0);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    user-select: none;
}
.hr-csv-mode-pill:hover {
    border-color: var(--hr-accent, #3bb0e5);
    color: var(--hr-text, #1e1b4b);
}
.hr-csv-mode-pill.active {
    background: var(--hr-purple, #1488c7);
    border-color: var(--hr-purple, #1488c7);
    color: #fff;
    font-weight: 600;
}
.hr-csv-mode-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.hr-csv-replace-section {
    margin-top: 10px;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
}
.hr-csv-replace-section label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--hr-text, #1e1b4b);
}
.hr-csv-replace-section input[type="month"] {
    height: 2rem;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 0 0.5rem;
    font-size: 0.8rem;
    font-family: inherit;
}
.hr-csv-warning {
    font-size: 0.75rem;
    color: #dc2626;
    margin: 6px 0 0;
    font-weight: 500;
}

.hr-incentive-csv-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 2px dashed var(--hr-border, #c9e9f7);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: #fff;
    min-height: 80px;
}
.hr-incentive-csv-dropzone:hover,
.hr-incentive-csv-dropzone.dragover {
    border-color: var(--hr-purple, #1488c7);
    background: #eef8fd;
}
.hr-incentive-csv-preview {
    max-height: 200px;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.78rem;
    margin-bottom: 1rem;
}
.hr-incentive-csv-preview table {
    width: 100%;
    border-collapse: collapse;
}
.hr-incentive-csv-preview th,
.hr-incentive-csv-preview td {
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid #f1f5f9;
    text-align: left;
    white-space: nowrap;
}
.hr-incentive-csv-preview th {
    background: #f8fafc;
    font-weight: 600;
    position: sticky;
    top: 0;
}
.hr-incentive-csv-errors {
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #dc2626;
    max-height: 150px;
    overflow: auto;
    margin-bottom: 1rem;
}
.hr-incentive-csv-success {
    padding: 0.75rem 1rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #16a34a;
    margin-bottom: 1rem;
}
.hr-incentive-csv-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.hr-alloc-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 1rem 0;
}
.hr-alloc-fields label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--hr-fg, #1e293b);
}
.hr-alloc-fields input {
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.5rem;
    border: 1px solid var(--hr-border, #e2e8f0);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: 'DM Mono', monospace;
}
.hr-alloc-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.hr-alloc-actions .hrms-btn-primary {
    flex: 1;
    padding: 0.55rem 1rem;
    border: none;
    border-radius: 10px;
    background: var(--hr-purple, #1488c7);
    color: #fff;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
}
.hr-alloc-actions .hrms-btn-primary:hover {
    opacity: 0.9;
}
.hr-alloc-actions .hrms-btn-outline {
    padding: 0.55rem 1rem;
    border: 1px solid var(--hr-border, #e2e8f0);
    border-radius: 10px;
    background: transparent;
    color: var(--hr-muted, #64748b);
    font-weight: 500;
    font-size: 0.82rem;
    cursor: pointer;
}
.hr-alloc-actions .hrms-btn-outline:hover {
    background: #f8fafc;
    color: var(--hr-fg, #1e293b);
}
.hr-alloc-current-info {
    min-height: 0;
}
.hr-alloc-status-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    font-size: 0.75rem;
    margin-top: 0.5rem;
}
.hr-alloc-status-default {
    background: #EFF6FF;
    color: #1E40AF;
}
.hr-alloc-status-custom {
    background: #FFFBEB;
    color: #92400E;
}
@media (max-width: 600px) {
    .hr-alloc-fields {
        grid-template-columns: 1fr;
    }
}
.hrms-list-item {
    border: 1px solid var(--hr-border);
    border-radius: 14px;
    background: var(--hr-card-bg);
    padding: 0.85rem 1rem;
}
.hrms-case-item {
    border: 1px solid var(--hr-border);
    border-radius: 16px;
    background: var(--hr-card-bg);
    padding: 1rem;
    display: grid;
    gap: 0.8rem;
}
.hrms-case-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.hrms-case-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 1rem;
}
.hrms-case-grid label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hr-muted);
    margin-bottom: 0.18rem;
}
.hrms-case-grid p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--hr-text);
    word-break: break-word;
}
.hrms-step-list {
    display: grid;
    gap: 0.55rem;
}
.hrms-step-row {
    border: 1px solid #dcf1fb;
    border-radius: 14px;
    background: #faf7ff;
    padding: 0.8rem 0.9rem;
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: flex-start;
}
.hrms-step-right {
    display: grid;
    justify-items: end;
    gap: 0.45rem;
}
.hrms-step-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ── Exit Approval Stages ─────────────────────────────────── */
.exit-stages-track {
    display: flex;
    gap: 0;
    margin: 0.6rem 0 0.4rem;
    padding: 0.5rem 0;
    overflow-x: auto;
}
.exit-stage {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.72rem;
    min-width: 0;
    flex: 1 1 0;
    border-left: 2px solid #e5e7eb;
}
.exit-stage:first-child { border-left: none; }
.exit-stage-icon { font-size: 0.85rem; line-height: 1; flex-shrink: 0; }
.exit-stage-label { font-weight: 600; display: block; line-height: 1.2; }
.exit-stage-pending { color: #9CA3AF; }
.exit-stage-active { color: #3B82F6; border-left-color: #3B82F6; }
.exit-stage-done { color: #10B981; border-left-color: #10B981; }
.exit-stage-rejected { color: #EF4444; border-left-color: #EF4444; }
.exit-stage-warn { color: #F59E0B; border-left-color: #F59E0B; }
.hrms-exit-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0.4rem 0;
}
.hrms-clearance-section {
    border-top: 1px solid #dcf1fb;
    margin-top: 0.5rem;
    padding-top: 0.3rem;
}
/* ── Interview evaluation styles ── */
.iv-star { cursor: pointer; transition: color 0.15s; user-select: none; }
.iv-star:hover { color: #F59E0B !important; }
.iv-star-on { color: #F59E0B; }
.iv-score-bar { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; margin: 0.25rem 0; }
.iv-score-label { min-width: 120px; color: #6b7280; font-weight: 500; }
.iv-score-value { font-weight: 700; color: #1e1b4b; min-width: 55px; text-align: right; }
.iv-round-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 16px; margin: 0.4rem 0; transition: border-color 0.2s; }
.iv-round-card.iv-round-active { border-color: #3B82F6; background: #f0f7ff; }
.iv-round-card.iv-round-done { border-color: #10B981; background: #f0fff7; }
.iv-round-card.iv-round-rejected { border-color: #EF4444; background: #fff5f5; }
.hrms-list-item strong {
    font-size: 0.82rem;
    color: var(--hr-text);
}
.hrms-list-item p {
    font-size: 0.78rem;
    color: #4B5563;
    margin: 0.3rem 0 0;
}
.hrms-doc-item {
    display: block;
    border: 1px solid var(--hr-border);
    border-radius: 14px;
    background: var(--hr-card-bg);
    padding: 0.85rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s;
}
.hrms-doc-item:hover {
    border-color: var(--hr-accent);
}
.hrms-doc-item strong {
    color: var(--hr-purple);
    font-size: 0.82rem;
}
.hrms-insight-item {
    border: 1px solid var(--hr-border);
    border-radius: 14px;
    background: var(--hr-card-bg);
    padding: 0.85rem 1rem;
}
.hrms-list-meta,
.hrms-doc-meta {
    color: var(--hr-muted);
    font-size: 0.72rem;
    margin-top: 0.15rem;
}
.hrms-actions-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.55rem;
}
.hrms-actions-row button {
    width: auto !important;
    padding: 0.3rem 0.7rem !important;
    border-radius: 7px !important;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    border: none !important;
    font-family: inherit;
    background: #D1FAE5 !important;
    color: #065F46 !important;
    transform: none !important;
}
.hrms-actions-row button.ghost {
    background: #FEE2E2 !important;
    color: #991B1B !important;
}
.hrms-callout {
    border-radius: 14px;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(20, 161, 219,0.08), rgba(59, 176, 229,0.08));
    color: var(--hr-text);
    border: 1px solid #dcf1fb;
}
.hrms-callout strong {
    font-size: 0.85rem;
}
.hrms-callout p {
    margin: 0.3rem 0 0;
    color: var(--hr-muted);
    font-size: 0.78rem;
}
.hrms-empty {
    color: var(--hr-muted);
    font-size: 0.85rem;
    padding: 1.5rem 1rem;
    text-align: center;
    border: 1px dashed var(--hr-border, #dcf1fb);
    border-radius: 12px;
    background: var(--hr-card-bg, #faf9ff);
}
.hrms-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #dcf1fb;
    color: #14a1db;
    font-size: 1.1rem;
    margin: 0 auto 0.6rem;
}
.hrms-empty strong {
    display: block;
    color: var(--hr-text, #1e1b4b);
    margin-bottom: 0.25rem;
    font-size: 0.88rem;
}
.hrms-empty p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--hr-muted);
}
/* Generic empty state for tables */
.table-empty-row td {
    text-align: center;
    padding: 1.5rem 1rem !important;
    color: var(--muted, #6b5f8a);
    font-style: italic;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1180px) {
    .hrms-body {
        grid-template-columns: 1fr;
    }
    .hrms-sidebar {
        position: static;
    }
    .hrms-summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .hrms-two-col {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 720px) {
    .hrms-card {
        padding: 1rem 1rem 2rem;
        border-radius: 16px;
    }
    .hrms-top-header {
        flex-direction: column;
    }
    .hrms-top-right {
        width: 100%;
        justify-content: stretch;
    }
    .hrms-field-inline,
    .hrms-search-inline {
        min-width: 100%;
    }
    .hrms-summary-grid,
    .hrms-form-grid,
    .hrms-balance-grid,
    .hrms-case-grid {
        grid-template-columns: 1fr;
    }
    .hrms-case-head,
    .hrms-step-row {
        flex-direction: column;
    }
    .hrms-step-right {
        justify-items: start;
    }
}

/* ══════════════════════════════════════════════
   ONBOARDING PANE
══════════════════════════════════════════════ */

/* Stats Bar — compact 5-up strip, optimised for 1366×768 */
.ob-stats-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}
@media (max-width: 1100px) {
    .ob-stats-bar { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
}
@media (max-width: 640px) {
    .ob-stats-bar { grid-template-columns: repeat(2, 1fr); }
}

.ob-stat {
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "icon label"
        "icon value";
    align-items: center;
    column-gap: 0.75rem;
    background: #fff;
    border-radius: 0.75rem;
    padding: 0.75rem 0.9rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.05);
    transition: box-shadow 0.2s, border-color 0.2s;
    font-family: 'Inter', var(--font-sans);
    min-width: 0;
}
.ob-stat:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.08); }

/* Clickable KPI cards — each filters the onboarding list to its stage */
.ob-stat[data-ob-filter] { cursor: pointer; }
.ob-stat[data-ob-filter]:focus-visible { outline: 2px solid var(--hr-blue, #14a1db); outline-offset: 2px; }
.ob-stat.ob-stat-active {
    border-color: var(--hr-blue, #14a1db);
    box-shadow: 0 0 0 1px var(--hr-blue, #14a1db), 0 4px 12px rgba(20, 161, 219,0.18);
}

/* Header div is just a grouping wrapper — let its children flow into the grid */
.ob-stat-header { display: contents; }
/* Drop the inconsistent "Real-time/Active/Queued/Target/Declined" filler chips */
.ob-stat-badge { display: none; }

.ob-stat-icon {
    grid-area: icon;
    width: 36px;
    height: 36px;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    align-self: center;
}
.ob-stat-icon .material-symbols-outlined { font-size: 20px; }

.ob-stat[data-color="blue"] .ob-stat-icon   { background: rgba(20, 161, 219,0.1); color: var(--hr-blue, #14a1db); }
.ob-stat[data-color="orange"] .ob-stat-icon { background: rgba(245,158,11,0.12); color: var(--hr-orange, #f59e0b); }
.ob-stat[data-color="cyan"] .ob-stat-icon   { background: rgba(79, 184, 230,0.1); color: var(--hr-purple, #4fb8e6); }
.ob-stat[data-color="green"] .ob-stat-icon  { background: rgba(16,185,129,0.1); color: #10b981; }
.ob-stat[data-color="red"] .ob-stat-icon    { background: rgba(239,68,68,0.1); color: var(--hr-red, #ef4444); }

.ob-stat-label {
    grid-area: label;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--hr-muted, #8b80b0);
    margin: 0;
    line-height: 1.2;
    font-family: 'Inter', var(--font-sans);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ob-stat strong {
    grid-area: value;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--hr-text, #1e1b4b);
    font-family: 'Manrope', var(--font-sans);
    font-variant-numeric: tabular-nums;
}

/* Main Layout */
.ob-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}
/* Collapse to single column when form is hidden */
.ob-action-panel:has(.ob-link-form.hidden) ~ .ob-tracker-panel { grid-column: 1 / -1; }
.ob-action-panel:has(.ob-link-form.hidden) { grid-column: 1 / -1; }
.ob-layout:has(.ob-link-form.hidden) { grid-template-columns: 1fr; }

/* Action Panel */
.ob-action-panel {
    background: var(--hr-card-bg, #faf9ff);
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 14px;
    padding: 1.1rem;
    position: sticky;
    top: 0.5rem;
}

/* Toggle button */
.ob-toggle-form-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 1rem;
    border: 1.5px dashed var(--hr-blue, #14a1db);
    border-radius: 10px;
    background: transparent;
    color: var(--hr-blue, #14a1db);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-style 0.15s;
}
.ob-toggle-form-btn:hover { background: rgba(20, 161, 219,0.06); }
.ob-toggle-form-btn.ob-toggle-active {
    border-style: solid;
    background: rgba(20, 161, 219,0.06);
    color: var(--hr-red, #ef4444);
    border-color: var(--hr-red, #ef4444);
    margin-bottom: 0.8rem;
}
.ob-toggle-form-btn.ob-toggle-active svg { transform: rotate(45deg); }

.ob-link-form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.ob-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ob-form-field label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hr-muted, #8b80b0);
}

.ob-req { color: var(--hr-red, #ef4444); }

.ob-form-field select,
.ob-form-field input,
.ob-form-field textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 8px;
    font-size: 0.83rem;
    color: var(--hr-text, #1e1b4b);
    background: #fff;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.ob-form-field select:focus,
.ob-form-field input:focus,
.ob-form-field textarea:focus {
    outline: none;
    border-color: var(--hr-blue, #14a1db);
    box-shadow: 0 0 0 3px rgba(20, 161, 219,0.1);
}

.ob-form-field textarea { resize: vertical; min-height: 56px; }

.ob-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

/* Preview Card */
.ob-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
}

.ob-preview.hidden { display: none; }

.ob-preview-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.ob-preview-info {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.ob-preview-info strong {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--hr-text, #1e1b4b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ob-preview-info span {
    font-size: 0.72rem;
    color: var(--hr-muted, #8b80b0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ob-preview-email {
    color: var(--hr-blue, #14a1db) !important;
}

/* Submit Button */
.ob-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.3rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, var(--hr-blue, #14a1db), #5cc3ea);
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: opacity 0.15s, transform 0.1s;
}

.ob-submit-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.ob-submit-btn:active { opacity: 1; transform: none; }

/* Tracker Panel */
.ob-tracker-panel {
    background: #f3f4f5;
    border-radius: 2rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Filter Bar */
.ob-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Filter Tabs */
.ob-filter-tabs {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.ob-tab {
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--hr-muted, #8b80b0);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
    font-family: 'Inter', var(--font-sans);
}

.ob-tab:hover:not(.active) {
    color: var(--hr-text, #1e1b4b);
    background: rgba(0,0,0,0.04);
}
.ob-tab.active {
    background: var(--hr-blue, #14a1db);
    color: #fff;
    box-shadow: 0 2px 8px rgba(20, 161, 219,0.25);
}

/* Filter Action Buttons */
.ob-filter-actions {
    display: flex;
    gap: 0.5rem;
}
.ob-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--hr-muted, #8b80b0);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
    font-family: 'Inter', var(--font-sans);
}
.ob-filter-btn:hover {
    background: rgba(0,0,0,0.05);
    color: var(--hr-text, #1e1b4b);
}

/* Tracker List */
.ob-tracker-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Onboarding Card */
.ob-card {
    background: #fff;
    border: none;
    border-radius: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', var(--font-sans);
}

.ob-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #f0f0f0;
}

.ob-card-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ob-card-avatar {
    width: 56px;
    height: 56px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    /* Headshots are portrait: anchor the cover-crop to the top so the
       face/head stays visible instead of being clipped by a center crop. */
    object-position: top center;
}

.ob-card-title-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ob-card-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--hr-text, #1e1b4b);
    display: block;
    font-family: 'Manrope', var(--font-sans);
    line-height: 1.3;
}

.ob-card-meta {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--hr-muted, #8b80b0);
}

/* ════════════════════════════════════════════════════════════════════
   Personal Onboarding Tasks page — KPI strip, per-person grid, modal
   (assignee view rendered by loadMyOnboardingTasks in staff-calendar-views.js)
   ════════════════════════════════════════════════════════════════════ */

/* KPI strip — four metric tiles across the top. */
.ob-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}
.ob-kpi-card {
    background: var(--card, #fff);
    border: 1px solid var(--border, #dcf1fb);
    border-radius: 14px;
    padding: 0.9rem 1.05rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    box-shadow: 0 4px 24px rgba(20, 161, 219, 0.07);
}
.ob-kpi-label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hr-muted, #8b80b0);
    margin-bottom: 0.25rem;
}
.ob-kpi-value {
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1;
}
.ob-kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Clickable KPI tile (Completed → opens the completed popup). */
.ob-kpi-card.ob-kpi-clickable {
    cursor: pointer;
    transition: transform var(--motion-base, 200ms) var(--ease-standard, ease),
                box-shadow var(--motion-base, 200ms) var(--ease-standard, ease),
                border-color var(--motion-base, 200ms) var(--ease-standard, ease);
}
.ob-kpi-card.ob-kpi-clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.18);
    border-color: #10b981;
}
.ob-kpi-card.ob-kpi-clickable:focus-visible {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}
.ob-kpi-hint {
    margin-top: 0.3rem;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #10b981;
}

/* Completed popup — one group per person, separated by a divider. */
.ob-completed-group + .ob-completed-group {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border, #dcf1fb);
}
.ob-completed-group .ob-modal-person {
    padding-bottom: 0.5rem;
    margin-bottom: 0;
}

/* Per-person profile-card grid. Reflows 2–3 per row at 1366px. */
.ob-people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.85rem;
}
.ob-person-card {
    text-align: left;
    background: var(--card, #fff);
    border: 1px solid var(--border, #dcf1fb);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(20, 161, 219, 0.07);
    transition: transform var(--motion-base, 200ms) var(--ease-standard, ease),
                box-shadow var(--motion-base, 200ms) var(--ease-standard, ease),
                border-color var(--motion-base, 200ms) var(--ease-standard, ease);
    font-family: inherit;
}
.ob-person-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(20, 161, 219, 0.16);
    border-color: var(--accent, #14a1db);
}
.ob-person-card:focus-visible {
    outline: none;
    border-color: var(--accent, #14a1db);
    box-shadow: 0 0 0 3px rgba(20, 161, 219, 0.3);
}
.ob-person-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.ob-person-id { flex: 1; min-width: 0; }
.ob-person-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--hr-text, #1e1b4b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ob-person-meta {
    font-size: 0.76rem;
    color: var(--hr-muted, #8b80b0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ob-person-count {
    flex-shrink: 0;
    min-width: 26px;
    height: 26px;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--accent, #14a1db);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ob-person-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.ob-person-chip {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--hr-muted, #6b5f8a);
    background: rgba(139, 128, 176, 0.1);
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    white-space: nowrap;
}
.ob-person-chip.in-progress {
    color: var(--accent, #14a1db);
    background: rgba(20, 161, 219, 0.12);
}
.ob-person-chip.more {
    color: var(--hr-muted, #8b80b0);
    background: transparent;
    padding-left: 0.2rem;
}
.ob-person-cta {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--accent, #14a1db);
}

/* Empty state for the page. */
.ob-empty {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--hr-muted, #8b80b0);
    font-size: 0.85rem;
}
.ob-empty p { margin: 0.35rem 0 0; font-size: 0.8rem; }

/* Person modal — header + per-task sections inside hrOpenModal. */
.ob-modal-person {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.9rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--border, #dcf1fb);
}
.ob-modal-person-id { min-width: 0; }
.ob-modal-task {
    border: 1px solid var(--border, #dcf1fb);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-top: 0.75rem;
    background: #fff;
}
.ob-modal-task-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}
.ob-modal-task-head strong {
    flex: 1;
    font-size: 0.92rem;
    color: var(--hr-text, #1e1b4b);
}
.ob-modal-task-status {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* Narrow screens: collapse the KPI strip gracefully. */
@media (max-width: 1100px) {
    .ob-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .ob-kpi-strip { grid-template-columns: 1fr; }
    .ob-people-grid { grid-template-columns: 1fr; }
    .ob-kpi-value { font-size: 1.6rem; }
}

/* Stage Badge */
.ob-stage-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: 'Inter', var(--font-sans);
}
.ob-stage-badge.active   { background: rgba(20, 161, 219,0.1); color: var(--hr-blue, #14a1db); }
.ob-stage-badge.pending  { background: rgba(245,158,11,0.1); color: var(--hr-orange, #f59e0b); }
.ob-stage-badge.present  { background: rgba(16,185,129,0.1); color: var(--hr-green, #10b981); }
.ob-stage-badge.rejected { background: rgba(239,68,68,0.1); color: var(--hr-red, #ef4444); }

.ob-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    position: relative;
    flex-shrink: 0;
}
.ob-stage-badge.active .ob-badge-dot::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
    animation: ob-ping 1.5s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes ob-ping { 75%,100% { transform: scale(2.2); opacity: 0; } }

/* Progress Stepper */
.ob-stepper {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 2rem;
    background: rgba(0,0,0,0.015);
}

.ob-stepper-track {
    position: absolute;
    top: calc(1.5rem + 15px);
    left: 3.5rem;
    right: 3.5rem;
    height: 3px;
    background: #e5e7eb;
    border-radius: 2px;
    z-index: 0;
}

.ob-stepper-progress {
    position: absolute;
    top: calc(1.5rem + 15px);
    left: 3.5rem;
    height: 3px;
    background: var(--hr-blue, #14a1db);
    border-radius: 2px;
    z-index: 0;
    transition: width 0.4s ease;
}

.ob-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    z-index: 1;
    flex: 0 0 auto;
    min-width: 70px;
}

.ob-step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2.5px solid #e5e7eb;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}
.ob-step-dot .material-symbols-outlined { font-size: 16px; }

.ob-step.done .ob-step-dot {
    background: var(--hr-blue, #14a1db);
    border-color: var(--hr-blue, #14a1db);
    color: #fff;
    box-shadow: 0 2px 6px rgba(20, 161, 219,0.25);
}

.ob-step.active .ob-step-dot {
    width: 38px;
    height: 38px;
    border-width: 3px;
    border-color: var(--hr-blue, #14a1db);
    box-shadow: 0 0 0 5px rgba(20, 161, 219,0.12);
    background: #fff;
    color: var(--hr-blue, #14a1db);
}
.ob-step.active .ob-step-dot .material-symbols-outlined { font-size: 18px; }

.ob-step > span {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--hr-muted, #8b80b0);
    text-align: center;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: 'Inter', var(--font-sans);
}

.ob-step.done > span  { color: var(--hr-muted, #8b80b0); }
.ob-step.active > span { color: var(--hr-blue, #14a1db); font-weight: 800; }

/* Legacy step lines - hidden in new design */
.ob-step-line { display: none; }

/* Consent & Declined badges */
.ob-consent-badge {
    color: #065F46;
    background: #D1FAE5;
    border: 1px solid #A7F3D0;
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 0.78rem;
}
.ob-declined-badge,
.ob-mail-fail {
    color: #991B1B;
}

/* Salary section in onboarding form */
.ob-salary-section { margin-top: 0.5rem; border: 1px solid var(--hr-border, #dcf1fb); border-radius: 8px; padding: 0; }
.ob-salary-section[open] { padding: 0 0.6rem 0.6rem; }
.ob-salary-section .ob-form-row { margin-top: 0.35rem; }
.ob-section-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hr-purple, #0e7bb0); padding: 0.5rem 0.6rem; cursor: pointer; }
.ob-section-label::-webkit-details-marker { display: none; }
.ob-section-label::marker { color: var(--hr-purple, #0e7bb0); }
.ob-form-field input[readonly] { background: #eef8fd; color: var(--hr-purple, #0e7bb0); font-weight: 700; cursor: default; }
.ob-preview-btn { background: #1488c7 !important; }
.ob-preview-btn:hover { background: #0e7bb0 !important; }

/* Preview modal iframe */
#hrOnboardMailerFrame { width: 100%; border: none; min-height: 70vh; }

/* Info Grid */
.ob-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem 2rem;
    padding: 1.5rem 2rem;
}

.ob-info-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ob-info-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(70,69,84,0.5);
    font-family: 'Inter', var(--font-sans);
}

.ob-info-val {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hr-text, #1e1b4b);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.ob-info-val .material-symbols-outlined {
    font-size: 18px;
    color: var(--hr-blue, #14a1db);
}

/* Mono values — modern stack instead of Courier */
.ob-mono {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.80rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #4338ca;
}

.ob-mail-ok      { color: var(--hr-green,  #10b981); }
.ob-mail-fail    { color: var(--hr-red,    #ef4444); }
.ob-mail-pending { color: var(--hr-orange, #f59e0b); }

.ob-link {
    color: var(--hr-blue, #14a1db);
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ob-link:hover { text-decoration: underline; }

/* Notes & Actions */
.ob-notes {
    font-size: 0.78rem;
    color: var(--hr-muted, #8b80b0);
    border-top: 1px dashed #e5e7eb;
    padding: 0.75rem 2rem;
    line-height: 1.5;
}

/* Card Footer */
.ob-card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: rgba(0,0,0,0.015);
}

.ob-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.15rem;
    border: 1.5px solid #ddd;
    border-radius: 0.75rem;
    background: transparent;
    color: var(--hr-muted, #8b80b0);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
    font-family: 'Inter', var(--font-sans);
}
.ob-btn-outline:hover { border-color: #bbb; color: var(--hr-text, #1e1b4b); }
.ob-btn-outline .material-symbols-outlined { font-size: 16px; }

.ob-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.15rem;
    border: none;
    border-radius: 0.75rem;
    background: var(--hr-blue, #14a1db);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(20, 161, 219,0.25);
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
    font-family: 'Inter', var(--font-sans);
}
.ob-btn-primary:hover { background: #1276c2; }
.ob-btn-primary .material-symbols-outlined { font-size: 16px; }

.ob-btn-warn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.15rem;
    border: none;
    border-radius: 0.75rem;
    background: #f59e0b;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
    font-family: 'Inter', var(--font-sans);
}
.ob-btn-warn:hover { opacity: 0.9; }

/* Legacy action row - hidden, replaced by footer */
.ob-card-actions {
    display: none;
}

/* Credentials locked indicator */
.ob-credentials-locked {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--hr-muted, #8b80b0);
    font-size: 0.76rem;
    font-style: italic;
}

/* Warn/resend button (legacy - keep for non-card contexts) */
.hr-btn-warn {
    background: #f59e0b !important;
    color: #fff !important;
    border: none;
    cursor: pointer;
    padding: 0.35rem 0.85rem;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 600;
}
.hr-btn-warn:hover {
    opacity: 0.9;
}

/* Empty State */
.ob-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 3rem 1rem;
    color: var(--hr-muted, #8b80b0);
    text-align: center;
}

.ob-empty p {
    margin: 0;
    font-size: 0.85rem;
}

/* Retry button inline */
.ob-retry-btn {
    background: none;
    border: none;
    color: var(--hr-blue, #14a1db);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    padding: 0;
    margin-left: 0.35rem;
    font-family: 'Inter', var(--font-sans);
}
.ob-retry-btn:hover { text-decoration: underline; }

/* Responsive safeguards */
@media (max-width: 1100px) {
    .ob-stats-bar { grid-template-columns: repeat(2, 1fr); }
    .ob-card-grid { grid-template-columns: repeat(2, 1fr); }
    .ob-card-header { flex-direction: column; align-items: flex-start; }
    .ob-card-footer { flex-wrap: wrap; }
}
@media (max-width: 640px) {
    .ob-stats-bar { grid-template-columns: 1fr; }
    .ob-card-grid { grid-template-columns: 1fr; }
    .ob-tracker-panel { padding: 1rem; border-radius: 1rem; }
    .ob-card-header, .ob-stepper, .ob-card-grid, .ob-card-footer { padding-left: 1rem; padding-right: 1rem; }
    .ob-stepper-track, .ob-stepper-progress { left: 1.5rem; right: 1.5rem; }
    .ob-filter-bar { flex-direction: column; align-items: flex-start; }
}

/* ── Onboarding Pipeline Timeline ── */
.ob-pipeline {
    padding: 0.5rem 0.75rem 0.25rem;
    border-top: 1px solid rgba(139, 128, 176, 0.12);
}
.ob-pipeline-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    cursor: pointer;
    user-select: none;
    font-size: 0.78rem;
    color: var(--hr-muted, #8b80b0);
}
.ob-pipeline-summary:hover {
    color: var(--hr-text, #1e1b4b);
}
.ob-pipeline-summary-bar {
    flex: 1;
    height: 6px;
    background: rgba(139, 128, 176, 0.15);
    border-radius: 3px;
    overflow: hidden;
}
.ob-pipeline-summary-fill {
    height: 100%;
    background: #14a1db;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.ob-pipeline-summary-toggle {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: var(--hr-accent, #14a1db);
    border: none;
    cursor: pointer;
    padding: 0.35rem 0.9rem;
    border-radius: 8px;
    transition: background 0.15s, transform 0.1s;
    letter-spacing: 0.02em;
}
.ob-pipeline-summary-toggle:hover {
    background: #1276c2;
    transform: scale(1.04);
}
.ob-pipeline-steps {
    display: none;
    padding: 0.35rem 0 0.15rem;
}
.ob-pipeline.expanded .ob-pipeline-steps {
    display: block;
}
.ob-pipeline-step {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    position: relative;
    padding-bottom: 0.15rem;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 6px;
    padding: 0.3rem 0.4rem;
    margin: 0 -0.4rem;
}
.ob-pipeline-step:hover {
    background: rgba(20, 161, 219, 0.05);
}
.ob-pipeline-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 18px;
}
.ob-pipeline-step-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: #fff;
    flex-shrink: 0;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ob-pipeline-step-line {
    width: 2px;
    flex: 1;
    min-height: 14px;
    background: #e5e7eb;
    transition: background 0.2s;
}
.ob-pipeline-step:last-child .ob-pipeline-step-line {
    display: none;
}
.ob-pipeline-step.completed .ob-pipeline-step-dot {
    border-color: #10b981;
    background: #10b981;
}
.ob-pipeline-step.completed .ob-pipeline-step-dot::after {
    content: '';
    width: 6px;
    height: 6px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6L5 8.5L9.5 3.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.ob-pipeline-step.completed .ob-pipeline-step-line {
    background: #10b981;
}
.ob-pipeline-step.in_progress .ob-pipeline-step-dot {
    border-color: #14a1db;
    background: #eef2ff;
    box-shadow: 0 0 0 3px rgba(20, 161, 219, 0.15);
}
.ob-pipeline-step.in_progress .ob-pipeline-step-dot::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #14a1db;
}
.ob-pipeline-step.skipped .ob-pipeline-step-dot {
    border-color: #e5e7eb;
    background: #f3f4f6;
    border-style: dashed;
}
.ob-pipeline-step-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0 0.15rem;
}
.ob-pipeline-step-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--hr-text, #1e1b4b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ob-pipeline-step.completed .ob-pipeline-step-label {
    color: #10b981;
}
.ob-pipeline-step.skipped .ob-pipeline-step-label {
    color: #9ca3af;
    text-decoration: line-through;
}
.ob-pipeline-step-status {
    font-size: 0.68rem;
    color: var(--hr-muted, #8b80b0);
    white-space: nowrap;
}
.ob-pipeline-step-assignee {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    color: var(--hr-muted, #8b80b0);
    background: rgba(139, 128, 176, 0.08);
    border-radius: 10px;
    padding: 0.1rem 0.4rem;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: auto;
}
.ob-pipeline-step-optional {
    font-size: 0.62rem;
    color: #9ca3af;
    background: rgba(156, 163, 175, 0.1);
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Parallel step awareness indicators */
.ob-pipeline-step.blocked { opacity: 0.55; }
.ob-pipeline-step.blocked .ob-pipeline-step-dot {
    border-style: dashed;
    border-color: #d1d5db;
}
.ob-pipeline-step-blocked {
    font-size: 0.58rem;
    font-weight: 700;
    color: #9ca3af;
    background: rgba(156, 163, 175, 0.12);
    border-radius: 3px;
    padding: 0.05rem 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ob-pipeline-step-available {
    font-size: 0.58rem;
    font-weight: 700;
    color: #059669;
    background: rgba(5, 150, 105, 0.08);
    border-radius: 3px;
    padding: 0.05rem 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Due date / overdue indicators */
.ob-pipeline-step-overdue {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--hr-red, #ef4444);
    background: rgba(239, 68, 68, 0.08);
    border-radius: 3px;
    padding: 0.05rem 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    animation: ob-pulse-red 2s ease-in-out infinite;
}
@keyframes ob-pulse-red { 50% { opacity: 0.6; } }
.ob-pipeline-step-due-soon {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--hr-orange, #f59e0b);
    background: rgba(245, 158, 11, 0.08);
    border-radius: 3px;
    padding: 0.05rem 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Step Detail Slide-Over Modal ── */
.ob-step-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    justify-content: flex-end;
}
.ob-step-modal.hidden {
    display: none;
}
.ob-step-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(30, 27, 75, 0.38);
}
.ob-step-modal-panel {
    position: relative;
    width: 420px;
    max-width: 90vw;
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 24px rgba(30, 27, 75, 0.15);
    display: flex;
    flex-direction: column;
    z-index: 1;
}
.ob-step-modal-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(139, 128, 176, 0.12);
    flex-shrink: 0;
}
.ob-step-modal-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--hr-text, #1e1b4b);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ob-step-modal-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--hr-muted, #8b80b0);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.15s;
}
.ob-step-modal-close:hover {
    background: rgba(139, 128, 176, 0.1);
    color: var(--hr-text, #1e1b4b);
}
.ob-step-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}
.ob-step-modal-footer {
    display: flex;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid rgba(139, 128, 176, 0.12);
    flex-shrink: 0;
}
.ob-step-modal-footer .hrms-btn-primary,
.ob-step-modal-footer .hrms-btn-outline {
    flex: 1;
}

/* Step modal body sections */
.ob-step-section {
    margin-bottom: 1rem;
}
.ob-step-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hr-muted, #8b80b0);
    margin-bottom: 0.35rem;
}
.ob-step-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    font-size: 0.82rem;
}
.ob-step-meta dt {
    color: var(--hr-muted, #8b80b0);
    font-size: 0.72rem;
}
.ob-step-meta dd {
    margin: 0;
    color: var(--hr-text, #1e1b4b);
    font-weight: 500;
}

/* Document list in step modal */
.ob-step-doc-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ob-step-doc-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: rgba(20, 161, 219, 0.04);
    border: 1px solid rgba(20, 161, 219, 0.1);
    border-radius: 6px;
    font-size: 0.78rem;
}
.ob-step-doc-item .doc-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--hr-text, #1e1b4b);
}
.ob-step-doc-item .doc-status {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}
.ob-step-doc-item .doc-status.pending {
    background: #fef3c7;
    color: #92400e;
}
.ob-step-doc-item .doc-status.verified {
    background: #d1fae5;
    color: #065f46;
}
.ob-step-doc-item .doc-status.rejected {
    background: #fee2e2;
    color: #991b1b;
}
.ob-step-doc-actions {
    display: flex;
    gap: 0.25rem;
}
.ob-step-doc-actions button {
    font-size: 0.68rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    border: 1px solid;
    cursor: pointer;
    background: #fff;
    transition: background 0.15s;
}
.ob-step-doc-actions .btn-verify {
    border-color: #10b981;
    color: #065f46;
}
.ob-step-doc-actions .btn-verify:hover {
    background: #d1fae5;
}
.ob-step-doc-actions .btn-reject {
    border-color: #ef4444;
    color: #991b1b;
}
.ob-step-doc-actions .btn-reject:hover {
    background: #fee2e2;
}

/* File upload dropzone */
.ob-dropzone {
    border: 2px dashed rgba(20, 161, 219, 0.25);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: rgba(20, 161, 219, 0.02);
}
.ob-dropzone:hover {
    border-color: rgba(20, 161, 219, 0.5);
    background: rgba(20, 161, 219, 0.04);
}
.ob-dropzone-label {
    font-size: 0.82rem;
    color: var(--hr-accent, #14a1db);
    font-weight: 500;
}
.ob-dropzone-hint {
    font-size: 0.7rem;
    color: var(--hr-muted, #8b80b0);
    margin-top: 0.2rem;
}
.ob-dropzone input[type="file"] {
    display: none;
}

/* Email trigger section */
.ob-step-email-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    padding: 0.5rem 0.65rem;
    background: rgba(20, 161, 219, 0.04);
    border-radius: 6px;
    margin-top: 0.3rem;
}
.ob-step-email-status.sent {
    background: #d1fae5;
    color: #065f46;
}
.ob-step-email-status.failed {
    background: #fee2e2;
    color: #991b1b;
}

/* Assignee select in modal */
.ob-step-assign-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.ob-step-assign-row select,
.ob-step-assign-row input {
    flex: 1;
    font-size: 0.82rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid rgba(139, 128, 176, 0.2);
    border-radius: 6px;
    background: #fff;
}

/* Responsive */
@media (max-width: 960px) {
    .ob-layout {
        grid-template-columns: 1fr;
    }
    .ob-action-panel {
        position: static;
    }
    .ob-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ob-stats-bar {
        flex-wrap: wrap;
    }
    .ob-stat {
        flex: 1 1 calc(50% - 0.375rem);
    }
    .ob-step-modal-panel {
        width: 100%;
        max-width: 100vw;
    }
}

/* ══════════════════════════════════════════════════════════════
   BUTTON CLICK ANIMATIONS & UX ENHANCEMENTS
   ══════════════════════════════════════════════════════════════ */

/* ── Ripple Effect ── */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transform: scale(0);
    animation: btn-ripple-expand 0.5s ease-out forwards;
    pointer-events: none;
    z-index: 1;
}
@keyframes btn-ripple-expand {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ── Global Button Enhancements ── */
button,
.req-btn,
.hrms-btn-primary,
.hrms-btn-outline,
.hr-btn-manage-leave,
.hr-btn-warn {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease, filter 0.2s ease, background 0.2s ease;
}

button:active,
.req-btn:active,
.hrms-btn-primary:active,
.hrms-btn-outline:active,
.hr-btn-manage-leave:active,
.hr-btn-warn:active {
    transform: translateY(1px) scale(0.96) !important;
    transition-duration: 0.08s;
}

/* ── Generate Payroll Button Glow ── */
#hrGeneratePayrollBtn {
    transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease;
}
#hrGeneratePayrollBtn:hover {
    box-shadow: 0 6px 24px rgba(20, 161, 219, 0.4);
}
#hrGeneratePayrollBtn:active {
    transform: translateY(1px) scale(0.96) !important;
}

/* ── Success Pulse (applied via JS after action completes) ── */
@keyframes btn-success-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    50%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.btn-success-flash {
    animation: btn-success-pulse 0.6s ease-out;
}

/* ── Focus Ring for Accessibility ── */
button:focus-visible,
.hr-btn-sm:focus-visible,
.req-btn:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent, #14a1db);
    outline-offset: 2px;
}
.menu-item:focus-visible,
.hrms-nav-item:focus-visible,
.mobile-bottom-item:focus-visible,
.section-card h3[tabindex]:focus {
    outline: none;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--accent, #14a1db);
    box-shadow: 0 0 0 3px rgba(20, 161, 219, 0.15);
}
::placeholder {
    color: #767676;
}

/* ── Leave / Permission Inner Tabs ── */
.hr-lp-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 1.2rem;
    background: var(--hr-border, #e2e8f0);
    border-radius: 12px;
    padding: 4px;
    width: fit-content;
}
.hr-lp-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 1.2rem !important;
    border-radius: 10px !important;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: none !important;
    background: transparent !important;
    color: var(--hr-muted, #64748b) !important;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
    width: auto !important;
}
.hr-lp-tab:hover {
    color: var(--hr-fg, #1e293b) !important;
    background: rgba(255,255,255,0.5) !important;
    transform: none;
    filter: none;
}
.hr-lp-tab.active {
    background: var(--hr-card-bg, #fff) !important;
    color: var(--hr-purple, #1488c7) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.hr-lp-content {
    animation: hrLpFadeIn 0.2s ease;
}
@keyframes hrLpFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Leave Filter Bar ── */
.hr-leave-filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}
.hr-leave-filter-bar select {
    flex: 1;
    min-width: 120px;
    padding: 0.38rem 0.7rem;
    border: 1px solid var(--hr-border, #e2e8f0);
    border-radius: 8px;
    font-size: 0.8rem;
    background: var(--hr-card-bg, #fff);
    color: var(--hr-fg, #1e293b);
    cursor: pointer;
}
.hr-leave-filter-bar select:focus {
    outline: none;
    border-color: var(--hr-purple, #1488c7);
}

/* ── Permission Submit Button ── */
.hr-btn-perm-submit {
    background: #1488c7 !important;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}
.hr-btn-perm-submit:hover {
    background: #0e7bb0 !important;
    box-shadow: 0 4px 14px rgba(20, 161, 219, 0.3);
}

/* ── Apply Leave CTA (opens wizard) ── */
.hr-apply-leave-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #14a1db;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
    letter-spacing: 0.01em;
}
.hr-apply-leave-btn:hover {
    background: #1276c2;
    box-shadow: 0 4px 14px rgba(20, 161, 219, 0.35);
    transform: translateY(-1px);
}
.hr-apply-leave-hint {
    text-align: center;
}

/* ── Sound Settings ──────────────────────────────────────── */
.sound-settings-card {
    margin-top: 0.5rem;
}
.sound-settings-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sound-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.25rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--ink, #1e1b4b);
    user-select: none;
    min-height: 44px;
}
.sound-setting-row span:first-child {
    font-weight: 500;
}
.sound-settings-sub {
    padding-left: 1.25rem;
    border-left: none;
    transition: opacity 0.25s;
}
.sound-settings-sub.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Toggle switch */
.sound-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}
.sound-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.sound-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--muted, #a9dcf1);
    border-radius: 22px;
    transition: background 0.25s;
    cursor: pointer;
}
.sound-toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.sound-toggle input:checked + .sound-toggle-slider {
    background: var(--accent, #1488c7);
}
.sound-toggle input:checked + .sound-toggle-slider::before {
    transform: translateX(18px);
}
.sound-toggle input:focus-visible + .sound-toggle-slider {
    outline: 2px solid var(--accent, #1488c7);
    outline-offset: 2px;
}

/* ── Permission Banner ──────────────────────────────────── */
.perm-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9998;
    display: flex;
    justify-content: center;
    padding: 0.75rem 1rem;
    background: #dcf1fb;
    border-bottom: 1px solid var(--hr-border, #dcf1fb);
    box-shadow: 0 4px 16px rgba(10, 94, 136, 0.10);
}
.perm-banner-inner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    max-width: 680px;
    width: 100%;
}
.perm-banner-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent-soft, #dcf1fb);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent, #1488c7);
}
.perm-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.perm-banner-text strong {
    font-size: 0.92rem;
    color: var(--ink, #1e1b4b);
}
.perm-banner-text span {
    font-size: 0.82rem;
    color: var(--muted, #8b80b0);
}
.perm-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.perm-banner-enable {
    background: linear-gradient(135deg, var(--accent, #1488c7), #0e7bb0);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.45rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: box-shadow 0.2s;
}
.perm-banner-enable:hover {
    box-shadow: 0 4px 14px rgba(20, 161, 219, 0.3);
}
.perm-banner-dismiss {
    border: 1px solid var(--hr-border, #dcf1fb);
    border-radius: 8px;
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    color: var(--muted, #8b80b0);
    background: transparent;
    cursor: pointer;
    transition: background 0.2s;
}
.perm-banner-dismiss:hover {
    background: rgba(20, 161, 219, 0.06);
}
.perm-banner-enter {
    animation: permBannerSlideIn 0.35s ease-out;
}
.perm-banner-exit {
    animation: permBannerSlideOut 0.3s ease-in forwards;
}
@keyframes permBannerSlideIn {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes permBannerSlideOut {
    from { transform: translateY(0); opacity: 1; }
    to   { transform: translateY(-100%); opacity: 0; }
}
@media (max-width: 620px) {
    .perm-banner-inner {
        flex-wrap: wrap;
    }
    .perm-banner-text {
        flex-basis: calc(100% - 52px);
    }
    .perm-banner-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ── Permission Status Card ─────────────────────────────── */
.perm-status-card {
    margin-top: 0.5rem;
}
.perm-status-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.perm-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.25rem;
    font-size: 0.95rem;
    color: var(--ink, #1e1b4b);
    min-height: 44px;
}
.perm-status-label {
    font-weight: 500;
}
.perm-status-value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--muted, #8b80b0);
}
.perm-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--muted, #a9dcf1);
    flex-shrink: 0;
}
.perm-status-dot.granted { background: var(--ok, #10b981); }
.perm-status-dot.denied  { background: var(--hr-red, #ef4444); }
.perm-status-dot.default { background: var(--hr-orange, #f59e0b); }
.perm-request-btn {
    margin-top: 0.6rem;
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--accent, #1488c7);
    border-radius: 8px;
    background: transparent;
    color: var(--accent, #1488c7);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.perm-request-btn:hover {
    background: var(--accent, #1488c7);
    color: #fff;
}
.perm-denied-hint {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--muted, #8b80b0);
    line-height: 1.45;
}

/* Enable Sound inline button */
.perm-enable-audio-btn {
    padding: 0.28rem 0.6rem;
    border: 1px solid var(--accent, #1488c7);
    border-radius: 6px;
    background: transparent;
    color: var(--accent, #1488c7);
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    min-height: 32px;
    -webkit-tap-highlight-color: transparent;
}
.perm-enable-audio-btn:hover,
.perm-enable-audio-btn:active {
    background: var(--accent, #1488c7);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   TIMETABLE MODULE
   ═══════════════════════════════════════════════════════════════ */

@keyframes ttFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes ttShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ── Skeleton Loader ── */
.tt-skeleton {
    display: grid;
    grid-template-columns: 80px repeat(6, 1fr);
    gap: 1px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--border, #dcf1fb);
}
.tt-skeleton-cell {
    height: 56px;
    background: #f3f0ff;
    background-size: 200% 100%;
    animation: ttShimmer 1.5s ease-in-out infinite;
}
.tt-skeleton-header {
    height: 44px;
    background: #4a7fa8;
    background-size: 200% 100%;
    animation: ttShimmer 1.5s ease-in-out infinite;
}

/* ── Tooltip ── */
.tt-tooltip {
    position: fixed;
    z-index: 100;
    background: var(--ink, #1e1b4b);
    color: #fff;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    font-size: 0.75rem;
    line-height: 1.55;
    max-width: 240px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s;
    white-space: pre-line;
}
.tt-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Empty State ── */
.tt-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    text-align: center;
    animation: ttFadeIn 0.4s ease-out;
}
.tt-empty-state svg {
    width: 64px;
    height: 64px;
    color: var(--accent, #14a1db);
    opacity: 0.25;
    margin-bottom: 1rem;
}
.tt-empty-state-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink, #1e1b4b);
    margin-bottom: 0.35rem;
}
.tt-empty-state-desc {
    font-size: 0.85rem;
    color: var(--muted, #8b80b0);
    max-width: 320px;
    line-height: 1.55;
}

/* ── Studio Container ── */
.timetable-studio {
    padding: 1.5rem;
}

.timetable-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.tt-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.timetable-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink, #1e1b4b);
}

.tt-week-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background 0.2s, color 0.2s;
}
.tt-week-badge.current {
    background: var(--accent, #14a1db);
    color: #fff;
}
.tt-week-badge.past {
    background: var(--accent-soft, #dcf1fb);
    color: var(--accent, #14a1db);
}

.timetable-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ── Filters ── */
.tt-filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.tt-filter-group select {
    padding: 0.4rem 0.65rem;
    font-size: 0.8rem;
    border: 1px solid var(--border, #dcf1fb);
    border-radius: 8px;
    background: var(--card, #fff);
    color: var(--ink, #1e1b4b);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}
.tt-filter-group select:focus {
    outline: none;
    border-color: var(--accent, #14a1db);
    box-shadow: 0 0 0 3px rgba(20, 161, 219,0.1);
}

/* ── Week Navigation ── */
.tt-week-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--accent-soft, #dcf1fb);
    border-radius: 10px;
    padding: 3px 4px;
}
.tt-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--accent, #14a1db);
    cursor: pointer;
    transition: background 0.2s;
    padding: 0;
}
.tt-nav-btn:hover:not(:disabled) {
    background: rgba(20, 161, 219,0.12);
}
.tt-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.tt-week-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink, #1e1b4b);
    padding: 0 0.35rem;
    white-space: nowrap;
}
.tt-today-btn {
    padding: 0.25rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: var(--accent, #14a1db);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
}
.tt-today-btn:hover {
    background: #1276c2;
}

.tt-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border, #dcf1fb);
    border-radius: 8px;
    background: var(--card, #fff);
    color: var(--muted, #8b80b0);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, transform 0.3s;
}
.tt-refresh-btn:hover {
    color: var(--accent, #14a1db);
    border-color: var(--accent, #14a1db);
}
.tt-refresh-btn:active {
    transform: rotate(180deg);
}

.timetable-container {
    min-height: 200px;
    position: relative;
}
.timetable-container > * {
    animation: ttFadeIn 0.3s ease-out;
}

.tt-placeholder {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted, #8b80b0);
    font-size: 0.9rem;
}
.tt-placeholder.tt-error {
    color: var(--hr-red, #ef4444);
}

/* ── Stats Pills ── */
.tt-stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    animation: ttFadeIn 0.3s ease-out;
}
.tt-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted, #6b5f8a);
    background: var(--accent-soft, #dcf1fb);
}
.tt-stat-chip.accent {
    background: var(--accent, #14a1db);
    color: #fff;
}
.tt-stat-chip.warn {
    background: #fef2f2;
    color: var(--hr-red, #ef4444);
}
.tt-stat-num {
    font-weight: 700;
}

/* ── View Toggle (hidden by default) ── */
.tt-view-toggle {
    display: flex;
    gap: 0;
    border: 1px solid var(--border, #dcf1fb);
    border-radius: 999px;
    overflow: hidden;
    background: var(--accent-soft, #dcf1fb);
    padding: 3px;
}
.tt-view-btn {
    padding: 0.38rem 0.95rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--muted, #8b80b0);
    cursor: pointer;
    transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.tt-view-btn.active {
    background: var(--accent, #14a1db);
    color: #fff;
    box-shadow: 0 1px 4px rgba(20, 161, 219,0.3);
}
.tt-view-btn:hover:not(.active) {
    background: rgba(20, 161, 219,0.08);
    color: var(--accent, #14a1db);
}

/* ══════════════════════════════════════════════════════════════
   GRID VIEW
   ══════════════════════════════════════════════════════════════ */
.tt-grid {
    display: grid;
    grid-template-columns: 80px repeat(6, 1fr);
    border: 1px solid var(--border, #dcf1fb);
    border-radius: 14px;
    overflow: hidden;
    background: var(--card, #fff);
    box-shadow: 0 1px 4px rgba(20, 161, 219,0.06);
}

.tt-cell {
    padding: 0.5rem;
    border-right: 1px solid var(--border, #dcf1fb);
    border-bottom: 1px solid var(--border, #dcf1fb);
    font-size: 0.78rem;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background 0.15s;
}
.tt-cell:nth-child(7n) {
    border-right: none;
}

/* Corner */
.tt-corner {
    background: #1276c2;
    color: #fff;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    align-items: center;
    min-height: auto;
}

/* Day headers */
.tt-header {
    background: #1276c2;
    color: #fff;
    text-align: center;
    align-items: center;
    padding: 0.55rem 0.35rem;
    min-height: auto;
    gap: 3px;
}
.tt-header.tt-today-col {
    background: #0e7bb0 !important;
    box-shadow: inset 0 -3px 0 rgba(255,255,255,0.2);
}
.tt-hdr-day {
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    display: block;
}
.tt-hdr-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    opacity: 0.8;
    font-weight: 500;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin: 0 auto;
}
.tt-hdr-date.is-today {
    background: #fff;
    color: var(--accent, #14a1db);
    opacity: 1;
    font-weight: 700;
}

/* Time cells */
.tt-time {
    background: #faf9ff;
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--muted, #6b5f8a);
    text-align: center;
    align-items: center;
    white-space: nowrap;
    min-height: 64px;
}
.tt-time.tt-time-end {
    min-height: 24px;
    border-bottom: none;
}
.tt-time-end-cell {
    min-height: 24px !important;
    border-bottom: none !important;
}
.tt-time.tt-now {
    color: var(--accent, #14a1db);
    font-weight: 700;
    position: relative;
}
.tt-time.tt-now::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent, #14a1db);
    transform: translateY(-50%);
    animation: ttPulse 2s ease-in-out infinite;
}
@keyframes ttPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Today column */
.tt-body.tt-today-col {
    background-color: #f8f7ff;
}

/* Current hour line */
.tt-body.tt-now {
    position: relative;
}
.tt-body.tt-now::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent, #14a1db), #5cc3ea);
    z-index: 2;
}

/* Free cells */
.tt-free {
    background: #faf9ff;
}
.tt-free.tt-today-col {
    background: #f8f7ff;
}

/* ── Class Cards ── */
.tt-class {
    background: var(--c-bg, #eef2ff);
    border-left: 3.5px solid var(--c-border, #14a1db);
    padding-left: calc(0.5rem - 3.5px);
    gap: 1px;
    cursor: default;
}
.tt-class:hover {
    filter: brightness(0.97);
    box-shadow: inset 0 0 0 1px rgba(20, 161, 219,0.08), 0 2px 8px rgba(20, 161, 219,0.08);
}

.tt-subj {
    font-weight: 700;
    color: var(--ink, #1e1b4b);
    font-size: 0.76rem;
    line-height: 1.25;
}
.tt-code {
    font-size: 0.67rem;
    color: var(--c-text, #4338ca);
    font-weight: 600;
}
.tt-time-range {
    font-size: 0.65rem;
    color: var(--muted, #6b5f8a);
    margin-top: 1px;
}
.tt-room-tag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--c-text, #4338ca);
    background: var(--c-badge, #e0e7ff);
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: 2px;
    width: fit-content;
}
.tt-room-tag.sm {
    font-size: 0.6rem;
    padding: 0 4px;
    margin-top: 0;
}
.tt-sec {
    font-size: 0.65rem;
    color: var(--muted, #8b80b0);
}

/* Conflict */
.tt-conflict {
    background: #fef2f2 !important;
    border-left-color: var(--hr-red, #ef4444) !important;
}
.tt-conflict-badge {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--hr-red, #ef4444);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    width: fit-content;
}

.tt-multi {
    gap: 3px;
}
.tt-multi-entry {
    display: flex;
    gap: 4px;
    align-items: baseline;
    flex-wrap: wrap;
    padding-left: 6px;
    border-left: 2px solid var(--c-border, #14a1db);
}

/* ══════════════════════════════════════════════════════════════
   CALENDAR VIEW
   ══════════════════════════════════════════════════════════════ */
.tt-calendar {
    border: 1px solid var(--border, #dcf1fb);
    border-radius: 14px;
    overflow: hidden;
    background: var(--card, #fff);
    box-shadow: 0 1px 4px rgba(20, 161, 219,0.06);
}

.tt-cal-header {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: #1276c2;
}
.tt-cal-day-hdr {
    padding: 0.65rem 0.5rem;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.tt-cal-day-hdr.is-today {
    background: rgba(255,255,255,0.12);
}
.tt-cal-day-name {
    font-weight: 700;
    font-size: 0.78rem;
}
.tt-cal-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    opacity: 0.8;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}
.tt-cal-day-hdr.is-today .tt-cal-day-num {
    background: #fff;
    color: var(--accent, #14a1db);
    opacity: 1;
    font-weight: 700;
}

.tt-cal-body {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    min-height: 320px;
}
.tt-cal-col {
    border-right: 1px solid var(--border, #dcf1fb);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.tt-cal-col:last-child {
    border-right: none;
}
.tt-cal-col.is-today {
    background: #f8f7ff;
}

.tt-cal-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0.5rem;
    flex: 1;
}
.tt-cal-empty-text {
    font-size: 0.72rem;
    color: var(--muted, #8b80b0);
    opacity: 0.45;
    font-style: italic;
}

/* Calendar Cards */
.tt-cal-card {
    padding: 0.55rem 0.5rem;
    border-radius: 8px;
    background: var(--c-bg, #eef2ff);
    border-left: 3.5px solid var(--c-border, #14a1db);
    transition: box-shadow 0.2s, transform 0.15s;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.tt-cal-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.tt-cal-card.tt-conflict {
    background: #fef2f2;
    border-left-color: var(--hr-red, #ef4444);
}

.tt-cal-card-time {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--muted, #6b5f8a);
}
.tt-cal-card-subj {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink, #1e1b4b);
    line-height: 1.3;
}
.tt-cal-card-code {
    font-size: 0.67rem;
    color: var(--c-text, #4338ca);
    font-weight: 600;
}
.tt-cal-card-room {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--c-text, #4338ca);
    background: var(--c-badge, #e0e7ff);
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: 2px;
    width: fit-content;
}
.tt-cal-card-sec {
    font-size: 0.65rem;
    color: var(--muted, #8b80b0);
}

/* ── Timetable Mobile Responsive ── */
@media (max-width: 768px) {
    .timetable-studio {
        padding: 1rem;
    }
    .timetable-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .tt-grid {
        grid-template-columns: 65px repeat(6, 1fr);
        font-size: 0.7rem;
    }
    .tt-cell {
        padding: 0.35rem;
        min-height: 52px;
        font-size: 0.68rem;
    }
    .tt-time {
        font-size: 0.6rem;
        min-height: 52px;
    }
    .tt-subj {
        font-size: 0.7rem;
    }
    .tt-cal-body {
        grid-template-columns: repeat(3, 1fr);
    }
    .tt-cal-header {
        grid-template-columns: repeat(3, 1fr);
    }
    .tt-cal-col:nth-child(3) {
        border-right: none;
    }
    .tt-cal-col:nth-child(n+4) {
        border-top: 1px solid var(--border, #dcf1fb);
    }
    .tt-stats {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    .tt-week-nav {
        order: -1;
        width: 100%;
        justify-content: space-between;
    }
    .tt-skeleton {
        grid-template-columns: 65px repeat(6, 1fr);
    }
}

@media (max-width: 480px) {
    .tt-grid {
        grid-template-columns: 50px repeat(6, 1fr);
    }
    .tt-cell {
        padding: 0.25rem;
        min-height: 40px;
    }
    .tt-time-range,
    .tt-room-tag,
    .tt-sec,
    .tt-code {
        display: none;
    }
    .tt-cal-body,
    .tt-cal-header {
        grid-template-columns: repeat(2, 1fr);
    }
    .tt-cal-col:nth-child(2n) {
        border-right: none;
    }
    .tt-cal-col:nth-child(n+3) {
        border-top: 1px solid var(--border, #dcf1fb);
    }
    .tt-stats {
        display: none;
    }
    .tt-tooltip {
        display: none;
    }
    .tt-skeleton {
        grid-template-columns: 50px repeat(6, 1fr);
    }
}

/* ── Timetable CSV Upload Modal ── */
.tt-csv-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    color: var(--primary, #1488c7);
    border: 1px solid var(--primary, #1488c7);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.tt-csv-upload-btn:hover {
    background: var(--primary, #1488c7);
    color: #fff;
}
.tt-csv-upload-btn span { white-space: nowrap; }

.tt-csv-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.tt-csv-modal-overlay.hidden { display: none; }

.tt-csv-modal {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    width: 100%;
    max-width: 820px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.tt-csv-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border, #dcf1fb);
}
.tt-csv-modal-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}
.tt-csv-modal-header button {
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
}
.tt-csv-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}
.tt-csv-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border, #dcf1fb);
}

/* Drop zone */
.tt-csv-dropzone {
    border: 2px dashed var(--border, #d4d0e8);
    border-radius: 10px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    color: var(--muted, #8b80b0);
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}
.tt-csv-dropzone:hover,
.tt-csv-dropzone.tt-csv-dragover {
    border-color: var(--primary, #1488c7);
    background: rgba(20, 161, 219,0.04);
}
.tt-csv-dropzone svg { opacity: 0.5; }
.tt-csv-dropzone p { margin: 0; font-size: 0.95rem; }
.tt-csv-dropzone span { font-size: 0.8rem; }

/* Options */
.tt-csv-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}
.tt-csv-option-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}
.tt-csv-option-row label {
    font-weight: 500;
    white-space: nowrap;
    color: var(--text, #1e1b4b);
}
.tt-csv-option-row select,
.tt-csv-option-row input {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border, #d4d0e8);
    border-radius: 6px;
    font-size: 0.82rem;
    background: var(--card-bg, #fff);
    color: var(--text, #1e1b4b);
}
.tt-csv-option-row select[multiple] {
    height: auto;
    min-height: 68px;
    padding: 0.25rem;
}
.tt-csv-option-row select[multiple] option {
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 1px;
}
.tt-csv-hint {
    font-size: 0.7rem;
    color: var(--muted, #8b80b0);
    white-space: nowrap;
}

/* Option groups */
.tt-csv-option-group {
    flex: 1;
    min-width: 240px;
    background: var(--surface, #eef8fd);
    border-radius: 8px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.tt-csv-option-group-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted, #8b80b0);
    margin-bottom: 0.1rem;
}

/* Replace scope */
.tt-csv-replace-scope {
    margin-top: 0.4rem;
}
.tt-csv-replace-scope.hidden { display: none; }
.tt-csv-replace-warning {
    font-size: 0.78rem;
    color: #dc2626;
    background: #fef2f2;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    border: 1px solid #fecaca;
    margin-bottom: 0.5rem;
    line-height: 1.35;
}

.tt-csv-template {
    margin-top: 0.75rem;
}
.tt-csv-template button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--primary, #1488c7);
    cursor: pointer;
}

/* Preview */
.tt-csv-summary {
    margin-bottom: 0.75rem;
}
.tt-csv-summary-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.tt-csv-stat {
    font-size: 0.85rem;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
}
.tt-csv-stat-total { background: var(--surface, #eef8fd); color: var(--text, #1e1b4b); }
.tt-csv-stat-valid { background: #dcfce7; color: #166534; }
.tt-csv-stat-error { background: #fee2e2; color: #991b1b; }
.tt-csv-summary-note {
    font-size: 0.8rem;
    color: var(--muted, #8b80b0);
    margin: 0.4rem 0 0;
}
.tt-csv-summary-warn { color: #dc2626; font-weight: 500; }

.tt-csv-preview-wrap {
    overflow-x: auto;
    border: 1px solid var(--border, #dcf1fb);
    border-radius: 8px;
    max-height: 320px;
    overflow-y: auto;
}
.tt-csv-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.tt-csv-preview-table th {
    position: sticky;
    top: 0;
    background: var(--surface, #eef8fd);
    padding: 0.5rem 0.6rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted, #8b80b0);
    border-bottom: 1px solid var(--border, #dcf1fb);
    white-space: nowrap;
}
.tt-csv-preview-table td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border, #f0ecff);
    white-space: nowrap;
}
.tt-csv-row-error td { background: #fff5f5; }
.tt-csv-row-valid td { background: transparent; }

.tt-csv-status-ok {
    color: #16a34a;
    font-weight: 600;
    font-size: 0.75rem;
}
.tt-csv-status-err {
    color: #dc2626;
    font-size: 0.75rem;
    cursor: help;
}

/* Errors list */
.tt-csv-errors {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: #fef2f2;
    border-radius: 8px;
    border: 1px solid #fecaca;
}
.tt-csv-errors h4 {
    margin: 0 0 0.4rem;
    font-size: 0.82rem;
    color: #991b1b;
}
.tt-csv-errors ul {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.78rem;
    color: #b91c1c;
}
.tt-csv-errors li { margin-bottom: 0.2rem; }

/* Result */
.tt-csv-result-success,
.tt-csv-result-fail {
    text-align: center;
    padding: 2rem 1rem;
}
.tt-csv-result-success h4,
.tt-csv-result-fail h4 {
    margin: 0.75rem 0 0.5rem;
    font-size: 1.1rem;
}
.tt-csv-result-stats {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.tt-csv-rstat {
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
}
.tt-csv-rstat-ins { background: #dcfce7; color: #166534; }
.tt-csv-rstat-upd { background: #dbeafe; color: #1e40af; }
.tt-csv-rstat-skip { background: var(--surface, #eef8fd); color: var(--muted, #8b80b0); }

.tt-csv-result-errors {
    margin-top: 1rem;
    text-align: left;
    padding: 0.75rem;
    background: #fef2f2;
    border-radius: 8px;
    border: 1px solid #fecaca;
}
.tt-csv-result-errors h5 {
    margin: 0 0 0.4rem;
    font-size: 0.82rem;
    color: #991b1b;
}
.tt-csv-result-errors ul {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.78rem;
    color: #b91c1c;
}
.tt-csv-result-fail p {
    color: var(--muted, #8b80b0);
    font-size: 0.9rem;
}

/* ── Week Off & Holiday cells ── */
.tt-week-off-cell,
.tt-holiday-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    min-height: 100%;
}
.tt-week-off-cell .tt-wo-icon,
.tt-holiday-cell .tt-wo-icon {
    font-size: 1.35rem;
    line-height: 1;
    opacity: 0.7;
}
.tt-week-off-cell .tt-wo-label,
.tt-holiday-cell .tt-wo-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tt-week-off-col .tt-body {
    background: #fef3c7 !important;
    border-left: none !important;
}
.tt-week-off-cell .tt-wo-label { color: #92400e; }
.tt-holiday-cell .tt-wo-label { color: #be123c; }
.tt-week-off-col .tt-header {
    background: #fef9c3;
}
/* Calendar view week-off/holiday card */
.tt-cal-weekoff-card {
    padding: 1.5rem 0.5rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
}
.tt-cal-weekoff-card.is-weekoff {
    background: #fef3c7;
    border-left: 3.5px solid #f59e0b;
}
.tt-cal-weekoff-card.is-holiday {
    background: #ffe4e6;
    border-left: 3.5px solid #f43f5e;
}
.tt-cal-weekoff-icon { font-size: 1.5rem; opacity: 0.65; }
.tt-cal-weekoff-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.tt-cal-weekoff-card.is-weekoff .tt-cal-weekoff-label { color: #92400e; }
.tt-cal-weekoff-card.is-holiday .tt-cal-weekoff-label { color: #be123c; }
/* Calendar pill for week off / holiday */
.tt-weekoff-pill {
    background: #fef3c7;
    color: #92400e;
    font-weight: 600;
    font-size: 0.65rem;
    border-radius: 4px;
    padding: 1px 5px;
}
.tt-holiday-pill {
    background: #ffe4e6;
    color: #be123c;
    font-weight: 600;
    font-size: 0.65rem;
    border-radius: 4px;
    padding: 1px 5px;
}

@media (max-width: 768px) {
    .tt-csv-modal {
        max-height: 92vh;
    }
    .tt-csv-upload-btn span { display: none; }
    .tt-csv-options { flex-direction: column; }
    .tt-csv-preview-wrap { max-height: 220px; }
}

/* === Small device breakpoint — iPhone SE, small Androids (<375px) === */
@media (max-width: 374px) {
    .app-shell {
        padding: 0.1rem 0.1rem 0;
    }

    .topbar {
        padding: 0.6rem;
    }

    /* Info cards: single column on very small screens */
    .info-cards,
    .info-cards.kpi-extended,
    .info-cards.kpi-managed {
        grid-template-columns: 1fr;
    }

    .dash-kpi-zone .info-cards {
        grid-template-columns: 1fr;
    }

    .info-label {
        font-size: 0.75rem;
    }

    /* Report date range: prevent overflow */
    #reportFilters #reportDateRange {
        min-width: 0;
    }

    /* Toast: fit narrow screens */
    .toast-undo {
        min-width: 0;
        max-width: calc(100vw - 2rem);
    }

    .toast {
        max-width: calc(100vw - 2rem);
    }

    /* Bottom nav: slightly smaller to fit narrow viewport */
    .mobile-bottom-item svg {
        width: 20px;
        height: 20px;
    }

    .mobile-bottom-item span {
        font-size: 0.6rem;
    }

    .mobile-bottom-create {
        width: 44px;
        height: 44px;
        margin-top: -14px;
    }

    .mobile-bottom-create svg {
        width: 22px;
        height: 22px;
    }

    /* Extension KPI: single column */
    .extension-kpi-grid {
        grid-template-columns: 1fr !important;
    }

    /* Donut chart: smaller on tiny screens */
    .info-donut {
        width: 120px;
        height: 120px;
    }

    .info-donut::after {
        inset: 20px;
        font-size: 0.95rem;
    }

    /* Section cards: tighter */
    .section-card {
        padding: 0.45rem;
    }

    /* Report filters: tighter gap */
    #reportFilters:not(.dash-filters) {
        gap: 0.3rem;
    }

    .dash-filters {
        gap: 0.25rem;
    }
}

/* === Landscape mode — mobile phones in landscape orientation === */
@media (max-width: 920px) and (orientation: landscape) and (max-height: 500px) {
    .app-shell {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }

    /* Condensed bottom nav in landscape */
    .mobile-bottom-nav {
        padding: 0.25rem 0.25rem calc(env(safe-area-inset-bottom, 0px) + 0.15rem);
    }

    .mobile-bottom-item span {
        display: none;
    }

    .mobile-bottom-item svg {
        width: 18px;
        height: 18px;
    }

    .mobile-bottom-create {
        width: 40px;
        height: 40px;
        margin-top: -10px;
    }

    /* Reduce content bottom padding in landscape */
    .content-shell > .grid {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4rem);
    }

    /* Topbar: condensed */
    .topbar {
        padding: 0.4rem 0.78rem;
    }

    /* Section cards: tighter vertical spacing */
    .section-card {
        padding: 0.5rem;
    }

    /* Info cards: 3 columns in landscape (more horizontal space) */
    .info-cards,
    .info-cards.kpi-extended,
    .info-cards.kpi-managed {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.35rem;
    }

    /* Donut: smaller in landscape */
    .info-donut {
        width: 110px;
        height: 110px;
    }

    .info-donut::after {
        inset: 18px;
        font-size: 0.9rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Day Schedule Modal — time-slot calendar view (revamped)
   ═══════════════════════════════════════════════════════════════ */

/* Overlay */
.ds-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 10, 40, 0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ds-modal-overlay.hidden { display: none; }
.ds-modal-overlay.anim-enter { animation: backdropFadeIn 0.2s ease-out forwards; }
.ds-modal-overlay.anim-enter .ds-modal { animation: modalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Modal box */
.ds-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 48px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.04);
    overflow: hidden;
}

/* Header */
.ds-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #f0eef5;
}
.ds-header-left {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.ds-header-day {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e1b4b;
}
.ds-header-date {
    font-size: 0.88rem;
    font-weight: 500;
    color: #6b7280;
}
.ds-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ds-faculty-filter select {
    padding: 4px 8px;
    border-radius: 8px;
    border: 1.5px solid #e5e7eb;
    font-size: 0.78rem;
    background: #fff;
    color: #374151;
}
.ds-close-btn {
    width: 32px;
    height: 32px;
    background: #f3f4f6;
    border: none;
    cursor: pointer;
    color: #374151;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.ds-close-btn:hover {
    background: #e5e7eb;
    color: #111827;
    transform: none;
    filter: none;
}

/* Info bar: legend + summary */
.ds-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    background: #fafafe;
    border-bottom: 1px solid #f0eef5;
    gap: 12px;
    flex-wrap: wrap;
}
.ds-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ds-summary {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #475569;
}
.ds-summary span { white-space: nowrap; }
.ds-sep { color: #d1d5db; margin: 0 2px; }

/* Conflict banner */
.ds-conflict-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
    padding: 6px 20px;
    font-size: 0.78rem;
    color: #991b1b;
    font-weight: 600;
}
.ds-conflict-banner.hidden { display: none; }
.ds-conflict-banner svg { color: #ef4444; flex-shrink: 0; }

/* ── Timeline ── */
.ds-timeline {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 48px 0;
}

/* Two-column grid: times | blocks */
.ds-grid-container {
    display: grid;
    grid-template-columns: 68px 1fr;
    position: relative;
}

/* Time gutter */
.ds-grid-times {
    position: relative;
}
.ds-grid-time {
    position: absolute;
    right: 8px;
    transform: translateY(-50%);
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
    line-height: 1;
}

/* Blocks area */
.ds-grid-blocks {
    position: relative;
    border-left: 1px solid #e5e7eb;
    margin-left: 0;
}

/* Hour grid lines */
.ds-grid-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px solid #f3f4f6;
    pointer-events: none;
    z-index: 0;
}

/* ── Blocks (base) ── */
.ds-block {
    position: absolute;
    left: 8px;
    right: 4px;
    border-radius: 10px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    border-left: 4px solid transparent;
    box-sizing: border-box;
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.1s;
    z-index: 1;
    min-height: 28px;
}

/* ── Event blocks (class/meeting/task) ── */
.ds-block-event { cursor: default; }
.ds-block-event:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,0.1);
    z-index: 3;
}
.ds-block-clickable { cursor: pointer; }
.ds-block-clickable:hover {
    box-shadow: 0 3px 12px rgba(20, 161, 219,0.18);
    z-index: 3;
}
.ds-block-main {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.ds-slot-time {
    font-size: 0.62rem;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}
.ds-type-icon {
    vertical-align: -2px;
    margin-right: 2px;
    opacity: 0.55;
}

/* Teaching */
.ds-block.ds-teaching { background: #fef2f2; border-left-color: #ef4444; }
.ds-block.ds-teaching .ds-type-icon { stroke: #ef4444; }
/* Meeting */
.ds-block.ds-meeting { background: #fffbeb; border-left-color: #f59e0b; }
.ds-block.ds-meeting .ds-type-icon { stroke: #f59e0b; }
/* Task/Other */
.ds-block.ds-other { background: #eef2ff; border-left-color: #14a1db; }
.ds-block.ds-other .ds-type-icon { stroke: #14a1db; }

/* ── Free blocks ── */
.ds-block.ds-free {
    background: #f4fdf8;
    border: 1.5px dashed #c6f0d9;
    border-left: 4px solid #86efac;
    cursor: default;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 4px 10px;
    gap: 0;
}
.ds-free-content {
    display: none; /* hide text — the button IS the content */
}
.ds-block.ds-free .ds-slot-title { font-weight: 500; color: #a3a3a3; font-size: 0.72rem; }
.ds-block.ds-free .ds-slot-meta  { font-size: 0.62rem; color: #c4c4c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Actionable free blocks (future dates) */
.ds-free-actionable { cursor: pointer !important; }
.ds-free-actionable:hover {
    background: #e8fbf0 !important;
    border-color: #6ee7b7;
    box-shadow: 0 2px 8px rgba(16,185,129,0.1);
}
.ds-free-actionable:hover .ds-free-add-btn {
    background: #059669;
    color: #fff;
    border-color: #059669;
}

/* + Add Task button — now the main visible element inside free blocks */
.ds-free-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    background: transparent;
    border: 1.5px dashed #b2e6cc;
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #34d399;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
    box-sizing: border-box;
}
.ds-free-add-btn svg { flex-shrink: 0; }
.ds-free-add-btn:hover {
    background: #059669;
    color: #fff;
    border-color: #059669;
    border-style: solid;
    box-shadow: 0 2px 6px rgba(5,150,105,0.25);
}

/* Past-date free blocks (no button — show text instead) */
.ds-block.ds-free:not(.ds-free-actionable) .ds-free-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* ── Conflict ── */
.ds-block.ds-conflict { box-shadow: 0 0 0 2px #ef4444; z-index: 2; }
.ds-block.ds-conflict::after {
    content: "\26A0 Conflict";
    position: absolute;
    top: 5px; right: 8px;
    font-size: 0.62rem;
    color: #ef4444;
    font-weight: 700;
}

/* ── Slot text ── */
.ds-slot-title {
    font-weight: 600;
    font-size: 0.8rem;
    color: #1e1b4b;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 3px;
}
.ds-slot-meta {
    font-size: 0.68rem;
    color: #64748b;
    line-height: 1.3;
}

/* ── Legend chips with accessible shapes ── */
.ds-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 2px 6px;
    border-radius: 6px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    font-weight: 600;
    font-size: 0.68rem;
    color: #6b7280;
}
.ds-lc-shape { display: inline-block; flex-shrink: 0; }
.ds-shape-circle  { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; }
.ds-shape-diamond { width: 8px; height: 8px; background: #f59e0b; transform: rotate(45deg); }
.ds-shape-square  { width: 8px; height: 8px; border-radius: 2px; background: #14a1db; }
.ds-shape-dash    { width: 12px; height: 4px; border-radius: 2px; background: #86efac; }

/* ── Task section (stacked list below timeline) ── */
.ds-task-section {
    border-top: 1px solid #e5e7eb;
    margin-top: 12px;
    padding: 10px 0 0 0;
}
.ds-task-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #14a1db;
    padding: 0 8px 8px 8px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ds-task-section-header svg {
    stroke: #14a1db;
    opacity: 0.6;
    flex-shrink: 0;
}
.ds-task-count {
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    background: #14a1db;
    border-radius: 10px;
    padding: 1px 7px;
    line-height: 1.4;
}
.ds-task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    margin: 0 4px 4px 4px;
    border-radius: 10px;
    border-left: 4px solid transparent;
    transition: box-shadow 0.15s, background 0.15s;
    cursor: pointer;
    min-width: 0;
}
.ds-task-item .ds-block-main {
    min-width: 0;
    flex: 1;
}
.ds-task-item .ds-slot-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.ds-task-item .ds-slot-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ds-task-item .ds-slot-time {
    flex-shrink: 0;
}
.ds-task-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    background: #e0e7ff;
}
.ds-task-item.ds-other {
    background: #eef2ff;
    border-left-color: #14a1db;
}
.ds-task-item.ds-other .ds-type-icon {
    stroke: #14a1db;
}

/* ── Skeletons ── */
.ds-slot-skeleton {
    height: 40px;
    border-radius: 8px;
    background: #f1f0fb;
    background-size: 200% 100%;
    animation: ds-shimmer 1.2s ease-in-out infinite;
    margin: 4px 8px 4px 76px;
}
@keyframes ds-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Calendar date cell schedule bars */
.cal-day-schedule-bar {
    display: none;
}
.cal-day-schedule-bar span {
    flex: 1;
    border-radius: 3px;
    max-width: 24px;
}
.cal-day-schedule-bar .bar-busy    { background: #f87171; }
.cal-day-schedule-bar .bar-partial { background: #fbbf24; }
.cal-day-schedule-bar .bar-free   { background: #34d399; }

/* Responsive: day schedule on small screens */
@media (max-width: 520px) {
    .ds-modal { max-width: 100vw; border-radius: 12px; }
    .ds-grid-container { grid-template-columns: 56px 1fr; }
    .ds-grid-time { font-size: 0.62rem; }
    .ds-modal-header { padding: 12px 14px 10px; }
    .ds-info-bar { padding: 6px 14px; }
    .ds-free-add-btn { font-size: 0.62rem; padding: 0.22rem 0.45rem; }
}

/* ── Timetable class pills on calendar ── */
.tt-class-pill {
    background: #f0ecff !important;
    color: #0a5e88 !important;
    border-color: #a9dcf1 !important;
    border-left: 3px solid #1488c7 !important;
    border-radius: 6px !important;
    cursor: pointer;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.35rem 0.2rem 0.4rem !important;
    position: relative;
    flex-shrink: 0;
}
.tt-class-pill .tt-pill-time {
    font-weight: 500;
    opacity: 0.65;
    font-size: 0.58rem;
    margin-left: 0.2rem;
    letter-spacing: 0;
}

/* ── Class detail popover ── */
.tt-detail-popover {
    position: fixed;
    z-index: 9000;
    background: #fff;
    border: 1px solid #e2e0f0;
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    box-shadow: 0 8px 28px rgba(20, 161, 219,0.13), 0 2px 8px rgba(0,0,0,0.06);
    font-family: var(--font-sans);
    animation: ttPopIn 0.15s ease-out;
}
@keyframes ttPopIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tt-pop-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #2d3250;
    margin-bottom: 0.4rem;
    padding-bottom: 0.35rem;
    border-bottom: 1.5px solid #dcf1fb;
}
.tt-pop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.2rem 0;
    font-size: 0.75rem;
    color: #3c3a5a;
}
.tt-pop-label {
    font-weight: 600;
    color: #7c6f9f;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

/* ── Staff Calendar Banner ── */
.calendar-staff-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 16px;
    margin-bottom: 8px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    font-size: 0.82rem;
    color: #3730a3;
}
.calendar-staff-banner.hidden { display: none; }
.cs-banner-reset {
    background: #14a1db;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.cs-banner-reset:hover { background: #1276c2; }

/* ── Calendar Staff Select ── */
#calendarStaffSelect {
    font-size: 0.78rem;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    max-width: 180px;
}
#calendarStaffSelect.hidden { display: none; }

/* ── Dual free-slot actions ── */
.ds-free-actions {
    display: flex;
    gap: 4px;
    width: 100%;
}
.ds-free-actions .ds-free-add-btn {
    flex: 1;
    font-size: 0.68rem;
    padding: 4px 6px;
}
.ds-action-meeting {
    color: #d97706 !important;
    border-color: #fcd34d !important;
}
.ds-action-meeting:hover {
    background: #f59e0b !important;
    color: #fff !important;
    border-color: #f59e0b !important;
}

/* ── Meeting Schedule Panel ── */
.meeting-schedule-panel {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    background: #fff;
    border: 1px solid #e5eaf8;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(38,53,93,0.22);
    z-index: 1200;
    padding: 0;
    overflow: hidden;
}
.meeting-schedule-panel.hidden { display: none; }
.meeting-schedule-panel::backdrop { background: rgba(30,30,60,0.35); }
.meeting-schedule-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
    border-bottom: 1px solid #f0f0f5;
}
.meeting-schedule-head h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1f2746;
}
.meeting-schedule-form {
    display: flex;
    flex-direction: column;
}
.meeting-schedule-form .quick-add-fields {
    padding: 12px 18px;
    overflow-y: auto;
    max-height: calc(100vh - 14rem);
}
.meeting-schedule-form .quick-add-actions {
    padding: 10px 18px 14px;
    border-top: 1px solid #f0f0f5;
}

/* Meeting participant chips & search */
.meeting-participant-area {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.meeting-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.meeting-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #4338ca;
}
.meeting-chip button {
    background: none;
    border: none;
    color: #14a1db;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 2px;
    line-height: 1;
}
.meeting-chip button:hover { color: #ef4444; }
.meeting-search-wrap { position: relative; }
.meeting-participant-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5eaf8;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    z-index: 50;
    max-height: 200px;
    overflow-y: auto;
}
.meeting-participant-dropdown.hidden { display: none; }
.meeting-participant-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    font-size: 0.78rem;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    color: #1f2746;
}
.meeting-participant-option:hover {
    background: #eef2ff;
}
.meeting-participant-option small {
    color: #94a3b8;
}

/* Form warning (amber) */
.form-warning {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.75rem;
    color: #92400e;
    margin-top: 8px;
}
.form-warning.hidden { display: none; }
.form-warning ul {
    margin: 4px 0 0 16px;
    padding: 0;
}
.form-warning li { margin-bottom: 2px; }



/* ═══════════════════════════════════════════════════════════════
   VACANCY DASHBOARD
   ═══════════════════════════════════════════════════════════════ */

.vd-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.vd-header-left { display: flex; flex-direction: column; gap: 0.15rem; }
.vd-header-label { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--hr-purple, #4fb8e6); }
.vd-header-title { font-size: 1.6rem; font-weight: 800; color: var(--hr-text, #1e1b4b); margin: 0; letter-spacing: -0.02em; line-height: 1.2; }
.vd-header-sub { font-size: 0.82rem; color: var(--hr-muted, #6b5f8a); margin-top: 0.25rem; font-weight: 500; }

/* KPI row */
.vd-kpi-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.85rem; margin-bottom: 1.75rem; }
.vd-kpi {
    border-radius: 16px; padding: 1.3rem 1.4rem; position: relative; display: flex; flex-direction: column; justify-content: space-between;
    background: var(--hr-card-bg, #faf9ff); border: 1px solid var(--hr-border, #dcf1fb); min-height: 140px;
}
.vd-kpi-label { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hr-muted, #6b5f8a); margin-bottom: 0.5rem; }
.vd-kpi-value { font-size: 2.8rem; font-weight: 800; font-family: var(--font-sans, 'DM Sans', sans-serif); color: var(--hr-text, #1e1b4b); line-height: 1; }
.vd-kpi-value small { font-size: 1rem; font-weight: 500; color: var(--hr-muted, #6b5f8a); }
.vd-kpi-sub { font-size: 0.72rem; color: var(--hr-muted, #6b5f8a); margin-top: 0.5rem; font-weight: 600; }
.vd-kpi-bar { height: 6px; border-radius: 4px; background: var(--hr-border, #dcf1fb); margin-top: 0.65rem; overflow: hidden; }
.vd-kpi-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.vd-kpi-trend { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.65rem; font-size: 0.82rem; font-weight: 700; }
.vd-kpi-trend svg { width: 16px; height: 16px; }
.vd-kpi--primary {
    background: linear-gradient(135deg, var(--hr-blue, #14a1db) 0%, #1488c7 100%); border: none; color: #fff;
    box-shadow: 0 8px 24px rgba(20, 161, 219, 0.25);
}
.vd-kpi--primary .vd-kpi-label { color: rgba(255,255,255,0.7); }
.vd-kpi--primary .vd-kpi-value { color: #fff; }
.vd-kpi--primary .vd-kpi-trend { color: rgba(255,255,255,0.9); }
.vd-kpi--green { border-left: 4px solid var(--hr-green, #047857); }
.vd-kpi--red { border-left: 4px solid var(--hr-red, #ef4444); }
.vd-kpi-badge {
    position: absolute; top: 1rem; right: 1rem;
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 0.2rem 0.55rem; border-radius: 20px;
}

/* Section header */
.vd-section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; }
.vd-section-title { font-size: 1.15rem; font-weight: 800; color: var(--hr-text, #1e1b4b); margin: 0; }

/* Department rows */
.vd-dept-list { display: flex; flex-direction: column; gap: 0.55rem; }
.vd-dept-row {
    display: flex; align-items: center; gap: 1.1rem; padding: 1rem 1.2rem; border-radius: 14px; cursor: pointer;
    background: var(--hr-card-bg, #faf9ff); border: 1px solid var(--hr-border, #dcf1fb); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.vd-dept-row:hover { background: #fff; box-shadow: 0 2px 12px rgba(20, 161, 219,0.08); border-color: #c9e9f7; }
.vd-dept-rank { min-width: 32px; color: var(--hr-muted, #6b5f8a); display: flex; align-items: center; justify-content: center; }
.vd-dept-rank svg { width: 24px; height: 24px; }
.vd-dept-row:hover .vd-dept-rank { color: var(--hr-purple, #4fb8e6); }
.vd-dept-info { flex: 1; min-width: 0; }
.vd-dept-name { font-size: 0.95rem; font-weight: 700; color: var(--hr-text, #1e1b4b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-dept-tags { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.3rem; flex-wrap: wrap; }
.vd-tag {
    display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
.vd-tag-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.vd-tag--emergency { color: var(--hr-red, #ef4444); }
.vd-tag--emergency .vd-tag-dot { background: var(--hr-red, #ef4444); animation: vdPulse 1.5s infinite; }
.vd-tag--high { color: #dc2626; }
.vd-tag--high .vd-tag-dot { background: #dc2626; }
.vd-tag--urgent { color: var(--hr-orange, #f59e0b); }
.vd-tag--urgent .vd-tag-dot { background: var(--hr-orange, #f59e0b); }
.vd-tag--monitored { color: var(--hr-blue, #14a1db); }
.vd-tag--monitored .vd-tag-dot { background: var(--hr-blue, #14a1db); }
.vd-tag--normal { color: var(--hr-green, #047857); }
.vd-tag--normal .vd-tag-dot { background: var(--hr-green, #047857); }
@keyframes vdPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.vd-pill {
    font-size: 0.65rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 20px;
    background: var(--hr-border, #dcf1fb); color: var(--hr-muted, #6b5f8a); white-space: nowrap;
}
.vd-pill--danger { background: rgba(239,68,68,0.08); color: var(--hr-red, #ef4444); }
.vd-pill--warn { background: rgba(245,158,11,0.08); color: var(--hr-orange, #f59e0b); }
.vd-pill--info { background: rgba(20, 161, 219,0.08); color: var(--hr-blue, #14a1db); }

/* Risk bar */
.vd-risk { min-width: 180px; }
.vd-risk-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
.vd-risk-label { font-size: 0.55rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hr-muted, #6b5f8a); }
.vd-risk-pct { font-size: 0.78rem; font-weight: 700; }
.vd-risk-track { height: 5px; border-radius: 3px; background: var(--hr-border, #dcf1fb); overflow: hidden; }
.vd-risk-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }

/* Chevron */
.vd-chevron {
    width: 36px; height: 36px; min-width: 36px; min-height: 36px; aspect-ratio: 1; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--hr-blue, #14a1db); color: #fff; flex-shrink: 0; align-self: center; border: none; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
    box-shadow: 0 2px 6px rgba(20, 161, 219,0.25);
}
.vd-dept-row:hover .vd-chevron { background: #1488c7; box-shadow: 0 3px 10px rgba(20, 161, 219,0.3); }

/* Status badges */
.vd-status-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 0.3rem 0.7rem; border-radius: 8px; white-space: nowrap;
}
.vd-status-badge--critical { background: #fef2f2; color: var(--hr-red, #ef4444); }
.vd-status-badge--emergency { background: #fef2f2; color: #991b1b; }
.vd-status-badge--urgent { background: #fffbeb; color: var(--hr-orange, #f59e0b); }
.vd-status-badge--normal { background: #ecfdf5; color: var(--hr-green, #047857); }

/* ── Stat Cards (Manage + Drill-down) ── */
.vd-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; }
.vd-stat-card {
    position: relative; padding: 1rem 1.1rem; border-radius: 14px;
    background: var(--hr-card-bg, #faf9ff); border: 1px solid var(--hr-border, #dcf1fb);
    border-left: 4px solid var(--hr-border, #dcf1fb);
}
.vd-stat-card-icon {
    position: absolute; top: 0.7rem; right: 0.7rem; width: 28px; height: 28px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
}
.vd-stat-card-icon svg { width: 16px; height: 16px; }
.vd-stat-card-label { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hr-muted, #6b5f8a); margin-bottom: 0.3rem; }
.vd-stat-card-value { font-size: 1.65rem; font-weight: 800; color: var(--hr-text, #1e1b4b); line-height: 1.1; }
.vd-stat-card-sub { font-size: 0.65rem; font-weight: 600; margin-top: 0.35rem; }
.vd-stat-card--blue { border-left-color: var(--hr-blue, #14a1db); }
.vd-stat-card--blue .vd-stat-card-icon { background: rgba(20, 161, 219,0.1); color: var(--hr-blue, #14a1db); }
.vd-stat-card--green { border-left-color: var(--hr-green, #047857); }
.vd-stat-card--green .vd-stat-card-icon { background: rgba(4,120,87,0.1); color: var(--hr-green, #047857); }
.vd-stat-card--green .vd-stat-card-sub { color: var(--hr-green, #047857); }
.vd-stat-card--red { border-left-color: var(--hr-red, #ef4444); }
.vd-stat-card--red .vd-stat-card-icon { background: rgba(239,68,68,0.1); color: var(--hr-red, #ef4444); }
.vd-stat-card--red .vd-stat-card-sub { color: var(--hr-red, #ef4444); }
.vd-stat-card--purple { border-left-color: var(--hr-purple, #4fb8e6); }
.vd-stat-card--purple .vd-stat-card-icon { background: rgba(79, 184, 230,0.1); color: var(--hr-purple, #4fb8e6); }
.vd-stat-card--purple .vd-stat-card-sub { color: var(--hr-purple, #4fb8e6); }
.vd-stat-card--highlight {
    background: linear-gradient(135deg, var(--hr-blue, #14a1db) 0%, #1488c7 100%);
    border: none; color: #fff; box-shadow: 0 4px 16px rgba(20, 161, 219,0.25);
}
.vd-stat-card--highlight .vd-stat-card-label { color: rgba(255,255,255,0.7); }
.vd-stat-card--highlight .vd-stat-card-value { color: #fff; }
.vd-stat-card--highlight .vd-stat-card-sub { color: rgba(255,255,255,0.8); }
.vd-stat-card--highlight .vd-stat-card-icon { background: rgba(255,255,255,0.2); color: #fff; }

/* Responsive */
@media (max-width: 1400px) { .vd-kpi-value { font-size: 2.2rem; } .vd-kpi { padding: 1rem 1.1rem; min-height: 120px; } .vd-risk { min-width: 140px; } }
@media (max-width: 1200px) { .vd-risk { min-width: 120px; } }
@media (max-width: 1024px) {
    .vd-kpi-row { grid-template-columns: 1fr; } .vd-kpi--primary { min-height: auto; } .vd-kpi-value { font-size: 2rem; }
    .vd-risk { display: none; } .vd-stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .vd-header-title { font-size: 1.2rem; } .vd-dept-row { flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem; }
    .vd-dept-rank { display: none; } .vd-manage-stats { grid-template-columns: 1fr 1fr; }
}

/* ── Recruitment Activity Timeline (Redesigned) ────────────── */

/* Modal header */
.hr-atl-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid #e5e7eb;
}
.hr-atl-header h3 {
    margin: 0; font-size: 15px; font-weight: 700; color: #111827;
    letter-spacing: -0.01em;
}
.hr-atl-close {
    width: 32px; height: 32px; border-radius: 50%; border: none;
    background: #f3f4f6; color: #374151; font-size: 1.1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.hr-atl-close:hover { background: #e5e7eb; color: #111827; transform: none; filter: none; }

/* Filter tabs */
.hr-atl-tabs {
    display: flex; gap: 6px; padding: 12px 20px; border-bottom: 1px solid #f3f4f6;
    flex-wrap: wrap;
}
.hr-atl-tab {
    padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
    border: 1.5px solid #e5e7eb; background: #fff; color: #6b7280;
    cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s; font-family: inherit;
}
.hr-atl-tab:hover { border-color: #c7d2fe; color: #1276c2; background: #eef2ff; }
.hr-atl-tab.active {
    background: #1276c2; color: #fff; border-color: #1276c2;
}

/* Timeline container */
.hr-timeline { position: relative; padding-left: 36px; }
.hr-timeline::before {
    content: ''; position: absolute; left: 15px; top: 16px; bottom: 16px;
    width: 2px; background: linear-gradient(to bottom, #e0e7ff, #e5e7eb 40%, #e5e7eb 60%, #e0e7ff);
    border-radius: 1px;
}

/* Timeline items */
.hr-timeline-item { position: relative; padding: 0 0 20px 0; }
.hr-timeline-item:last-child { padding-bottom: 0; }

/* Timeline dot — color-coded by type */
.hr-timeline-dot {
    position: absolute; left: -36px; top: 12px;
    width: 26px; height: 26px; border-radius: 50%;
    background: #f3f4f6; border: 2px solid #d1d5db;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; z-index: 1; transition: transform 0.15s;
}
.hr-timeline-item:hover .hr-timeline-dot { transform: scale(1.1); }

/* Color-coded dots */
.hr-timeline-dot[data-type="stage"]     { background: #eef2ff; border-color: #a5b4fc; }
.hr-timeline-dot[data-type="document"]  { background: #fef3c7; border-color: #fbbf24; }
.hr-timeline-dot[data-type="interview"] { background: #dcf1fb; border-color: #4fb8e6; }
.hr-timeline-dot[data-type="hr"]        { background: #dbeafe; border-color: #60a5fa; }

/* Timeline card */
.hr-timeline-content {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 12px 16px; transition: box-shadow 0.15s, border-color 0.15s;
}
.hr-timeline-item:hover .hr-timeline-content {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-color: #d1d5db;
}
.hr-timeline-label {
    font-weight: 700; font-size: 13px; color: #111827;
    display: flex; align-items: center; gap: 6px;
}
.hr-timeline-label .atl-type-badge {
    font-size: 0.72rem; font-weight: 600; padding: 1px 7px; border-radius: 10px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.atl-type-badge[data-type="stage"]     { background: #eef2ff; color: #4338ca; }
.atl-type-badge[data-type="document"]  { background: #fef3c7; color: #92400e; }
.atl-type-badge[data-type="interview"] { background: #dcf1fb; color: #0e7bb0; }
.atl-type-badge[data-type="hr"]        { background: #dbeafe; color: #1e40af; }

.hr-timeline-detail {
    font-size: 12.5px; margin-top: 4px; color: #374151; line-height: 1.5;
}
.hr-timeline-detail .atl-old { color: #9ca3af; text-decoration: line-through; }
.hr-timeline-detail .atl-arrow { color: #9ca3af; margin: 0 4px; }
.hr-timeline-detail .atl-new { color: #111827; font-weight: 600; }

.hr-timeline-extra {
    font-size: 12px; color: #6b7280; margin-top: 3px;
}
.hr-timeline-meta {
    font-size: 12px; color: #9ca3af; margin-top: 6px; padding-top: 6px;
    border-top: 1px solid #f3f4f6;
    display: flex; align-items: center; gap: 4px;
}
.hr-timeline-meta svg { flex-shrink: 0; }

/* Empty state */
.hr-atl-empty {
    text-align: center; padding: 48px 20px; color: #9ca3af;
}
.hr-atl-empty svg { margin-bottom: 8px; }
.hr-atl-empty p { margin: 0; font-size: 13px; font-weight: 500; }

/* Responsive */
@media (max-width: 480px) {
    .hr-atl-header { padding: 12px 16px; }
    .hr-atl-header h3 { font-size: 14px; }
    .hr-atl-tabs { padding: 10px 16px; gap: 5px; }
    .hr-atl-tab { font-size: 12px; padding: 4px 10px; }
    .hr-timeline { padding-left: 30px; }
    .hr-timeline-dot { left: -30px; width: 22px; height: 22px; font-size: 12px; }
    .hr-timeline-content { padding: 10px 12px; }
}

/* ─── Mobile Search Overlay ─── */
#mobileSearchBtn { display: none; }

.mobile-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
    opacity: 1;
    transition: opacity 0.2s ease;
}
.mobile-search-overlay.hidden {
    display: none;
    opacity: 0;
}
.mobile-search-overlay.mso-entering {
    opacity: 0;
}

.mobile-search-overlay-bar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #1e1b4b;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: msoSlideDown 0.25s ease-out;
}
@keyframes msoSlideDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

.mobile-search-overlay-bar .search-glyph {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    flex-shrink: 0;
}
.mobile-search-overlay-bar .search-glyph svg {
    width: 20px;
    height: 20px;
}

#mobileSearchInput {
    flex: 1;
    height: 42px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 22px;
    padding: 0 1rem;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}
#mobileSearchInput:focus {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.18);
}
#mobileSearchInput::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
#mobileSearchInput::-webkit-search-cancel-button {
    display: none;
}

.mobile-search-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.mobile-search-close:hover,
.mobile-search-close:active {
    background: rgba(255, 255, 255, 0.25);
}
.mobile-search-close svg {
    width: 18px;
    height: 18px;
}

/* Suggestion panel inside overlay */
.mobile-search-overlay .search-suggest {
    width: calc(100% - 2rem);
    margin: 0.5rem 1rem 0;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    border-radius: 12px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    animation: msoFadeIn 0.15s ease-out;
}
@keyframes msoFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════
   Extension History Modal – Timeline Redesign
   ══════════════════════════════════════════════════════════════ */

.exh-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(480px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    z-index: 1200;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e8ecf4;
    box-shadow: 0 32px 64px -12px rgba(38, 53, 93, 0.18), 0 0 0 1px rgba(20, 161, 219,0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: exhSlideIn 0.2s ease-out;
}
@keyframes exhSlideIn {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ── Header ── */
.exh-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid #f0f0f8;
    background: #fafaff;
    flex-shrink: 0;
}
.exh-header-left {
    flex: 1;
    min-width: 0;
}
.exh-accent-bar {
    width: 36px;
    height: 4px;
    background: #14a1db;
    border-radius: 2px;
    margin-bottom: 0.6rem;
}
.exh-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.02em;
    line-height: 1.3;
}
.exh-subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: #8b98b8;
    font-weight: 500;
}
.exh-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.exh-close-btn svg { width: 16px; height: 16px; }
.exh-close-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* ── Body / Timeline ── */
.exh-body {
    padding: 1rem 1.25rem 1.25rem;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* ── Empty state ── */
.exh-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #94a3b8;
}
.exh-empty svg {
    width: 40px;
    height: 40px;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}
.exh-empty p {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ── Timeline Card ── */
.exh-card {
    display: flex;
    gap: 0.85rem;
    position: relative;
    padding-bottom: 1rem;
}
.exh-card:last-child { padding-bottom: 0; }

/* timeline connector line */
.exh-card:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background: #e8ecf4;
}

/* ── Timeline Dot ── */
.exh-timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.exh-timeline-dot svg { width: 15px; height: 15px; }
.exh-timeline-dot.exh-status--approved {
    background: #dcfce7;
    color: #16a34a;
    border: 2px solid #bbf7d0;
}
.exh-timeline-dot.exh-status--rejected {
    background: #fee2e2;
    color: #dc2626;
    border: 2px solid #fecaca;
}
.exh-timeline-dot.exh-status--pending {
    background: #fef3c7;
    color: #d97706;
    border: 2px solid #fde68a;
}

/* ── Card Content ── */
.exh-card-content {
    flex: 1;
    min-width: 0;
    background: #f8f9fc;
    border: 1px solid #edf0f8;
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.exh-card:hover .exh-card-content {
    border-color: #d4d9ec;
    box-shadow: 0 2px 10px rgba(30, 42, 74, 0.05);
}

.exh-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.exh-attempt {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e293b;
}

/* ── Status Pill ── */
.exh-status-pill {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    line-height: 1.3;
}
.exh-status-pill.exh-status--approved {
    background: #dcfce7;
    color: #15803d;
}
.exh-status-pill.exh-status--rejected {
    background: #fee2e2;
    color: #b91c1c;
}
.exh-status-pill.exh-status--pending {
    background: #fef3c7;
    color: #b45309;
}

/* ── Detail Rows ── */
.exh-card-details {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.exh-detail-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    color: #64748b;
}
.exh-detail-row svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #94a3b8;
}
.exh-detail-label {
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    min-width: 80px;
}
.exh-detail-value {
    color: #334155;
    font-weight: 500;
}
.exh-detail-value--highlight {
    color: #14a1db;
    font-weight: 700;
}
.exh-detail-row--reason {
    align-items: flex-start;
}
.exh-detail-row--reason svg {
    margin-top: 1px;
}
.exh-detail-row--reason .exh-detail-value {
    color: #475569;
    font-style: italic;
    line-height: 1.4;
}

/* ── Mobile ── */
@media (max-width: 500px) {
    .exh-modal {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
        border-radius: 16px;
    }
    .exh-header { padding: 1rem 1rem 0.85rem; }
    .exh-body { padding: 0.85rem 1rem 1rem; }
    .exh-detail-label { min-width: 70px; font-size: 0.72rem; }
    .exh-detail-value { font-size: 0.72rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   Task Progress & Notes
   ═══════════════════════════════════════════════════════════════════ */

.task-notes-panel {
    margin-top: 0.65rem;
    border: 1px solid #e0e4ef;
    border-radius: 10px;
    background: #f8f9fc;
    padding: 0.56rem;
}

.task-notes-header h5 {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: #4a5274;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.task-notes-header h5 svg {
    color: #14a1db;
}

.task-notes-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.2rem 0;
}

/* Unified Activity timeline — lifecycle events rendered inline with notes */
.task-note-item--event {
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    padding: 0.1rem 0.1rem 0.1rem 0.35rem;
}
.task-note-item--event .tl-dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #94a3b8;
}
.task-note-event-text {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}
.task-note-event-text .task-note-time { margin-left: 0.3rem; }
.tl-report_rejected .tl-dot { background: #dc2626; }
.tl-report_approved .tl-dot,
.tl-extension_approved .tl-dot { background: #059669; }
.tl-report_submitted .tl-dot { background: #2563eb; }
.tl-report_reviewed .tl-dot { background: #14a1db; }
.tl-extension_requested .tl-dot,
.tl-extension_pending .tl-dot { background: #d97706; }
.tl-created .tl-dot { background: #94a3b8; }

.task-notes-empty,
.task-notes-loading {
    margin: 0;
    font-size: 0.78rem;
    color: #9ca3b8;
    font-style: italic;
}

.task-note-item {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.35rem 0.4rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #eef0f8;
}

.task-note-item--mine {
    background: #f0f4ff;
    border-color: #d4ddf7;
}

.task-note-item--system {
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0.2rem 0;
}

.task-note-system-text {
    font-size: 0.72rem;
    color: #9ca3b8;
    font-style: italic;
    text-align: center;
    line-height: 1.45;
    max-width: 90%;
    margin: 0 auto;
    text-wrap: balance;
    overflow-wrap: break-word;
    word-break: normal;
}

.task-note-system-text .task-note-time {
    display: inline-block;
    margin-left: 0.25rem;
    white-space: nowrap;
}

.task-note-avatar {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #14a1db;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
}

.task-note-body {
    flex: 1;
    min-width: 0;
}

.task-note-meta {
    font-size: 0.72rem;
    color: #9ca3b8;
    margin-bottom: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.task-note-role {
    color: #14a1db;
    font-weight: 600;
}

.task-note-text {
    font-size: 0.82rem;
    color: #2d3250;
    white-space: pre-wrap;
    word-break: break-word;
}

.task-note-image img {
    max-width: 200px;
    max-height: 180px;
    border-radius: 6px;
    margin-top: 0.25rem;
    cursor: pointer;
}

.task-note-file a {
    font-size: 0.78rem;
    color: #3b82f6;
    text-decoration: underline;
}

.task-note-time {
    font-size: 0.68rem;
    color: #b0b7c8;
}

.task-note-delete {
    background: none;
    border: none;
    color: #d1d5db;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 0.15rem;
    line-height: 1;
    margin-left: auto;
}
.task-note-delete:hover {
    color: #ef4444;
}

/* Composer */
.task-notes-composer {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e0e4ef;
}

.task-notes-composer textarea {
    width: 100%;
    border: 1px solid #e0e4ef;
    border-radius: 8px;
    padding: 0.55rem 0.6rem;
    font-size: 0.82rem;
    font-family: inherit;
    resize: vertical;
    background: #fff;
    box-sizing: border-box;
    min-height: 60px;
}

.task-notes-composer textarea:focus {
    outline: none;
    border-color: #7c8ec8;
    box-shadow: 0 0 0 2px rgba(124, 142, 200, 0.15);
}

.task-notes-composer-actions {
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.task-notes-attach-btn {
    cursor: pointer;
    color: #6e789a;
    display: flex;
    align-items: center;
    padding: 0.2rem;
    border-radius: 4px;
}
.task-notes-attach-btn:hover { color: #3b82f6; }

.task-notes-file-name {
    font-size: 0.72rem;
    color: #6e789a;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-notes-remove-file {
    background: none;
    border: none;
    color: #9ca3b8;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 0.15rem;
    line-height: 1;
}
.task-notes-remove-file:hover { color: #ef4444; }

.task-notes-send-btn {
    margin-left: auto;
    padding: 0.3rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
    background: #14a1db;
    color: #fff;
    border: none;
    cursor: pointer;
}
.task-notes-send-btn:hover { background: #1276c2; }
.task-notes-send-btn:disabled { opacity: 0.5; cursor: default; }

/* Status hint for locked/completed/failed tasks */
.task-notes-status-hint {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    color: #9ca3b8;
    font-style: italic;
    text-align: center;
}

/* Load earlier notes button */
.task-notes-load-more {
    text-align: center;
    padding: 0.2rem 0 0.3rem;
}

.task-notes-load-more-btn {
    background: none;
    border: 1px solid #e0e4ef;
    border-radius: 6px;
    padding: 0.2rem 0.7rem;
    font-size: 0.72rem;
    color: #6e789a;
    cursor: pointer;
    font-family: inherit;
}
.task-notes-load-more-btn:hover { background: #f0f2f8; color: #4a5274; }
.task-notes-load-more-btn:disabled { opacity: 0.5; cursor: default; }

/* ═══════════════════════════════════════════════════════════════════
   Admin Activity Control Panel
   ═══════════════════════════════════════════════════════════════════ */

.admin-control-panel {
    margin-top: 0.65rem;
    border: 1px solid #fde2e2;
    border-radius: 10px;
    background: #fffbfb;
    padding: 0.56rem;
}

.admin-control-header h5 {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: #b91c1c;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.admin-control-header h5 svg {
    color: #b91c1c;
}

.admin-comment-form {
    margin-bottom: 0.6rem;
}

.admin-comment-form label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4a5274;
}

.admin-comment-form textarea {
    width: 100%;
    border: 1px solid #e0e4ef;
    border-radius: 8px;
    padding: 0.4rem 0.5rem;
    font-size: 0.82rem;
    font-family: inherit;
    resize: vertical;
    background: #fff;
    box-sizing: border-box;
}

.admin-comment-form textarea:focus {
    outline: none;
    border-color: #7c8ec8;
    box-shadow: 0 0 0 2px rgba(124, 142, 200, 0.15);
}

.admin-comment-form .actions {
    margin-top: 0.35rem;
    display: flex;
    gap: 0.4rem;
}

/* Activity Log */

.admin-activity-log {
    padding-top: 0.5rem;
    border-top: 1px solid #f0e0e0;
}

.admin-activity-log h6 {
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #4a5274;
}

.admin-log-list {
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.admin-log-empty,
.admin-log-loading {
    margin: 0;
    font-size: 0.78rem;
    color: #9ca3b8;
    font-style: italic;
}

.admin-log-item {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #eef0f8;
}

.admin-log-icon {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: #6e789a;
    display: flex;
    align-items: center;
}

.admin-log-item--comment .admin-log-icon { color: #3b82f6; }
.admin-log-item--status_revert .admin-log-icon { color: #f59e0b; }
.admin-log-item--unlock .admin-log-icon { color: #10b981; }
.admin-log-item--deadline_extend .admin-log-icon { color: #4fb8e6; }

.admin-log-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.admin-log-meta {
    font-size: 0.72rem;
    color: #9ca3b8;
}

.admin-log-desc {
    font-size: 0.78rem;
    color: #374162;
    word-break: break-word;
}

.admin-log-comment {
    font-style: italic;
    color: #4a5274;
}

/* DEPRECATED: Applicant Database classes — cards replaced by .rec-card .rec-card-applicant */
/* ── Applicant Database – Redesign ──────────────────────────── */

/* Stat cards grid */
.ap-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 1440px) {
    .ap-stats-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 900px) {
    .ap-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.ap-stat-card {
    padding: 1rem 1.25rem 1rem 1.5rem;
    border-radius: 12px;
    border: 1px solid;
    position: relative;
    overflow: hidden;
}
.ap-stat-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
}
.ap-stat-card .ap-stat-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}
.ap-stat-card .ap-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
}
.ap-stat-card.ap-stat-total      { background: #eff6ff; border-color: #dbeafe; }
.ap-stat-card.ap-stat-total::before { background: #3b82f6; }
.ap-stat-card.ap-stat-total .ap-stat-label { color: #2563eb; }
.ap-stat-card.ap-stat-total .ap-stat-value { color: #1e3a5f; }

.ap-stat-card.ap-stat-active     { background: #ecfdf5; border-color: #d1fae5; }
.ap-stat-card.ap-stat-active::before { background: #10b981; }
.ap-stat-card.ap-stat-active .ap-stat-label { color: #059669; }
.ap-stat-card.ap-stat-active .ap-stat-value { color: #064e3b; }

.ap-stat-card.ap-stat-interview  { background: #fffbeb; border-color: #fef3c7; }
.ap-stat-card.ap-stat-interview::before { background: #f59e0b; }
.ap-stat-card.ap-stat-interview .ap-stat-label { color: #d97706; }
.ap-stat-card.ap-stat-interview .ap-stat-value { color: #78350f; }

.ap-stat-card.ap-stat-offered    { background: #faf5ff; border-color: #dcf1fb; }
.ap-stat-card.ap-stat-offered::before { background: #4fb8e6; }
.ap-stat-card.ap-stat-offered .ap-stat-label { color: #1488c7; }
.ap-stat-card.ap-stat-offered .ap-stat-value { color: #3b0764; }

.ap-stat-card.ap-stat-hired      { background: #eef2ff; border-color: #e0e7ff; }
.ap-stat-card.ap-stat-hired::before { background: #14a1db; }
.ap-stat-card.ap-stat-hired .ap-stat-label { color: #14a1db; }
.ap-stat-card.ap-stat-hired .ap-stat-value { color: #312e81; }

/* ── Applicant Database v2 – compact strip, toolbar, chips, stepper ── */
.ap-stats-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
@media (max-width: 900px) { .ap-stats-strip { grid-template-columns: repeat(2, 1fr); } }
.ap-chip-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: #f8fafc;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
    text-align: left;
    min-height: 40px;
}
.ap-chip-stat:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.ap-chip-stat-label {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: #475569;
}
.ap-chip-stat-value { font-size: 1.05rem; font-weight: 800; color: #0f172a; }
.ap-chip-stat.ap-chip-zero { opacity: 0.55; }
.ap-chip-stat.ap-chip-zero .ap-chip-stat-value { color: #94a3b8; }
.ap-chip-stat.ap-chip-on { border-color: currentColor; box-shadow: 0 0 0 2px rgba(20, 161, 219,0.12); }
.ap-chip-total    { background: #eff6ff; }
.ap-chip-total    .ap-chip-stat-label, .ap-chip-total .ap-chip-stat-value    { color: #1e40af; }
.ap-chip-active   { background: #ecfdf5; }
.ap-chip-active   .ap-chip-stat-label, .ap-chip-active .ap-chip-stat-value   { color: #065f46; }
.ap-chip-interview{ background: #fffbeb; }
.ap-chip-interview .ap-chip-stat-label, .ap-chip-interview .ap-chip-stat-value { color: #92400e; }
.ap-chip-offered  { background: #faf5ff; }
.ap-chip-offered  .ap-chip-stat-label, .ap-chip-offered .ap-chip-stat-value  { color: #0a5e88; }
.ap-chip-hired    { background: #eef2ff; }
.ap-chip-hired    .ap-chip-stat-label, .ap-chip-hired .ap-chip-stat-value    { color: #3730a3; }

/* Single-row toolbar: search + filters + actions */
.ap-toolbar-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.ap-toolbar-search { flex: 1; min-width: 200px; position: relative; }
.ap-search-icon-svg {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: #94a3b8; pointer-events: none;
}
.ap-search-input-v2 {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.4rem 0.75rem 0.4rem 2rem;
    font-size: 0.82rem;
    font-family: inherit;
    background: #fff;
    color: #1e293b;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ap-search-input-v2:focus {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 3px rgba(20, 161, 219,0.1);
}
.ap-toolbar-select {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    font-family: inherit;
    background: #fff;
    color: #374151;
    cursor: pointer;
    outline: none;
    min-width: 130px;
    max-width: 180px;
}
.ap-toolbar-select:focus { border-color: #a5b4fc; box-shadow: 0 0 0 3px rgba(20, 161, 219,0.1); }
.ap-toolbar-btn {
    display: inline-flex; align-items: center;
    border: 1px solid #e2e8f0; background: #fff; color: #374151;
    border-radius: 8px; padding: 0.4rem 0.75rem; font-size: 0.78rem;
    font-weight: 600; cursor: pointer; font-family: inherit;
    transition: background 0.12s, border-color 0.12s;
}
.ap-toolbar-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.ap-toolbar-btn-primary { background: #4648d4; border-color: #4648d4; color: #fff; }
.ap-toolbar-btn-primary:hover { background: #3730a3; border-color: #3730a3; }
.ap-toolbar-btn-ghost { color: #64748b; }

/* Active filter chips row */
.ap-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin-bottom: 0.5rem;
    min-height: 0;
}
.ap-chips-row:empty { display: none; }
.ap-chip-active {
    display: inline-flex; align-items: center; gap: 4px;
    background: #eef2ff; color: #4338ca;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    padding: 2px 4px 2px 10px;
    font-size: 0.72rem; font-weight: 600;
}
.ap-chip-x {
    width: 18px; height: 18px; border-radius: 50%;
    border: none; background: transparent; color: #14a1db;
    font-size: 14px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.ap-chip-x:hover { background: #c7d2fe; }
.ap-chip-clearall {
    background: none; border: none; color: #64748b;
    font-size: 0.72rem; font-weight: 600; cursor: pointer;
    font-family: inherit; text-decoration: underline; padding: 2px 6px;
}
.ap-chip-clearall:hover { color: #334155; }

/* Table grid v2 — adds Applied column */
.lum-grid-applicants-v2 {
    grid-template-columns: minmax(240px, 1.3fr) minmax(180px, 1fr) 210px minmax(140px, 0.8fr) 90px 86px;
    gap: 1.25rem;
    padding: 0.9rem 1.5rem;
    min-height: 72px;
    align-items: center;
}
.lum-pipe-table-hdr.lum-grid-applicants-v2 { min-height: 0; padding-top: 0.8rem; padding-bottom: 0.8rem; }
@media (max-width: 1280px) {
    .lum-grid-applicants-v2 {
        grid-template-columns: minmax(220px, 1.3fr) minmax(160px, 1fr) 190px minmax(120px, 0.8fr) 80px 82px;
        gap: 1rem; padding: 0.85rem 1.25rem;
    }
}
@media (max-width: 1100px) {
    .lum-grid-applicants-v2 {
        grid-template-columns: minmax(200px, 1.3fr) 0.9fr 180px 0.8fr 80px 80px;
        gap: 0.85rem;
    }
}
@media (max-width: 900px) {
    .lum-grid-applicants-v2 { grid-template-columns: 1fr; gap: 0.5rem; padding: 0.75rem 1rem; min-height: 0; }
}

/* Sortable header styling */
.lum-pipe-table-hdr .ap-sort {
    cursor: pointer;
    user-select: none;
    transition: color 0.12s;
}
.lum-pipe-table-hdr .ap-sort:hover { color: #1276c2; }
.lum-pipe-table-hdr .ap-sort.ap-sort-on { color: #1276c2; }
.ap-sort-ind { font-size: 0.72rem; }
.ap-hdr-count {
    font-weight: 500; text-transform: none; letter-spacing: 0;
    font-size: 0.72rem; color: #94a3b8; margin-left: 4px;
}

/* Applied column cell */
.ap-col-applied {
    display: flex; align-items: center; min-width: 0;
}
.ap-applied-rel { font-size: 0.76rem; font-weight: 500; color: #475569; white-space: nowrap; }

/* Rejected row — subtle de-emphasis */
.ap-row-rejected { opacity: 0.68; }
.ap-row-rejected:hover { opacity: 1; }

/* Pipeline v2 — segmented bar with label + time-in-stage */
.ap-pipe-wrap { gap: 6px; }
.ap-pipe-track-v2 {
    display: flex; gap: 3px; width: 100%; align-items: center;
}
.ap-pipe-seg {
    flex: 1; height: 5px;
    background: #e2e8f0; border-radius: 3px; overflow: hidden;
    position: relative;
}
.ap-pipe-seg-fill { display: block; width: 0; height: 100%; background: transparent; transition: width 0.25s; }
.ap-pipe-seg-done { background: #a5b4fc; }
.ap-pipe-seg-done .ap-pipe-seg-fill { width: 100%; background: #5cc3ea; }
.ap-pipe-seg-active { background: #e0e7ff; }
.ap-pipe-seg-active .ap-pipe-seg-fill { width: 50%; background: #1276c2; }
.ap-pipe-meta-row {
    display: flex; justify-content: space-between; align-items: baseline;
    width: 100%; gap: 8px;
}
.ap-pipe-label-v2 {
    font-size: 0.66rem; font-weight: 700; color: #4338ca;
    text-transform: uppercase; letter-spacing: 0.04em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
}
.ap-pipe-meta {
    font-size: 0.66rem; font-weight: 500; color: #94a3b8;
    white-space: nowrap; flex-shrink: 0; line-height: 1.2;
}
.ap-pipe-rejected-wrap {
    display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}
.ap-pipe-rejected-badge {
    display: inline-block;
    font-size: 0.65rem; font-weight: 700;
    background: #fee2e2; color: #991b1b;
    padding: 3px 10px; border-radius: 999px;
    letter-spacing: 0.03em;
}

/* Candidate column spacing */
.lum-grid-applicants-v2 .lum-candidate-sub { margin-top: 2px; font-size: 0.73rem; }
.lum-grid-applicants-v2 .lum-candidate-name { font-size: 0.84rem; letter-spacing: -0.01em; }
/* Allow name/sub wrapper to shrink so long email · phone truncates with ellipsis
   instead of overflowing into the Position column */
.lum-grid-applicants-v2 .lum-col-candidate > div:not(.lum-avatar) {
    min-width: 0;
    flex: 1 1 auto;
}
/* Department value — keep readable on 1366 */
.lum-grid-applicants-v2 .lum-ap-dept {
    font-size: 0.76rem; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Actions column — keep View button flush right & consistent */
.lum-grid-applicants-v2 .lum-col-actions { justify-content: flex-end; }

/* Filters card */
.ap-filters-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}
.ap-filters-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.ap-filter-field {
    min-width: 0;
    width: 180px;
    flex-shrink: 0;
}
.ap-filter-field.ap-filter-search {
    flex: 1;
    min-width: 200px;
}
.ap-filter-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.35rem;
    letter-spacing: 0.04em;
}
.ap-search-wrap {
    position: relative;
}
.ap-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}
.ap-search-input {
    width: 100%;
    padding: 7px 12px 7px 32px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.82rem;
    background: transparent;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ap-search-input:focus {
    outline: none;
    border-color: #14a1db;
    box-shadow: 0 0 0 2px rgba(20, 161, 219,0.15);
}
.ap-filter-select {
    width: 100%;
    padding: 7px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.82rem;
    background: transparent;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ap-filter-select:focus {
    outline: none;
    border-color: #14a1db;
    box-shadow: 0 0 0 2px rgba(20, 161, 219,0.15);
}

/* Toolbar (count + view toggle) */
.ap-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.25rem;
    margin-bottom: 0.75rem;
}
.ap-toolbar-count {
    font-size: 0.82rem;
    color: #64748b;
    margin: 0;
}
.ap-toolbar-count strong {
    color: #334155;
    font-weight: 600;
}

/* Applicant card list */
.ap-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.ap-card {
    background: #fff;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: box-shadow 0.15s;
    cursor: pointer;
}
.ap-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
}
.ap-card-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}
@media (max-width: 900px) {
    .ap-card-inner { flex-direction: column; align-items: flex-start; }
}
.ap-card-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1;
    min-width: 0;
}
.ap-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    color: #14a1db;
}
.ap-card-name-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}
.ap-card-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: #0f172a;
}
.ap-card-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.6;
}
.ap-card-badge.ap-badge-active     { background: #d1fae5; color: #065f46; }
.ap-card-badge.ap-badge-hired      { background: #d1fae5; color: #065f46; }
.ap-card-badge.ap-badge-blacklisted{ background: #fee2e2; color: #991b1b; }
.ap-card-badge.ap-badge-inactive   { background: #f3f4f6; color: #6b7280; }
/* Stage badges */
.ap-card-badge.ap-badge-stage-amber  { background: #fef3c7; color: #92400e; }
.ap-card-badge.ap-badge-stage-blue   { background: #dbeafe; color: #1e40af; }
.ap-card-badge.ap-badge-stage-green  { background: #d1fae5; color: #065f46; }
.ap-card-badge.ap-badge-stage-red    { background: #fee2e2; color: #991b1b; }
.ap-card-badge.ap-badge-stage-purple { background: #dcf1fb; color: #0a5e88; }
.ap-card-badge.ap-badge-stage-gray   { background: #f1f5f9; color: #475569; }

.ap-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.85rem;
    font-size: 0.78rem;
    color: #64748b;
}
.ap-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}
.ap-card-meta-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.7;
}
.ap-card-meta-item.ap-meta-highlight {
    font-weight: 600;
    color: #334155;
}

/* Card action buttons */
.ap-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.ap-btn-primary {
    padding: 7px 16px;
    background: #14a1db;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.ap-btn-primary:hover { opacity: 0.88; }
.ap-btn-outline {
    padding: 7px 16px;
    background: rgba(20, 161, 219,0.05);
    color: #14a1db;
    border: 1px solid rgba(20, 161, 219,0.2);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.ap-btn-outline:hover { background: rgba(20, 161, 219,0.1); }
.ap-btn-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.ap-btn-icon:hover {
    color: #475569;
    background: #f1f5f9;
}

/* Pagination */
.ap-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding: 0 0.25rem;
}
.ap-pagination-info {
    font-size: 0.82rem;
    color: #64748b;
}
.ap-pagination-buttons {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.ap-page-btn {
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 6px;
    font-size: 0.78rem;
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.ap-page-btn:hover:not(:disabled):not(.ap-page-active) { background: #f8fafc; }
.ap-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.ap-page-btn.ap-page-active {
    background: #14a1db;
    color: #fff;
    border-color: #14a1db;
}
.ap-page-ellipsis {
    color: #94a3b8;
    font-size: 0.82rem;
    padding: 0 2px;
}

/* ── Recruitment accessibility & consistency fixes ────────── */

/* Focus-visible states for keyboard navigation (WCAG 2.1.1) */
.rec-card:focus-visible,
.rec-card-applicant:focus-visible { outline: 2px solid #14a1db; outline-offset: 2px; }
.rec-btn:focus-visible { outline: 2px solid #14a1db; outline-offset: 2px; }
.hr-btn-sm:focus-visible { outline: 2px solid #14a1db; outline-offset: 1px; }
.ap-page-btn:focus-visible { outline: 2px solid #14a1db; outline-offset: 1px; }
.hr-stage-pick-btn:focus-visible { outline: 2px solid #14a1db; outline-offset: 1px; }
.hr-pill.hr-stage-pill-edit:focus-visible { outline: 2px solid #14a1db; outline-offset: 1px; }
.ap-filter-input:focus-visible,
.ap-filter-select:focus-visible,
.ap-filter-search:focus-visible { outline: 2px solid #14a1db; outline-offset: -1px; }

/* Text truncation for long names/emails */
.ap-card-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}
.ap-card-meta-item {
    overflow: hidden;
    text-overflow: ellipsis;
}
.rec-card-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

/* Fix contrast ratio for stat labels (WCAG AA requires 4.5:1) */
.ap-stat-label { color: #475569; }
.pipe-step-pending .pipe-step-label { color: #94a3b8; }

/* Fix modal max-width */
.hr-modal-box { max-width: 720px; }

/* Fix dead selector — target actual input classes */
.ap-search-input:focus-visible { outline: 2px solid #14a1db; outline-offset: -1px; }

/* Fix touch target sizes for mobile */
@media (max-width: 768px) {
    .rec-btn-icon, .hr-modal-close { min-width: 44px; min-height: 44px; }
    .ap-page-btn { min-width: 44px; min-height: 44px; }
}

/* Fix rec-pill minimum readable size */
.rec-pill { font-size: 0.65rem; }
.rec-stat-label { font-size: 0.65rem; }

/* 1366x768 responsive optimization */
@media (max-width: 1400px) and (min-width: 901px) {
    .ap-stats-grid { grid-template-columns: repeat(5, 1fr); gap: 0.6rem; }
    .ap-filters-row { gap: 0.6rem; }
    .ap-filter-field { width: 160px; }
    .ap-filter-search { min-width: 170px; }
}

/* ── Deadline Alert Popup (Luminous-style redesign) ────────── */

/* Reset global button/input overrides inside this modal */
.deadline-alert-modal button {
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    border: none;
    background: none;
    color: inherit;
    font-weight: inherit;
    filter: none;
}
.deadline-alert-modal button:hover {
    filter: none;
    transform: none;
}
.deadline-alert-modal input {
    width: auto;
    max-width: none;
    min-width: 0;
    border-radius: 0;
    padding: 0;
}
.deadline-alert-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1250;
    width: min(520px, calc(100vw - 2rem));
    background: #fff;
    border-radius: 1.75rem;
    box-shadow: 0 8px 32px rgba(25, 28, 29, 0.10), 0 24px 60px rgba(30, 27, 75, 0.12);
    animation: dlaSlideIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}
@keyframes dlaSlideIn {
    from { opacity: 0; transform: translate(-50%, -44%) scale(0.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ── Queue bar (multiple overdue tasks) ── */
.dla-queue-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #FEF3C7;
    border-bottom: 1px solid #FDE68A;
    font-size: 0.78rem;
}
.dla-queue-bar.hidden { display: none; }
.deadline-alert-modal .dla-queue-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: rgba(255,255,255,0.7);
    border: 1px solid #F59E0B;
    border-radius: 6px;
    color: #92400E;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, opacity 0.15s;
    flex-shrink: 0;
}
.deadline-alert-modal .dla-queue-nav:hover { background: #fff; }
.deadline-alert-modal .dla-queue-nav:disabled { opacity: 0.35; cursor: default; }
.dla-queue-count {
    flex: 1;
    text-align: center;
    font-weight: 600;
    color: #92400E;
}
.deadline-alert-modal .dla-dismiss-all {
    background: rgba(255,255,255,0.7);
    border: 1px solid #F59E0B;
    border-radius: 6px;
    color: #92400E;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 10px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.deadline-alert-modal .dla-dismiss-all:hover { background: #fff; color: #78350F; }

/* ── Gold gradient header ── */
.dla-header {
    position: relative;
    background: #ffdf93;
    padding: 28px 28px 44px;
}
.dla-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.dla-header-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.dla-priority-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #5c4a1e;
}
.dla-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: #3a2e0e;
    margin: 0;
    line-height: 1.25;
    max-width: 360px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.dla-header-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: rotate(12deg);
    color: #5c4a1e;
}
.deadline-alert-modal .dla-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    color: #78560a;
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
}
.deadline-alert-modal .dla-close-btn:hover { color: #3a2e0e; background: rgba(255, 255, 255, 0.6); }

/* ── Content body (overlaps header) ── */
.dla-body {
    background: #fff;
    border-radius: 1.5rem 1.5rem 0 0;
    margin-top: -20px;
    position: relative;
    padding: 28px 28px 24px;
}

/* ── Status row (timeline + priority) ── */
.dla-status-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
.dla-status-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.dla-status-item--right { text-align: right; }
.dla-status-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}
.dla-status-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e1b4b;
}
.dla-status-value--timeline { color: #b45309; }
.dla-status-value--timeline.dla-countdown-critical { color: #dc2626; }
.dla-status-divider {
    width: 1px;
    height: 36px;
    background: #e5e7eb;
    flex-shrink: 0;
}

/* ── Message / description ── */
.dla-message {
    font-size: 0.88rem;
    color: #6b7280;
    margin: 0 0 24px;
    line-height: 1.65;
}

/* ── Snooze section ── */
.dla-snooze {
    margin-bottom: 24px;
}
.dla-snooze-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b7280;
    margin-bottom: 10px;
}
.dla-snooze-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.deadline-alert-modal .dla-snooze-btn {
    padding: 7px 18px;
    border-radius: 9999px;
    background: #f3f4f6;
    border: none;
    color: #374151;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    white-space: nowrap;
}
.deadline-alert-modal .dla-snooze-btn:hover {
    background: #14a1db;
    color: #fff;
    box-shadow: 0 2px 8px rgba(20, 161, 219, 0.22);
}
.deadline-alert-modal .dla-snooze-btn:active { transform: scale(0.96); }

/* ── Custom snooze form ── */
.dla-custom-snooze {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    animation: dlaFadeIn 0.18s ease-out;
}
.dla-custom-snooze.hidden { display: none; }
@keyframes dlaFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.deadline-alert-modal .dla-custom-input {
    width: 100px;
    padding: 7px 12px;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    font-size: 0.82rem;
    color: #374151;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.deadline-alert-modal .dla-custom-input:focus {
    border-color: #14a1db;
    box-shadow: 0 0 0 3px rgba(20, 161, 219, 0.12);
}
.deadline-alert-modal .dla-custom-input::placeholder { color: #9ca3af; }
.deadline-alert-modal .dla-custom-confirm {
    padding: 7px 16px;
    border-radius: 9999px;
    background: #14a1db;
    border: none;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.deadline-alert-modal .dla-custom-confirm:hover { background: #1276c2; }

/* ── Action buttons ── */
.dla-actions {
    display: flex;
    gap: 12px;
}
.deadline-alert-modal .dla-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 48px;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background 0.18s, box-shadow 0.18s, transform 0.1s;
    white-space: nowrap;
}
.deadline-alert-modal .dla-btn:active { transform: scale(0.97); }
.deadline-alert-modal .dla-btn-primary {
    background: #14a1db;
    color: #fff;
    box-shadow: 0 4px 14px rgba(20, 161, 219, 0.25);
}
.deadline-alert-modal .dla-btn-primary:hover {
    background: #1276c2;
    box-shadow: 0 6px 20px rgba(20, 161, 219, 0.35);
}
.deadline-alert-modal .dla-btn-secondary {
    background: #fff;
    color: #1e293b;
    border: 1px solid #d1d5db;
}
.deadline-alert-modal .dla-btn-secondary:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .deadline-alert-modal { width: calc(100vw - 1.5rem); border-radius: 1.25rem; }
    .dla-header { padding: 20px 18px 36px; }
    .dla-title { font-size: 1.15rem; }
    .dla-header-icon { width: 40px; height: 40px; border-radius: 12px; }
    .dla-body { padding: 22px 18px 20px; }
    .dla-status-row { gap: 12px; margin-bottom: 16px; }
    .dla-status-value { font-size: 0.92rem; }
    .dla-message { margin-bottom: 20px; }
    .dla-snooze { margin-bottom: 20px; }
    .dla-snooze-chips { flex-wrap: wrap; gap: 8px; }
    .dla-actions { flex-direction: column; gap: 14px; }
    .deadline-alert-modal .dla-btn { height: 56px; min-height: 48px; padding: 14px 20px; font-size: 1rem; border-radius: 14px; }
    .deadline-alert-modal .dla-btn-primary { box-shadow: 0 3px 10px rgba(20, 161, 219, 0.22); }
    .deadline-alert-modal .dla-btn-secondary { border-width: 1.5px; }
    .deadline-alert-modal .dla-snooze-btn { min-height: 44px; padding: 10px 18px; font-size: 0.88rem; }
}

/* ═══════════════════════════════════════════════════════════════
   Dashboard Entrance Animations  (disabled — instant tab switch)
   ═══════════════════════════════════════════════════════════════ */

/* ── Donut clockwise draw mask ── */
.info-donut.dash-donut-drawing {
    mask-image: conic-gradient(#000 0deg, #000 var(--donut-progress, 0deg), transparent var(--donut-progress, 0deg));
    -webkit-mask-image: conic-gradient(#000 0deg, #000 var(--donut-progress, 0deg), transparent var(--donut-progress, 0deg));
}

/* ── Button active press feedback ── */
.report-btn-primary:active  { transform: scale(0.97); }
.report-btn-secondary:active { transform: scale(0.97); }

/* ══════════════════════════════════════════════════════════
   GLOBAL ANIMATIONS SYSTEM
   ══════════════════════════════════════════════════════════ */

/* ── 1. Modal open/close animations ── */
@keyframes modalScaleIn {
    /* .ds-modal is flex-centered by its overlay, so it must NOT translate(-50%,-50%)
       — that would shove it up-left during the animation and snap back to center
       when anim-enter is removed. Scale in place; flex handles the centering. */
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes modalScaleInTop {
    from { opacity: 0; transform: translateX(-50%) scale(0.92) translateY(-12px); }
    to   { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}
@keyframes modalScaleOut {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to   { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
}
@keyframes modalScaleOutTop {
    from { opacity: 1; transform: translateX(-50%) scale(1); }
    to   { opacity: 0; transform: translateX(-50%) scale(0.92) translateY(-12px); }
}

.event-details-box.anim-enter  { animation: modalScaleInTop 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.event-details-box.anim-exit   { animation: modalScaleOutTop 0.2s ease-in forwards; pointer-events: none; }
/* WS3: the task-detail drawer must slide on the X axis only. The shared
   modalScaleInTop keyframe carries translateX(-50%) (for centred modals),
   which would yank the drawer half a viewport left — override per-ID so it
   can't leak. Desktop/tablet (>620px) uses these horizontal slide keyframes;
   below 620px the existing full-screen override + mobile keyframes win. */
#eventDetailsBox.anim-enter { animation: drawerInRight .24s var(--ease-emphasized) forwards; }
#eventDetailsBox.anim-exit  { animation: drawerOutRight .2s ease-in forwards; pointer-events: none; }
@keyframes drawerInRight  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes drawerOutRight { from { transform: translateX(0); } to { transform: translateX(100%); } }
.report-submit-modal.anim-enter { animation: modalScaleInTop 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.report-submit-modal.anim-exit  { animation: modalScaleOutTop 0.2s ease-in forwards; pointer-events: none; }
/* Quick-add uses inset+margin centring (no translate), so its scale animation
   must NOT carry translate(-50%,-50%). The enter animation deliberately omits
   `forwards`: once it finishes the panel reverts to its base transform:none,
   so the native time/date picker popups position correctly while it's open. */
@keyframes modalScaleInQA  { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes modalScaleOutQA { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.94); } }
.quick-add-panel.anim-enter    { animation: modalScaleInQA 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
.quick-add-panel.anim-exit     { animation: modalScaleOutQA 0.2s ease-in forwards; pointer-events: none; }

/* ── MOBILE FIX: full-screen modals must not use translateX(-50%) ──
   On mobile (≤620px), .report-submit-modal, #reportPreviewModal, and
   .event-details-box become full-screen via inset:0 + transform:none.
   The desktop modalScaleInTop keyframe applies translateX(-50%), which
   on mobile shifts the entire modal half a viewport off the left edge,
   making the close (X) button unreachable and the UI feel frozen.
   Use mobile-safe keyframes that animate only opacity + translateY/scale. */
@media (max-width: 620px) {
    @keyframes modalScaleInTopMobile {
        from { opacity: 0; transform: translateY(-10px) scale(0.97); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes modalScaleOutTopMobile {
        from { opacity: 1; transform: translateY(0) scale(1); }
        to   { opacity: 0; transform: translateY(-10px) scale(0.97); }
    }
    .report-submit-modal.anim-enter,
    .event-details-box.anim-enter {
        animation: modalScaleInTopMobile 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }
    .report-submit-modal.anim-exit,
    .event-details-box.anim-exit {
        animation: modalScaleOutTopMobile 0.16s ease-in forwards !important;
        pointer-events: none;
    }
    /* Larger touch target for the close button on mobile (44x44 min) */
    #reportPreviewModal .edv-close-btn,
    .report-submit-modal .edv-close-btn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        position: relative;
        z-index: 5;
    }
    /* Make sure header sits above body content for click priority */
    #reportPreviewModal .rpv-header,
    .report-submit-modal .rsm-header {
        position: relative;
        z-index: 4;
    }
}

/* ── 2. Backdrop fade ── */
@keyframes backdropFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes backdropFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
.modal-backdrop.anim-enter { animation: backdropFadeIn 0.25s ease-out forwards; }
.modal-backdrop.anim-exit  { animation: backdropFadeOut 0.18s ease-in forwards; }

/* ── 3. Dropdown animations (notification menu, profile menu) ── */
@keyframes dropdownScaleIn {
    from { opacity: 0; transform: scale(0.9) translateY(-6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes dropdownScaleOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to   { opacity: 0; transform: scale(0.9) translateY(-6px); }
}
.notif-menu.anim-enter { animation: dropdownScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; transform-origin: top right; }
.notif-menu.anim-exit  { animation: dropdownScaleOut 0.15s ease-in forwards; transform-origin: top right; }

/* Profile photo menu animation */
#profilePhotoMenu { transform-origin: top right; }
#profilePhotoMenu.anim-enter { animation: dropdownScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
#profilePhotoMenu.anim-exit  { animation: dropdownScaleOut 0.15s ease-in forwards; }

/* ── 4. Section/view fade transition (disabled — instant tab switch) ── */

/* ── 5. Task card staggered entrance (disabled — instant tab switch) ── */

/* ── 6. Notification item staggered slide-in ── */
@keyframes notifItemSlideIn {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}
.notif-item.anim-notif-enter {
    animation: notifItemSlideIn 0.25s ease-out forwards;
    opacity: 0;
}

/* ── 7. Task card context menu (details) ── */
@keyframes menuPopIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
.task-card-menu-list {
    transform-origin: top right;
    animation: menuPopIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── 8. Sidebar nav hover & active transitions ── */
.menu .menu-item {
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.menu .menu-item:hover:not(.active) {
    background: rgba(255,255,255,0.08);
    padding-left: 1.1rem;
}
.menu .menu-item.active::before {
    animation: navIndicatorSlideIn 0.25s ease-out forwards;
}
@keyframes navIndicatorSlideIn {
    from { height: 0; opacity: 0; }
    to   { height: 22px; opacity: 1; }
}

/* HRMS nav item active indicator */
.hrms-nav-item.active::before {
    animation: navIndicatorSlideIn 0.25s ease-out forwards;
}

/* ── 9. Button micro-interactions ── */
button, .top-create-btn, .report-btn-primary, .report-btn-secondary,
.staff-form-submit-btn, .staff-form-clear-btn, .staff-form-add-btn {
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
button:active:not(:disabled),
.top-create-btn:active,
.report-btn-primary:active,
.report-btn-secondary:active {
    transform: scale(0.96) !important;
}
.top-create-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(20, 161, 219, 0.35) !important;
}

/* Notification bell ring on new notifications */
@keyframes bellRing {
    0%   { transform: rotate(0); }
    15%  { transform: rotate(14deg); }
    30%  { transform: rotate(-12deg); }
    45%  { transform: rotate(8deg); }
    60%  { transform: rotate(-6deg); }
    75%  { transform: rotate(3deg); }
    100% { transform: rotate(0); }
}
.notif-btn.has-unread svg {
    animation: bellRing 0.6s ease-in-out;
}

/* ── 10. Form focus glow & error shake ── */
@keyframes focusGlow {
    from { box-shadow: 0 0 0 0 rgba(20, 161, 219, 0.3); }
    to   { box-shadow: 0 0 0 3px rgba(20, 161, 219, 0.15); }
}
input:focus, select:focus, textarea:focus {
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 0 0 3px rgba(20, 161, 219, 0.12) !important;
}

@keyframes formShake {
    0%, 100% { transform: translateX(0); }
    20%  { transform: translateX(-6px); }
    40%  { transform: translateX(5px); }
    60%  { transform: translateX(-4px); }
    80%  { transform: translateX(3px); }
}
.form-error-shake {
    animation: formShake 0.4s ease-in-out;
}

/* ── 11. Chat message entrance ── */
@keyframes chatMsgSlideInRight {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes chatMsgSlideInLeft {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}
.chat-msg-row.anim-msg-enter {
    animation: chatMsgSlideInLeft 0.25s ease-out forwards;
}
.chat-msg-row.me.anim-msg-enter {
    animation: chatMsgSlideInRight 0.25s ease-out forwards;
}

/* ── 12. Skeleton shimmer (enhanced) ── */
@keyframes shimmerWave {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skel-shimmer, .tt-skeleton-cell, .ds-skeleton-row {
    background: #f0eef5 !important;
    background-size: 200% 100% !important;
    animation: shimmerWave 1.4s ease-in-out infinite !important;
}

/* ── 13. Info card hover lift (enhanced) ── */
.info-card {
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease-out;
}
.info-card-clickable:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(20, 161, 219, 0.13);
}

/* ── 14. Chart card hover ── */
.chart-card {
    transition: box-shadow 0.25s ease-out, transform 0.25s ease-out;
}
.chart-card:hover {
    box-shadow: 0 8px 28px rgba(20, 161, 219, 0.1);
    transform: translateY(-2px);
}

/* ── 15. Table row hover highlight ── */
.section-card[data-section="reports"] tbody tr,
.section-card[data-section="events"] tbody tr {
    transition: background 0.15s ease;
}

/* ── 16. Badge/pill pulse for new items ── */
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}
.notif-badge-new {
    animation: badgePulse 0.5s ease-in-out;
}

/* ── 17. Scroll-to-top fade button ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 18. Calendar day cell hover ── */
.cal-day:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(20, 161, 219, 0.1);
}

/* ── 19. Collapsible section smooth expand ── */
.dash-section-collapsible {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

/* ── 20. Events view tab underline (transitions disabled — instant switch) ── */

/* ── 21. Profile section card entrance (disabled — instant tab switch) ── */

/* ── 22. Fav-group overlay fade ── */
.fav-group-overlay { transition: opacity 0.2s ease; }

/* ── 23. HR sub-menu expand ── */
@keyframes hrSubMenuExpand {
    from { opacity: 0; max-height: 0; }
    to   { opacity: 1; max-height: 500px; }
}
#hrSideSubMenu.open {
    animation: hrSubMenuExpand 0.3s ease-out forwards;
}

/* ── 24. Subtask item entrance ── */
@keyframes subtaskSlideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}
.subtask-item.anim-subtask-enter {
    animation: subtaskSlideIn 0.25s ease-out forwards;
    opacity: 0;
}

/* ── 25. Extension request card entrance ── */
@keyframes extCardSlideUp {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ext-req-card.anim-ext-enter {
    animation: extCardSlideUp 0.3s ease-out forwards;
    opacity: 0;
}

/* ── 26. Mobile bottom nav slide-up ── */
@keyframes mobileNavSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.bottom-mobile-nav {
    animation: mobileNavSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── 27. Attention strip entrance ── */
@keyframes attentionSlideDown {
    from { opacity: 0; transform: translateY(-8px); max-height: 0; }
    to   { opacity: 1; transform: translateY(0); max-height: 200px; }
}
.dash-attention-strip {
    animation: attentionSlideDown 0.35s ease-out forwards;
}

/* ── 28. Status message fade ── */
@keyframes statusFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
#statusMessage:not(:empty) {
    animation: statusFadeIn 0.2s ease-out;
}

/* ══════════════════════════════════════════════════════════
   REDUCED MOTION — disable all animations for a11y
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .notif-item.anim-notif-enter,
    .chat-msg-row.anim-msg-enter,
    .subtask-item.anim-subtask-enter,
    .ext-req-card.anim-ext-enter {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .event-details-box.anim-enter,
    #eventDetailsBox.anim-enter,
    #eventDetailsBox.anim-exit,
    .report-submit-modal.anim-enter,
    .quick-add-panel.anim-enter,
    .modal-backdrop.anim-enter,
    .notif-menu.anim-enter,
    #profilePhotoMenu.anim-enter {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   Leave Management System V2 — Wizard, Alternate, Approvals
   ══════════════════════════════════════════════════════════════ */

/* ── Tab badge ── */
.hr-lp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 700;
    background: #ef4444;
    color: #fff;
    margin-left: 4px;
}

/* ── Wizard Steps ── */
.hr-wizard-steps {
    display: flex;
    gap: 2px;
    padding: 0.8rem 1.2rem 0;
    margin-bottom: 0.5rem;
}
.hr-wizard-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hr-muted, #94a3b8);
    background: var(--hr-bg, #f1f5f9);
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}
.hr-wizard-step.active {
    color: var(--hr-purple, #1488c7);
    background: rgba(20, 161, 219, 0.08);
}
.hr-wizard-step.completed {
    color: #16a34a;
    background: rgba(22, 163, 74, 0.08);
}
.hr-wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--hr-border, #e2e8f0);
    color: var(--hr-muted, #94a3b8);
}
.hr-wizard-step.active .hr-wizard-step-num {
    background: var(--hr-purple, #1488c7);
    color: #fff;
}
.hr-wizard-step.completed .hr-wizard-step-num {
    background: #16a34a;
    color: #fff;
}

/* ── Wizard Panels ── */
.hr-wizard-panel {
    padding: 1rem 1.2rem;
    min-height: 180px;
}

.hr-wizard-footer {
    display: flex;
    justify-content: space-between;
    padding: 0.8rem 1.2rem;
    border-top: 1px solid var(--hr-border, #e2e8f0);
}

.hr-wizard-validation {
    font-size: 0.8rem;
    color: #ef4444;
    margin-top: 0.3rem;
}

.hr-wizard-loading {
    text-align: center;
    padding: 2rem;
    color: var(--hr-muted, #94a3b8);
    font-size: 0.85rem;
}

/* ── Leave Type Cards ── */
.hr-leave-type-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.hr-leave-type-card {
    border: 2px solid var(--hr-border, #e2e8f0);
    border-radius: 12px;
    padding: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
    background: var(--hr-card-bg, #fff);
}
.hr-leave-type-card:hover:not(.disabled) {
    border-color: var(--hr-purple, #1488c7);
    background: rgba(20, 161, 219, 0.03);
}
.hr-leave-type-card.selected {
    border-color: var(--hr-purple, #1488c7);
    background: rgba(20, 161, 219, 0.06);
    box-shadow: 0 0 0 3px rgba(20, 161, 219, 0.12);
}
.hr-leave-type-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.hr-leave-type-card-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--hr-fg, #1e293b);
    margin-bottom: 2px;
}
.hr-leave-type-card-balance {
    font-size: 0.78rem;
    color: var(--hr-purple, #1488c7);
    font-weight: 600;
    margin-bottom: 4px;
}
.hr-leave-type-card-rules {
    font-size: 0.72rem;
    color: var(--hr-muted, #94a3b8);
    line-height: 1.4;
}

/* ── Sandwich Rule "at risk" alert card (Apply Leave wizard, Step 1) ── */
.hr-sandwich-alert {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 14px;
}
.hr-sandwich-alert-badge {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f59e0b;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(245, 158, 11, 0.35);
    letter-spacing: -0.02em;
}
.hr-sandwich-alert-body {
    flex: 1;
    min-width: 0;
}
.hr-sandwich-alert-title {
    font-size: 13px;
    font-weight: 700;
    color: #78350f;
    line-height: 1.3;
}
.hr-sandwich-alert-meta {
    font-size: 11px;
    color: #92400e;
    margin-top: 2px;
    font-weight: 500;
}
.hr-sandwich-alert-desc {
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
    line-height: 1.4;
}

/* ── Leave Draft Exit Dialog ── */
.hr-draft-exit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(3px);
    z-index: 9800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: hrDraftExitFadeIn 0.18s ease-out;
}
@keyframes hrDraftExitFadeIn { from { opacity: 0; } to { opacity: 1; } }
.hr-draft-exit-modal {
    background: #ffffff;
    border-radius: 14px;
    width: min(460px, 100%);
    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    animation: hrDraftExitSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes hrDraftExitSlideIn {
    from { transform: translateY(10px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.hr-draft-exit-header {
    padding: 22px 24px 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #92400e;
}
.hr-draft-exit-header svg { color: #f59e0b; flex-shrink: 0; }
.hr-draft-exit-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}
.hr-draft-exit-body { padding: 6px 24px 22px; }
.hr-draft-exit-body p {
    margin: 0 0 14px;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}
.hr-draft-exit-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hr-draft-exit-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
    font-family: inherit;
}
.hr-draft-exit-option:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}
.hr-draft-exit-save:hover { border-color: #10b981; }
.hr-draft-exit-discard:hover { border-color: #dc2626; }
.hr-draft-exit-option-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hr-draft-exit-option-body { flex: 1; min-width: 0; }
.hr-draft-exit-option-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}
.hr-draft-exit-option-desc {
    font-size: 11px;
    color: #64748b;
    line-height: 1.4;
}

/* Draft leaves on the My Leaves list — subtle amber-tinted treatment */
.hr-pill.draft { background: #fef3c7; color: #92400e; }

/* ── Leave Request Pagination ── */
.hr-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0 4px;
    border-top: 1px solid #f1f5f9;
    margin-top: 12px;
    flex-wrap: wrap;
}
.hr-page-numbers {
    display: flex;
    gap: 4px;
}
.hr-page-btn {
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s, transform 0.12s, opacity 0.12s;
    font-family: inherit;
    min-width: 34px;
    text-align: center;
}
.hr-page-btn:hover:not(:disabled):not(.active) {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.hr-page-btn.active {
    background: #1488c7;
    color: #ffffff;
    border-color: #1488c7;
}
.hr-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.hr-page-prev, .hr-page-next {
    font-size: 12px;
    padding: 6px 14px;
}
.hr-page-info {
    font-size: 11px;
    color: #94a3b8;
    margin-left: auto;
    font-weight: 500;
}

/* ── Approval Card V2 (redesigned) ── */
.hr-approval-card-v2 {
    margin-bottom: 12px;
}
.hr-approval-card-left {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 18px;
    transition: box-shadow 0.15s;
}
.hr-approval-card-left:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.hr-approval-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.hr-approval-card-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.hr-approval-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}
.hr-approval-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}
.hr-approval-dept {
    font-size: 11px;
    color: #64748b;
    margin-top: 1px;
}
.hr-approval-type-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}
.hr-approval-details {
    padding-left: 52px; /* align with name (avatar 40 + gap 12) */
    margin-bottom: 12px;
}
.hr-approval-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #0f172a;
    font-weight: 500;
}
.hr-approval-dates svg {
    color: #94a3b8;
    flex-shrink: 0;
}
.hr-approval-days {
    color: #64748b;
    font-weight: 400;
}
.hr-approval-reason {
    font-size: 12px;
    color: #475569;
    margin-top: 6px;
    line-height: 1.4;
    padding: 6px 10px;
    background: #f8fafc;
    border-radius: 6px;
    border-left: 3px solid #e2e8f0;
}
.hr-approval-proof-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #1488c7;
    font-weight: 600;
    text-decoration: none;
    margin-top: 6px;
}
.hr-approval-proof-link:hover { text-decoration: underline; }
.hr-approval-proof-missing {
    display: inline-block;
    font-size: 11px;
    color: #dc2626;
    font-weight: 600;
    margin-top: 6px;
}
.hr-approval-card-actions {
    display: flex;
    gap: 8px;
    padding-left: 52px;
    padding-top: 4px;
}
.hr-approval-btn {
    padding: 8px 18px;
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
    font-family: inherit;
}
.hr-approval-btn-approve {
    background: #10b981;
    color: #ffffff;
}
.hr-approval-btn-approve:hover {
    background: #059669;
}
.hr-approval-btn-reject {
    background: #ffffff;
    color: #dc2626;
    border: 1px solid #fca5a5;
}
.hr-approval-btn-reject:hover {
    background: #fef2f2;
    border-color: #dc2626;
}

/* Non-working-day warning shown in wizard step 3 when every day in the
 * leave range has no scheduled classes (faculty's week off / paid holiday). */
.hr-coverage-weekoff-warning {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fff6e0;
    border: 1px solid #fcd34d;
    border-radius: 12px;
    padding: 18px 20px;
    margin: 8px 0;
}
.hr-coverage-weekoff-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f59e0b;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}
.hr-coverage-weekoff-body { flex: 1; min-width: 0; }
.hr-coverage-weekoff-body h4 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: #78350f;
}
.hr-coverage-weekoff-body p {
    margin: 0 0 10px;
    font-size: 13px;
    color: #475569;
    line-height: 1.55;
}
.hr-coverage-weekoff-hint {
    font-size: 12px !important;
    color: #64748b !important;
    background: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #fde68a;
}

/* ── Class Coverage (three-option wizard step, per-day model) ── */
.hr-coverage-intro {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 16px;
}
/* Bulk-apply selector for multi-day leaves */
.hr-coverage-bulk {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.hr-coverage-bulk-label {
    font-size: 12px;
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 8px;
}
.hr-coverage-bulk-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.hr-coverage-bulk-btn {
    padding: 7px 14px;
    border: 1px solid #93c5fd;
    background: #ffffff;
    color: #1d4ed8;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
    font-family: inherit;
}
.hr-coverage-bulk-btn:hover {
    background: #dbeafe;
    border-color: #60a5fa;
}

/* Compact summary for days without classes (replaces individual empty cards) */
.hr-coverage-empty-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
}
.hr-coverage-empty-count {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hr-coverage-empty-title {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}
.hr-coverage-empty-list {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 2px;
}

.hr-coverage-date-block {
    margin-bottom: 20px;
}
.hr-coverage-date-header {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 10px;
}
.hr-coverage-empty {
    font-size: 12px;
    color: #94a3b8;
    padding: 8px 0;
    font-style: italic;
}
/* Day-card: one per day, shows all classes + one coverage choice */
.hr-coverage-day {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
}
.hr-coverage-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 12px;
}
.hr-coverage-day-date {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}
.hr-coverage-day-count {
    font-size: 10px;
    font-weight: 700;
    color: #1488c7;
    background: #eef8fd;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.hr-coverage-classes {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
}
.hr-coverage-class-row {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #334155;
    padding: 3px 0;
}
.hr-coverage-class-row + .hr-coverage-class-row {
    border-top: 1px dashed #e2e8f0;
    margin-top: 2px;
    padding-top: 5px;
}
.hr-coverage-class-time {
    font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    font-feature-settings: 'tnum';
    color: #1488c7;
    font-weight: 600;
    min-width: 100px;
    flex-shrink: 0;
}
.hr-coverage-class-subject {
    flex: 1;
    min-width: 0;
    color: #0f172a;
}
/* Status-row extension: compact class list inside a per-day status row */
.hr-alt-status-classes {
    margin-top: 6px;
    padding: 6px 10px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px dashed #e2e8f0;
}
.hr-alt-status-class-row {
    font-size: 10px;
    color: #64748b;
    font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    font-feature-settings: 'tnum';
    padding: 1px 0;
}
.hr-coverage-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hr-coverage-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
    background: #fafbfc;
}
.hr-coverage-option:hover:not(.disabled) {
    border-color: #a9dcf1;
    background: #faf5ff;
}
.hr-coverage-option.selected {
    border-color: #1488c7;
    background: #eef8fd;
    box-shadow: 0 0 0 3px rgba(20, 161, 219, 0.1);
}
.hr-coverage-option.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: #f8fafc;
}
.hr-coverage-option input[type="radio"] {
    margin-top: 2px;
    accent-color: #1488c7;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}
.hr-coverage-option.disabled input[type="radio"] {
    cursor: not-allowed;
}
.hr-coverage-option-body {
    flex: 1;
    min-width: 0;
}
.hr-coverage-option-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}
.hr-coverage-option-title svg {
    color: #1488c7;
    flex-shrink: 0;
}
.hr-coverage-option-desc {
    font-size: 11px;
    color: #64748b;
    line-height: 1.4;
}
.hr-coverage-colleague-select,
.hr-coverage-moodle-note {
    width: 100%;
    margin-top: 8px;
    padding: 7px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    background: #ffffff;
    color: #0f172a;
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
}
.hr-coverage-colleague-select:disabled,
.hr-coverage-moodle-note:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}
.hr-coverage-colleague-select:focus,
.hr-coverage-moodle-note:focus {
    outline: none;
    border-color: #1488c7;
    box-shadow: 0 0 0 3px rgba(20, 161, 219, 0.12);
}

/* ── Alternate Faculty ── */
.hr-alt-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hr-alt-section-label {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 2px 4px;
    margin-top: 6px;
    border-bottom: 1px solid #e2e8f0;
}
.hr-alt-section-label:first-child { margin-top: 0; }
.hr-alt-section-label.hr-alt-section-history {
    color: #94a3b8;
}
.hr-alt-card-history {
    background: #f8fafc;
    opacity: 0.88;
}
.hr-alt-card-history:hover { opacity: 1; }
.hr-alt-responded {
    color: #94a3b8;
    font-size: 10px;
    margin-left: 6px;
}
.hr-alt-note {
    font-size: 11px;
    color: #475569;
    font-style: italic;
    margin-top: 6px;
    padding: 4px 10px;
    border-left: 2px solid #cbd5e1;
    background: #f8fafc;
}

/* "Sent" confirmation banner shown after the wizard fires alternate requests */
.hr-alt-sent-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #f0f9ff;
    border: 1px solid #a7f3d0;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 14px;
}
.hr-alt-sent-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #10b981;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}
.hr-alt-sent-body {
    flex: 1;
    min-width: 0;
}
.hr-alt-sent-body h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #064e3b;
}
.hr-alt-sent-body p {
    margin: 0 0 12px;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}
.hr-alt-sent-body em {
    font-style: normal;
    background: #fef3c7;
    color: #78350f;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
}
.hr-alt-sent-counts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.hr-alt-sent-count {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hr-alt-sent-pending  { background: #fef3c7; color: #92400e; }
.hr-alt-sent-accepted { background: #d1fae5; color: #065f46; }
.hr-alt-sent-rejected { background: #fee2e2; color: #991b1b; }

/* Status rows showing each individual alternate request */
.hr-alt-status-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 8px;
    transition: border-color 0.15s;
}
.hr-alt-status-row:hover {
    border-color: #cbd5e1;
}
.hr-alt-status-meta {
    flex: 1;
    min-width: 0;
}
.hr-alt-status-faculty {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}
.hr-alt-status-detail {
    font-size: 11px;
    color: #64748b;
    font-feature-settings: 'tnum';
}
.hr-alt-status-note {
    font-size: 11px;
    color: #475569;
    font-style: italic;
    margin-top: 4px;
    padding-left: 8px;
    border-left: 2px solid #cbd5e1;
}

/* Coverage-type badge chips shown inline on each status row */
.hr-coverage-type-badge {
    display: inline-block;
    padding: 1px 7px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 10px;
    margin-right: 4px;
    vertical-align: middle;
}
.hr-coverage-type-badge.hr-cov-colleague { background: #e0e7ff; color: #3730a3; }
.hr-coverage-type-badge.hr-cov-hod       { background: #fef3c7; color: #92400e; }
.hr-coverage-type-badge.hr-cov-moodle    { background: #dcfce7; color: #166534; }
.hr-alt-card {
    border: 1px solid var(--hr-border, #e2e8f0);
    border-radius: 10px;
    padding: 0.8rem;
    background: var(--hr-card-bg, #fff);
}
.hr-alt-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}
.hr-alt-card-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--hr-fg, #1e293b);
}
.hr-alt-card-date {
    font-size: 0.78rem;
    color: var(--hr-muted, #94a3b8);
}
.hr-alt-card-periods {
    font-size: 0.78rem;
    color: #555;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}
.hr-alt-card-actions {
    display: flex;
    gap: 6px;
}
.hr-alt-btn-accept {
    padding: 0.3rem 0.8rem;
    border: none;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    background: #16a34a;
    color: #fff;
}
.hr-alt-btn-reject {
    padding: 0.3rem 0.8rem;
    border: none;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    background: #ef4444;
    color: #fff;
}

/* ── Wizard alternate period rows ── */
.hr-alt-period-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--hr-border, #e2e8f0);
    font-size: 0.82rem;
}
.hr-alt-period-info {
    flex: 1;
    min-width: 0;
}
.hr-alt-period-time {
    font-weight: 600;
    color: var(--hr-fg, #1e293b);
}
.hr-alt-period-subject {
    color: var(--hr-muted, #64748b);
    font-size: 0.78rem;
}
.hr-alt-faculty-select {
    width: 180px;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--hr-border, #e2e8f0);
    border-radius: 6px;
    font-size: 0.78rem;
}
.hr-alt-conflict-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}
.hr-alt-conflict-dot.free { background: #16a34a; }
.hr-alt-conflict-dot.busy { background: #ef4444; }

/* ── Status pills ── */
.hr-status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.hr-status-pill.pending { background: #fef3c7; color: #92400e; }
.hr-status-pill.approved { background: #dcfce7; color: #166534; }
.hr-status-pill.rejected { background: #fee2e2; color: #991b1b; }
.hr-status-pill.pending_hod { background: #fef3c7; color: #92400e; }
.hr-status-pill.pending_principal { background: #dbeafe; color: #1e40af; }
.hr-status-pill.pending_hr { background: #eef8fd; color: #0a5e88; }
.hr-status-pill.accepted { background: #dcfce7; color: #166534; }
.hr-status-pill.cancelled { background: #f1f5f9; color: #64748b; }
.hr-status-pill.pending_verification { background: #fff7ed; color: #c2410c; }
.hr-status-pill.used { background: #dbeafe; color: #1e40af; }
.hr-status-pill.expired { background: #f1f5f9; color: #64748b; }

/* ── Approval cards ── */
.hr-approval-card {
    border: 1px solid var(--hr-border, #e2e8f0);
    border-radius: 10px;
    padding: 0.9rem;
    margin-bottom: 8px;
    background: var(--hr-card-bg, #fff);
}
.hr-approval-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.4rem;
}
.hr-approval-card-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--hr-fg, #1e293b);
}
.hr-approval-card-meta {
    font-size: 0.78rem;
    color: var(--hr-muted, #64748b);
    line-height: 1.5;
}
.hr-approval-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 0.6rem;
}

/* ── Wizard Review Summary ── */
.hr-wizard-review-summary {
    font-size: 0.85rem;
    line-height: 1.6;
}
.hr-wizard-review-summary dt {
    font-weight: 600;
    color: var(--hr-fg, #1e293b);
    display: inline;
}
.hr-wizard-review-summary dd {
    display: inline;
    margin: 0 0 0 4px;
    color: #555;
}
.hr-wizard-review-row {
    margin-bottom: 0.3rem;
}

/* ── Balance card enhancements ── */
.hr-balance-card-credit-info {
    font-size: 0.72rem;
    color: var(--hr-muted, #94a3b8);
    margin-top: 2px;
}
.hr-balance-card-eligible {
    font-size: 0.72rem;
    color: #16a34a;
    font-weight: 600;
}
.hr-balance-card-ineligible {
    font-size: 0.72rem;
    color: #ef4444;
    font-weight: 600;
}

/* ── Empty state ── */
.hr-empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--hr-muted, #94a3b8);
    font-size: 0.85rem;
}

/* ── HR pipeline source badges on task cards ── */
.hr-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.4;
    border: 1px solid transparent;
}
.hr-source-interview {
    background: #dbeafe;
    color: #1e40af;
    border-color: #bfdbfe;
}
.hr-source-onboarding {
    background: #dcf1fb;
    color: #0e7bb0;
    border-color: #c9e9f7;
}

/* ── HR Pipeline tracking board ── */
.hr-pipeline-board {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.hr-pipeline-board th,
.hr-pipeline-board td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
}
.hr-pipeline-board th {
    background: #f8fafc;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.4px;
}
.hr-pipeline-board tr:hover td {
    background: #f1f5f9;
}
.hr-pipeline-stage-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-weight: 600;
    font-size: 0.7rem;
}
.hr-pipeline-overdue td {
    background: #fef2f2;
}
.hr-pipeline-empty {
    padding: 2rem;
    text-align: center;
    color: #94a3b8;
}

/* ── Offer Letter Preview Modal ── */
.hr-offer-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: hrOfferOverlayFade 0.18s ease-out;
}
@keyframes hrOfferOverlayFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.hr-offer-preview-modal {
    width: 90vw;
    max-width: 1100px;
    height: 88vh;
    max-height: 900px;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Inter', var(--font-sans);
    animation: hrOfferModalSlide 0.22s ease-out;
}
@keyframes hrOfferModalSlide {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.hr-offer-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.5rem;
    background: #0a5e88;
    color: #ffffff;
    flex-shrink: 0;
}
.hr-offer-preview-header h2 {
    margin: 0 0 0.4rem 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
}
.hr-offer-preview-sub {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
}
.hr-offer-preview-sub strong {
    display: inline-block;
    font-weight: 700;
    background: #ffffff;
    color: #4338ca;
    padding: 0.1rem 0.55rem;
    border-radius: 0.35rem;
    word-break: break-all;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.hr-offer-preview-close {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.15s;
}
.hr-offer-preview-close:hover {
    background: rgba(255, 255, 255, 0.32);
    transform: scale(1.05);
}
.hr-offer-preview-body {
    flex: 1 1 auto;
    background: #f1f5f9;
    padding: 0.75rem;
    overflow: hidden;
    min-height: 0;
}
.hr-offer-preview-iframe {
    width: 100%;
    height: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.hr-offer-preview-error {
    margin: 0 1.4rem;
    padding: 0.6rem 0.85rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 0.5rem;
    font-size: 0.8rem;
}
.hr-offer-preview-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 0.85rem 1.4rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.hr-offer-preview-footer .ob-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.15rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    background: #ffffff;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
    font-family: 'Inter', var(--font-sans);
}
.hr-offer-preview-footer .ob-btn-secondary:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #1e293b;
}
.hr-offer-preview-footer .ob-btn-primary {
    background: #0e7bb0;
    box-shadow: 0 4px 12px rgba(14, 123, 176, 0.35);
}
.hr-offer-preview-footer .ob-btn-primary:hover {
    background: #0a5e88;
}
.hr-offer-preview-footer .ob-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}
@media (max-width: 1400px) {
    .hr-offer-preview-modal {
        width: 94vw;
        height: 90vh;
    }
}

/* ═══════════════════════════════════════════════════════════════
   EMAILS MODULE — Bento metric cards, pill badges, avatars, modals
   ═══════════════════════════════════════════════════════════════ */

.bento-metrics-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0 8px;
}
@media (max-width: 1180px) { .bento-metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .bento-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bento-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    transition: box-shadow .2s, transform .15s, border-color .15s;
    min-height: 96px;
}
.bento-card:hover { box-shadow: 0 6px 22px rgba(14, 123, 176, 0.10); }
.bento-card.is-clickable { cursor: pointer; }
.bento-card.is-clickable:hover { transform: translateY(-2px); border-color: #a9dcf1; box-shadow: 0 8px 24px rgba(14, 123, 176, 0.14); }
.bento-card.is-clickable:active { transform: translateY(0); }
.bento-card.is-clickable:focus-visible { outline: 2px solid #0e7bb0; outline-offset: 2px; }
.bento-card-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: #6b7280;
    margin-bottom: 10px;
}
.bento-card-value {
    font-size: 28px;
    font-weight: 800;
    color: #1e1b2e;
    line-height: 1;
    display: inline-block;
}
.bento-card-delta {
    font-size: 11px;
    font-weight: 700;
    color: #059669;
    margin-left: 6px;
}
.bento-card-icon {
    position: absolute;
    right: -6px;
    bottom: -10px;
    font-size: 64px;
    line-height: 1;
    opacity: 0.10;
    transform: rotate(12deg);
    transition: transform .35s;
    pointer-events: none;
}
.bento-card:hover .bento-card-icon { transform: rotate(0deg); }

.bento-card--purple { background: #dcf1fb; border-color: #c9e9f7; }
.bento-card--purple .bento-card-value { color: #084e73; }
.bento-card--purple .bento-card-label { color: #0e7bb0; }

.bento-card--gold { background: #fef3c7; border-color: #fde68a; }
.bento-card--gold .bento-card-value { color: #78350f; }
.bento-card--gold .bento-card-label { color: #92400e; }

.bento-card--rose { background: #ffe4e6; border-color: #fecdd3; }
.bento-card--rose .bento-card-value { color: #9f1239; }
.bento-card--rose .bento-card-label { color: #be123c; }

.bento-card--green { background: #ecfdf5; border-color: #a7f3d0; }
.bento-card--green .bento-card-value { color: #065f46; }
.bento-card--green .bento-card-label { color: #047857; }

.bento-card--blue { background: #eff6ff; border-color: #bfdbfe; }
.bento-card--blue .bento-card-value { color: #1e40af; }
.bento-card--blue .bento-card-label { color: #1d4ed8; }

/* Pill badges (type / status) */
.wishes-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
    white-space: nowrap;
}
.wishes-pill--birthday    { background: #dcf1fb; color: #084e73; }
.wishes-pill--anniversary { background: #fef3c7; color: #78350f; }
.wishes-pill--welcome     { background: #dcf1fb; color: #084e73; }
.wishes-pill--followup    { background: #ecfdf5; color: #065f46; }
.wishes-pill--sent        { background: #ecfdf5; color: #065f46; }
.wishes-pill--queued      { background: #eff6ff; color: #1e40af; }
.wishes-pill--failed      { background: #fef2f2; color: #991b1b; }
.wishes-pill--skipped     { background: #f3f4f6; color: #6b7280; }
.wishes-pill--upcoming    { background: #eff6ff; color: #1e40af; }
.wishes-pill--completed   { background: #ecfdf5; color: #065f46; }
.wishes-pill--archived    { background: #f3f4f6; color: #6b7280; }

/* Employee avatar circles */
.wishes-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #dcf1fb;
    color: #084e73;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.wishes-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.wishes-employee-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wishes-employee-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e1b2e;
    line-height: 1.3;
}
.wishes-employee-sub {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.3;
}

/* Generic modal (used by event email forms) */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 30, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}
.modal-overlay.hidden { display: none; }
.modal-card {
    background: #ffffff;
    border-radius: 18px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 20px 60px rgba(15, 15, 30, 0.30);
    overflow: hidden;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.modal-head {
    position: relative;
    padding: 20px 56px 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-head h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #1e1b2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modal-head .modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
}
.modal-close {
    background: transparent;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0 4px;
}
.modal-close:hover { color: #1e1b2e; }
.modal-body {
    padding: 22px 24px;
    overflow-y: auto;
}
.modal-foot {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ── Manage Guests modal — wider, no horizontal scroll ────── */
.mg-modal-card {
    max-width: 1100px;
    width: 92vw;
    max-height: 92vh;
}
.mg-modal-head {
    position: relative;
    padding: 18px 56px 18px 28px;
}
.mg-modal-head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #1e1b2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mg-modal-head .modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
    color: #6b7280;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.mg-modal-head .modal-close:hover {
    background: #f3f4f6;
    color: #1e1b2e;
}
.mg-modal-body {
    padding: 22px 28px 24px;
    overflow-y: auto;
    overflow-x: hidden;
}
.mg-modal-foot {
    padding: 14px 28px;
}
.mg-event-info {
    background: #eef8fd;
    border: 1px solid #c9e9f7;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: #084e73;
    margin-bottom: 18px;
}
.mg-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #0e7bb0;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.mg-guest-form {
    display: grid;
    gap: 14px;
    margin-bottom: 6px;
}
.mg-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.mg-guest-form .hrms-field input {
    padding: 11px 13px;
    font-size: 13.5px;
}
.mg-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.mg-divider {
    border: none;
    border-top: 1px solid #dcf1fb;
    margin: 22px 0 18px;
}
.mg-table-wrap {
    /* No horizontal scroll — table is fixed-layout and fits inside */
    width: 100%;
    overflow-x: hidden;
    margin-top: 10px;
    border: 1px solid #dcf1fb;
    border-radius: 12px;
}
.mg-guests-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 13px;
}
.mg-guests-table col.mg-col-name        { width: 15%; }
.mg-guests-table col.mg-col-email       { width: 22%; }
.mg-guests-table col.mg-col-designation { width: 14%; }
.mg-guests-table col.mg-col-org         { width: 14%; }
.mg-guests-table col.mg-col-welcome     { width: 10%; }
.mg-guests-table col.mg-col-followup    { width: 10%; }
.mg-guests-table col.mg-col-actions     { width: 15%; }
.mg-guests-table thead th {
    background: #f9f7ff;
    color: #084e73;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    padding: 11px 12px;
    border-bottom: 1px solid #dcf1fb;
}
.mg-guests-table tbody td {
    padding: 12px;
    border-bottom: 1px solid #f3f0fb;
    vertical-align: middle;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    line-height: 1.45;
}
.mg-guests-table tbody tr:last-child td {
    border-bottom: none;
}
.mg-guests-table tbody tr:hover td {
    background: #fbfaff;
}
.mg-guests-table .mg-edit-btn,
.mg-guests-table .mg-delete-btn {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 8px;
}
.mg-guests-table .mg-delete-btn {
    margin-left: 8px;
}

@media (max-width: 1100px) {
    .mg-modal-card { width: 95vw; }
    .mg-guests-table { font-size: 12.5px; }
}
@media (max-width: 820px) {
    .mg-form-row { grid-template-columns: 1fr; }
    .mg-modal-head, .mg-modal-body, .mg-modal-foot { padding-left: 18px; padding-right: 18px; }
}

/* Generic stacked field used inside the event email modals */
.hrms-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hrms-field > span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}
.hrms-field input,
.hrms-field select,
.hrms-field textarea {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13.5px;
    font-family: inherit;
    color: #1e1b2e;
    background: #ffffff;
    box-sizing: border-box;
}
.hrms-field input:focus,
.hrms-field select:focus,
.hrms-field textarea:focus {
    outline: none;
    border-color: #0e7bb0;
    box-shadow: 0 0 0 3px rgba(14, 123, 176, 0.10);
}
.hrms-field textarea { resize: vertical; min-height: 70px; }

/* Audit Log toolbar — replaces the cramped .hrms-panel-actions for filter rows */
.audit-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    background: #fbfaff;
    border: 1px solid #dcf1fb;
    border-radius: 14px;
    margin-bottom: 14px;
}
.audit-toolbar-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: #0e7bb0;
    margin-right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.audit-toolbar-spacer { flex: 1; }
.audit-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0 10px;
    height: 36px;
    transition: border-color .15s, box-shadow .15s;
}
.audit-chip:hover { border-color: #a9dcf1; }
.audit-chip:focus-within { border-color: #0e7bb0; box-shadow: 0 0 0 3px rgba(14, 123, 176, 0.10); }
.audit-chip-icon {
    color: #9ca3af;
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
}
.audit-chip-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    border-right: 1px solid #e5e7eb;
    padding-right: 8px;
    margin-right: 2px;
    flex-shrink: 0;
}
.audit-chip select,
.audit-chip input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 13px;
    font-family: inherit;
    color: #1e1b2e;
    padding: 0;
    min-width: 110px;
    height: 32px;
    line-height: 32px;
    box-shadow: none !important;
}
.audit-chip input[type="search"] { min-width: 200px; }
.audit-chip input[type="date"] { min-width: 130px; }
.audit-chip select:focus,
.audit-chip input:focus { outline: none !important; box-shadow: none !important; }
/* Audit log tables — Wishes & Event Emails */
.audit-log-table {
    width: 100%;
    table-layout: fixed;
}
.audit-log-table th,
.audit-log-table td { vertical-align: middle; }
/* First column hugs the left edge; last column hugs the right edge */
.audit-log-table th:first-child,
.audit-log-table td:first-child { padding-left: 4px; }
.audit-log-table th:last-child,
.audit-log-table td:last-child { padding-right: 4px; }

/* Wishes audit log — 7 columns: Sent At | Type | Employee | Recipient | Kind | Years | Status */
.audit-log-table--wishes th:nth-child(1),
.audit-log-table--wishes td:nth-child(1) { width: 15%; }
.audit-log-table--wishes th:nth-child(2),
.audit-log-table--wishes td:nth-child(2) { width: 12%; }
.audit-log-table--wishes th:nth-child(3),
.audit-log-table--wishes td:nth-child(3) { width: 22%; }
.audit-log-table--wishes th:nth-child(4),
.audit-log-table--wishes td:nth-child(4) { width: 24%; word-break: break-word; }
.audit-log-table--wishes th:nth-child(5),
.audit-log-table--wishes td:nth-child(5) { width: 9%; }
.audit-log-table--wishes th:nth-child(6),
.audit-log-table--wishes td:nth-child(6) {
    width: 8%;
    text-align: center;
    white-space: nowrap;
}
.audit-log-table--wishes th:nth-child(7),
.audit-log-table--wishes td:nth-child(7) {
    width: 10%;
    text-align: left;
    white-space: nowrap;
}

/* Event Emails audit log — 6 columns: Sent At | Type | Event | Guest | Email | Status */
.audit-log-table--events th:nth-child(1),
.audit-log-table--events td:nth-child(1) { width: 15%; }
.audit-log-table--events th:nth-child(2),
.audit-log-table--events td:nth-child(2) { width: 12%; }
.audit-log-table--events th:nth-child(3),
.audit-log-table--events td:nth-child(3) { width: 22%; }
.audit-log-table--events th:nth-child(4),
.audit-log-table--events td:nth-child(4) { width: 19%; }
.audit-log-table--events th:nth-child(5),
.audit-log-table--events td:nth-child(5) { width: 20%; word-break: break-word; }
.audit-log-table--events th:nth-child(6),
.audit-log-table--events td:nth-child(6) {
    width: 12%;
    text-align: left;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .audit-toolbar { padding: 12px; }
    .audit-chip { width: 100%; }
    .audit-chip select,
    .audit-chip input { width: 100%; min-width: 0; }
    .audit-chip input[type="search"] { min-width: 0; }
    .audit-chip input[type="date"] { min-width: 0; }
}

/* ─────────────────────────────────────────────────────────────
   Event Emails — Events table (clean professional layout)
   ───────────────────────────────────────────────────────────── */
.event-emails-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}
.event-emails-table th,
.event-emails-table td { vertical-align: middle; }
.event-emails-table thead th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    padding: 10px 12px;
    border-bottom: 1px solid #dcf1fb;
    background: transparent;
}
.event-emails-table tbody td {
    padding: 18px 12px;
    border-bottom: 1px solid #f3f0fb;
    font-size: 13px;
    color: #1e1b2e;
}
.event-emails-table tbody tr:last-child td { border-bottom: none; }
.event-emails-table tbody tr.ee-row { transition: background-color .15s ease; }
.event-emails-table tbody tr.ee-row:hover { background: #faf8ff; }

/* Column widths */
.event-emails-table .ee-col-event   { width: 24%; padding-left: 4px; }
.event-emails-table .ee-col-date    { width: 16%; }
.event-emails-table .ee-col-loc     { width: 14%; }
.event-emails-table .ee-col-status  { width: 10%; text-align: center; }
.event-emails-table .ee-col-wf      { width: 14%; }
.event-emails-table .ee-col-actions { width: 22%; padding-right: 4px; text-align: right; }

/* Event title cell */
.event-emails-table .ee-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #1e1b2e;
    line-height: 1.35;
    margin-bottom: 3px;
}
.event-emails-table .ee-subtitle {
    font-size: 11.5px;
    color: #8b8696;
    line-height: 1.35;
}

/* Date & location — single line, no awkward wraps */
.event-emails-table .ee-col-date,
.event-emails-table .ee-col-loc {
    color: #4b4661;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Welcome / Follow-up badge group */
.ee-wf-group {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}
.ee-wf-group .wishes-pill {
    font-size: 10.5px;
    padding: 3px 9px;
    font-weight: 600;
}

/* Action buttons */
.ee-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   Pipeline Task feature — quick-add tabs, stage builder, detail timeline.
   Reuses existing color tokens (--ok, --accent, --hr-orange, --hr-red) and
   modal layout patterns. Mobile: ≤620px the timeline stacks vertically.
   ═══════════════════════════════════════════════════════════════════════ */

/* Global override: the project sets `button { width: 100%; }` at line 777,
   which would make every pipeline button stretch full-width (close X becomes
   a giant bar, action pills stack awkwardly). Reset explicitly for any
   pipeline-namespaced button so they size to their content by default. */
.pipeline-details-close,
.pipeline-stage-row-btn,
.pipeline-stage-row-remove,
.pipeline-step-action,
.pipeline-step-openbtn,
.pipeline-add-stage-btn,
.pipeline-action-btn,
.pipeline-mode-opt,
.task-kind-tab,
.pa-cancel-btn,
.pa-submit-btn {
    width: auto;
    max-width: none;
}

/* Task-kind tabs in Quick Add */
.task-kind-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    margin-bottom: 4px;
}
.task-kind-tab {
    border: 0;
    background: transparent;
    color: #475569;
    padding: 7px 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    min-width: 84px;
}
.task-kind-tab:hover { color: #1e293b; }
.task-kind-tab.is-active {
    background: linear-gradient(135deg, var(--hr-blue, #14a1db), #5cc3ea);
    color: #fff;
    box-shadow: 0 2px 6px rgba(20, 161, 219, 0.32);
}
.task-kind-tab.is-active:hover { color: #fff; }

/* Pipeline-mode flex ordering: in pipeline mode, Description hoists above
   mode + stages. In normal mode, sections keep their natural order. */
.quick-add-fields { display: flex; flex-direction: column; }
.qa-section { order: 100; }          /* default fallback */
.qa-order-kind { order: 10; }
.qa-order-title { order: 20; }
.qa-order-description { order: 30; } /* low so it sits high */
.qa-order-mode { order: 40; }
.qa-order-stages { order: 50; }
.qa-order-schedule { order: 60; }
.qa-order-priority { order: 70; }
.qa-order-assignment { order: 80; }
.qa-order-attachments { order: 90; }
/* Normal-mode users expect description after assignment (legacy order),
   so only hoist when pipeline kind is active. */
.quick-add-panel:not(.is-pipeline-kind) .qa-order-description { order: 85; }
/* :last-child reflects DOM order, not flex order — in pipeline mode the
   Stages section is visually last, so suppress its border explicitly. */
.quick-add-panel.is-pipeline-kind .qa-order-stages { border-bottom: none; }

/* Pipeline intro banner */
.pipeline-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    color: #3730a3;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 10px;
}
.pipeline-info-banner svg { flex-shrink: 0; margin-top: 1px; }

/* Pipeline mode radios — radio | icon | (name + description) inline.
   Active card highlights both border and text color for clear selection. */
.pipeline-mode-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pipeline-mode-opt {
    display: grid;
    grid-template-columns: 22px 28px 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.pipeline-mode-opt:hover { border-color: #c7d2fe; }
.pipeline-mode-opt:has(input:checked) { border-color: #14a1db; background: #eef2ff; }
.pipeline-mode-opt input { margin: 0; accent-color: #14a1db; justify-self: center; }
.pipeline-mode-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}
.pipeline-mode-opt:has(input:checked) .pipeline-mode-icon { color: #14a1db; }
.pipeline-mode-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pipeline-mode-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
}
.pipeline-mode-opt small {
    color: #64748b;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

/* Stage count indicator next to section label */
.pipeline-stage-count {
    margin-left: auto;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/* Stage builder rows */
.pipeline-stage-rows { display: flex; flex-direction: column; gap: 10px; position: relative; }
.pipeline-stage-row {
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    position: relative;
}
/* Sequential-mode connector: thin vertical line between stage cards so the
   "next-after-this" flow is legible at a glance. Parallel mode omits the
   line because stages run independently. */
.pipeline-stage-rows.is-sequential .pipeline-stage-row:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 22px;
    bottom: -10px;
    width: 2px;
    height: 10px;
    background: #c7d2fe;
}
.pipeline-stage-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    min-height: 24px;
}
.pipeline-stage-row-order {
    font-size: 12px;
    font-weight: 700;
    color: #14a1db;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex: 1;
}
.pipeline-stage-row-controls {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}
.pipeline-stage-row-btn {
    border: 0;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.pipeline-stage-row-btn:hover { color: #14a1db; background: #eef2ff; }
.pipeline-stage-row-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pipeline-stage-row-btn:disabled:hover { color: #94a3b8; background: transparent; }
.pipeline-stage-row-remove {
    border: 0;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.pipeline-stage-row-remove:hover { color: #ef4444; background: #fef2f2; }
.pipeline-stage-row-remove:disabled { opacity: 0.35; cursor: not-allowed; }
.pipeline-stage-row-remove:disabled:hover { color: #94a3b8; background: transparent; }
.pipeline-stage-row-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pipeline-stage-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #475569; font-weight: 600; }
.pipeline-stage-field--full { grid-column: 1 / -1; }
.pipeline-stage-field small { color: #94a3b8; font-weight: 400; }
.pipeline-stage-field input,
.pipeline-stage-field select,
.pipeline-stage-field textarea {
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    font-weight: 400;
    width: 100%;
    box-sizing: border-box;
}
.pipeline-stage-field textarea { resize: vertical; min-height: 48px; }
.pipeline-stage-field input:focus,
.pipeline-stage-field select:focus,
.pipeline-stage-field textarea:focus {
    outline: none;
    border-color: #14a1db;
    box-shadow: 0 0 0 3px rgba(20, 161, 219,0.15);
}
.pipeline-add-stage-btn {
    margin-top: 8px;
    border: 1.5px dashed #cbd5e1;
    background: #fff;
    color: #14a1db;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.pipeline-add-stage-btn:hover { border-color: #14a1db; background: #eef2ff; }

/* Per-stage attachment drop zone + file-name preview list */
.pipeline-stage-field-label {
    font-size: 12px;
    color: #475569;
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}
.pipeline-stage-field-label small { color: #94a3b8; font-weight: 400; }
.pipeline-stage-file-drop {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1.5px dashed #cbd5e1;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.pipeline-stage-file-drop:hover { border-color: #14a1db; background: #eef2ff; color: #14a1db; }
.pipeline-stage-file-drop input[type="file"] {
    /* Native input hidden; the label is the click target. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.pipeline-stage-file-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}
.pipeline-stage-file-list:empty { display: none; }
.pipeline-stage-file-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 11px;
    color: #475569;
}
.pipeline-stage-file-item svg { color: #14a1db; flex-shrink: 0; }
.pipeline-stage-file-item small { color: #94a3b8; margin-left: auto; }

/* ── Pipeline detail dialog ── */
.pipeline-details-dialog {
    /* Right-side drawer to match the task-detail drawer (#eventDetailsBox):
       same width, full height, slide-in from the right. */
    position: fixed;
    inset: 0 0 0 auto;
    margin: 0;
    width: min(720px, 92vw);
    max-width: 92vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    padding: 0;
    background: #fff;
    box-shadow: -24px 0 60px -12px rgba(38, 53, 93, 0.20);
    overflow: auto;
    z-index: 2050;
    transform: translateX(0);
    transition: transform .24s var(--ease-emphasized);
}
/* Slide in from the right on open (matches the task drawer). The base transform
   is on-screen, so if @starting-style is unsupported the drawer simply appears
   without a slide — it can never get stuck off-screen like a one-shot animation. */
@starting-style {
    .pipeline-details-dialog[open] { transform: translateX(100%); }
}
.pipeline-details-dialog.hidden { display: none; }
.pipeline-details-dialog::backdrop { background: rgba(15,23,42,0.5); }
/* The dialog takes initial focus (tabindex=-1) so the X button doesn't open
   with the global focus ring — no ring needed on the container itself. */
.pipeline-details-dialog:focus,
.pipeline-details-dialog:focus-visible { outline: none; }
/* Tablet/phone: full-screen panel, same as the task drawer at this width. */
@media (max-width: 768px) {
    .pipeline-details-dialog {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-left: 0;
        border-radius: 0;
    }
}

.pipeline-details-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px 12px;
    border-bottom: 1px solid #e2e8f0;
}
.pipeline-details-titleblock h3 { margin: 6px 0 4px; font-size: 20px; font-weight: 700; color: #1e293b; }
.pipeline-details-meta { font-size: 13px; color: #64748b; }
.pipeline-kind-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #14a1db;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pipeline-details-close {
    border: 0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
}
.pipeline-details-close:hover { background: #f1f5f9; color: #1e293b; }

/* Pipeline detail tabs — reuse the task-drawer tab components (.edv-tabs /
   .edv-tabpanel) so every task type shares the same tabbed look. The inner
   pipeline elements keep their own 24px padding, so the tab bar is inset with
   a margin (not padding) and the panels add no extra gap. */
.pipeline-details-body { display: flex; flex-direction: column; min-height: 0; }
#pipelineDetailTabs { margin: 4px 24px 0; }
#pipelineDetailsBox .edv-tabpanel { gap: 0; }
.pipeline-add-stage-btn { align-self: flex-start; margin: 4px 24px 16px; }

.pipeline-progress-wrap { padding: 16px 24px 8px; }
.pipeline-monitor-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 24px 12px;
    font-size: 13px;
    color: #475569;
}
.pipeline-monitor-row .pmon-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-weight: 500;
}
.pipeline-monitor-row .pmon-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 4px;
    background: #eef2ff;
    color: #3730a3;
    border-radius: 999px;
    font-weight: 500;
}
.pipeline-monitor-row .pmon-chip img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}
.pipeline-monitor-row .pmon-chip .pmon-init {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #14a1db;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}
.pipeline-monitor-row .pmon-empty { font-style: italic; color: #94a3b8; }
.pipeline-monitor-row .pmon-edit {
    /* width:auto + flex-shrink:0 beat the global button { width:100% } rule —
       without them this stretches across the row and crushes the chip text. */
    width: auto;
    max-width: none;
    flex-shrink: 0;
    margin-left: auto;
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #334155;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}
.pipeline-monitor-row .pmon-edit:hover { background: #f1f5f9; border-color: #94a3b8; }
.pipeline-progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}
.pipeline-progress-fill {
    height: 100%;
    background: #14a1db;
    border-radius: 999px;
    transition: width 0.3s ease;
}
.pipeline-progress-label { font-size: 12px; color: #64748b; font-weight: 600; }
.pipeline-progress-overdue { color: #dc2626; }
.pipeline-card-overdue { color: #dc2626; font-weight: 700; }

/* Timeline — horizontal on desktop, vertical on mobile */
.pipeline-timeline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 24px 16px;
}
.pipeline-step {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    position: relative;
    transition: border-color 0.15s, transform 0.15s;
}
.pipeline-step-order {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.pipeline-step--completed { border-color: #86efac; background: #f0fdf4; }
.pipeline-step--completed .pipeline-step-order { background: #22c55e; color: #fff; }
.pipeline-step--review { border-color: #fcd34d; background: #fefce8; }
.pipeline-step--review .pipeline-step-order { background: #f59e0b; color: #fff; }
.pipeline-step--active { border-color: #c7d2fe; background: #eef2ff; }
.pipeline-step--active .pipeline-step-order { background: #14a1db; color: #fff; }
.pipeline-step--locked { border-color: #e2e8f0; background: #f8fafc; opacity: 0.75; }
.pipeline-step--locked .pipeline-step-order { background: #cbd5e1; color: #475569; }
.pipeline-step--overdue { border-color: #fecaca; background: #fef2f2; }
.pipeline-step--overdue .pipeline-step-order { background: #ef4444; color: #fff; }
.pipeline-step--skipped { border-color: #e2e8f0; background: #f8fafc; opacity: 0.85; }
.pipeline-step--skipped .pipeline-step-order { background: #94a3b8; color: #fff; }

.pipeline-step-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.pipeline-step-openbtn {
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.pipeline-step-openbtn:hover { color: #14a1db; text-decoration: underline; }
/* Static clickability signal — the title opens the stage detail, but nothing
   said so before hover. Muted chevron, accent on hover. */
.pipeline-step-chev { color: #94a3b8; flex-shrink: 0; }
.pipeline-step-openbtn:hover .pipeline-step-chev { color: #14a1db; }
.pipeline-step-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
}
.pipeline-step-badge--completed { background: #dcfce7; color: #16a34a; }
.pipeline-step-badge--review { background: #fef3c7; color: #d97706; }
.pipeline-step-badge--active { background: #e0e7ff; color: #14a1db; }
.pipeline-step-badge--locked { background: #e2e8f0; color: #64748b; }
.pipeline-step-badge--overdue { background: #fee2e2; color: #dc2626; }
.pipeline-step-badge--skipped { background: #e2e8f0; color: #64748b; }
.pipeline-step-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #64748b;
}
.pipeline-step-metabit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.pipeline-step-metabit svg { opacity: 0.7; flex-shrink: 0; }
.pipeline-step-skip-reason {
    margin-top: 6px;
    padding: 6px 10px;
    background: #fff;
    border-left: 3px solid #94a3b8;
    font-size: 12px;
    color: #475569;
    font-style: italic;
}
.pipeline-step-action {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.pipeline-step-action svg { flex-shrink: 0; }
.pipeline-step-action:hover { border-color: #14a1db; color: #14a1db; background: #eef2ff; }
.pipeline-step-action--danger:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; }
/* Remove is destructive — push it to the far edge so it's a deliberate
   reach, not a 4px slip from Skip. */
.pipeline-step-actions .pipeline-step-action--danger { margin-left: auto; }
.pipeline-step-overdue-rel { color: #dc2626; font-weight: 700; }
/* Tighter action toolbar — 3 compact pills in a row, not a full-width stack */
.pipeline-step-actions {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.pipeline-details-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 24px 20px;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
}
.pipeline-action-hint {
    flex: 1;
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}
.pipeline-action-btn {
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #475569;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.pipeline-action-btn:hover:not(:disabled) { border-color: #14a1db; color: #14a1db; }
.pipeline-action-btn--primary {
    background: #14a1db;
    border-color: #14a1db;
    color: #fff;
}
.pipeline-action-btn--primary:hover:not(:disabled) { background: #1276c2; border-color: #1276c2; color: #fff; }
.pipeline-action-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
}

/* Add-stage full-width dashed button — keep wide but not stretched to 100%
   on desktop. In the pipeline detail dialog it acts like a subtle CTA. */
.pipeline-add-stage-btn {
    width: auto;
    align-self: flex-start;
}

/* Timeline connector (detail dialog) — sequential only. Mirrors the stage
   builder connector so the workflow feel is consistent between creation and
   detail. The .is-parallel class is applied by JS based on pipeline_mode. */
.pipeline-timeline:not(.is-parallel) .pipeline-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 27px;
    bottom: -10px;
    width: 2px;
    height: 10px;
    background: #c7d2fe;
}

/* Header: ensure titleblock consumes available width and the close button
   stays compact on the right. Without this, the global button rule (width:
   100%) stretches the close X to fill the flex cross-axis. */
.pipeline-details-titleblock { flex: 1; min-width: 0; }
.pipeline-details-close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Stage prompt dialog (add/reassign/skip/confirm) */
.pipeline-prompt-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    max-width: 480px;
    width: calc(100% - 40px);
    border: 0;
    border-radius: 14px;
    padding: 0;
    background: #fff;
    box-shadow: 0 24px 64px rgba(0,0,0,0.25);
    z-index: 2060;
}
.pipeline-prompt-dialog.hidden { display: none; }
.pipeline-prompt-dialog::backdrop { background: rgba(15,23,42,0.5); }
.pipeline-prompt-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
}
.pipeline-prompt-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: #1e293b; }
.pipeline-prompt-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.pipeline-prompt-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #475569; font-weight: 600; }
.pipeline-prompt-field input,
.pipeline-prompt-field select,
.pipeline-prompt-field textarea {
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    color: #1e293b;
    background: #fff;
    font-weight: 400;
}
.pipeline-prompt-note {
    padding: 10px 12px;
    background: #fef3c7;
    color: #78350f;
    border-radius: 8px;
    font-size: 13px;
    margin: 0;
}
.pipeline-prompt-error {
    padding: 8px 12px;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    margin: 0 0 10px;
}
.pipeline-prompt-error.hidden { display: none; }
.pipeline-prompt-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid #e2e8f0;
}
.pa-cancel-btn, .pa-submit-btn {
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #475569;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
}
.pa-submit-btn { background: #14a1db; border-color: #14a1db; color: #fff; }
.pa-submit-btn:hover { background: #1276c2; border-color: #1276c2; }
.pa-cancel-btn:hover { border-color: #94a3b8; color: #1e293b; }

/* Mobile: stage builder + timeline stack vertically, cards tighten */
@media (max-width: 620px) {
    .pipeline-details-dialog {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }
    .pipeline-stage-row-fields { grid-template-columns: 1fr; }
    .pipeline-step {
        grid-template-columns: 36px 1fr;
        padding: 10px;
    }
    .pipeline-step-order { width: 30px; height: 30px; font-size: 13px; }
    .pipeline-step-meta { gap: 8px; font-size: 11px; }
    .pipeline-step-actions { gap: 4px; }
    .pipeline-details-head { padding: 14px 16px 10px; }
    .pipeline-progress-wrap { padding: 12px 16px 6px; }
    .pipeline-timeline { padding: 6px 16px 12px; }
    .pipeline-details-actions { padding: 10px 16px 16px; }
    .pipeline-prompt-dialog { width: 100%; max-width: 100%; border-radius: 0; height: auto; }

    /* Mobile pipeline polish (design critique): the safe action pills fill each
       row evenly so they leave no ragged gap, and the destructive Remove drops
       to its own full-width row — keeping its deliberate separation. */
    .pipeline-step-actions .pipeline-step-action:not(.pipeline-step-action--danger) {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
    }
    .pipeline-step-actions .pipeline-step-action--danger {
        flex-basis: 100%;
        margin-left: 0;
        justify-content: center;
    }
    /* Footer: hint becomes a caption row on top; the two buttons share the row
       below as equal-width tap targets. */
    .pipeline-details-actions {
        flex-wrap: wrap;
        gap: 10px;
    }
    .pipeline-details-actions .pipeline-action-hint {
        flex: none;
        width: 100%;
        order: -1;
        text-align: center;
    }
    .pipeline-details-actions .pipeline-action-btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 40px;
    }
    /* The X is the only way to dismiss the full-screen dialog — real tap target. */
    .pipeline-details-close {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* 1366×768 display optimization — keep stage cards compact so 5+ fit on-screen */
@media (min-width: 1024px) and (max-width: 1400px) and (max-height: 800px) {
    .pipeline-step { padding: 10px 12px; }
    .pipeline-step-order { width: 32px; height: 32px; font-size: 13px; }
    .pipeline-details-head { padding: 14px 20px 10px; }
    .pipeline-timeline { gap: 8px; padding: 6px 20px 12px; }
}

/* Pipeline-kind quick add: reduce spacing since fewer sections are visible. */
.quick-add-panel.is-pipeline-kind .qa-section { margin-bottom: 10px; }

/* Pipeline discovery chip — shown on stage rows in the reports list and as
   a breadcrumb in the stage detail modal. Click opens the parent pipeline's
   timeline dialog. Uses indigo-tinted neutral styling so it doesn't compete
   with primary CTAs. */
.pipeline-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #14a1db;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pipeline-link-chip:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
    text-decoration: none;
}
.pipeline-link-chip svg { flex-shrink: 0; opacity: 0.85; }
.pipeline-link-chip span { overflow: hidden; text-overflow: ellipsis; }

/* Breadcrumb variant — slightly larger, sits above the stage title. */
.pipeline-stage-breadcrumb {
    margin-bottom: 8px;
    font-size: 12px;
    padding: 4px 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Action popups — Extension Request + Wrong Assignment
   Both forms are inline <div>s that toggle .hidden. When visible, promote
   them to centered modal popups with a full-viewport dimmer via the
   box-shadow ring trick (works without extra DOM or JS). Cancel button
   already exists in each form for dismissal.
   ═══════════════════════════════════════════════════════════════════════ */
#extensionRequestPanel:not(.hidden),
#wrongAssignmentRequestPanel:not(.hidden),
#wrongAssignmentManagePanel:not(.hidden) {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(460px, calc(100vw - 32px)) !important;
    max-width: none !important;
    max-height: calc(100vh - 48px) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 22px 24px !important;
    background: #fff !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    z-index: 3000 !important;
    /* Double shadow: dimmer ring (first) + drop shadow (second). */
    box-shadow:
        0 0 0 100vmax rgba(15, 23, 42, 0.55),
        0 24px 60px rgba(0, 0, 0, 0.25) !important;
}

/* Tighter, modal-appropriate heading inside the popup */
#extensionRequestPanel:not(.hidden) h5,
#wrongAssignmentRequestPanel:not(.hidden) h5,
#wrongAssignmentManagePanel:not(.hidden) h5 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 0 12px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

/* Form controls inside popup — consistent spacing */
#extensionRequestPanel:not(.hidden) label,
#wrongAssignmentRequestPanel:not(.hidden) label,
#wrongAssignmentManagePanel:not(.hidden) label {
    display: block;
    margin-top: 10px;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}
#extensionRequestPanel:not(.hidden) input,
#extensionRequestPanel:not(.hidden) textarea,
#wrongAssignmentRequestPanel:not(.hidden) textarea,
#wrongAssignmentManagePanel:not(.hidden) select,
#wrongAssignmentManagePanel:not(.hidden) textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Footer row: primary action on the LEFT, cancel on the RIGHT — corporate
   convention for focused modals (user's eye lands on primary first). */
#extensionRequestPanel:not(.hidden) .actions,
#wrongAssignmentRequestPanel:not(.hidden) .actions,
#wrongAssignmentManagePanel:not(.hidden) .actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
    justify-content: flex-end;
}
#extensionRequestPanel:not(.hidden) .actions button,
#wrongAssignmentRequestPanel:not(.hidden) .actions button,
#wrongAssignmentManagePanel:not(.hidden) .actions button {
    width: auto;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
}

/* Mobile: popup goes full-width with minor inset, scroll if needed */
@media (max-width: 620px) {
    #extensionRequestPanel:not(.hidden),
    #wrongAssignmentRequestPanel:not(.hidden),
    #wrongAssignmentManagePanel:not(.hidden) {
        width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 24px) !important;
        padding: 18px 18px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Report review — inline pre-footer block
   Flat (no card chrome), sits directly above the sticky footer. Reviewer's
   approve/reject buttons are in the footer; this block holds only the
   submitted-report meta + optional reviewer comment.
   ═══════════════════════════════════════════════════════════════════════ */
.report-review-inline {
    padding: 14px 20px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
}
.report-review-inline.hidden { display: none; }
.report-review-meta-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
}
.report-review-meta-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #14a1db;
}
.report-review-meta-value {
    color: #64748b;
    font-weight: 500;
}
.report-review-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 4px;
}
.report-review-inline textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #1e293b;
    font-family: inherit;
    resize: vertical;
    min-height: 48px;
}
.report-review-inline textarea:focus {
    outline: none;
    border-color: #14a1db;
    box-shadow: 0 0 0 3px rgba(20, 161, 219,0.12);
}
.report-review-helper {
    font-size: 11px;
    color: #94a3b8;
    margin: 4px 0 0;
    font-weight: 500;
}

/* Review decision row — Approve (primary) + Reject (destructive outline)
   sit directly below the comment input so the reviewer never has to hunt
   for the action after typing. Mirrors footer button sizing so the visual
   hierarchy (big primary CTA) stays consistent. */
.report-review-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
}
.report-review-actions .tdf-primary {
    min-width: 160px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #14a1db;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.15s, transform 0.15s;
    box-shadow: 0 2px 6px rgba(20, 161, 219, 0.25);
}
.report-review-actions .tdf-primary:hover:not(:disabled) {
    filter: brightness(1.05);
    transform: translateY(-1px);
}
.report-review-actions .tdf-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.report-review-actions .tdf-primary.hidden { display: none; }
.report-review-actions .tdf-reject-btn {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #dc2626;
    background: #fff;
    border: 1.5px solid #fca5a5;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.report-review-actions .tdf-reject-btn:hover {
    background: #fef2f2;
    border-color: #dc2626;
    color: #b91c1c;
}
.report-review-actions .tdf-reject-btn.hidden { display: none; }

/* Mobile: stack actions full-width so both are equally reachable */
@media (max-width: 620px) {
    .report-review-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .report-review-actions .tdf-primary,
    .report-review-actions .tdf-reject-btn {
        width: 100%;
        min-width: 0;
    }
}

/* Reject button — red outline (destructive but not shouty). Matches the
   .tdf-primary sizing so it sits cleanly next to Approve Report. */
.task-details-footer .tdf-reject-btn {
    width: auto;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #dc2626;
    background: #fff;
    border: 1.5px solid #fca5a5;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.task-details-footer .tdf-reject-btn:hover {
    background: #fef2f2;
    border-color: #dc2626;
    color: #b91c1c;
}
.task-details-footer .tdf-reject-btn.hidden { display: none; }

/* When reviewer actions are visible, push the More button to the right
   edge — approve/reject sit left, More sits right with a gap between. */
.task-details-footer {
    /* flex:space-between already in the original rule — ensure gap works */
}

/* Mobile: reviewer action row stacks neatly */
@media (max-width: 620px) {
    .task-details-footer .tdf-reject-btn {
        padding: 10px 14px;
    }
    .report-review-inline {
        padding: 12px 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Task Details modal — redesigned footer
   One primary CTA + More dropdown. Sticky at bottom so actions never scroll
   off-screen. Secondary/tertiary actions (extension, reject, edit, delete)
   collapse into the More menu to reduce footer clutter.
   ═══════════════════════════════════════════════════════════════════════ */
.task-details-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    /* Match the modal container's border-radius so the footer's white
       background doesn't paint over the rounded bottom corners. */
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.04);
    z-index: 10;
}
.task-details-footer .tdf-primary {
    width: auto;
    min-width: 160px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #14a1db;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.15s, transform 0.15s;
}
.task-details-footer .tdf-primary:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
.task-details-footer .tdf-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.task-details-footer .tdf-primary.hidden { display: none; }

/* If the primary is hidden (e.g. creator has nothing to submit), push the
   More dropdown to the right edge. Flex handles this naturally. */
.tdf-more {
    position: relative;
    margin-left: auto;
}
.tdf-more-btn {
    width: auto;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.tdf-more-btn:hover { border-color: #14a1db; color: #14a1db; background: #fff; }
.tdf-more[data-open="true"] .tdf-more-btn { border-color: #14a1db; color: #14a1db; }
.tdf-more[data-open="true"] .tdf-more-btn svg { transform: rotate(180deg); }
.tdf-more-btn svg { transition: transform 0.15s; }

.tdf-more-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    min-width: 240px;
    max-width: 320px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 20;
}
.tdf-more-menu.hidden { display: none; }
.tdf-menu-item {
    width: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}
.tdf-menu-item:hover { background: #f1f5f9; }
.tdf-menu-item svg { flex-shrink: 0; color: #64748b; }
.tdf-menu-item:hover svg { color: #14a1db; }
.tdf-menu-item.hidden { display: none; }
.tdf-menu-item--danger { color: #dc2626; }
.tdf-menu-item--danger:hover { background: #fef2f2; color: #b91c1c; }
.tdf-menu-item--danger svg { color: #dc2626; }
.tdf-menu-item--danger:hover svg { color: #b91c1c; }
.tdf-menu-sep {
    height: 1px;
    background: #e2e8f0;
    margin: 4px 2px;
}

/* Mobile: footer buttons get full width; More menu becomes a bottom sheet. */
@media (max-width: 620px) {
    .task-details-footer {
        flex-direction: row;
        padding: 12px 16px;
        gap: 8px;
    }
    .task-details-footer .tdf-primary {
        flex: 1;
        min-width: 0;
    }
    .tdf-more-btn {
        padding: 10px 12px;
    }
    .tdf-more-menu {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        min-width: 100%;
        max-width: 100%;
        border-radius: 14px 14px 0 0;
        padding: 8px;
        box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.25);
        animation: tdfBottomSheetIn 0.2s ease-out;
    }
    .tdf-menu-item {
        padding: 14px 14px;
        font-size: 14px;
    }
}
@keyframes tdfBottomSheetIn {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ── Pipeline PARENT task card — highlighted design ── */
/* Strong visual differentiation: indigo-tinted bg, full indigo border, thick
   left accent, always-on soft shadow. The stage dots remain the primary
   identity signal; the PIPELINE chip sits in the top-right (away from the
   title) as a confirming secondary cue. */
.task-card--pipeline-parent {
    background: #eef2ff;
    border: 1.5px solid #c7d2fe;
    border-left: 4px solid #14a1db;
    box-shadow: 0 1px 4px rgba(20, 161, 219,0.12), 0 0 0 1px rgba(20, 161, 219,0.04);
    position: relative;
    transition: box-shadow 0.2s, transform 0.15s;
}
.task-card--pipeline-parent:hover {
    box-shadow: 0 4px 12px rgba(20, 161, 219,0.2), 0 0 0 1px rgba(20, 161, 219,0.08);
    transform: translateY(-1px);
}
.task-card--pipeline-parent .task-card-title {
    flex: 1;
    min-width: 0;
}

/* PIPELINE identity chip — compact, sits in the card header between the
   title and the menu. Unambiguously marks this as a pipeline without
   stealing visual weight from the title. */
.task-card--pipeline-parent .task-card-head {
    position: relative;
    padding-right: 8px;
}
.pipeline-identity-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-right: 6px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1276c2;
    background: #ffffff;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(18, 118, 194,0.08);
}
.pipeline-identity-chip svg { flex-shrink: 0; opacity: 0.85; }

/* Stage dots + connectors — the primary visual identifier for a pipeline */
.pipeline-stage-dots {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 10px 0 6px;
    flex-wrap: nowrap;
    min-height: 12px;
}
.pipeline-stage-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #c7d2fe;
    background: #fff;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}
.pipeline-stage-dot.is-done {
    background: #14a1db;
    border-color: #14a1db;
}
.pipeline-stage-connector {
    flex: 1;
    height: 2px;
    background: #c7d2fe;
    min-width: 8px;
    max-width: 24px;
}
.pipeline-stage-overflow {
    margin-left: 8px;
    font-size: 10px;
    font-weight: 700;
    color: #14a1db;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    padding: 2px 6px;
    flex-shrink: 0;
}

/* Summary line directly under the dots (e.g. "2 of 4 stages complete · Sequential") */
.pipeline-card-summary {
    font-size: 12px;
    font-weight: 600;
    color: #14a1db;
    margin-bottom: 6px;
}

/* Compact one-line schedule + by-line (merges what was two rows in normal card) */
.pipeline-card-schedule {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
    line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════════
 * Department Group Chat — WhatsApp-style groups layered on the P2P chat.
 * ════════════════════════════════════════════════════════════════════════ */

.chat-list-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* "New Group" — labeled pill (icon + text) instead of icon-only.
   Reasoning: at 32px an icon-only button next to the pencil ("New Chat")
   reduces to two abstract glyphs that users have to memorize. A pill with
   a clear text label removes the ambiguity, makes the action discoverable
   for first-time HODs, and also acts as a visual hint that this is a
   permission-gated capability. */
.chat-list-header .chat-new-group-btn {
    height: 32px;
    padding: 0 12px 0 10px;
    border-radius: 16px;
    border: 0;
    background: rgba(131, 56, 236, 0.08);
    color: #1488c7;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.15s, transform 0.1s;
}
.chat-list-header .chat-new-group-btn:hover { background: rgba(131, 56, 236, 0.16); }
.chat-list-header .chat-new-group-btn:active { transform: scale(0.96); }
.chat-list-header .chat-new-group-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    /* On phones the header is tight — drop the label and keep just the icon
       inside a 32px square chip to save horizontal space. */
    .chat-list-header .chat-new-group-btn {
        width: 32px;
        padding: 0;
        border-radius: 10px;
        justify-content: center;
    }
    .chat-list-header .chat-new-group-btn span { display: none; }
}

/* Section labels inside the chat list (injected by renderChatUsers). */
.chat-section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 10px 14px 4px;
    pointer-events: none;
    user-select: none;
}
.chat-section-label:first-child { padding-top: 4px; }

/* Group chat list item — mostly reuses .chat-user-item styling but gives
   group avatars a rounded-square look to visually distinguish from DMs. */
.chat-user-item--group .chat-avatar,
.chat-user-item--group .chat-avatar-lg {
    border-radius: 8px !important;
}
.chat-official-pill {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 600;
    background: #10b981;
    color: #fff;
    padding: 2px 7px;
    border-radius: 10px;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

/* Thread header: View Members link + kebab for HOD actions. */
.chat-group-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    position: relative;
}
.chat-view-members-btn {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.chat-view-members-btn:hover {
    background: #f1f5f9;
    color: #1e293b;
}
.chat-group-kebab {
    background: transparent;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
    transition: background 0.15s;
}
.chat-group-kebab:hover { background: #f1f5f9; }
.chat-group-kebab svg { width: 18px; height: 18px; }
.chat-group-kebab-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
    padding: 4px;
    min-width: 160px;
    z-index: 50;
}
.chat-group-kebab-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 12px;
    font-size: 13px;
    color: #1e293b;
    border-radius: 6px;
    cursor: pointer;
}
.chat-group-kebab-menu button:hover { background: #f1f5f9; }
.chat-group-kebab-menu .chat-kebab-danger { color: #dc2626; }
.chat-group-kebab-menu .chat-kebab-danger:hover { background: #fef2f2; }

/* Sender-name tag above group messages (from others, when sender changes). */
.chat-msg-sender {
    font-size: 11.5px;
    font-weight: 600;
    margin: 0 0 2px 2px;
    opacity: 0.92;
}

/* ── Create Group modal ─────────────────────────────────────────────── */
.chat-group-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}
.chat-group-modal.hidden { display: none; }
.chat-group-modal-card {
    background: #fff;
    border-radius: 12px;
    width: min(440px, 100%);
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-direction: column;
}
.chat-group-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
}
.chat-group-modal-head h4 { margin: 0; font-size: 15px; color: #0f172a; }
.chat-group-modal-close {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.chat-group-modal-close svg { width: 20px; height: 20px; }
.chat-group-modal-close:hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: #dc2626;
}
.chat-group-modal-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.chat-group-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.chat-group-field > span {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}
.chat-group-field input[type="text"],
.chat-group-field input[type="search"],
.chat-group-field select {
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
}
.chat-group-field input:focus,
.chat-group-field select:focus { border-color: #1488c7; }
/* Member picker — same DNA as the chat list rows: avatar + name + role.
   Vertical text stacking prevents the name from wrapping when the
   designation is long. Picker is taller (260px) so 5 rows are visible
   at once instead of the previous 3. */
.chat-group-field-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.chat-group-member-total {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.chat-group-member-picker {
    max-height: 260px;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    padding: 4px;
}
.chat-group-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border-radius: 6px;
    cursor: pointer;
    color: #1e293b;
    transition: background 0.12s;
}
.chat-group-member-row:hover { background: #f1f5f9; }
.chat-group-member-row.is-selected { background: #dcf1fb; }
.chat-group-member-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #1488c7;
    flex-shrink: 0;
    margin: 0;
}
.chat-group-member-row .cgm-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}
.chat-group-member-row .cgm-text {
    display: flex;
    flex-direction: column;
    min-width: 0;          /* allows ellipsis to work in flex */
    flex: 1;
}
.chat-group-member-row .cgm-text strong {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-group-member-row .cgm-text small {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}
.chat-group-member-empty {
    padding: 18px 10px;
    text-align: center;
    color: #64748b;
    font-size: 12.5px;
}

.chat-group-selected-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.chat-group-selected-count {
    font-size: 11.5px;
    color: #64748b;
}
.chat-group-link-btn {
    background: transparent;
    border: 0;
    color: #1488c7;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 0;
}
.chat-group-link-btn:hover { text-decoration: underline; }
.chat-group-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 4px;
}
.chat-group-modal-actions .primary {
    background: #1488c7;
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}
.chat-group-modal-actions .primary:disabled { opacity: 0.55; cursor: not-allowed; }
.chat-group-modal-actions .ghost {
    background: #fff;
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}

/* ── Members drawer ─────────────────────────────────────────────────── */
.chat-members-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -6px 0 20px rgba(15, 23, 42, 0.12);
    z-index: 900;
    display: flex;
    flex-direction: column;
}
.chat-members-drawer.hidden { display: none; }
.chat-members-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
}
.chat-members-drawer-head h4 { margin: 0; font-size: 14px; }
/* Close X — 36×36 chip with a 20px glyph and a heavier 2.4 stroke so it
   reads at a glance instead of looking like a faint dot. Idle state has a
   subtle gray fill so the affordance is visible even before hover. */
.chat-members-close {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    flex-shrink: 0;
}
.chat-members-close svg { width: 20px; height: 20px; }
.chat-members-close:hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: #dc2626;
}
.chat-members-close:active { transform: scale(0.95); }
.chat-members-drawer-body {
    padding: 14px;
    overflow: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Member-count subtitle in the drawer header — gives immediate scale
   ("8 members") so the user knows what they're looking at before scanning. */
.chat-members-drawer-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.chat-members-drawer-count {
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 500;
}

/* Search-members field at the top of the body — the PRIMARY affordance
   for the user, who came to the panel to find/manage someone. Matches
   the same style as the chat-list search so it's instantly recognisable. */
.chat-members-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.chat-members-search-icon {
    position: absolute;
    left: 10px;
    width: 14px;
    height: 14px;
    color: #94a3b8;
    pointer-events: none;
}
.chat-members-search-wrap input {
    flex: 1;
    padding: 8px 10px 8px 32px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 13px;
    outline: none;
    transition: border-color 0.12s, background 0.12s;
}
.chat-members-search-wrap input:focus {
    border-color: #a9dcf1;
    background: #fff;
}

/* "+ Add member" — accordion row directly above the candidate picker.
   Click toggles open/closed (caret rotates), and when open the row
   visually merges with the picker below (shared border, no bottom
   radius) so it reads as one expanded panel — no jump-to-the-bottom-of-the-drawer. */
.chat-members-add-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border: 1px dashed #c9e9f7;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: #0e7bb0;
    text-align: left;
    font: inherit;
    width: 100%;
    transition: background 0.12s, border-color 0.12s, border-radius 0.12s;
}
.chat-members-add-row:hover {
    background: #eef8fd;
    border-color: #a9dcf1;
}
.chat-members-add-row.is-open {
    background: #eef8fd;
    border-style: solid;
    border-color: #a9dcf1;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}
.chat-members-add-row-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #dcf1fb;
    color: #0e7bb0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.chat-members-add-row-icon svg { width: 18px; height: 18px; }
.chat-members-add-row-text {
    font-size: 13px;
    font-weight: 600;
    color: #0e7bb0;
    flex: 1;
}
.chat-members-add-row-caret {
    color: #4fb8e6;
    flex-shrink: 0;
    display: inline-flex;
    transition: transform 0.18s;
}
.chat-members-add-row-caret svg { width: 16px; height: 16px; }
.chat-members-add-row.is-open .chat-members-add-row-caret { transform: rotate(180deg); }

/* Legacy class kept as a no-op (the top-level "+ Add member" button used
   to use this; now uses .chat-members-add-row). Inside the candidates
   picker the same class is reused for per-row "Add" pills, which we
   restore inline below. */
.chat-members-add-btn { display: none; }
.chat-members-candidates .chat-members-add-btn { display: inline-flex; }

.chat-members-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Member row — scoped INSIDE the drawer so the avatar size doesn't inherit
   the chat-list default (which can be 40-48px and crowds the row). */
.chat-members-drawer .chat-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 6px;
    transition: background 0.12s;
}
.chat-members-drawer .chat-member-row:hover { background: #f8fafc; }
.chat-members-drawer .chat-member-row .chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}
.chat-members-drawer .chat-member-row-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;          /* lets ellipsis kick in */
    line-height: 1.25;
}
.chat-members-drawer .chat-member-row-text strong {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-members-drawer .chat-member-row-text span {
    font-size: 11.5px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}

/* Remove control — a tight 28x28 ghost icon button (red on hover) instead
   of an oversized labeled pill. Saves horizontal space in a 320px drawer
   and matches the visual weight of the close-X in the header. */
.chat-member-remove-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    color: #94a3b8;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.chat-member-remove-btn:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

/* "Admin" pill + "(you)" tag inline next to the member name. Lightweight,
   matches the "Official" pill in the chat list. */
.chat-member-admin-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 600;
    color: #0e7bb0;
    background: #dcf1fb;
    border-radius: 10px;
    vertical-align: middle;
    letter-spacing: 0.02em;
}
.chat-member-you {
    color: #94a3b8;
    font-weight: 500;
    font-size: 11px;
}

/* Actionable member row — clickable to open the floating action sheet.
   The whole row is the click target (better tap accuracy than a tiny
   pill); the chevron on the right hints at the action sheet. Replaces
   the previous always-visible "Make admin" / "Remove" pills which
   cluttered every row. WhatsApp-style. */
.chat-members-drawer .chat-member-row--actionable {
    cursor: pointer;
}
.chat-members-drawer .chat-member-row--actionable:hover {
    background: #eff6ff;
}
.chat-members-drawer .chat-member-row--actionable:focus-visible {
    outline: 2px solid #a9dcf1;
    outline-offset: -2px;
}
.chat-member-row-chevron {
    color: #cbd5e1;
    font-size: 22px;
    line-height: 1;
    margin-left: 6px;
    flex-shrink: 0;
    transition: color 0.12s, transform 0.12s;
}
.chat-members-drawer .chat-member-row--actionable:hover .chat-member-row-chevron {
    color: #1488c7;
    transform: translateX(2px);
}

/* Floating action sheet — pops next to the clicked row. Lives at body
   level so its absolute positioning isn't trapped inside the drawer's
   overflow:auto container. */
.chat-member-action-sheet {
    position: fixed;
    z-index: 1100;
    width: 200px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    padding: 4px;
    overflow: hidden;
}
.chat-member-action-sheet.hidden { display: none; }
.chat-member-action-sheet-header {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 12px 6px;
    font-weight: 600;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-member-action-sheet button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 9px 12px;
    font-size: 13px;
    color: #1e293b;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.2;
}
.chat-member-action-sheet button:hover { background: #f1f5f9; }
.chat-member-action-sheet .chat-action-icon {
    width: 16px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
    line-height: 1;
}
.chat-member-action-sheet .chat-action-danger { color: #dc2626; }
.chat-member-action-sheet .chat-action-danger:hover { background: #fef2f2; }
.chat-member-action-sheet .chat-action-danger .chat-action-icon {
    color: #dc2626;
    font-size: 18px;
    font-weight: 700;
}

/* System event chip — centered, neutral, italic. Renders "X added Y", admin
   promotions, etc. Clearly distinct from chat bubbles. */
.chat-system-event {
    display: flex;
    justify-content: center;
    margin: 8px 0;
}
.chat-system-event span {
    background: #f1f5f9;
    color: #475569;
    font-size: 11.5px;
    font-style: italic;
    padding: 4px 12px;
    border-radius: 12px;
    max-width: 80%;
    text-align: center;
}

/* Inline candidate row's "Add" button — smaller, green tint to differentiate
   from the destructive Remove. */
.chat-members-drawer .chat-member-row .chat-members-add-btn {
    align-self: auto;
    flex-shrink: 0;
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 11.5px;
    background: #ecfdf5;
    color: #047857;
}
.chat-members-drawer .chat-member-row .chat-members-add-btn:hover {
    background: #d1fae5;
}

/* Inline accordion picker — visually attached to the "+ Add member" row
   above (shared purple border, top corners squared). Sits BETWEEN the
   add-row and the members list so the user doesn't have to hunt. */
.chat-members-add-picker {
    margin-top: -1px;          /* hug the bottom of the add row */
    padding: 10px;
    background: #fafaff;
    border: 1px solid #a9dcf1;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chat-members-add-picker input {
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    background: #fff;
    transition: border-color 0.12s;
}
.chat-members-add-picker input:focus {
    border-color: #a9dcf1;
}
.chat-members-candidates {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;     /* never scroll horizontally — clip instead */
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Defensive layout for candidate rows — without these, the global
   .chat-members-add-btn rule + missing min-width on the text column lets
   the "Add" pill consume horizontal space and push the name off-screen.
   Forcing the row to 100% width with min-width:0 on the text lets
   the name+designation ellipsis kick in cleanly. */
.chat-members-candidates .chat-member-row {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
.chat-members-candidates .chat-member-row > .chat-member-row-text {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}
.chat-members-candidates .chat-member-row > .chat-members-add-btn {
    flex: 0 0 auto;
    align-self: center;
    width: auto;
    padding: 5px 14px;
    font-size: 11.5px;
    background: #ecfdf5;
    color: #047857;
    border-radius: 14px;
    line-height: 1.2;
}
.chat-members-candidates .chat-member-row > .chat-members-add-btn:hover {
    background: #d1fae5;
}

/* ── 1366×768 & mobile breakpoints ──────────────────────────────────── */
@media (max-width: 1024px) {
    .chat-members-drawer {
        width: 100%;
        top: auto;
        bottom: 0;
        height: 75vh;
        border-left: none;
        border-top: 1px solid #e2e8f0;
        border-radius: 14px 14px 0 0;
    }
}

/* ══════════════════════════════════════════════════════════════════ */
/*  CIRCULARS (Official Announcements) — build:v6                      */
/*  High-specificity scoped rules under [data-circulars-root] and       */
/*  [data-cc-root] so they win any cascade conflict with generic        */
/*  .card/.hrms-card/label rules elsewhere in the stylesheet.           */

/* ═══ Create Circular modal — scoped under [data-cc-root] ═══ */

/* Widen the modal for breathing room on desktop. */
[data-cc-root].circular-create-panel {
    max-width: 720px !important;
}

/* Kill the default focus ring that makes the close button render as a
   giant rounded bordered box when showModal() auto-focuses it. Keep a
   nice keyboard-only ring for accessibility via :focus-visible. */
[data-cc-root] *:focus { outline: none !important; }
[data-cc-root] *:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
}

/* Header: title takes the remaining space, close button stays square. */
[data-cc-root] .circular-create-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}
[data-cc-root] .circular-create-head h4 {
    flex: 1 1 auto !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
[data-cc-root] .circular-create-close {
    flex: 0 0 auto !important;
    width: 32px !important; height: 32px !important;
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    color: var(--muted) !important;
    cursor: pointer !important;
}
[data-cc-root] .circular-create-close:hover {
    background: var(--accent-soft) !important;
    color: var(--ink) !important;
}

/* Theme-matching radios/checkboxes throughout the modal. */
[data-cc-root] input[type="radio"],
[data-cc-root] input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px; height: 16px;
    margin: 0;
    flex: 0 0 auto;
}

/* Universal label fix: every label inside the modal is a flex row with
   the control pinned to the left and the text occupying the rest. This
   single rule neutralises any ambient form-label styling that tries to
   stack the input above the text. */
[data-cc-root] label.cc-radio-row,
[data-cc-root] label.cc-scope-option,
[data-cc-root] label.cc-dept-chip,
[data-cc-root] label.cc-delivery-opt,
[data-cc-root] label.cc-include-author,
[data-cc-root] .cc-priority > label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
    cursor: pointer !important;
}
[data-cc-root] label.cc-radio-row > span,
[data-cc-root] label.cc-scope-option > span,
[data-cc-root] label.cc-dept-chip > span,
[data-cc-root] label.cc-delivery-opt > span,
[data-cc-root] label.cc-include-author > span,
[data-cc-root] .cc-priority > label > span {
    flex: 1 1 auto !important;
    text-align: left !important;
}

/* Priority radios — inline, not stacked. */
[data-cc-root] .cc-priority {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;
    margin-top: 4px;
}
[data-cc-root] .cc-priority > label { flex: 0 0 auto !important; font-size: 13px !important; }

/* Scope grid — two equal columns, cards don't wrap into "All active / staff". */
[data-cc-root] .cc-scope-options {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}
[data-cc-root] .cc-scope-option {
    padding: 12px 14px !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}
[data-cc-root] .cc-scope-option:hover { border-color: var(--accent) !important; }
[data-cc-root] .cc-scope-option:has(input:checked) {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
    color: #3730a3 !important;
    font-weight: 600 !important;
}

/* Staff-type sub-row (inside audience) */
[data-cc-root] #ccStaffTypeField {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    flex-wrap: wrap;
}

/* Department chips — uniform grid, text-left, selected highlight. */
[data-cc-root] .cc-dept-chips {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 6px !important;
}
[data-cc-root] .cc-dept-chip {
    padding: 10px 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
}
[data-cc-root] .cc-dept-chip:hover { border-color: var(--accent) !important; }
[data-cc-root] .cc-dept-chip:has(input:checked) {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
    color: #3730a3 !important;
    font-weight: 600 !important;
}

/* Delivery options — inline checkbox + label, no weird wrapping. */
[data-cc-root] .cc-delivery-opt {
    padding: 6px 0 !important;
    font-size: 13px !important;
}
[data-cc-root] .cc-delivery-opt .cc-muted {
    color: var(--muted);
    font-weight: 400;
    margin-left: 4px;
    font-size: 11px;
}

/* Include-author checkbox */
[data-cc-root] .cc-include-author {
    margin-top: 10px !important;
    font-size: 13px !important;
}

/* "Also include specific users" header row */
[data-cc-root] .cc-extra-users-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    font-size: 12px !important;
}
[data-cc-root] .cc-extra-users-head > span { color: var(--ink); }

/* Section titles + field labels get a consistent look */
[data-cc-root] .cc-section-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    margin: 0 0 8px !important;
    display: flex; align-items: center; gap: 6px;
}
[data-cc-root] .cc-field > span { font-size: 12px; font-weight: 600; color: var(--ink); }

/* Reach summary card */
[data-cc-root] .cc-reach {
    margin-top: 12px !important;
    padding: 12px 14px !important;
    background: var(--accent-soft) !important;
    border: 1px solid #e0e7ff !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    color: #3730a3 !important;
}

/* Hide the form footer while the confirm banner is up — the banner's
   own Go-back / Yes-publish buttons are the only valid actions at that
   step, so the regular footer's Cancel + Publish would be duplicates. */
[data-cc-root] .circular-create-foot.cc-foot-hidden { display: none !important; }

/* "YOU PUBLISHED" chip on circulars the viewer authored. Green so it's
   clearly distinct from the red "IMPORTANT" chip. */
.circ-pill-mine {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0;
}
.circ-card.is-mine { border-left-color: #10b981 !important; }
.circ-card-reach { color: #166534; font-weight: 500; }

/* ═══ Detail modal redesign — scoped under [data-cd-root] ═══ */

[data-cd-root].circular-modal { padding: 20px; }
[data-cd-root] .circular-modal-card {
    max-width: 760px !important; width: 100% !important;
    max-height: 90vh !important;
    position: relative !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
}

/* Single scroll region containing body + attachments + delivery panel.
   Header stays pinned at top; close button is absolutely positioned on
   the card. Fixes the "recipients clipped at card bottom" bug caused by
   the delivery panel being a sibling of the body without its own overflow
   container — when both combined exceed 90vh, content was silently clipped. */
[data-cd-root] .circular-modal-scroll {
    flex: 1 1 auto;
    min-height: 0;             /* CRITICAL: lets the flex child shrink so overflow engages */
    overflow-y: scroll;          /* always-visible scrollbar, not auto-hidden overlay */
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
}
[data-cd-root] .circular-modal-scroll::-webkit-scrollbar { width: 10px; }
[data-cd-root] .circular-modal-scroll::-webkit-scrollbar-track { background: #f1f5f9; }
[data-cd-root] .circular-modal-scroll::-webkit-scrollbar-thumb {
    background: #94a3b8; border-radius: 5px; border: 2px solid #f1f5f9;
}
[data-cd-root] .circular-modal-scroll::-webkit-scrollbar-thumb:hover { background: #64748b; }
[data-cd-root] .circular-modal-head { flex: 0 0 auto; }

/* Close button: absolutely pinned to the card corner so it never competes
   with the header flex and the title always gets the full content width. */
[data-cd-root] .circular-modal-close {
    position: absolute !important;
    top: 14px !important; right: 14px !important;
    width: 32px !important; height: 32px !important;
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    padding: 0 !important;
    background: rgba(15, 23, 42, 0.05) !important;
    border: none !important; border-radius: 50% !important;
    cursor: pointer !important;
    color: var(--muted) !important;
    z-index: 5 !important;
}
[data-cd-root] .circular-modal-close:hover {
    background: rgba(15, 23, 42, 0.1) !important;
    color: var(--ink) !important;
}

/* Header: block layout, title full width, meta row below. */
[data-cd-root] .circular-modal-head {
    display: block !important;
    padding: 26px 64px 22px 32px !important;
    border-bottom: 1px solid var(--border) !important;
    background: #fff;
}
[data-cd-root] .circ-detail-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
[data-cd-root] .circ-pill-normal {
    background: var(--accent-soft); color: #4338ca; letter-spacing: 0.06em;
}
[data-cd-root] .circ-detail-title {
    font-size: 22px !important; font-weight: 700 !important;
    color: var(--ink) !important; line-height: 1.3 !important;
    margin: 0 0 18px !important; word-break: break-word;
    letter-spacing: -0.01em;
}
[data-cd-root] .circ-detail-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
[data-cd-root] .circ-detail-author {
    display: flex; align-items: center; gap: 10px; min-width: 0;
}
[data-cd-root] .circ-detail-avatar {
    flex: 0 0 auto;
    width: 36px; height: 36px; border-radius: 50%;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
}
[data-cd-root] .circ-detail-author-text { min-width: 0; line-height: 1.35; }
[data-cd-root] .circ-detail-author-name { font-size: 13px; font-weight: 600; color: var(--ink); }
[data-cd-root] .circ-detail-author-desig { color: var(--muted); font-weight: 400; }
[data-cd-root] .circ-detail-author-time { font-size: 11px; color: var(--muted); }
[data-cd-root] .circ-detail-recipients {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--muted);
    background: #f9fafb;
    padding: 6px 10px; border-radius: 999px;
}
[data-cd-root] .circ-detail-audience-tag { color: var(--ink); font-weight: 600; }
[data-cd-root] .circ-detail-audience-count { color: var(--muted); }

/* Body: inside the scroll wrapper, no inner overflow. */
[data-cd-root] .circular-modal-body { padding: 0 !important; overflow: visible !important; }
[data-cd-root] .circ-detail-body {
    padding: 28px 32px 24px !important;
    font-size: 14px !important; line-height: 1.7 !important;
    color: #1f2937 !important;
    white-space: pre-wrap; word-wrap: break-word;
}

/* Attachment tiles — visually separated from description above. */
[data-cd-root] .circ-detail-attach {
    padding: 22px 32px 24px;
    border-top: 1px solid var(--border);
}
[data-cd-root] .circ-detail-attach h4 {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted); font-weight: 600; margin: 0 0 14px;
    display: flex; align-items: center; gap: 6px;
}
[data-cd-root] .circ-detail-attach-count { color: var(--muted); font-weight: 400; }
[data-cd-root] .circ-detail-attach ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
[data-cd-root] .circ-attach-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: #fff; border: 1px solid var(--border); border-radius: 10px;
    transition: border-color 0.12s ease, background 0.12s ease;
}
[data-cd-root] .circ-attach-row:hover { border-color: var(--accent); background: #fbfaff; }
[data-cd-root] .circ-attach-icon {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
}
[data-cd-root] .circ-attach-info { flex: 1 1 auto; min-width: 0; }
[data-cd-root] .circ-attach-name {
    display: block; color: var(--ink); font-size: 13px; font-weight: 500;
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-cd-root] .circ-attach-name:hover { color: var(--accent); text-decoration: underline; }
[data-cd-root] .circ-attach-sub {
    font-size: 11px; color: var(--muted);
    display: block; margin-top: 2px;
}
[data-cd-root] .circ-attach-download {
    flex: 0 0 auto; width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted); background: transparent; border-radius: 8px;
}
[data-cd-root] .circ-attach-download:hover { color: var(--accent); background: var(--accent-soft); }

/* "You read this at..." pill */
[data-cd-root] .circ-detail-footer {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0 32px 28px;
    padding: 8px 14px;
    background: #f0fdf4; color: #166534;
    border-radius: 999px;
    font-size: 12px;
}

/* Delivery report — no local scroll; the outer modal body handles overflow
   so we don't get a scrollbar-in-a-scrollbar on long recipient lists. */
[data-cd-root] .circ-delivery-panel {
    background: #f8fafc;
    border-top: 1px solid var(--border);
    padding: 26px 32px 32px !important;
    max-height: none !important;
    overflow: visible !important;
}
[data-cd-root] .circ-delivery-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
[data-cd-root] .circ-delivery-head h4 {
    margin: 0 0 4px; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted); font-weight: 600;
}
[data-cd-root] .circ-delivery-stats { font-size: 14px; color: var(--ink); font-weight: 500; }
[data-cd-root] .circ-delivery-stats strong { color: var(--ink); font-size: 18px; font-weight: 700; margin-right: 2px; }
[data-cd-root] .circ-delivery-bar {
    position: relative;
    width: 100%; height: 8px;
    background: #e2e8f0;
    border-radius: 999px; overflow: hidden;
    margin-bottom: 22px;
}
[data-cd-root] .circ-delivery-bar-fill {
    height: 100%;
    background: #14a1db;
    border-radius: 999px;
    transition: width 0.4s ease;
    /* Tiny min-width so "0% seen" still shows a visible starter dot on the
       left edge of the track — otherwise the bar reads as missing UI. */
    min-width: 6px;
}
[data-cd-root] .circ-delivery-note {
    font-size: 11px; color: var(--muted);
    margin-bottom: 10px; font-style: italic;
}
[data-cd-root] .circ-delivery-cols {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
@media (max-width: 620px) {
    [data-cd-root] .circ-delivery-cols { grid-template-columns: 1fr; }
}
[data-cd-root] .circ-delivery-col h5 {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--muted); font-weight: 700; margin: 0 0 10px;
    display: flex; align-items: center; gap: 6px;
}
[data-cd-root] .circ-delivery-col-count {
    background: #fff; border: 1px solid var(--border); border-radius: 10px;
    padding: 1px 7px; font-size: 10px; color: var(--ink);
}
[data-cd-root] .circ-delivery-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 4px;
    /* No inner max-height — the outer .circular-modal-scroll is the only
       scroll container, so long recipient lists push the card to scroll
       naturally rather than creating a nested inner scrollbar. */
    max-height: none !important;
    overflow: visible !important;
}
[data-cd-root] .circ-delivery-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: #fff; border: 1px solid var(--border);
    border-radius: 10px; font-size: 13px;
    transition: border-color 0.12s ease;
}
[data-cd-root] .circ-delivery-row:hover { border-color: #cbd5e1; }
[data-cd-root] .circ-delivery-avatar {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600;
}
[data-cd-root] .circ-delivery-row-main { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
[data-cd-root] .circ-delivery-name {
    color: var(--ink); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-cd-root] .circ-delivery-sub {
    font-size: 10px; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-cd-root] .circ-delivery-time {
    flex: 0 0 auto; font-size: 10px; color: var(--muted); white-space: nowrap;
}
[data-cd-root] .circ-delivery-empty {
    display: flex; align-items: center; gap: 12px;
    padding: 24px 20px;
    min-height: 64px;
    background: #fff; border: 1px dashed #cbd5e1;
    border-radius: 10px;
    color: var(--muted); font-size: 13px;
    line-height: 1.4;
}
[data-cd-root] .circ-delivery-empty svg { color: var(--muted); flex: 0 0 auto; }
[data-cd-root] .circ-delivery-empty-ok {
    background: #f0fdf4; border-color: #bbf7d0; color: #166534;
}
[data-cd-root] .circ-delivery-empty-ok svg { color: #10b981; }

[data-cd-root] *:focus { outline: none; }
[data-cd-root] *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

[data-circulars-root] h2:focus,
[data-circulars-root] h3:focus { outline: none; }
[data-circulars-root] .circulars-title,
[data-circulars-root] .circulars-title:focus,
[data-circulars-root] .circulars-title:focus-visible { outline: none; }

[data-circulars-root] input[type="radio"] { accent-color: var(--accent); }

[data-circulars-root] .circulars-filter-radio {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
    white-space: nowrap !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    color: var(--ink) !important;
    cursor: pointer !important;
    width: 100%;
}
[data-circulars-root] .circulars-filter-radio > input[type="radio"] {
    flex: 0 0 auto !important;
    margin: 0 !important;
    width: 14px; height: 14px;
}
[data-circulars-root] .circulars-filter-radio .circulars-filter-text {
    flex: 1 1 auto !important;
    text-align: left !important;
}
[data-circulars-root] .circulars-filter-radio:hover { background: #dcf1fb; }
[data-circulars-root] .circulars-filter-radio:has(input:checked) {
    background: var(--accent-soft);
    color: #3730a3;
    font-weight: 600;
}
[data-circulars-root] .circulars-filter-count {
    flex: 0 0 auto !important;
    background: var(--hr-red); color: #fff;
    font-size: 10px; padding: 1px 6px; border-radius: 8px;
    min-width: 16px; text-align: center;
}
[data-circulars-root] .circulars-filter-count[hidden] { display: none !important; }

/* Sidebar dims when there are no circulars (filter has no effect) */
[data-circulars-root][data-empty="1"] .circulars-sidebar { opacity: 0.5; pointer-events: none; }

/* Keep the legacy rules below too, for anything that extends the section outside this root */
/* ══════════════════════════════════════════════════════════════════ */

.circulars-section { padding: 18px 20px 24px; }

.circulars-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.circulars-title-row { display: flex; align-items: center; gap: 10px; }
.circulars-title-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: var(--accent-soft); color: var(--accent);
    border-radius: 8px; flex-shrink: 0;
}
.circulars-title-icon svg { width: 18px; height: 18px; }
.circulars-title { font-size: 20px; font-weight: 700; margin: 0; color: var(--ink); }
.circulars-subtitle { font-size: 12px; color: var(--muted); margin: 4px 0 0 42px; }

.circulars-create-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--accent); color: #fff; border: none;
    padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.circulars-create-btn:hover { background: #1276c2; }

.circulars-layout { display: grid; grid-template-columns: 210px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .circulars-layout { grid-template-columns: 1fr; } }

.circulars-sidebar {
    background: var(--hr-card-bg); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 10px;
}
.circulars-filter-group { display: flex; flex-direction: column; gap: 6px; }
.circulars-filter-label {
    font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.circulars-filter-radio {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 6px;
    white-space: nowrap;
    text-align: left;
}
.circulars-filter-radio > input[type="radio"] { flex-shrink: 0; margin: 0; }
.circulars-filter-radio .circulars-filter-text { flex: 1 1 auto; }
.circulars-filter-radio:hover { background: #dcf1fb; }
.circulars-filter-radio:has(input:checked) { background: var(--accent-soft); color: #3730a3; font-weight: 600; }
.circulars-filter-count {
    flex-shrink: 0;
    background: var(--hr-red); color: #fff;
    font-size: 10px; padding: 1px 6px; border-radius: 8px;
    min-width: 16px; text-align: center;
}
.circulars-filter-count[hidden] { display: none; }
.circulars-sidebar input[type="search"] {
    border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 13px; background: #fff;
}

.circulars-main { min-height: 200px; }
.circulars-list { display: flex; flex-direction: column; gap: 8px; }
.circulars-empty {
    text-align: center; padding: 56px 20px 48px; color: var(--muted);
    background: #fff; border: 1px dashed var(--border); border-radius: 12px;
}
.circulars-empty-icon {
    width: 56px; height: 56px; margin: 0 auto 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
    border-radius: 50%;
}
.circulars-empty-icon svg { width: 26px; height: 26px; }
.circulars-empty h3 { color: var(--ink); font-size: 16px; margin: 0 0 6px; font-weight: 600; }
.circulars-empty p { margin: 0 0 16px; font-size: 13px; line-height: 1.5; }
.circulars-empty .circulars-create-btn { margin-top: 4px; }
.circulars-loading, .circulars-error { padding: 20px; color: var(--muted); font-size: 13px; }
.circulars-error { color: var(--hr-red); }

.circ-card {
    position: relative; background: #fff; border: 1px solid var(--border); border-left-width: 3px;
    border-radius: 8px; padding: 12px 14px 12px 18px; cursor: pointer;
    transition: box-shadow .15s ease;
}
.circ-card:hover { box-shadow: 0 2px 8px rgba(20, 161, 219,0.08); }
.circ-card.is-unread { border-left-color: var(--accent); background: #fbfaff; }
.circ-card.is-important { border-left-color: var(--hr-red); }
.circ-card-dot {
    position: absolute; left: 6px; top: 14px;
    width: 6px; height: 6px; border-radius: 50%; background: transparent;
}
.circ-card.is-unread .circ-card-dot { background: var(--accent); }
.circ-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.circ-card-title { font-size: 14px; font-weight: 600; margin: 0; color: var(--ink); }
.circ-card-meta {
    display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--muted); margin-bottom: 6px;
}
.circ-card-preview {
    font-size: 13px; color: #374151; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.circ-card-footer { margin-top: 6px; font-size: 11px; color: var(--muted); }

.circ-pill {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.04em; background: #e0e7ff; color: #3730a3;
}
.circ-pill-important { background: var(--hr-red); color: #fff; }
.circ-pill-audience { background: var(--accent-soft); color: #4338ca; }

/* Detail modal */
.circular-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.circular-modal.hidden { display: none; }
.circular-modal-backdrop { position: absolute; inset: 0; background: rgba(17,24,39,0.55); }
.circular-modal-card {
    position: relative; background: #fff; border-radius: 12px;
    max-width: 720px; width: 100%; max-height: 90vh;
    display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,0.15); overflow: hidden;
}
.circular-modal-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 18px 20px 12px; border-bottom: 1px solid var(--border);
}
.circular-modal-head-content { flex: 1; }
.circular-modal-head h2 { font-size: 18px; margin: 8px 0 4px; color: var(--ink); }
.circ-detail-sub { font-size: 12px; color: var(--muted); line-height: 1.5; }
.circular-modal-close { background: transparent; border: none; cursor: pointer; padding: 6px; border-radius: 6px; color: var(--muted); }
.circular-modal-close:hover { background: var(--accent-soft); color: var(--ink); }
.circular-modal-body { padding: 16px 20px; overflow-y: auto; flex: 1; font-size: 14px; line-height: 1.6; color: #1f2937; }
.circ-detail-body { white-space: pre-wrap; word-wrap: break-word; }
.circ-detail-attach { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.circ-detail-attach h4 { font-size: 13px; margin: 0 0 8px; color: var(--ink); }
.circ-detail-attach ul { list-style: none; padding: 0; margin: 0; }
.circ-attach-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; }
.circ-attach-row a { color: var(--accent); text-decoration: none; flex: 1; }
.circ-attach-row a:hover { text-decoration: underline; }
.circ-attach-size { font-size: 11px; color: var(--muted); }
.circ-detail-footer {
    margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border);
    font-size: 11px; color: var(--muted);
}

.circ-delivery-panel {
    background: #f9fafb; border-top: 1px solid var(--border);
    padding: 14px 20px; max-height: 280px; overflow-y: auto;
}
.circ-delivery-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; color: var(--ink); }
.circ-delivery-note { font-size: 11px; color: var(--muted); margin-bottom: 6px; font-style: italic; }
.circ-delivery-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: 12px; }
.circ-delivery-cols h5 {
    font-size: 12px; margin: 0 0 6px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.circ-delivery-cols ul { list-style: none; padding: 0; margin: 0; }
.circ-delivery-cols li { padding: 3px 0; border-bottom: 1px dashed #e5e7eb; color: #374151; }
.circ-delivery-time { float: right; color: var(--muted); font-size: 10px; }

/* Create dialog */
.circular-create-panel {
    max-width: 640px; width: 92%; padding: 0; border: none; border-radius: 12px;
    background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,0.2); max-height: 92vh;
}
.circular-create-panel::backdrop { background: rgba(17,24,39,0.55); }
.circular-create-panel.hidden { display: none; }
.circular-create-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: #fff; z-index: 2;
}
.circular-create-head h4 { margin: 0; font-size: 16px; color: var(--ink); }
.circular-create-close { background: transparent; border: none; cursor: pointer; padding: 6px; border-radius: 6px; color: var(--muted); }
.circular-create-close:hover { background: var(--accent-soft); color: var(--ink); }
.circular-create-form { padding: 16px 20px 20px; overflow-y: auto; max-height: calc(92vh - 54px); }

.cc-section { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px dashed var(--border); }
.cc-section:last-of-type { border-bottom: none; }
.cc-section-title { font-size: 13px; font-weight: 600; margin: 0 0 8px; color: var(--ink); }
.cc-section-desc { font-size: 12px; color: var(--muted); margin: 0 0 10px; }

.cc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cc-field > span { font-size: 12px; font-weight: 600; color: var(--ink); }
.cc-field input[type="text"], .cc-field textarea, .cc-subfield input[type="search"] {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 14px; font-family: inherit; background: #fff;
}
.cc-field textarea { resize: vertical; min-height: 110px; }

.cc-priority { display: flex; gap: 16px; font-size: 13px; }
.cc-priority label { cursor: pointer; }

.cc-attachments { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-attach-btn {
    border: 1px dashed var(--border); background: #fff; color: var(--accent);
    padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600;
}
.cc-attach-hint { font-size: 11px; color: var(--muted); }
.cc-attachment-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.cc-attach-item {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 10px; background: var(--hr-card-bg); border-radius: 6px; font-size: 12px;
}
.cc-attach-name { flex: 1; color: var(--ink); }
.cc-attach-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; padding: 0 4px; }
.cc-attach-remove:hover { color: var(--hr-red); }

.cc-scope-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.cc-scope-option {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
    cursor: pointer; font-size: 13px; background: #fff;
}
.cc-scope-option:hover { background: var(--accent-soft); }
.cc-scope-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.cc-scope-disabled { opacity: 0.45; cursor: not-allowed; }

.cc-subfield {
    margin: 8px 0 12px; padding: 10px;
    background: var(--hr-card-bg); border: 1px solid var(--border); border-radius: 6px;
    display: flex; flex-direction: column; gap: 8px;
}
.cc-dept-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-dept-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; background: #fff; border: 1px solid var(--border);
    border-radius: 14px; font-size: 12px; cursor: pointer;
}
.cc-dept-chip:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: #3730a3; }
.cc-hint { font-size: 11px; color: var(--muted); margin: 0; }

.cc-user-picker {
    background: #fff; border: 1px solid var(--border); border-radius: 6px;
    max-height: 200px; overflow-y: auto; margin-top: 2px;
}
.cc-user-suggest {
    display: block; width: 100%; text-align: left;
    padding: 6px 10px; background: #fff; border: none; cursor: pointer; font-size: 13px; color: var(--ink);
}
.cc-user-suggest:hover { background: var(--accent-soft); }
.cc-user-dept { color: var(--muted); font-size: 11px; }
.cc-user-empty { padding: 8px 10px; font-size: 12px; color: var(--muted); }

.cc-selected-users { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cc-selected-user {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 6px 3px 10px; background: #fff; border: 1px solid var(--border);
    border-radius: 12px; font-size: 12px;
}
.cc-user-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 2px; }

.cc-extra-users { margin-top: 6px; }
.cc-extra-users-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.cc-linklike { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12px; padding: 0; }

.cc-include-author {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px; font-size: 13px;
}

.cc-reach {
    margin-top: 12px; padding: 10px 12px;
    background: var(--accent-soft); border-radius: 6px;
    font-size: 13px; color: #3730a3;
}
.cc-reach strong { color: var(--ink); }
.cc-reach-dropped { display: block; margin-top: 4px; font-size: 11px; color: var(--hr-orange); }

.cc-delivery-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
.cc-muted { color: var(--muted); font-size: 11px; }

.cc-error-banner {
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
    padding: 8px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 12px;
}

.cc-confirm-banner {
    background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12;
    padding: 12px 14px; border-radius: 8px; margin: 12px 0;
    display: flex; flex-direction: column; gap: 8px;
}
.cc-confirm-banner.cc-confirm-important {
    background: #fef2f2; border-color: #fecaca; color: #7f1d1d;
}
.cc-confirm-banner.hidden { display: none; }
.cc-confirm-head { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.cc-confirm-body { font-size: 13px; line-height: 1.5; }
.cc-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Modern browsers apply the :has() highlight in the rules above. Old browsers
   (Firefox <121, Chrome <105) simply show no extra highlight on the selected
   scope/department — the underlying radio stays visually checked so the form
   is still usable without the enhancement. */

.circular-create-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding-top: 10px; border-top: 1px solid var(--border); margin-top: 4px;
}
.cc-btn-cancel {
    background: #fff; color: var(--ink); border: 1px solid var(--border);
    padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.cc-btn-publish {
    background: var(--accent); color: #fff; border: none;
    padding: 8px 18px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.cc-btn-publish:hover { background: #1276c2; }
.cc-btn-publish:disabled { opacity: 0.6; cursor: not-allowed; }

/* Pinned Announcements row in chat list */
.chat-pinned-circulars {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: var(--accent-soft);
    border-bottom: 1px solid var(--border); cursor: pointer;
}
.chat-pinned-circulars:hover { background: #c9e9f7; }
.chat-pinned-circulars-icon {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.chat-pinned-circulars-body { flex: 1; }
.chat-pinned-circulars-title { font-weight: 600; font-size: 14px; color: var(--ink); }
.chat-pinned-circulars-sub { font-size: 11px; color: var(--muted); }
.chat-pinned-circulars-unread {
    background: var(--hr-red); color: #fff; font-size: 10px;
    padding: 1px 8px; border-radius: 10px; font-weight: 600;
}

.mobile-bottom-badge {
    position: absolute; top: 2px; right: 18%;
    background: var(--hr-red); color: #fff;
    font-size: 9px; padding: 1px 5px; border-radius: 8px;
    min-width: 14px; text-align: center; font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Profile v2 — Compact hero + Rich bento (Option 1)
 * Scoped under .profile-v2 so it coexists with legacy .profile-* styles.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Hide entire top bar on profile page — hero is self-contained.
 * Two layers: data-attribute (set by setActiveSection JS) + :has()
 * selector (works purely from DOM, no JS needed). Either fires → hidden. */
body[data-active-section="profile"] .topbar,
body:has(article.profile-v2:not(.hidden)) .topbar { display: none !important; }

.profile-v2 {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0.2rem 0.1rem;
}

/* ── Compact Hero ──────────────────────────────────────────────────────── */
.pv2-hero {
    position: relative;
    isolation: isolate;
    border-radius: 22px;
    padding: 1.1rem 1.5rem;
    margin-bottom: 1rem;
    /* Matches left sidebar gradient for visual continuity */
    background: #0e7bb0;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 20px 45px -20px rgba(8, 78, 115, 0.5), 0 8px 18px -8px rgba(10, 94, 136, 0.3);
}
.pv2-hero-mesh {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(500px circle at 8% 0%, rgba(169, 220, 241, 0.35), transparent 50%),
        radial-gradient(420px circle at 95% 100%, rgba(20, 161, 219, 0.25), transparent 55%);
    pointer-events: none;
}
.pv2-hero-inner {
    position: relative; z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.pv2-hero-idblock {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    flex: 1 1 auto;
}
.pv2-hero-avatar-ring {
    position: relative;
    flex-shrink: 0;
    padding: 3px;
    border-radius: 50%;
    background: conic-gradient(from 210deg, rgba(255,255,255,0.5), rgba(255,255,255,0.05) 120deg, rgba(255,255,255,0.5) 280deg);
}
.pv2-hero-avatar.profile-summary-avatar {
    width: 76px;
    height: 76px;
    font-size: 2rem;
    font-weight: 800;
    border: 0;
    box-shadow: 0 14px 28px rgba(13, 10, 40, 0.4);
    background-image: #1e1b4b;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #fff;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    letter-spacing: -0.02em;
    overflow: hidden;
}
.pv2-hero-avatar-edit {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    color: #084e73;
    border: 2px solid #084e73;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, background 0.2s ease;
    z-index: 2;
}
.pv2-hero-avatar-edit:hover { transform: scale(1.1); background: #eef8fd; }
.pv2-hero-status {
    position: absolute; top: 4px; right: 4px;
    width: 14px; height: 14px;
    background: #34d399;
    border: 2.5px solid #084e73;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.3);
}
.pv2-hero-text { min-width: 0; flex: 1; }
.pv2-hero-name {
    margin: 0 0 0.28rem;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #fff;
}
/* Nuke any stray paint around the name — browser focus, inherited border,
 * autofill highlight, tap-highlight etc. Scoped tightly to hero text only. */
.pv2-hero-text,
.pv2-hero-name,
.pv2-hero-name span,
#profileSummaryName {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-fill-color: inherit;
}
.pv2-hero-name:focus,
.pv2-hero-name *:focus,
.pv2-hero-text:focus,
.pv2-hero-text *:focus,
.pv2-hero-name:focus-visible,
.pv2-hero-name *:focus-visible { outline: 0 !important; box-shadow: none !important; }
.pv2-hero ::selection,
.pv2-hero *::selection { background: rgba(255, 255, 255, 0.3); color: #fff; }
.pv2-hero-chipline {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    flex-wrap: wrap;
}
.pv2-hero-role {
    background: rgba(255, 255, 255, 0.96);
    color: #084e73;
    padding: 3px 11px;
    border-radius: 9999px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.pv2-hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    max-width: 240px;
}
.pv2-hero-meta svg { opacity: 0.8; flex-shrink: 0; }
.pv2-hero-meta > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pv2-hero-meta[data-empty="true"] { display: none; }

/* Hero stats — flat, minimal */
.pv2-hero-stats {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.pv2-hstat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 92px;
    padding: 0.55rem 0.95rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    transition: background 0.22s ease;
}
.pv2-hstat:hover { background: rgba(255, 255, 255, 0.17); }
.pv2-hstat-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.pv2-hstat-value {
    display: block;
    margin-top: 2px;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.pv2-hstat-accent {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.28), rgba(16, 185, 129, 0.18));
    border-color: rgba(52, 211, 153, 0.4);
}
.pv2-hstat-accent .pv2-hstat-value { color: #a7f3d0; }

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.pv2-tabs {
    display: flex;
    gap: 0.3rem;
    padding: 0.35rem;
    margin-bottom: 1rem;
    background: #ffffff;
    border: 1px solid #dcf1fb;
    border-radius: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    box-shadow: 0 2px 10px rgba(10, 94, 136, 0.04);
}
.pv2-tabs::-webkit-scrollbar { display: none; }
.pv2-tab {
    flex: 1 1 0;
    min-width: 110px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.62rem 0.8rem;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}
.pv2-tab:hover { color: #084e73; background: #eef8fd; }
.pv2-tab.is-active {
    background: #1488c7;
    color: #fff;
    box-shadow: 0 6px 16px rgba(20, 161, 219, 0.3);
}
.pv2-tab-icon { flex-shrink: 0; }

/* ── Panels ───────────────────────────────────────────────────────────── */
.pv2-panel { animation: pv2-panel-in 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.pv2-panel[hidden] { display: none !important; }
@keyframes pv2-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Bento grid (Overview) ────────────────────────────────────────────── */
.pv2-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.9rem;
}

/* ── Generic cards ────────────────────────────────────────────────────── */
.pv2-card {
    background: #ffffff;
    border: 1px solid #dcf1fb;
    border-radius: 18px;
    padding: 1.15rem 1.25rem;
    box-shadow: 0 10px 24px -10px rgba(10, 94, 136, 0.08), 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    display: flex;
    flex-direction: column;
}
.pv2-card:hover {
    box-shadow: 0 16px 34px -12px rgba(10, 94, 136, 0.14), 0 4px 8px rgba(0, 0, 0, 0.03);
}
.pv2-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}
.pv2-card-head > div:first-child { min-width: 0; flex: 1; }
.pv2-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1e1b4b;
    letter-spacing: -0.01em;
}
.pv2-card-sub {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
    line-height: 1.4;
}
.pv2-card-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ic, #4fb8e6) 15%, white);
    color: var(--ic, #1488c7);
    flex-shrink: 0;
}

/* ── Profile Completion card ──────────────────────────────────────────── */
.pv2-gauge-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}
.pv2-gauge {
    position: relative;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
}
.pv2-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pv2-ring-bg { fill: none; stroke: #f1ecff; stroke-width: 3.4; }
.pv2-ring-fg {
    fill: none;
    stroke: url(#pv2RingGrad);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-dasharray: 100, 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.pv2-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
}
.pv2-ring-label strong {
    font-size: 1.25rem;
    font-weight: 800;
    color: #084e73;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pv2-ring-label span {
    font-size: 0.56rem;
    color: #6b7280;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 4px;
}
.pv2-missing-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}
.pv2-missing-list li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    color: #4b5563;
    padding: 5px 10px;
    background: #faf9ff;
    border: 1px solid #dcf1fb;
    border-radius: 10px;
    transition: background 0.2s ease;
    cursor: pointer;
}
.pv2-missing-list li:hover { background: #eef8fd; border-color: #c9e9f7; }
.pv2-missing-list li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
}
.pv2-missing-list .pv2-missing-done {
    color: #14532d;
    background: #d1fae5;
    border-color: #86efac;
    cursor: default;
    font-weight: 600;
    justify-content: center;
}
.pv2-missing-list .pv2-missing-done::before {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* ── Quick Actions ────────────────────────────────────────────────────── */
.pv2-qa-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
    flex: 1;
}
.pv2-qa-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0.85rem 0.5rem;
    background: #f4f8fb;
    border: 1px solid #dcf1fb;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
    min-height: 76px;
}
.pv2-qa-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 20px -8px rgba(10, 94, 136, 0.2);
    border-color: #a9dcf1;
    background: linear-gradient(180deg, #fff, #eef8fd);
}
.pv2-qa-ic {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ic, #1488c7) 16%, white);
    color: var(--ic, #1488c7);
    flex-shrink: 0;
}
.pv2-qa-lbl {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e1b4b;
    letter-spacing: -0.01em;
}

/* ── Recent Activity Timeline ─────────────────────────────────────────── */
.pv2-card-activity .pv2-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
    max-height: 180px;
    overflow-y: auto;
    padding-right: 4px;
}
.pv2-timeline::-webkit-scrollbar { width: 4px; }
.pv2-timeline::-webkit-scrollbar-thumb { background: #c9e9f7; border-radius: 2px; }
.pv2-tl-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #dcf1fb;
    border-radius: 12px;
    background: #faf9ff;
    transition: background 0.22s ease, border-color 0.22s ease;
}
.pv2-tl-item:hover { background: #eef8fd; border-color: #c9e9f7; }
.pv2-tl-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.pv2-tl-dot.pv2-tl-dot-submitted { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }
.pv2-tl-dot.pv2-tl-dot-pending { background: #14a1db; box-shadow: 0 0 0 3px rgba(20, 161, 219, 0.2); }
.pv2-tl-body { min-width: 0; flex: 1; }
.pv2-tl-title {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e1b4b;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pv2-tl-meta {
    display: block;
    margin-top: 2px;
    font-size: 0.7rem;
    color: #6b7280;
    font-weight: 500;
}
.pv2-tl-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    color: #9ca3af;
    font-size: 0.85rem;
    font-style: italic;
    flex-direction: column;
    gap: 8px;
}
.pv2-tl-empty svg { opacity: 0.4; }

/* ── Work Breakdown tiles ─────────────────────────────────────────────── */
.pv2-work-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0.55rem;
}
.pv2-wkpi {
    position: relative;
    padding: 0.75rem 0.8rem;
    border-radius: 12px;
    background: #f4f8fb;
    border: 1px solid #dcf1fb;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    min-width: 0;
}
.pv2-wkpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -5px rgba(10, 94, 136, 0.12);
    border-color: #c9e9f7;
}
.pv2-wkpi-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pv2-wkpi strong {
    display: block;
    margin-top: 4px;
    font-size: 1.3rem;
    font-weight: 800;
    color: #1e1b4b;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.02em;
}
.pv2-wkpi-total           { background: #dcf1fb; border-color: #a9dcf1; }
.pv2-wkpi-total strong    { color: #0a5e88; }
.pv2-wkpi-managed strong  { color: #0e7bb0; }
.pv2-wkpi-completed       { background: #d1fae5; border-color: #86efac; }
.pv2-wkpi-completed strong{ color: #14532d; }
.pv2-wkpi-pending         { background: #fef3c7; border-color: #fcd34d; }
.pv2-wkpi-pending strong  { color: #92400e; }
.pv2-wkpi-ontime strong   { color: #1d6f3b; }
.pv2-wkpi-ext1 strong     { color: #8b6914; }
.pv2-wkpi-ext2 strong     { color: #b45309; }
.pv2-wkpi-ext3 strong     { color: #a8323d; }
.pv2-wkpi-failed strong   { color: #6b7280; }

/* ── Personal / Professional form styling ────────────────────────────── */
.profile-v2 .pv2-card .profile-grid-two input,
.profile-v2 .pv2-card .profile-grid-two select,
.profile-v2 .pv2-card .profile-grid-two textarea,
.profile-v2 .pv2-card .profile-grid-single input {
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid #e2e1f4;
    background: #fdfcff;
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.profile-v2 .pv2-card .profile-grid-two input:focus,
.profile-v2 .pv2-card .profile-grid-two select:focus,
.profile-v2 .pv2-card .profile-grid-two textarea:focus,
.profile-v2 .pv2-card .profile-grid-single input:focus {
    outline: none;
    border-color: #4fb8e6;
    box-shadow: 0 0 0 3px rgba(169, 220, 241, 0.18);
    background: #fff;
}
.profile-v2 .pv2-card label {
    display: block;
    font-size: 0.73rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 5px;
}
.profile-v2 .pv2-card .profile-subsection-title {
    font-size: 0.76rem;
    font-weight: 700;
    color: #0a5e88;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0.95rem 0 0.5rem;
    padding-top: 0.7rem;
    border-top: 1px dashed #dcf1fb;
}
.profile-v2 .pv2-card .profile-subsection-title:first-of-type {
    border-top: none; padding-top: 0; margin-top: 0;
}
.profile-v2 .pv2-card input:disabled,
.profile-v2 .pv2-card select:disabled,
.profile-v2 .pv2-card textarea:disabled,
.profile-v2 .pv2-card .muted-input {
    background: #eef8fd;
    color: #084e73;
    cursor: not-allowed;
    opacity: 0.85;
}
.pv2-same-addr-row {
    margin-top: 0.8rem;
    padding: 0.6rem 0.8rem;
    background: #faf9ff;
    border: 1px dashed #c9e9f7;
    border-radius: 11px;
}
.pv2-same-addr-row .profile-toggle-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: #084e73;
    margin: 0;
    cursor: pointer;
}
.pv2-same-addr-row .profile-toggle-check input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: #1488c7;
    margin: 0;
}
.pv2-permanent-block { margin-top: 0.8rem; }
.pv2-subcard-title {
    margin: 0 0 0.5rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: #084e73;
    letter-spacing: -0.01em;
}
.pv2-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.42rem 0.85rem;
    background: #dcf1fb;
    color: #0a5e88;
    border: 1px solid #a9dcf1;
    border-radius: 10px;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
    align-self: flex-start;
}
.pv2-add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(10, 94, 136, 0.18);
}
.profile-v2 .pv2-card .profile-hr-managed-section {
    background: #eef8fd;
    border: 1px solid #c9e9f7;
    border-radius: 13px;
    padding: 0.85rem 0.95rem;
    margin-bottom: 0.7rem;
}
.profile-v2 .pv2-card .profile-hr-managed-fields-header {
    font-size: 0.64rem;
    font-weight: 700;
    color: #1488c7;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    display: inline-flex; align-items: center; gap: 5px;
}
.profile-v2 .pv2-card .profile-hr-managed-fields-header::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: #1488c7;
    display: inline-block;
}
.profile-v2 .profile-hr-managed-banner {
    margin-bottom: 1rem;
    background: #fff6e0;
    border: 1px solid #fcd34d;
    border-radius: 12px;
    padding: 0.7rem 0.95rem;
    color: #78350f;
    font-size: 0.82rem;
    font-weight: 500;
    display: flex; align-items: center; gap: 0.6rem;
}

/* ── Personal / Professional multi-card spacing ──────────────────────── */
.pv2-panel[data-pv2panel="personal"] .pv2-card,
.pv2-panel[data-pv2panel="professional"] .pv2-card { margin-bottom: 1rem; }
.pv2-panel[data-pv2panel="personal"] .pv2-card:last-child,
.pv2-panel[data-pv2panel="professional"] .pv2-card:last-child { margin-bottom: 0; }

/* ── Sticky Save Bar ──────────────────────────────────────────────────── */
.pv2-save-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 0.7rem 1rem;
    margin-top: 1rem;
    position: sticky;
    bottom: 0.6rem;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #dcf1fb;
    border-radius: 14px;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.04), 0 10px 26px rgba(10, 94, 136, 0.08);
    backdrop-filter: blur(6px);
    z-index: 5;
}
.pv2-save-meta { flex: 1; min-width: 0; }
.pv2-save-meta .profile-save-feedback { margin: 0; }
.pv2-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #1488c7;
    color: #fff;
    border: none;
    border-radius: 11px;
    padding: 0.62rem 1.25rem;
    font-weight: 600;
    font-size: 0.86rem;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    box-shadow: 0 8px 20px rgba(20, 161, 219, 0.28);
    white-space: nowrap;
}
.pv2-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(20, 161, 219, 0.38); filter: brightness(1.05); }
.pv2-btn-primary:active { transform: translateY(0); }
.pv2-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.pv2-form[data-pv2-active="overview"] .pv2-save-bar,
.pv2-form[data-pv2-active="security"] .pv2-save-bar,
.pv2-form[data-pv2-active="preferences"] .pv2-save-bar { display: none; }

/* ── Security panel ───────────────────────────────────────────────────── */
.pv2-security-grid {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 1rem;
    align-items: start;
}
.pv2-tips {
    margin: 0;
    padding-left: 1.15rem;
    color: #4b5563;
    font-size: 0.84rem;
    line-height: 1.6;
}
.pv2-tips li { margin: 4px 0; }
.pv2-card-password .profile-save-feedback { margin-top: 0.7rem; }
.pv2-inline-action {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.85rem;
}

/* ── Preferences panel ────────────────────────────────────────────────── */
.pv2-pref-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .pv2-bento > .pv2-card-completion { grid-column: span 6 !important; }
    .pv2-bento > .pv2-card-actions    { grid-column: span 6 !important; }
    .pv2-bento > .pv2-card-activity   { grid-column: span 12 !important; }
    .pv2-work-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 900px) {
    .pv2-hero { padding: 1rem 1.2rem; }
    .pv2-hero-inner { gap: 1rem; }
    .pv2-hero-stats { width: 100%; }
    .pv2-hstat { flex: 1; min-width: 0; }
    .pv2-bento > .pv2-card-completion,
    .pv2-bento > .pv2-card-actions { grid-column: span 12 !important; }
    .pv2-security-grid, .pv2-pref-grid { grid-template-columns: 1fr; }
    .pv2-work-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .pv2-hero { padding: 0.9rem 1rem; border-radius: 18px; }
    .pv2-hero-idblock { gap: 0.75rem; }
    .pv2-hero-avatar.profile-summary-avatar { width: 62px; height: 62px; font-size: 1.6rem; }
    .pv2-hero-name { font-size: 1.3rem; }
    .pv2-hero-meta { max-width: 140px; }
    .pv2-hero-stats { gap: 0.35rem; }
    .pv2-hstat { padding: 0.5rem 0.65rem; min-width: 0; }
    .pv2-hstat-value { font-size: 1.1rem; }
    .pv2-work-grid { grid-template-columns: repeat(2, 1fr); }
    .pv2-qa-grid { grid-template-columns: repeat(4, 1fr); }
    .pv2-tabs { padding: 0.3rem; gap: 0.2rem; }
    .pv2-tab { min-width: auto; padding: 0.55rem 0.5rem; gap: 0.3rem; }
    .pv2-tab span { display: none; }
    .pv2-tab-icon { width: 18px; height: 18px; }
    .pv2-card { padding: 0.95rem 1rem; border-radius: 14px; }
    .profile-v2 .pv2-card .profile-grid-two { grid-template-columns: 1fr; }
    .pv2-save-bar { padding: 0.55rem 0.8rem; }
    .pv2-gauge-wrap { flex-direction: column; align-items: stretch; text-align: center; }
    .pv2-gauge { align-self: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * Dashboard Search Result — Ethereal-style right-rail layout (ov2)
 * Fires only when dashboard is mirroring another staff (search mode).
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Search-mode split layout inside #performanceInsights ─────────────── */
/* Two columns: LEFT (main, 2fr) = Delegated + Activity;
 *             RIGHT (rail, 1fr) = Profile Card + Workload Snapshot.
 * KPI cards stay above, Subtasks and Tasks Registry stay below as full-width
 * siblings. Rail is sticky so it stays visible while you scroll the page. */
.ov2-split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: flex-start;
}
.ov2-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
.ov2-rail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    position: sticky;
    top: 1rem;
}

/* Left-column main-stack wrapper (legacy, kept for safety) */
.ov2-main-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* ── Shared card primitive ─────────────────────────────────────────────── */
.ov2-card {
    background: #ffffff;
    border: 1px solid #dcf1fb;
    border-radius: 20px;
    padding: 1.3rem 1.4rem;
    box-shadow: 0 20px 45px -18px rgba(10, 94, 136, 0.1), 0 2px 6px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ov2-card:hover { box-shadow: 0 24px 50px -18px rgba(10, 94, 136, 0.16), 0 4px 8px rgba(0, 0, 0, 0.03); }
.ov2-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.ov2-card-head > div:first-child { min-width: 0; flex: 1; }
.ov2-card-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: #1e1b4b;
    letter-spacing: -0.01em;
}
.ov2-card-sub {
    margin: 3px 0 0;
    font-size: 0.76rem;
    color: #6b7280;
    font-weight: 500;
    line-height: 1.4;
}
.ov2-card-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: #1488c7;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease, gap 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ov2-card-link:hover { color: #0a5e88; gap: 8px; }
.ov2-card-icon {
    width: 36px; height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ic, #1488c7) 16%, white);
    color: var(--ic, #1488c7);
    flex-shrink: 0;
}

/* ── Delegated tiles ───────────────────────────────────────────────────── */
.ov2-deleg-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}
.ov2-deleg-tile {
    padding: 1.05rem 1.1rem 0.95rem;
    background: #f4f8fb;
    border: 1px solid #dcf1fb;
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ov2-deleg-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(10, 94, 136, 0.18);
    border-color: #a9dcf1;
}
.ov2-deleg-ic {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ic, #1488c7) 16%, white);
    color: var(--ic, #1488c7);
    margin-bottom: 6px;
}
.ov2-deleg-lbl {
    font-size: 0.7rem;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ov2-deleg-num {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1e1b4b;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.02em;
}
.ov2-deleg-sub {
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 500;
}

/* ── Tasks Authored hero (single-metric layout, no KPI duplication) ───── */
.ov2-authored-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.4rem;
    align-items: center;
    padding: 0.75rem 0 0.25rem;
}
.ov2-authored-num {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 1.4rem;
    border-right: 1px dashed #dcf1fb;
    min-width: 118px;
}
.ov2-authored-num strong {
    font-size: 3rem;
    font-weight: 800;
    color: #084e73;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}
.ov2-authored-num span {
    font-size: 0.66rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ov2-authored-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}
.ov2-authored-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    background: #faf9ff;
    border: 1px solid #dcf1fb;
    border-radius: 12px;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.ov2-authored-row:hover { background: #eef8fd; border-color: #c9e9f7; }
.ov2-authored-bar {
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    flex-shrink: 0;
}
.ov2-authored-lbl {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e1b4b;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ov2-authored-val {
    font-size: 1rem;
    font-weight: 800;
    color: #084e73;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
@media (max-width: 620px) {
    .ov2-authored-hero { grid-template-columns: 1fr; }
    .ov2-authored-num { border-right: 0; border-bottom: 1px dashed #dcf1fb; padding: 0 0 0.75rem; }
    .ov2-authored-num strong { font-size: 2.4rem; }
}

/* ── Activity timeline ────────────────────────────────────────────────── */
.ov2-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}
.ov2-timeline::-webkit-scrollbar { width: 4px; }
.ov2-timeline::-webkit-scrollbar-thumb { background: #c9e9f7; border-radius: 2px; }
.ov2-tl-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #dcf1fb;
    border-radius: 12px;
    background: #faf9ff;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ov2-tl-item:hover {
    background: #eef8fd;
    border-color: #c9e9f7;
    transform: translateX(3px);
}
.ov2-tl-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.ov2-tl-body { min-width: 0; flex: 1; }
.ov2-tl-title {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    color: #1e1b4b;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ov2-tl-meta {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 500;
}

/* ── Profile card (Ethereal-exact) ─────────────────────────────────────── */
.ov2-profile-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 1.85rem 1.65rem 1.5rem;
    box-shadow: 0 40px 80px -25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: box-shadow 0.3s ease;
}
.ov2-profile-card:hover {
    box-shadow: 0 50px 100px -25px rgba(0, 0, 0, 0.18), 0 6px 14px rgba(0, 0, 0, 0.05);
}

/* Avatar with gradient ring + online dot */
.ov2-profile-avatar-wrap {
    position: relative;
    margin-bottom: 1.15rem;
}
.ov2-profile-avatar-ring {
    width: 128px;
    height: 128px;
    padding: 4px;
    border-radius: 50%;
    background: #1488c7;
}
.ov2-profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    background-image: #1e1b4b;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 4px #ffffff, 0 14px 28px rgba(13, 10, 40, 0.25);
    overflow: hidden;
}
.ov2-profile-online {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    background: #10b981;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

/* Name + role + dept */
.ov2-profile-name {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: #1e1b4b;
    letter-spacing: -0.02em;
    line-height: 1.15;
    word-break: break-word;
}
.ov2-profile-role {
    margin: 0 0 0.15rem;
    font-size: 0.66rem;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.ov2-profile-dept {
    margin: 0 0 1.35rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: #084e73;
}

/* Mini stat grid */
.ov2-profile-stats {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-bottom: 1.35rem;
}
.ov2-profile-stat {
    background: #eef8fd;
    border: 1px solid #dcf1fb;
    border-radius: 16px;
    padding: 0.85rem 0.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.ov2-profile-stat:hover {
    background: #dcf1fb;
    border-color: #c9e9f7;
}
.ov2-profile-stat-lbl {
    font-size: 0.62rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ov2-profile-stat-num {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.ov2-num-primary { color: #1488c7; }
.ov2-num-error   { color: #ef4444; }
.ov2-num-muted   { color: #94a3b8; }

/* Circular action buttons */
.ov2-profile-actions {
    display: flex;
    gap: 0.7rem;
    justify-content: center;
    flex-wrap: wrap;
}
.ov2-circle-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #1e1b4b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    padding: 0;
}
.ov2-circle-btn:hover {
    background: #1488c7;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(20, 161, 219, 0.35);
}
.ov2-circle-btn.is-disabled {
    background: #eef8fd;
    color: #cbd5e1;
    cursor: not-allowed;
    pointer-events: none;
}
.ov2-circle-btn-primary {
    background: #1488c7;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(20, 161, 219, 0.32);
}
.ov2-circle-btn-primary:hover {
    background: #4fb8e6;
    box-shadow: 0 12px 26px rgba(20, 161, 219, 0.42);
}

/* ── Success Rate card (hero of the rail) ──────────────────────────────── */
.ov2-priority-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #0e7bb0;
    border-radius: 22px;
    padding: 1.45rem 1.45rem 1.3rem;
    color: #fff;
    box-shadow: 0 28px 60px -22px rgba(8, 78, 115, 0.55), 0 8px 18px -8px rgba(10, 94, 136, 0.35);
}
.ov2-priority-card::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(340px circle at 12% 0%, rgba(169, 220, 241, 0.45), transparent 55%),
        radial-gradient(280px circle at 110% 110%, rgba(56, 189, 248, 0.25), transparent 55%);
    pointer-events: none;
}
.ov2-priority-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.85rem;
}
.ov2-priority-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
}
.ov2-priority-subtitle {
    margin: 4px 0 0;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
}
.ov2-priority-card-compact .ov2-priority-head { align-items: center; }
.ov2-priority-gauge {
    position: relative;
    width: 92px;
    height: 92px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 18px rgba(196, 181, 253, 0.35));
}
.ov2-priority-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ov2-pgauge-bg { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 3.4; }
.ov2-pgauge-fg {
    fill: none;
    stroke: url(#ov2GaugeGrad);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-dasharray: 100, 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.ov2-pgauge-label {
    position: absolute; inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ov2-pgauge-label strong {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    letter-spacing: -0.02em;
}
.ov2-priority-sub {
    margin: 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ov2-priority-tag {
    padding: 3px 11px;
    border-radius: 9999px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.ov2-priority-tag-ok     { background: rgba(52, 211, 153, 0.25); color: #a7f3d0; border: 1px solid rgba(52, 211, 153, 0.45); }
.ov2-priority-tag-warn   { background: rgba(251, 191, 36, 0.25); color: #fde68a; border: 1px solid rgba(251, 191, 36, 0.45); }
.ov2-priority-tag-danger { background: rgba(239, 68, 68, 0.25);  color: #fecaca; border: 1px solid rgba(239, 68, 68, 0.45); }

.ov2-priority-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.ov2-priority-row {
    background: #ffffff;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    transition: box-shadow 0.22s ease, transform 0.22s ease;
    box-shadow: 0 4px 10px rgba(10, 94, 136, 0.04);
}
.ov2-priority-row:hover {
    box-shadow: 0 10px 22px rgba(10, 94, 136, 0.12);
    transform: translateX(3px);
}
.ov2-priority-bar {
    width: 4px;
    height: 36px;
    border-radius: 2px;
    flex-shrink: 0;
}
.ov2-priority-info { min-width: 0; flex: 1; }
.ov2-priority-meta {
    margin: 0;
    font-size: 0.6rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ov2-priority-name {
    margin: 3px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e1b4b;
}
.ov2-priority-row-danger .ov2-priority-name { color: #991b1b; }

/* Empty states */
.ov2-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    min-height: 120px;
    color: #9ca3af;
    font-size: 0.85rem;
    font-style: italic;
    padding: 1rem;
}
.ov2-empty svg { opacity: 0.5; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    /* Collapse split into single column; rail below main content */
    .ov2-split { grid-template-columns: 1fr; }
    .ov2-rail { position: static; display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .ov2-rail { grid-template-columns: 1fr; }
    .ov2-profile-card { padding: 1.5rem 1.2rem 1.25rem; border-radius: 20px; }
    .ov2-profile-avatar-ring { width: 104px; height: 104px; }
    .ov2-profile-avatar { font-size: 2.4rem; }
    .ov2-profile-name { font-size: 1.2rem; }
    .ov2-profile-stat-num { font-size: 1.3rem; }
    .ov2-circle-btn { width: 42px; height: 42px; }
    .ov2-deleg-grid { grid-template-columns: 1fr; }
    .ov2-deleg-num { font-size: 1.55rem; }
}

/* ── Task Flyer (Dashboard floating orb) ──────────────────────────── */
.task-flyer-container {
    position: fixed;
    bottom: 6rem;
    right: 2rem;
    z-index: 1500;
    pointer-events: none;
    display: none;
}

body.task-flyer-scheduled-on[data-active-section="reports"] .task-flyer-container {
    display: block;
}

/* The wrapper is JS-driven (taskFlyerStartPhysics in staff-calendar-tasks.js)
   — position + body rotation are written every animation frame from a
   target-seeking steering simulation with damping and flutter perturbation.
   No CSS keyframes for translation here, by design. */
.task-flyer-orbit-wrap {
    position: relative;
    pointer-events: none;
    will-change: transform;
}

/* ── Indigo gradient butterfly (replaces the orange Monarch). Mirrors the
   demo's .butterfly-body > .wing structure: small flat butterfly, indigo
   gradient wings with soft glow, fast 0.2s flutter. The inner wrapper
   keeps preserve-3d so JS can rotate the body to face the velocity vector
   while the wings keep their rotateY flap axis. */
.task-flyer-orb {
    pointer-events: auto;
    cursor: pointer;
    width: 60px;
    height: 60px;
    perspective: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    outline: none;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s ease;
}

.task-flyer-orb:hover,
.task-flyer-orb:focus-visible {
    transform: scale(1.2);
}

.task-flyer-orb:focus-visible {
    outline: 3px solid var(--accent-soft, #dcf1fb);
    outline-offset: 4px;
    border-radius: 14px;
}

.task-flyer-butterfly {
    position: relative;
    width: 60px;
    height: 45px;
    transform-style: preserve-3d;
    transform-origin: center;
    transition: transform 0.05s linear;
}

.task-flyer-body {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 32px;
    background: #312e81;
    transform: translate(-50%, -50%);
    border-radius: 9999px;
    z-index: 10;
}

.task-flyer-head {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, calc(-50% - 18px));
    background: #1e1b4b;
    border-radius: 50%;
    z-index: 11;
}

.task-flyer-head::before,
.task-flyer-head::after {
    content: "";
    position: absolute;
    bottom: 100%;
    width: 1.5px;
    height: 9px;
    background: #1e1b4b;
    border-radius: 9999px;
    transform-origin: bottom center;
    box-shadow: 0 -2px 0 0 #1e1b4b;
}

.task-flyer-head::before {
    left: 2px;
    transform: rotate(-22deg);
}

.task-flyer-head::after {
    right: 2px;
    transform: rotate(22deg);
}

.task-flyer-wing {
    position: absolute;
    top: 0;
    width: 30px;
    height: 45px;
    background: #6063ee;
    box-shadow: 0 5px 15px rgba(70, 72, 212, 0.3);
    opacity: 0.9;
}

.task-flyer-wing--left {
    left: 0;
    border-radius: 50% 50% 10% 50%;
    transform-origin: right center;
    animation: taskFlyerFlapLeft 0.45s ease-in-out infinite;
}

.task-flyer-wing--right {
    right: 0;
    border-radius: 50% 50% 50% 10%;
    transform-origin: left center;
    animation: taskFlyerFlapRight 0.45s ease-in-out infinite;
}

@keyframes taskFlyerFlapLeft {
    0%, 100% { transform: rotateY(0deg); }
    50%      { transform: rotateY(70deg); }
}

@keyframes taskFlyerFlapRight {
    0%, 100% { transform: rotateY(0deg); }
    50%      { transform: rotateY(-70deg); }
}

/* Hover popup — Secret Task Hub style: glass panel, priority-dot rows with
   sub-labels, footer count + "Complete All" text-link. Mirrors the demo's
   .task-hub-popup. Anchored centered above the butterfly. */
.task-flyer-popup {
    position: absolute;
    bottom: 75px;
    left: 50%;
    margin-left: -140px;
    width: 280px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 20px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9) translateY(20px);
    transform-origin: top center;
    transition: opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                visibility 0.3s;
    pointer-events: none;
}

.task-flyer-orbit-wrap:hover .task-flyer-popup,
.task-flyer-orbit-wrap:focus-within .task-flyer-popup,
.task-flyer-popup:hover {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* When the butterfly flies near the top of the viewport, JS adds .flip-below
   to the orbit wrap so the popup renders BELOW the butterfly instead of
   above it — otherwise the 280×~330 panel pokes off-screen behind the page
   header. The animation direction also flips (slides DOWN into place). */
.task-flyer-orbit-wrap.flip-below .task-flyer-popup {
    bottom: auto;
    top: 75px;
    transform-origin: bottom center;
    transform: scale(0.9) translateY(-20px);
}
.task-flyer-orbit-wrap.flip-below:hover .task-flyer-popup,
.task-flyer-orbit-wrap.flip-below:focus-within .task-flyer-popup,
.task-flyer-orbit-wrap.flip-below .task-flyer-popup:hover {
    transform: scale(1) translateY(0);
}

/* Orbit pause is enforced in JS (the rAF tick exits early on hover/focus).
   On hover, wings snap to the fully-spread resting pose (rotateY 0) instead
   of pausing mid-animation — otherwise they freeze at whatever flap phase
   they were in, often edge-on (invisible). */
.task-flyer-orbit-wrap:hover .task-flyer-wing,
.task-flyer-orbit-wrap:focus-within .task-flyer-wing {
    animation: none;
    transform: rotateY(0deg);
}

.task-flyer-popup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e7ff;
}

.task-flyer-popup-spark {
    font-size: 14px;
    color: var(--accent, #14a1db);
}

.task-flyer-popup-title {
    margin: 0;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--ink, #1e1b4b);
}

.task-flyer-popup-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 240px;
    overflow-y: auto;
}

.task-flyer-popup-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.task-flyer-popup-dot {
    margin-top: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.task-flyer-popup-dot--overdue,
.task-flyer-popup-dot--urgent { background: #ba1a1a; }
.task-flyer-popup-dot--normal { background: var(--accent, #14a1db); }
.task-flyer-popup-dot--lowest { background: #00658e; }

.task-flyer-popup-item-body {
    flex: 1;
    min-width: 0;
}

.task-flyer-popup-item-title {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink, #1e1b4b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.task-flyer-popup-item:hover .task-flyer-popup-item-title {
    color: var(--accent, #14a1db);
}

.task-flyer-popup-item-meta {
    margin: 2px 0 0;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
}

.task-flyer-popup-item-meta--overdue,
.task-flyer-popup-item-meta--urgent { color: #ba1a1a; }
.task-flyer-popup-item-meta--today  { color: var(--accent, #14a1db); }
.task-flyer-popup-item-meta--lowest { color: #00658e; }

.task-flyer-popup-empty {
    padding: 16px 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #6b5f8a;
}

.task-flyer-popup-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e0e7ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.task-flyer-popup-count {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

.task-flyer-popup-cta {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent, #14a1db);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    font-family: inherit;
}

.task-flyer-popup-cta:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .task-flyer-container {
        bottom: 5rem;
        right: 1rem;
    }
    .task-flyer-popup {
        width: 280px;
        padding: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Keep the butterfly flying for reduce-motion users too — the ambient
       motion is intentional and small enough not to trigger sickness. The
       global *,*::before,*::after rule above forces animation-duration to
       0.01ms; these !important overrides win it back. */
    .task-flyer-wing--left  { animation: taskFlyerFlapLeft  0.2s ease-in-out infinite !important; animation-duration: 0.2s !important; animation-iteration-count: infinite !important; }
    .task-flyer-wing--right { animation: taskFlyerFlapRight 0.2s ease-in-out infinite !important; animation-duration: 0.2s !important; animation-iteration-count: infinite !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Sia (Suite Intelligent Assistant) — floating chat widget
 * FAB at bottom-left, popup chat window, mobile full-screen.
 * Sized for 1366×768 college displays.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Floating Action Button (FAB)
 * NOTE: width:auto + max-width:none override the global
 *   `input,select,textarea,button { width:100%; max-width:100% }` rule
 *   in this stylesheet — without these the FAB stretches across the viewport. */
/* ─── Sia FAB — "breathing" creative redesign ─────────────────────────────
 * Animated gradient + status dot + rotating sparkle + soft halo on hover.
 * All animations honor prefers-reduced-motion. */
body[data-active-section="messages"] #aiAsstFab { display: none !important; }
.ai-fab {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 9000;
    width: auto;
    max-width: none;
    height: 54px;
    padding: 0 20px 0 12px;
    border-radius: 30px;
    /* Larger gradient than the visible area, then animated via background-position
       to create a slow shifting/breathing effect. */
    background: linear-gradient(135deg, #14a1db 0%, #4fb8e6 35%, #3bb0e5 65%, #14a1db 100%);
    background-size: 220% 220%;
    background-position: 0% 50%;
    color: #fff;
    border: none;
    box-shadow:
        0 6px 20px rgba(20, 161, 219, 0.36),
        0 2px 4px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.20);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
    font: inherit;
    overflow: visible;
    isolation: isolate; /* keep aura behind, not bleeding into siblings */
}
.ai-fab:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow:
        0 12px 30px rgba(20, 161, 219,0.52),
        0 4px 8px rgba(0,0,0,0.10),
        inset 0 1px 0 rgba(255,255,255,0.24);
}
.ai-fab:active { transform: translateY(-1px) scale(1.02); }
.ai-fab:focus-visible {
    outline: 3px solid rgba(169, 220, 241, 0.7);
    outline-offset: 3px;
}
.ai-fab.hidden { display: none; }

/* Soft pulsing halo behind the FAB — visible on hover for extra "alive" feel */
.ai-fab-aura {
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgba(169, 220, 241,0.55), rgba(20, 161, 219,0) 70%);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: -1;
    pointer-events: none;
}
.ai-fab:hover .ai-fab-aura { opacity: 1; }

.ai-fab-icon {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.20);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.32),
        inset 0 -2px 6px rgba(15,23,42,0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.ai-fab-icon svg {
    width: 19px;
    height: 19px;
    /* Subtle drop-shadow so the sparkle pops against the white-tint avatar. */
    filter: drop-shadow(0 1px 1px rgba(20, 161, 219,0.35));
}

/* Tiny green status dot at the top-right of the avatar — "Sia is online" cue */
.ai-fab-status-dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow:
        0 0 0 2px #14a1db,           /* ring matches FAB gradient base */
        0 0 8px rgba(74,222,128,0.7); /* soft glow */
}

.ai-fab-label {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    /* tiny text-shadow so the label reads against the animated gradient */
    text-shadow: 0 1px 2px rgba(15,23,42,0.18);
}

/* ─── Animations (skipped for reduced-motion users) ──────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    /* Slow gradient breathe — 6s cycle, very subtle */
    .ai-fab {
        animation: aiFabBreathe 6s ease-in-out infinite;
    }
    /* Sparkle gentle rotate + scale pulse — 3.5s cycle */
    .ai-fab-icon svg {
        animation: aiFabSparkle 3.5s ease-in-out infinite;
        transform-origin: center;
    }
    /* Status-dot soft pulse — 2s cycle */
    .ai-fab-status-dot {
        animation: aiFabStatusPulse 2s ease-in-out infinite;
    }
    /* Aura on hover gets a slow expand-contract */
    .ai-fab:hover .ai-fab-aura {
        animation: aiFabAuraPulse 2.4s ease-in-out infinite;
    }

    @keyframes aiFabBreathe {
        0%, 100% { background-position: 0% 50%; }
        50%      { background-position: 100% 50%; }
    }
    @keyframes aiFabSparkle {
        0%, 100% { transform: rotate(0deg) scale(1); }
        50%      { transform: rotate(12deg) scale(1.10); }
    }
    @keyframes aiFabStatusPulse {
        /* Pulse via transform+opacity only (compositor) — animating box-shadow
           repainted the dot every frame. Static glow stays on .ai-fab-status-dot. */
        0%, 100% { transform: scale(1);    opacity: 0.85; }
        50%      { transform: scale(1.15); opacity: 1; }
    }
    @keyframes aiFabAuraPulse {
        0%, 100% { transform: scale(1.0); opacity: 0.85; }
        50%      { transform: scale(1.15); opacity: 1.0; }
    }
}

/* Floating chat popup — frosted glass card */
.ai-widget {
    position: fixed;
    bottom: 86px;
    right: 22px;
    z-index: 9100;
    width: 380px;
    height: 560px;
    max-height: calc(100vh - 110px);
    background: rgba(255,255,255,0.94);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.26), 0 6px 14px rgba(15,23,42,0.10), 0 0 0 1px rgba(20, 161, 219,0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ai-widget.hidden { display: none; }

/* Header */
.ai-widget-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    background: #14a1db;
    color: #fff;
    flex: 0 0 auto;
    position: relative;
}
.ai-widget-header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,0.18), transparent 60%);
}
.ai-widget-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.30), 0 1px 3px rgba(0,0,0,0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: relative;
    z-index: 1;
}
.ai-widget-avatar svg { width: 20px; height: 20px; }
.ai-widget-header-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    gap: 3px;
    position: relative;
    z-index: 1;
}
.ai-widget-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.ai-widget-subtitle {
    display: block;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255,255,255,0.78);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.ai-widget-subtitle[hidden] {
    display: none;
}
.ai-widget-tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255,255,255,0.92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-widget-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74,222,128,0.7);
    flex: 0 0 auto;
}
.ai-widget-header-actions {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}
.ai-widget-icon-btn {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    height: 30px;
    border: none;
    /* Subtle dark tint so the button shape reads against the gradient
       without feeling chunky. UX iteration: 36×36 was too big. */
    background: rgba(15, 23, 42, 0.16);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.12s;
}
.ai-widget-icon-btn:hover {
    background: rgba(15, 23, 42, 0.30);
    transform: translateY(-1px);
}
.ai-widget-icon-btn:active { transform: translateY(0); background: rgba(15, 23, 42, 0.38); }
.ai-widget-icon-btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
/* `display:block` + `flex-shrink:0` + min-width are required because the
 * inline-flex parent + viewBox-only SVG (no width/height attrs) was
 * getting squeezed to its path bounding-box instead of honoring CSS width. */
.ai-widget-icon-btn svg {
    display: block;
    flex-shrink: 0;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    min-height: 16px;
    stroke-width: 2;
}

/* History dropdown */
.ai-widget-history-pop {
    position: absolute;
    top: 70px;
    right: 12px;
    width: 260px;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15,23,42,0.18), 0 2px 6px rgba(15,23,42,0.06);
    z-index: 10;
    padding: 6px 0;
}
.ai-widget-history-pop.hidden { display: none; }
.ai-widget-history-item {
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font: inherit;
    color: #1f2937;
    border-left: 3px solid transparent;
    border-radius: 0;
}
.ai-widget-history-item:hover  { background: #f3f4f6; }
.ai-widget-history-item.active { background: #eef2ff; border-left-color: #14a1db; }
.ai-widget-history-title {
    font-size: 12.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-widget-history-time { font-size: 10.5px; color: #6b7280; margin-top: 2px; }
.ai-widget-history-empty {
    padding: 18px 12px;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
}

/* Thread + bubbles */
.ai-widget-thread {
    flex: 1;
    overflow-y: auto;
    padding: 16px 16px 14px;
    background: linear-gradient(180deg, rgba(238,242,255,0.55) 0%, rgba(248,250,252,0.55) 100%);
}
.ai-asst-empty {
    max-width: 320px;
    margin: 14px auto 6px;
    text-align: center;
    color: #4b5563;
}
.ai-asst-empty-badge {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #eef2ff;
    box-shadow: inset 0 0 0 1px rgba(20, 161, 219,0.18), 0 4px 14px rgba(20, 161, 219,0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #14a1db;
}
.ai-asst-empty-badge svg { width: 28px; height: 28px; }
.ai-asst-unavail-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    color: #ef4444;
}
.ai-asst-unavail-icon svg { width: 100%; height: 100%; }
.ai-asst-empty-title { font-size: 14px; font-weight: 600; color: #0f172a; margin-bottom: 6px; line-height: 1.35; letter-spacing: -0.005em; }
.ai-asst-empty-sub   { font-size: 12px; color: #64748b; margin-bottom: 16px; line-height: 1.55; }
.ai-asst-suggestions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ai-asst-chip {
    width: auto;
    max-width: none;
    background: #fff;
    border: 1px solid #e0e7ff;
    color: #4338ca;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.ai-asst-chip:hover {
    border-color: #a5b4fc;
    color: #3730a3;
    background: #eef2ff;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(20, 161, 219,0.18);
}
.ai-asst-chip:active { transform: translateY(0); }

.ai-asst-loading-line, .ai-asst-error-line {
    padding: 12px;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
}
.ai-asst-error-line { color: #b91c1c; }

.ai-asst-msg-row { display: flex; margin-bottom: 10px; }
.ai-asst-msg-row.me { justify-content: flex-end; }
.ai-asst-msg-row.ai { justify-content: flex-start; }
.ai-asst-msg-bubble {
    max-width: 82%;
    padding: 8px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.ai-asst-msg-row.me .ai-asst-msg-bubble {
    background: #14a1db;
    color: #fff;
    border-color: #14a1db;
    border-bottom-right-radius: 4px;
}
.ai-asst-msg-row.ai .ai-asst-msg-bubble {
    border-left: 3px solid #14a1db;
    border-bottom-left-radius: 4px;
}
.ai-asst-msg-row.ai.err .ai-asst-msg-bubble {
    background: #fef2f2;
    border-left-color: #dc2626;
    color: #991b1b;
}
.ai-asst-msg-text { font-size: 12.5px; line-height: 1.45; word-wrap: break-word; white-space: pre-wrap; }
.ai-asst-msg-time { font-size: 10px; color: #6b7280; margin-top: 4px; text-align: right; }
.ai-asst-msg-row.me .ai-asst-msg-time { color: rgba(255,255,255,0.78); }
.ai-asst-tool-chip {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 7px;
    background: #f3f4f6;
    color: #4b5563;
    border-radius: 999px;
    font-size: 10px;
    font-family: ui-monospace, monospace;
}
.ai-asst-thinking-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.ai-asst-thinking-dots span {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9ca3af;
    animation: aiAsstDot 1.2s infinite ease-in-out;
}
.ai-asst-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-asst-thinking-dots span:nth-child(3) { animation-delay: 0.30s; }
@keyframes aiAsstDot {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1.0); opacity: 1.0; }
}

/* Input bar */
.ai-widget-input-bar {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(226,232,240,0.7);
    background: rgba(255,255,255,0.85);
    flex: 0 0 auto;
}
#aiAsstInput {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 9px 14px;
    font: inherit;
    font-size: 12.5px;
    resize: none;
    min-height: 38px;
    max-height: 120px;
    line-height: 1.45;
    color: #0f172a;
    background: #f8fafc;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
#aiAsstInput::placeholder { color: #94a3b8; }
#aiAsstInput:focus {
    outline: none;
    border-color: #5cc3ea;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(20, 161, 219,0.18);
}
#aiAsstInput:disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }
.ai-widget-send-btn {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: #14a1db;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    flex: 0 0 auto;
    box-shadow: 0 3px 10px rgba(20, 161, 219,0.36);
}
.ai-widget-send-btn svg { width: 17px; height: 17px; }
.ai-widget-send-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(20, 161, 219,0.46);
}
.ai-widget-send-btn:active:not(:disabled) { transform: translateY(0); }
.ai-widget-send-btn:disabled {
    /* Flat muted gray so disabled state is clearly readable as a button
       (vs. the prior 0.4-opacity gradient which looked like a render glitch). */
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 1;
}

/* Mobile: widget fills the screen */
@media (max-width: 640px) {
    .ai-widget {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
    }
    .ai-widget-header {
        padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
    }
    .ai-fab {
        bottom: 16px;
        right: 16px;
        padding: 0 12px 0 8px;
        height: 48px;
    }
    .ai-fab-icon { width: 30px; height: 30px; }
    .ai-fab-label { display: none; }
    body.ai-widget-active .ai-fab { display: none; }
}

/* OLD section-style Ask HR (legacy, no longer used after widget refactor) */
.ai-assistant-section {
    padding: 0 !important;
    overflow: hidden;
}
.ai-asst-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    height: calc(100vh - 140px);
    min-height: 480px;
    max-height: 720px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}
.ai-asst-sidebar {
    background: #f8fafc;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ai-asst-sidebar-header {
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ai-asst-sidebar-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}
.ai-asst-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: #14a1db;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.ai-asst-new-btn svg { width: 14px; height: 14px; }
.ai-asst-new-btn:hover { background: #1276c2; }
.ai-asst-conv-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}
.ai-asst-conv-row {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 9px 14px;
    border-left: 3px solid transparent;
    cursor: pointer;
    color: #1f2937;
    font: inherit;
}
.ai-asst-conv-row:hover { background: #eef2ff; }
.ai-asst-conv-row.active {
    background: #eef2ff;
    border-left-color: #14a1db;
}
.ai-asst-conv-title {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-asst-conv-time {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}
.ai-asst-empty-line, .ai-asst-loading-line, .ai-asst-error-line {
    padding: 14px;
    font-size: 12.5px;
    color: #6b7280;
    text-align: center;
}
.ai-asst-error-line { color: #b91c1c; }

.ai-asst-thread-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
}
.ai-asst-thread-header {
    padding: 10px 18px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.ai-asst-thread-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}
.ai-asst-thread-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.ai-asst-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #eef2ff;
    color: #4338ca;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.ai-asst-tag-muted {
    background: #f3f4f6;
    color: #6b7280;
}
.ai-asst-thread {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    background: #fafbfc;
}
.ai-asst-empty {
    max-width: 540px;
    margin: 32px auto;
    text-align: center;
    color: #4b5563;
}
.ai-asst-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 6px;
}
.ai-asst-empty-sub {
    font-size: 12.5px;
    color: #6b7280;
    margin-bottom: 18px;
}
.ai-asst-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.ai-asst-chip {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.ai-asst-chip:hover {
    border-color: #14a1db;
    color: #4338ca;
    background: #eef2ff;
}
.ai-asst-msg-row {
    display: flex;
    margin-bottom: 12px;
}
.ai-asst-msg-row.me { justify-content: flex-end; }
.ai-asst-msg-row.ai { justify-content: flex-start; }
.ai-asst-msg-bubble {
    max-width: 76%;
    padding: 9px 13px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.ai-asst-msg-row.me .ai-asst-msg-bubble {
    background: #14a1db;
    color: #fff;
    border-color: #14a1db;
    border-bottom-right-radius: 4px;
}
.ai-asst-msg-row.ai .ai-asst-msg-bubble {
    border-left: 3px solid #14a1db;
    border-bottom-left-radius: 4px;
}
.ai-asst-msg-row.ai.err .ai-asst-msg-bubble {
    background: #fef2f2;
    border-left-color: #dc2626;
    color: #991b1b;
}
.ai-asst-msg-text {
    font-size: 13px;
    line-height: 1.45;
    word-wrap: break-word;
}
.ai-asst-msg-time {
    font-size: 10.5px;
    color: #6b7280;
    margin-top: 4px;
    text-align: right;
}
.ai-asst-msg-row.me .ai-asst-msg-time { color: rgba(255,255,255,0.75); }
.ai-asst-tool-chip {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    background: #f3f4f6;
    color: #4b5563;
    border-radius: 999px;
    font-size: 10.5px;
    font-family: ui-monospace, monospace;
}
.ai-asst-thinking-dots {
    display: inline-flex;
    gap: 4px;
    padding: 4px 0;
}
.ai-asst-thinking-dots span {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9ca3af;
    animation: aiAsstDot 1.2s infinite ease-in-out;
}
.ai-asst-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-asst-thinking-dots span:nth-child(3) { animation-delay: 0.30s; }
@keyframes aiAsstDot {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1.0); opacity: 1.0; }
}
.ai-asst-input-bar {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}
#aiAsstInput {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 11px;
    font: inherit;
    font-size: 13px;
    resize: none;
    min-height: 36px;
    max-height: 160px;
    line-height: 1.4;
    color: #1f2937;
    background: #fff;
}
#aiAsstInput:focus {
    outline: none;
    border-color: #14a1db;
    box-shadow: 0 0 0 2px rgba(20, 161, 219,0.18);
}
.ai-asst-send-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #14a1db;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, opacity 0.15s;
}
.ai-asst-send-btn svg { width: 18px; height: 18px; }
.ai-asst-send-btn:hover:not(:disabled) { background: #1276c2; }
.ai-asst-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 768px) {
    .ai-asst-layout {
        grid-template-columns: 1fr;
        height: calc(100vh - 120px);
    }
    .ai-asst-sidebar {
        max-height: 140px;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }
    .ai-asst-conv-list {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 8px;
    }
    .ai-asst-conv-row {
        flex: 0 0 auto;
        max-width: 200px;
        margin-right: 6px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        border-left: 3px solid transparent;
    }
}

/* ===== Stitch / Tailwind scoped reset =====
   The Tailwind Play CDN is loaded in index.html with preflight DISABLED, so utility
   classes (bg-*, p-*, flex, etc.) work everywhere but base elements (button, input, h1)
   keep their existing The Pupil Eye styles. Stitch-generated markup must be wrapped in
   <section class="tw-scope hidden" id="...View"> so this minimal reset re-applies the
   modern defaults Tailwind designs assume — but only inside opt-in containers. */
.tw-scope, .tw-scope *, .tw-scope ::before, .tw-scope ::after { box-sizing: border-box; }
.tw-scope { font-family: var(--font-sans, 'DM Sans', sans-serif); color: #111827; line-height: 1.5; }
.tw-scope h1, .tw-scope h2, .tw-scope h3, .tw-scope h4, .tw-scope h5, .tw-scope h6 { font-weight: 600; margin: 0; line-height: 1.2; }
.tw-scope p, .tw-scope ul, .tw-scope ol, .tw-scope figure, .tw-scope blockquote { margin: 0; }
.tw-scope ul, .tw-scope ol { padding: 0; list-style: none; }
/* Use :where() to keep reset specificity at 0 so Tailwind utilities win.
   Without this, `.tw-scope button` (0,1,1) beats `bg-emerald-100` (0,1,0). */
.tw-scope :where(button) { font: inherit; cursor: pointer; background: transparent; border: 0; padding: 0; color: inherit; width: auto; max-width: none; }
.tw-scope :where(input, textarea, select) { font: inherit; color: inherit; width: auto; max-width: none; background: transparent; border: 0; padding: 0; }
.tw-scope a { color: inherit; text-decoration: inherit; }
.tw-scope img, .tw-scope svg, .tw-scope video, .tw-scope canvas { display: block; max-width: 100%; }

/* ── Ask HR widget — redesign overrides (must follow legacy section-style block to win) ── */
.ai-widget .ai-asst-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 6px;
    line-height: 1.35;
    letter-spacing: -0.005em;
}
.ai-widget .ai-asst-empty-sub {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 16px;
    line-height: 1.55;
}
.ai-widget .ai-asst-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.ai-widget .ai-asst-chip {
    background: #fff;
    border: 1px solid #e0e7ff;
    color: #4338ca;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.ai-widget .ai-asst-chip:hover {
    border-color: #a5b4fc;
    color: #3730a3;
    background: #eef2ff;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(20, 161, 219,0.18);
}
.ai-widget .ai-asst-chip:active { transform: translateY(0); }
.ai-widget #aiAsstInput {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 9px 14px;
    font: inherit;
    font-size: 12.5px;
    resize: none;
    min-height: 38px;
    max-height: 120px;
    line-height: 1.45;
    color: #0f172a;
    background: #f8fafc;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.ai-widget #aiAsstInput::placeholder { color: #94a3b8; }
.ai-widget #aiAsstInput:focus {
    outline: none;
    border-color: #5cc3ea;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(20, 161, 219,0.18);
}
.ai-widget #aiAsstInput:disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }
.ai-widget .ai-asst-empty {
    max-width: 320px;
    margin: 14px auto 6px;
    text-align: center;
    color: #4b5563;
}

/* ============================================================
   Daily Motivation Pop-up — marketing-poster style modal
   --mv-accent / --mv-accent-deep are set inline by JS per day theme.
   ============================================================ */
.motivation-overlay {
    position: fixed; inset: 0; z-index: 12000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    pointer-events: auto;
    --mv-accent: #14a1db;
    --mv-accent-deep: #1276c2;
    opacity: 0;
    transition: opacity 220ms cubic-bezier(0.2, 0, 0, 1);
}
.motivation-overlay.is-open { opacity: 1; }
.motivation-overlay.is-closing { opacity: 0; pointer-events: none; }

.motivation-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, 0.40);
    backdrop-filter: blur(8px) saturate(115%);
    -webkit-backdrop-filter: blur(8px) saturate(115%);
}

.motivation-modal {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 48px);
    overflow: auto;
    background: #ffffff;
    border-radius: 24px;
    padding: 36px 36px 28px;
    box-shadow: 0 30px 80px rgba(70, 72, 212, 0.18), 0 8px 20px rgba(15, 23, 42, 0.08);
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: #1b1c1b;
    transform: translateY(24px) scale(0.97);
    transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
}
.motivation-overlay.is-open .motivation-modal { transform: translateY(0) scale(1); }

.motivation-close {
    position: absolute; top: 16px; right: 16px;
    width: 36px; height: 36px;
    border: 0; background: transparent;
    color: #94a3b8;
    border-radius: 999px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 160ms ease, color 160ms ease;
    z-index: 5;
}
.motivation-close:hover { background: #f1f5f9; color: #0f172a; }
.motivation-close:focus-visible { outline: 2px solid var(--mv-accent); outline-offset: 2px; }

.motivation-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--mv-accent);
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}

.motivation-headline {
    /* Match the reference marketing posters: heavy weight, tight tracking, near-black. */
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-size: 34px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.02;
    letter-spacing: -0.028em;
    margin: 0 0 10px 0;
    max-width: 100%;
    position: relative;
    z-index: 2;
}
.motivation-headline-accent {
    /* Same weight as the rest of the headline, just colored — matches
       the reference posters where the accent word is colored not italic. */
    background: linear-gradient(120deg, var(--mv-accent) 0%, var(--mv-accent-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: normal;
    font-weight: 800;
}

.motivation-author {
    font-size: 13px;
    font-weight: 500;
    font-style: italic;
    color: #94a3b8;
    margin: 0 0 14px 0;
    letter-spacing: 0.005em;
    position: relative;
    z-index: 2;
}

.motivation-hero-wrap {
    position: relative;
    height: 180px;
    margin: 4px 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.motivation-hero-glow {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--mv-accent) 28%, transparent) 0%, transparent 65%);
    filter: blur(8px);
    pointer-events: none;
}
@supports not (color: color-mix(in srgb, red, blue)) {
    .motivation-hero-glow {
        background: radial-gradient(circle at 50% 55%, rgba(20, 161, 219, 0.28) 0%, rgba(20, 161, 219, 0) 65%);
    }
}
.motivation-hero {
    position: relative;
    width: 168px; height: 168px;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 16px 24px rgba(70, 72, 212, 0.18));
    animation: motivation-bob 4s ease-in-out infinite;
}
.motivation-hero-fallback {
    position: absolute;
    font-size: 120px;
    line-height: 1;
    user-select: none;
    pointer-events: none;
}
.motivation-hero-img {
    position: relative; z-index: 1;
    width: 168px; height: 168px;
    object-fit: contain;
    opacity: 0;
    transition: opacity 320ms ease;
}
.motivation-hero-img.is-loaded { opacity: 1; }
.motivation-hero-img.is-loaded + .motivation-hero-fallback,
.motivation-hero-img.is-loaded ~ .motivation-hero-fallback { opacity: 0; }
.motivation-hero:has(.motivation-hero-img.is-loaded) .motivation-hero-fallback { opacity: 0; }

.motivation-greeting {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    margin: 0 0 18px 0;
    letter-spacing: 0.005em;
    position: relative;
    z-index: 2;
}

.motivation-stats {
    margin-bottom: 26px;
    position: relative;
    z-index: 2;
}
.motivation-stats-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 10px;
}
.motivation-stats-row {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.motivation-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #1e1b4b;
    transition: background 160ms ease;
}
.motivation-chip:hover { background: #e2e8f0; }
.motivation-chip-emoji { font-size: 14px; }

.motivation-footer {
    display: flex; align-items: center; justify-content: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}
.motivation-cta {
    border: 0; cursor: pointer;
    padding: 13px 22px;
    border-radius: 999px;
    font-family: 'Manrope', 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(120deg, var(--mv-accent) 0%, var(--mv-accent-deep) 100%);
    box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--mv-accent) 50%, transparent),
                0 4px 8px -2px rgba(15, 23, 42, 0.08);
    display: inline-flex; align-items: center; gap: 8px;
    transition: transform 140ms cubic-bezier(0.2, 0, 0, 1), box-shadow 200ms ease;
}
@supports not (color: color-mix(in srgb, red, blue)) {
    .motivation-cta { box-shadow: 0 10px 24px -6px rgba(20, 161, 219, 0.5), 0 4px 8px -2px rgba(15, 23, 42, 0.08); }
}
.motivation-cta:hover { transform: translateY(-1px); }
.motivation-cta:active { transform: translateY(0) scale(0.97); }
.motivation-cta:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--mv-accent); }
.motivation-cta svg { transition: transform 160ms ease; }
.motivation-cta:hover svg { transform: translateX(3px); }

/* Decorative motif characters drifting in negative space */
.motivation-decor {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 24px;
    z-index: 0;
}
.motivation-decor-char {
    position: absolute;
    color: var(--mv-accent);
    opacity: 0.10;
    font-weight: 800;
    user-select: none;
    animation: motivation-float-decor 5s ease-in-out infinite;
}

/* Confetti for special days (birthday, anniversary, festivals) */
.motivation-confetti {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 24px;
    z-index: 1;
}
.motivation-dot {
    position: absolute;
    border-radius: 999px;
    opacity: 0.55;
    animation: motivation-drift 6s ease-in-out infinite;
}

@keyframes motivation-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-7px) rotate(-1deg); }
}
@keyframes motivation-float-decor {
    0%, 100% { transform: translateY(0) rotate(var(--mv-rotate, 0deg)); }
    50%      { transform: translateY(-8px) rotate(var(--mv-rotate, 0deg)); }
}
@keyframes motivation-drift {
    0%, 100% { transform: translateY(0); opacity: 0.55; }
    50%      { transform: translateY(-10px); opacity: 0.85; }
}

/* Body lock when modal is open */
body.motivation-open { overflow: hidden; }

/* Reduced motion — kill animations + transitions */
@media (prefers-reduced-motion: reduce) {
    .motivation-overlay,
    .motivation-modal,
    .motivation-close,
    .motivation-cta,
    .motivation-cta svg,
    .motivation-hero-img { transition: none !important; }
    .motivation-hero,
    .motivation-decor-char,
    .motivation-dot { animation: none !important; }
    .motivation-overlay.is-open .motivation-modal { transform: none; }
}

/* Mobile (≤620px) */
@media (max-width: 620px) {
    .motivation-overlay { padding: 12px; }
    .motivation-modal {
        max-width: 100%;
        padding: 28px 22px 22px;
        border-radius: 20px;
        max-height: calc(100vh - 24px);
    }
    .motivation-headline { font-size: 26px; max-width: none; letter-spacing: -0.025em; }
    .motivation-hero-wrap { height: 150px; }
    .motivation-hero, .motivation-hero-img { width: 140px; height: 140px; }
    .motivation-hero-fallback { font-size: 96px; }
    .motivation-greeting { font-size: 12.5px; margin-bottom: 16px; }
    .motivation-footer { align-items: stretch; }
    .motivation-cta { justify-content: center; padding: 13px 22px; flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Sia FAB — 3D glassy orb redesign
 * Visual references: Apple Siri orb, Spotify AI playlist orb.
 * Built entirely from layered CSS gradients (no images, no JS, no Lottie).
 * Multiple specular highlights + animated gradient mesh + spring hover.
 * Honors prefers-reduced-motion.
 * ═══════════════════════════════════════════════════════════════════════════ */
.ai-fab.ai-fab-orb {
    position: fixed;
    bottom: 26px;
    right: 26px;
    z-index: 9000;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 64px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
    font: inherit;
    overflow: visible;
    isolation: isolate;
    /* Multi-layer drop shadow for true depth perception */
    filter:
        drop-shadow(0 8px 16px rgba(20, 161, 219,0.45))
        drop-shadow(0 2px 4px rgba(15,23,42,0.18));
    animation: none;
}
.ai-fab.ai-fab-orb:hover  { transform: translateY(-4px) scale(1.05); }
.ai-fab.ai-fab-orb:active { transform: translateY(-1px) scale(1.02); }
.ai-fab.ai-fab-orb:focus-visible {
    outline: 3px solid rgba(169, 220, 241, 0.85);
    outline-offset: 4px;
}

/* The actual sphere — layered radial gradients simulate a lit 3D orb */
.ai-fab-orb-body {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 28% 22%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.20) 18%, transparent 38%),
        radial-gradient(circle at 50% 45%, #3bb0e5 0%, #4fb8e6 40%, #14a1db 80%),
        radial-gradient(circle at 70% 80%, #312e81 0%, #1e1b4b 100%);
    background-blend-mode: normal, normal, multiply;
    box-shadow:
        inset 0 -10px 18px rgba(15,23,42,0.42),
        inset 0 8px 12px rgba(255,255,255,0.18),
        inset 0 0 0 1px rgba(255,255,255,0.12);
    overflow: hidden;
    z-index: 0;
}

/* Animated gradient mesh — slowly shifts the colors inside the orb */
.ai-fab-orb-mesh {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(217, 70, 239, 0.55) 0%, transparent 45%),
        radial-gradient(circle at 70% 70%, rgba(59, 130, 246, 0.40) 0%, transparent 45%);
    mix-blend-mode: screen;
    opacity: 0.85;
    pointer-events: none;
}

/* Sharper specular highlight — small bright crescent top-left */
.ai-fab-orb-specular {
    position: absolute;
    top: 12%;
    left: 18%;
    width: 30%;
    height: 22%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.30) 35%, transparent 70%);
    filter: blur(1px);
    pointer-events: none;
}

/* Outer aura halo — bleeds 16-22px around the orb */
.ai-fab.ai-fab-orb .ai-fab-aura {
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(59, 176, 229, 0.55), rgba(20, 161, 219, 0) 75%);
    opacity: 0.65;
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.3s ease, inset 0.3s ease;
}
.ai-fab.ai-fab-orb:hover .ai-fab-aura { opacity: 1; inset: -22px; }

/* Sparkle icon centered above the orb layers */
.ai-fab.ai-fab-orb .ai-fab-icon {
    position: relative;
    z-index: 2;
    width: 28px;
    height: 28px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ai-fab.ai-fab-orb .ai-fab-icon svg {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px;
    min-height: 26px;
    color: #fff;
    filter:
        drop-shadow(0 0 4px rgba(255,255,255,0.9))
        drop-shadow(0 1px 2px rgba(15,23,42,0.5));
}

/* Status dot — top-right of the orb */
.ai-fab.ai-fab-orb .ai-fab-status-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow:
        0 0 0 2.5px #fff,
        0 0 10px rgba(74,222,128,0.85);
    z-index: 3;
}

/* Tooltip — to the LEFT of the orb on hover (FAB is bottom-right) */
.ai-fab.ai-fab-orb .ai-fab-tooltip {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    padding: 7px 13px;
    background: #0f172a;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 12px rgba(15,23,42,0.25);
    z-index: 4;
}
.ai-fab.ai-fab-orb .ai-fab-tooltip::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #0f172a;
    border-right: 0;
}
.ai-fab.ai-fab-orb:hover .ai-fab-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Hide the legacy pill-style label on the orb variant */
.ai-fab.ai-fab-orb .ai-fab-label { display: none; }

/* ─── Orb animations (skipped under prefers-reduced-motion) ─────────────── */
@media (prefers-reduced-motion: no-preference) {
    .ai-fab.ai-fab-orb       { animation: aiOrbFloat 4.5s ease-in-out infinite; }
    .ai-fab-orb-mesh         { animation: aiOrbMeshDrift 7s ease-in-out infinite; }
    .ai-fab-orb-specular     { animation: aiOrbSpecular 4s ease-in-out infinite; }
    .ai-fab.ai-fab-orb .ai-fab-icon svg { animation: aiOrbSparkle 5s ease-in-out infinite; transform-origin: center; }
    .ai-fab.ai-fab-orb .ai-fab-status-dot { animation: aiOrbStatusPulse 2.2s ease-in-out infinite; }
    .ai-fab.ai-fab-orb .ai-fab-aura { animation: aiOrbAuraBreathe 4s ease-in-out infinite; }
    .ai-fab.ai-fab-orb:hover .ai-fab-aura { animation: aiOrbAuraPulse 1.8s ease-in-out infinite; }

    @keyframes aiOrbFloat {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-5px); }
    }
    @keyframes aiOrbMeshDrift {
        0%, 100% { transform: rotate(0deg)   scale(1.0); opacity: 0.85; }
        33%      { transform: rotate(120deg) scale(1.1); opacity: 1.00; }
        66%      { transform: rotate(240deg) scale(0.95); opacity: 0.90; }
    }
    @keyframes aiOrbSpecular {
        0%, 100% { opacity: 1.0; transform: scale(1); }
        50%      { opacity: 0.78; transform: scale(0.95); }
    }
    @keyframes aiOrbSparkle {
        0%, 100% { transform: rotate(0deg) scale(1); }
        50%      { transform: rotate(15deg) scale(1.12); }
    }
    @keyframes aiOrbStatusPulse {
        0%, 100% { box-shadow: 0 0 0 2.5px #fff, 0 0 10px rgba(74,222,128,0.85); transform: scale(1); }
        50%      { box-shadow: 0 0 0 2.5px #fff, 0 0 16px rgba(74,222,128,1.0);  transform: scale(1.20); }
    }
    @keyframes aiOrbAuraBreathe {
        0%, 100% { opacity: 0.55; }
        50%      { opacity: 0.85; }
    }
    @keyframes aiOrbAuraPulse {
        0%, 100% { opacity: 0.85; inset: -22px; }
        50%      { opacity: 1.0;  inset: -28px; }
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * FAB STYLE VARIANTS — for design comparison via ?fab=1|2|3|4
 * Each variant overrides the orb defaults with a completely different look.
 * Inner elements (orb-body, mesh, specular, status-dot, tooltip) are hidden
 * by default and only shown when their parent variant uses them.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variant 1: MINIMAL MONOGRAM ──────────────────────────────────────────
 * Solid white-on-indigo circle. Just the sparkle. No animation except hover.
 * Vibe: Quiet, professional, minimalist. Reference: Linear, Notion. */
.ai-fab.ai-fab-v1 {
    position: fixed; bottom: 26px; right: 26px; z-index: 9000;
    width: 56px !important; min-width: 56px !important; max-width: 56px !important; height: 56px;
    padding: 0; border-radius: 50%; border: none; cursor: pointer;
    background: #1276c2;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(18, 118, 194,0.32), 0 1px 2px rgba(15,23,42,0.10);
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease;
    isolation: isolate; overflow: visible; animation: none;
    filter: none;
}
.ai-fab.ai-fab-v1:hover  { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 18px rgba(18, 118, 194,0.42); }
.ai-fab.ai-fab-v1:active { transform: translateY(0); }
/* Hide all orb-only sub-elements */
.ai-fab.ai-fab-v1 .ai-fab-aura,
.ai-fab.ai-fab-v1 .ai-fab-orb-body,
.ai-fab.ai-fab-v1 .ai-fab-orb-mesh,
.ai-fab.ai-fab-v1 .ai-fab-orb-specular,
.ai-fab.ai-fab-v1 .ai-fab-tooltip,
.ai-fab.ai-fab-v1 .ai-fab-label { display: none !important; }
.ai-fab.ai-fab-v1 .ai-fab-icon {
    width: 28px; height: 28px; background: transparent; box-shadow: none;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 0;
}
.ai-fab.ai-fab-v1 .ai-fab-icon svg {
    width: 24px !important; height: 24px !important; min-width: 24px; min-height: 24px;
    color: #fff; filter: none;
}
.ai-fab.ai-fab-v1 .ai-fab-status-dot {
    position: absolute; top: 4px; right: 4px;
    width: 11px; height: 11px; border-radius: 50%; background: #4ade80;
    box-shadow: 0 0 0 2px #1276c2;
}

/* ── Variant 2: PILL WITH AVATAR ──────────────────────────────────────────
 * Wide pill, avatar circle on left + "Ask Sia" text. Glassmorphic.
 * Vibe: Friendly, chat-app standard. Reference: Intercom, Crisp. */
.ai-fab.ai-fab-v2 {
    position: fixed; bottom: 24px; right: 24px; z-index: 9000;
    width: auto !important; max-width: none !important; min-width: 0 !important;
    height: 50px;
    padding: 0 18px 0 6px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,0.30);
    cursor: pointer;
    background: linear-gradient(135deg, rgba(20, 161, 219,0.95), rgba(79, 184, 230,0.95));
    /* No backdrop-filter: the gradient is ~95% opaque so a blur behind it is
       invisible — it was pure GPU cost that recomputed whenever content moved. */
    color: #fff;
    display: inline-flex; align-items: center; gap: 10px;
    box-shadow:
        0 6px 18px rgba(20, 161, 219,0.36),
        0 2px 4px rgba(15,23,42,0.10),
        inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease;
    isolation: isolate; overflow: visible; animation: none; filter: none;
}
.ai-fab.ai-fab-v2:hover  { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 24px rgba(20, 161, 219,0.46), inset 0 1px 0 rgba(255,255,255,0.30); }
.ai-fab.ai-fab-v2:active { transform: translateY(0); }
.ai-fab.ai-fab-v2 .ai-fab-aura,
.ai-fab.ai-fab-v2 .ai-fab-orb-body,
.ai-fab.ai-fab-v2 .ai-fab-orb-mesh,
.ai-fab.ai-fab-v2 .ai-fab-orb-specular,
.ai-fab.ai-fab-v2 .ai-fab-tooltip { display: none !important; }
.ai-fab.ai-fab-v2 .ai-fab-icon {
    position: relative;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.40);
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.ai-fab.ai-fab-v2 .ai-fab-icon svg {
    width: 20px !important; height: 20px !important; min-width: 20px; min-height: 20px;
    color: #fff;
    filter: drop-shadow(0 1px 1px rgba(15,23,42,0.30));
}
.ai-fab.ai-fab-v2 .ai-fab-label {
    display: inline-block !important;
    font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(15,23,42,0.20);
}
.ai-fab.ai-fab-v2 .ai-fab-status-dot {
    position: absolute; top: 2px; right: 2px;
    width: 10px; height: 10px; border-radius: 50%; background: #4ade80;
    box-shadow: 0 0 0 2px rgba(20, 161, 219,1.0), 0 0 6px rgba(74,222,128,0.7);
}
@media (prefers-reduced-motion: no-preference) {
    .ai-fab.ai-fab-v2 .ai-fab-icon svg { animation: aiFabSparkle 3.5s ease-in-out infinite; transform-origin: center; }
    .ai-fab.ai-fab-v2 .ai-fab-status-dot { animation: aiFabStatusPulse 2s ease-in-out infinite; }
}

/* ── Variant 3: SIRI RINGS ────────────────────────────────────────────────
 * Concentric rotating rings, no solid disc. Central dot.
 * Vibe: Mystical, abstract, "thinking AI". Reference: Apple Siri animation. */
.ai-fab.ai-fab-v3 {
    position: fixed; bottom: 22px; right: 22px; z-index: 9000;
    width: 72px !important; min-width: 72px !important; max-width: 72px !important; height: 72px;
    padding: 0; border-radius: 50%; border: none; cursor: pointer;
    background: transparent;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    isolation: isolate; overflow: visible; animation: none;
    filter: drop-shadow(0 4px 12px rgba(20, 161, 219,0.40));
}
.ai-fab.ai-fab-v3:hover  { transform: scale(1.08); }
.ai-fab.ai-fab-v3:active { transform: scale(1.02); }
.ai-fab.ai-fab-v3 .ai-fab-tooltip,
.ai-fab.ai-fab-v3 .ai-fab-label { display: none !important; }
/* Reuse the 3 orb sub-elements as the 3 rings */
.ai-fab.ai-fab-v3 .ai-fab-aura {
    position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid transparent;
    background: #14a1db border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0.85;
}
.ai-fab.ai-fab-v3 .ai-fab-orb-body {
    position: absolute; inset: 8px; border-radius: 50%;
    border: 2px solid #d946ef; background: transparent; box-shadow: none;
    opacity: 0.75;
}
.ai-fab.ai-fab-v3 .ai-fab-orb-mesh {
    position: absolute; inset: 16px; border-radius: 50%;
    border: 2px solid #3b82f6; background: transparent; mix-blend-mode: normal;
    opacity: 0.65;
}
.ai-fab.ai-fab-v3 .ai-fab-orb-specular { display: none; }
.ai-fab.ai-fab-v3 .ai-fab-icon {
    position: relative; z-index: 2;
    width: 24px; height: 24px;
    background: radial-gradient(circle at center, #fff 0%, #a9dcf1 70%, transparent 100%);
    box-shadow: 0 0 16px rgba(59, 176, 229,0.85);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.ai-fab.ai-fab-v3 .ai-fab-icon svg {
    width: 16px !important; height: 16px !important; min-width: 16px; min-height: 16px;
    color: #4338ca;
    filter: none;
}
.ai-fab.ai-fab-v3 .ai-fab-status-dot {
    position: absolute; top: 4px; right: 4px;
    width: 10px; height: 10px; border-radius: 50%; background: #4ade80;
    box-shadow: 0 0 0 2px #fff, 0 0 8px rgba(74,222,128,0.85);
    z-index: 3;
}
@media (prefers-reduced-motion: no-preference) {
    .ai-fab.ai-fab-v3 .ai-fab-aura      { animation: aiSpinCw 8s linear infinite; }
    .ai-fab.ai-fab-v3 .ai-fab-orb-body  { animation: aiSpinCcw 5s linear infinite; }
    .ai-fab.ai-fab-v3 .ai-fab-orb-mesh  { animation: aiSpinCw 3s linear infinite; }
    .ai-fab.ai-fab-v3 .ai-fab-icon      { animation: aiOrbStatusPulse 2s ease-in-out infinite; }
    @keyframes aiSpinCw  { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
    @keyframes aiSpinCcw { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
}

/* ── Variant 4: GLASS CARD WELCOME ────────────────────────────────────────
 * Wider rectangle. Sparkle + "Ask Sia ✨". Glassmorphic.
 * Vibe: Conversational, less FAB-y. Reference: ChatGPT mobile prompt cards. */
.ai-fab.ai-fab-v4 {
    position: fixed; bottom: 22px; right: 22px; z-index: 9000;
    width: auto !important; max-width: none !important; min-width: 0 !important;
    height: 56px;
    padding: 0 22px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.55);
    cursor: pointer;
    background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(238,242,255,0.85));
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    color: #4338ca;
    display: inline-flex; align-items: center; gap: 12px;
    box-shadow:
        0 10px 30px rgba(20, 161, 219,0.18),
        0 2px 6px rgba(15,23,42,0.08),
        inset 0 1px 0 rgba(255,255,255,0.85);
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
    isolation: isolate; overflow: visible; animation: none; filter: none;
}
.ai-fab.ai-fab-v4:hover  { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(20, 161, 219,0.28); }
.ai-fab.ai-fab-v4:active { transform: translateY(0); }
.ai-fab.ai-fab-v4 .ai-fab-aura,
.ai-fab.ai-fab-v4 .ai-fab-orb-body,
.ai-fab.ai-fab-v4 .ai-fab-orb-mesh,
.ai-fab.ai-fab-v4 .ai-fab-orb-specular,
.ai-fab.ai-fab-v4 .ai-fab-tooltip { display: none !important; }
.ai-fab.ai-fab-v4 .ai-fab-icon {
    position: relative;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #14a1db;
    box-shadow: 0 2px 8px rgba(20, 161, 219,0.40), inset 0 1px 0 rgba(255,255,255,0.30);
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.ai-fab.ai-fab-v4 .ai-fab-icon svg {
    width: 17px !important; height: 17px !important; min-width: 17px; min-height: 17px;
    color: #fff;
    filter: drop-shadow(0 1px 1px rgba(15,23,42,0.30));
}
.ai-fab.ai-fab-v4 .ai-fab-label {
    display: inline-block !important;
    font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
    color: #4338ca;
}
.ai-fab.ai-fab-v4 .ai-fab-status-dot {
    position: absolute; top: 2px; right: 2px;
    width: 9px; height: 9px; border-radius: 50%; background: #4ade80;
    box-shadow: 0 0 0 1.5px #fff, 0 0 6px rgba(74,222,128,0.7);
}
@media (prefers-reduced-motion: no-preference) {
    .ai-fab.ai-fab-v4 .ai-fab-icon svg { animation: aiFabSparkle 3.5s ease-in-out infinite; transform-origin: center; }
}

/* ─── Sia FAB — lift above the mobile bottom nav ──────────────────────────────
 * The bottom nav is fixed at bottom:0 and ~54px tall (only visible ≤620px).
 * The orb (and every ?fab= variant) pins to bottom:26px, so it overlaps the
 * Chat tab. Raise it clear of the nav + safe-area inset. !important + later
 * source order beats the 2-class `.ai-fab.ai-fab-orb` rule with one selector. */
@media (max-width: 620px) {
    .ai-fab {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 70px) !important;
        right: 16px !important;
    }
}

/* ── Round status ring + stat-list redesign (Task Status, Subtasks Status) ── */
.ring-card-pill {
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    color: #14a1db;
    background: #eef0ff;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ring-card-pill strong { font-weight: 800; color: #1e1b4b; margin-right: 0.2rem; }

.chart-card:has(.donut-row) { display: flex; flex-direction: column; }
.chart-card:has(.donut-row) .donut-row { flex: 1; align-content: center; }
.donut-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
}

.ring {
    --size: 140px;
    --thickness: 9px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--ring-stops, #4bd08a 0deg 360deg));
}
.ring::after {
    content: "";
    position: absolute;
    inset: var(--thickness);
    border-radius: 50%;
    background: #fff;
}
.ring-center {
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}
.ring-pct {
    font-family: 'Manrope', 'DM Sans', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    color: #1e1b4b;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.ring-pct-label { display: none; }
.ring-total {
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    color: #6b5f8a;
    margin-top: 0.4rem;
    font-variant-numeric: tabular-nums;
}
.ring-total strong { color: #1e1b4b; font-weight: 800; }

.stat-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    min-width: 0;
    width: 100%;
}
.stat-row {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    padding: 0.5rem 0.4rem;
    border-radius: 6px;
    border: none;
    background: transparent;
    font-family: inherit;
    color: inherit;
    text-align: left;
    transition: background 0.15s, opacity 0.15s;
}
.stat-row.stat-row--empty { opacity: 0.45; }
.stat-row.stat-row--empty .stat-row__dot { background: #cbd0e0; }
.stat-row.stat-row--empty .stat-row__bar-fill { background: transparent; }
.stat-row:hover { background: #f5f3fb; }
.stat-row:focus-visible { outline: 2px solid #14a1db; outline-offset: 2px; }
.stat-row__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c, #4fb8e6);
}
.stat-row__main {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    min-width: 0;
}
.stat-row__label {
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: #5a566f;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat-row__bar {
    display: block;
    width: 100%;
    height: 3px;
    background: #eef2fc;
    border-radius: 999px;
    overflow: hidden;
}
.stat-row__bar-fill {
    display: block;
    height: 100%;
    background: var(--c, #4fb8e6);
    border-radius: 999px;
    transition: width 0.4s ease;
}
.stat-row__right { text-align: right; }
.stat-row__num {
    font-family: 'Manrope', 'DM Sans', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    color: #1e1b4b;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    display: block;
}
.stat-row__pct {
    display: block;
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: #6b5f8a;
    font-variant-numeric: tabular-nums;
    margin-top: 0.2rem;
    text-align: right;
}
.stat-row--in_progress      { --c: #4fb8e6; }
.stat-row--report_submitted { --c: #ffb84d; }
.stat-row--completed        { --c: #4bd08a; }
.stat-row--overdue          { --c: #ff6b78; }

@media (max-width: 360px) {
    .donut-row { grid-template-columns: 1fr; justify-items: center; gap: 1rem; }
    .ring { --size: 130px; }
}

/* ── Tasks With X (Collaborator) Modal ──────────────────── */
.collab-tasks-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    max-width: 720px;
    width: calc(100% - 40px);
    max-height: calc(100vh - 48px);
    border: 0;
    border-radius: 14px;
    padding: 0;
    background: #fff;
    box-shadow: 0 24px 64px rgba(0,0,0,0.25);
    overflow: auto;
    z-index: 2050;
}
.collab-tasks-dialog.hidden { display: none; }
.collab-tasks-dialog::backdrop { background: rgba(15,23,42,0.5); }
/* Parked: the dialog has left the native top layer (closed) while a task
   opened from it is shown. Keep it visible underneath the task detail —
   display:block overrides the UA's dialog:not([open]) rule; z-index sits
   below the task-detail backdrop (1100) so it reads as dimmed background. */
.collab-tasks-dialog.is-parked {
    display: block;
    z-index: 1050;
    pointer-events: none;
}
.collab-tasks-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px 12px;
    border-bottom: 1px solid #e2e8f0;
}
.collab-tasks-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.collab-tasks-view-profile {
    appearance: none;
    border: 1.5px solid #14a1db;
    background: #fff;
    color: #14a1db;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
.collab-tasks-view-profile:hover {
    background: #14a1db;
    color: #fff;
}
.collab-tasks-titleblock h3 { margin: 6px 0 4px; font-size: 20px; font-weight: 700; color: #1e293b; }
.collab-tasks-meta { font-size: 13px; color: #64748b; }
.collab-tasks-kind-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.collab-tasks-body {
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.collab-tasks-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 14px;
}
.collab-tasks-tab {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 120ms ease, border-color 120ms ease;
}
.collab-tasks-tab:hover { color: #334155; }
.collab-tasks-tab.is-active {
    color: #14a1db;
    border-bottom-color: #14a1db;
}
.collab-tasks-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: #eef2ff;
    color: #14a1db;
    font-size: 11px;
    font-weight: 700;
}
.collab-tasks-tab.is-active .collab-tasks-tab-count {
    background: #14a1db;
    color: #fff;
}
.collab-tasks-section { display: none; }
.collab-tasks-section.is-active { display: block; }
.collab-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.collab-task-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.collab-task-row:hover {
    background: #f8fafc;
    border-color: #c7d2fe;
}
.collab-task-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
}
.collab-task-pipeline-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: #eef2ff;
    color: #14a1db;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.collab-task-meta {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.collab-task-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.collab-task-status.status-overdue          { background: #fee2e2; color: #b91c1c; }
.collab-task-status.status-in_progress      { background: #dcf1fb; color: #0e7bb0; }
.collab-task-status.status-report_submitted { background: #fef3c7; color: #b45309; }
.collab-task-status.status-pending_approval { background: #fef3c7; color: #b45309; }
.collab-task-status.status-completed        { background: #dcfce7; color: #15803d; }
.collab-task-status.status-failed           { background: #fee2e2; color: #991b1b; }
.collab-task-status.status-rejected         { background: #fee2e2; color: #991b1b; }
.collab-task-status.status-reverted         { background: #fef3c7; color: #b45309; }
.collab-task-status.status-scheduled        { background: #e0e7ff; color: #4338ca; }
.collab-tasks-empty {
    margin: 0;
    padding: 14px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 10px;
}

/* Collaborator suggestion badge — distinct from generic Staff */
.search-suggest-item[data-kind="Collaborator"] .search-suggest-kind {
    background: #ecfdf5;
    color: #047857;
}

/* ──────────────────────────────────────────────────────────────────────
   MOBILE CASCADE CORRECTIONS
   The main responsive @media blocks (~line 8600-10200) sit EARLIER in this
   file than many component base rules (~line 11000-29000). With equal
   specificity the cascade tie-break is source order, so the desktop value
   was silently winning on phones. These rules re-assert the intended mobile
   values; kept at end-of-file so they win. Audit: tools/css_mobile_cascade_audit.php
   Note: .event-details-box / .report-submit-modal positioning is intentionally
   NOT re-asserted here — the :not(.hidden) !important blocks (~line 16283 /
   16312) already force those modals to a full-screen sheet.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1400px) {
    .dash-kpi-zone .info-cards { gap: 0.5rem; }
    .dash-kpi-zone .info-card { padding: 0.65rem; min-height: 80px; }
    .req-side-submenu { padding: 0.05rem 0 0.2rem 0.65rem; gap: 0.04rem; }
    .req-side-item { padding: 0.32rem 0.6rem 0.32rem 0.75rem; font-size: 0.74rem; }
}
@media (max-width: 620px) {
    /* Task detail modal — header / footer / title */
    .edv-header { z-index: 3; padding: 0.75rem 0.8rem 0.55rem; }
    .edv-header-left { flex: 0 0 100%; }
    .edv-header-left h4,
    #eventDetailsTitle { font-size: 1.05rem; }
    .edv-actions { z-index: auto; padding: 0.6rem 0.8rem; gap: 0.4rem; }
    #useForReportBtn { min-width: 0; }
    #closeReportSubmitBtn { min-width: 40px; }

    /* Subtasks */
    .subtask-head { display: grid; align-items: flex-start; }
    #toggleAddSubtaskBtn { min-width: 0; width: max-content; padding: 0.38rem 0.55rem; }

    /* Progress & Notes panel */
    .task-notes-panel { margin-top: 0.5rem; padding: 0.45rem; border-radius: 8px; }
    .task-notes-list { max-height: 220px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .task-notes-header h5 { font-size: 0.82rem; }
    .task-notes-composer-actions { gap: 0.3rem; }
    .task-notes-attach-btn { border-radius: 50%; padding: 0; }
    .task-notes-send-btn { padding: 0.45rem 1rem; font-size: 0.8rem; border-radius: 8px; }
    .task-note-avatar { width: 26px; height: 26px; font-size: 0.68rem; }
    .task-note-image img { max-width: 160px; max-height: 140px; }

    /* Calendar */
    .cal-add-btn { opacity: 1; width: 24px; height: 24px; min-width: 24px; }
    .event-pill { padding: 0.22rem 0.38rem; border-radius: 8px; }

    /* Chat compose bar */
    #chatMessageInput { height: 38px; min-height: 38px; max-height: 120px; }
    .chat-compose-bar { gap: 0.32rem; }
    .chat-attach-btn { width: 38px; min-width: 38px; height: 38px; }
    .chat-send-btn { width: 38px; min-width: 38px; height: 38px; }

    /* Quick-add close button — base rule carries !important, so this must too */
    .quick-add-close {
        min-width: 76px !important;
        width: auto !important;
        height: 44px !important;
        padding: 0.5rem 0.9rem !important;
        border-radius: 14px !important;
    }

    /* Top search button — base sets `min-height: unset !important` */
    .top-search-go { min-height: 38px !important; }

    /* Settings rows */
    .perm-status-row { padding: 0.6rem 0.15rem; min-height: 48px; }
    .sound-setting-row { padding: 0.6rem 0.15rem; min-height: 48px; }
    .sound-settings-sub { padding-left: 0; }

    /* Requests / Service Requests module */
    .req-page-header { gap: 0.15rem; margin-bottom: 0.4rem; }
    .req-panel { padding: 0.5rem; border-radius: 10px; }
    .req-panel-head { margin-bottom: 0.35rem; gap: 0.3rem; }
    .req-panel-head h4 { font-size: 0.82rem; }
    .req-stat-grid { gap: 0.45rem; margin-bottom: 0.7rem; }
    .req-stat-card { gap: 0.55rem; padding: 0.6rem 0.7rem; border-radius: 12px; }
    .req-stat-card:hover { transform: none; }
    .req-stat-icon { width: 34px; height: 34px; border-radius: 9px; }
    .req-stat-icon svg { width: 17px; height: 17px; }
    .req-stat-body { padding-left: 0; }
    .req-stat-label { font-size: 0.62rem; letter-spacing: 0.03em; margin-bottom: 1px; }
    .req-stat-value { font-size: 1.3rem; line-height: 1.1; }
    .req-subnav { flex-wrap: nowrap; margin-bottom: 0.8rem; gap: 3px; }
    .req-subnav-btn { padding: 6px 11px; font-size: 0.75rem; }
    .req-btn { padding: 5px 10px; font-size: 0.72rem; border-radius: 7px; }
    .req-btn-sm { padding: 4px 9px; font-size: 0.7rem; }
    .req-history-type { font-size: 0.68rem; padding: 0.18rem 0.45rem; }
    .req-two-col--mt { margin-top: 0.35rem; }
}

/* ──────────────────────────────────────────────────────────────────────
   MOBILE TABLE OVERFLOW SAFETY NET
   A data table with no scroll wrapper overflows the page on phones: auto
   table-layout floors the table at its min-content width, and width:100%
   cannot shrink it below that — so a multi-column table pushes the whole
   page wider than the viewport. display:block turns the <table> itself
   into a horizontal scroll container (verified: a 12-column bare table
   drops from 817px page-overflow to a contained 375px scroll region).
   Tables already inside a scroll wrapper are reverted to display:table so
   their wrapper keeps owning the scroll (and its scroll-shadow styling).
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-wrap > table,
    .hrms-panel table,
    .att-table-wrap > table,
    .att-summary-table-wrap > table,
    .hr-dir-table-wrap > table,
    .extension-tracking-wrap table,
    .extension-pending-table table {
        display: table;
    }
}

/* Interview detail modal: on narrower / display-scaled / zoomed screens, stack the
   two-column layout vertically so the candidate-profile tables (Education, Work
   Experience, etc.) get the full modal width instead of being clipped. Side-by-side
   layout is kept on genuinely wide screens (>1280px). !important overrides the
   inline grid styles set in staff-calendar-hr.js. */
@media (max-width: 1280px) {
    .iv-detail-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        overflow-y: auto !important;
    }
    .iv-detail-left {
        border-right: none !important;
        border-bottom: 1px solid #e5e7eb !important;
        overflow: visible !important;
    }
    .iv-detail-right {
        overflow: visible !important;
    }
}

/* ══════════════════════════════════════════════
   LEAVE & PERMISSIONS — MOBILE OPTIMISATION
   The generic 720px rule collapses .hrms-balance-grid to a single
   column, turning 6 balance cards into a full screen of scrolling.
   These overrides (placed last so the cascade wins) keep balances
   2-up, let request cards wrap instead of ellipsizing, and turn
   approve/reject into full-width touch targets.
══════════════════════════════════════════════ */
@media (max-width: 720px) {
    /* Leave balances: 2 compact cards per row instead of 1 giant card */
    #hrLeaveBalanceGrid.hrms-balance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }
    #hrLeaveBalanceGrid .hrms-balance-item {
        padding: 0.6rem 0.7rem;
        border-radius: 11px;
    }
    #hrLeaveBalanceGrid .hrms-balance-item label {
        font-size: 0.64rem;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #hrLeaveBalanceGrid .hrms-balance-item strong {
        font-size: 0.95rem;
        margin-top: 0.1rem;
    }
    #hrLeaveBalanceGrid .hr-alloc-meta {
        font-size: 0.62rem;
    }
    #hrLeaveBalanceGrid .hr-balance-card-credit-info,
    #hrLeaveBalanceGrid .hr-balance-card-eligible,
    #hrLeaveBalanceGrid .hr-balance-card-ineligible {
        font-size: 0.6rem;
        line-height: 1.3;
    }
}

@media (max-width: 640px) {
    /* Inner tabs (Leave | Permission | Approvals): full width, swipeable */
    #hrPaneLeave .hr-lp-tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #hrPaneLeave .hr-lp-tabs::-webkit-scrollbar { display: none; }
    #hrPaneLeave .hr-lp-tab {
        flex: 1 0 auto;
        justify-content: center;
        padding: 0.5rem 0.7rem !important;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    /* Tighter panels on phones */
    #hrPaneLeave .hrms-panel {
        padding: 0.85rem;
        border-radius: 13px;
    }

    /* Request cards: wrap content instead of hiding it behind ellipsis */
    #hrPaneLeave .hr-leave-item {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 0.4rem;
    }
    #hrPaneLeave .hr-leave-dot {
        margin-top: 0.35rem;
    }
    #hrPaneLeave .hr-leave-info {
        flex: 1 1 calc(100% - 20px);
    }
    #hrPaneLeave .hr-leave-name,
    #hrPaneLeave .hr-leave-meta {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    #hrPaneLeave .hr-leave-name {
        line-height: 1.4;
    }
    /* Approve / Reject / Cancel: full-width row of big touch targets
       aligned under the text (20px = dot width + gap) */
    #hrPaneLeave .hr-leave-actions {
        flex: 1 1 100%;
        margin-left: 20px;
    }
    #hrPaneLeave .hr-leave-actions .hr-btn-sm {
        flex: 1 1 0;
        padding: 0.5rem 0.6rem !important;
        font-size: 0.76rem;
    }

    /* Filter selects: 2-up grid; a trailing odd one spans the row */
    #hrPaneLeave .hr-leave-filter-bar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }
    #hrPaneLeave .hr-leave-filter-bar select {
        min-width: 0;
        width: 100%;
        padding: 0.5rem 0.6rem;
    }
    #hrPaneLeave .hr-leave-filter-bar select:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    /* Section headers (Pending My Approval / My Requests): allow wrap */
    #hrPaneLeave .hr-leave-section-head {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    /* Approvals tab (card v2): drop the 52px avatar indent that wastes
       width on phones; let the header wrap and actions fill the row */
    #hrPaneLeave .hr-approval-card-top {
        flex-wrap: wrap;
    }
    #hrPaneLeave .hr-approval-details,
    #hrPaneLeave .hr-approval-card-actions {
        padding-left: 0;
    }
    #hrPaneLeave .hr-approval-card-actions .hr-approval-btn {
        flex: 1 1 0;
    }

    /* Pagination: scrollable page strip, count centred on its own row */
    #hrPaneLeave .hr-pagination {
        justify-content: center;
    }
    #hrPaneLeave .hr-page-numbers {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #hrPaneLeave .hr-page-btn {
        padding: 8px 12px;
    }
    #hrPaneLeave .hr-page-info {
        flex-basis: 100%;
        margin-left: 0;
        text-align: center;
    }

    /* ── Approval workspace TABLE → stacked cards on phones ──
       A 7-column table can't fit a phone; collapse each row into a tappable
       card (name + status on top, type/dates/stage/applied beneath) and open
       the detail row (stepper + Approve/Reject) attached underneath. */
    #hrPaneLeave .hr-lt-scroll { overflow-x: visible; }
    #hrPaneLeave .hr-lt-table,
    #hrPaneLeave .hr-lt-table tbody { display: block; width: 100%; }
    #hrPaneLeave .hr-lt-table thead { display: none; }
    #hrPaneLeave .hr-lt-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px 10px;
        border: 1px solid var(--hr-border, #dcf1fb);
        border-radius: 12px;
        padding: 11px 12px;
        margin-bottom: 8px;
    }
    #hrPaneLeave .hr-lt-row > td { border: 0 !important; padding: 0; font-size: 0.82rem; }
    #hrPaneLeave .hr-lt-c-chev { display: none; }
    #hrPaneLeave .hr-lt-c-emp { order: 1; flex: 1 1 55%; min-width: 0; }
    #hrPaneLeave .hr-lt-c-status { order: 2; flex: 0 0 auto; margin-left: auto; }
    #hrPaneLeave .hr-lt-c-type { order: 3; flex: 0 0 auto; }
    #hrPaneLeave .hr-lt-c-dates { order: 4; flex: 0 1 auto; white-space: normal; min-width: 0; }
    #hrPaneLeave .hr-lt-c-stage { order: 5; flex: 0 0 auto; }
    #hrPaneLeave .hr-lt-c-applied { display: none; }  /* low priority on phones; full date stays in the desktop table */
    #hrPaneLeave .hr-lt-name { white-space: normal; }
    #hrPaneLeave .hr-lt-row.expanded { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; margin-bottom: 0; }
    #hrPaneLeave .hr-lt-detail { display: none; }
    #hrPaneLeave .hr-lt-detail.open { display: block; margin-bottom: 8px; }
    #hrPaneLeave .hr-lt-detail > td { display: block; border: 0 !important; }
    #hrPaneLeave .hr-lt-detail-cell {
        border: 1px solid var(--hr-border, #dcf1fb);
        border-top: 0;
        border-radius: 0 0 12px 12px;
        padding: 8px 12px 12px !important;
    }
    #hrPaneLeave .hr-lt-detail .hr-leave-actions { margin-left: 0; }
    #hrPaneLeave .hr-approval-timeline { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════
   ATTENDANCE — MOBILE OPTIMISATION
   The pane track is capped via .hrms-content minmax(0,1fr); these
   overrides (placed last so the cascade wins) compact the stat
   cards into 2-up tiles, pair the filters two per row, and keep
   the employee column pinned while the cycle table scrolls
   sideways under the finger.
══════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Stat cards: compact 2-up tiles instead of giant slabs */
    #hrPaneAttendance .att-stats-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        margin-bottom: 0.75rem;
    }
    #hrPaneAttendance .att-stat {
        padding: 0.55rem 0.65rem 0.5rem;
        border-radius: 12px;
        border-bottom-width: 3px;
    }
    #hrPaneAttendance .att-stat:hover { transform: none; box-shadow: none; }
    #hrPaneAttendance .att-stat label { font-size: 0.55rem; }
    #hrPaneAttendance .att-stat strong { font-size: 1.1rem; }
    #hrPaneAttendance .att-stat-icon { width: 20px; height: 20px; }

    /* Filter bar: 2-column grid, full-width tap targets */
    #hrPaneAttendance .att-filter-bar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        padding: 0.65rem 0.7rem;
        border-radius: 14px;
    }
    #hrPaneAttendance .att-filter-field,
    #hrPaneAttendance .att-filter-range {
        max-width: none;
        min-width: 0;
    }
    /* Date Range carries long labels ("June 2026 (26 May – 24 Jun)") —
       give it a full row so the text never clips */
    #hrPaneAttendance .att-filter-range { grid-column: 1 / -1; }
    #hrPaneAttendance .att-filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        margin-left: 0;
    }

    /* Summary panel: tighter chrome */
    .att-summary-panel { padding: 12px; }
    .att-summary-head { margin-bottom: 10px; }
    .att-summary-panel .att-summary-table th,
    .att-summary-panel .att-summary-table td {
        padding: 10px 6px;
        height: 48px;
        font-size: 12px;
    }

    /* Pin the identity column so names stay visible while the count
       columns scroll horizontally. The corner th sits above both the
       sticky thead (z2) and the sticky body cells (z1). Solid
       backgrounds stop the scrolling columns showing through. */
    .att-summary-table colgroup col:first-child { width: 150px !important; }
    .att-summary-panel .att-summary-table th:first-child,
    .att-summary-panel .att-summary-table td:first-child {
        position: sticky;
        left: 0;
        width: 150px;
        padding-left: 8px;
        padding-right: 10px;
        background: #fff;
        z-index: 1;
        box-shadow: inset -1px 0 0 var(--hr-border, #dcf1fb);
    }
    .att-summary-panel .att-summary-table th:first-child {
        background: #eef8fd;
        z-index: 3;
    }
    .att-summary-table tbody tr:hover td:first-child { background: #f0ebff; }
    .att-summary-table tbody tr:active td:first-child { background: #e5d9ff; }
}

/* ══════════════════════════════════════════════
   ATTENDANCE — MOBILE OPTIMISATION
   Two components the phone view was clipping:
   1) Cycle Summary (12-col table): swipes horizontally but lost the
      employee context — pin the identity column while the tallies scroll.
   2) Employee cycle drawer: day table had NO horizontal overflow path
      (status/permission columns simply clipped). Becomes a full-width
      bottom sheet with a swipeable table and a sticky Date column.
══════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* ── Cycle Summary ───────────────────────── */
    .att-summary-panel {
        padding: 14px;
    }
    .att-summary-head h4 {
        font-size: 0.95rem;
    }
    /* Identity column: 280px desktop pin is half a phone screen — shrink it.
       table-layout is fixed, so pin both the col element and the cells. */
    .att-summary-table colgroup col:first-child {
        width: 150px !important;
    }
    .att-summary-panel .att-summary-table th:first-child,
    .att-summary-panel .att-summary-table td:first-child {
        width: 150px;
        padding-left: 10px;
        padding-right: 10px;
        position: sticky;
        left: 0;
        z-index: 1;
        background: #ffffff;
        box-shadow: 2px 0 6px rgba(15, 23, 42, 0.07);
    }
    .att-summary-panel .att-summary-table th:first-child {
        z-index: 3;
        background: #eef8fd;
    }
    .att-summary-table tbody tr:hover td:first-child {
        background: #f0ebff;
    }
    .att-summary-panel .att-summary-table th,
    .att-summary-panel .att-summary-table td {
        padding-top: 10px;
        padding-bottom: 10px;
        height: 48px;
    }
    .att-summary-panel .att-summary-table .hr-emp-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.6rem !important;
    }
    /* Hover-only affordance — meaningless on touch, and it reserves space */
    .att-summary-panel .att-summary-table .att-summary-drilldown-hint {
        display: none;
    }

    /* ── Employee cycle drawer → bottom sheet ── */
    .emp-cycle-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .emp-cycle-modal {
        --emp-pad-x: 12px;
        width: 100%;
        max-height: 96vh;
        max-height: 96dvh;
        border-radius: 16px 16px 0 0;
    }
    .emp-cycle-header {
        padding: 14px var(--emp-pad-x) 12px;
        gap: 12px;
    }
    .emp-cycle-avatar {
        width: 42px;
        height: 42px;
        font-size: 14px;
    }
    .emp-cycle-name {
        font-size: 16px;
    }
    .emp-cycle-close {
        width: 32px;
        height: 32px;
    }

    /* Stat tiles: drop the icon chip, tighten — narrow screens get fewer per row */
    .emp-cycle-stats {
        padding: 10px var(--emp-pad-x) 12px;
        gap: 6px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .emp-stat-card {
        padding: 8px 8px 7px;
        min-height: 0;
        border-radius: 8px;
    }
    .emp-stat-icon {
        display: none;
    }
    .emp-stat-value {
        font-size: 17px;
    }
    .emp-stat-label {
        font-size: 8px;
        margin-top: 3px;
    }

    /* Day table: wrapper owns horizontal scroll; Date column stays pinned.
       display:table also undoes the global ≤620px display:block safety net,
       which would otherwise break the sticky thead. */
    .emp-cycle-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .emp-cycle-table {
        display: table;
        min-width: 580px;
        font-size: 12px;
    }
    .emp-cycle-table thead th,
    .emp-cycle-table tbody td {
        padding: 10px 8px;
    }
    .emp-cycle-table thead th.emp-cycle-th-date,
    .emp-cycle-table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: #ffffff;
        box-shadow: 2px 0 6px rgba(15, 23, 42, 0.06);
    }
    .emp-cycle-table thead th.emp-cycle-th-date {
        z-index: 3;
    }
    /* Sticky cell must repaint each row variant's background itself —
       zebra / weekend / non-working tints live on the TR, which a sticky
       (opaque) cell would otherwise hide while swiping. */
    .emp-cycle-table tbody tr.emp-cycle-row:nth-child(odd) > td:first-child {
        background: #fcfdfe;
    }
    .emp-cycle-table tbody tr:hover > td:first-child {
        background: #f1f5f9;
    }
    .emp-cycle-table tbody tr.emp-cycle-weekend > td:first-child {
        background: #fefce8;
    }
    .emp-cycle-table tbody tr.emp-cycle-row-nonwork > td:first-child {
        background: #f8fafc;
    }
    .emp-cycle-date {
        width: 64px;
    }
    .emp-cycle-day {
        font-size: 15px;
    }
    .emp-cycle-time,
    .emp-cycle-hours {
        font-size: 12px;
    }

    /* HR inline edit form: 5-track grid can't fit — reflow to 2-up */
    .emp-cycle-edit-fields {
        grid-template-columns: 1fr 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * UX feedback infrastructure — global progress bar, offline banner,
 * button busy state, retry toast. Elements are lazily created by
 * staff-calendar-core.js (no index.html markup). Sized for 1366×768.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Thin top activity bar — driven by the api() in-flight counter */
.global-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 11000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    overflow: hidden;
    background: transparent;
}
.global-progress.active { opacity: 1; }
.global-progress-inner {
    height: 100%;
    width: 40%;
    background: var(--accent, #14a1db);
    border-radius: 0 2px 2px 0;
    animation: globalProgressSlide 1.1s ease-in-out infinite;
}
@keyframes globalProgressSlide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* Offline / back-online banner */
.offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10500;
    background: var(--hr-orange, #f59e0b);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    padding: 5px 12px;
    font-family: var(--font-sans);
}
.offline-banner.is-online { background: var(--ok, #047857); }

/* Shared button busy state (btnBusy helper) */
.btn-busy { pointer-events: none; opacity: 0.75; }
.btn-busy-spinner {
    width: 13px;
    height: 13px;
    border-width: 2px;
    vertical-align: -2px;
    margin-right: 6px;
}

/* Retry toast — undo-toast layout, error coloring */
.toast-retry { background: #dc2626; }

/* Subtle press feedback on primary action/nav controls */
.menu-item:active:not(:disabled),
.hr-btn-sm:active:not(:disabled),
.req-btn:active:not(:disabled),
.hrms-btn-primary:active:not(:disabled),
.hrms-btn-outline:active:not(:disabled) {
    transform: scale(0.985);
}

/* Section/pane load-error card (e.g. HR bootstrap failure) */
.section-load-error {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--muted, #6b5f8a);
    font-size: 0.9rem;
}
.section-load-error button {
    width: auto;
    max-width: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0.75rem auto 0;
    padding: 0.45rem 1.1rem;
    border-radius: 8px;
    border: 1px solid var(--accent, #14a1db);
    background: #fff;
    color: var(--accent, #14a1db);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}
.section-load-error button:hover { background: var(--accent-soft, #dcf1fb); }

/* ============================================================================
   ===== DASHBOARD PREMIUM POLISH (2026-06-16) =====
   Ports the approved "dashboard-redesign-mockup.html" visual design onto the
   LIVE dashboard. CSS-ONLY, additive overrides (no existing rule deleted).
   Everything is scoped:
     - dashboard content  -> [data-section="reports"]
     - sidebar            -> .side-nav
     - topbar (global)    -> .topbar  (intentionally in-scope)
   Tokens are declared on those three roots so they never leak globally.
   ============================================================================ */

/* ---- Design tokens (mirror the mockup :root exactly) ---- */
[data-section="reports"],
.topbar,
.side-nav {
    --dx-primary:#1276c2; --dx-primary-700:#1069b0; --dx-secondary:#4F8CFF;
    --dx-success:#10B981; --dx-warning:#F59E0B; --dx-danger:#FB5E6B; --dx-gold:#E0A23A;
    --dx-bg:#F5F6FB; --dx-surface:#FFFFFF; --dx-surface-2:#F3F5FA; --dx-surface-3:#EEF1F8;
    --dx-ink:#0E1530; --dx-muted:#5C6680; --dx-faint:#6A7488; --dx-line:#EBEEF5;
    --dx-grad-hero:#1276c2;
    --dx-grad-mesh:radial-gradient(125% 125% at 0% 0%,#EEF0FF 0%,rgba(238,240,255,0) 56%);
    --dx-sh-1:0 1px 2px rgba(20,24,46,.04),0 1px 1px rgba(20,24,46,.03);
    --dx-sh-2:0 1px 3px rgba(20,24,46,.04),0 6px 16px -6px rgba(30,30,72,.07),0 16px 32px -14px rgba(30,30,72,.10);
    --dx-sh-3:0 2px 6px rgba(20,24,46,.05),0 14px 28px -10px rgba(45,40,120,.13),0 30px 56px -18px rgba(45,40,120,.18);
    --dx-edge:inset 0 0 0 1px rgba(20,24,46,.025);
    --dx-ring:0 0 0 4px rgba(91,75,255,.13);
    --dx-r-card:20px; --dx-r-tile:14px; --dx-r-chip:11px; --dx-r-sm:10px;
    --dx-e:cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   TOP APP BAR  (global .topbar — in-scope by design)
   ============================================================ */
/* Desktop / iPad topbar = premium white card. Phones (<=620px) keep their own
   purple-gradient header (defined in the mobile block); scope this so it does NOT
   repaint the mobile header white — that hid the white text + white icons. */
@media (min-width: 621px) {
.topbar.card,
.topbar {
    background: var(--dx-surface);
    border: none;
    border-radius: var(--dx-r-card);
    box-shadow: var(--dx-sh-2), var(--dx-edge);
    padding: 14px 18px;
    gap: 20px;
}
/* subtle mesh wash behind topbar content (desktop only) */
.topbar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--dx-grad-mesh);
    pointer-events: none;
    border-radius: var(--dx-r-card);
    z-index: 0;
}
}
.topbar > * { position: relative; z-index: 1; }

.topbar .profile-avatar {
    border-radius: 14px;
    /* Use background-IMAGE (not the `background` shorthand) so the base rule's
       background-size:cover / position:center survive — the shorthand reset them
       to auto, which made uploaded profile photos render unfilled (blank corner). */
    background-image: var(--dx-grad-hero);
    background-size: cover;
    background-position: center;
    border: none;
    box-shadow: 0 0 0 3px #fff, 0 8px 18px -8px rgba(91,75,255,.7);
}
.topbar #welcome,
.topbar .topbar-welcome h2 {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--dx-ink);
}
.topbar #roleLine,
.topbar .topbar-welcome p {
    font-size: 12px;
    color: var(--dx-muted);
    font-weight: 500;
}
/* Welcome text: keep the static gradient accent, kill the typewriter cursor +
   shimmer animation (per request). background-position centers the purple band. */
.topbar #welcome.dashboard-welcome-text,
.topbar .dashboard-welcome-text,
.topbar .dashboard-welcome-text.typing-done {
    animation: none !important;
    border-right: none !important;
    padding-right: 0 !important;
    background-position: 50% 50% !important;
}

/* pill search */
.topbar .top-search {
    background: var(--dx-surface-2);
    border: none;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(20,24,46,.03);
    transition: box-shadow .18s var(--dx-e), background .18s var(--dx-e);
}
.topbar .top-search:focus-within {
    background: #fff;
    border: none;
    box-shadow: var(--dx-ring);
}
.topbar .top-search .search-glyph { color: var(--dx-faint); }
.topbar .top-search:focus-within .search-glyph { color: var(--dx-primary); }
.topbar #globalSearchInput {
    color: var(--dx-ink);
    font-size: 13.5px;
}
.topbar #globalSearchInput::placeholder { color: var(--dx-faint); }

/* notification icon button */
.topbar .notif-btn {
    background: var(--dx-surface-2);
    border: none;
    border-radius: var(--dx-r-tile);
    color: var(--dx-ink);
    transition: background .18s var(--dx-e), box-shadow .18s var(--dx-e);
}
.topbar .notif-btn:hover {
    background: var(--dx-surface-3);
    box-shadow: var(--dx-ring);
}
.topbar .notif-badge {
    background: #ef4444;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #fff, 0 4px 8px -2px rgba(239,68,68,.55);
}

/* gradient Create CTA with inner highlight */
.topbar #topCreateBtn.top-create-btn {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #14a1db;
    border: none;
    border-radius: var(--dx-r-tile);
    box-shadow: 0 10px 22px -10px rgba(20, 161, 219,.55), inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .18s var(--dx-e), box-shadow .18s var(--dx-e), opacity .18s var(--dx-e);
}
.topbar #topCreateBtn.top-create-btn:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 16px 30px -10px rgba(20, 161, 219,.65), inset 0 1px 0 rgba(255,255,255,.25);
}
.topbar #topCreateBtn.top-create-btn:active { transform: translateY(0) scale(.985); }

/* ============================================================
   SIDEBAR — reverted to ORIGINAL styling (2026-06-16, per user).
   The luxe-purple override was removed; the base .side-nav / .menu-item
   rules (defined earlier in this file) are the source of truth again.
   ============================================================ */

/* ============================================================
   DASHBOARD CANVAS  — neutralize the big white block; let inner
   groups read as white cards floating on an off-white canvas.
   ============================================================ */
.section-card[data-section="reports"] {
    background: var(--dx-bg);
    border: none;
    box-shadow: none;
}

/* dashboard heading */
[data-section="reports"] .dash-header h3,
.section-card[data-section="reports"] .dash-header h3 {
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--dx-ink);
}

/* ---- Filter command bar -> borderless pill toolbar ---- */
[data-section="reports"] #reportFilters.dash-filters,
[data-section="reports"] .dash-filters {
    background: var(--dx-surface);
    border: none;
    border-radius: var(--dx-r-card);
    box-shadow: var(--dx-sh-2), var(--dx-edge);
    padding: 10px 12px;
    gap: 10px;
}
[data-section="reports"] .dash-filter-chip {
    background: var(--dx-surface-2);
    border: none;
    border-radius: var(--dx-r-chip);
    transition: background .16s var(--dx-e), box-shadow .16s var(--dx-e);
}
[data-section="reports"] .dash-filter-chip:hover,
[data-section="reports"] .dash-filter-chip:focus-within {
    background: var(--dx-surface-3);
    border: none;
    box-shadow: var(--dx-ring);
}
[data-section="reports"] .dash-filter-chip svg { color: var(--dx-muted); }
[data-section="reports"] .dash-filter-chip > select,
[data-section="reports"] .dash-filter-chip > input,
[data-section="reports"] .dash-filter-chip--date .date-display-text { color: var(--dx-ink); }

/* ============================================================
   KPI CARDS  — borderless hero finish, layered shadow, mesh wash,
   big tabular numerals, refined eyebrow labels, hover lift.
   ============================================================ */
[data-section="reports"] .dash-kpi-zone .info-cards { gap: 0.85rem; }

[data-section="reports"] .dash-kpi-zone .info-card,
[data-section="reports"] .info-cards .info-card {
    position: relative;
    overflow: hidden;
    border: none !important;
    border-left: none !important;
    border-radius: var(--dx-r-card);
    background: var(--dx-surface);
    box-shadow: var(--dx-sh-2), var(--dx-edge);
    transition: transform .2s var(--dx-e), box-shadow .2s var(--dx-e);
}
/* mesh wash overlay (kept behind content) */
[data-section="reports"] .dash-kpi-zone .info-card::before,
[data-section="reports"] .info-cards .info-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--dx-grad-mesh);
    pointer-events: none;
}
[data-section="reports"] .dash-kpi-zone .info-card > *,
[data-section="reports"] .info-cards .info-card > * { position: relative; z-index: 1; }

[data-section="reports"] .dash-kpi-zone .info-card:hover,
[data-section="reports"] .info-cards .info-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--dx-sh-3), var(--dx-edge);
}

/* eyebrow label + big numeral */
[data-section="reports"] .info-card .info-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--dx-faint);
}
[data-section="reports"] .info-card .info-value {
    color: var(--dx-ink);
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
[data-section="reports"] .info-card .info-sub { color: var(--dx-muted); }

/* emphasise completion / efficiency style cards with a tinted accent */
[data-section="reports"] .info-card.info-card-completed {
    background: linear-gradient(135deg, #F2FCF7 0%, #ffffff 60%);
}
[data-section="reports"] .info-card.info-card-completed .info-value { color: #0a8f63; }
[data-section="reports"] .info-card.info-card-completed .info-label { color: #0a8f63; }
[data-section="reports"] .info-card.info-card-total .info-value,
[data-section="reports"] .info-card.info-card-managing .info-value,
[data-section="reports"] .info-card.info-card-monitoring .info-value { color: var(--dx-ink); }

/* keep the selected-KPI ring readable on the new white card */
[data-section="reports"] .info-card.info-card-selected {
    outline: none;
    box-shadow: var(--dx-sh-2), 0 0 0 3px rgba(91,75,255,.45);
}

/* ============================================================
   INFOGRAPHICS  — chart cards, donut/ring, stat meters, bar meters
   ============================================================ */
[data-section="reports"] .chart-card {
    border: none;
    border-radius: var(--dx-r-card);
    background: var(--dx-surface);
    box-shadow: var(--dx-sh-2), var(--dx-edge);
    transition: transform .2s var(--dx-e), box-shadow .2s var(--dx-e);
}
[data-section="reports"] .chart-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--dx-sh-3), var(--dx-edge);
}
[data-section="reports"] .chart-card h5 { color: var(--dx-ink); letter-spacing: -.01em; }

/* donut/ring: green drop-glow + clean inner */
[data-section="reports"] .ring {
    filter: drop-shadow(0 10px 20px rgba(16,185,129,.18));
}
[data-section="reports"] .ring::after {
    box-shadow: inset 0 1px 4px rgba(16,185,129,.10);
}
[data-section="reports"] .ring-pct { color: var(--dx-ink); letter-spacing: -.03em; }
[data-section="reports"] .ring-total { color: var(--dx-muted); }
[data-section="reports"] .ring-card-pill {
    color: var(--dx-primary);
    background: rgba(91,75,255,.09);
}

/* legend stat rows -> refined meters */
[data-section="reports"] .stat-row { border-radius: var(--dx-r-chip); }
[data-section="reports"] .stat-row:hover { background: var(--dx-surface-2); }
[data-section="reports"] .stat-row__label { color: var(--dx-muted); }
[data-section="reports"] .stat-row__num { color: var(--dx-ink); }
[data-section="reports"] .stat-row__pct { color: var(--dx-muted); }
[data-section="reports"] .stat-row__bar { background: #EAEDF4; height: 4px; }

/* bar rows / leaderboard meters -> refined */
[data-section="reports"] .bar-row-clickable { border-radius: var(--dx-r-chip); }
[data-section="reports"] .bar-row-clickable:hover { background: var(--dx-surface-2); }
[data-section="reports"] .bar-label { color: var(--dx-ink); }
[data-section="reports"] .bar-designation,
[data-section="reports"] .bar-meta { color: var(--dx-muted); }
[data-section="reports"] .bar-track {
    background: #EAEDF4;
    height: 6px;
    box-shadow: inset 0 1px 2px rgba(20,24,46,.05);
}

/* section divider heading */
[data-section="reports"] .dash-section-divider h4,
[data-section="reports"] .report-infographics h4 { color: var(--dx-ink); }
[data-section="reports"] .dash-section-divider-line { background: var(--dx-line); }

/* ============================================================
   TASKS REGISTRY  — segmented status pills, refined tools, sticky
   uppercase header, roomier rows, status pills, avatars, row hover.
   ============================================================ */
/* status filter pills -> segmented filled look */
[data-section="reports"] .report-status-pill {
    border: none;
    background: var(--dx-surface-2);
    color: var(--dx-muted);
    border-radius: 999px;
    transition: background .16s var(--dx-e), color .16s var(--dx-e), box-shadow .16s var(--dx-e);
}
[data-section="reports"] .report-status-pill:hover {
    border: none;
    background: var(--dx-surface-3);
    color: var(--dx-primary);
}
[data-section="reports"] .report-status-pill.active { border: none; color: #fff; }
[data-section="reports"] .report-status-pill.active[data-status="all"] {
    background: var(--dx-primary);
    box-shadow: 0 8px 18px -6px rgba(91,75,255,.55);
}

/* table tools bar -> borderless surface */
[data-section="reports"] .report-table-tools {
    background: var(--dx-surface);
    border: none;
    border-radius: var(--dx-r-tile) var(--dx-r-tile) 0 0;
    box-shadow: var(--dx-edge);
    padding: 14px 18px;
}
[data-section="reports"] .report-type-filter span { color: var(--dx-muted); }
[data-section="reports"] .report-type-filter select {
    border: none;
    background: var(--dx-surface-2);
    border-radius: var(--dx-r-sm);
    color: var(--dx-ink);
}
[data-section="reports"] .report-table-tools input[type="search"] {
    border: none;
    background: var(--dx-surface-2);
    border-radius: var(--dx-r-sm);
    color: var(--dx-ink);
    transition: box-shadow .16s var(--dx-e), background .16s var(--dx-e);
}
[data-section="reports"] .report-table-tools input[type="search"]:focus {
    background: #fff;
    box-shadow: var(--dx-ring);
}
/* Date-range filter -> match the dx surface inputs */
[data-section="reports"] .report-table-tools .report-date-filter input[type="date"] {
    border: none;
    background: var(--dx-surface-2);
    border-radius: var(--dx-r-sm);
    color: var(--dx-ink);
    transition: box-shadow .16s var(--dx-e), background .16s var(--dx-e);
}
[data-section="reports"] .report-table-tools .report-date-filter input[type="date"]:focus {
    background: #fff;
    box-shadow: var(--dx-ring);
}
[data-section="reports"] .report-table-tools .report-date-filter .report-date-sep { color: var(--dx-muted); }
[data-section="reports"] .report-table-tools .report-date-clear {
    border: none;
    background: var(--dx-surface-2);
    color: var(--dx-muted);
    transition: background .16s var(--dx-e), color .16s var(--dx-e);
}
[data-section="reports"] .report-table-tools .report-date-clear:hover {
    background: var(--dx-surface-3);
    color: var(--dx-primary);
}
/* Export CSV -> ghost surface button (override the outlined secondary) */
[data-section="reports"] .report-table-tools #exportCsvBtn.report-btn-secondary,
[data-section="reports"] .report-table-tools .report-btn-secondary {
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    background: var(--dx-surface-2) !important;
    color: var(--dx-ink) !important;
    border: none !important;
    border-radius: var(--dx-r-sm) !important;
    box-shadow: none;
    transition: background .16s var(--dx-e), color .16s var(--dx-e);
}
[data-section="reports"] .report-table-tools #exportCsvBtn.report-btn-secondary:hover,
[data-section="reports"] .report-table-tools .report-btn-secondary:hover {
    background: var(--dx-surface-3) !important;
    color: var(--dx-primary) !important;
}

/* pager buttons */
[data-section="reports"] .report-table-pager .ghost {
    width: auto;
    border: none;
    background: var(--dx-surface-2);
    border-radius: var(--dx-r-sm);
    color: var(--dx-ink);
}
[data-section="reports"] .report-table-pager .ghost:hover:not(:disabled) {
    background: var(--dx-surface-3);
    border: none;
}
[data-section="reports"] .report-pager-info,
[data-section="reports"] .report-table-pager span:not(.report-pager-info) { color: var(--dx-muted); }

/* table surface + sticky uppercase header */
.section-card[data-section="reports"] .table-wrap {
    border: none;
    box-shadow: var(--dx-edge);
    border-radius: 0 0 var(--dx-r-tile) var(--dx-r-tile);
}
.section-card[data-section="reports"] th,
.section-card[data-section="reports"] #reportHead th {
    position: sticky;
    top: 0;
    background: var(--dx-surface);
    color: var(--dx-faint);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--dx-line);
}
/* roomier rows (~17px) + cleaner separators */
.section-card[data-section="reports"] td,
.section-card[data-section="reports"] #reportBody td {
    padding: 17px 18px;
    border-bottom: 1px solid var(--dx-line);
    background: var(--dx-surface);
}
.section-card[data-section="reports"] #reportBody tr:last-child td { border-bottom: none; }

/* row hover: surface tint + 3px inset purple accent on first cell */
.section-card[data-section="reports"] tbody tr:hover td,
.section-card[data-section="reports"] #reportBody tr:hover td { background: var(--dx-surface-2); }
.section-card[data-section="reports"] #reportBody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--dx-primary);
}

/* registry typography */
.section-card[data-section="reports"] .report-task-main { color: var(--dx-ink); letter-spacing: -.01em; }
.section-card[data-section="reports"] .report-task-sub { color: var(--dx-faint); }
.section-card[data-section="reports"] .report-person-name { color: var(--dx-muted); }
.section-card[data-section="reports"] .report-time-main { color: var(--dx-ink); }
.section-card[data-section="reports"] .report-time-sub { color: var(--dx-faint); }
.section-card[data-section="reports"] .report-cell-report { color: var(--dx-muted); }

/* avatar cells -> tonal rounded-square chips with white ring */
.section-card[data-section="reports"] .report-person-cell .task-mini-avatar {
    border-radius: 10px;
    background: #ECEBFF;
    border: none;
    color: var(--dx-primary);
    box-shadow: 0 0 0 2.5px #fff, inset 0 0 0 1px rgba(20,24,46,.05);
}
.section-card[data-section="reports"] .report-person-secondary .task-mini-avatar {
    border-radius: 8px;
    background: #EDF0F6;
    border: none;
    color: #46536E;
    box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px rgba(20,24,46,.05);
}
/* Avatar GROUP (performer -> assigner): overlap like the mockup .avgrp, sized
   to 30px rounded-square, white ring. The first chip is the performer (indigo
   tone, kept above); the second chip (assigner) gets a slate tone and overlaps. */
.section-card[data-section="reports"] .report-cell-people .dx-avgrp .task-mini-avatar {
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
    border-radius: 10px;
}
.section-card[data-section="reports"] .report-cell-people .dx-avgrp .task-mini-avatar + .task-mini-avatar {
    margin-left: -9px;
    background: #EDF0F6;
    color: #46536E;
}

/* status badges -> mockup pill palette (soft tints, no harsh border, sentence
   case to match the mockup .st-pill — the global registry rule forces uppercase). */
.section-card[data-section="reports"] .status-badge {
    border: none;
    font-weight: 650;
    padding: 6px 12px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.72rem;
}
.section-card[data-section="reports"] .status-badge.status-in_progress {
    background: rgba(91,75,255,.10);
    color: var(--dx-primary-700);
}
.section-card[data-section="reports"] .status-badge.status-completed,
.section-card[data-section="reports"] .status-badge.status-completed_on_time,
.section-card[data-section="reports"] .status-badge.status-completed_late {
    background: rgba(16,185,129,.12);
    color: #0a8f63;
}
.section-card[data-section="reports"] .status-badge.status-overdue {
    background: rgba(251,94,107,.12);
    color: #d83a48;
}
.section-card[data-section="reports"] .status-badge.status-report_submitted,
.section-card[data-section="reports"] .status-badge.status-pending_approval,
.section-card[data-section="reports"] .status-badge.status-report_pending {
    background: rgba(245,158,11,.14);
    color: #b45309;
}

/* row action button -> soft indigo chip (mockup .act) */
.section-card[data-section="reports"] #reportBody button.ghost {
    width: auto;
    border: none;
    background: rgba(91,75,255,.08);
    color: var(--dx-primary);
    border-radius: 8px;
    font-weight: 600;
    transition: background .15s var(--dx-e);
}
.section-card[data-section="reports"] #reportBody button.ghost:hover {
    background: rgba(91,75,255,.16);
}
/* ===== END DASHBOARD PREMIUM POLISH (2026-06-16) ===== */

/* ============================================================================
   ===== DASHBOARD STAGE-2 COMPONENTS (2026-06-16) =====
   Styles the NEW dx-* markup the dashboard render functions now emit
   (KPI hero cards + stat band, Operational-Insights radial + leaderboard
   podium, Team-Productivity sparkline cards, Subtask pipeline, Smart-Insight
   cards, refined registry rows). Reuses the --dx-* tokens declared by the
   Stage-1 block on [data-section="reports"]. CSS-ONLY, additive.

   Scope rule: EVERY selector is prefixed with [data-section="reports"] so the
   generic class names (.ring-wrap, .trend, .clear, .lg-row, .ovd-num,
   .eff-band, .hero-foot, .dx-*) cannot leak into other modules or collide
   with global app CSS.

   Overrides of note:
     - Stage-1 styles ALL .info-card (radius/shadow/::before mesh). The band
       cells (.info-card.dx-cell) must be FLATTENED — higher specificity here
       removes their own radius/shadow/border and disables the ::before wash.
     - Global .ring (line ~40892, --size:140px, --ring-stops conic) and
       .info-donut (line ~7802, 180px) are beaten by the 2-class selectors
       .dx-ring.ring / .info-donut.dx-radial.
     - .dx-statrow is a real <button>; global button{width:100%} is reset.
       .dx-lb-row/.dx-tcard/.dx-pcol are <div role=button>, no reset needed.
     - .bar-fill stays width-driven here (JS sets inline width), gradient only.
   ============================================================================ */

/* ── KPI: wrapper, hero grid, stat band ─────────────────────────────────── */
[data-section="reports"] .info-cards.kpi-single-row {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
[data-section="reports"] .dx-heroes {
    display: grid;
    grid-template-columns: 2fr 2fr 1.15fr 1.15fr;
    gap: 18px;
}
/* Hero tiles keep the Stage-1 .info-card finish; add the mockup hero shape. */
[data-section="reports"] .info-card.dx-hero {
    display: flex;
    flex-direction: column;
    padding: 22px;
    min-height: 176px;
}
[data-section="reports"] .info-card.dx-hero .info-label { position: relative; }
[data-section="reports"] .info-card.dx-hero .info-value {
    font-size: 48px;
    font-weight: 800;
    line-height: .95;
    margin: 16px 0 0;
}

/* Stat band — ONE borderless surface; cells are hairline-divided, flattened. */
[data-section="reports"] .dx-band {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: var(--dx-surface);
    border-radius: var(--dx-r-card);
    box-shadow: var(--dx-sh-2), var(--dx-edge);
    overflow: hidden;
}
/* Flatten the band cells: kill their own border/shadow/radius + mesh wash. */
[data-section="reports"] .dx-band .info-card.dx-cell {
    position: relative;
    padding: 16px 18px;
    min-height: 0;
    border: none !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    border-right: 1px solid var(--dx-line) !important;
    transition: background .16s var(--dx-e);
}
[data-section="reports"] .dx-band .info-card.dx-cell::before { display: none; }
[data-section="reports"] .dx-band .info-card.dx-cell:last-child { border-right: none; }
[data-section="reports"] .dx-band .info-card.dx-cell:hover { background: var(--dx-surface-2); }
[data-section="reports"] .dx-band .info-card.dx-cell .info-value {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.03em;
    margin: 0;
}
[data-section="reports"] .dx-band .info-card.dx-cell .info-label { margin-bottom: 0; }
[data-section="reports"] .dx-band .info-card.dx-cell .info-sub {
    font-size: 10.5px;
    margin-top: 1px;
}
/* selected band cell still reads on the flat surface */
[data-section="reports"] .dx-band .info-card.dx-cell.info-card-selected {
    background: rgba(91,75,255,.07);
    box-shadow: inset 0 0 0 2px rgba(91,75,255,.40);
}

/* Total hero — sparkline + footer trend */
[data-section="reports"] .info-card.dx-hero .dx-spark.spark { margin-top: auto; position: relative; }
[data-section="reports"] .info-card.dx-hero .dx-spark svg { display: block; }
[data-section="reports"] .info-card.dx-hero .hero-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    position: relative;
}
[data-section="reports"] .hero-foot .trend,
[data-section="reports"] .dx-tcard .dx-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
}
[data-section="reports"] .hero-foot .trend svg { width: 12px; height: 12px; stroke-width: 2.6; fill: none; }
[data-section="reports"] .hero-foot .trend.up { background: rgba(16,185,129,.12); color: #0a8f63; }
[data-section="reports"] .hero-foot .trend.up svg { stroke: #0a8f63; }
[data-section="reports"] .hero-foot .trend.down { background: rgba(251,94,107,.12); color: #d83a48; }
[data-section="reports"] .hero-foot .trend.down svg { stroke: #d83a48; }
[data-section="reports"] .hero-foot .trend-note { font-size: 11.5px; color: var(--dx-faint); font-weight: 450; }

/* Completion hero — ring + legend */
[data-section="reports"] .info-card.dx-hero .ring-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: auto 0;
    position: relative;
}
/* ---- Mobile overflow safety ----------------------------------------------
   Nothing in the dashboard may force the page wider than the viewport. Grid/flex
   children are allowed to shrink (min-width:0), and the panel headers + trend-top
   + ring-wrap WRAP so the right-side controls ("Last N days" select, "+X% vs last
   week" chip, "All Designations" filter) and the legend never get clipped. */
[data-section="reports"] .dx-panel,
[data-section="reports"] .info-card,
[data-section="reports"] .dx-tcard,
[data-section="reports"] .dx-pcol,
[data-section="reports"] .dx-ai { min-width: 0; max-width: 100%; }
[data-section="reports"] .dx-panel-h { flex-wrap: wrap; gap: 8px 10px; }
[data-section="reports"] .dx-panel-h > h4,
[data-section="reports"] .dx-panel-h > h5 { min-width: 0; }
[data-section="reports"] .dx-trend-top { flex-wrap: wrap; gap: 8px 12px; }
[data-section="reports"] .info-card.dx-hero .ring-wrap { flex-wrap: wrap; }
[data-section="reports"] .ring-wrap .ring-legend { min-width: 0; }
/* Final guarantee on phones: the dashboard can never force a horizontal page
   scroll (which was shifting every card's right edge — selector/chip/filter —
   off-screen). overflow-x:clip (not hidden) avoids creating a scroll container. */
@media (max-width: 620px) {
    [data-section="reports"] { overflow-x: clip; }
}
/* Override global .ring (140px / --ring-stops). 2-class selector wins. */
[data-section="reports"] .ring-wrap .dx-ring.ring {
    --c: #10B981;
    width: 118px;
    height: 118px;
    flex: 0 0 118px;
    display: block;
    place-items: initial;
    border-radius: 50%;
    background: conic-gradient(var(--c) calc(var(--p, 0) * 3.6deg), #E7F6EF 0);
    filter: drop-shadow(0 10px 20px rgba(16,185,129,.20));
}
[data-section="reports"] .ring-wrap .dx-ring.ring::after {
    content: "";
    position: absolute;
    inset: 11px;
    background: #fff;
    border-radius: 50%;
    z-index: 0;
    box-shadow: inset 0 1px 4px rgba(16,185,129,.10);
}
[data-section="reports"] .ring-wrap .dx-ring.ring .ring-c {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    z-index: 1;
}
[data-section="reports"] .ring-wrap .dx-ring.ring .ring-c b {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--dx-ink);
}
[data-section="reports"] .ring-wrap .dx-ring.ring .ring-c b .info-value {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    color: inherit;
}
[data-section="reports"] .ring-wrap .dx-ring.ring .ring-c small {
    font-size: 10.5px;
    color: var(--dx-muted);
    font-weight: 600;
}
/* SVG completion ring — crisp on every browser (replaces the conic-gradient ring,
   which rendered a seam notch + colour fringe on some mobile browsers). */
[data-section="reports"] .ring-wrap .dx-ring2 { position: relative; width: 118px; height: 118px; flex: 0 0 118px; }
[data-section="reports"] .dx-ring2 .dx-ring2-svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
[data-section="reports"] .dx-ring2 .dx-ring2-track { fill: none; stroke: #E6E8EF; stroke-width: 11; }
[data-section="reports"] .dx-ring2 .dx-ring2-prog { fill: none; stroke: #10B981; stroke-width: 11; stroke-linecap: round; stroke-dasharray: 326.726; filter: drop-shadow(0 6px 12px rgba(16,185,129,.22)); }
[data-section="reports"] .dx-ring2 .ring-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
[data-section="reports"] .dx-ring2 .ring-c b { font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--dx-ink); }
[data-section="reports"] .dx-ring2 .ring-c b .info-value { font-size: inherit; font-weight: inherit; margin: 0; color: inherit; }
[data-section="reports"] .dx-ring2 .ring-c small { font-size: 10.5px; color: var(--dx-muted); font-weight: 600; }
[data-section="reports"] .ring-wrap .ring-legend {
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 12.5px;
}
[data-section="reports"] .ring-legend .lg-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--dx-muted);
}
[data-section="reports"] .ring-legend .lg-row .lg-dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex: 0 0 9px;
}
[data-section="reports"] .ring-legend .lg-row b {
    color: var(--dx-ink);
    font-weight: 700;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
/* Clickable legend rows — each filters the task registry by its status, like the
   KPI cards. Negative margin + padding keeps the hover/selected pill from
   widening the legend column. */
[data-section="reports"] .ring-legend .lg-row.lg-clickable {
    cursor: pointer;
    margin: -3px -6px;
    padding: 3px 6px;
    border-radius: 7px;
    transition: background 0.15s ease, color 0.15s ease;
}
[data-section="reports"] .ring-legend .lg-row.lg-clickable:hover {
    background: var(--dx-hover, rgba(91, 75, 255, 0.08));
    color: var(--dx-ink);
}
[data-section="reports"] .ring-legend .lg-row.lg-clickable:focus-visible {
    outline: 2px solid #1276c2;
    outline-offset: 1px;
}
[data-section="reports"] .ring-legend .lg-row.lg-selected {
    background: var(--dx-hover, rgba(91, 75, 255, 0.12));
    color: var(--dx-ink);
    font-weight: 600;
}

/* Overdue hero — calm zero-state */
[data-section="reports"] .info-card.dx-hero .ovd-ok {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 11px;
}
[data-section="reports"] .ovd-ok .ovd-num.info-value {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    margin: 0;
}
[data-section="reports"] .ovd-ok .clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #0a8f63;
    background: rgba(16,185,129,.10);
    padding: 5px 11px;
    border-radius: 999px;
    width: fit-content;
}
[data-section="reports"] .ovd-ok .clear svg { width: 14px; height: 14px; stroke: #0a8f63; stroke-width: 2.4; fill: none; flex: 0 0 14px; }
/* calm overdue hero -> green icon tint */
[data-section="reports"] .info-card.dx-hero.is-clear .hero-ico { background: rgba(16,185,129,.11); }
[data-section="reports"] .info-card.dx-hero.is-clear .hero-ico svg { stroke: var(--dx-success); }

/* Efficiency hero — meter */
[data-section="reports"] .info-card.dx-hero .hero-val-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 16px 0 0;
}
[data-section="reports"] .hero-val-row .info-value {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    margin: 0;
}
[data-section="reports"] .hero-val-row .eff-suffix { font-size: 18px; color: var(--dx-muted); font-weight: 700; }
[data-section="reports"] .info-card.dx-hero .eff-band {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dx-success);
    margin-top: 6px;
}
[data-section="reports"] .info-card.dx-hero .dx-meter.meter {
    height: 9px;
    border-radius: 999px;
    background: #EAEDF4;
    overflow: hidden;
    margin-top: 10px;
    box-shadow: inset 0 1px 2px rgba(20,24,46,.06);
}
[data-section="reports"] .info-card.dx-hero .dx-meter.meter > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--dx-grad-hero);
    box-shadow: 0 2px 8px -1px rgba(91,75,255,.5);
}

/* ── OPERATIONAL INSIGHTS — two-col panels, radial, leaderboard ─────────── */
[data-section="reports"] .dx-two-col {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 18px;
}
[data-section="reports"] .dx-panel {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: var(--dx-surface);
    border-radius: var(--dx-r-card);
    box-shadow: var(--dx-sh-2), var(--dx-edge);
    border: none;
}
[data-section="reports"] .dx-panel-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
[data-section="reports"] .dx-panel-h h4,
[data-section="reports"] .dx-panel-h h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -.01em;
    color: var(--dx-ink);
}
[data-section="reports"] .dx-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--dx-primary);
    background: rgba(91,75,255,.09);
    padding: 4px 10px;
    border-radius: 999px;
}
/* Completion-trend range picker — looks like the .dx-tag pill but selectable */
[data-section="reports"] .dx-trendpanel .dx-range-select {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--dx-primary);
    width: auto;
    flex: 0 0 auto;
    background-color: rgba(91, 75, 255, .09);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235B4BFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 9px;
    border: 1px solid rgba(91, 75, 255, .16);
    border-radius: 999px;
    padding: 4px 26px 4px 11px;
    cursor: pointer;
    transition: background-color .14s ease;
}
[data-section="reports"] .dx-trendpanel .dx-range-select:hover { background-color: rgba(91, 75, 255, .16); }
[data-section="reports"] .dx-trendpanel .dx-range-select:focus-visible { outline: none; box-shadow: var(--dx-ring); }
[data-section="reports"] .dx-trendpanel .dx-range-select option { color: var(--dx-ink); font-weight: 600; }

/* Radial */
[data-section="reports"] .dx-radial-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: auto 0;
}
/* Override global .info-donut (180px). 2-class selector wins. */
[data-section="reports"] .dx-radial-wrap .info-donut.dx-radial {
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
    margin: 0;
    border-radius: 50%;
    position: relative;
    background: conic-gradient(var(--donut, var(--ring-stops, #10B981 0deg 360deg)));
    filter: drop-shadow(0 12px 22px rgba(16,185,129,.16));
}
[data-section="reports"] .dx-radial-wrap .info-donut.dx-radial::after {
    content: "";
    display: block;
    position: absolute;
    inset: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: inset 0 2px 8px rgba(15,23,51,.05);
    z-index: 0;
}
[data-section="reports"] .dx-radial-wrap .info-donut.dx-radial .info-donut-center.dx-radial-c {
    position: absolute;
    inset: 0;
    background: transparent;
    border-radius: 0;
    display: grid;
    place-content: center;
    text-align: center;
    gap: 0;
    z-index: 1;
}
[data-section="reports"] .dx-radial-c .info-donut-value.dx-radial-pct {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--dx-ink);
    line-height: 1;
}
[data-section="reports"] .dx-radial-c .dx-radial-suffix {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--dx-ink);
    line-height: 1;
}
[data-section="reports"] .dx-radial-c .info-donut-label.dx-radial-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--dx-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 2px;
}
/* statrows — .dx-statrow is a real <button>: reset the global button styling */
[data-section="reports"] .dx-statrows {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
[data-section="reports"] .dx-statrows .dx-statrow {
    width: auto;
    text-align: left;
    border: none;
    background: transparent;
    font: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--dx-r-chip);
    transition: background .14s var(--dx-e);
    margin: 0;
    min-height: 0;
}
[data-section="reports"] .dx-statrows .dx-statrow:hover { background: var(--dx-surface-2); }
[data-section="reports"] .dx-statrow .dx-sd { width: 10px; height: 10px; border-radius: 4px; flex: 0 0 10px; }
[data-section="reports"] .dx-statrow .dx-sn { font-size: 13px; font-weight: 550; color: var(--dx-ink); }
[data-section="reports"] .dx-statrow .dx-sv {
    margin-left: auto;
    font-weight: 750;
    font-size: 13.5px;
    color: var(--dx-ink);
    font-variant-numeric: tabular-nums;
}
[data-section="reports"] .dx-statrow .dx-sp {
    font-size: 12px;
    color: var(--dx-muted);
    width: 42px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
[data-section="reports"] .dx-statrow.dx-statrow--empty { opacity: .55; }

/* Task Progress panel footer — muted caption (left) + trend chip (right),
   separated from the radial by a hairline. Mirrors the mockup .panel-foot. */
[data-section="reports"] .dx-panel .dx-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--dx-line);
}
[data-section="reports"] .dx-panel-foot .dx-pf-l {
    font-size: 12.5px;
    color: var(--dx-muted);
    font-weight: 550;
    min-width: 0;
}
/* Standalone trend chip (panel footer): the base .dx-trend pill styling is only
   defined under .dx-tcard, so give the panel-foot chip the same pill shape. */
[data-section="reports"] .dx-panel-foot .dx-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
[data-section="reports"] .dx-panel-foot .dx-trend svg { width: 12px; height: 12px; stroke-width: 2.6; fill: none; }
[data-section="reports"] .dx-panel-foot .dx-trend.dx-trend--up { background: rgba(16,185,129,.12); color: #0a8f63; }
[data-section="reports"] .dx-panel-foot .dx-trend.dx-trend--down { background: rgba(251,94,107,.12); color: #d83a48; }

/* Completion Trend panel — replaces the duplicate status donut in Operational
   Insights with a 14-day completion-trend area chart (time, not status). */
[data-section="reports"] .dx-trend-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 2px 0 2px; }
[data-section="reports"] .dx-trend-num { display: flex; flex-direction: column; }
[data-section="reports"] .dx-trend-num b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--dx-ink); font-variant-numeric: tabular-nums; }
[data-section="reports"] .dx-trend-num span { font-size: 12px; color: var(--dx-muted); font-weight: 550; margin-top: 4px; }
[data-section="reports"] .dx-trendpanel .dx-trend { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
[data-section="reports"] .dx-trendpanel .dx-trend svg { width: 13px; height: 13px; stroke-width: 2.6; fill: none; }
[data-section="reports"] .dx-trendpanel .dx-trend.dx-trend--up { background: rgba(16,185,129,.12); color: #0a8f63; }
[data-section="reports"] .dx-trendpanel .dx-trend.dx-trend--down { background: rgba(251,94,107,.12); color: #d83a48; }
[data-section="reports"] .dx-trend-chart { flex: 1; min-height: 150px; margin: 16px 0 6px; position: relative; }
[data-section="reports"] .dx-trend-chart svg { width: 100%; height: 150px; display: block; }
[data-section="reports"] .dx-trend-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--dx-faint); font-weight: 500; padding-top: 8px; border-top: 1px solid var(--dx-line); }
[data-section="reports"] .dx-trend-empty { display: grid; place-items: center; min-height: 150px; color: var(--dx-faint); font-size: 13px; }
/* Completion-trend hover: marker dot + guide line + count tooltip (overlay on the 150px plot) */
[data-section="reports"] .dx-trend-plot { position: relative; width: 100%; height: 150px; cursor: crosshair; touch-action: none; }
[data-section="reports"] .dx-trend-plot > svg { width: 100%; height: 150px; display: block; }
[data-section="reports"] .dx-trend-guide,
[data-section="reports"] .dx-trend-mk,
[data-section="reports"] .dx-trend-tip { pointer-events: none; }
[data-section="reports"] .dx-trend-guide { position: absolute; top: 4px; bottom: 4px; width: 0; border-left: 1px dashed rgba(91, 75, 255, .45); }
[data-section="reports"] .dx-trend-mk { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--dx-primary, #1276c2); border: 2.5px solid #fff; box-shadow: 0 2px 7px rgba(91, 75, 255, .55); transform: translate(-50%, -50%); }
[data-section="reports"] .dx-trend-tip { position: absolute; transform: translate(-50%, calc(-100% - 13px)); background: #0F1733; color: #fff; padding: 6px 10px; border-radius: 9px; font-size: 12px; line-height: 1.25; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 20px rgba(15, 23, 51, .3); z-index: 6; }
[data-section="reports"] .dx-trend-tip i { font-style: normal; font-weight: 500; opacity: .72; }
[data-section="reports"] .dx-trend-tip::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #0F1733; }
[data-section="reports"] .dx-trend-tip.dx-tip-below { transform: translate(-50%, 13px); }
[data-section="reports"] .dx-trend-tip.dx-tip-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #0F1733; }
[data-section="reports"] .dx-trend-guide[hidden],
[data-section="reports"] .dx-trend-mk[hidden],
[data-section="reports"] .dx-trend-tip[hidden] { display: none; }

/* Leaderboard podium — .dx-lb-row is <div role=button> (no width reset) */
[data-section="reports"] .dx-podium {
    display: flex;
    flex-direction: column;
    gap: 9px;
    /* Show ~5 rows, then scroll the rest (keeps the panel aligned with the
       Completion Trend card instead of growing tall with the full roster). */
    max-height: 366px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: #c7cedd transparent;
}
[data-section="reports"] .dx-podium::-webkit-scrollbar { width: 7px; }
[data-section="reports"] .dx-podium::-webkit-scrollbar-track { background: transparent; }
[data-section="reports"] .dx-podium::-webkit-scrollbar-thumb {
    background: #c7cedd;
    border-radius: 999px;
}
[data-section="reports"] .dx-podium::-webkit-scrollbar-thumb:hover { background: var(--dx-muted, #5c6680); }
[data-section="reports"] .dx-podium .dx-lb-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px;
    border-radius: var(--dx-r-tile);
    background: var(--dx-surface-2);
    cursor: pointer;
    transition: background .16s var(--dx-e), transform .16s var(--dx-e);
}
[data-section="reports"] .dx-podium .dx-lb-row:hover { background: var(--dx-surface-3); transform: translateX(2px); }
[data-section="reports"] .dx-podium .dx-lb-row.top { background: linear-gradient(110deg, rgba(91,75,255,.08), rgba(79,140,255,.05)); }
[data-section="reports"] .dx-podium .dx-lb-row:nth-child(3) { margin-bottom: 7px; }
[data-section="reports"] .dx-lb-row .dx-rank {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--dx-faint);
    background: #fff;
    box-shadow: var(--dx-edge);
}
[data-section="reports"] .dx-lb-row .dx-rank.g { color: #fff; background: var(--dx-grad-hero); box-shadow: 0 6px 14px -4px rgba(91,75,255,.6); }
[data-section="reports"] .dx-lb-row .dx-rank.s { color: #46536E; background: #E9EDF4; }
[data-section="reports"] .dx-lb-row .dx-rank.b { color: #B07D1E; background: #FBF1DE; }
[data-section="reports"] .dx-lb-row .dx-av {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
    box-shadow: inset 0 0 0 1px rgba(20,24,46,.05);
}
[data-section="reports"] .dx-lb-row.top .dx-av { box-shadow: 0 5px 13px -5px rgba(91,75,255,.34), inset 0 0 0 1px rgba(91,75,255,.14); }
/* avatar hues (shared by leaderboard + team) */
[data-section="reports"] .dx-av-indigo { background: #ECEBFF; color: #1276c2; }
[data-section="reports"] .dx-av-slate { background: #EDF0F6; color: #46536E; }
[data-section="reports"] .dx-av-teal { background: #E2F6EF; color: #0E9E74; }
[data-section="reports"] .dx-av-amber { background: #FBF1DE; color: #B07D1E; }
/* real profile photo layered over the tonal initials box (initials show if it fails) */
[data-section="reports"] .dx-lb-row .dx-av,
[data-section="reports"] .dx-tcard .dx-av { position: relative; overflow: hidden; }
[data-section="reports"] .dx-av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
[data-section="reports"] .dx-lb-row .dx-lb-id { min-width: 0; }
[data-section="reports"] .dx-lb-id .dx-lb-nm {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--dx-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}
[data-section="reports"] .dx-lb-nm .dx-top-tag {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    color: #fff;
    background: var(--dx-grad-hero);
    padding: 2px 7px;
    border-radius: 999px;
    margin-left: 8px;
    box-shadow: 0 4px 10px -4px rgba(91,75,255,.7);
    flex: 0 0 auto;
}
[data-section="reports"] .dx-lb-id .dx-lb-ro { font-size: 11.5px; color: var(--dx-muted); }
[data-section="reports"] .dx-lb-row .dx-lb-stat {
    margin-left: auto;
    text-align: right;
    flex: 0 0 auto;
}
[data-section="reports"] .dx-lb-stat .dx-lb-cn {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--dx-ink);
    font-variant-numeric: tabular-nums;
}
[data-section="reports"] .dx-lb-stat .dx-lb-meter {
    width: 84px;
    height: 6px;
    border-radius: 999px;
    background: #E6EAF2;
    margin-top: 6px;
    margin-left: auto;
    overflow: hidden;
}
[data-section="reports"] .dx-lb-meter > i.bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--dx-grad-hero);
    transform-origin: left center;
}
[data-section="reports"] .dx-lb-stat .dx-lb-pct { font-size: 11px; color: var(--dx-muted); margin-top: 4px; font-weight: 600; }

/* ── TEAM PRODUCTIVITY ──────────────────────────────────────────────────── */
[data-section="reports"] .dx-team {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}
[data-section="reports"] .dx-tcard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: var(--dx-surface);
    border-radius: var(--dx-r-card);
    box-shadow: var(--dx-sh-2), var(--dx-edge);
    border: none;
    cursor: pointer;
    transition: transform .2s var(--dx-e), box-shadow .2s var(--dx-e);
}
[data-section="reports"] .dx-tcard:hover { transform: translateY(-3px); box-shadow: var(--dx-sh-3), var(--dx-edge); }
[data-section="reports"] .dx-tcard .dx-tcard-top { display: flex; align-items: center; gap: 11px; }
[data-section="reports"] .dx-tcard .dx-av {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
    box-shadow: inset 0 0 0 1px rgba(20,24,46,.05);
}
[data-section="reports"] .dx-tcard .dx-tcard-id { min-width: 0; }
[data-section="reports"] .dx-tcard-id .dx-tcard-nm {
    font-size: 13px;
    font-weight: 700;
    color: var(--dx-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-section="reports"] .dx-tcard-id .dx-tcard-ro { font-size: 11px; color: var(--dx-muted); }
[data-section="reports"] .dx-tcard .dx-tcard-score { display: flex; align-items: baseline; gap: 6px; }
[data-section="reports"] .dx-tcard-score b { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--dx-ink); }
[data-section="reports"] .dx-tcard-score span { font-size: 12px; color: var(--dx-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
[data-section="reports"] .dx-tcard .dx-star { margin-left: auto; color: var(--dx-gold); font-size: 13px; align-self: center; }
[data-section="reports"] .dx-tcard .dx-spark { position: relative; }
[data-section="reports"] .dx-tcard .dx-spark svg { display: block; }
[data-section="reports"] .dx-tcard .dx-tcard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
    padding-top: 11px;
    border-top: 1px solid var(--dx-line);
}
[data-section="reports"] .dx-tcard-foot .dx-tcard-foot-l { font-size: 11px; color: var(--dx-faint); font-weight: 500; }
[data-section="reports"] .dx-tcard .dx-trend svg { width: 12px; height: 12px; stroke-width: 2.6; fill: none; }
[data-section="reports"] .dx-tcard .dx-trend--up { background: rgba(16,185,129,.12); color: #0a8f63; }
[data-section="reports"] .dx-tcard .dx-trend--down { background: rgba(251,94,107,.12); color: #d83a48; }

/* ── SUBTASK PIPELINE ───────────────────────────────────────────────────── */
[data-section="reports"] .dx-pipe-cap { font-size: 12.5px; color: var(--dx-muted); margin: 0 2px 12px; }
[data-section="reports"] .dx-pipe-cap b { color: var(--dx-ink); }
[data-section="reports"] .dx-pipe-mix {
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    margin-bottom: 16px;
    background: #E8ECF4;
    box-shadow: inset 0 1px 2px rgba(20,24,46,.05);
}
[data-section="reports"] .dx-pipe {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
[data-section="reports"] .dx-pcol {
    position: relative;
    overflow: hidden;
    padding: 20px 18px;
    background: var(--dx-surface);
    border-radius: var(--dx-r-card);
    box-shadow: var(--dx-sh-2), var(--dx-edge);
    border: none;
    cursor: pointer;
    transition: transform .2s var(--dx-e), box-shadow .2s var(--dx-e);
}
[data-section="reports"] .dx-pcol:hover { transform: translateY(-3px); box-shadow: var(--dx-sh-3), var(--dx-edge); }
[data-section="reports"] .dx-pcol::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: var(--col, var(--dx-primary));
    opacity: .9;
}
[data-section="reports"] .dx-pcol .dx-pcol-h {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 650;
    color: var(--dx-muted);
}
[data-section="reports"] .dx-pcol-h .dx-pdot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: var(--col, var(--dx-primary)); }
[data-section="reports"] .dx-pcol .dx-pcol-n { font-size: 34px; font-weight: 800; letter-spacing: -.04em; color: var(--dx-ink); margin-top: 11px; font-variant-numeric: tabular-nums; }
[data-section="reports"] .dx-pcol .dx-pcol-x { font-size: 11.5px; color: var(--dx-faint); margin-top: 5px; }

/* ── SMART INSIGHTS ─────────────────────────────────────────────────────── */
[data-section="reports"] .dx-ai-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
[data-section="reports"] .dx-ai {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    padding: 20px;
    background: var(--dx-surface);
    border-radius: var(--dx-r-card);
    box-shadow: var(--dx-sh-2), var(--dx-edge);
    border: none;
}
[data-section="reports"] .dx-ai::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--ac, var(--dx-primary));
}
[data-section="reports"] .dx-ai .dx-ai-ico {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: var(--dx-r-tile);
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 1px rgba(20,24,46,.04);
}
[data-section="reports"] .dx-ai .dx-ai-ico svg { width: 21px; height: 21px; fill: none; stroke-width: 1.9; }
[data-section="reports"] .dx-ai .dx-ai-ico.ico-green { background: rgba(16,185,129,.11); }
[data-section="reports"] .dx-ai .dx-ai-ico.ico-green svg { stroke: var(--dx-success); }
[data-section="reports"] .dx-ai .dx-ai-ico.ico-indigo { background: rgba(91,75,255,.10); }
[data-section="reports"] .dx-ai .dx-ai-ico.ico-indigo svg { stroke: var(--dx-primary); }
[data-section="reports"] .dx-ai .dx-ai-ico.ico-coral { background: rgba(251,94,107,.11); }
[data-section="reports"] .dx-ai .dx-ai-ico.ico-coral svg { stroke: var(--dx-danger); }
[data-section="reports"] .dx-ai .dx-ai-b { min-width: 0; }
[data-section="reports"] .dx-ai-b h5 { margin: 0 0 5px; font-size: 14px; font-weight: 750; line-height: 1.3; letter-spacing: -.01em; color: var(--dx-ink); }
[data-section="reports"] .dx-ai-b p { margin: 0; font-size: 12.5px; color: var(--dx-muted); line-height: 1.5; }
[data-section="reports"] .dx-ai-b .dx-ai-spark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 11px;
    font-size: 11px;
    font-weight: 700;
    color: var(--dx-primary);
}
[data-section="reports"] .dx-ai-b .dx-ai-spark svg { flex: 0 0 auto; }
/* Clickable Smart Insight cards drill into the Tasks Registry — mirror the
   .dx-pcol lift on hover and give keyboard users a visible focus ring. */
[data-section="reports"] .dx-ai--clickable { cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
[data-section="reports"] .dx-ai--clickable:hover { transform: translateY(-3px); box-shadow: var(--dx-sh-3), var(--dx-edge); }
[data-section="reports"] .dx-ai--clickable:focus-visible { outline: 2px solid var(--dx-primary); outline-offset: 2px; }
[data-section="reports"] .dx-ai--clickable:active { transform: translateY(-1px); }

/* ── REGISTRY ROWS ──────────────────────────────────────────────────────── */
[data-section="reports"] .dx-task-cell { display: flex; align-items: center; gap: 11px; }
[data-section="reports"] .dx-task-cell .dx-pri { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
[data-section="reports"] .dx-task-cell .dx-pri-hi { background: var(--dx-danger); box-shadow: 0 0 0 3px rgba(251,94,107,.14); }
[data-section="reports"] .dx-task-cell .dx-pri-md { background: var(--dx-warning); box-shadow: 0 0 0 3px rgba(245,158,11,.14); }
[data-section="reports"] .dx-task-cell .dx-pri-lo { background: var(--dx-success); box-shadow: 0 0 0 3px rgba(16,185,129,.14); }
/* Keep the pipeline chip inside the Task column — it was overflowing into the
   Performer column. min-width:0 lets the flex cell shrink; max-width caps the
   chip so its span's existing text-overflow:ellipsis truncates the long title. */
[data-section="reports"] .dx-task-cell .dx-task-id { min-width: 0; flex: 1 1 auto; }
[data-section="reports"] .dx-task-cell .dx-task-id .pipeline-link-chip { max-width: 100%; }
[data-section="reports"] .dx-task-cell .dx-task-id .pipeline-link-chip span { min-width: 0; }
[data-section="reports"] .dx-avgrp { display: flex; align-items: center; }
[data-section="reports"] .dx-avgrp .dx-av {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 0 0 2.5px #fff, inset 0 0 0 1px rgba(20,24,46,.05);
}
[data-section="reports"] .dx-avgrp .dx-av + .dx-av { margin-left: -9px; }
[data-section="reports"] .dx-who-arrow { color: var(--dx-muted); }
/* Clicking the performer/assigner name opens the task — same as the View Task button */
[data-section="reports"] .report-person-cell.report-person-clickable { cursor: pointer; border-radius: 8px; outline: none; transition: color .14s ease; }
[data-section="reports"] .report-person-cell.report-person-clickable:hover .report-person-name,
[data-section="reports"] .report-person-cell.report-person-clickable:focus-visible .report-person-name { color: var(--dx-primary); text-decoration: underline; text-underline-offset: 2px; }
[data-section="reports"] .report-person-cell.report-person-clickable:focus-visible { box-shadow: var(--dx-ring); }
[data-section="reports"] .dx-rep { font-size: 12px; color: var(--dx-muted); font-weight: 600; }
[data-section="reports"] .dx-rep.dx-rep-ok { color: #0a8f63; }

/* ── RESPONSIVE (mirror the mockup breakpoints) ─────────────────────────── */
@media (max-width: 1280px) {
    [data-section="reports"] .dx-heroes { grid-template-columns: 1fr 1fr; }
    [data-section="reports"] .dx-band { grid-template-columns: repeat(3, 1fr); }
    [data-section="reports"] .dx-band .info-card.dx-cell:nth-child(3n) { border-right: none; }
    [data-section="reports"] .dx-band .info-card.dx-cell:nth-child(-n+3) { border-bottom: 1px solid var(--dx-line); }
    [data-section="reports"] .dx-two-col { grid-template-columns: 1fr; }
    [data-section="reports"] .dx-team { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
    [data-section="reports"] .dx-pipe { grid-template-columns: repeat(3, 1fr); }
}
/* iPad portrait / small tablet — keep multi-column, just fewer tracks */
@media (max-width: 768px) {
    [data-section="reports"] .dx-team { grid-template-columns: repeat(2, 1fr); }
    [data-section="reports"] .dx-pipe { grid-template-columns: repeat(2, 1fr); }
    [data-section="reports"] .dx-ai-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Phones — single-column heroes/pipeline/insights, 2-col band, tighter spacing */
@media (max-width: 620px) {
    [data-section="reports"] .dx-heroes { grid-template-columns: 1fr; }
    [data-section="reports"] .dx-pipe { grid-template-columns: 1fr; }
    [data-section="reports"] .dx-ai-grid { grid-template-columns: 1fr; }
    /* secondary band 3 -> 2col with cell-count-agnostic top dividers (base sets
       border:none!important so the new divider needs !important to show). */
    [data-section="reports"] .dx-band { grid-template-columns: repeat(2, 1fr); }
    [data-section="reports"] .dx-band .info-card.dx-cell:nth-child(2n) { border-right: none !important; }
    [data-section="reports"] .dx-band .info-card.dx-cell:nth-child(n+3) { border-top: 1px solid var(--dx-line) !important; }
    /* breathing room on 360-414px */
    [data-section="reports"] .dx-panel { padding: 16px; }
    [data-section="reports"] .info-card.dx-hero { padding: 16px; min-height: 0; }
    [data-section="reports"] .dx-heroes,
    [data-section="reports"] .dx-team,
    [data-section="reports"] .dx-ai-grid,
    [data-section="reports"] .dx-pipe { gap: 12px; }
    [data-section="reports"] .info-card.dx-hero .info-value { font-size: 40px; }
}
/* Small phones — single-column team cards, smaller hero numerals */
@media (max-width: 430px) {
    [data-section="reports"] .dx-team { grid-template-columns: 1fr; }
    [data-section="reports"] .info-card.dx-hero .info-value { font-size: 36px; }
    [data-section="reports"] .dx-team,
    [data-section="reports"] .dx-pipe { gap: 10px; }
}
/* ===== END DASHBOARD STAGE-2 COMPONENTS (2026-06-16) ===== */
/* Hide the Sia FAB while any full-screen modal/drawer is open (task details,
 * quick-add, report submit, deadline alert) — syncModalBodyLock() toggles
 * body.modal-open. Prevents the FAB from overlapping the drawer's action
 * buttons (e.g. Submit Report / Mark Complete on the task details panel). */
body.modal-open #aiAsstFab { display: none !important; }

/* ════ The Pupil Eye — brand colour accents (blue #14a1db + yellow #F9B016) ════ */
:root{ --brand-blue:#14a1db; --brand-blue-deep:#1488c7; --brand-yellow:#F9B016; --brand-yellow-deep:#e09a00; }
/* Yellow underline under the login wordmark — mirrors the logo's accent rule */
.login-brand-title{ position:relative; }
.login-brand-title::after{ content:""; display:block; width:62px; height:4px; margin-top:9px; border-radius:3px; background:var(--brand-yellow); }
/* Primary login button: blue by default, warm yellow on hover/focus */
.login-btn:hover, .login-btn:focus-visible{ background:var(--brand-yellow)!important; border-color:var(--brand-yellow)!important; color:#17324a!important; box-shadow:0 8px 22px rgba(249,176,22,.34)!important; }

/* ════ The Pupil — Flat Blue & Yellow design layer (overrides, last-wins) ════ */
:root{ --brand-blue:#14a1db; --brand-blue-deep:#0e7bb0; --brand-blue-ink:#0a5e88; --brand-yellow:#F9B016; --brand-yellow-deep:#e09a00; --brand-ink:#16324a; }
/* Sidebar → flat deep blue */
.side-nav{ background:#0e7bb0 !important; }
/* Sidebar active item → yellow indicator + icon */
.menu-item.active{ background:rgba(249,176,22,0.15) !important; color:#fff !important; position:relative; }
.menu-item.active::before{ content:""; position:absolute; left:0; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:var(--brand-yellow); }
.menu-item.active .menu-item-icon{ color:var(--brand-yellow) !important; }
.menu-item:hover:not(.active){ background:rgba(255,255,255,0.10) !important; }
/* Primary actions → solid yellow, navy text (flat) */
.top-create-btn, .topbar #topCreateBtn.top-create-btn, .hrms-btn-primary, .login-split button[type="submit"], .login-btn, button.btn-primary{
  background:var(--brand-yellow) !important; color:var(--brand-ink) !important; border:1px solid var(--brand-yellow) !important; box-shadow:0 4px 14px rgba(249,176,22,0.30) !important; }
.top-create-btn:hover, .topbar #topCreateBtn.top-create-btn:hover, .hrms-btn-primary:hover, .login-split button[type="submit"]:hover, .login-btn:hover, button.btn-primary:hover{
  background:var(--brand-yellow-deep) !important; color:var(--brand-ink) !important; border-color:var(--brand-yellow-deep) !important; }
.top-create-btn svg, .top-create-btn i, .login-btn-arrow, .login-split button[type="submit"] .login-btn-arrow, .hrms-btn-primary i{ color:var(--brand-ink) !important; }
/* active-nav left bar → yellow (match .menu specificity) */
.menu .menu-item.active::before{ background:var(--brand-yellow) !important; height:20px !important; }
/* disabled primary buttons must NOT look like live yellow CTAs */
.top-create-btn:disabled, .top-create-btn[disabled], .hrms-btn-primary:disabled, .hrms-btn-primary[disabled],
.login-split button[type="submit"]:disabled, .login-split button[type="submit"][disabled], button.btn-primary:disabled, .login-btn:disabled{
  background:#e7edf2 !important; color:#9aa7b2 !important; border-color:#e7edf2 !important; box-shadow:none !important; cursor:not-allowed !important; opacity:1 !important; }
/* ── Yellow primary CTAs — full coverage across the fragmented button classes ── */
.btn-primary, .ap-btn-primary, .ap-toolbar-btn-primary, .att-empty-btn-primary, .dla-btn-primary,
.ob-btn-primary, .ob-submit-btn, .ov2-circle-btn-primary, .pipeline-action-btn--primary, .pv2-btn-primary,
.rec-btn-primary, .report-btn-primary, .req-btn-primary, .qa-submit-btn, .pa-submit-btn, .rsm-submit-btn,
.staff-form-submit-btn, .hr-btn-perm-submit, .fg-save-btn, .chat-msg-save-btn, .fg-create-btn,
.circulars-create-btn, .edv-tag-create-btn, .hr-apply-leave-btn{
  background:var(--brand-yellow) !important; background-image:none !important; color:var(--brand-ink) !important;
  border:1px solid var(--brand-yellow) !important; box-shadow:0 4px 14px rgba(249,176,22,0.28) !important; }
.btn-primary:hover, .ap-btn-primary:hover, .dla-btn-primary:hover, .ob-btn-primary:hover, .ob-submit-btn:hover,
.pv2-btn-primary:hover, .rec-btn-primary:hover, .report-btn-primary:hover, .req-btn-primary:hover,
.qa-submit-btn:hover, .pa-submit-btn:hover, .rsm-submit-btn:hover, .staff-form-submit-btn:hover,
.hr-btn-perm-submit:hover, .fg-save-btn:hover, .chat-msg-save-btn:hover, .fg-create-btn:hover,
.circulars-create-btn:hover, .edv-tag-create-btn:hover, .hr-apply-leave-btn:hover, .ap-toolbar-btn-primary:hover,
.att-empty-btn-primary:hover, .ov2-circle-btn-primary:hover, .pipeline-action-btn--primary:hover{
  background:var(--brand-yellow-deep) !important; color:var(--brand-ink) !important; border-color:var(--brand-yellow-deep) !important; }
.btn-primary svg, .qa-submit-btn svg, .pv2-btn-primary svg, .hr-apply-leave-btn svg, .ob-submit-btn svg,
.btn-primary i, .qa-submit-btn i, .pv2-btn-primary i, .ob-btn-primary i, .req-btn-primary i{ color:var(--brand-ink) !important; }
/* disabled state for ALL yellow primaries */
.btn-primary:disabled, .ap-btn-primary:disabled, .dla-btn-primary:disabled, .ob-btn-primary:disabled,
.ob-submit-btn:disabled, .pv2-btn-primary:disabled, .rec-btn-primary:disabled, .report-btn-primary:disabled,
.req-btn-primary:disabled, .qa-submit-btn:disabled, .pa-submit-btn:disabled, .rsm-submit-btn:disabled,
.staff-form-submit-btn:disabled, .hr-btn-perm-submit:disabled, .fg-save-btn:disabled, .chat-msg-save-btn:disabled,
.fg-create-btn:disabled, .circulars-create-btn:disabled, .edv-tag-create-btn:disabled, .hr-apply-leave-btn:disabled{
  background:#e7edf2 !important; color:#9aa7b2 !important; border-color:#e7edf2 !important; box-shadow:none !important; cursor:not-allowed !important; }

/* ── Departments hidden from the Staff Directory (Pupil Eye: the school has no
   department taxonomy). The backend department subsystem is left intact and
   dormant. To restore the department UI, delete this block, revert the four
   department edits in staff-calendar-staff.js, and re-bump the asset version.

   NOTE (vacancy-dashboard rework): the staff-form "Department / Subject" field
   (#user_department) is intentionally RESTORED — the school-model Vacancy
   Dashboard groups by subject department and matches each staff member's
   (department, designation) against sanctioned strength, so staff must carry a
   subject. The directory department *filter*, "group by dept" toggle, Manage
   Departments button and the additional/headed-departments UI stay hidden. ── */
#manageDeptBtn, #manageDeptBtnHr,                 /* Manage Departments buttons (JS toggles .hidden, so !important) */
#hrDirDept,                                        /* directory department filter */
.hr-dir-group-label,                               /* "Group by dept" toggle */
#user_department_other,                             /* staff form: 'other department' input */
#user_additional_departments_wrap                  /* staff form: Additional/Headed Departments */
{ display: none !important; }

/* ── Fields trimmed from the Add / Edit Staff form (Pupil Eye: not relevant for a
   school's staff records). Hidden, not deleted — the markup and backend columns
   stay intact, so this is fully reversible: delete this block (and re-bump the
   asset version) to restore any field. Decided 2026-06-24 with the school:
   payroll/statutory + Branch/Location are KEPT; only the six below are dropped. ── */
.staff-form-field:has(#user_current_location),      /* redundant with Branch/Location + Address */
.staff-form-field:has(#user_source_of_hire),        /* recruitment-funnel analytics, unused */
.staff-form-field:has(#user_additional_information),/* duplicate free-text; Remarks already covers it */
.staff-form-field:has(#user_wfh_eligible),          /* work-from-home N/A for school staff */
.staff-form-field:has(#user_marital_status),        /* sensitive optional HR detail, not tracked */
.staff-form-field:has(#user_spouse_name),           /* sensitive optional HR detail, not tracked */
/* same three fields on the self-service Profile page (plain-div wrappers) */
#profileForm div:has(> #profile_source_of_hire),
#profileForm div:has(> #profile_current_location),
#profileForm div:has(> #profile_additional_information)
{ display: none !important; }

/* sidebar footer: drop the fade-to-dark overlay, match the flat sidebar */
.side-nav-footer{ background:#0e7bb0 !important; }