/* =====================================================================
 * EASRMS - THEME STYLE 4 (Minimal Clean / Notion-style)
 * Performance-first overrides applied AFTER all base CSS.
 *
 * Design principles
 * - Surface: white #fff on #FAFAFA background
 * - Borders: subtle #E5E7EB, hover -> indigo #6366F1
 * - Shadows: very soft at rest, lifted on hover
 * - Icons: light-indigo bubble #EEF2FF, hover -> solid #6366F1 + white icon
 * - Primary action: charcoal #111827, hover -> indigo
 * - Radii: cards 16px, icons/inputs 12px, buttons 10px, badges 999px
 * - Transitions: 0.2s ease (GPU-friendly transforms only)
 * - 60fps target: no heavy blurs, no large drop-shadow chains, no infinite anims
 * ===================================================================== */

/* ==== 1. TOKENS — override design-system.css ==== */
:root {
    /* Core */
    --color-primary: #6366F1;
    --color-primary-hover: #4F46E5;
    --color-primary-light: #EEF2FF;
    --color-primary-dark: #4338CA;

    /* Surfaces */
    --color-bg: #FAFAFA;
    --color-surface: #FFFFFF;
    --color-surface-hover: #F9FAFB;

    /* Borders */
    --color-border: #E5E7EB;
    --color-border-light: #F3F4F6;

    /* Text */
    --color-text-primary: #111827;
    --color-text-secondary: #4B5563;
    --color-text-muted: #6B7280;

    /* Shadows — soft & subtle */
    --s4-shadow-rest:   0 1px 2px rgba(17, 24, 39, .04), 0 1px 3px rgba(17, 24, 39, .03);
    --s4-shadow-hover:  0 12px 28px -10px rgba(99, 102, 241, .18), 0 4px 12px -6px rgba(17, 24, 39, .06);
    --s4-shadow-card:   0 4px 12px -4px rgba(17, 24, 39, .05);
    --s4-shadow-lift:   0 16px 36px -12px rgba(99, 102, 241, .22), 0 6px 14px -6px rgba(17, 24, 39, .06);

    /* Transitions */
    --s4-t-fast:   .15s ease;
    --s4-t:        .2s ease;
    --s4-t-slow:   .28s ease;

    /* Radii */
    --s4-r-sm: 8px;
    --s4-r-md: 10px;
    --s4-r-lg: 12px;
    --s4-r-xl: 16px;
    --s4-r-2xl: 20px;
    --s4-r-full: 999px;
}

/* ==== 2. GLOBAL BASE ==== */
html { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
body {
    background: var(--color-bg);
    color: var(--color-text-primary);
    font-family: 'Inter', system-ui, sans-serif;
}

/* Subtle diagonal stripe background — VERY light, only on desktop, no animation */
@media (min-width: 1024px) {
    body::before {
        content: '';
        position: fixed; inset: 0; z-index: -1; pointer-events: none;
        background:
            linear-gradient(45deg, transparent 49.6%, #E5E7EB 49.6%, #E5E7EB 50.4%, transparent 50.4%);
        background-size: 32px 32px;
        opacity: .12;
    }
}

/* Container background overrides */
.dashboard-container { background: var(--color-bg); }
.main-content { background: var(--color-bg) !important; }

/* Selection */
::selection { background: rgba(99,102,241,.18); color: #111827; }

/* Smoother scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }
* { scrollbar-width: thin; scrollbar-color: #D1D5DB transparent; }

/* ==== 3. SIDEBAR — Style 4 clean white + indigo active ==== */
.sidebar {
    background: #FFFFFF !important;
    border-right: 1px solid var(--color-border) !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.01) !important;
}
.sb-brand {
    border-bottom: 1px solid var(--color-border-light) !important;
}
.sb-brand-icon {
    background: linear-gradient(135deg, #111827, #4338CA) !important;
    border-radius: var(--s4-r-lg) !important;
    box-shadow: 0 4px 12px -4px rgba(67, 56, 202, .35) !important;
}
.sb-name-main { color: var(--color-text-primary) !important; font-family: 'Inter', sans-serif !important; }
.sb-name-sub { color: var(--color-text-muted) !important; }

.sb-profile { border-bottom: 1px solid var(--color-border-light) !important; }
.sb-profile img { border-color: var(--color-primary-light) !important; }
.sb-profile-info h4,
.sb-profile-admin .sb-profile-name { color: var(--color-text-primary) !important; font-family: 'Inter', sans-serif !important; }
.sb-role,
.sb-profile-admin .sb-profile-role {
    background: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
    border-radius: var(--s4-r-full) !important;
    text-transform: uppercase;
    font-weight: 700 !important;
}

.sb-current-page { border-bottom: 1px solid var(--color-border-light) !important; }
.sb-page-label { color: var(--color-primary) !important; font-family: 'Inter', sans-serif !important; }

.sb-section-label { color: #9CA3AF !important; }

/* Nav links — clean hover, solid indigo active */
.sb-link {
    color: var(--color-text-secondary) !important;
    border-radius: var(--s4-r-md) !important;
    font-family: 'Inter', sans-serif !important;
    transition: background var(--s4-t-fast), color var(--s4-t-fast) !important;
}
.sb-link-icon {
    background: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
    border-radius: var(--s4-r-sm) !important;
    transition: background var(--s4-t-fast), color var(--s4-t-fast) !important;
}
.sb-link:hover {
    background: var(--color-surface-hover) !important;
    color: var(--color-text-primary) !important;
}
.sb-link:hover .sb-link-icon {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: none !important;  /* remove scale jitter */
}
.sb-link.active {
    background: var(--color-text-primary) !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: 0 6px 18px -8px rgba(17, 24, 39, .35) !important;
    font-weight: 600 !important;
}
.sb-link.active .sb-link-icon {
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
}
.sb-link.active .sb-link-text { color: #fff !important; }
.sb-link-arrow { color: rgba(255,255,255,.85) !important; }

/* Logout — clean ghost red */
.sb-footer { border-top: 1px solid var(--color-border-light) !important; }
.sb-logout {
    background: #fff !important;
    color: #DC2626 !important;
    border: 1px solid #FECACA !important;
    border-radius: var(--s4-r-md) !important;
    font-family: 'Inter', sans-serif !important;
    transition: background var(--s4-t-fast), color var(--s4-t-fast), border-color var(--s4-t-fast) !important;
}
.sb-logout:hover {
    background: #DC2626 !important;
    color: #fff !important;
    border-color: #DC2626 !important;
}

/* ==== 4. MOBILE TOP BAR ==== */
.mob-topbar {
    background: #fff !important;
    border-bottom: 1px solid var(--color-border) !important;
    box-shadow: 0 1px 3px rgba(17,24,39,.04) !important;
}
.mob-menu-btn {
    background: var(--color-surface-hover) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--s4-r-md) !important;
    color: var(--color-text-primary) !important;
    transition: background var(--s4-t-fast), color var(--s4-t-fast) !important;
}
.mob-menu-btn:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    border-color: var(--color-primary) !important;
}
.mtb-name { color: var(--color-text-primary) !important; font-family: 'Inter', sans-serif !important; }
.mob-topbar-avatar { border-color: var(--color-primary-light) !important; }

/* ==== 5. PAGE HEADER ==== */
.page-header h1,
.dash-header-content h1 {
    color: var(--color-text-primary) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
}
.dash-header-content h1 i { color: var(--color-primary) !important; }
.page-header p,
.dash-header-content p { color: var(--color-text-muted) !important; }

.dash-date-badge {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--s4-r-md) !important;
    color: var(--color-text-secondary) !important;
}
.dash-date-badge i { color: var(--color-primary) !important; }

/* ==== 6. CARDS — Style 4 hallmark ==== */
.card,
.content-card,
.adm-dash-card,
.stat-card,
.lv-app-paper {
    background: #fff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--s4-r-xl) !important;
    box-shadow: var(--s4-shadow-card) !important;
    transition: border-color var(--s4-t), box-shadow var(--s4-t), transform var(--s4-t) !important;
}
.card:hover,
.content-card:hover,
.adm-dash-card:hover,
.stat-card:hover {
    border-color: var(--color-primary) !important;
    box-shadow: var(--s4-shadow-hover) !important;
    transform: translateY(-2px) !important;
}

/* Card icon containers — Style 4 hover flip */
.adm-dash-ico,
.stat-icon {
    background: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
    border-radius: var(--s4-r-lg) !important;
    transition: background var(--s4-t), color var(--s4-t) !important;
}
.adm-dash-card:hover .adm-dash-ico,
.stat-card:hover .stat-icon {
    background: var(--color-primary) !important;
    color: #fff !important;
}
/* Keep semantic color variants but adopt soft-tint style */
.adm-dash-ico.blue   { background: #DBEAFE !important; color: #2563EB !important; }
.adm-dash-ico.green  { background: #D1FAE5 !important; color: #059669 !important; }
.adm-dash-ico.purple { background: #EDE9FE !important; color: #7C3AED !important; }
.adm-dash-ico.amber  { background: #FEF3C7 !important; color: #D97706 !important; }
.adm-dash-ico.red    { background: #FEE2E2 !important; color: #DC2626 !important; }
/* On hover invert each color */
.adm-dash-card:hover .adm-dash-ico.blue   { background: #2563EB !important; color: #fff !important; }
.adm-dash-card:hover .adm-dash-ico.green  { background: #059669 !important; color: #fff !important; }
.adm-dash-card:hover .adm-dash-ico.purple { background: #7C3AED !important; color: #fff !important; }
.adm-dash-card:hover .adm-dash-ico.amber  { background: #D97706 !important; color: #fff !important; }
.adm-dash-card:hover .adm-dash-ico.red    { background: #DC2626 !important; color: #fff !important; }

.adm-dash-card h3,
.stat-content h4 { color: var(--color-text-primary) !important; font-family: 'Inter', sans-serif !important; }
.adm-dash-card p,
.stat-content p { color: var(--color-text-muted) !important; }

/* Welcome banner — clean flat */
.adm-dash-welcome {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--s4-r-xl) !important;
    box-shadow: var(--s4-shadow-card) !important;
}
.adm-dash-welcome-content h2 { color: var(--color-text-primary) !important; }
.adm-dash-welcome-content p,
.adm-dash-hint { color: var(--color-text-muted) !important; }

/* ==== 7. BUTTONS — Style 4 charcoal -> indigo ==== */
.btn,
.adm-btn,
.lx-submit,
.pw-change-btn,
.pw-change-trigger {
    font-family: 'Inter', sans-serif !important;
    border-radius: var(--s4-r-md) !important;
    transition: background var(--s4-t-fast), color var(--s4-t-fast), border-color var(--s4-t-fast), transform var(--s4-t-fast) !important;
    font-weight: 600 !important;
}
.btn-primary,
.pw-change-trigger {
    background: var(--color-text-primary) !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid var(--color-text-primary) !important;
    box-shadow: none !important;
}
.btn-primary:hover,
.pw-change-trigger:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px -6px rgba(99,102,241,.4) !important;
}
.btn-primary i,
.pw-change-trigger i { transition: transform var(--s4-t-fast); }
.btn-primary:hover i,
.pw-change-trigger:hover i { transform: translateX(2px); }

.btn-secondary {
    background: #fff !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border) !important;
}
.btn-secondary:hover {
    background: var(--color-surface-hover) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.btn-success { background: #059669 !important; border-color: #059669 !important; color: #fff !important; }
.btn-success:hover { background: #047857 !important; border-color: #047857 !important; }
.btn-danger  { background: #DC2626 !important; border-color: #DC2626 !important; color: #fff !important; }
.btn-danger:hover  { background: #B91C1C !important; border-color: #B91C1C !important; }

.btn-ghost { background: transparent !important; color: var(--color-text-secondary) !important; }
.btn-ghost:hover { background: var(--color-surface-hover) !important; color: var(--color-text-primary) !important; }

.pw-change-btn-primary { background: var(--color-primary) !important; }
.pw-change-btn-primary:hover { background: var(--color-primary-hover) !important; }
.pw-change-btn-secondary { background: #F3F4F6 !important; color: var(--color-text-secondary) !important; }
.pw-change-btn-secondary:hover { background: #E5E7EB !important; }

/* ==== 8. FORMS ==== */
.form-control,
.lv-app-input,
.pw-change-modal-body input[type="password"] {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--s4-r-lg) !important;
    background: #fff !important;
    color: var(--color-text-primary) !important;
    transition: border-color var(--s4-t-fast), box-shadow var(--s4-t-fast) !important;
    font-family: 'Inter', sans-serif !important;
}
.form-control:focus,
.lv-app-input:focus,
.pw-change-modal-body input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .12) !important;
    outline: none !important;
}
.form-label,
.lv-app-field label { color: var(--color-text-primary) !important; font-weight: 600 !important; }

/* ==== 9. TABLES ==== */
.table-wrapper {
    background: #fff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--s4-r-xl) !important;
    box-shadow: var(--s4-shadow-card) !important;
    overflow: hidden;
}
.table th {
    background: #F9FAFB !important;
    color: var(--color-text-primary) !important;
    border-bottom: 1px solid var(--color-border) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
}
.table td {
    color: var(--color-text-secondary) !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}
.table tbody tr { transition: background var(--s4-t-fast); }
.table tbody tr:hover { background: var(--color-surface-hover) !important; }

/* ==== 10. BADGES ==== */
.badge {
    border-radius: var(--s4-r-full) !important;
    padding: 4px 12px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: 0 !important;
}
.badge-primary { background: var(--color-primary-light) !important; color: var(--color-primary) !important; }

/* ==== 11. ALERTS ==== */
.alert {
    border-radius: var(--s4-r-lg) !important;
    border-left-width: 3px !important;
    font-family: 'Inter', sans-serif !important;
}

/* ==== 12. TABS ==== */
.tab-container,
.lv-tabs {
    background: #F3F4F6 !important;
    border-radius: var(--s4-r-lg) !important;
    border: 1px solid var(--color-border) !important;
    padding: 4px !important;
}
.tab-btn,
.lv-tab {
    border-radius: var(--s4-r-sm) !important;
    color: var(--color-text-muted) !important;
    font-family: 'Inter', sans-serif !important;
    transition: background var(--s4-t-fast), color var(--s4-t-fast) !important;
}
.tab-btn:hover,
.lv-tab:hover { color: var(--color-text-primary) !important; background: rgba(255,255,255,.7) !important; }
.tab-btn.active,
.lv-tab.active {
    background: #fff !important;
    color: var(--color-text-primary) !important;
    box-shadow: 0 1px 3px rgba(17,24,39,.06) !important;
    border-color: transparent !important;
}

/* ==== 13. FOOTER (lx-foot login + sb-foot panels) ==== */
.sb-footer { background: transparent; }
.lx-foot { color: var(--color-text-muted) !important; }

/* ==== 14. DASH SECTIONS (decorative double border) — soften ==== */
.dash-section { border-top: 1px solid var(--color-border) !important; }

/* ==== 15. EMPTY STATES ==== */
.empty-state { color: var(--color-text-muted) !important; }
.empty-state h3 { color: var(--color-text-secondary) !important; font-family: 'Inter', sans-serif !important; }

/* ==== 16. WELCOME / MODAL POPUPS ==== */
.welcome-popup {
    background: #fff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--s4-r-xl) !important;
    box-shadow: var(--s4-shadow-lift) !important;
}
.welcome-popup img { border-color: var(--color-primary-light) !important; }
.welcome-text h4 { color: var(--color-text-primary) !important; font-family: 'Inter', sans-serif !important; }
.welcome-text p { color: var(--color-text-muted) !important; }

.pw-change-modal {
    border-radius: var(--s4-r-xl) !important;
    box-shadow: var(--s4-shadow-lift) !important;
}
.pw-change-modal-header {
    background: var(--color-text-primary) !important;
    background-image: none !important;
}

/* ==== 17. STAT GRID GAP — consistent ==== */
.stats-grid { gap: 16px !important; }

/* ==== 18. ANIMATIONS — keep snappy, no infinite loops ==== */
@keyframes s4-slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.adm-dash-card,
.stat-card,
.content-card,
.card { animation: s4-slideUp .24s ease backwards; }
.adm-dash-card:nth-child(1) { animation-delay: .02s; }
.adm-dash-card:nth-child(2) { animation-delay: .05s; }
.adm-dash-card:nth-child(3) { animation-delay: .08s; }
.adm-dash-card:nth-child(4) { animation-delay: .11s; }
.adm-dash-card:nth-child(5) { animation-delay: .14s; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    body::before { display: none; }
}

/* ==== 19. PERFORMANCE OPTIMIZATIONS ==== */
.sidebar, .main-content { will-change: auto; }
.adm-dash-card, .stat-card, .content-card, .card, .table tbody tr, .sb-link, .btn {
    transform: translateZ(0);  /* promote to its own layer to keep animations 60fps */
}
.main-content { content-visibility: auto; contain-intrinsic-size: auto 800px; }
.content-card, .adm-dash-card, .stat-card { contain: layout style; }

/* ==== 20. RESPONSIVENESS — breakpoints sweep ==== */

/* >= 1280px : desktop is default */

/* Tablet landscape */
@media (max-width: 1024px) {
    .main-content { padding: 24px !important; }
    .adm-dash-stats { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Tablet portrait */
@media (max-width: 900px) {
    body::before { display: none; }
    .main-content { padding: 22px !important; }
}

/* Phone landscape */
@media (max-width: 768px) {
    .mob-topbar { display: flex !important; }
    .sidebar {
        transform: translateX(-100%);
        width: 280px !important;
        transition: transform .26s cubic-bezier(.4, 0, .2, 1) !important;
        z-index: 200 !important;
        box-shadow: 8px 0 32px -12px rgba(0,0,0,.18) !important;
    }
    .sidebar.active { transform: translateX(0); }
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 70px 16px 24px !important;
    }
    .adm-dash-stats { grid-template-columns: repeat(2, 1fr) !important; }
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .dash-page-header { flex-direction: column; align-items: flex-start !important; }
}

/* Phone */
@media (max-width: 560px) {
    .main-content { padding: 64px 12px 20px !important; }
    .adm-dash-card { padding: 14px !important; }
    .stat-card { padding: 14px 16px !important; }
    .adm-dash-card h3 { font-size: 1.25rem !important; }
    .page-header h1, .dash-header-content h1 { font-size: 1.2rem !important; }
    .stats-grid { gap: 10px !important; }
    .table-wrapper { border-radius: var(--s4-r-lg) !important; }
    .table th, .table td { padding: 10px 12px !important; font-size: .82rem !important; }
    .btn { padding: 9px 16px !important; font-size: .82rem !important; }
}

/* Small phone */
@media (max-width: 380px) {
    .main-content { padding: 60px 10px 18px !important; }
    .adm-dash-stats { grid-template-columns: 1fr !important; }
    .stats-grid { grid-template-columns: 1fr !important; }
    .mtb-name { font-size: .78rem !important; }
}

/* Tiny phones */
@media (max-width: 320px) {
    .main-content { padding: 58px 8px 16px !important; }
}

/* Landscape phones */
@media (max-height: 480px) and (orientation: landscape) {
    .sidebar { overflow-y: auto; }
}

/* =====================================================================
 * PHASE 2 — MOBILE RESPONSIVENESS HARDENING
 * Touch targets, tables, modals, no-zoom forms, safe-area, hover-on-touch.
 * ===================================================================== */

/* ---- Mobile-friendly form inputs (no iOS zoom) ---- */
@media (max-width: 768px) {
    input, select, textarea,
    .form-control, .lv-app-input, .lx-input {
        font-size: 16px !important; /* iOS does not zoom when font >= 16 */
    }
    /* Touch targets — min 40x40 */
    .btn, .sb-link, .sb-logout, .mob-menu-btn, .lx-eye, .pw-change-btn,
    .pw-change-trigger, .lx-forgot, .lx-submit, .tab-btn, .lv-tab,
    .adm-dash-card, .stat-card {
        min-height: 40px;
    }
    button, [role="button"], a.btn, .btn { touch-action: manipulation; }
}

/* ---- Tables: horizontal-scroll wrapper on mobile ---- */
@media (max-width: 900px) {
    .table-wrapper, .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    .table-wrapper::-webkit-scrollbar { height: 6px; }
    .table { min-width: 600px; }
    .table th, .table td { white-space: nowrap; }
}

/* ---- Filter form / toolbar — stack neatly ---- */
@media (max-width: 768px) {
    .filter-form, .lv-tabs, .tab-container,
    .adm-toolbar, .adm-att-toolbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .filter-group, .filter-form > * { flex: 1 1 100%; min-width: 0; }
    .filter-group .form-control { width: 100% !important; }
    .lv-tabs, .tab-container {
        width: 100% !important;
        overflow-x: auto;
        flex-wrap: nowrap !important;
    }
    .lv-tab, .tab-btn { flex-shrink: 0; }
}

/* ---- Modal dialogs: full-width on mobile ---- */
@media (max-width: 560px) {
    .pw-change-modal, .welcome-popup, .confirm-box {
        max-width: calc(100vw - 24px) !important;
        margin: 0 12px !important;
    }
    .pw-change-modal-overlay, .confirm-popup { padding: 12px !important; }
    .pw-change-modal-header { padding: 16px 18px !important; }
    .pw-change-modal-body, .pw-change-modal-footer { padding: 16px !important; }
}

/* ---- Disable :hover on touch devices (avoids stuck hover state) ---- */
@media (hover: none) {
    .adm-dash-card:hover, .stat-card:hover, .content-card:hover, .card:hover {
        transform: none !important;
        box-shadow: var(--s4-shadow-card) !important;
        border-color: var(--color-border) !important;
    }
    .adm-dash-card:hover .adm-dash-ico, .stat-card:hover .stat-icon {
        background: var(--color-primary-light) !important;
        color: var(--color-primary) !important;
    }
    .btn-primary:hover, .pw-change-trigger:hover {
        background: var(--color-text-primary) !important;
        transform: none !important;
        box-shadow: none !important;
    }
    .sb-link:hover .sb-link-icon { transform: none !important; }
    .lx-feat:hover { transform: none !important; box-shadow: var(--s4-shadow-card) !important; border-color: var(--color-border) !important; }
}

/* But still apply :active visual feedback on touch */
.adm-dash-card:active, .stat-card:active, .btn:active, .sb-link:active, .lx-feat:active {
    transform: scale(.98) !important;
    transition: transform 80ms ease !important;
}

/* ---- Safe-area inset for iPhone notch / home indicator ---- */
.main-content {
    padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
}
.mob-topbar {
    padding-top: env(safe-area-inset-top);
    height: calc(54px + env(safe-area-inset-top)) !important;
}
@media (max-width: 768px) {
    .main-content {
        padding-top: calc(70px + env(safe-area-inset-top)) !important;
    }
    .sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ---- Long text & emails — never overflow ---- */
.sb-profile-name, .sb-profile-info h4, .mtb-name,
.adm-dash-card h3, .stat-content h4,
.lv-app-value, .badge {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ---- Images & avatars — responsive defaults ---- */
img { max-width: 100%; height: auto; }
.sb-profile img, .mob-topbar-avatar { object-fit: cover; }

/* ---- Print-friendly (when admins print reports) ---- */
@media print {
    .sidebar, .mob-topbar, .sb-footer, .btn, .lv-tabs, .tab-container,
    .filter-form, .overlay-bg, body::before {
        display: none !important;
    }
    .main-content {
        margin: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        background: #fff !important;
    }
    .card, .content-card, .adm-dash-card, .stat-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        page-break-inside: avoid;
    }
}

/* ---- High-DPI text crispness ---- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}

/* ==== 21. UTILITIES (Style 4 friendly) ==== */
.s4-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--s4-r-xl);
    padding: 22px;
    box-shadow: var(--s4-shadow-card);
    transition: border-color var(--s4-t), box-shadow var(--s4-t), transform var(--s4-t);
}
.s4-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--s4-shadow-hover);
    transform: translateY(-2px);
}
.s4-icon {
    width: 44px; height: 44px;
    border-radius: var(--s4-r-lg);
    background: var(--color-primary-light);
    color: var(--color-primary);
    display: grid; place-items: center;
    font-size: 18px;
    transition: background var(--s4-t), color var(--s4-t);
}
.s4-card:hover .s4-icon {
    background: var(--color-primary);
    color: #fff;
}
.s4-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--color-text-primary);
    color: #fff;
    padding: 10px 18px;
    border: none;
    border-radius: var(--s4-r-md);
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    transition: background var(--s4-t-fast), transform var(--s4-t-fast), box-shadow var(--s4-t-fast);
    font-family: 'Inter', sans-serif;
}
.s4-btn:hover {
    background: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px rgba(99,102,241,.4);
}
.s4-btn:active { transform: translateY(0); }
.s4-btn i { transition: transform var(--s4-t-fast); }
.s4-btn:hover i { transform: translateX(2px); }