.glass-card--expanded .table-responsive {
    margin-top: 1rem;
}
.dashboard-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(30, 41, 59, 0.35) transparent;
}

.dashboard-table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.dashboard-table-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(30, 41, 59, 0.35);
    border-radius: 999px;
}

.dashboard-table-wrapper::-webkit-scrollbar-track {
    background-color: transparent;
}
:root {
    --brand-primary: #2f6cf3;
    --brand-secondary: rgba(255, 255, 255, 0.45);
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.18);
    --theme-transition-duration: 1.2s;
    --theme-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

body {
    /* Flat base color — the shared .ambient-mesh orb layer (base.html) paints
       the color/motion on top of this on every page. */
    background: #0a1740;
    min-height: 100vh;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    /* Body bg is always dark — use light text as the base */
    color: #e2e8f0;
    --bs-secondary-color: rgba(226, 232, 240, 0.65);
    --bs-heading-color: #f1f5f9;
}

body:not(.dark-mode) {
    background: #edf3fb;
    color: #0f172a;
    --bs-body-bg: #edf3fb;
    --bs-body-color: #0f172a;
    --bs-secondary-color: rgba(15, 23, 42, 0.72);
    --bs-heading-color: #0f172a;
    --bs-emphasis-color: #0f172a;
    --bs-tertiary-color: rgba(15, 23, 42, 0.7);
    --bs-table-color: #0f172a;
}

body:not(.dark-mode) .text-muted,
body:not(.dark-mode) .text-secondary,
body:not(.dark-mode) .small,
body:not(.dark-mode) .form-label,
body:not(.dark-mode) .form-text,
body:not(.dark-mode) .card-subtitle,
body:not(.dark-mode) .text-body-secondary {
    color: #334155 !important;
}

body:not(.dark-mode) .text-light,
body:not(.dark-mode) .text-white {
    color: #0f172a !important;
}

/* Restore dark text inside light-background containers */
.glass-card,
.modal-content,
.card {
    color: #111827;
    --bs-secondary-color: rgba(33, 37, 41, 0.75);
    /* Override the body's near-white heading color so headings are readable on light glass */
    --bs-heading-color: #111827;
}

/* Ensure body-level heading color does not leak into components */
.glass-card h1, .glass-card h2, .glass-card h3,
.glass-card h4, .glass-card h5, .glass-card h6,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.modal-content h1, .modal-content h2, .modal-content h3,
.modal-content h4, .modal-content h5, .modal-content h6 {
    color: #111827;
}

main.container {
    max-width: 1400px;
}

/* Keep authenticated page edges aligned with the full-width SQR layout. */
body.authenticated > main.container {
    max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

body.authenticated {
    background-color: var(--rh-page-bg) !important;
    background-image: none !important;
    color: var(--rh-text-primary);
    --bs-body-bg: var(--rh-page-bg);
    --bs-body-color: var(--rh-text-primary);
    --bs-heading-color: var(--rh-text-primary);
    --bs-secondary-color: var(--rh-text-secondary);
}

body.dark-mode.authenticated {
    color: var(--rh-text-primary);
}

body.requestor-modal-open {
    overflow: hidden;
}

.bg-gradient-primary {
    background: linear-gradient(120deg, #1d4ed8, #3b82f6);
}

.glass-card {
    position: relative;
    border-radius: 18px;
    background: var(--glass-bg);
    box-shadow: 0 10px 30px rgba(31, 41, 55, 0.35);
    backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border);
    z-index: 0;
}

.activity-log-grid {
    background-color: rgba(255, 255, 255, 0.68);
    background-image:
        linear-gradient(to right, rgba(148, 163, 184, 0.18) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 163, 184, 0.10) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    background-repeat: repeat-y, repeat-x, no-repeat;
    background-size: clamp(28px, 2.8vw, 42px) 100%, 100% clamp(28px, 2.8vw, 42px), 100% 100%;
    background-position: center, center, center;
    border-color: rgba(148, 163, 184, 0.16);
    position: relative;
}

body.dark-mode .activity-log-grid {
    background-color: rgba(15, 23, 42, 0.78);
    background-image:
        linear-gradient(to right, rgba(148, 163, 184, 0.20) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 163, 184, 0.12) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
    border-color: rgba(148, 163, 184, 0.18);
}

.glass-card--expanded {
    min-height: 75vh;
    padding: 1.5rem !important;
}

/* ── Dashboard stat pills ────────────────────────────────────────────────── */
.dbd-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem 0.3rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dbd-stat-pill i { font-size: 0.72rem; opacity: 0.85; }
.dbd-stat-pill__label {
    font-weight: 500;
    opacity: 0.82;
    letter-spacing: 0.01em;
}
.dbd-stat-pill__value {
    font-weight: 800;
    font-size: 0.82rem;
    padding-left: 0.18rem;
}
.dbd-stat-pill--blue {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.28);
    color: #1d4ed8;
}
.dbd-stat-pill--amber {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: #b45309;
}
.dbd-stat-pill--green {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.28);
    color: #065f46;
}
.dbd-stat-pill--red {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.28);
    color: #b91c1c;
}
/* dark-mode overrides */
body.dark-mode .dbd-stat-pill--blue  { background: rgba(59,130,246,0.14);  border-color: rgba(59,130,246,0.35);  color: #93c5fd; }
body.dark-mode .dbd-stat-pill--amber { background: rgba(245,158,11,0.14);  border-color: rgba(245,158,11,0.35);  color: #fcd34d; }
body.dark-mode .dbd-stat-pill--green { background: rgba(16,185,129,0.14);  border-color: rgba(16,185,129,0.35);  color: #6ee7b7; }
body.dark-mode .dbd-stat-pill--red   { background: rgba(239,68,68,0.14);   border-color: rgba(239,68,68,0.35);   color: #fca5a5; }

/* ── Auto-logout idle warning modal ── */
.alo-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}
.alo-overlay.is-open {
    display: flex;
    animation: aloFadeIn 0.22s ease;
}
@keyframes aloFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.alo-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 2rem 2.25rem 1.75rem;
    max-width: 360px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(15,23,42,0.22), 0 2px 8px rgba(15,23,42,0.1);
    text-align: center;
    animation: aloSlideUp 0.25s ease;
}
@keyframes aloSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.alo-icon {
    font-size: 2.4rem;
    color: #f59e0b;
    margin-bottom: 0.75rem;
    display: block;
}
.alo-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.35rem;
}
.alo-sub {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 1.25rem;
}
.alo-countdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3.5px solid #ef4444;
    font-size: 1.6rem;
    font-weight: 800;
    color: #ef4444;
    margin-bottom: 1.4rem;
    transition: border-color 0.4s, color 0.4s;
}
.alo-countdown.alo-countdown--warn {
    border-color: #f59e0b;
    color: #f59e0b;
}
.alo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.5rem;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.18s, transform 0.12s;
    box-shadow: 0 3px 10px rgba(37,99,235,0.3);
}
.alo-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.alo-btn:active { transform: translateY(0); }

/* dark-mode overrides */
body.dark-mode .alo-card {
    background: #1e293b;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
body.dark-mode .alo-title { color: #f1f5f9; }
body.dark-mode .alo-sub   { color: #94a3b8; }

/* ── Activity Summary Card (banner header) ── */
.activity-summary-card {
    border-radius: 22px;
    background: #ffffff;
    padding: clamp(1.5rem, 2vw + 1rem, 2rem) clamp(1.5rem, 2vw + 1rem, 2.25rem);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08), 0 1px 4px rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.09);
    position: relative;
    overflow: hidden;
}
/* No decorative strip */
.activity-summary-card::before {
    content: none;
}

.activity-summary-card__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 992px) {
    .activity-summary-card__body {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }
}

/* title+sub section */
.activity-summary-card__info h1 {
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 0.3rem;
    text-shadow: none;
}
.activity-summary-card__info p {
    color: #64748b;
    font-size: 0.875rem;
    margin: 0;
}

/* Metrics row */
.activity-summary-card__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.65rem;
    align-items: center;
    width: 100%;
}

/* CTA column */
.activity-summary-card__cta {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    /* vertical divider on wide screens */
}
@media (min-width: 992px) {
    .activity-summary-card__cta {
        padding-left: 1.5rem;
        border-left: 1px solid rgba(15, 23, 42, 0.1);
    }
}

/* Metric pills */
.activity-summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.1);
    color: #1e293b;
    transition:
        transform   var(--spring-dur) var(--spring),
        background  0.2s ease,
        box-shadow  var(--spring-dur) var(--spring);
}
.activity-summary-pill:hover {
    transform: translateY(-2px) scale(1.05);
    background: #e2e8f0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}
.activity-summary-pill .pill-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    flex-shrink: 0;
}
.activity-summary-pill .pill-label {
    font-size: 0.73rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.activity-summary-pill .pill-value {
    font-size: 0.92rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}

/* CTA button — blue pop on white card.
   Pulse ring animates transform+opacity on a pseudo-element (compositor-only)
   instead of box-shadow, which repaints every frame. */
.activity-summary-card .btn-create-activity {
    position: relative;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    padding: 0.65rem 1.45rem;
    border-radius: 999px;
    box-shadow:
        0 4px 16px rgba(37, 99, 235, 0.35),
        0 1px 3px rgba(37, 99, 235, 0.2);
    transition:
        background  0.18s ease,
        color       0.18s ease,
        transform   var(--spring-dur) var(--spring),
        box-shadow  var(--spring-dur) var(--spring);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}
.activity-summary-card .btn-create-activity:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    color: #ffffff;
    transform: translateY(-3px) scale(1.04);
    animation: none;
    box-shadow:
        0 10px 28px rgba(37, 99, 235, 0.45),
        0 2px 6px rgba(37, 99, 235, 0.25);
}
.activity-summary-card .btn-create-activity:active {
    transform: translateY(0) scale(0.98);
    animation: none;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
}

/* Light mode — clean white, already set as default */

.activity-log-scroll {
    max-height: 420px;
    overflow-y: auto;
    margin-top: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.activity-log-scroll::-webkit-scrollbar {
    width: 8px;
}

.activity-log-scroll::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 999px;
}

.activity-log-scroll::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.45);
    border-radius: 999px;
}

body.admin-dashboard .glass-card--expanded,
body.engineer-dashboard .glass-card--expanded {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
}

/* Improve btn-outline-info (Teams button) contrast in light mode */
body:not(.dark-mode) .btn-outline-info {
    color: #087990;
    border-color: #087990;
}
body:not(.dark-mode) .btn-outline-info:hover {
    background-color: #087990;
    color: #fff;
    border-color: #087990;
}

.table > :not(caption) > * > * {
    background-color: transparent;
}

.table tbody tr {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

/* Ensure table text is readable inside glass cards in light mode.
   Bootstrap resolves --bs-table-color → --bs-body-color, but the body
   unconditionally sets color: #e2e8f0 (light grey for the dark bg),
   causing near-invisible text on the frosted-white glass card.
   The table rule uses a 3-level var() fallback chain, so we target
   the cells directly with !important to cut through it. */
body:not(.dark-mode) .glass-card .table {
    color: #111827;
    --bs-table-color: #111827;
}
/* Target td/th inside tbody only so thead.table-dark keeps white text */
body:not(.dark-mode) .glass-card .table > tbody > tr > td,
body:not(.dark-mode) .glass-card .table > tbody > tr > th {
    color: #111827 !important;
    font-weight: 600;
}
body:not(.dark-mode) .glass-card .table > tbody > tr > td > * {
    font-weight: inherit;
}
body:not(.dark-mode) .glass-card .table .text-muted {
    color: #475569 !important;
    font-weight: 600;
}
body:not(.dark-mode) .glass-card .table .text-secondary {
    color: #475569 !important;
    font-weight: 600;
}

.request-id-cell {
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-left-color 0.2s ease;
    border-left: 4px solid transparent;
}

.request-id-cell--green {
    background-color: #d1e7dd;
    color: #0f5132;
    border-left-color: #0f5132;
}

.request-id-cell--amber {
    background-color: #fff3cd;
    color: #664d03;
    border-left-color: #ffcd39;
}

.request-id-cell--red {
    background-color: #f8d7da;
    color: #842029;
    border-left-color: #dc3545;
}

.engineer-id-cell {
    min-width: 170px;
}

.engineer-id-cell__meta .badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    letter-spacing: 0.01em;
}

.engineer-ack-timer {
    font-variant-numeric: tabular-nums;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.engineer-ack-timer--neutral {
    background-color: #e0f2fe;
    color: #075985;
    border: 1px solid #bae6fd;
}

.engineer-ack-timer--amber {
    position: relative;
    background-color: #fff3cd;
    color: #664d03;
    border: 1px solid #ffe69c;
}

.engineer-ack-timer--red {
    position: relative;
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f1aeb5;
}

/* Compositor-only pulse: expand + fade a pseudo-element ring (transform/opacity)
   rather than animating box-shadow on the main thread. */
.engineer-ack-timer--amber::after,
.engineer-ack-timer--red::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 2px solid rgba(220, 53, 69, 0.55);
    opacity: 0;
    transform: scale(1);
    pointer-events: none;
    animation: ack-ring-pulse 1.8s ease-out infinite;
}
.engineer-ack-timer--amber::after { border-color: rgba(217, 119, 6, 0.5); animation-duration: 2.4s; }

@keyframes ack-ring-pulse {
    0%   { opacity: 0.9; transform: scale(1); }
    70%  { opacity: 0;   transform: scale(1.35); }
    100% { opacity: 0;   transform: scale(1.35); }
}

body.dark-mode .engineer-ack-timer--neutral {
    background-color: rgba(14, 165, 233, 0.18);
    color: #bae6fd;
    border-color: rgba(14, 165, 233, 0.35);
}

body.dark-mode .engineer-ack-timer--amber {
    background-color: rgba(234, 179, 8, 0.22);
    color: #fde68a;
    border-color: rgba(234, 179, 8, 0.45);
}

body.dark-mode .engineer-ack-timer--red {
    background-color: rgba(220, 38, 38, 0.22);
    color: #fecaca;
    border-color: rgba(220, 38, 38, 0.45);
}

/* Ensure sub-badging is readable in dark mode */
body.dark-mode .bg-info-subtle.text-info-emphasis {
    background-color: rgba(13, 202, 240, 0.2) !important;
    color: #9eeaf9 !important;
    border-color: rgba(13, 202, 240, 0.4) !important;
}

body.dark-mode .bg-warning-subtle.text-warning-emphasis {
    background-color: rgba(255, 193, 7, 0.2) !important;
    color: #ffda6a !important;
    border-color: rgba(255, 193, 7, 0.4) !important;
}

body.dark-mode .bg-success-subtle.text-success-emphasis {
    background-color: rgba(25, 135, 84, 0.2) !important;
    color: #a3cfbb !important;
    border-color: rgba(25, 135, 84, 0.4) !important;
}

body.dark-mode .bg-primary-subtle.text-primary-emphasis,
body.dark-mode .bg-primary-subtle.text-primary {
    background-color: rgba(13, 110, 253, 0.2) !important;
    color: #9ec5fe !important;
    border-color: rgba(13, 110, 253, 0.4) !important;
}

.btn-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    border-radius: 999px;
}

.btn-outline-primary {
    border-radius: 999px;
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL SPRING ANIMATIONS
   Smooth, fluid, bouncy hover transitions applied site-wide.
   Uses cubic-bezier(0.34, 1.56, 0.64, 1) — the "spring" curve.
   @prefers-reduced-motion: all animations disabled at the bottom.
══════════════════════════════════════════════════════════════ */

/* ── CSS custom property shortcuts ── */
:root {
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-fast: cubic-bezier(0.22, 1, 0.36, 1);
    --spring-dur: 0.28s;
    --spring-dur-fast: 0.18s;
}

/* ── Buttons – ALL variants ── */
.btn {
    transition:
        background-color    var(--spring-dur-fast) ease,
        border-color        var(--spring-dur-fast) ease,
        color               var(--spring-dur-fast) ease,
        box-shadow          var(--spring-dur) var(--spring),
        transform           var(--spring-dur) var(--spring),
        opacity             var(--spring-dur-fast) ease;
    transform-origin: center bottom;
    will-change: transform;
}
.btn:hover:not(:disabled):not(.disabled) {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.btn:active:not(:disabled):not(.disabled) {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition-duration: 0.1s;
}
/* Smaller bounce for sm/xs buttons */
.btn-sm:hover:not(:disabled):not(.disabled),
.btn-xs:hover:not(:disabled):not(.disabled) {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.15);
}
/* Icon-only buttons – scale only */
.btn.btn-icon:hover:not(:disabled):not(.disabled) {
    transform: scale(1.15);
}

/* ── Badges – subtle bob ── */
.badge {
    display: inline-flex;
    align-items: center;
    transition:
        transform var(--spring-dur) var(--spring),
        box-shadow var(--spring-dur) var(--spring);
    will-change: transform;
}
.badge:hover {
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ── Glass cards ── */
.glass-card,
.activity-summary-card {
    transition:
        box-shadow        var(--spring-dur) var(--spring),
        background-color  0.25s ease,
        border-color      0.25s ease;
}
.glass-card:hover,
.activity-summary-card:hover {
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.28);
    /* keep stacking stable — z-index promotion on hover forces layer thrash while scrolling */
    position: relative;
}
/* Chart cards: pre-promote GPU layer to prevent backdrop-filter re-composite flash */
.rpt-chart-card {
    will-change: transform;      /* tells browser to pre-create compositing layer NOW, before any hover */
    isolation: isolate;          /* own stacking context from birth */
    z-index: 1;                  /* constant — never changes, so no layer re-creation on hover */
    display: flex;
    flex-direction: column;
    transition:
        transform         var(--spring-dur) var(--spring),
        box-shadow        var(--spring-dur) var(--spring),
        background-color  0.25s ease,
        border-color      0.25s ease;
}
.rpt-chart-card:hover {
    transform: translateY(-5px) !important;   /* spring lift — no scale so no canvas re-paint */
    z-index: 1 !important;                    /* same value = zero GPU layer change = no white flash */
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.32) !important;
}
/* Cards inside tables / tight spaces – lighter lift */
.table .glass-card:hover,
.list-group .glass-card:hover {
    transform: translateY(-2px) scale(1.003);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
}

/* ── Bootstrap .card ── */
.card {
    position: relative;
    z-index: 0;
    transition:
        transform         var(--spring-dur) var(--spring),
        box-shadow        var(--spring-dur) var(--spring);
}
.card:hover {
    transform: translateY(-3px) scale(1.004);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.2);
}

/* ── Form inputs – gentle focus spring ── */
.form-control,
.form-select {
    transition:
        border-color  0.2s ease,
        box-shadow    0.25s var(--spring),
        background-color 0.2s ease,
        transform     0.22s var(--spring);
    will-change: transform;
}
.form-control:focus,
.form-select:focus {
    transform: none;
    box-shadow: none;
    outline: none;
    border-color: rgba(15, 23, 42, 0.2);
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    box-shadow: none;
    outline: none;
    border-color: rgba(148, 163, 184, 0.35);
}

/* ── Table sort links ── */
.table-sort-link {
    transition:
        color       0.15s ease,
        transform   var(--spring-dur) var(--spring);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.table-sort-link:hover {
    transform: translateY(-1px);
}

/* ── Table rows – row-level hover lifts disabled; cell hover color only ──
   (rows shift layout if they scale — keep subtle background only) */
.table tbody tr {
    transition: background-color 0.15s ease;
}

/* ── Links inside tables – icon hover bounce ── */
.table td a:not(.btn) {
    transition: color 0.15s ease, transform var(--spring-dur) var(--spring);
    display: inline-block;
}
.table td a:not(.btn):hover {
    transform: translateX(2px);
}

/* ── List group items ── */
.list-group-item {
    transition:
        background-color 0.18s ease,
        transform        var(--spring-dur) var(--spring),
        box-shadow       var(--spring-dur) var(--spring);
    cursor: pointer;
}
a.list-group-item:hover,
button.list-group-item:hover,
.list-group-item-action:hover {
    transform: translateX(4px);
    box-shadow: inset 4px 0 0 var(--brand-primary);
}

/* ── Notification cards (legacy animation rules) ── */

/* (Notification action buttons, pagination, and mark-all-read – styles now defined inline within the NOTIFICATIONS PAGE section below.) */

/* ── Notification dot ── */
.notification-dot {
    transition: transform var(--spring-dur) var(--spring);
}
.notification-dot:hover {
    transform: scale(1.2);
}

/* ── Stat chips (management page) ── */
.mgmt-stat-chip {
    transition:
        transform   var(--spring-dur) var(--spring),
        box-shadow  var(--spring-dur) var(--spring);
}
.mgmt-stat-chip:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.14);
}

/* ── Table avatars ── */
.table-avatar,
.table-avatar--placeholder {
    transition:
        transform   var(--spring-dur) var(--spring),
        box-shadow  0.22s ease;
}
.table-avatar:hover,
.table-avatar--placeholder:hover {
    transform: scale(1.16);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

/* ── Modal – slide-up spring entrance ── */
.modal.fade .modal-dialog {
    transform: translateY(24px) scale(0.97);
    transition: transform 0.35s var(--spring), opacity 0.25s ease;
}
.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}

/* ── Theme toggle wrapper ── */
.theme-toggle-wrapper .checkbox-label {
    transition: transform var(--spring-dur) var(--spring);
}
.theme-toggle-wrapper .checkbox-label:hover {
    transform: scale(1.12) rotate(-5deg);
}

/* ── Dropdown items ── */
.dropdown-item {
    transition:
        background-color 0.15s ease,
        transform        var(--spring-dur) var(--spring),
        padding-left     0.18s ease;
    border-radius: 8px;
}
.dropdown-item:hover {
    transform: translateX(3px);
    padding-left: 1.1rem;
}

/* ── Breadcrumb links ── */
.breadcrumb-item a {
    transition: color 0.15s ease, transform var(--spring-dur) var(--spring);
    display: inline-block;
}
.breadcrumb-item a:hover {
    transform: translateX(2px);
}

/* ── Heading icon wrappers (e.g. notif icon wrap) ── */
.notif-header__icon-wrap {
    transition: transform var(--spring-dur) var(--spring), box-shadow var(--spring-dur) var(--spring);
}
.notif-header__icon-wrap:hover {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
}

/* ── Form check / checkbox ── */
.form-check-input {
    transition: transform var(--spring-dur) var(--spring), box-shadow 0.2s ease;
}
.form-check-input:hover {
    transform: scale(1.14);
}
.form-check-input:checked {
    transform: scale(1.1);
}

/* ── Code elements ── */
.mgmt-code,
code {
    transition: transform var(--spring-dur) var(--spring), box-shadow 0.2s ease;
    display: inline-block;
}
.mgmt-code:hover,
code:hover {
    transform: scale(1.07);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.18);
}

/* ── Accessibility: respect prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}

.alert {
    border-radius: 14px;
    transition:
        transform   var(--spring-dur) var(--spring),
        box-shadow  var(--spring-dur) var(--spring);
}
.alert:hover {
    transform: translateY(-2px) scale(1.005);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.alert-info.glass-card {
    background: rgba(219, 234, 254, 0.85);
    border-color: rgba(59, 130, 246, 0.35);
    color: #1d4ed8;
}

.request-success-toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: rgba(236, 253, 245, 0.96);
    border: 1px solid rgba(34, 197, 94, 0.35);
    box-shadow: 0 32px 70px rgba(22, 101, 52, 0.25);
    border-radius: 16px;
    color: #14532d;
    font-weight: 600;
    max-width: min(480px, 90vw);
    opacity: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%) scale(0.9);
    animation: request-success-toast-pop 0.45s ease forwards;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2050;
    pointer-events: none;
}

.request-success-toast__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.request-success-toast__svg {
    width: 32px;
    height: 32px;
}

.request-success-toast__circle {
    fill: none;
    stroke: rgba(187, 247, 208, 0.8);
    stroke-width: 2;
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation: request-success-circle 0.6s ease forwards;
}

.request-success-toast__check {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: request-success-check 0.5s ease forwards 0.2s;
}

.request-success-toast__message {
    font-size: 1rem;
}

.request-success-toast__content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
}

.request-success-toast__ticket,
.notification-toast__ticket {
    display: inline-flex;
    width: fit-content;
    padding: 0.2rem 0.55rem;
    border: 1px solid rgba(22, 163, 74, 0.3);
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.13);
    color: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.notification-toast-region {
    position: fixed;
    top: 5.25rem;
    right: 1rem;
    z-index: 2060;
    display: grid;
    width: min(420px, calc(100vw - 2rem));
    gap: 0.75rem;
    pointer-events: none;
}

.notification-toast {
    pointer-events: auto;
    padding: 1rem;
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.97);
    color: #172033;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
    animation: notification-toast-in 0.3s ease both;
}

body.dark-mode .notification-toast {
    border-color: rgba(96, 165, 250, 0.35);
    background: rgba(18, 25, 43, 0.97);
    color: #f8fafc;
}

.notification-toast__header,
.notification-toast__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.notification-toast__title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 750;
}

.notification-toast__message {
    margin: 0.65rem 0 0;
    color: inherit;
    font-size: 0.9rem;
    line-height: 1.45;
}

.notification-toast__actions {
    justify-content: flex-end;
    margin-top: 0.8rem;
}

.notification-toast__close {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.2rem;
    line-height: 1;
}

@keyframes notification-toast-in {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 575.98px) {
    .notification-toast-region {
        top: auto;
        right: 1rem;
        bottom: calc(var(--ai-chat-toggle-size, 60px) + 1.5rem + env(safe-area-inset-bottom, 0px));
        left: 1rem;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .notification-toast {
        animation: none;
    }
}

.request-success-toast--hide {
    opacity: 0;
    transform: translate(-50%, -55%) scale(0.86);
}

@keyframes request-success-toast-pop {
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes request-success-circle {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes request-success-check {
    to {
        stroke-dashoffset: 0;
    }
}

.login-success-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.login-success-overlay--visible {
    opacity: 1;
    pointer-events: auto;
}

.deployment-calendar,
.deployment-calendar--active,
body.dark-mode .deployment-calendar,
body.dark-mode .deployment-calendar--active {
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 0.875rem !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #0f172a !important;
}
body.dark-mode .deployment-calendar,
body.dark-mode .deployment-calendar--active {
    background: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    color: #e2e8f0 !important;
}

.deployment-calendar__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.25rem;
    font-size: 0.75rem;
    color: #475569;
}
body.dark-mode .deployment-calendar__summary {
    color: #94a3b8 !important;
}

.deployment-calendar__summary--active .badge {
    background: rgba(148, 163, 184, 0.12) !important;
    color: #334155 !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
}
body.dark-mode .deployment-calendar__summary--active .badge {
    background: rgba(148, 163, 184, 0.14) !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
}

.deployment-calendar__summary [data-deployment-summary-text] {
    flex: 1 1 auto;
    min-width: 160px;
}

.login-success-overlay--fade {
    opacity: 0;
    pointer-events: none;
}

.login-success-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.55));
    border-radius: 22px;
    padding: 2.75rem 3rem;
    text-align: center;
    color: #f8fafc;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.55);
    transform: scale(0.85);
    opacity: 0;
    animation: login-success-card-pop 0.45s ease forwards;
}

.login-success-card__ring {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    border: 4px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.login-success-card__ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid rgba(59, 130, 246, 0.55);
    transform: scale(1.15);
    opacity: 0;
    animation: login-success-ring 1s ease forwards;
}

.login-success-card__icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 2.25rem;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    animation: login-success-icon-pulse 1.2s ease-out forwards;
}

.login-success-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.login-success-card__subtitle {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 1.75rem;
}

.login-success-card__progress {
    width: 180px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    margin: 0 auto;
    overflow: hidden;
}

.login-success-card__progress-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #38bdf8, #60a5fa, #c084fc);
    border-radius: 999px;
    animation: login-success-progress 1.8s ease forwards;
}

@keyframes login-success-card-pop {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes login-success-ring {
    0% {
        transform: scale(1.25);
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes login-success-icon-pulse {
    0% {
        transform: scale(0.8);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    60% {
        transform: scale(1.05);
        box-shadow: 0 0 0 18px rgba(34, 197, 94, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

@keyframes login-success-progress {
    to {
        width: 100%;
    }
}

.navbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-block: 1.1rem;
}

/* ══════════════════════════════════════════════
   NAVBAR – icons + bouncy hover animations
══════════════════════════════════════════════ */

/* Brand bounce */
.navbar-brand {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.navbar-brand:hover {
    transform: scale(1.08);
    opacity: 0.9;
}

/* Nav links – base */
.navbar .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.85rem;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    position: relative;
    transition:
        color 0.18s ease,
        background 0.26s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center bottom;
    overflow: visible;
}

/* Hover – pill background + float up */
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

/* Icon inside nav link */
.navbar .nav-link .nav-icon {
    font-size: 0.92rem;
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.navbar .nav-link:hover .nav-icon {
    transform: scale(1.25) rotate(-8deg);
}

/* Active nav link */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

/* Avatar bounce */
.nav-avatar {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
    cursor: pointer;
}
.nav-avatar:hover {
    transform: scale(1.14);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

/* Username link bounce */
a.text-white-50.small {
    display: inline-block;
    transition: color 0.18s ease, transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}
a.text-white-50.small:hover {
    color: #fff !important;
    transform: translateY(-2px) scale(1.04);
}

.form-control, .form-select {
    border-radius: 12px;
    border-color: rgba(15, 23, 42, 0.1);
    background-color: rgba(255, 255, 255, 0.8);
}

.list-group-item {
    border: none;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

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

/* ══════════════════════════════════════════════
   NOTIFICATIONS PAGE – clarity-first redesign
══════════════════════════════════════════════ */

.notif-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 4rem;
}

.notif-hero,
.notif-controls,
.notif-empty {
    border: 1px solid var(--rh-border);
    background: var(--rh-surface-feature);
    box-shadow: var(--rh-shadow-panel);
    backdrop-filter: blur(14px);
}

.notif-hero {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    border-radius: 24px;
    padding: 1.2rem 1.25rem;
    margin-bottom: 0.9rem;
    position: relative;
    overflow: hidden;
}

.notif-hero::after {
    content: "";
    position: absolute;
    inset: auto -18% -45% auto;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.12), transparent 65%);
    pointer-events: none;
}

.notif-hero__content,
.notif-hero__actions {
    position: relative;
    z-index: 1;
}

.notif-hero__meta {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.notif-hero__text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.notif-hero__icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(59, 130, 246, 0.18));
    border: 1px solid rgba(99, 102, 241, 0.28);
    color: #818cf8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.notif-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #a5b4fc;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.notif-hero__title {
    color: #f8fafc;
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin: 0;
}

.notif-hero__sub {
    max-width: 660px;
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0.75rem 0 1rem;
}

.notif-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 0.9rem;
    width: 100%;
    max-width: 100%;
}

.notif-stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    min-height: 100px;
    width: 100%;
    padding: 1.05rem 1.2rem;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.46)),
        linear-gradient(155deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.16));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 1px 1px rgba(6, 18, 46, 0.05),
        0 6px 18px rgba(6, 18, 46, 0.14),
        0 20px 44px -14px rgba(6, 18, 46, 0.28);
    color: #0b1220;
    overflow: hidden;
}

.notif-stat-card--primary {
    background:
        linear-gradient(160deg, rgba(99, 102, 241, 0.18), rgba(99, 102, 241, 0.1)),
        linear-gradient(155deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.16));
    border-color: rgba(99, 102, 241, 0.28);
}

.notif-stat-card--attention {
    background:
        linear-gradient(160deg, rgba(245, 158, 11, 0.18), rgba(251, 191, 36, 0.12)),
        linear-gradient(155deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.16));
    border-color: rgba(245, 158, 11, 0.28);
}

.notif-stat-card--success {
    background:
        linear-gradient(160deg, rgba(34, 197, 94, 0.18), rgba(16, 185, 129, 0.12)),
        linear-gradient(155deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.16));
    border-color: rgba(34, 197, 94, 0.24);
}

.notif-stat-card__label {
    color: rgba(11, 18, 32, 0.78);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.notif-stat-card__value {
    color: #0b1220;
    font-size: 2.25rem;
    font-weight: 750;
    line-height: 1.05;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
}

.notif-stat-card__value--stacked {
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

.notif-hero__actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.notif-mark-all-form { margin: 0; }

.notif-btn-markall,
.notif-clear-filters,
.notif-empty__action,
.notif-page-btn,
.notif-card__action {
    min-height: 2.35rem;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.notif-btn-markall {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 0;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    padding: 0.55rem 1rem;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(99, 102, 241, 0.28);
}

.notif-btn-markall:hover,
.notif-card__action:hover,
.notif-page-btn:hover,
.notif-empty__action:hover {
    transform: translateY(-1px);
}

.notif-controls {
    border-radius: 22px;
    padding: 0.9rem 0.9rem 0.85rem;
    margin-bottom: 1rem;
}

.notif-controls__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.notif-section-title {
    margin: 0;
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 800;
}

.notif-section-sub {
    margin: 0.15rem 0 0;
    color: #94a3b8;
    font-size: 0.82rem;
}

.notif-clear-filters {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(248, 113, 113, 0.26);
    background: rgba(248, 113, 113, 0.1);
    color: #fecaca;
    font-size: 0.76rem;
    white-space: nowrap;
}

.notif-clear-filters:hover { background: rgba(248, 113, 113, 0.18); color: #fff; }
.notif-clear-filters--hero { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); color: #e2e8f0; }

.notif-filter-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.notif-filter-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-height: 2.8rem;
    padding: 0.55rem 0.7rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
}

.notif-filter-tab strong,
.notif-filter-tab i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.notif-filter-tab:hover,
.notif-filter-tab.is-active {
    border-color: rgba(129, 140, 248, 0.55);
    background: rgba(99, 102, 241, 0.16);
    color: #fff;
}

.notif-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.notif-category-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 3.8rem;
    padding: 0.65rem 0.75rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.045);
    color: #e2e8f0;
    text-decoration: none;
}

.notif-category-card:hover,
.notif-category-card.is-active {
    background: rgba(255, 255, 255, 0.08);
    border-color: currentColor;
}

.notif-category-card__icon {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
}

.notif-category-card__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.notif-category-card__text strong { font-size: 0.86rem; line-height: 1.2; }
.notif-category-card__text small { margin-top: 0.2rem; color: #94a3b8; font-size: 0.72rem; }
.notif-category-card--new { color: #93c5fd; }
.notif-category-card--assign { color: #c4b5fd; }
.notif-category-card--update { color: #67e8f9; }
.notif-category-card--complete { color: #86efac; }
.notif-category-card--remind { color: #fde68a; }

.notif-feed {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.notif-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.65rem;
    padding: 0 0.35rem;
}

.notif-group__label {
    color: #f8fafc;
    font-size: 0.95rem;
    font-weight: 800;
}

.notif-group__hint {
    margin: 0.12rem 0 0;
    color: #94a3b8;
    font-size: 0.76rem;
}

.notif-card {
    display: grid;
    grid-template-columns: 6px 3rem minmax(0, 1fr) auto;
    gap: 0;
    align-items: stretch;
    margin-bottom: 0.65rem;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    background: rgba(15, 23, 42, 0.74);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
}

.notif-card:hover {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.86);
}

.notif-card--unread {
    border-color: rgba(129, 140, 248, 0.42);
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(49, 46, 129, 0.42));
}

.notif-card__accent { width: 6px; }
.notif-card--new_request .notif-card__accent { background: #3b82f6; }
.notif-card--assignment .notif-card__accent { background: #8b5cf6; }
.notif-card--update .notif-card__accent { background: #06b6d4; }
.notif-card--completion .notif-card__accent { background: #22c55e; }
.notif-card--reminder .notif-card__accent { background: #f59e0b; }
.notif-card--system .notif-card__accent { background: #64748b; }

.notif-card__icon {
    width: 2.25rem;
    height: 2.25rem;
    align-self: start;
    justify-self: center;
    margin-top: 1rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.notif-card--new_request .notif-card__icon { background: rgba(59, 130, 246, 0.16); color: #93c5fd; }
.notif-card--assignment .notif-card__icon { background: rgba(139, 92, 246, 0.16); color: #c4b5fd; }
.notif-card--update .notif-card__icon { background: rgba(6, 182, 212, 0.16); color: #67e8f9; }
.notif-card--completion .notif-card__icon { background: rgba(34, 197, 94, 0.16); color: #86efac; }
.notif-card--reminder .notif-card__icon { background: rgba(245, 158, 11, 0.16); color: #fde68a; }
.notif-card--system .notif-card__icon { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }

.notif-card__content {
    min-width: 0;
    padding: 0.8rem 0.9rem 0.8rem 0.2rem;
}

.notif-card__topline,
.notif-card__details,
.notif-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.notif-card__topline { margin-bottom: 0.5rem; }

.notif-card__category,
.notif-card__status,
.notif-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.65rem;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.2;
}

.notif-card__category { text-transform: uppercase; letter-spacing: 0.06em; }
.notif-card--new_request .notif-card__category { background: rgba(59, 130, 246, 0.16); color: #93c5fd; }
.notif-card--assignment .notif-card__category { background: rgba(139, 92, 246, 0.16); color: #c4b5fd; }
.notif-card--update .notif-card__category { background: rgba(6, 182, 212, 0.16); color: #67e8f9; }
.notif-card--completion .notif-card__category { background: rgba(34, 197, 94, 0.16); color: #86efac; }
.notif-card--reminder .notif-card__category { background: rgba(245, 158, 11, 0.16); color: #fde68a; }
.notif-card--system .notif-card__category { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; }

.notif-card__status {
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.14);
}

.notif-card__status--read {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.1);
}

.notif-card__dot {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: #818cf8;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.14);
}

.notif-card__time {
    margin-left: auto;
    color: #94a3b8;
    font-size: 0.76rem;
    font-weight: 700;
}

.notif-card__body {
    padding: 0.7rem 0.8rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.055);
}

.notif-card__body-label {
    display: block;
    margin-bottom: 0.28rem;
    color: #94a3b8;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.notif-card__message {
    margin: 0;
    color: #f8fafc;
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.45;
}

.notif-card__details { margin-top: 0.55rem; }

.notif-tag {
    max-width: 100%;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.075);
    font-size: 0.73rem;
    font-weight: 750;
}

.notif-tag span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-tag--ref { background: rgba(99, 102, 241, 0.12); color: #c7d2fe; }
.notif-tag--source { color: #bae6fd; }

.notif-card__actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 0.8rem 0.75rem;
    min-width: 9.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.notif-inline-form { display: flex; margin: 0; }

.notif-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.055);
    color: #e2e8f0;
    padding: 0.42rem 0.65rem;
    cursor: pointer;
    font-size: 0.75rem;
}

.notif-card__action:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.notif-card__action--goto { background: rgba(99, 102, 241, 0.18); border-color: rgba(129, 140, 248, 0.34); color: #c7d2fe; }
.notif-card__action--read { color: #bbf7d0; }
.notif-card__action--delete { color: #fecaca; }

.notif-empty {
    text-align: center;
    border-radius: 28px;
    padding: 3.5rem 1rem;
}

.notif-empty__icon-wrap {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: #c7d2fe;
    font-size: 2rem;
}

.notif-empty__title {
    margin: 0 0 0.35rem;
    color: #f8fafc;
    font-size: 1.25rem;
    font-weight: 850;
}

.notif-empty__sub {
    max-width: 430px;
    margin: 0 auto 1.1rem;
    color: #cbd5e1;
    font-size: 0.92rem;
    line-height: 1.55;
}

.notif-empty__action,
.notif-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border: 1px solid rgba(129, 140, 248, 0.3);
    background: rgba(99, 102, 241, 0.13);
    color: #c7d2fe;
}

.notif-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.notif-page-btn--disabled {
    opacity: 0.4;
    pointer-events: none;
}

.notif-page-info {
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 800;
}

body:not(.dark-mode) .notif-hero {
    background: var(--rh-surface-feature);
    border-color: var(--rh-border);
    box-shadow: 0 18px 40px rgba(99, 102, 241, 0.08);
}

body:not(.dark-mode) .notif-controls,
body:not(.dark-mode) .notif-empty,
body:not(.dark-mode) .notif-card {
    background: var(--rh-surface-panel);
    border-color: var(--rh-border);
    box-shadow: var(--rh-shadow-panel);
}

body:not(.dark-mode) .notif-hero__icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(59, 130, 246, 0.14));
    border-color: rgba(99, 102, 241, 0.18);
    color: #4f46e5;
}

body:not(.dark-mode) .notif-hero__title,
body:not(.dark-mode) .notif-section-title,
body:not(.dark-mode) .notif-group__label,
body:not(.dark-mode) .notif-card__message,
body:not(.dark-mode) .notif-empty__title {
    color: var(--rh-text-primary);
}

body:not(.dark-mode) .notif-hero__sub,
body:not(.dark-mode) .notif-section-sub,
body:not(.dark-mode) .notif-group__hint,
body:not(.dark-mode) .notif-card__time,
body:not(.dark-mode) .notif-empty__sub,
body:not(.dark-mode) .notif-page-info,
body:not(.dark-mode) .notif-category-card__text small,
body:not(.dark-mode) .notif-card__body-label {
    color: var(--rh-text-muted);
}

body:not(.dark-mode) .notif-hero__eyebrow {
    color: #4338ca;
}

body:not(.dark-mode) .notif-clear-filters,
body:not(.dark-mode) .notif-clear-filters--hero {
    color: #b91c1c;
}

body:not(.dark-mode) .notif-stat-card,
body:not(.dark-mode) .notif-filter-tab,
body:not(.dark-mode) .notif-category-card,
body:not(.dark-mode) .notif-card__body,
body:not(.dark-mode) .notif-tag,
body:not(.dark-mode) .notif-card__action {
    background: rgba(248, 250, 252, 0.88);
    border-color: rgba(148, 163, 184, 0.22);
    color: #334155;
}

body:not(.dark-mode) .notif-stat-card {
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.46)),
        linear-gradient(155deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.16));
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 1px 1px rgba(6, 18, 46, 0.05),
        0 6px 18px rgba(6, 18, 46, 0.1),
        0 20px 44px -14px rgba(6, 18, 46, 0.16);
}

body:not(.dark-mode) .notif-stat-card__label {
    color: rgba(11, 18, 32, 0.78);
}

body:not(.dark-mode) .notif-stat-card__value {
    color: #0b1220;
}

body:not(.dark-mode) .notif-filter-tab {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(148, 163, 184, 0.23);
    color: #0f172a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body:not(.dark-mode) .notif-filter-tab strong,
body:not(.dark-mode) .notif-filter-tab i {
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.18);
    color: #1d4ed8;
}

body:not(.dark-mode) .notif-filter-tab.is-active {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.28);
    color: #0f172a;
}

body:not(.dark-mode) .notif-filter-tab.is-active strong,
body:not(.dark-mode) .notif-filter-tab.is-active i {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

body:not(.dark-mode) .notif-category-card {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(148, 163, 184, 0.22);
    color: #0f172a;
}

body:not(.dark-mode) .notif-category-card__icon {
    background: rgba(99, 102, 241, 0.08);
    color: #0f172a;
}

body:not(.dark-mode) .notif-category-card:hover,
body:not(.dark-mode) .notif-category-card.is-active {
    background: rgba(238, 242, 255, 0.92);
    border-color: rgba(99, 102, 241, 0.28);
}

body:not(.dark-mode) .notif-filter-tab:hover,
body:not(.dark-mode) .notif-filter-tab.is-active,
body:not(.dark-mode) .notif-category-card:hover,
body:not(.dark-mode) .notif-category-card.is-active {
    background: rgba(238, 242, 255, 0.92);
}

body:not(.dark-mode) .notif-card--unread {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 242, 255, 0.96));
}

@media (max-width: 900px) {
    .notif-hero,
    .notif-controls__header {
        flex-direction: column;
    }

    .notif-hero__actions {
        justify-content: flex-start;
    }

    .notif-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .notif-card {
        grid-template-columns: 6px 3rem minmax(0, 1fr);
    }

    .notif-card__actions {
        grid-column: 2 / -1;
        flex-direction: row;
        justify-content: flex-start;
        min-width: 0;
        padding: 0 1rem 1rem 0.2rem;
        border-left: 0;
    }

    .notif-card__action { width: auto; }
}

@media (max-width: 620px) {
    .notif-page { padding-inline: 0.25rem; }
    .notif-hero,
    .notif-controls { border-radius: 22px; padding: 1rem; }
    .notif-filter-tabs,
    .notif-category-grid { grid-template-columns: 1fr; }
    .notif-card { grid-template-columns: 5px minmax(0, 1fr); }
    .notif-card__icon { display: none; }
    .notif-card__content { padding: 0.9rem; }
    .notif-card__actions { grid-column: 2; padding: 0 0.9rem 0.9rem; }
    .notif-card__time { width: 100%; margin-left: 0; }
}

.notification-item__message {
    color: #0f172a;
}


.nav-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.4);
    transition: transform 0.3s var(--spring), box-shadow 0.25s ease;
    cursor: pointer;
}

.nav-avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-weight: 600;
}

/* ── Nav avatar dropdown ─────────────────────────────────── */
.nav-avatar-wrap {
    position: relative;
}

.nav-avatar-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 210px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.22);
    padding: 0.5rem 0;
    z-index: 2000;
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.2s var(--spring-fast), transform 0.22s var(--spring);
    transform-origin: top right;
}

.nav-avatar-menu--open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.nav-avatar-menu__header {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1rem 0.6rem;
    gap: 2px;
}

.nav-avatar-menu__name {
    font-weight: 600;
    font-size: 0.875rem;
    color: #0f172a;
    line-height: 1.3;
}

.nav-avatar-menu__role {
    font-size: 0.75rem;
    /* Reset inherited navbar-dark --bs-secondary-color so text-muted is dark on the white dropdown */
    --bs-secondary-color: rgba(100, 116, 139, 1);
    color: #64748b !important;
    text-transform: capitalize;
}

.nav-avatar-menu__divider {
    height: 1px;
    background: rgba(148, 163, 184, 0.2);
    margin: 0.3rem 0;
}

.nav-avatar-menu__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    font-size: 0.875rem;
    color: #1e293b;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    transition: background 0.13s ease, color 0.13s ease;
}

.nav-avatar-menu__item:hover {
    background: rgba(47, 108, 243, 0.07);
    color: #2f6cf3;
}

.nav-avatar-menu__item--danger {
    color: #dc2626;
}

.nav-avatar-menu__item--danger:hover {
    background: rgba(220, 38, 38, 0.07);
    color: #dc2626;
}

.nav-avatar-menu__icon {
    font-size: 0.95rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.nav-avatar-menu__logout-form {
    margin: 0;
    padding: 0;
}

/* Dark mode */
body.dark-mode .nav-avatar-menu {
    background: rgba(17, 24, 39, 0.98);
    border-color: rgba(148, 163, 184, 0.15);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

body.dark-mode .nav-avatar-menu__name {
    color: #f1f5f9;
}

body.dark-mode .nav-avatar-menu__role {
    color: #94a3b8;
}

body.dark-mode .nav-avatar-menu__divider {
    background: rgba(148, 163, 184, 0.12);
}

body.dark-mode .nav-avatar-menu__item {
    color: #e2e8f0;
}

body.dark-mode .nav-avatar-menu__item:hover {
    background: rgba(47, 108, 243, 0.15);
    color: #93c5fd;
}

body.dark-mode .nav-avatar-menu__item--danger {
    color: #f87171;
}

body.dark-mode .nav-avatar-menu__item--danger:hover {
    background: rgba(248, 113, 113, 0.1);
    color: #f87171;
}

.table-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(15, 23, 42, 0.15);
    flex: 0 0 32px;
}

.table-avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.08);
    color: #1f2937;
    font-weight: 600;
    text-transform: uppercase;
    flex: 0 0 32px;
}

.table-cell-nowrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

body.admin-dashboard .dashboard-table-wrapper table {
    --dash-grid-line: rgba(15, 23, 42, 0.08);
    --dash-grid-line-strong: rgba(15, 23, 42, 0.12);
    --dash-header-rule: rgba(15, 23, 42, 0.14);
    --dash-resize-line: rgba(100, 116, 139, 0.28);
    --dash-resize-grip: rgba(100, 116, 139, 0.45);
    --dash-resize-active: #6366f1;
    table-layout: auto;
    border-spacing: 0;
    min-width: 1200px;
    border-collapse: separate;
}

/* Soft row separators; no harsh full black grid */
body.admin-dashboard .dashboard-table-wrapper table.table--resizable th,
body.admin-dashboard .dashboard-table-wrapper table.table--resizable td {
    border-right: 1px solid transparent;
    border-bottom: 1px solid var(--dash-grid-line);
}

body.admin-dashboard .dashboard-table-wrapper table.table--resizable thead th {
    border-bottom: 1px solid var(--dash-header-rule);
    background-clip: padding-box;
    box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.04);
}

/* Subtle vertical guides only between columns (not last) */
body.admin-dashboard .dashboard-table-wrapper table.table--resizable thead th:not(:last-child),
body.admin-dashboard .dashboard-table-wrapper table.table--resizable tbody td:not(:last-child) {
    border-right-color: var(--dash-grid-line-strong);
}

body.admin-dashboard .dashboard-table-wrapper table.table--resizable th:last-child,
body.admin-dashboard .dashboard-table-wrapper table.table--resizable td:last-child {
    border-right: none;
}

body.admin-dashboard .dashboard-table-wrapper table th,
body.admin-dashboard .dashboard-table-wrapper table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.admin-dashboard .dashboard-table-wrapper table.table--resizable th {
    position: relative;
}

body.admin-dashboard .dashboard-table-wrapper table td .badge,
body.admin-dashboard .dashboard-table-wrapper table td span,
body.admin-dashboard .dashboard-table-wrapper table td a {
    white-space: nowrap;
}

body.admin-dashboard .dashboard-table-wrapper table td {
    vertical-align: middle;
}

body.admin-dashboard .dashboard-table-wrapper table td.text-end {
    overflow: visible;
    text-overflow: clip;
}

body.admin-dashboard .dashboard-table-wrapper table td .badge,
body.admin-dashboard .dashboard-table-wrapper table td span,
body.admin-dashboard .dashboard-table-wrapper table td a {
    white-space: nowrap;
}

/* Resize grip: quiet by default, clearer on header hover/drag */
body.admin-dashboard .dashboard-table-wrapper .column-resize-handle {
    position: absolute;
    right: -6px;
    top: 0;
    bottom: 0;
    width: 12px;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    z-index: 3;
}

body.admin-dashboard .dashboard-table-wrapper .column-resize-handle::before {
    content: "";
    position: absolute;
    top: 18%;
    bottom: 18%;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: var(--dash-resize-line);
    opacity: 0.55;
    pointer-events: none;
    transition: background-color 0.15s ease, opacity 0.15s ease, width 0.15s ease, top 0.15s ease, bottom 0.15s ease;
}

body.admin-dashboard .dashboard-table-wrapper .column-resize-handle::after {
    content: "";
    width: 3px;
    height: 0.85rem;
    border-radius: 999px;
    background: var(--dash-resize-grip);
    opacity: 0;
    box-shadow: none;
    transition: background-color 0.15s ease, height 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

body.admin-dashboard .dashboard-table-wrapper table.table--resizable th:hover .column-resize-handle::after,
body.admin-dashboard .dashboard-table-wrapper .column-resize-handle:hover::after,
body.admin-dashboard .dashboard-table-wrapper .column-resize-handle.is-dragging::after {
    opacity: 1;
    background: var(--dash-resize-active);
    height: 1.25rem;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

body.admin-dashboard .dashboard-table-wrapper table.table--resizable th:hover .column-resize-handle::before,
body.admin-dashboard .dashboard-table-wrapper .column-resize-handle:hover::before,
body.admin-dashboard .dashboard-table-wrapper .column-resize-handle.is-dragging::before {
    top: 8%;
    bottom: 8%;
    width: 2px;
    opacity: 1;
    background: var(--dash-resize-active);
}

body.is-column-resizing {
    cursor: col-resize;
    user-select: none;
}

body.is-column-resizing .dashboard-table-wrapper table.table--resizable {
    cursor: col-resize;
}

/* Dark mode: softer slate grid, not pure black */
body.dark-mode.admin-dashboard .dashboard-table-wrapper table {
    --dash-grid-line: rgba(148, 163, 184, 0.12);
    --dash-grid-line-strong: rgba(148, 163, 184, 0.16);
    --dash-header-rule: rgba(148, 163, 184, 0.22);
    --dash-resize-line: rgba(148, 163, 184, 0.28);
    --dash-resize-grip: rgba(148, 163, 184, 0.5);
    --dash-resize-active: #818cf8;
}

body.dark-mode.admin-dashboard .dashboard-table-wrapper table.table--resizable thead th {
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

body.requestor-dashboard .dashboard-table-wrapper table {
    table-layout: auto;
    border-spacing: 0;
    min-width: 1024px;
}

body.requestor-dashboard .dashboard-table-wrapper table th,
body.requestor-dashboard .dashboard-table-wrapper table td {
    white-space: nowrap;
    vertical-align: middle;
}

body.requestor-dashboard .dashboard-table-wrapper table td span,
body.requestor-dashboard .dashboard-table-wrapper table td .badge,
body.requestor-dashboard .dashboard-table-wrapper table td a {
    white-space: nowrap;
}

body.requestor-dashboard .dashboard-table-wrapper--requestor {
    margin-top: 1.25rem;
}

body.requestor-dashboard .table-requestor tbody tr:hover {
    background-color: transparent;
}

body.requestor-dashboard .table-requestor {
    --bs-table-hover-bg: transparent;
}

body.requestor-dashboard .table-requestor tbody tr:hover > * {
    background-color: transparent;
}

body.requestor-dashboard .table-requestor thead th {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #475569;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

body.requestor-dashboard .table-requestor td {
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.dashboard-metrics {
    --dashboard-metric-bg: rgba(15, 23, 42, 0.08);
}

.dashboard-metric-card {
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.75), rgba(30, 64, 175, 0.6));
    color: #f8fafc;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 120px;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dashboard-metric-card-link:hover .dashboard-metric-card,
.dashboard-metric-card-link:focus-visible .dashboard-metric-card {
    transform: translateY(-2px);
    box-shadow: 0 22px 40px rgba(15, 23, 42, 0.28);
}

.dashboard-metric-card--active {
    border-color: rgba(96, 165, 250, 0.75);
    box-shadow: 0 24px 45px rgba(37, 99, 235, 0.35);
}

.dashboard-metric-card__label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

.dashboard-metric-card__value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.dashboard-metric-card__hint {
    font-size: 0.8rem;
    opacity: 0.8;
}

body.requestor-dashboard .dashboard-metric-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(14, 116, 144, 0.3));
    color: #0f172a;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

body.requestor-dashboard .dashboard-metric-card--active {
    border-color: rgba(14, 116, 144, 0.55);
    box-shadow: 0 18px 35px rgba(14, 116, 144, 0.25);
}

.requestor-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.95), rgba(226, 232, 240, 0.95));
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    padding: 1.25rem 1.5rem;
}

.requestor-summary__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.requestor-summary__metric {
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.requestor-summary__label {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}

.requestor-summary__value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
}

.requestor-summary__value--ongoing {
    color: #0d6efd;
}

.requestor-summary__value--completed {
    color: #198754;
}

.requestor-summary__cta {
    margin-left: auto;
    border-radius: 999px;
    padding-inline: 1.5rem;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.35);
}

@media (max-width: 768px) {
    .requestor-summary__cta {
        width: 100%;
        text-align: center;
    }
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge--ongoing {
    background: rgba(13, 110, 253, 0.12);
    border-color: rgba(13, 110, 253, 0.28);
    color: #0d6efd;
}

.status-badge--completed {
    background: rgba(25, 135, 84, 0.12);
    border-color: rgba(25, 135, 84, 0.28);
    color: #198754;
}

.requestor-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 1050;
}

.requestor-modal--visible {
    display: block;
}

.requestor-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    -webkit-backdrop-filter: blur(10px) saturate(1.35);
    backdrop-filter: blur(10px) saturate(1.35);
}

.requestor-modal__dialog {
    position: relative;
    margin: 6vh auto;
    max-width: 560px;
    max-height: min(1000px, 88vh);
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.8), rgba(244, 247, 255, 0.68));
    border-radius: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 18px 48px rgba(15, 23, 42, 0.18),
        0 38px 80px -30px rgba(15, 23, 42, 0.28);
    border: 1px solid rgba(148, 163, 184, 0.24);
    overflow: hidden;
    -webkit-backdrop-filter: blur(22px) saturate(1.65);
    backdrop-filter: blur(22px) saturate(1.65);
    /* Force dark text — body color is light (#e2e8f0) for dark bg, breaks white modal */
    color: #0f172a;
    --bs-heading-color: #0f172a;
    --bs-body-color: #0f172a;
}

.requestor-modal__dialog--wide {
    max-width: 720px;
}

.requestor-modal__header {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    flex-shrink: 0;
}

.requestor-modal__header h2,
.requestor-modal__header .h5 {
    color: #0f172a;
}

.requestor-modal__body {
    padding: 1.5rem;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.requestor-modal__body .form-label {
    color: #1e293b;
    font-weight: 500;
}

.requestor-modal__body .form-text,
.requestor-modal__body .text-muted {
    color: #64748b !important;
}

.requestor-modal__body .form-control,
.requestor-modal__body .form-select {
    background-color: #ffffff;
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.2);
}

.requestor-modal__body .form-control::placeholder {
    color: #94a3b8;
}

.requestor-modal .btn-close {
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #475569;
    padding: 0.25rem;
}

.requestor-modal .btn-close::before {
    content: "\00d7";
}

body.dark-mode .requestor-modal__dialog {
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.68));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 18px 48px rgba(2, 6, 23, 0.42),
        0 38px 80px -30px rgba(2, 6, 23, 0.6);
    color: #e5e7eb;
    border-color: rgba(148, 163, 184, 0.25);
}

body.dark-mode .requestor-modal__header {
    border-bottom-color: rgba(148, 163, 184, 0.2);
}

body.dark-mode .requestor-modal__header h2,
body.dark-mode .requestor-modal__header .h5 {
    color: #f1f5f9;
}

body.dark-mode .requestor-modal__body .form-label,
body.dark-mode .requestor-modal__body .form-text,
body.dark-mode .requestor-modal__body .text-muted {
    color: #cbd5e1 !important;
}

body.dark-mode .requestor-modal__body .form-control,
body.dark-mode .requestor-modal__body .form-select {
    background-color: #111827;
    border-color: #374151;
    color: #f8fafc;
}

body.dark-mode .requestor-modal__body .form-control::placeholder {
    color: #94a3b8;
}

body.dark-mode .requestor-modal__body .form-select option {
    background-color: #111827;
    color: #f8fafc;
}

body.dark-mode .requestor-modal .btn-close {
    color: #e2e8f0;
}

/* Custom account-name autocomplete dropdown */
.acct-dropdown {
    position: fixed;
    z-index: 99999;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
}

.acct-dropdown__item {
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.875rem;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.12s ease;
}

.acct-dropdown__item:hover,
.acct-dropdown__item.is-active {
    background: rgba(47, 108, 243, 0.1);
    color: #2f6cf3;
}

body.dark-mode .acct-dropdown {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

body.dark-mode .acct-dropdown__item {
    color: #e2e8f0;
}

body.dark-mode .acct-dropdown__item:hover,
body.dark-mode .acct-dropdown__item.is-active {
    background: rgba(47, 108, 243, 0.2);
    color: #93c5fd;
}

.acct-dropdown__label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acct-dropdown__mark {
    padding: 0;
    background: rgba(47, 108, 243, 0.18);
    color: inherit;
    border-radius: 2px;
}

.acct-dropdown__item--create {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.55);
    background: rgba(47, 108, 243, 0.04);
    color: #1d4ed8;
    white-space: normal;
}

.acct-dropdown__item--create:hover,
.acct-dropdown__item--create.is-active {
    background: rgba(47, 108, 243, 0.12);
    color: #1d4ed8;
}

.acct-dropdown__create-label {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
}

.acct-dropdown__hint {
    font-size: 0.72rem;
    font-weight: 400;
    color: #64748b;
    line-height: 1.25;
}

body.dark-mode .acct-dropdown__mark {
    background: rgba(147, 197, 253, 0.22);
}

body.dark-mode .acct-dropdown__item--create {
    border-top-color: rgba(148, 163, 184, 0.28);
    background: rgba(47, 108, 243, 0.12);
    color: #93c5fd;
}

body.dark-mode .acct-dropdown__item--create:hover,
body.dark-mode .acct-dropdown__item--create.is-active {
    background: rgba(47, 108, 243, 0.22);
    color: #bfdbfe;
}

body.dark-mode .acct-dropdown__hint {
    color: #94a3b8;
}

@media (max-width: 640px) {
    .requestor-modal__dialog {
        margin: 4vh auto;
        max-width: 92vw;
    }
}

/* ═══════════════════════════════════════════════════
   Activity Report Modal — Redesigned one-pager
   ═══════════════════════════════════════════════════ */
.requestor-modal__dialog--act {
    max-width: 760px;
    max-height: min(840px, 92vh);
    margin: 4vh auto;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(244, 247, 255, 0.68));
    border-color: rgba(148, 163, 184, 0.22);
    color: #0f172a;
}

/* ── Header ── */
.act-modal-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.76);
    border-bottom: 1px solid rgba(15, 23, 42, 0.09);
    flex-shrink: 0;
    position: relative;
}
.act-modal-header__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #2563eb;
    flex-shrink: 0;
}
.act-modal-header__text {
    flex: 1 1 0;
    min-width: 0;
}
.act-modal-header__title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}
.act-modal-header__sub {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0.1rem 0 0;
    line-height: 1.2;
}
.act-modal-close {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid rgba(15, 23, 42, 0.15);
    background: #f8fafc;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform var(--spring-dur) var(--spring);
    flex-shrink: 0;
    padding: 0;
}
.act-modal-close:hover {
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.28);
    color: #0f172a;
    transform: scale(1.1);
}

/* ── Body ── */
.act-modal-body {
    padding: 1.1rem 1.25rem 1.25rem !important;
}

/* ── Form grid ── */
.act-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 1.1rem;
}
.act-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}
.act-form-field--full {
    grid-column: 1 / -1;
}
.act-form-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    margin: 0;
    user-select: none;
}
body:not(.dark-mode) .act-form-label,
body:not(.dark-mode) .requestor-modal__body .form-label,
body:not(.dark-mode) .requestor-modal__body .form-text,
body:not(.dark-mode) .requestor-modal__body .text-muted {
    color: #0f172a !important;
}
body:not(.dark-mode) .act-form-label .act-form-optional,
body:not(.dark-mode) .requestor-modal__body .act-form-label .act-form-optional,
body:not(.dark-mode) .act-form-optional,
body:not(.dark-mode) .requestor-modal__body .act-form-optional {
    color: #1f2937 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}
.act-form-label i {
    font-size: 0.78rem;
    color: #2563eb;
    flex-shrink: 0;
}
.act-form-label .act-form-optional {
    font-weight: 700;
    color: #334155;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.68rem;
    opacity: 1;
    line-height: 1.2;
}
body.dark-mode .act-form-label .act-form-optional {
    color: #cbd5e1;
}
.act-form-error {
    font-size: 0.72rem;
    color: #dc2626;
}

/* Compact inputs inside the act modal */
.act-modal-body .form-control,
.act-modal-body .form-select,
.act-modal-body input[type="date"] {
    font-size: 0.875rem;
    padding: 0.42rem 0.75rem;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.18);
    color: #0f172a;
    color-scheme: light;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.04);
}
.act-modal-body .form-select {
    padding-right: 2rem;
}
.act-modal-body .form-control::placeholder,
.act-modal-body .form-select option {
    color: #475569;
}
.act-modal-body .form-select option {
    background-color: #ffffff;
    color: #0f172a;
}
#id_details {
    resize: vertical;
    min-height: 72px;
    max-height: 160px;
}

/* ── Actions ── */
.act-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    padding-top: 0.9rem;
    margin-top: 0.65rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.act-form-cancel {
    padding: 0.48rem 1.15rem;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.18);
    background: transparent;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.5;
}
.act-form-cancel:hover {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.28);
    color: #1e293b;
}
.act-form-submit {
    padding: 0.48rem 1.4rem;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: opacity 0.15s, transform var(--spring-dur) var(--spring), box-shadow 0.15s;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.32);
    line-height: 1.5;
}
.act-form-submit:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.42);
}
.act-form-submit:active {
    transform: translateY(0);
    opacity: 1;
}

/* ── Dark mode ── */
body.dark-mode .requestor-modal__dialog--act {
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.68));
    color: #e5e7eb;
}
body.dark-mode .act-modal-header {
    background: #1e293b;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .act-modal-header__icon {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.25);
    color: #60a5fa;
}
body.dark-mode .act-modal-header__title {
    color: #f1f5f9;
}
body.dark-mode .act-modal-header__sub {
    color: #94a3b8;
}
body.dark-mode .act-modal-close {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
    color: #94a3b8;
}
body.dark-mode .act-modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    color: #f1f5f9;
}
body.dark-mode .act-form-label {
    color: #94a3b8;
}
body:not(.dark-mode) .act-form-label {
    color: #0f172a !important;
}
body:not(.dark-mode) .act-form-label i {
    color: #2563eb;
}
body:not(.dark-mode) .act-form-optional {
    color: #1f2937 !important;
    font-weight: 700;
}
body.dark-mode .act-form-label i {
    color: #60a5fa;
}
body.dark-mode .act-form-actions {
    border-top-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .act-form-cancel {
    border-color: rgba(255, 255, 255, 0.16);
    color: #94a3b8;
}
body.dark-mode .act-form-cancel:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.28);
}
body.dark-mode .act-form-error {
    color: #f87171;
}

/* ── Mobile: single column ── */
@media (max-width: 600px) {
    .requestor-modal__dialog--act {
        max-width: 94vw;
        margin: 3vh auto;
    }
    .act-form-grid {
        grid-template-columns: 1fr;
    }
    .act-form-field--full {
        grid-column: 1;
    }
}

.glass-card--compact {
    padding: 1.25rem !important;
}

.glass-card--compact .list-unstyled {
    margin-bottom: 0;
}

.glass-card--mini {
    padding: 1rem !important;
}

.glass-card--mini h2 {
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.glass-card--mini .list-unstyled {
    font-size: 0.9rem;
}

.avatar-select {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.avatar-select select {
    flex: 1 1 auto;
}

.avatar-select__image {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(15, 23, 42, 0.06);
    color: #1f2937;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-transform: uppercase;
}

body.dark-mode .avatar-select__image {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.22);
    color: #f8fafc;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}

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

.page-login {
    background-color: #041c54;
    background-image: url("../img/login-background.c8ad71f1f2f3.svg"), radial-gradient(circle at 18% 14%, #4db4ff 0%, #134fd1 40%, #041c54 100%);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    color: #f4f9ff;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
}

.page-login .navbar {
    display: none;
}

.page-login main.container {
    max-width: none;
    width: 100%;
    padding: 0 !important;   /* override Bootstrap .py-4's !important */
    min-height: 100vh;
    overflow: hidden;
}

.login-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 1.5rem;
    overflow: hidden;
}

.login-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(12, 44, 120, 0.25), rgba(3, 17, 52, 0.35));
    mix-blend-mode: screen;
    pointer-events: none;
}

.login-card {
    position: relative;
    width: min(440px, 92vw);
    padding: 3rem 3rem 2.75rem;
    border-radius: 30px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(24px);
    box-shadow: 0 30px 80px rgba(7, 27, 78, 0.45);
    color: #0d1b3d;
    z-index: 1;
}

.login-card--glass::before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 22px;
    border: 0px solid rgba(255, 255, 255, 0.22);
    pointer-events: none;
}

.login-card__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 2.5rem;
    color: rgba(13, 27, 61, 0.92);
    position: relative;
    padding: 0;
    border-radius: 28px;
    width: min(420px, 100%);
    overflow: hidden;
}

.login-card__brand::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: 0 24px 58px rgba(12, 52, 138, 0.28);
    backdrop-filter: blur(18px);
    pointer-events: none;
    z-index: 0;
}

.login-card__logo {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    background: transparent;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 18px 42px rgba(12, 52, 138, 0.32));
    position: relative;
    z-index: 1;
}

.login-card__brand-text {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    letter-spacing: -0.01em;
    gap: 0.3rem;
}

.login-card__brand-name {
    font-size: 1.6rem;
}

.login-card__brand-subtitle {
    font-size: 0.95rem;
    color: rgba(13, 27, 61, 0.7);
    letter-spacing: 0.02em;
}

.login-card__helper {
    margin: 1rem 0 2.5rem;
    font-size: 1rem;
    text-align: center;
    color: rgba(13, 27, 61, 0.58);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.login-form__group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.login-form label {
    font-weight: 600;
    color: rgba(13, 27, 61, 0.75);
}

.login-form input[type="text"],
.login-form input[type="password"] {
    border-radius: 14px;
    border: 1px solid rgba(13, 27, 61, 0.16);
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.92);
    color: #0d1b3d;
    width: 100%;
}

.login-form__account {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: rgba(13, 27, 61, 0.72);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.login-form__account strong {
    font-weight: 700;
    color: rgba(13, 27, 61, 0.85);
}

.login-form__account code {
    background: rgba(15, 45, 94, 0.08);
    border-radius: 8px;
    padding: 0.1rem 0.45rem;
    font-weight: 600;
    color: rgba(13, 27, 61, 0.82);
}

.login-role {
    border: none;
    margin: 0;
    padding: 0;
}

.login-role legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.login-role__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.login-role__choice {
    position: relative;
}

.login-role__choices input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    inset: 0;
    width: 100%;
    height: 100%;
}

.login-role__choice label {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.8rem 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid transparent;
    color: rgba(13, 27, 61, 0.7);
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    cursor: pointer;
    width: 100%;
}

.login-role__choices input[type="radio"]:focus + label {
    outline: 2px solid rgba(26, 110, 255, 0.35);
    outline-offset: 3px;
}

.login-role__choices input[type="radio"]:checked + label {
    background: linear-gradient(150deg, rgba(26, 110, 255, 0.85), rgba(17, 68, 202, 0.9));
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(26, 110, 255, 0.35);
}

.report-summary-card {
    border-radius: 16px;
    padding: 1.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(8px);
    min-height: 120px;
}

.report-summary-card__label {
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.7;
}

.report-summary-card__value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.notification-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    box-shadow: 0 6px 18px rgba(220, 53, 69, 0.25);
}

.notification-dot__count {
    background: #dc3545;
    color: #fff;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.nav-link-with-dot {
    position: relative;
    padding-right: 2.5rem !important;
}

.notification-dot--nav {
    position: absolute;
    top: 0.35rem;
    right: 0.75rem;
    width: 1.6rem;
    height: 1.6rem;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.notification-dot--nav .notification-dot__count {
    font-size: 0.65rem;
    padding: 0 0.45rem;
}

.table-sort-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.table-sort-link:hover {
    color: #0d6efd;
    text-decoration: none;
}

.table-sort-link--active {
    color: #0d6efd;
}

.login-card__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.4rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: none;
    background: linear-gradient(180deg, #1e86ff, #0b66d6);
    color: #ffffff;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    cursor: pointer;
    width: 100%;
}

.login-card__submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(15, 90, 173, 0.35);
}

.login-card__submit:active {
    transform: translateY(1px);
    background: linear-gradient(180deg, #155bcc, #044fb0);
}

.login-card__submit:focus-visible {
    outline: 2px solid rgba(30, 139, 255, 0.8);
    outline-offset: 2px;
}

.login-card__footer {
    margin-top: 2rem;
    font-size: 0.875rem;
    text-align: center;
    color: rgba(13, 27, 61, 0.65);
}

.page-login .alert {
    margin-top: 0;
    border-radius: 16px;
    border: 1px solid rgba(199, 67, 67, 0.4);
    background: rgba(199, 67, 67, 0.12);
    color: #982b2b;
    text-align: center;
}

@media (max-width: 640px) {
    .login-card {
        padding: 2.5rem 1.75rem 2.25rem;
    }

    .login-card__logo {
        padding: 1.2rem 1.4rem;
    }

    .login-role__choices {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* --- Login Theme Toggle & Dark Mode --- */

/* Wrapper for positioning the toggle - Default to relative/inline for Navbar */
.theme-toggle-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 10;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.page-login .theme-toggle-wrapper {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* If you specifically want absolute positioning on login page only, scope it */
.page-login .theme-toggle-wrapper-absolute {
    position: absolute;
    top: 2rem;
    right: 2rem;
}

.checkbox {
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

/* ── Toggle track ── */
.checkbox-label {
    /* Keep the login toggle visually quiet and aligned with the page background */
    background: rgba(255, 255, 255, 0.08);
    width: 62px;
    height: 32px;
    border-radius: 999px;
    position: relative;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    overflow: hidden;
    transition:
        background 0.65s var(--theme-transition-easing),
        border-color 0.65s var(--theme-transition-easing),
        box-shadow 0.45s ease,
        transform 0.3s var(--spring);
}

/* Checked = DARK mode: deep navy track */
#theme-checkbox:checked + .checkbox-label {
    background: rgba(15, 23, 42, 0.12);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

body.page-login .theme-toggle-wrapper .checkbox-label {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

body.page-login #theme-checkbox:checked + .checkbox-label {
    background: rgba(15, 23, 42, 0.1);
    border-color: rgba(255, 255, 255, 0.04);
    box-shadow: none;
}

/* ── Sun icon — sits on LEFT, visible in LIGHT mode (not-checked) — NO yellow ── */
.checkbox-label .bi-moon-fill {
    color: #c7d2fe;
    font-size: 13px;
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%) scale(0.8) rotate(28deg);
    transform-origin: center;
    opacity: 0.28;
    transition:
        transform  0.55s var(--theme-transition-easing),
        opacity    0.45s ease,
        filter     0.45s ease;
    filter: blur(0.3px);
}

/* ── Sun icon — sits on RIGHT, visible in LIGHT mode (not-checked) — NO yellow ── */
.checkbox-label .bi-brightness-high-fill {
    color: #0ea5e9;
    font-size: 15px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%) scale(1.1) rotate(0deg);
    transform-origin: center;
    opacity: 1;
    transition:
        transform  0.55s var(--theme-transition-easing),
        opacity    0.45s ease,
        filter     0.45s ease;
    filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.5));
}

/* ── Ball ── */
.checkbox-label .ball {
    width: 24px;
    height: 24px;
    position: absolute;
    left: 4px;
    top: 3px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    will-change: transform;
    transition:
        transform    0.65s cubic-bezier(0.34, 1.3, 0.64, 1),
        background   0.5s ease,
        box-shadow   0.4s ease;
}

.checkbox-label .ball::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.18);
    opacity: 0;
    transition: opacity 0.45s ease, background 0.5s ease;
}

/* ── Hover ── */
.checkbox-label:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ── Checked state (DARK mode) — ball slides right, moon glows ── */
#theme-checkbox:checked + .checkbox-label .ball {
    transform: translateX(30px);
    background: #f0f4ff;
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
#theme-checkbox:checked + .checkbox-label .ball::before {
    background: rgba(165, 180, 252, 0.2);
    opacity: 1;
}

/* Dark mode: sun fades out, moon rises */
#theme-checkbox:checked + .checkbox-label .bi-moon-fill {
    opacity: 1;
    transform: translateY(-50%) rotate(0deg) scale(1.05);
    filter: drop-shadow(0 0 4px rgba(165, 180, 252, 0.55));
    color: #c7d2fe;
}

#theme-checkbox:checked + .checkbox-label .bi-brightness-high-fill {
    opacity: 0.28;
    transform: translateY(-50%) scale(0.8) rotate(28deg);
    filter: blur(0.3px);
    color: #ffffff;
}

/* ── Not checked (LIGHT mode) — sun glows ── */
#theme-checkbox:not(:checked) + .checkbox-label .bi-moon-fill {
    opacity: 0.28;
    transform: translateY(-50%) rotate(-30deg) scale(0.78);
    filter: blur(0.3px);
}

#theme-checkbox:not(:checked) + .checkbox-label .bi-brightness-high-fill {
    opacity: 1;
    transform: translateY(-50%) scale(1.1) rotate(0deg);
    filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.5));
    color: #0ea5e9;
}

#theme-checkbox:focus-visible + .checkbox-label {
    outline: 2px solid color-mix(in srgb, var(--lg-accent, #6366f1) 78%, white) !important;
    outline-offset: 3px;
    box-shadow:
        0 0 0 0 rgba(99, 102, 241, 0),
        0 2px 12px rgba(14, 165, 233, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Transitions for Smooth Switching */
body, 
.login-card, 
.login-card__submit, 
.login-form__group label, 
.form-control,
.login-card__footer,
.page-login .alert,
.login-hero::before {
    transition: background-color var(--theme-transition-duration) var(--theme-transition-easing), color var(--theme-transition-duration) var(--theme-transition-easing), border-color var(--theme-transition-duration) var(--theme-transition-easing), box-shadow var(--theme-transition-duration) var(--theme-transition-easing), filter var(--theme-transition-duration) var(--theme-transition-easing), opacity var(--theme-transition-duration) var(--theme-transition-easing);
}

body.theme-switching,
body.theme-switching *:not(.theme-toggle-wrapper):not(.theme-toggle-wrapper *),
body.theme-switching *:not(.theme-toggle-wrapper):not(.theme-toggle-wrapper *)::before,
body.theme-switching *:not(.theme-toggle-wrapper):not(.theme-toggle-wrapper *)::after {
    transition: none !important;
}

/* ═══════════════════════════════════════════════════════════
   REQUEST MANAGER FORM  (request_manager_form.html)
   ═══════════════════════════════════════════════════════════ */

/* ── Page header ── */
.rmf-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.rmf-page-header__left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.rmf-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(226,232,240,0.6);
    text-decoration: none;
    transition: color 0.2s ease;
}
.rmf-back-link:hover { color: #93c5fd; }
.rmf-page-header__ref {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #f1f5f9;
    margin: 0;
}
body:not(.dark-mode) .rmf-page-header__ref,
body:not(.dark-mode) .rmf-card__header-title,
body:not(.dark-mode) .rmf-info-item__value,
body:not(.dark-mode) .rmf-timeline__author,
body:not(.dark-mode) .rmf-engineer-chip__name,
body:not(.dark-mode) .request-activity-stat-card .fs-5,
body:not(.dark-mode) .request-activity-stat-card .h5,
body:not(.dark-mode) .request-activity-table tbody td {
    color: #0f172a;
}
body:not(.dark-mode) .rmf-back-link {
    color: #475569;
}
body:not(.dark-mode) .rmf-back-link:hover {
    color: #1d4ed8;
}
body:not(.dark-mode) .rmf-card__header-sub,
body:not(.dark-mode) .rmf-label,
body:not(.dark-mode) .rmf-label-sm,
body:not(.dark-mode) .request-activity-table thead th,
body:not(.dark-mode) .request-activity-detail-preview,
body:not(.dark-mode) .request-activity-cell-text {
    color: #475569;
}
body:not(.dark-mode) .rmf-info-item__label,
body:not(.dark-mode) .rmf-timeline__time,
body:not(.dark-mode) .rmf-empty-log,
body:not(.dark-mode) .request-activity-detail-preview--empty {
    color: #64748b;
}
body:not(.dark-mode) .rmf-description-box,
body:not(.dark-mode) .rmf-timeline__message,
body:not(.dark-mode) .request-activity-table thead th,
body:not(.dark-mode) .request-activity-table tbody td {
    color: #334155;
}
.rmf-page-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.rmf-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,0.1);
    background: #f1f5f9;
    color: #475569;
}
.rmf-meta-chip--account { color: #1e40af; background: #eff6ff; border-color: rgba(37,99,235,0.15); }
.rmf-meta-chip--date    { color: #065f46; background: #f0fdf4; border-color: rgba(16,185,129,0.15); }
.rmf-meta-chip--sqr     { color: #6d28d9; background: #f5f3ff; border-color: rgba(109,40,217,0.15); }

/* Status dot in header */
.rmf-status-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    text-transform: capitalize;
}
.rmf-status-dot::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}
.rmf-status-dot--ongoing    { background: #fef9c3; color: #854d0e; }
.rmf-status-dot--pending    { background: #fef3c7; color: #92400e; }
.rmf-status-dot--completed  { background: #dcfce7; color: #166534; }
.rmf-status-dot--cancelled  { background: #fee2e2; color: #991b1b; }
.rmf-status-dot--on_hold    { background: #f3e8ff; color: #6b21a8; }

/* ── Cards ── */
.rmf-card {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.09);
    border-radius: 20px;
    box-shadow: 0 2px 16px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
    overflow: hidden;
    /* Force dark text inside white card regardless of body theme */
    color: #0f172a;
    --bs-secondary-color: rgba(15, 23, 42, 0.55);
    --bs-body-color: #0f172a;
}
.rmf-card--details {
    height: auto;
    min-height: 0;
    flex-grow: 0;
}
.request-manage-grid,
.row.g-3.align-items-start,
.row.g-4.align-items-start {
    --bs-gutter-x: 0.875rem;
    --bs-gutter-y: 0.75rem;
}
/* Hide help text and avatars inside the manage request form card */
.rmf-card .form-text { display: none; }
.rmf-card .avatar-select { display: block; }
.rmf-card .avatar-select__image { display: none; }
.rmf-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(15,23,42,0.07);
    background: #fafbfc;
}
.rmf-card__header-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(37,99,235,0.08);
    border: 1px solid rgba(37,99,235,0.15);
    color: #2563eb;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.rmf-card__header-icon--status { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.18); color: #059669; }
.rmf-card__header-icon--log    { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.18); color: #6366f1; }
.rmf-card__header-title { font-size: 0.95rem; font-weight: 700; color: #0f172a; line-height: 1.2; }
.rmf-card__header-sub   { font-size: 0.78rem; color: #64748b; margin-top: 1px; }

/* ── Status badge in card header ── */
.rmf-status-badge {
    font-size: 0.72rem; font-weight: 700;
    padding: 0.28rem 0.7rem; border-radius: 999px;
    text-transform: capitalize; flex-shrink: 0;
}
.rmf-status-badge--ongoing   { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.rmf-status-badge--pending   { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.rmf-status-badge--completed { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.rmf-status-badge--cancelled { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.rmf-status-badge--on_hold   { background: #f3e8ff; color: #6b21a8; border: 1px solid #d8b4fe; }

/* ── Info strip (read-only + admin account edit) ── */
.rmf-info-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
    margin: 0 -1.5rem;
    padding: 1rem 1.5rem;
    background: #f8fafc;
    border-bottom: 1px solid rgba(15,23,42,0.07);
}
.rmf-info-item { display: flex; flex-direction: column; gap: 0.15rem; }
.rmf-info-item__label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; }
.rmf-info-item__value { font-size: 0.9rem; font-weight: 600; color: #0f172a; }
.rmf-info-item--editable { grid-column: 1 / -1; }
.rmf-info-item__control .form-control,
.rmf-info-item__control .form-select {
    max-width: 28rem;
    width: 100%;
}
.rmf-info-item__control .form-text {
    margin-top: 0.25rem;
    font-size: 0.75rem;
}

/* ── Form fields grid ── */
.rmf-form { padding: 1.25rem 1.5rem 1.25rem; }
.rmf-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
    margin-bottom: 0;
}
/* Full-width description below the grid */
.rmf-field-group--desc {
    grid-column: 1 / -1;
    padding: 0 1.5rem 1rem;
}
.rmf-field-group--desc .form-control {
    min-height: 120px;
    resize: vertical;
}
.rmf-field-group--full { grid-column: 1 / -1; }
.rmf-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.3rem;
    letter-spacing: 0.01em;
}
.rmf-label-sm { font-size: 0.75rem; font-weight: 600; color: #64748b; display: block; margin-bottom: 0.25rem; }

/* Description read-only box */
.rmf-description-box {
    background: #f8fafc;
    border: 1px solid rgba(15,23,42,0.09);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #334155;
    white-space: pre-wrap;
    line-height: 1.6;
}

/* Engineer chip (read-only) */
.rmf-engineer-chip {
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: #f1f5f9;
    border: 1px solid rgba(15,23,42,0.1);
    border-radius: 999px;
    padding: 0.35rem 0.85rem 0.35rem 0.35rem;
}
.rmf-engineer-chip__avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: #2563eb; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
}
.rmf-engineer-chip__name { font-size: 0.82rem; font-weight: 600; color: #1e293b; }

/* ── Form actions ── */
.rmf-form-actions {
    display: flex; flex-wrap: wrap; gap: 0.6rem;
    padding: 0;
    border-top: none;
    margin: 1rem 0 0;
    background: transparent;
}
.rmf-form-actions--end { justify-content: flex-end; border-top: none; background: transparent; padding: 0; margin: 1rem 0 0; }

/* Status form padding */
.rmf-status-form { padding: 1.25rem 1.5rem 1.25rem; }
.rmf-status-form .row {
    align-items: flex-start;
}
.rmf-status-form .col-sm-6 {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 100%;
}
.rmf-status-form .col-sm-6 > .form-select,
.rmf-status-form .col-sm-6 > .form-control,
.rmf-status-form .col-sm-6 > .invalid-feedback {
    width: 100%;
}
.rmf-status-form .col-sm-6 > .invalid-feedback {
    margin-top: 0.5rem;
}

/* ── Timeline log ── */
.rmf-timeline {
    list-style: none;
    margin: 0;
    padding: 1rem 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.rmf-timeline__item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.rmf-timeline__avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; font-size: 0.72rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(99,102,241,0.28);
}
.rmf-timeline__body {
    flex: 1;
    background: #f8fafc;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 12px;
    padding: 0.65rem 0.9rem;
}
.rmf-timeline__header {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.25rem;
}
.rmf-timeline__author { font-size: 0.8rem; font-weight: 700; color: #0f172a; }
.rmf-timeline__time   { font-size: 0.7rem; color: #94a3b8; white-space: nowrap; }
.rmf-timeline__message { font-size: 0.85rem; color: #334155; line-height: 1.55; white-space: pre-wrap; }
.rmf-timeline__edit {
    display: inline-flex; align-items: center;
    font-size: 0.72rem; color: #6366f1; text-decoration: none;
    margin-top: 0.35rem; opacity: 0.8; transition: opacity 0.2s;
}
.rmf-timeline__edit:hover { opacity: 1; }

/* Empty log state */
.rmf-empty-log {
    text-align: center; padding: 2rem 1rem;
    color: #94a3b8;
}
.rmf-empty-log__icon { font-size: 2rem; opacity: 0.4; display: block; margin-bottom: 0.5rem; }
.rmf-empty-log p { font-size: 0.82rem; margin: 0; }

/* Log form */
.rmf-log-form {
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid rgba(15,23,42,0.07);
    margin-top: 1rem;
}
.rmf-log-form__field { margin-bottom: 0.75rem; }
.rmf-log-form textarea { border-radius: 10px; font-size: 0.875rem; resize: vertical; min-height: 80px; }

/* Related activity logs */
.rmf-card.mt-4 > .px-3.pb-3 {
    padding-top: 1rem;
}

.request-activity-stat-card {
    background: #f8fafc;
    border-color: rgba(15,23,42,0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
    margin-top: 0.125rem;
}

.request-activity-stat-card .text-muted,
.request-activity-stat-card .small.text-muted {
    color: #64748b !important;
}

.request-activity-empty-state {
    margin-top: 1rem !important;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(15,23,42,0.08);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.request-activity-empty-state__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.request-activity-stat-card .fs-5,
.request-activity-stat-card .h5 {
    color: #0f172a;
}

.request-activity-table-wrap {
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 14px;
    overflow: auto;
    background: #ffffff;
}

.request-activity-table {
    --bs-table-bg: transparent;
    --bs-table-color: #0f172a;
    margin-bottom: 0;
    width: 100%;
    table-layout: fixed;
}

.request-activity-table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom-color: rgba(15,23,42,0.08);
}

.request-activity-table tbody td {
    color: #0f172a;
    border-color: rgba(15,23,42,0.06);
}

.request-activity-table tbody tr.request-activity-row--clickable {
    cursor: pointer;
    transition: none;
}

.request-activity-table tbody tr.request-activity-row--clickable:hover,
.request-activity-table tbody tr.request-activity-row--clickable:focus-within {
    background: rgba(47, 108, 243, 0.08);
}

.request-activity-table tbody tr.request-activity-row--clickable:focus {
    outline: 2px solid rgba(47, 108, 243, 0.35);
    outline-offset: -2px;
}

body.dark-mode .request-activity-table tbody tr.request-activity-row--clickable:hover,
body.dark-mode .request-activity-table tbody tr.request-activity-row--clickable:focus-within {
    background: rgba(74, 163, 255, 0.12);
}

.request-activity-table th,
.request-activity-table td {
    vertical-align: middle;
}

.request-activity-col {
    overflow: hidden;
}

.request-activity-col--date {
    width: 17%;
    white-space: nowrap;
}

.request-activity-col--engineer {
    width: 18%;
}

.request-activity-col--activity {
    width: 12%;
}

.request-activity-col--hours {
    width: 8%;
    white-space: nowrap;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.request-activity-col--billing {
    width: 12%;
    white-space: nowrap;
}

.request-activity-col--details {
    width: 33%;
}

.request-activity-cell-text,
.request-activity-detail-preview {
    display: block;
    max-width: 100%;
    overflow: hidden;
}

.request-activity-cell-text {
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.request-activity-detail-preview {
    color: #475569;
    font-size: 0.82rem;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: calc(1.35em * 2);
}

.request-activity-detail-preview--empty {
    color: #94a3b8;
    white-space: nowrap;
    display: block;
}

/* ── Dark mode ── */
/* page header always on dark bg, no override needed */
body.dark-mode .rmf-back-link           { color: rgba(148,163,184,0.6); }
body.dark-mode .rmf-back-link:hover     { color: #93c5fd; }
body.dark-mode .rmf-meta-chip           { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.1); color: #94a3b8; }
body.dark-mode .rmf-meta-chip--account  { background: rgba(37,99,235,0.12); border-color: rgba(59,130,246,0.22); color: #93c5fd; }
body.dark-mode .rmf-meta-chip--date     { background: rgba(16,185,129,0.1);  border-color: rgba(16,185,129,0.2);  color: #6ee7b7; }
body.dark-mode .rmf-meta-chip--sqr      { background: rgba(109,40,217,0.12); border-color: rgba(139,92,246,0.22); color: #c4b5fd; }
body.dark-mode .rmf-status-dot--ongoing   { background: rgba(234,179,8,0.12);   color: #fde047; }
body.dark-mode .rmf-status-dot--completed { background: rgba(34,197,94,0.12);   color: #86efac; }
body.dark-mode .rmf-status-dot--on_hold   { background: rgba(168,85,247,0.12);  color: #d8b4fe; }
body.dark-mode .rmf-card                { background: rgba(15,23,42,0.9); border-color: rgba(148,163,184,0.12); box-shadow: 0 2px 20px rgba(0,0,0,0.4); color: #e2e8f0; --bs-secondary-color: rgba(226,232,240,0.55); --bs-body-color: #e2e8f0; }
body.dark-mode .rmf-card__header        { background: rgba(255,255,255,0.03); border-bottom-color: rgba(255,255,255,0.08); }
body.dark-mode .rmf-card__header-title  { color: #f1f5f9; }
body.dark-mode .rmf-card__header-sub    { color: #64748b; }
body.dark-mode .rmf-card__header-icon   { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.2); color: #60a5fa; }
body.dark-mode .rmf-card__header-icon--status { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.2); color: #34d399; }
body.dark-mode .rmf-card__header-icon--log    { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.2); color: #a5b4fc; }
body.dark-mode .rmf-info-strip          { background: rgba(255,255,255,0.025); border-bottom-color: rgba(255,255,255,0.07); }
body.dark-mode .rmf-info-item__label    { color: #475569; }
body.dark-mode .rmf-info-item__value    { color: #e2e8f0; }
body.dark-mode .rmf-info-item__control .form-text { color: #64748b; }
body.dark-mode .rmf-form                { background: transparent; }
body.dark-mode .rmf-label               { color: #94a3b8; }
body.dark-mode .rmf-label-sm            { color: #64748b; }
body.dark-mode .rmf-description-box     { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #cbd5e1; }
body.dark-mode .rmf-engineer-chip       { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
body.dark-mode .rmf-engineer-chip__name { color: #e2e8f0; }
body.dark-mode .rmf-form-actions        { background: transparent; border-top-color: transparent; }
body.dark-mode .rmf-status-form         { color: #e2e8f0; }
body.dark-mode input[type="date"] {
    color: #e2e8f0;
    background-color: rgba(15,23,42,0.9);
    border-color: rgba(148,163,184,0.22);
    color-scheme: dark;
}
body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator {
    display: block;
    filter: invert(1) brightness(1.8) saturate(1.4);
    opacity: 1;
    cursor: pointer;
}
body.dark-mode .requestor-modal__body input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.9) saturate(1.5);
}
body.dark-mode input[type="date"]::-webkit-datetime-edit {
    color: #e2e8f0;
}
body.dark-mode .rmf-timeline__body      { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.07); }
body.dark-mode .rmf-timeline__author    { color: #f1f5f9; }
body.dark-mode .rmf-timeline__message   { color: #cbd5e1; }
body.dark-mode .rmf-timeline__time      { color: #475569; }
body.dark-mode .rmf-log-form            { border-top-color: rgba(255,255,255,0.07); }
body.dark-mode .rmf-status-badge--ongoing   { background: rgba(234,179,8,0.15);  color: #fde047; border-color: rgba(234,179,8,0.25); }
body.dark-mode .rmf-status-badge--pending   { background: rgba(251,191,36,0.12); color: #fcd34d; border-color: rgba(251,191,36,0.2); }
body.dark-mode .rmf-status-badge--completed { background: rgba(34,197,94,0.12);  color: #86efac; border-color: rgba(34,197,94,0.22); }
body.dark-mode .rmf-status-badge--cancelled { background: rgba(239,68,68,0.12);  color: #fca5a5; border-color: rgba(239,68,68,0.22); }
body.dark-mode .rmf-status-badge--on_hold   { background: rgba(168,85,247,0.12); color: #d8b4fe; border-color: rgba(168,85,247,0.22); }
body.dark-mode .request-activity-stat-card {
    background: rgba(30,41,59,0.88);
    border-color: rgba(148,163,184,0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
body.dark-mode .request-activity-stat-card .text-muted,
body.dark-mode .request-activity-stat-card .small.text-muted {
    color: #94a3b8 !important;
}
body.dark-mode .request-activity-stat-card .fs-5,
body.dark-mode .request-activity-stat-card .h5 {
    color: #f8fafc;
}
body.dark-mode .request-activity-table-wrap {
    background: rgba(15,23,42,0.7);
    border-color: rgba(148,163,184,0.16);
}
body.dark-mode .request-activity-table {
    --bs-table-color: #e2e8f0;
    --bs-table-striped-color: #e2e8f0;
    --bs-table-hover-color: #f8fafc;
}
body.dark-mode .request-activity-table thead th {
    background: rgba(30,41,59,0.92);
    color: #cbd5e1;
    border-bottom-color: rgba(148,163,184,0.16);
}
body.dark-mode .request-activity-table tbody td {
    color: #e2e8f0;
    border-color: rgba(148,163,184,0.12);
    background: transparent;
}
body.dark-mode .request-activity-cell-text {
    color: #f8fafc;
}
body.dark-mode .request-activity-detail-preview {
    color: #cbd5e1;
}
body.dark-mode .request-activity-detail-preview--empty {
    color: #64748b;
}
body.dark-mode .request-activity-table tbody tr:hover td {
    background: rgba(255,255,255,0.03);
}

/* ── Request lifecycle progress ── */
.rmf-card__header-icon--progress {
    background: rgba(14,165,233,0.09);
    border-color: rgba(14,165,233,0.2);
    color: #0284c7;
}
.rmf-progress__body { padding: 1.25rem 1.5rem; }
.rmf-progress__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
.rmf-progress__step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding-right: 0.75rem;
}
.rmf-progress__step:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 18px;
    left: 38px;
    right: 0;
    height: 2px;
    background: #e2e8f0;
}
.rmf-progress__step--complete:not(:last-child)::after { background: #22c55e; }
.rmf-progress__marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 800;
}
.rmf-progress__step--complete .rmf-progress__marker { background: #16a34a; border-color: #16a34a; color: #fff; }
.rmf-progress__step--current .rmf-progress__marker { border-color: #2563eb; color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,0.12); }
.rmf-progress__content { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; background: #fff; padding-right: 0.45rem; }
.rmf-progress__label { overflow: hidden; color: #334155; font-size: 0.83rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.rmf-progress__state { color: #94a3b8; font-size: 0.7rem; }
.rmf-progress__step--current .rmf-progress__label,
.rmf-progress__step--current .rmf-progress__state { color: #1d4ed8; }
.rmf-progress__action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem 1rem;
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #f8fbff;
}
.rmf-progress__eyebrow { grid-column: 1; color: #2563eb; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.rmf-progress__action-text { grid-column: 2; grid-row: 1 / span 2; margin: 0; color: #334155; font-size: 0.87rem; }
.rmf-progress__owner { grid-column: 3; display: flex; align-items: center; gap: 0.45rem; color: #0f172a; font-size: 0.84rem; }
.rmf-progress__support { grid-column: 3; color: #64748b; font-size: 0.75rem; }
.rmf-progress__action form { grid-column: 3; }
.rmf-progress-history { margin-top: 1rem; border-top: 1px solid #e2e8f0; padding-top: 0.85rem; }
.rmf-progress-history > summary { color: #475569; cursor: pointer; font-size: 0.82rem; font-weight: 700; }
.rmf-progress-history__list { display: grid; gap: 0.65rem; margin: 0.85rem 0 0; padding: 0; list-style: none; }
.rmf-progress-history__list li { border-left: 3px solid #bfdbfe; padding: 0.25rem 0 0.25rem 0.8rem; }
.rmf-progress-history__heading { display: flex; justify-content: space-between; gap: 1rem; color: #334155; font-size: 0.8rem; }
.rmf-progress-history__heading time { color: #94a3b8; font-weight: 500; }
.rmf-progress-history__meta { margin-top: 0.15rem; color: #64748b; font-size: 0.75rem; }
.rmf-progress-history__inferred { display: inline-block; margin-left: 0.5rem; border-radius: 999px; background: #f1f5f9; padding: 0.15rem 0.45rem; color: #64748b; font-size: 0.68rem; font-weight: 700; }

body.dark-mode .rmf-progress__step:not(:last-child)::after { background: #334155; }
body.dark-mode .rmf-progress__step--complete:not(:last-child)::after { background: #22c55e; }
body.dark-mode .rmf-progress__marker { background: #0f172a; border-color: #475569; color: #94a3b8; }
body.dark-mode .rmf-progress__step--complete .rmf-progress__marker { background: #16a34a; border-color: #16a34a; color: #fff; }
body.dark-mode .rmf-progress__step--current .rmf-progress__marker { border-color: #60a5fa; color: #93c5fd; }
body.dark-mode .rmf-progress__content { background: #0f172a; }
body.dark-mode .rmf-progress__label { color: #cbd5e1; }
body.dark-mode .rmf-progress__step--current .rmf-progress__label,
body.dark-mode .rmf-progress__step--current .rmf-progress__state { color: #93c5fd; }
body.dark-mode .rmf-progress__action { background: rgba(30,58,138,0.12); border-color: rgba(96,165,250,0.2); }
body.dark-mode .rmf-progress__action-text,
body.dark-mode .rmf-progress__owner { color: #e2e8f0; }
body.dark-mode .rmf-progress__support,
body.dark-mode .rmf-progress-history__meta { color: #94a3b8; }
body.dark-mode .rmf-progress-history { border-top-color: rgba(148,163,184,0.16); }
body.dark-mode .rmf-progress-history > summary,
body.dark-mode .rmf-progress-history__heading { color: #cbd5e1; }
body.dark-mode .rmf-progress-history__inferred { background: rgba(148,163,184,0.12); color: #cbd5e1; }

@media (max-width: 768px) {
    .rmf-progress__list { grid-template-columns: 1fr; gap: 0.65rem; }
    .rmf-progress__step { min-height: 42px; padding: 0 0 0.2rem; }
    .rmf-progress__step:not(:last-child)::after { top: 35px; bottom: -0.7rem; left: 17px; right: auto; width: 2px; height: auto; }
    .rmf-progress__content { padding-right: 0; }
    .rmf-progress__label { white-space: normal; }
    .rmf-progress__action { grid-template-columns: 1fr; }
    .rmf-progress__eyebrow,
    .rmf-progress__action-text,
    .rmf-progress__owner,
    .rmf-progress__support,
    .rmf-progress__action form { grid-column: 1; grid-row: auto; }
    .rmf-progress-history__heading { flex-direction: column; gap: 0.1rem; }
}

body.pref-large-text .rmf-progress__label { white-space: normal; }
body.pref-reduce-motion .rmf-progress-card * { transition: none !important; }

/* ══ END REQUEST MANAGER FORM ══════════════════════════════ */

/* Dark Mode Styles */
body.dark-mode {
    background: #05070f !important; /* Unified dark base — ambient orbs paint color on top */
    background-image: none !important; 
    color: #e5e5e5;
}

/* Dark Mode Login Card */
body.dark-mode .login-card {
    background: rgba(10, 10, 10, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.05);
    color: #e5e5e5;
}

/* Dark Mode Inputs */
body.dark-mode .form-control {
    background-color: #1a1a1a;
    border-color: #333;
    color: #fff;
}

body.dark-mode .form-control:focus {
    background-color: #000;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(47, 108, 243, 0.25);
}

body.dark-mode .login-form__group label {
    color: #b0b0b0;
}

/* Dark Mode Footer */
body.dark-mode .login-card__footer {
    color: #666;
}

/* Dark Mode Alert */
body.dark-mode .page-login .alert {
    background: rgba(199, 67, 67, 0.15);
    border-color: rgba(199, 67, 67, 0.3);
    color: #ff6b6b;
}

/* Hide the gradient overlay in login hero for pure black request */
body.dark-mode .login-hero::before {
    opacity: 0;
}

/* --- Global OLED Dark Mode Expansion --- */

/* ── View Transitions — Circular Reveal ── */
::view-transition-group(root) {
    animation-duration: 620ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
    will-change: clip-path, opacity;
}

::view-transition-old(root) {
    z-index: 1;
    opacity: 1;
}

::view-transition-new(root) {
    z-index: 9999;
}

body.theme-switching:not(.page-login) .navbar {
    view-transition-name: request-hub-navbar;
    z-index: 10001;
}

::view-transition-group(request-hub-navbar) {
    z-index: 10001;
}

::view-transition-old(request-hub-navbar),
::view-transition-new(request-hub-navbar) {
    animation: none;
    mix-blend-mode: normal;
}

.theme-reveal-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    background:
        radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--lg-accent, #0a84ff) 42%, transparent), transparent 40%),
        linear-gradient(135deg, color-mix(in srgb, var(--lg-tint-strong, white) 78%, transparent), transparent);
    will-change: opacity;
}

/* Navbar */
body.dark-mode .navbar {
    background: #000000 !important;
    background-image: none !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.1) !important;
    border-bottom: 1px solid #333;
}

/* Glass Cards & Containers */
body.dark-mode .glass-card,
body.dark-mode .glass-card--expanded,
body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu {
    background: #000000 !important;
    border: 1px solid #333 !important;
    box-shadow: none !important;
    color: #e5e5e5;
    --bs-heading-color: #f1f5f9;
    --bs-secondary-color: rgba(226, 232, 240, 0.65);
}

/* Dark mode — deep glass card */
body.dark-mode .activity-summary-card {
    background: rgba(30, 41, 59, 0.85) !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
body.dark-mode .activity-summary-card::before {
    background: linear-gradient(180deg, #3b82f6 0%, #0891b2 100%);
}
body.dark-mode .activity-summary-card__info h1 {
    color: #f1f5f9;
}
body.dark-mode .activity-summary-card__info p {
    color: #94a3b8;
}
body.dark-mode .activity-summary-card__cta {
    border-left-color: rgba(148, 163, 184, 0.2);
}
body.dark-mode .activity-summary-pill {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}
body.dark-mode .activity-summary-pill:hover {
    background: rgba(255, 255, 255, 0.12);
}
body.dark-mode .activity-summary-pill .pill-icon {
    background: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
}
body.dark-mode .activity-summary-pill .pill-label {
    color: #94a3b8;
}
body.dark-mode .activity-summary-pill .pill-value {
    color: #f1f5f9;
}

/* Dark mode heading color inside glass-cards */
body.dark-mode .glass-card h1, body.dark-mode .glass-card h2,
body.dark-mode .glass-card h3, body.dark-mode .glass-card h4,
body.dark-mode .glass-card h5, body.dark-mode .glass-card h6,
body.dark-mode .card h1, body.dark-mode .card h2,
body.dark-mode .card h3, body.dark-mode .card h4,
body.dark-mode .card h5, body.dark-mode .card h6,
body.dark-mode .modal-content h1, body.dark-mode .modal-content h2,
body.dark-mode .modal-content h3, body.dark-mode .modal-content h4,
body.dark-mode .modal-content h5, body.dark-mode .modal-content h6 {
    color: #f1f5f9 !important;
}

/* Tables */
body.dark-mode .table {
    color: #e5e5e5;
    --bs-table-color: #ffffff;
    --bs-table-bg: transparent;
    --bs-table-border-color: #333;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
}

body.dark-mode .table tbody tr {
    border-bottom-color: #333;
}

body.dark-mode .table-hover tbody tr:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

/* ── Dashboard table row highlighter ── */
.table tbody tr {
    transition: background-color 0.12s ease, box-shadow 0.12s ease;
    position: relative;
}
.table tbody tr:hover {
    background-color: rgba(99, 102, 241, 0.07) !important;
    box-shadow: inset 3px 0 0 #6366f1;
    cursor: pointer;
}
body.dark-mode .table tbody tr:hover {
    background-color: rgba(99, 102, 241, 0.13) !important;
    box-shadow: inset 3px 0 0 #818cf8;
}
/* Keep table-danger rows clearly red even on hover */
.table tbody tr.table-danger:hover {
    background-color: rgba(220, 38, 38, 0.14) !important;
    box-shadow: inset 3px 0 0 #ef4444;
}

body.dark-mode .table thead th {
    color: #fff;
    border-bottom-color: #444;
}

/* Text Colors */
body.dark-mode .text-muted {
    color: #888 !important;
}

body.dark-mode .text-dark {
    color: #e5e5e5 !important;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #ffffff;
}

/* Buttons and Inputs */
body.dark-mode .btn-light {
    background-color: #222;
    border-color: #333;
    color: #fff;
}

body.dark-mode .btn-outline-secondary {
    color: #ccc;
    border-color: #555;
}

body.dark-mode .btn-outline-secondary:hover {
    background-color: #333;
    border-color: #555;
}

body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #000;
    border-color: #444;
    color: #fff;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #111;
    border-color: var(--brand-primary);
    color: #fff;
}

/* Badges */
body.dark-mode .badge.bg-light.text-dark {
    background-color: #222 !important;
    color: #ddd !important;
    border-color: #444 !important; /* Assuming border class applies border */
}

/* Links */
body.dark-mode a.text-reset {
    color: #e5e5e5 !important;
}

/* Modals if any */
body.dark-mode .modal-content {
    background-color: #000;
    border: 1px solid #333;
    color: #fff;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: #333;
}

/* Scrollbars */
body.dark-mode *::-webkit-scrollbar-track {
    background: #111;
}

body.dark-mode *::-webkit-scrollbar-thumb {
    background-color: #444;
    border: 2px solid #111;
}

/* Fix Missing Images & Text Contrast in Dark Mode */
body.dark-mode img.login-card__logo {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 12px;
    border-radius: 12px;
    filter: none; /* Disable invert, use white background to ensure visibility */
}

body.dark-mode .nav-avatar--placeholder,
body.dark-mode .table-avatar--placeholder {
    background-color: #333;
    color: #fff;
    border: 1px solid #555;
}

body.dark-mode .table-avatar {
    border: 1px solid #444; 
}

body.dark-mode .text-body,
body.dark-mode .table-cell-nowrap,
body.dark-mode .d-flex.align-items-center span {
    color: #e5e5e5 !important;
}

body.dark-mode .table a:not(.btn) {
    color: #60a5fa !important; /* Force lighter blue */
    text-decoration: none;
}

body.dark-mode .table a:not(.btn):hover {
    color: #93c5fd !important;
    text-decoration: underline;
}

/* Ensure form labels and static text are visible */
body.dark-mode .form-label,
body.dark-mode .form-text,
body.dark-mode .form-control-plaintext,
body.dark-mode .input-group-text {
    color: #e5e5e5 !important;
}

body.dark-mode .input-group-text {
    background-color: #222;
    border-color: #444;
}

/* ══════════════════════════════════════════════
   MANAGEMENT PAGE  –  redesign + visibility fixes
══════════════════════════════════════════════ */

/* ── Stat chips in page header ── */
.mgmt-stat-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid transparent;
}
.mgmt-stat-chip--users {
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.25);
}
.mgmt-stat-chip--accounts {
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.2);
}

/* ── Pill tabs ── */
.mgmt-tabs .nav-link {
    color: rgba(226, 232, 240, 0.75);
    background: transparent;
    border: 1px solid transparent;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.45rem 1.1rem;
    border-radius: 10px;
    transition:
        background 0.22s ease,
        color 0.18s ease,
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.22s ease;
}
.mgmt-tabs .nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateY(-2px);
}
.mgmt-tabs .nav-link.active {
    background: #fff;
    color: #1d4ed8;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    border-color: transparent;
}
body.dark-mode .mgmt-tabs .nav-link {
    color: rgba(203, 213, 225, 0.75);
}
body.dark-mode .mgmt-tabs .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}
body.dark-mode .mgmt-tabs .nav-link.active {
    background: #1e3a5f;
    color: #93c5fd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ── Card toolbar (search + button row) ── */
.mgmt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-wrap: wrap;
}
body.dark-mode .mgmt-toolbar {
    border-bottom-color: #2a2a2a;
}

/* ── Search box ── */
.mgmt-search-box {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1;
    min-width: 180px;
    max-width: 440px;
    min-height: 2rem;
    height: 2rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9));
    border: 1.5px solid rgba(37, 99, 235, 0.35);
    border-radius: 12px;
    padding: 0.35rem 0.85rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 10px rgba(15, 23, 42, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.mgmt-search-box:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
body.dark-mode .mgmt-search-box {
    background: rgba(255, 255, 255, 0.05);
    border-color: #2e2e2e;
    box-shadow: none;
}
body.dark-mode .mgmt-search-box:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.mgmt-search-icon {
    color: #0f172a;
    font-size: 0.875rem;
    flex-shrink: 0;
}
.mgmt-search-input {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.005em;
    line-height: 1.5;
    min-width: 0;
}
.mgmt-search-input::placeholder {
    color: #0f172a;
    opacity: 1;
    font-weight: 600;
}
body.dark-mode .mgmt-search-icon { color: #f2f5fb; }
body.dark-mode .mgmt-search-input::placeholder { color: #f2f5fb; }
body.dark-mode .mgmt-search-input { color: #f2f5fb; }

.mgmt-result-badge {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    background: rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(15, 23, 42, 0.16);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    letter-spacing: -0.005em;
    line-height: 1.5;
}
body.dark-mode .mgmt-result-badge {
    color: #f2f5fb;
    background: rgba(242, 245, 251, 0.12);
    border-color: rgba(242, 245, 251, 0.22);
}

.dashboard-toolbar {
    width: min(100%, 760px);
}

.dashboard-toolbar__search {
    display: flex;
    justify-content: flex-start;
    flex: 0 0 auto;
    min-width: 220px;
}

.dashboard-toolbar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-left: 0.25rem;
}

body:not(.dark-mode) .dashboard-toolbar .mgmt-search-box,
body:not(.dark-mode) .dashboard-toolbar .dashboard-request-search-box--toolbar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.96));
    border-color: rgba(37, 99, 235, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 3px 14px rgba(15, 23, 42, 0.09);
}

body:not(.dark-mode) .dashboard-toolbar .mgmt-search-icon {
    color: #0f172a !important;
    opacity: 1;
}

body:not(.dark-mode) .dashboard-toolbar .mgmt-search-input,
body:not(.dark-mode) .dashboard-toolbar .mgmt-search-input::placeholder {
    color: #0f172a !important;
    opacity: 1;
    font-weight: 600;
}

body:not(.dark-mode) .dashboard-toolbar .mgmt-result-badge {
    color: #0f172a !important;
    background: rgba(148, 163, 184, 0.2);
    border: 1px solid rgba(71, 85, 105, 0.25);
    font-weight: 700;
}

.dashboard-toolbar .dashboard-request-search-box--toolbar {
    flex: 0 0 280px;
    max-width: 350px;
    min-width: 200px;
    margin-inline: 0;
}

@media (max-width: 768px) {
    .dashboard-toolbar {
        width: 100%;
    }

    .dashboard-toolbar__search,
    .dashboard-toolbar__actions {
        width: 100%;
        justify-content: center;
    }

    .dashboard-toolbar .dashboard-request-search-box--toolbar {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }
}

/* ── Table header ── */
.mgmt-thead th {
    background: #f1f5f9;
    color: #374151;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 2px solid #e2e8f0;
    padding: 0.7rem 1rem;
}
body.dark-mode .mgmt-thead th {
    background: #0d0d0d;
    color: #94a3b8;
    border-bottom-color: #2a2a2a;
}

/* ── Table rows ── */
.mgmt-table td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: #111827;
}
body.dark-mode .mgmt-table td {
    border-bottom-color: #1e1e1e;
    color: #e2e8f0;
}
.mgmt-table tbody tr {
    transition: background 0.14s ease;
}
.mgmt-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.04);
}
body.dark-mode .mgmt-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* ── Card footer ── */
.mgmt-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(248, 250, 252, 0.6);
}
body.dark-mode .mgmt-card-footer {
    border-top-color: #2a2a2a;
    background: rgba(255, 255, 255, 0.02);
}

/* ── Limit note (shown by JS) ── */
.mgmt-limit-note {
    display: none;
    font-size: 0.78rem;
    color: #6b7280;
}
body.dark-mode .mgmt-limit-note { color: #64748b; }

/* ── Pagination controls ── */
.mgmt-pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.mgmt-pagination .mgmt-page-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.75rem;
}
.mgmt-pagination .mgmt-page-label {
    font-size: 0.78rem;
    color: #6b7280;
    white-space: nowrap;
}
body.dark-mode .mgmt-pagination .mgmt-page-label { color: #64748b; }

/* ── User avatar in management table ── */
.mgmt-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #2f6cf3 0%, #4f46e5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mgmt-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mgmt-avatar__initial {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

/* ── Role badges in management table ── */
.mgmt-role-badge {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 999px;
    padding: 0.25em 0.65em;
}
.mgmt-role-badge--admin        { background: #7c3aed; color: #fff; }
.mgmt-role-badge--engineer     { background: #0891b2; color: #fff; }
.mgmt-role-badge--on_hold      { background: #94a3b8; color: #fff; }
.mgmt-role-badge--requestor    { background: #059669; color: #fff; }
.mgmt-role-badge--requestor_ess{ background: #10b981; color: #fff; }
.mgmt-role-badge--pm_ess       { background: #d97706; color: #fff; }
.mgmt-role-badge--pm_esg       { background: #dc2626; color: #fff; }

/* ── Management table action buttons: darker amber in light mode ── */
.mgmt-table .btn-outline-warning {
    --bs-btn-color: #92400e;
    --bs-btn-border-color: #b45309;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b45309;
    --bs-btn-hover-border-color: #b45309;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #92400e;
    --bs-btn-active-border-color: #92400e;
    --bs-btn-disabled-color: #b45309;
    --bs-btn-disabled-border-color: #b45309;
}
body.dark-mode .mgmt-table .btn-outline-warning {
    --bs-btn-color: #ffc107;
    --bs-btn-border-color: #ffc107;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ffc107;
    --bs-btn-hover-border-color: #ffc107;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffc107;
    --bs-btn-active-border-color: #ffc107;
    --bs-btn-disabled-color: #ffc107;
    --bs-btn-disabled-border-color: #ffc107;
}

/* ── Code in alert ── */
.mgmt-code {
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
    padding: 0.1em 0.45em;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: monospace;
}
body.dark-mode .mgmt-code {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
}

/* ════════════════════════════════════════════════
   GLOBAL DARK MODE VISIBILITY FIXES
════════════════════════════════════════════════ */

/* table-light thead in dark mode (used on other pages) */
body.dark-mode .table-light,
body.dark-mode thead.table-light {
    --bs-table-bg: #0d0d0d;
    --bs-table-color: #cbd5e1;
}
body.dark-mode .table-light th,
body.dark-mode .table-light td {
    background-color: #0d0d0d !important;
    color: #cbd5e1 !important;
    border-bottom-color: #2a2a2a !important;
}

/* nav-tabs in dark mode (pages that use nav-tabs) */
body.dark-mode .nav-tabs {
    --bs-nav-tabs-border-color: #3a3a3a;
    border-bottom-color: #3a3a3a;
}
body.dark-mode .nav-tabs .nav-link {
    color: #94a3b8;
}
body.dark-mode .nav-tabs .nav-link:hover {
    border-color: #444 #444 #3a3a3a;
    color: #e2e8f0;
}
body.dark-mode .nav-tabs .nav-link.active {
    background-color: #000;
    border-color: #3a3a3a #3a3a3a #000;
    color: #fff;
}

/* Alert variants in dark mode */
body.dark-mode .alert-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.25);
    color: #93c5fd;
}
body.dark-mode .alert-info strong { color: #bfdbfe; }
body.dark-mode .alert-info code { color: #93c5fd; background: rgba(59,130,246,0.15); }

body.dark-mode .alert-warning {
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.25);
    color: #fde68a;
}
body.dark-mode .alert-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.2);
    color: #86efac;
}
body.dark-mode .alert-danger {
    background: rgba(220, 53, 69, 0.12);
    border-color: rgba(220, 53, 69, 0.28);
    color: #fca5a5;
}

/* Badge variants in dark mode */
body.dark-mode .badge.text-bg-light {
    background-color: #1e1e1e !important;
    color: #cbd5e1 !important;
    border: 1px solid #333;
}
body.dark-mode .badge.text-bg-secondary {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
}
body.dark-mode .badge.text-bg-warning {
    background-color: rgba(234, 179, 8, 0.15) !important;
    color: #fde68a !important;
    border: 1px solid rgba(234, 179, 8, 0.3);
}
body.dark-mode .badge.text-bg-primary {
    background-color: rgba(59, 130, 246, 0.18) !important;
    color: #93c5fd !important;
}
body.dark-mode .badge.text-bg-success {
    background-color: rgba(34, 197, 94, 0.15) !important;
    color: #86efac !important;
}
body.dark-mode .badge.text-bg-danger {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: #fca5a5 !important;
}

/* btn-outline-warning visibility in dark mode */
body.dark-mode .btn-outline-warning {
    color: #fde68a;
    border-color: rgba(234, 179, 8, 0.5);
}
body.dark-mode .btn-outline-warning:hover {
    background-color: rgba(234, 179, 8, 0.15);
    color: #fef08a;
    border-color: #fde68a;
}

/* Fix specific badges contrast */
body.dark-mode .badge.bg-light {
    background-color: #2a2a2a !important;
    color: #e5e5e5 !important;
    border-color: #444 !important;
}

/* Fix table row hover contrast */
body.dark-mode .table-hover > tbody > tr:hover > * {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none; /* Remove inset shadow causing issues */
}

/* Ensure missing icons/images (if SVG or similar) are visible */
body.dark-mode svg.bi, 
body.dark-mode i.bi {
    color: inherit;
}

/* Specific fix for Request ID badge colors in dark mode */
body.dark-mode .request-id-cell--green {
    background-color: #000000;
    color: #6ee7b7;
    border-left-color: #10b981;
}

body.dark-mode .request-id-cell--amber {
    background-color: rgb(0, 0, 0);
    color: #fcd34d;
    border-left-color: #f59e0b;
}

body.dark-mode .request-id-cell--red {
    background-color: rgb(0, 0, 0);
    color: #fca5a5;
    border-left-color: #ef4444;
}

/* Fix table variant colors in Dark Mode to be readable */
body.dark-mode .table-danger,
body.dark-mode .table-danger > th,
body.dark-mode .table-danger > td {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: #ffc9c9 !important;
    --bs-table-accent-bg: transparent;
    --bs-table-bg: transparent;
}

/* Remove red background for overdue rows in Admin Dashboard Dark Mode */
body.admin-dashboard.dark-mode .table-danger,
body.admin-dashboard.dark-mode .table-danger > th,
body.admin-dashboard.dark-mode .table-danger > td {
    background-color: transparent !important;
    color: #ffffff !important;
}

body.dark-mode .table-warning,
body.dark-mode .table-warning > th,
body.dark-mode .table-warning > td {
    background-color: rgba(255, 193, 7, 0.15) !important;
    color: #fceda0 !important;
}

body.dark-mode .table-success,
body.dark-mode .table-success > th,
body.dark-mode .table-success > td {
    background-color: rgba(25, 135, 84, 0.15) !important;
    color: #a3e6c5 !important;
}

body.dark-mode .table-info,
body.dark-mode .table-info > th,
body.dark-mode .table-info > td {
    background-color: rgba(13, 202, 240, 0.15) !important;
    color: #a5f3fc !important;
}

/* Ensure links in colored rows are readable */
body.dark-mode .table-danger a,
body.dark-mode .table-warning a,
body.dark-mode .table-success a,
body.dark-mode .table-info a {
    color: inherit !important;
    text-decoration: underline;
}

/* Force light text for all tables in Admin Dashboard Dark Mode */
body.admin-dashboard.dark-mode .dashboard-table-wrapper table,
body.admin-dashboard.dark-mode .dashboard-table-wrapper table td,
body.admin-dashboard.dark-mode .dashboard-table-wrapper table th {
    color: #ffffff !important;
    --bs-table-color: #ffffff;
}

/* Remove colored cell backgrounds in Dark Mode for Admin tables (Requestor requirements) */
body.admin-dashboard.dark-mode .table-success,
body.admin-dashboard.dark-mode .table-success > th,
body.admin-dashboard.dark-mode .table-success > td,
body.admin-dashboard.dark-mode .table-danger,
body.admin-dashboard.dark-mode .table-danger > th,
body.admin-dashboard.dark-mode .table-danger > td, 
body.admin-dashboard.dark-mode .table-warning,
body.admin-dashboard.dark-mode .table-warning > th, 
body.admin-dashboard.dark-mode .table-warning > td,
body.admin-dashboard.dark-mode .table-info, 
body.admin-dashboard.dark-mode .table-info > th, 
body.admin-dashboard.dark-mode .table-info > td {
    background-color: transparent !important;
    color: #ffffff !important; /* Ensure text remains white */
}

/* Fix potential z-index or overflow issues */
body.dark-mode .dashboard-table-wrapper {
    scrollbar-color: #444 #000;
}

/* Fix Bootstrap utility colors for Dark Mode compatibility */
body.dark-mode .text-danger {
    color: #ff6b6b !important;
}

body.dark-mode .bg-danger-subtle {
    background-color: rgba(220, 53, 69, 0.2) !important;
    color: #ffc9c9 !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
}

body.dark-mode .text-warning {
    color: #fcd34d !important;
}

body.dark-mode .bg-warning-subtle {
    background-color: rgba(255, 193, 7, 0.2) !important;
    color: #fceda0 !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
}

body.dark-mode .text-success {
    color: #6ee7b7 !important;
}

body.dark-mode .bg-success-subtle {
    background-color: rgba(25, 135, 84, 0.2) !important;
    color: #a3e6c5 !important;
    border-color: rgba(25, 135, 84, 0.3) !important;
}

/* Requestor Dashboard Dark Mode Fixes */
body.requestor-dashboard.dark-mode .dashboard-metric-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(14, 116, 144, 0.25)) !important;
    color: #e5e5e5 !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}

body.requestor-dashboard.dark-mode .dashboard-metric-card .dashboard-metric-card__value {
    color: #ffffff;
}

body.requestor-dashboard.dark-mode .dashboard-metric-card .dashboard-metric-card__label {
    color: #93c5fd;
    opacity: 0.9;
}

body.requestor-dashboard.dark-mode .dashboard-metric-card--active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(14, 116, 144, 0.35)) !important;
    border-color: #60a5fa !important;
    box-shadow: 0 10px 30px rgba(14, 116, 144, 0.25) !important;
}

/* AI Chat Bot Widget */
.ai-chat-widget {
    --ai-chat-offset: clamp(12px, 2vw, 30px);
    --ai-chat-toggle-size: 60px;
    position: fixed;
    bottom: var(--ai-chat-offset);
    right: var(--ai-chat-offset);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    pointer-events: none;
}

.ai-chat-widget > * {
    pointer-events: auto;
}

.ai-chat-toggle-btn {
    width: var(--ai-chat-toggle-size);
    height: var(--ai-chat-toggle-size);
    border-radius: 50%;
    background: linear-gradient(135deg, #2f6cf3, #1d4ed8);
    color: white;
    border: none;
    box-shadow: 0 10px 24px rgba(29, 78, 216, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ai-chat-toggle-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 14px 28px rgba(47, 108, 243, 0.36);
}

.ai-chat-toggle-btn i {
    transition: transform 0.25s ease;
}

.ai-chat-toggle-btn.active i {
    transform: rotate(12deg);
}

.ai-chat-window {
    width: min(430px, calc(100vw - (var(--ai-chat-offset) * 2)));
    height: min(620px, calc(100vh - var(--ai-chat-toggle-size) - (var(--ai-chat-offset) * 2) - 30px));
    min-height: min(520px, calc(100vh - var(--ai-chat-toggle-size) - (var(--ai-chat-offset) * 2) - 30px));
    max-width: calc(100vw - (var(--ai-chat-offset) * 2));
    max-height: calc(100vh - var(--ai-chat-toggle-size) - (var(--ai-chat-offset) * 2) - 30px);
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.24);
    overflow: hidden;
    display: none;
    flex-direction: column;
    border: 1px solid rgba(15, 23, 42, 0.12);
    position: relative;
    animation: aiChatPopupIn 0.24s ease-out forwards;
}

.ai-chat-window.open {
    display: flex;
}

.ai-chat-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    background: rgba(15, 23, 42, 0.52);
    color: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

/* ══════════════════════════════════════════════════════════
   PROFILE PAGE
   ══════════════════════════════════════════════════════════ */
.profile-page {
    max-width: 860px;
    margin: 0 auto;
    padding-bottom: 3rem;
}

.profile-hero {
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
}

.profile-hero__banner {
    height: 110px;
    background: linear-gradient(120deg, #1d4ed8 0%, #3b82f6 50%, #6366f1 100%);
}

.profile-hero__body {
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    padding: 0 1.75rem 1.4rem;
    flex-wrap: wrap;
}

.profile-hero__avatar-wrap {
    position: relative;
    margin-top: -52px;
    flex-shrink: 0;
}

.profile-hero__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.18);
    display: block;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.3);
}

.profile-hero__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2f6cf3, #6366f1);
}

.profile-hero__avatar-edit {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2f6cf3;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.2);
    transition: background 0.15s ease, transform 0.2s var(--spring);
    z-index: 1;
}

.profile-hero__avatar-edit:hover {
    background: #1d4ed8;
    transform: scale(1.12);
}

.profile-hero__info {
    padding-bottom: 0.25rem;
    flex: 1 1 200px;
}

.profile-hero__name {
    font-size: 1.35rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 0.35rem;
    line-height: 1.25;
}

.profile-hero__role-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(47, 108, 243, 0.18);
    color: #93c5fd;
    border: 1px solid rgba(147, 197, 253, 0.2);
}

.profile-hero__meta {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    color: #94a3b8;
    gap: 0.2rem;
}

/* Tabs */
.profile-tabs {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
    padding: 0.35rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(12, 18, 32, 0.42);
    align-items: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.profile-tab {
    padding: 0.6rem 1.05rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    margin-bottom: 0;
    border-radius: 999px;
}

/* ── Inline view-mode toggle inside .profile-tabs ── */
.profile-tabs__vmt {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 3px 4px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.profile-vmt__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.70);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    letter-spacing: 0.02em;
    border: none;
    background: transparent;
    transition:
        background 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s var(--spring);
}
.profile-vmt__btn i { font-size: 12.5px; line-height: 1; }
.profile-vmt__btn--active {
    background: linear-gradient(135deg, #2f6cf3 0%, #4f46e5 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(47, 108, 243, 0.4);
    transform: scale(1.04);
}
.profile-vmt__btn:hover:not(.profile-vmt__btn--active) {
    color: rgba(255, 255, 255, 0.90);
    background: rgba(255, 255, 255, 0.12);
}
.profile-vmt__btn--maintenance {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}
.profile-vmt__btn--maintenance:hover::after,
.profile-vmt__btn--maintenance:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.96);
    color: #f8fafc;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    z-index: 30;
    pointer-events: none;
}
.profile-vmt__divider {
    display: block;
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

/* Light-mode overrides for the inline toggle */
body:not(.dark-mode) .profile-tabs__vmt {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(148, 163, 184, 0.42) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
body:not(.dark-mode) .profile-tabs__vmt .profile-vmt__btn,
body:not(.dark-mode) .profile-tabs__vmt .profile-vmt__btn:hover,
body:not(.dark-mode) .profile-tabs__vmt .profile-vmt__btn:focus-visible {
    color: #0f172a !important;
    background: transparent !important;
}
body:not(.dark-mode) .profile-vmt__btn--maintenance {
    opacity: 0.6;
    color: #475569 !important;
}
body:not(.dark-mode) .profile-tabs__vmt .profile-vmt__btn--active {
    background: linear-gradient(135deg, #2f6cf3 0%, #4f46e5 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(47, 108, 243, 0.45);
}
body:not(.dark-mode) .profile-tabs__vmt .profile-vmt__divider {
    background: rgba(148, 163, 184, 0.5) !important;
}

/* Dark-mode readability fixes for profile settings card */
body.dark-mode .profile-card,
body.dark-mode .profile-card h3,
body.dark-mode .profile-card .profile-card__title,
body.dark-mode .profile-card .profile-label,
body.dark-mode .profile-card .list-group-item,
body.dark-mode .profile-card .list-group-item .fw-semibold,
body.dark-mode .profile-card .list-group-item .text-muted,
body.dark-mode .profile-card p,
body.dark-mode .profile-card .small,
body.dark-mode .profile-card .form-text,
body.dark-mode .profile-card .text-muted {
    color: #f8fafc !important;
}
body.dark-mode .profile-card .list-group-item .text-muted,
body.dark-mode .profile-card p,
body.dark-mode .profile-card .small,
body.dark-mode .profile-card .form-text,
body.dark-mode .profile-card .text-muted {
    color: rgba(226, 232, 240, 0.78) !important;
}
body.dark-mode .profile-card .list-group-item {
    color: #f8fafc !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    background: transparent !important;
}
body.dark-mode .profile-card .list-group-item > div:first-child {
    color: #f8fafc !important;
}
body.dark-mode .profile-card form > h3 {
    color: #f8fafc !important;
}
body.dark-mode .profile-card .btn-outline-primary {
    color: #dbeafe !important;
    border-color: rgba(96, 165, 250, 0.95) !important;
}
body.dark-mode .profile-card .btn-outline-primary:hover {
    color: #eff6ff !important;
    background: rgba(59, 130, 246, 0.14) !important;
}

/* Mobile: stack view-mode below tabs */
body.view-mobile .profile-tabs__vmt {
    margin-top: 4px;
}

.profile-tab:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.04);
}

.profile-tab--active {
    color: #fff;
    background: linear-gradient(135deg, #2f6cf3 0%, #4f46e5 100%);
    border-color: rgba(255,255,255,0.16);
    box-shadow: 0 4px 12px -4px rgba(47,108,243,0.7);
}

.profile-panel { display: none; }
.profile-panel--active { display: block; }

.profile-card {
    padding: 1.75rem;
}
.profile-card form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.profile-card form > h3 {
    margin: 0.25rem 0 0;
    line-height: 1.3;
}
.profile-card .list-group {
    margin-bottom: 0 !important;
    gap: 0.05rem;
}
.profile-card .list-group-item {
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
    min-height: 3.25rem;
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: transparent;
}
.profile-card .list-group-item .fw-semibold {
    line-height: 1.35;
    font-size: 0.98rem;
}
.profile-card .list-group-item > div:first-child {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.profile-card .list-group-item .form-check.form-switch {
    margin-bottom: 0 !important;
}
.profile-card .mt-4 {
    margin-top: 0.5rem !important;
}
.profile-card hr {
    margin: 0.25rem 0 0 !important;
}

.profile-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.profile-label {
    color: #cbd5e1;
    font-weight: 500;
    font-size: 0.875rem;
}

.profile-avatar-section {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.profile-avatar-preview-wrap { flex-shrink: 0; }

.profile-avatar-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.15);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.3);
    display: block;
}

.profile-avatar-preview--placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2f6cf3, #6366f1);
    border: 3px solid rgba(255,255,255,0.15);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.3);
}

.profile-avatar-controls { flex: 1 1 220px; }

/* Light-mode overrides */
body:not(.dark-mode) .profile-hero {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(148, 163, 184, 0.25);
}
/* Broad reset: all text in the hero body inherits dark when light mode is on */
body:not(.dark-mode) .profile-hero__body,
body:not(.dark-mode) .profile-hero__info { color: #0f172a; }
body:not(.dark-mode) .profile-hero__name { color: #0f172a; }
body:not(.dark-mode) .profile-hero__meta { color: #475569; }
body:not(.dark-mode) .profile-hero__role-badge {
    background: rgba(47, 108, 243, 0.12);
    color: #1d4ed8;
    border-color: rgba(29, 78, 216, 0.25);
}
body:not(.dark-mode) .profile-tabs {
    background: rgba(255, 255, 255, 0.66);
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
body:not(.dark-mode) .profile-tab { color: #64748b; }
body:not(.dark-mode) .profile-tab:hover { color: #0f172a; background: rgba(15, 23, 42, 0.04); }
body:not(.dark-mode) .profile-tab--active {
    color: #fff;
    background: linear-gradient(135deg, #2f6cf3 0%, #4f46e5 100%);
    border-color: rgba(255,255,255,0.2);
}
/* Profile card internals: override the dark-mode explicit colors */
body:not(.dark-mode) .profile-card__title { color: #0f172a !important; }
body:not(.dark-mode) .profile-label { color: #1e293b !important; }
body:not(.dark-mode) .profile-card p,
body:not(.dark-mode) .profile-card .text-muted,
body:not(.dark-mode) .profile-avatar-section .text-muted { color: #64748b !important; }
/* Avatar panel form help text */
body:not(.dark-mode) .profile-avatar-controls .form-text { color: #64748b; }
body:not(.dark-mode) .banner-swatch__label { color: #fff; }
/* Coming-soon swatch text is always readable on its own bg */
body:not(.dark-mode) .banner-swatch--custom .banner-swatch__label { color: #e2e8f0; }

/* Banner gradient variants */
.profile-hero__banner--blue    { background-image: linear-gradient(120deg, #1d4ed8 0%, #3b82f6 50%, #6366f1 100%); }
.profile-hero__banner--sunset  { background-image: linear-gradient(120deg, #f97316 0%, #ec4899 60%, #8b5cf6 100%); }
.profile-hero__banner--forest  { background-image: linear-gradient(120deg, #065f46 0%, #10b981 60%, #3b82f6 100%); }
.profile-hero__banner--crimson { background-image: linear-gradient(120deg, #7f1d1d 0%, #dc2626 50%, #f97316 100%); }
.profile-hero__banner--slate   { background-image: linear-gradient(120deg, #0f172a 0%, #334155 60%, #475569 100%); }
.profile-hero__banner--aurora  { background-image: linear-gradient(120deg, #1e1b4b 0%, #7c3aed 50%, #06b6d4 100%); }
.profile-hero__banner--rose    { background-image: linear-gradient(120deg, #881337 0%, #f43f5e 50%, #fb923c 100%); }
.profile-hero__banner--teal    { background-image: linear-gradient(120deg, #134e4a 0%, #0d9488 50%, #3b82f6 100%); }

/* Banner edit button (overlay on hero banner) */
.profile-hero__banner {
    position: relative;
}
.profile-hero__banner-edit {
    position: absolute;
    bottom: 0.6rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.18s var(--spring);
}
.profile-hero__banner-edit:hover {
    background: rgba(0, 0, 0, 0.55);
    transform: translateY(-1px);
}

/* Banner swatch picker */
.banner-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}
.banner-swatch {
    position: relative;
    height: 68px;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.15s ease, transform 0.18s var(--spring), box-shadow 0.15s ease;
    display: flex;
    align-items: flex-end;
    padding: 0.35rem 0.5rem;
}
.banner-swatch:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.banner-swatch.is-active { border-color: #fff; box-shadow: 0 0 0 3px rgba(47,108,243,0.5); }
.banner-swatch__label { font-size: 0.7rem; font-weight: 600; color: rgba(255,255,255,0.9); text-shadow: 0 1px 3px rgba(0,0,0,0.5); pointer-events: none; }
.banner-swatch__check { position: absolute; top: 0.35rem; right: 0.45rem; font-size: 0.9rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.banner-swatch--blue    { background-image: linear-gradient(120deg, #1d4ed8 0%, #3b82f6 50%, #6366f1 100%); }
.banner-swatch--sunset  { background-image: linear-gradient(120deg, #f97316 0%, #ec4899 60%, #8b5cf6 100%); }
.banner-swatch--forest  { background-image: linear-gradient(120deg, #065f46 0%, #10b981 60%, #3b82f6 100%); }
.banner-swatch--crimson { background-image: linear-gradient(120deg, #7f1d1d 0%, #dc2626 50%, #f97316 100%); }
.banner-swatch--slate   { background-image: linear-gradient(120deg, #0f172a 0%, #334155 60%, #475569 100%); }
.banner-swatch--aurora  { background-image: linear-gradient(120deg, #1e1b4b 0%, #7c3aed 50%, #06b6d4 100%); }
.banner-swatch--rose    { background-image: linear-gradient(120deg, #881337 0%, #f43f5e 50%, #fb923c 100%); }
.banner-swatch--teal    { background-image: linear-gradient(120deg, #134e4a 0%, #0d9488 50%, #3b82f6 100%); }

/* Custom banner — coming soon */
.banner-swatch--custom {
    background: repeating-linear-gradient(
        45deg,
        rgba(148, 163, 184, 0.1) 0px,
        rgba(148, 163, 184, 0.1) 4px,
        rgba(148, 163, 184, 0.04) 4px,
        rgba(148, 163, 184, 0.04) 8px
    ), linear-gradient(120deg, #1e293b 0%, #334155 100%);
    border: 2px dashed rgba(148, 163, 184, 0.35);
    cursor: not-allowed;
    opacity: 0.85;
}
.banner-swatch--custom:hover { transform: none; box-shadow: none; }
.banner-swatch--custom .banner-swatch__label { color: #94a3b8; }
.banner-swatch--custom .banner-swatch__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    font-size: 1.25rem;
    color: rgba(148, 163, 184, 0.55);
    pointer-events: none;
}
.banner-swatch__coming-soon {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    pointer-events: none;
}

@media (max-width: 600px) {
    .profile-hero__body { padding: 0 1rem 1rem; }
    .profile-hero__avatar-wrap { margin-top: -44px; }
    .profile-hero__avatar { width: 80px; height: 80px; }
    .profile-hero__avatar--placeholder { font-size: 1.8rem; }
    .profile-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .profile-avatar-section { gap: 1.25rem; }
}

@keyframes aiChatPopupIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ai-chat-close-btn:hover {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(255, 255, 255, 1);
    transform: scale(1.05);
}

.ai-chat-body {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    background: #ffffff;
    position: relative;
}

.ai-chat-body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 768px) {
    .ai-chat-window {
        width: min(380px, calc(100vw - (var(--ai-chat-offset) * 2)));
        height: min(560px, calc(100vh - var(--ai-chat-toggle-size) - (var(--ai-chat-offset) * 2) - 24px));
        min-height: min(460px, calc(100vh - var(--ai-chat-toggle-size) - (var(--ai-chat-offset) * 2) - 24px));
    }
}

/* Mobile Responsive Chat */
@media (max-width: 576px) {
    .ai-chat-widget {
        bottom: 0;
        right: 0;
        left: 0;
        align-items: stretch;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        padding-left: env(safe-area-inset-left, 0px);
    }

    .ai-chat-window {
        position: fixed;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        bottom: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        margin: 0;
        z-index: 10000;
        padding-top: env(safe-area-inset-top, 0px);
    }

    .ai-chat-toggle-btn {
        margin: 12px;
        margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        margin-right: calc(12px + env(safe-area-inset-right, 0px));
    }

    .ai-chat-close-btn {
        top: max(14px, env(safe-area-inset-top, 0px));
        right: 14px;
    }
}

body.view-mobile:not(.view-mobile-preview) .ai-chat-widget {
    bottom: 0;
    right: 0;
    left: 0;
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

body.view-mobile:not(.view-mobile-preview) .ai-chat-window {
    position: fixed;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    bottom: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    margin: 0;
    z-index: 10000;
}

body.view-mobile:not(.view-mobile-preview) .ai-chat-toggle-btn {
    margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    margin-right: calc(12px + env(safe-area-inset-right, 0px));
}

/* Accessibility & High Contrast Enhancements */
.ai-chat-toggle-btn:focus-visible,
.ai-chat-close-btn:focus-visible {
    outline: 3px solid #facc15 !important;
    outline-offset: 2px;
}

body.dark-mode .ai-chat-window {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.18);
}

body.dark-mode .ai-chat-body {
    background: #020617;
}

body.dark-mode .ai-chat-close-btn {
    border-color: rgba(255, 255, 255, 0.82);
    background: rgba(17, 24, 39, 0.92);
    color: #f8fafc;
}

/* Dashboard table one-line format */
.dashboard-table-wrapper .table-nowrap th,
.dashboard-table-wrapper .table-nowrap td {
    white-space: nowrap;
    vertical-align: middle;
}

/* Activity log edit focus states */
.activity-edit-focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}

.activity-edit-row-focus {
    outline: 2px solid rgba(59, 130, 246, 0.45);
    outline-offset: -2px;
}

.activity-chart-wrap {
    position: relative;
    height: 260px;
    min-height: 260px;
}

.activity-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* ─────────────────────────────────────────────────────────────────────────────
   REPORTS PAGE  (rpt-*)
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Page header ── */
.rpt-page-header {
    padding: 1.4rem 1.75rem;
}

.rpt-hero-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(59, 130, 246, 0.18));
    border: 1px solid rgba(99, 102, 241, 0.28);
    color: #818cf8;
}

/* ── View tab toggle ── */
.rpt-tab-group {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 3px;
    gap: 3px;
}

.rpt-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.18s var(--spring);
    white-space: nowrap;
}
.rpt-tab:hover {
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.07);
    text-decoration: none;
}
.rpt-tab--active {
    background: #fff;
    color: #4338ca;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(99, 102, 241, 0.18);
}

/* ── KPI / Metric cards ── */
.rpt-kpi-card {
    position: relative;
    border-radius: 16px;
    padding: 1.25rem 1.4rem 1.1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--glass-bg);
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
    transition: transform var(--spring-dur) var(--spring), box-shadow var(--spring-dur) var(--spring);
}
.rpt-kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
}
.rpt-kpi-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.rpt-kpi--blue::before  { background: linear-gradient(90deg, #3b82f6, #6366f1); }
.rpt-kpi--green::before { background: linear-gradient(90deg, #10b981, #34d399); }
.rpt-kpi--amber::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.rpt-kpi--cyan::before  { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
.rpt-kpi--violet::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }

.rpt-kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    margin-bottom: 0.7rem;
}

.rpt-kpi--blue  .rpt-kpi-icon { background: rgba(59, 130, 246, 0.1);  color: #2563eb; border: 1px solid rgba(59, 130, 246, 0.2); }
.rpt-kpi--green .rpt-kpi-icon { background: rgba(16, 185, 129, 0.1);  color: #059669; border: 1px solid rgba(16, 185, 129, 0.2); }
.rpt-kpi--amber .rpt-kpi-icon { background: rgba(245, 158, 11, 0.1);  color: #d97706; border: 1px solid rgba(245, 158, 11, 0.2); }
.rpt-kpi--cyan  .rpt-kpi-icon { background: rgba(6, 182, 212, 0.1);   color: #0891b2; border: 1px solid rgba(6, 182, 212, 0.2);  }
.rpt-kpi--violet .rpt-kpi-icon { background: rgba(139, 92, 246, 0.1); color: #7c3aed; border: 1px solid rgba(139, 92, 246, 0.2); }

.rpt-kpi-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.45);
    margin-bottom: 0.05rem;
}
.rpt-kpi-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 0.2rem;
}
.rpt-kpi--blue   .rpt-kpi-value { color: #1d4ed8; }
.rpt-kpi--green  .rpt-kpi-value { color: #065f46; }
.rpt-kpi--amber  .rpt-kpi-value { color: #92400e; }
.rpt-kpi--cyan   .rpt-kpi-value { color: #0e7490; }
.rpt-kpi--violet .rpt-kpi-value { color: #5b21b6; }

.rpt-kpi-sub {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.38);
}

/* ── Chart cards ── */
.rpt-chart-card {
    padding: 1.5rem;
}

.rpt-chart-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.2rem;
}
/* ── Chart expand button ── */

/* ══════════════════════════════════════════════════════════
   MOBILE VIEW MODE  (body.view-mobile / body.view-mobile-preview)
   ──────────────────────────────────────────────────────────
   view-mobile          = shared phone skin (auto MQ ≤520 or Profile toggle).
   view-mobile-preview  = 390px mock, only when Profile toggle is on AND
                          the viewport is wider than 520px. Real phones
                          never get the mock, dark stage, or inner 390 frame.
   Desktop without these classes is unchanged.
   ══════════════════════════════════════════════════════════ */

/* ── 1. Real phones: full-bleed, clip horizontal overflow, safe-area ── */
html:has(body.view-mobile:not(.view-mobile-preview)),
body.view-mobile:not(.view-mobile-preview) {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
}

body.view-mobile:not(.view-mobile-preview) > main.container {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
    min-height: calc(100dvh - 52px);
    border-left: 0;
    border-right: 0;
    position: relative;
}

/* ── 2. Desktop Profile mock: dark stage + 390px inner frame ── */
body.view-mobile-preview {
    background: #05111f !important;
}

body.view-mobile-preview > nav.navbar {
    background: transparent !important;
    box-shadow: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.view-mobile-preview > nav.navbar > .container-fluid {
    max-width: 390px !important;
    margin: 0 auto !important;
    background: linear-gradient(120deg, #1d4ed8, #3b82f6) !important;
    padding: 0.55rem 1rem !important;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.55);
}

body.page-login.view-mobile > nav.navbar > .container-fluid,
body.page-login.view-mobile-preview > nav.navbar > .container-fluid {
    max-width: none !important;
    margin: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}

body.page-login.view-mobile-preview {
    background: unset !important;
}

body.page-login.view-mobile-preview > main.container {
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: 0;
    border-right: 0;
}

body.view-mobile-preview:not(.page-login) > main.container {
    max-width: 390px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    min-height: calc(100vh - 52px);
    border-left: 1px solid rgba(99, 102, 241, 0.2);
    border-right: 1px solid rgba(99, 102, 241, 0.2);
    position: relative;
}

body.view-mobile-preview > main.container::before {
    display: none;
}

/* ── 3. Avatar dropdown stays in the frame ── */
body.view-mobile .nav-avatar-menu {
    z-index: 9999;
    max-width: min(230px, calc(100vw - 1.5rem));
    min-width: min(200px, calc(100vw - 2rem));
}

/* ── 4. Force hamburger so the desktop mock still collapses (viewport still ≥ lg) ── */
body.view-mobile .navbar-expand-lg {
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}
body.view-mobile .navbar-expand-lg .navbar-toggler {
    display: inline-flex !important;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}
body.view-mobile .navbar-expand-lg .navbar-collapse:not(.show):not(.collapsing) {
    display: none !important;
    flex-basis: 100% !important;
}
body.view-mobile .navbar-expand-lg .navbar-collapse.show,
body.view-mobile .navbar-expand-lg .navbar-collapse.collapsing {
    display: block !important;
    flex-basis: 100% !important;
}
body.view-mobile .navbar-expand-lg .navbar-nav {
    flex-direction: column !important;
}

/* ── 5. Collapse ALL columns to full-width (fixes Bootstrap row-cols-* bare .col bug) ── */
body.view-mobile .row {
    flex-direction: column;
}
body.view-mobile .row > [class*="col-"],
body.view-mobile .row > .col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── 6. Dashboard metric cards — 2-column grid ── */
body.view-mobile .dashboard-metrics {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    flex-direction: unset !important;
    margin-bottom: 0.9rem !important;
}
body.view-mobile .dashboard-metrics > * {
    width: 100% !important;
    flex: unset !important;
    padding: 0 !important;
}
body.view-mobile .dashboard-metric-card {
    min-height: 88px;
    padding: 0.75rem 0.85rem !important;
    border-radius: 14px;
    gap: 0.2rem;
}
body.view-mobile .dashboard-metric-card__label {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
}
body.view-mobile .dashboard-metric-card__value {
    font-size: 1.5rem;
    font-weight: 800;
}
body.view-mobile .dashboard-metric-card__hint {
    font-size: 0.68rem;
}

body.view-mobile .dashboard-toolbar {
    width: 100%;
    justify-content: flex-start !important;
    margin-left: 0 !important;
}
body.view-mobile .dashboard-toolbar__search,
body.view-mobile .dashboard-toolbar__actions {
    width: 100%;
}
body.view-mobile .dashboard-toolbar .dashboard-request-search-box--toolbar {
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
}

/* ── 7. Glass cards ── */
body.view-mobile .glass-card {
    border-radius: 16px;
    padding: 0.85rem 0.8rem !important;
}
body.view-mobile .glass-card .glass-card {
    border-radius: 12px;
    padding: 0.6rem 0.7rem !important;
}

/* ── 8. Typography scale ── */
body.view-mobile h4, body.view-mobile .h4 { font-size: 1rem !important; }
body.view-mobile h5, body.view-mobile .h5 { font-size: 0.88rem !important; }
body.view-mobile h6, body.view-mobile .h6 { font-size: 0.8rem !important; }
body.view-mobile p, body.view-mobile li  { font-size: 0.82rem; }

/* ── 9. Dashboard stat pills — keep inline, allow horizontal scroll on their row ── */
body.view-mobile .dbd-stat-pill { min-width: 0; flex-shrink: 0; }
body.view-mobile .dbd-stats-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.35rem;
    padding-bottom: 2px;
}
body.view-mobile .dbd-stats-row::-webkit-scrollbar { display: none; }

/* ── 10. Dashboard action/filter bar (All, Ongoing … + Export CSV) ── */
body.view-mobile .d-flex:has(> .dbd-stat-pill) {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.35rem !important;
    padding-bottom: 4px;
    justify-content: flex-start !important;
    margin-left: 0 !important;
}
body.view-mobile .d-flex:has(> .dbd-stat-pill)::-webkit-scrollbar { display: none; }

/* ── 11. Tables — horizontal scroll, compact. nowrap only on wide trackers ── */
body.view-mobile .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.view-mobile table { min-width: 320px; font-size: 0.77rem; }
body.view-mobile .table th,
body.view-mobile .table td { padding: 0.38rem 0.5rem; }
body.view-mobile .dashboard-table-wrapper .table th,
body.view-mobile .dashboard-table-wrapper .table td,
body.view-mobile .sqr-tracker th,
body.view-mobile .sqr-tracker td,
body.view-mobile .rpt-activity-table th,
body.view-mobile .rpt-activity-table td {
    white-space: nowrap;
}

/* ── 12. Buttons & forms — 44px targets, 16px inputs (no iOS zoom) ── */
body.view-mobile .btn {
    font-size: 0.78rem;
    padding: 0.38rem 0.8rem;
    min-height: 44px;
}
body.view-mobile .btn-sm {
    font-size: 0.72rem;
    padding: 0.3rem 0.6rem;
    min-height: 44px;
}
body.view-mobile .form-control,
body.view-mobile .form-select {
    font-size: 16px;
    padding: 0.5rem 0.65rem;
    min-height: 44px;
}
body.view-mobile label { font-size: 0.78rem; }
body.view-mobile .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
}

body.view-mobile.request-detail-page .d-flex.justify-content-between.align-items-center.mb-4 {
    flex-wrap: wrap !important;
    gap: 0.75rem;
    align-items: flex-start !important;
}
body.view-mobile.request-detail-page .row.g-3 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
    gap: 0.75rem;
}
body.view-mobile.request-detail-page .row.g-3 > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: unset !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.view-mobile .mgmt-tabs.nav-pills,
body.view-mobile.management-page .mgmt-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}
body.view-mobile .mgmt-tabs .nav-item { flex: 0 0 auto; }
body.view-mobile .mgmt-tabs .nav-link {
    min-height: 44px;
    white-space: nowrap;
}

/* ── 13. Profile page ── */
body.view-mobile .profile-page { max-width: 100% !important; }
body.view-mobile .profile-hero__banner { height: 72px !important; }
body.view-mobile .profile-hero__body { padding: 0 0.6rem 0.75rem; }
body.view-mobile .profile-hero__avatar-wrap { margin-top: -32px !important; }
body.view-mobile .profile-hero__avatar,
body.view-mobile .profile-hero__avatar--placeholder {
    width: 64px !important;
    height: 64px !important;
    font-size: 1.35rem !important;
}
body.view-mobile .profile-hero__name { font-size: 0.95rem !important; }
body.view-mobile .profile-hero__meta,
body.view-mobile .profile-hero__role-badge { font-size: 0.68rem !important; }
body.view-mobile .profile-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.1rem;
    padding-bottom: 2px;
}
body.view-mobile .profile-tabs::-webkit-scrollbar { display: none; }
body.view-mobile .profile-tab {
    padding: 0.45rem 0.7rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 44px;
}
body.view-mobile .profile-tabs__vmt {
    flex-shrink: 0;
    transform: scale(0.88);
    transform-origin: right center;
}
body.view-mobile .profile-card { padding: 0.9rem !important; }
body.view-mobile .profile-avatar-section { flex-direction: column; align-items: center; gap: 0.85rem; }
body.view-mobile .profile-avatar-preview,
body.view-mobile .profile-avatar-preview--placeholder { width: 76px !important; height: 76px !important; }
body.view-mobile .banner-swatch-grid { grid-template-columns: repeat(3, 1fr) !important; }

/* ── 14. Reports KPI row — 2-column grid ── */
body.view-mobile .rpt-kpi-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
    gap: 0.45rem !important;
}
body.view-mobile .rpt-kpi { min-width: 0; }

/* ══════════════════════════════════════════════════════════
   15. REPORTS PAGE — fully isolated mobile overrides
       (All rules prefixed body.view-mobile — zero desktop bleed)
   ══════════════════════════════════════════════════════════ */

body.view-mobile .d-flex:has(.rpt-tab-group) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    padding-bottom: 2px;
}
body.view-mobile .d-flex:has(.rpt-tab-group)::-webkit-scrollbar { display: none; }

body.view-mobile .rpt-tab-group {
    flex-shrink: 0;
    padding: 2px;
    gap: 2px;
    border-radius: 10px;
}
body.view-mobile .rpt-tab {
    padding: 5px 10px;
    font-size: 0.75rem;
    white-space: nowrap;
    min-height: 44px;
}

body.view-mobile .row:has(> [class*="col-"] > .rpt-kpi-card) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
    gap: 0.45rem;
}
body.view-mobile .row:has(> [class*="col-"] > .rpt-kpi-card) > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: unset !important;
}

body.view-mobile .row:has(> [class*="col-"] > .rpt2-kpi) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
    gap: 0.45rem;
}
body.view-mobile .row:has(> [class*="col-"] > .rpt2-kpi) > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: unset !important;
}

body.view-mobile .rpt-kpi-card {
    padding: 0.85rem 0.75rem 0.7rem !important;
    border-radius: 14px;
}
body.view-mobile .rpt-kpi-icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.78rem !important;
    border-radius: 7px !important;
    margin-bottom: 0.4rem !important;
}
body.view-mobile .rpt-kpi-value {
    font-size: 1.5rem !important;
    margin-bottom: 0.1rem !important;
}
body.view-mobile .rpt-kpi-sub {
    display: none !important;
}
body.view-mobile .rpt-kpi-label {
    font-size: 0.6rem !important;
    letter-spacing: 0.04em !important;
}

body.view-mobile .rpt-chart-card {
    padding: 1rem 0.85rem !important;
}
body.view-mobile .rpt-chart-head {
    gap: 0.45rem;
    margin-bottom: 0.65rem;
    flex-wrap: wrap;
    align-items: flex-start !important;
}
body.view-mobile .rpt-chart-icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.78rem !important;
    border-radius: 7px !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
}
body.view-mobile .rpt-chart-title {
    font-size: 0.76rem !important;
    margin-bottom: 0 !important;
}
body.view-mobile .rpt-chart-sub {
    display: none !important;
}
body.view-mobile .rpt-expand-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 0.85rem !important;
}

body.view-mobile .rpt-canvas-wrap {
    min-height: 195px !important;
    flex: none !important;
    height: 195px;
}
body.view-mobile .rpt-canvas-wrap--donut {
    min-height: 175px !important;
    height: 175px;
}

body.view-mobile .rpt-period-badge {
    font-size: 0.72rem;
    padding: 0.25rem 0.6rem;
}

body.view-mobile .rpt-activity-filter .row {
    flex-direction: column !important;
}

body.view-mobile .rpt-activity-table th:nth-child(1),
body.view-mobile .rpt-activity-table td:nth-child(1) { display: none; }   /* # */
body.view-mobile .rpt-activity-table th:nth-child(7),
body.view-mobile .rpt-activity-table td:nth-child(7) { display: none; }   /* Location */

body.view-mobile .rpt-activity-table {
    font-size: 0.72rem !important;
    min-width: 420px;
}
body.view-mobile .rpt-activity-table th,
body.view-mobile .rpt-activity-table td {
    padding: 0.32rem 0.38rem !important;
    white-space: nowrap;
}

body.view-mobile .rpt-eng-avatar {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.62rem !important;
}
body.view-mobile .rpt-date-chip { font-size: 0.72rem; }
body.view-mobile .rpt-account-name { font-size: 0.72rem; }
body.view-mobile .rpt-hours-badge { font-size: 0.72rem; padding: 0.15rem 0.45rem; }
body.view-mobile .rpt-edit-btn { width: 22px; height: 22px; font-size: 0.7rem; }

body.view-mobile .rpt-table-head th {
    font-size: 0.65rem !important;
    padding: 0.3rem 0.45rem !important;
}

body.view-mobile .rpt-log-count-badge { font-size: 0.72rem; padding: 0.25rem 0.6rem; }

body.view-mobile .rpt-log-pagination {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem !important;
}
body.view-mobile .rpt-page-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 0.78rem !important;
    border-radius: 7px !important;
}


.rpt-expand-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.03);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    color: rgba(0,0,0,0.4);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    line-height: 1;
}
.rpt-expand-btn:hover {
    background: rgba(59,130,246,0.1);
    border-color: rgba(59,130,246,0.3);
    color: #2563eb;
}
body.dark-mode .rpt-expand-btn { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.38); }
body.dark-mode .rpt-expand-btn:hover { background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.45); color: #818cf8; }
/* ── Chart expand modal ── */
.rpt-chart-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,0.62);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.rpt-chart-modal.is-open { opacity: 1; pointer-events: auto; }
.rpt-chart-modal__inner {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 28px 80px rgba(0,0,0,0.32);
    width: min(95vw, 1120px);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.93) translateY(10px);
    transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rpt-chart-modal.is-open .rpt-chart-modal__inner { transform: scale(1) translateY(0); }
body.dark-mode .rpt-chart-modal__inner { background: #1e293b; box-shadow: 0 28px 80px rgba(0,0,0,0.6); }
.rpt-chart-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    flex-shrink: 0;
}
body.dark-mode .rpt-chart-modal__header { border-bottom-color: rgba(255,255,255,0.07); }
.rpt-chart-modal__title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.6);
}
body.dark-mode .rpt-chart-modal__title { color: rgba(255,255,255,0.62); }
.rpt-chart-modal__close {
    width: 32px; height: 32px;
    border: 1px solid rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.04);
    border-radius: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    color: rgba(0,0,0,0.48);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rpt-chart-modal__close:hover { background: rgba(220,53,69,0.1); border-color: rgba(220,53,69,0.3); color: #dc3545; }
body.dark-mode .rpt-chart-modal__close { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.45); }
body.dark-mode .rpt-chart-modal__close:hover { background: rgba(220,53,69,0.15); border-color: rgba(220,53,69,0.4); color: #f87171; }
.rpt-chart-modal__canvas-wrap {
    flex: 1;
    padding: 1.25rem 1.5rem 1.5rem;
    min-height: 440px;
    position: relative;
}
.rpt-chart-modal__canvas-wrap canvas { width: 100% !important; height: 100% !important; }

body.view-mobile .rpt-chart-modal {
    padding: max(0.75rem, env(safe-area-inset-top, 0px)) 0.75rem max(0.75rem, env(safe-area-inset-bottom, 0px));
    align-items: flex-end;
}
body.view-mobile .rpt-chart-modal__inner {
    width: 100%;
    max-height: 90dvh;
}
body.view-mobile .rpt-chart-modal__canvas-wrap {
    min-height: min(70vh, 440px);
}
body.view-mobile .rpt-chart-modal__close {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
}

.rpt-chart-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.rpt-icon--blue   { background: rgba(59, 130, 246, 0.1);  color: #2563eb; border: 1px solid rgba(59, 130, 246, 0.18); }
.rpt-icon--violet { background: rgba(139, 92, 246, 0.1);  color: #7c3aed; border: 1px solid rgba(139, 92, 246, 0.18); }
.rpt-icon--green  { background: rgba(16, 185, 129, 0.1);  color: #059669; border: 1px solid rgba(16, 185, 129, 0.18); }
.rpt-icon--amber  { background: rgba(245, 158, 11, 0.1);  color: #d97706; border: 1px solid rgba(245, 158, 11, 0.18); }
.rpt-icon--cyan   { background: rgba(6, 182, 212, 0.1);   color: #0891b2; border: 1px solid rgba(6, 182, 212, 0.18);  }
.rpt-icon--indigo { background: rgba(99, 102, 241, 0.1);  color: #4f46e5; border: 1px solid rgba(99, 102, 241, 0.18); }

.rpt-chart-title {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 0.15rem;
    color: rgba(0, 0, 0, 0.75);
}
.rpt-chart-sub {
    font-size: 0.77rem;
    color: rgba(0, 0, 0, 0.42);
    margin: 0;
}

/* ── Canvas wrappers ── */
.rpt-canvas-wrap {
    position: relative;
    flex: 1 1 0;   /* grow to fill remaining card height */
    min-height: 270px;
}
.rpt-canvas-wrap--donut {
    min-height: 270px;
}
.rpt-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
}

/* ── Table styling ── */
.rpt-table-head th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.45);
    border-top: none;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* ── Table badges ── */
.rpt-badge--green {
    background: rgba(16, 185, 129, 0.12);
    color: #065f46;
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-weight: 600;
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
}
.rpt-badge--amber {
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.3);
    font-weight: 600;
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
}
.rpt-badge--gray {
    background: rgba(100, 116, 139, 0.1);
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.2);
    font-weight: 600;
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
}
.rpt-badge--muted {
    background: rgba(100, 116, 139, 0.08);
    color: #64748b;
    border: 1px solid rgba(100, 116, 139, 0.15);
    font-weight: 500;
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
}

/* ── Period badge ── */
.rpt-period-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #4338ca;
}

/* ── Status chips ── */
.rpt-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.65);
    transition: transform var(--spring-dur) var(--spring), box-shadow var(--spring-dur) var(--spring);
}
.rpt-status-chip:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.rpt-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
    flex-shrink: 0;
}
.rpt-status-count {
    font-weight: 800;
    font-size: 0.88rem;
    color: rgba(0, 0, 0, 0.75);
}

/* ───────────────────────── DARK MODE OVERRIDES ─────────────────────────── */
body.dark-mode .rpt-hero-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(59, 130, 246, 0.22));
    border-color: rgba(99, 102, 241, 0.35);
    color: #a5b4fc;
}

body.dark-mode .rpt-tab-group {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .rpt-tab { color: rgba(255, 255, 255, 0.5); }
body.dark-mode .rpt-tab:hover { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.05); }
body.dark-mode .rpt-tab--active {
    background: rgba(99, 102, 241, 0.22);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.32);
    box-shadow: 0 1px 8px rgba(99, 102, 241, 0.18);
}

body.dark-mode .rpt-kpi-card {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
body.dark-mode .rpt-kpi-label { color: rgba(255, 255, 255, 0.42); }
body.dark-mode .rpt-kpi-sub   { color: rgba(255, 255, 255, 0.35); }

body.dark-mode .rpt-kpi--blue  .rpt-kpi-icon { background: rgba(59, 130, 246, 0.18);  color: #60a5fa; border-color: rgba(59, 130, 246, 0.3); }
body.dark-mode .rpt-kpi--green .rpt-kpi-icon { background: rgba(16, 185, 129, 0.18);  color: #34d399; border-color: rgba(16, 185, 129, 0.3); }
body.dark-mode .rpt-kpi--amber .rpt-kpi-icon { background: rgba(245, 158, 11, 0.18);  color: #fbbf24; border-color: rgba(245, 158, 11, 0.3); }
body.dark-mode .rpt-kpi--cyan  .rpt-kpi-icon { background: rgba(6, 182, 212, 0.18);   color: #22d3ee; border-color: rgba(6, 182, 212, 0.3);  }
body.dark-mode .rpt-kpi--violet .rpt-kpi-icon { background: rgba(139, 92, 246, 0.18); color: #a78bfa; border-color: rgba(139, 92, 246, 0.3); }

body.dark-mode .rpt-kpi--blue   .rpt-kpi-value { color: #93c5fd; }
body.dark-mode .rpt-kpi--green  .rpt-kpi-value { color: #6ee7b7; }
body.dark-mode .rpt-kpi--amber  .rpt-kpi-value { color: #fcd34d; }
body.dark-mode .rpt-kpi--cyan   .rpt-kpi-value { color: #67e8f9; }
body.dark-mode .rpt-kpi--violet .rpt-kpi-value { color: #c4b5fd; }

body.dark-mode .rpt-chart-title { color: rgba(255, 255, 255, 0.82); }
body.dark-mode .rpt-chart-sub   { color: rgba(255, 255, 255, 0.4);  }

body.dark-mode .rpt-icon--blue   { background: rgba(59, 130, 246, 0.18);  color: #60a5fa; border-color: rgba(59, 130, 246, 0.28); }
body.dark-mode .rpt-icon--violet { background: rgba(139, 92, 246, 0.18);  color: #a78bfa; border-color: rgba(139, 92, 246, 0.28); }
body.dark-mode .rpt-icon--green  { background: rgba(16, 185, 129, 0.18);  color: #34d399; border-color: rgba(16, 185, 129, 0.28); }
body.dark-mode .rpt-icon--amber  { background: rgba(245, 158, 11, 0.18);  color: #fbbf24; border-color: rgba(245, 158, 11, 0.28); }
body.dark-mode .rpt-icon--cyan   { background: rgba(6, 182, 212, 0.18);   color: #22d3ee; border-color: rgba(6, 182, 212, 0.28);  }
body.dark-mode .rpt-icon--indigo { background: rgba(99, 102, 241, 0.18);  color: #818cf8; border-color: rgba(99, 102, 241, 0.28); }

body.dark-mode .rpt-table-head th { color: rgba(255, 255, 255, 0.42); }

body.dark-mode .rpt-badge--green {
    background: rgba(16, 185, 129, 0.18);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.3);
}
body.dark-mode .rpt-badge--amber {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.3);
}
body.dark-mode .rpt-badge--gray {
    background: rgba(100, 116, 139, 0.18);
    color: #94a3b8;
    border-color: rgba(100, 116, 139, 0.28);
}
body.dark-mode .rpt-badge--muted {
    background: rgba(100, 116, 139, 0.12);
    color: #94a3b8;
    border-color: rgba(100, 116, 139, 0.2);
}

body.dark-mode .rpt-period-badge {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
}

body.dark-mode .rpt-status-chip {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.65);
}
body.dark-mode .rpt-status-count { color: rgba(255, 255, 255, 0.85); }

/* ── Activity log table redesign ─────────────────────────────────────────── */
.rpt-activity-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.8);
}
.rpt-activity-table th,
.rpt-activity-table td {
    border-right: 1px solid rgba(15, 23, 42, 0.12);
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
    padding: 0.7rem 0.75rem;
    vertical-align: middle;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}
.rpt-activity-table th {
    max-width: 0;
}
.rpt-activity-table td {
    line-height: 1.35;
}
.rpt-activity-table .text-nowrap,
.rpt-activity-table .d-inline-flex,
.rpt-activity-table .rpt-date-chip,
.rpt-activity-table .rpt-account-name,
.rpt-activity-table .al-req-link,
.rpt-activity-table .rpt-activity-type,
.rpt-activity-table .rpt-activity-detail {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.rpt-activity-table thead th:last-child,
.rpt-activity-table tbody td:last-child {
    border-right: none;
}
.rpt-activity-table tbody tr:last-child td {
    border-bottom: none;
}
.rpt-activity-table tbody tr.rpt-activity-row {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    transition: background 0.15s ease;
}
.rpt-activity-table tbody tr.rpt-activity-row:hover {
    background: rgba(99, 102, 241, 0.04);
}
.rpt-activity-table tbody tr.rpt-activity-row--editing {
    background: rgba(245, 158, 11, 0.07);
    box-shadow: inset 3px 0 0 #f59e0b;
}
.rpt-col-num,
.rpt-row-num {
    width: 2.75rem;
    min-width: 2.75rem;
    max-width: 2.75rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}
.rpt-col-num {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}
.rpt-row-num {
    font-size: 0.73rem;
    font-variant-numeric: tabular-nums;
    color: rgba(0, 0, 0, 0.35);
}
.rpt-date-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
}
.rpt-eng-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}
.rpt-account-name {
    font-size: 0.85rem;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.rpt-activity-cell {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.rpt-activity-type {
    font-weight: 600;
    font-size: 0.85rem;
}
.rpt-activity-detail {
    font-size: 0.74rem;
    line-height: 1.3;
    max-width: 260px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rpt-hours-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.8rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.09);
    border: 1px solid rgba(59, 130, 246, 0.18);
    color: #1d4ed8;
    font-weight: 700;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}
.rpt-edit-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #6366f1;
    border-radius: 7px;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1;
    box-sizing: border-box;
    vertical-align: middle;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform var(--spring-dur) var(--spring);
}
.rpt-edit-btn i {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    margin: 0;
    font-size: inherit;
    line-height: 1;
}
.rpt-edit-btn:hover {
    background: rgba(99, 102, 241, 0.18);
    color: #4338ca;
    border-color: rgba(99, 102, 241, 0.38);
    transform: translateY(-2px) scale(1.1);
}
.rpt-log-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.09);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #4338ca;
    white-space: nowrap;
}
/* ── Pagination bar ── */
.rpt-log-pagination {
    padding-top: 0.75rem;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
}
.rpt-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    color: #64748b;
    background: rgba(100, 116, 139, 0.07);
    border: 1px solid rgba(100, 116, 139, 0.15);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    cursor: pointer;
    user-select: none;
}
.rpt-page-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
    border-color: rgba(99, 102, 241, 0.25);
}
.rpt-page-btn--active {
    background: rgba(99, 102, 241, 0.14);
    color: #4338ca;
    border-color: rgba(99, 102, 241, 0.32);
    font-weight: 700;
    cursor: default;
    pointer-events: none;
}
.rpt-page-btn--disabled {
    opacity: 0.32;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Light-mode refinements ── */
body:not(.dark-mode) .rpt-activity-table {
    border-color: rgba(15, 23, 42, 0.18);
    background: rgba(255, 255, 255, 0.75);
}
body:not(.dark-mode) .rpt-activity-table thead th,
body:not(.dark-mode) .rpt-activity-table tbody td,
body:not(.dark-mode) .rpt-row-num,
body:not(.dark-mode) .rpt-activity-detail,
body:not(.dark-mode) .rpt-activity-type,
body:not(.dark-mode) .rpt-account-name,
body:not(.dark-mode) .rpt-date-chip,
body:not(.dark-mode) .rpt-hours-badge,
body:not(.dark-mode) .rpt-status-count {
    color: #0b1220 !important;
}
body:not(.dark-mode) .rpt-activity-table thead th,
body:not(.dark-mode) .rpt-activity-table tbody td,
body:not(.dark-mode) .rpt-activity-table tbody tr.rpt-activity-row {
    border-color: rgba(15, 23, 42, 0.14);
}
body:not(.dark-mode) .rpt-activity-table tbody tr.rpt-activity-row { border-bottom-color: rgba(15, 23, 42, 0.055); }
body:not(.dark-mode) .rpt-row-num { color: rgba(11, 18, 32, 0.74) !important; }
body:not(.dark-mode) .rpt-hours-badge { color: #1d4ed8 !important; }

/* ── Dark-mode overrides ── */
body.dark-mode .rpt-activity-table,
body.dark-mode .rpt-activity-table th,
body.dark-mode .rpt-activity-table td,
body.dark-mode .rpt-activity-table .rpt-row-num,
body.dark-mode .rpt-activity-table .rpt-activity-type,
body.dark-mode .rpt-activity-table .rpt-activity-detail,
body.dark-mode .rpt-activity-table .rpt-account-name,
body.dark-mode .rpt-activity-table .rpt-date-chip,
body.dark-mode .rpt-activity-table .rpt-hours-badge {
    color: #e2e8f0 !important;
}
body.dark-mode .rpt-activity-table {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(15, 23, 42, 0.78) !important;
}
body.dark-mode .rpt-activity-table th,
body.dark-mode .rpt-activity-table td {
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-right-color: rgba(255, 255, 255, 0.08) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    background-color: transparent !important;
    line-height: 1.35;
}
body.dark-mode .rpt-activity-table thead th {
    background: rgba(15, 23, 42, 0.28) !important;
}
body.dark-mode .rpt-activity-table tbody tr.rpt-activity-row {
    border-bottom-color: rgba(255, 255, 255, 0.055);
    height: 72px !important;
    min-height: 72px !important;
    background: rgba(15, 23, 42, 0.24);
}
body.dark-mode .rpt-activity-table tbody tr.rpt-activity-row td {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
body.dark-mode .rpt-activity-table tbody tr.rpt-activity-row:hover {
    background: rgba(99, 102, 241, 0.07);
}
body.dark-mode .rpt-activity-table tbody tr.rpt-activity-row--editing {
    background: rgba(245, 158, 11, 0.09);
    box-shadow: inset 3px 0 0 #f59e0b;
}
body.dark-mode .rpt-row-num { color: rgba(255, 255, 255, 0.5) !important; }
body.dark-mode .rpt-hours-badge {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.28);
    color: #93c5fd !important;
}
body.dark-mode .rpt-edit-btn {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.24);
    color: #a5b4fc;
}
body.dark-mode .rpt-edit-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #c7d2fe;
    border-color: rgba(99, 102, 241, 0.4);
}
body.dark-mode .rpt-log-count-badge {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.28);
    color: #a5b4fc;
}
body.dark-mode .rpt-log-pagination {
    border-top-color: rgba(255, 255, 255, 0.07);
}
body.dark-mode .rpt-page-btn {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.14);
}
body.dark-mode .rpt-page-btn:hover {
    background: rgba(99, 102, 241, 0.14);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.28);
}
body.dark-mode .rpt-page-btn--active {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.38);
}

/* ── Activity Logs page – delete button ── */
.rpt-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(239, 68, 68, 0.07);
    border: 1px solid rgba(239, 68, 68, 0.18);
    color: #dc2626;
    border-radius: 7px;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rpt-delete-btn:hover {
    background: rgba(239, 68, 68, 0.16);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.35);
}
/* ── Activity Logs – request link ── */
.al-req-link {
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    color: #3b82f6;
}
.al-req-link:hover { color: #1d4ed8; text-decoration: underline; }
/* ── Activity Logs – status badges ── */
.al-status-badge { font-weight: 600; border-radius: 6px; padding: 0.2rem 0.55rem; font-size: 0.75rem; }
.al-status--done {
    background: rgba(16, 185, 129, 0.12);
    color: #065f46;
    border: 1px solid rgba(16, 185, 129, 0.28);
}
.al-status--wip {
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, 0.25);
}
.al-status--pending {
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
/* dark mode */
body.dark-mode .rpt-delete-btn {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.22);
    color: #fca5a5;
}
body.dark-mode .rpt-delete-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.38);
}
body.dark-mode .al-req-link { color: #60a5fa; }
body.dark-mode .al-req-link:hover { color: #93c5fd; }
body.dark-mode .al-status--done { background: rgba(16,185,129,0.15); color: #6ee7b7; border-color: rgba(16,185,129,0.3); }
body.dark-mode .al-status--wip  { background: rgba(59,130,246,0.14); color: #93c5fd; border-color: rgba(59,130,246,0.3); }
body.dark-mode .al-status--pending { background: rgba(245,158,11,0.14); color: #fcd34d; border-color: rgba(245,158,11,0.3); }



/* ==========================================================================
   User preference body classes (Settings tab)
   Emitted server-side on <body> from the authenticated user's prefs:
     pref-compact-tables · pref-large-text · pref-reduce-effects · pref-reduce-motion
   ========================================================================== */

/* ---- Appearance: compact tables — denser rows on every data table ---- */
body.pref-compact-tables .table > tbody > tr > td,
body.pref-compact-tables .table > thead > tr > th,
body.pref-compact-tables .sqr-tracker tbody td,
body.pref-compact-tables .sqr-tracker thead th,
body.pref-compact-tables .sqr-esg-table tbody td,
body.pref-compact-tables .dashboard-table-wrapper tbody td {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}
body.pref-compact-tables .sqr-tracker tbody td,
body.pref-compact-tables .sqr-esg-table tbody td,
body.pref-compact-tables .dashboard-table-wrapper tbody td {
    font-size: 0.8125rem !important;
    line-height: 1.25 !important;
}

/* ---- Appearance/Accessibility: large text ---- */
body.pref-large-text {
    font-size: 1.075rem;
}
body.pref-large-text .table,
body.pref-large-text .sqr-tracker,
body.pref-large-text .sqr-esg-table,
body.pref-large-text .nav-link,
body.pref-large-text .btn {
    font-size: 1.02em;
}

/* ---- Performance: reduce visual effects — drop blur + animated mesh ---- */
body.pref-reduce-effects .glass-card,
body.pref-reduce-effects:not(.page-login) .navbar,
body.pref-reduce-effects .nav-avatar-menu {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
/* Swap the translucent glass fill for an opaque panel so text stays readable
   once the backdrop blur is gone (light + dark). */
body.pref-reduce-effects:not(.dark-mode) .glass-card {
    background: #ffffff !important;
}
body.pref-reduce-effects.dark-mode .glass-card {
    background: #141b2c !important;
}
body.pref-reduce-effects:not(.dark-mode):not(.page-login) .navbar {
    background: #1f2a44 !important;
}
body.pref-reduce-effects.dark-mode:not(.page-login) .navbar {
    background: #0e1426 !important;
}
/* The animated orbs are what force blurred layers to repaint every frame. */
body.pref-reduce-effects .ambient-mesh,
body.pref-reduce-effects .ambient-mesh__orb {
    animation: none !important;
}
body.pref-reduce-effects .ambient-mesh {
    opacity: 0.5;
}

/* Authenticated surfaces share the Notifications brightness hierarchy. */
body.authenticated .glass-card,
body.authenticated .card,
body.authenticated .modal-content,
body.authenticated .dropdown-menu {
    background: var(--rh-surface-panel) !important;
    border-color: var(--rh-border) !important;
    box-shadow: var(--rh-shadow-panel) !important;
    color: var(--rh-text-primary);
    --bs-heading-color: var(--rh-text-primary);
    --bs-secondary-color: var(--rh-text-secondary);
}

body.authenticated .text-muted,
body.authenticated .text-secondary {
    color: var(--rh-text-muted) !important;
}

body.authenticated :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--lg-accent) 78%, white) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--rh-focus-ring) !important;
}

body.pref-reduce-effects.authenticated :is(
    .glass-card,
    .card,
    .modal-content,
    .dropdown-menu,
    .notif-hero,
    .notif-controls,
    .notif-empty,
    .notif-card
) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--rh-surface-solid) !important;
}

/* ---- Accessibility: reduce motion — kill entrance/ambient animation ---- */
body.pref-reduce-motion .lg-enter,
body.pref-reduce-motion .lg-enter-ready .lg-enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}
body.pref-reduce-motion .ambient-mesh,
body.pref-reduce-motion .ambient-mesh__orb,
body.pref-reduce-motion .login-mesh__orb,
body.pref-reduce-motion .login-hero::before,
body.pref-reduce-motion .login-hero::after {
    animation: none !important;
}
body.pref-reduce-motion * {
    scroll-behavior: auto !important;
}

/* Dense table interaction stays immediate without disabling motion elsewhere. */
.dashboard-table-wrapper table *,
.mgmt-table-wrapper table *,
.request-activity-table-wrap table *,
[data-table-scroll-track] table *,
.rpt-activity-table * {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
}

.dashboard-table-wrapper,
.mgmt-table-wrapper,
.request-activity-table-wrap,
[data-table-scroll-track] {
    scroll-behavior: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.dashboard-table-wrapper:focus-visible,
.mgmt-table-wrapper:focus-visible,
.request-activity-table-wrap:focus-visible,
[data-table-scroll-track]:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

/* ---- Cross-page navigation: Motion-inspired directional content transition ---- */
@view-transition {
    navigation: auto;
}

.request-hub-page {
    view-transition-name: request-hub-page;
}

body.theme-switching .request-hub-page,
body.modal-open .request-hub-page,
body.requestor-modal-open .request-hub-page {
    view-transition-name: none;
}

body.theme-switching .ambient-mesh,
body.theme-switching .ambient-mesh__orb,
body.theme-switching .login-card__lens,
body.theme-switching .login-card__sheen {
    animation-play-state: paused !important;
}

::view-transition-group(request-hub-page) {
    animation-duration: 360ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-image-pair(request-hub-page) {
    isolation: isolate;
}

::view-transition-old(request-hub-page),
::view-transition-new(request-hub-page) {
    animation-duration: 360ms;
    animation-fill-mode: both;
    mix-blend-mode: normal;
    transform-origin: center top;
}

::view-transition-old(request-hub-page) {
    animation-name: request-hub-page-exit-forward;
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

::view-transition-new(request-hub-page) {
    animation-name: request-hub-page-enter-forward;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-page-transition-direction="back"]::view-transition-old(request-hub-page) {
    animation-name: request-hub-page-exit-back;
}

html[data-page-transition-direction="back"]::view-transition-new(request-hub-page) {
    animation-name: request-hub-page-enter-back;
}

@keyframes request-hub-page-exit-forward {
    to {
        opacity: 0;
        transform: translate3d(-22px, 0, 0) scale(0.995);
    }
}

@keyframes request-hub-page-enter-forward {
    from {
        opacity: 0;
        transform: translate3d(28px, 0, 0) scale(0.995);
    }
}

@keyframes request-hub-page-exit-back {
    to {
        opacity: 0;
        transform: translate3d(22px, 0, 0) scale(0.995);
    }
}

@keyframes request-hub-page-enter-back {
    from {
        opacity: 0;
        transform: translate3d(-28px, 0, 0) scale(0.995);
    }
}

@media (prefers-reduced-motion: reduce) {
    .request-hub-page {
        view-transition-name: none;
    }

    ::view-transition-group(request-hub-page),
    ::view-transition-old(request-hub-page),
    ::view-transition-new(request-hub-page) {
        animation: none !important;
    }
}

body.pref-reduce-motion .request-hub-page {
    view-transition-name: none;
}